/* Visual layer: keep the editor and exported display logic independent. */
:root{--bg:#0d1218;--panel:#151d27;--input:#101720;--border:#2b3744;--text:#e6edf5;--muted:#a2b0bf;--green:#82e5c1;--green-dim:#213a36;color-scheme:dark}
body{background:radial-gradient(ellipse at 70% 0,#1b303a66,transparent 48%),var(--bg);font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:var(--text)}
.rail{width:72px;background:#101720;border-color:#26323e;padding-top:25px}.app-shell{margin-left:72px}.brand-mark{background:#82e5c1;border-radius:12px;box-shadow:0 4px 20px #62d9b21c}.rail-button{color:#95a7b7}.rail-button.active{background:#203b36;border-color:#37594f;color:#9eefd4}.rail-line{background:#30404b}.version{font-size:11px;color:#9bafbc}
.topbar{height:78px;background:#10172066;border-color:#26323e;padding:0 36px}.wordmark{font-size:20px;letter-spacing:.5px}.wordmark span{font-size:11px;color:#92a5b5;letter-spacing:2px}.local-badge{color:#9eb9ad}.top-right{gap:24px}.top-right>.quiet{color:#c2d0dc}
main{max-width:1600px;padding:30px 36px 0}.page-heading{padding:0 0 28px;margin-bottom:0;gap:20px}.page-kicker{color:#8bdcc1;font-size:12px;letter-spacing:2px;margin-bottom:10px}.page-heading h1{font-size:32px;font-weight:650;letter-spacing:1px;margin:0 0 10px}.page-heading p{font-size:15px;color:#a8b8c8;line-height:1.8}.page-heading>.context-guide{border:1px solid #384958;border-radius:9px;padding:11px 17px;color:#d2e2ee;white-space:nowrap;text-decoration:none;background:#18232e}
.workspace{grid-template-columns:400px minmax(0,1fr);gap:26px}.panel{border-color:#2c3845;background:#151d27;border-radius:16px;box-shadow:0 8px 30px #0000001c}.result-column{gap:22px}.step-number{display:inline-grid;place-items:center;flex-shrink:0;width:29px;height:29px;border:1px solid #40594f;border-radius:8px;font:12px Consolas,monospace;color:#9bedcf;background:#243c36}
.mixed-toggle{display:flex;align-items:center;gap:13px;padding:22px 24px;border-bottom:0}.mixed-toggle strong{font-size:18px;color:#e3edf6}.mixed-toggle p{font-size:14px;margin:5px 0 0;color:#a5b5c5;line-height:1.6}.clear-content-actions{padding:0 24px 20px;gap:9px;border:0}.clear-content-actions button{min-height:39px;background:#1b2833;border-color:#344654;color:#b9c9d7;font-size:14px;font-weight:500;border-radius:8px}.clear-content-actions #sensor-example{background:#233d38;color:#a6efd4;border-color:#40675b;min-height:43px}.clear-content-actions #sensor-example:hover{background:#2e5045}.clear-content-actions button:hover{background:#283b4a}.source-tabs{margin:0 24px;padding:4px;border:1px solid #2e3d4a;background:#101720;border-radius:11px;gap:4px}.source-tabs button{height:42px;font-size:16px;color:#aab9c7;border-radius:7px}.source-tabs button.active{background:#2a3a47;border-color:#3a5160;color:#ecf5f8}.source-tabs button>span{font-size:17px}
.settings-body{padding:20px 24px 24px}.section-caption{display:none}.field-label{font-size:15px;color:#d1dce7;margin:18px 0 10px}.field-label span,.field-label output{font-size:12px;color:#9cb1c1}.field-label output{color:#98e5cb}textarea,select,input[type=number]{background:#0f1720;border-color:#364552;border-radius:9px;color:#e0eaf3}textarea{height:134px;line-height:1.8;padding:14px 15px;font-size:17px;max-height:360px}textarea:focus,select:focus,input:focus{border-color:#83cfb6;box-shadow:0 0 0 3px #82e5c110}input[type=number],select{height:43px}input[type=range],input[type=checkbox]{accent-color:#82e5c1}.under-field{font-size:13px;color:#a3b4c3;line-height:1.85;margin-top:10px}.value-buttons{gap:7px;margin-top:12px}.value-buttons button{background:#1d2c38;border:1px solid #3a4c5b;border-radius:7px;color:#c9e1ec;font-size:13px;padding:8px 9px}.value-buttons button:hover{background:#294554}#value-settings{background:#182c2b;border:1px solid #35564d;border-radius:12px;padding:16px}#value-settings>strong{font-size:15px;color:#aeebd7}#value-inputs label{font-size:14px;color:#c0d4d7}#value-inputs input{background:#102020;border-color:#406259;color:#d9f4e9;border-radius:7px}#value-settings summary{font-size:14px;color:#b6e3d4;line-height:1.8}#value-code{background:#101a20;border-radius:8px;padding:12px;margin:10px 0;color:#c9e8dc}#copy-value-code{color:#9ee7cc}
.line-layout{border-color:#30404d;padding-top:6px;margin-top:22px}#line-sizes{gap:10px}#line-sizes label{padding:10px;background:#1c2834;border:1px solid #344551;border-radius:9px;justify-content:space-between;font-size:14px;color:#c5d4df}#line-sizes input{width:64px;height:36px;padding:0 7px}.presets{gap:8px}.presets button{border-color:#364755;color:#b1c5d1;border-radius:7px;background:#1b2934;padding:10px 0}.presets button.active{border-color:#669e8a;color:#b5f0d9;background:#264037}.dimension-row>div>span{color:#a3baca}.range-labels{color:#a2b5c1;font-size:12px}.quiet,.text-link{color:#abc2d0}.upload-zone{border-color:#4b6878;border-radius:12px;background:#14232e}.upload-zone strong{color:#d8e7ef}.upload-zone span{color:#a6bac9}
.panel-heading{min-height:72px;padding:18px 24px;border-color:#2b3a46}.panel-heading h2{font-size:18px;font-weight:600;gap:11px}.live-tag{font:11px "Segoe UI","Microsoft YaHei",sans-serif;border:0;border-radius:20px;background:#203e34;color:#94ddbc;padding:5px 9px;letter-spacing:0}.preview-tools{gap:13px}.preview-tools select{background:#111c25;width:110px;height:34px;border-color:#344652}.check-line{color:#adbfcc}.icon-button{color:#b1c8d5;width:34px;height:34px;border-radius:7px}.icon-button:hover{background:#283e49}
.screen-area{margin:22px 24px 0;padding:16px 18px 13px;border-radius:12px;border-color:#3a514b;background:#090f13;box-shadow:inset 0 0 0 4px #0d1919,0 8px 22px #00000024}.screen-top,.screen-bottom{color:#8ca59d;font-size:11px}.screen-top>span:last-child{color:#b0c7c3}.screen-bottom>span:last-child{color:#809b91}.canvas-container{max-width:720px;max-height:none;margin:16px auto;width:100%}.placement-controls{padding:20px 24px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 16px}.screen-choice{font-size:14px;gap:8px}.screen-choice select{max-width:300px;font-size:14px}.placement-controls #position-layer{align-self:end;font-size:13px;color:#9bdfc7;background:#20382f;border-radius:6px;padding:7px 10px;margin:0 0 4px}.position-fields{grid-column:1/-1;gap:16px;margin-top:16px}.position-fields>label{font-size:14px;min-width:140px}.position-fields input[type=number]{height:36px}.position-fields>button{border:1px solid #3c505d;border-radius:8px;padding:9px 12px;font-size:13px}.placement-controls p{grid-column:1/-1;font-size:12px;line-height:1.8;color:#b0c4cb}.placement-controls .screen-note{margin-top:0;color:#97adba}.preview-bottom{margin:4px 24px 16px}.preview-hint{font-size:12px;color:#9bb5ba}.preview-bottom .quiet{font-size:13px}.glyph-strip{border-color:#2d3c46;background:#121c25;padding:13px 24px;gap:12px}.glyph-strip>span{color:#a4bac7;font-size:12px}#glyphs button{background:#1c2c37;color:#bbd4d6;border-color:#38505a;border-radius:6px;font-size:14px}#glyphs button.active{background:#294b3f;color:#c3f7df;border-color:#719e85}
.starter-panel{border-color:#3c514e}.starter-panel>.driver-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:24px}.first-install{padding:0;min-width:0}.first-install>summary{font-size:17px;color:#dce9ef}.starter-recipe{grid-template-columns:1fr;font-size:12px;gap:5px;margin-top:16px}.starter-recipe code{font-size:14px;background:#0e1921;padding:5px 9px;border-radius:5px}.starter-options summary{font-size:13px;color:#adc3ce}.starter-config{grid-template-columns:1fr}.content-update{align-self:start;background:#1b302e;border:1px solid #3c6155;border-radius:12px;padding:18px}.content-update strong{font-size:17px;color:#d0eee3}.content-update p{font-size:14px;color:#adc9c5;line-height:1.8}.generate-button{background:#8ae4c3;color:#102a23;border-color:#8ae4c3;border-radius:9px;font-size:15px;min-height:46px;gap:10px;margin-top:18px}.generate-button:hover:not(:disabled){background:#a3eed4;filter:none}.context-guide{color:#a3ddca;font-size:13px}.sensor-help summary{font-size:14px;line-height:1.8;color:#b6e6d2}.sensor-help pre{font-size:12px;background:#11231f;padding:10px;border-radius:7px;margin-top:10px}.advanced-output>summary{background:#141f28;border-color:#30434f;border-radius:11px;font-size:14px;color:#a9bfca;padding:16px 20px}.stats-row{background:#15212c;border-color:#30414e}.toast{background:#254638;color:#e2faed;border:1px solid #618b71;box-shadow:0 10px 40px #0006;border-radius:10px;padding:14px 20px;font-size:15px}footer{color:#a1b3c2;font-size:13px;padding:28px 0}footer a{color:#b3cbd4}dialog{background:#15232e;border:1px solid #435a68;border-radius:16px;padding:28px;color:#d7e7ee}dialog::backdrop{background:#030a11b3;backdrop-filter:blur(5px)}.help-note{background:#1d3530;border-color:#39574b;color:#bfd7cc}.manual-link{background:#203831;border-color:#446257;color:#c0e7d7}
@media(min-width:1180px){.settings-panel{max-height:calc(100vh - 40px);overflow:auto;position:sticky;top:20px;scrollbar-width:thin;scrollbar-color:#49615e transparent}}
@media(max-width:1250px){main{padding:26px 24px 0}.workspace{grid-template-columns:360px minmax(0,1fr);gap:20px}.starter-panel>.driver-body{grid-template-columns:1fr}.panel-heading{padding:16px 20px}.placement-controls{grid-template-columns:1fr}.placement-controls #position-layer{justify-self:start;margin-top:10px}}
@media(max-width:1000px){.workspace{grid-template-columns:1fr}.settings-panel{position:static;max-height:none}.starter-panel>.driver-body{grid-template-columns:1fr 1fr}.canvas-container{max-height:none}.page-heading h1{font-size:29px}.source-tabs{max-width:none}}
@media(max-width:740px){.rail{display:none}.app-shell{margin-left:0}.topbar{height:64px;padding:0 18px}.top-right{gap:0}.local-badge{font-size:12px}.top-right>.quiet{display:none}.wordmark{font-size:18px}.wordmark span{display:none}main{padding:22px 16px 0}.page-heading{padding-bottom:22px;gap:14px}.page-heading h1{font-size:25px;letter-spacing:0}.page-heading p{font-size:13px}.page-kicker{font-size:11px}.page-heading>.context-guide{padding:8px 12px;margin:0;font-size:13px}.workspace{gap:18px}.panel{border-radius:13px}.mixed-toggle{padding:18px}.clear-content-actions{padding:0 18px 16px}.source-tabs{margin:0 18px}.settings-body{padding:16px 18px 20px}.panel-heading{padding:16px 18px;gap:12px}.panel-heading h2{font-size:16px}.preview-tools{width:100%;justify-content:flex-end}.screen-area{margin:16px 12px 0;padding:13px 10px}.screen-top{font-size:10px}.canvas-container{margin:14px auto}.placement-controls{padding:16px 18px 0}.position-fields{gap:12px}.position-fields>label{min-width:100px}.position-fields>button{width:auto}.preview-bottom{margin:4px 18px 14px}.preview-hint{font-size:12px}.glyph-strip{padding:12px 16px;gap:8px}.starter-panel>.driver-body{grid-template-columns:1fr;gap:22px;padding:18px}.content-update{padding:17px}.field-label span{font-size:11px}.screen-bottom>span:last-child{display:none}.toast{font-size:14px}.value-buttons button{font-size:12px}.starter-recipe{grid-template-columns:1fr}.settings-panel input,.settings-panel select{font-size:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.placement-controls #position-layer{grid-column:auto;justify-self:end;max-width:100%}
@media(max-width:1250px){.placement-controls #position-layer{grid-column:1/-1;justify-self:start}}
@media(max-width:740px){.position-fields{display:grid;grid-template-columns:1fr 1fr;align-items:start}.position-fields>label{display:grid;grid-template-columns:1fr;min-width:0;gap:7px}.position-fields input[type=number]{width:100%}.position-fields input[type=range]{grid-column:1}.position-fields>button{grid-column:1/-1;justify-self:start}.clear-content-actions button{min-height:44px}.value-buttons button{min-height:40px}.screen-choice select{max-width:none}.page-heading>.context-guide{display:none}}

#line-sizes{grid-template-columns:1fr}#line-sizes .line-row{display:grid;grid-template-columns:52px repeat(3,minmax(0,1fr));gap:8px;align-items:center;padding:12px 10px;border:1px solid #344551;border-radius:9px;background:#1c2834}#line-sizes .line-row strong{font-size:13px;font-weight:500;color:#c5d4df}#line-sizes .line-row label{display:grid;gap:6px;padding:0;border:0;border-radius:0;background:none;font-size:12px;justify-content:stretch}#line-sizes .line-row input{width:100%;font-size:14px}#reset-line-positions{margin-top:10px;font-size:13px;color:#a5e5cf}