:root{--accent:#203d50;--ink:#193448}body{color:#193448;background:#f7f9fb}header{background:#fff;border-bottom:1px solid #dde5ec}header .brand{display:flex;align-items:center;gap:12px;font-size:15px;letter-spacing:1px;color:#193448}header .brand img{display:block;width:48px;height:48px;aspect-ratio:1;border-radius:50%;object-fit:cover}.primary{background:#203d50!important}.topbar{background:#edf2f6;color:#193448}.panel{background:#fff}.tabs button.active{color:#203d50;border-color:#203d50}.stage{background:#f4f7fa}@media(max-width:700px){header .brand{font-size:12px}header .brand img{width:38px;height:38px}.head-title{display:none}header{gap:10px}.text-button{font-size:11px}}
:root .studio-consult{display:block;width:100%;margin:0 0 14px;padding:13px;border:1px solid #bccedc;border-radius:6px;background:#edf3f8;color:#203d50;cursor:pointer;font-size:14px}
button,.panel,.summary,select,input{border-radius:0!important;box-shadow:none!important}
/* Shared JIZHU navy palette; material swatches and 3D materials retain product colours. */
:root{--accent:#203d50;--ink:#193448;--muted:#697b89;--line:#dce4ea}
.topbar #browse-designs,.cloud-actions button:first-child,.gallery-card button,.gallery-filters button[aria-pressed=true],#cloud-dialog button[type=submit],#cloud-dialog .button,#message{background:#203d50!important;border-color:#203d50!important;color:#fff!important}
.beginner-start,.preset-library-launch{background:#edf2f6;border-color:#dce4ea;color:#193448;border-radius:0}
#cloud-dialog,#preset-gallery,.gallery-card,.gallery-close,.gallery-filters button,.topbar #browse-designs span{border-radius:0!important}
#cloud-dialog,#preset-gallery{color:#193448}
#cloud-dialog p,#cloud-design-title,.gallery-card p,.gallery-card small,#preset-gallery header p{color:#697b89}
.gallery-card .gallery-dimensions{color:#193448}
.gallery-card img{background:#f7f9fb}
button:focus-visible,summary:focus-visible,#preset-gallery button:focus-visible,.preset-library-launch:focus-visible{outline-color:#577b94}
@media(min-width:801px){body .app{height:calc(100dvh - 139px);min-height:500px}}
#top-help{display:none}
/* Compact design workspace: one command row and a larger parameter viewport. */
.topbar{margin:0;padding:0 16px;gap:12px;height:48px;min-height:48px;justify-content:flex-start;background:#fff;border-bottom:1px solid var(--line);white-space:nowrap}
.topbar .tabs{padding:0;gap:18px;border:0;flex:none;align-self:stretch}
.topbar .tabs button{border:0;padding:0;min-height:44px;flex:none;font-size:14px!important}
.topbar #reset{border:0;padding:6px 8px;min-height:36px}
.topbar>div:not(.tabs){gap:8px;margin-left:auto;align-items:center;width:auto}
.topbar>div:not(.tabs)>button{min-height:34px;padding:5px 12px;font-size:14px}
.topbar>b{font-size:12px;color:var(--muted)}
body .app{height:calc(100dvh - 136px);min-height:0;grid-template-columns:320px minmax(0,1fr)}
.panel{min-height:0;border-right:1px solid var(--line)}
.panel-content{min-height:0;padding:10px 14px;max-height:none}
.stage-top,.view-label{display:none}
.view-tools{top:10px;right:12px}
.panel h3{margin-bottom:6px;font-size:14px}
.panel .hint,.beginner-hint{margin:6px 0;line-height:1.5;font-size:12px}
.panel .label-row{align-items:center;gap:8px;flex-wrap:wrap}
.panel .label-row>span{font-size:12px}
.beginner-start.is-collapsed{padding:0 8px;margin-bottom:8px}
.beginner-start .beginner-heading button{min-height:32px}
.panel .section-line{margin:10px 0}
.size-group{margin-bottom:10px}
.size-group button{min-height:34px;padding:5px 2px;font-size:14px}
#axis-sizes{margin-top:10px}.axis-heading{margin-top:12px}
.axis-size-row{margin:6px 0}.axis-size-row select{padding:5px 8px;min-height:34px}
.advanced-assembly{margin-top:10px;padding-top:8px}.advanced-assembly summary{min-height:32px}
.panel .check-row{margin:8px 0}.panel .choices button{padding:7px 12px;min-height:34px}
.cell-map{margin:8px 0 6px;gap:4px}.map-caption{margin:2px 0 0}.cell-map button{min-height:30px;font-size:12px}
.function-options{margin:10px 0;gap:6px}.function-options button{min-height:34px;padding:6px 9px}
#perforated-options,#soft-panel-options{margin:10px 0;padding-top:10px}
#perforated-options label,#soft-panel-options>label{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:center;gap:8px;margin:6px 0;font-size:14px}
#perforated-options select,#soft-panel-options select{min-height:34px;padding:5px 8px}
.colors{margin:12px 0;gap:12px 8px}.color i{width:34px;height:34px;margin-bottom:4px}
.panel .summary{flex:none;padding:10px 14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.summary .size-summary{order:-2;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}
.summary .size-summary b{margin:0;font-size:12px;white-space:nowrap}
.summary .cloud-actions{margin:0;gap:6px}.summary .cloud-actions button{padding:6px;min-height:34px;font-size:14px}
#cloud-design-title:empty{display:none}#cloud-design-title{margin:0;font-size:12px}
:root .summary .studio-consult{margin:0;padding:6px;min-height:34px;font-size:14px}
.summary .summary-line{margin:0;gap:8px;flex-direction:row;align-items:center}
.summary-line>div{flex:none}.summary-line .eyebrow{display:none}.summary-line strong{margin:0;font-size:16px}
.summary-line .primary{flex:1;min-width:0;min-height:34px;padding:6px 10px;font-size:14px}
.summary-foot{gap:8px}.summary-foot button,.summary-foot span{font-size:12px}
@media(min-width:701px) and (max-width:800px){body .app{height:calc(100dvh - 112px)}}
@media(max-width:1100px){.topbar{gap:8px;padding:0 12px}.topbar .tabs{gap:12px}.topbar>div:not(.tabs)>button{padding:5px 8px}.topbar #browse-designs span,.topbar>b{display:none}}
@media(max-width:700px){.topbar{overflow-x:auto;scrollbar-width:thin;height:48px;min-height:48px;gap:12px}.topbar .tabs{gap:16px}.topbar>div:not(.tabs){flex:none;margin:0}.topbar #reset{flex:none}.topbar button{min-height:40px}body .app{height:auto;min-height:0;display:flex}.stage{height:48dvh;min-height:320px}.panel-content{max-height:55dvh;padding:12px 14px}.panel{border-right:0}.view-tools{top:8px;right:8px}.view-tools button{min-width:40px;min-height:40px}.summary .cloud-actions{margin:0}}
.topbar>div.topbar-actions{margin-left:8px}.topbar>b{margin-left:auto}
@media(max-width:700px){body .topbar{height:48px;min-height:48px;padding:0 12px;flex-wrap:nowrap}.topbar .tabs{width:auto;flex:0 0 auto}.topbar>div.topbar-actions{margin-left:0}}
/* v3.9.16: adjacent design information and a touch workspace without hidden commands. */
.topbar>div.workspace-metrics{margin:0 0 0 12px;gap:12px;width:auto;flex:0 1 auto;min-width:0;color:#61717e;font-size:12px}
.workspace-metrics .size-summary{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:12px}
.workspace-metrics .size-summary b{display:inline;margin:0;font-size:13px;color:#203d50}
.workspace-metrics #top-count{display:block;font-size:12px;font-weight:400;white-space:nowrap;border-left:1px solid #dce4ea;padding-left:12px}
.panel .save-panel{display:contents}.save-panel>summary{display:none}
.panel-content #axis-sizes{margin-top:0}
#axis-sizes h3 span{display:inline;float:right;margin:0;font-size:12px}
@media(min-width:701px) and (max-width:1150px){.topbar{gap:6px}.topbar .tabs{gap:10px}.topbar .tabs button,.topbar>div.topbar-actions>button{font-size:13px!important}.topbar #browse-designs strong{font-size:13px}.topbar>div.workspace-metrics{margin-left:4px;gap:6px}.workspace-metrics .size-summary{gap:4px}.workspace-metrics .size-summary>span{display:none}.workspace-metrics #top-count{padding-left:6px}.topbar #reset{font-size:0;width:32px}.topbar #reset:after{content:'↺';font-size:18px}}
@media(max-width:700px){
 body{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
 body header.jz-site-header{height:56px;min-height:56px}
 body .topbar{position:static;display:grid;grid-template-columns:minmax(0,1fr) 40px;grid-template-rows:42px 32px 44px;gap:0;height:118px;min-height:118px;padding:0 10px;overflow:visible;flex:none;white-space:nowrap}
 .topbar>div.topbar-actions{grid-column:1/-1;grid-row:1;justify-content:flex-start;gap:8px;margin:0;width:100%;min-width:0}
 body .topbar .topbar-actions>button{min-height:36px;padding:5px 10px;font-size:14px}
 body .topbar #browse-designs{padding:5px 10px;min-height:36px}.topbar #browse-designs strong{font-size:14px}
 .topbar>div.workspace-metrics{grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;margin:0;gap:8px;width:100%;min-width:0}
 .workspace-metrics .size-summary{gap:8px}.workspace-metrics #top-count{display:block;padding-left:8px}
 .topbar .tabs{grid-column:1;grid-row:3;display:flex;justify-content:space-between;gap:8px;width:auto;min-width:0;align-self:stretch}
 .topbar .tabs button{font-size:14px!important;min-height:44px}
 .topbar #reset{grid-column:2;grid-row:3;font-size:0;width:40px;min-height:44px;padding:0;margin:0}.topbar #reset:after{content:'↺';font-size:20px}
 body .app{flex:1;min-height:0;height:auto;display:flex;flex-direction:column}
 body .stage{flex:none;height:30dvh;min-height:180px;max-height:280px;order:0}
 body .panel{flex:1;min-height:0;order:1;border-top:1px solid #dce4ea;overflow:hidden}
 .panel-content{flex:1;min-height:0;max-height:none;padding:10px 14px;overscroll-behavior:contain}
 .view-tools{top:6px;right:6px;padding:2px;gap:4px}.view-tools button{min-height:36px;min-width:36px;height:36px}
 .stage-bottom{display:none}.measure{bottom:6px;font-size:11px}.grow.up{top:27%}.grow.left,.grow.right{top:57%}
 .panel .save-panel{display:block;flex:none;max-height:42dvh;overflow:auto;border-top:1px solid #dce4ea;background:#fff}
 .save-panel>summary{display:list-item;min-height:40px;padding:9px 14px;cursor:pointer;font-size:14px;color:#203d50}
 .panel .summary{border-top:0;padding-top:0}
 .axis-size-row select,#perforated-options select,#soft-panel-options select{min-height:40px;font-size:16px}
 .function-options button,.choices button,.cell-map button{min-height:40px}
}
@media(max-width:360px){.topbar .tabs button{font-size:12px!important}.topbar .tabs{gap:4px}.workspace-metrics .size-summary{gap:4px}.workspace-metrics .size-summary b{font-size:12px}}
@media(max-width:700px) and (max-height:600px){body .stage{min-height:130px;height:26dvh}.topbar .tabs button{min-height:36px}body .topbar{grid-template-rows:38px 26px 36px;height:100px;min-height:100px}.topbar #reset{min-height:36px}body header.jz-site-header{height:48px;min-height:48px}}
.topbar #help{margin-left:0}
@media(max-width:700px) and (max-height:500px){body .app{flex-direction:row}body .stage{height:100%;min-height:0;max-height:none;flex:1;min-width:0}body .panel{width:46%;flex:none;border-top:0;border-left:1px solid #dce4ea}.view-tools{gap:2px;right:2px}.view-tools button{min-width:30px;min-height:32px;height:32px}.view-tools button:nth-last-child(-n+2){padding:0 4px}}
body .topbar .workspace-metrics #top-count{display:block}
.panel-content [data-page=structure]>.section-line{display:none}
.panel-content [data-page=structure]>h3:last-of-type{display:block;margin-top:10px}
/* v3.9.18: settings left, dimensions centered, design actions right. */
@media(min-width:701px){body .topbar>div.workspace-metrics{flex:1 1 auto;justify-content:center;margin:0;gap:12px}body .topbar>div.topbar-actions{margin:0;flex:0 0 auto;justify-content:flex-end}.workspace-metrics #top-count{border-left:0;border-right:1px solid #dce4ea;padding:0 12px 0 0}}
@media(max-width:700px){body .topbar>div.workspace-metrics{justify-content:center;gap:12px}.workspace-metrics #top-count{border-left:0;border-right:1px solid #dce4ea;padding:0 10px 0 0}}
/* v3.9.19: one model summary; give mobile preview more height. */
body .topbar>div.topbar-actions{margin-left:auto}
.measure{display:flex;align-items:center;justify-content:center;gap:10px;max-width:calc(100% - 16px);letter-spacing:0}
.measure[hidden]{display:none}
.measure #top-count{flex:none;border-right:1px solid #cbd4da;padding-right:10px;font:inherit}
.measure #measure-size{min-width:0}
@media(max-width:700px){
 body .topbar{grid-template-rows:42px 44px;height:86px;min-height:86px}
 .topbar .tabs,.topbar #reset{grid-row:2}
 body .topbar>div.topbar-actions{margin:0}
 body .stage{height:46dvh;min-height:220px;max-height:none}
 .measure{bottom:8px;padding:4px 6px;gap:6px;font-size:11px;flex-wrap:wrap;row-gap:2px}
 .measure #top-count{padding-right:6px}
}
@media(max-width:700px) and (max-height:500px){body .topbar{grid-template-rows:38px 36px;height:74px;min-height:74px}body .stage{height:100%;min-height:0}}
.measure{width:max-content}
/* v3.9.21: reset belongs to the design actions, immediately before save. */
body .topbar .topbar-actions #reset,body .topbar .topbar-actions #top-save{width:auto;min-height:34px;padding:5px 12px;border:1px solid #aaa;background:transparent;font-size:14px!important;font-weight:400;line-height:1.5;grid-column:auto;grid-row:auto;margin:0}
body .topbar .topbar-actions #reset:after{content:none}
@media(max-width:700px){.topbar .tabs{grid-column:1/-1}body .topbar .topbar-actions{gap:6px}body .topbar .topbar-actions #reset,body .topbar .topbar-actions #top-save{min-height:36px;padding:5px 8px}}
@media(max-width:380px){body .topbar .topbar-actions{gap:4px}body .topbar .topbar-actions>button,body .topbar .topbar-actions #reset,body .topbar .topbar-actions #top-save{font-size:12px!important;padding:5px 6px}body .topbar #browse-designs{padding:5px 6px}body .topbar #browse-designs strong{font-size:12px}}
/* v3.9.22: mobile setting tabs sit between the model and its parameters. */
@media(max-width:700px){
 body .topbar{display:flex;height:42px;min-height:42px;align-items:center}
 body .panel>.tabs{display:flex;flex:none;min-height:44px;margin:0;padding:0 10px;gap:8px;justify-content:space-between;border-bottom:1px solid #dce4ea;background:#fff}
 body .panel>.tabs button{flex:0 1 auto;min-height:44px;padding:0;font-size:14px!important;color:#203d50;white-space:nowrap}
}
@media(max-width:360px){body .panel>.tabs{gap:4px}body .panel>.tabs button{font-size:12px!important}}
@media(max-width:700px) and (max-height:500px){body .topbar{height:38px;min-height:38px}body .panel>.tabs{gap:4px;padding:0 6px}body .panel>.tabs button{font-size:12px!important}}
/* v3.9.23: a single quiet rule beneath the setting tabs. */
@media(min-width:701px){body header.jz-site-header:has(+.topbar){border-bottom:0}body .topbar{border-top:0;border-bottom:1px solid #e6ebef}}
@media(max-width:700px){body .panel{border-top:0}body .panel>.tabs{border-top:0;border-bottom:1px solid #e6ebef}}
body .tabs button.active:after{height:2px;background:#203d50}
/* v3.9.24: mobile actions fill the available row edge to edge. */
@media(max-width:700px){
 body .topbar .topbar-actions{width:100%;display:flex;justify-content:space-between}
 body .topbar .topbar-actions>button:not(#top-help){flex:1 1 auto;text-align:center;justify-content:center}
}
/* v3.9.25: stronger setting tabs, distinct from parameter labels. */
body .tabs button{font-weight:600;color:#526776;transition:background-color .15s,color .15s}
body .tabs button.active{font-weight:700;color:#203d50;background:#edf2f6}
body .tabs button:hover{background:#f3f6f8;color:#203d50}
body .tabs button.active:hover{background:#edf2f6}
body .topbar .tabs button{padding-left:8px;padding-right:8px}
body .panel>.tabs button{padding-left:6px;padding-right:6px}
@media(max-width:380px){body .panel>.tabs button{padding-left:3px;padding-right:3px}}
/* v3.9.26: outlined setting buttons with one navy selected state. */
body .topbar>.tabs,body .panel>.tabs{align-items:center;gap:6px}
body .topbar .tabs button,body .panel>.tabs button{min-height:36px;height:36px;padding:5px 8px;border:1px solid #aab8c2;background:#fff;color:#203d50;font-weight:600;line-height:1.4}
body .tabs button.active,body .tabs button.active:hover{background:#203d50;color:#fff;border-color:#203d50;font-weight:700}
body .tabs button:after{display:none}
body .tabs button:not(.active):hover{background:#edf2f6}
@media(max-width:700px){body .panel>.tabs button{flex:1 1 auto;padding:5px 6px}body .panel>.tabs{min-height:44px}}
@media(max-width:380px){body .panel>.tabs button{padding:5px 3px}}
/* v3.9.28: one quiet footer for model information and operation hints. */
body .stage .stage-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;left:22px;right:22px;bottom:15px;color:#777;font-size:12px;line-height:1.5;pointer-events:none}
body .stage-bottom .measure{position:static;transform:none;max-width:100%;width:auto;margin:0;padding:0;border:0;background:transparent;box-shadow:none;font:inherit;color:inherit;letter-spacing:0;gap:8px;flex-wrap:wrap;justify-content:flex-end}
body .stage-bottom .measure[hidden]{display:none}
body .stage-bottom .measure span{display:inline;font:inherit;color:inherit;letter-spacing:0}
body .stage-bottom .measure #top-count{border:0;padding:0}
@media(max-width:700px){body .stage .stage-bottom{left:10px;right:10px;bottom:8px;flex-direction:column-reverse;align-items:flex-start;gap:2px;font-size:11px}body .stage-bottom .measure{justify-content:flex-start}}
/* v3.9.29: keep only the model summary in the mobile footer. */
@media(max-width:700px){body .stage .stage-bottom>span{display:none}}

/* Fixed designer templates expose finishes only. */
.designer-template [data-page],.designer-template .tabs,.designer-template .grow{display:none!important}
#designer-editor{padding:12px 0}#designer-editor h3{font-size:16px;margin:10px 0}#designer-editor .hint{line-height:1.6;margin:8px 0 14px}.designer-colors{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 6px}.designer-colors .color{width:100%}
#designer-editor .select-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0}#designer-editor select{min-height:40px;max-width:65%;padding:6px;border:1px solid #aeb8bd;background:white}

/* Export is available from the top toolbar; keep legacy hooks for the exporter. */
.summary .summary-line{display:none}

/* Full-area toggles retain native keyboard and checkbox semantics. */
#panel-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#panel-options>h3,#panel-options>.hint{grid-column:1/-1}
#panel-options>.hint{margin:0 0 4px}
.controls .check-row:has(input[type=checkbox]),aside .check-row:has(input[type=checkbox]){position:relative;display:flex;justify-content:center;align-items:center;min-height:44px;box-sizing:border-box;padding:10px 8px;margin:0;border:1px dashed #9aa6ad;background:#fff;color:#52616b;cursor:pointer;line-height:1.4;text-align:center;gap:4px}
aside .check-row input[type=checkbox]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
aside .check-row:has(input:checked){border:1px solid #647552;background:#edf1e8;color:#35442c}
aside .check-row:has(input:indeterminate){border:1px solid #a58a50;background:#faf5e8;color:#65532e}
aside .check-row:has(input:indeterminate)::after{content:'部分';font-size:11px}
html[lang=en] aside .check-row:has(input:indeterminate)::after{content:'Mixed'}
aside .check-row:has(input:focus-visible){outline:2px solid #263e52;outline-offset:2px}
aside .check-row:has(input:disabled){opacity:.5;cursor:not-allowed}

/* Accessible replacement controls for sidebar selects. */
aside select.enhanced-select{display:none!important}
.option-picker{min-width:0;flex:1;margin:6px 0}
.option-button-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.option-button-grid[hidden]{display:none}
.option-button-grid button,.option-trigger{min-height:44px;width:100%;padding:8px 5px;white-space:normal;line-height:1.4;border:1px dashed #9aa6ad;background:white;color:#52616b}
.option-button-grid button[aria-pressed=true]{border:1px solid #647552;background:#edf1e8;color:#35442c}
.option-trigger{border-style:solid;text-align:left;margin-bottom:5px;padding:8px}
.option-button-grid button:disabled,.option-trigger:disabled{opacity:.45;cursor:not-allowed}
.axis-size-row:has(.option-picker){flex-wrap:wrap}.axis-size-row .option-picker{flex-basis:100%}

/* Compact sidebar: keep each material on one row. */
#perforated-options>label:has(.option-picker){display:flex;align-items:center;gap:6px;margin:6px 0;font-size:13px}
#perforated-options>label>.option-picker{flex:1;min-width:0;margin:0}
.option-picker{margin:2px 0}
.option-button-grid{gap:4px}
.option-button-grid button,.option-trigger{min-height:34px;padding:5px 4px;font-size:12px;line-height:1.3}
#panel-options{gap:5px;margin-top:10px}
aside #panel-options>.check-row{min-height:34px;padding:5px 4px;font-size:13px}
#panel-options>h3{margin:4px 0}
#panel-options>.hint{font-size:12px;line-height:1.45;margin:0 0 3px}
#perforated-options>.hint{font-size:12px;line-height:1.45;margin:4px 0 8px}
.axis-size-row:has(.option-picker){gap:6px;margin:6px 0;align-items:flex-start}
.axis-size-row .option-picker{flex-basis:0;min-width:150px}
@media(pointer:coarse){.option-button-grid button,.option-trigger,aside #panel-options>.check-row{min-height:44px}}

#panel-options>.divider-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:0}
#panel-options>.divider-actions>button{width:100%;min-width:0;min-height:34px;margin:0;padding:6px 8px;white-space:nowrap}
@media(pointer:coarse){#panel-options>.divider-actions>button{min-height:44px}}

aside #panel-options{row-gap:5px;margin:8px 0;align-content:start}
aside #panel-options>.check-row{margin:0!important}
aside #panel-options>h3{margin:6px 0 1px}
aside #panel-options>.hint{margin:0 0 3px;line-height:1.4}
aside #panel-options+.axis-size-row{margin:6px 0}
aside #panel-options+.axis-size-row+.hint{margin:4px 0 6px;line-height:1.4}