.shell{grid-template-columns:184px minmax(0,1fr)}.sidebar{padding:22px 10px}.brand{padding:0 6px 24px;gap:7px}.brand strong{font-size:12px}.brandmark{width:27px;min-width:27px;height:34px}.brand small{font-size:9px;letter-spacing:.8px}.nav button{padding:11px 12px;gap:9px}.topbar{height:58px;padding:0 22px}.page{padding:22px;max-width:1900px}.page-heading{margin-bottom:16px;align-items:center}.page-heading .eyebrow{display:none}.page-heading h1{font-size:22px}.material-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 12px}.material-nav button{display:flex;gap:13px;align-items:center;text-align:left;padding:14px 17px;background:white;border:1px solid #dce4d9;border-radius:9px}.material-nav button.active{background:#eef5e9;border-color:#6f9566;box-shadow:0 0 0 1px #89a87f22}.material-nav button:disabled{cursor:default;opacity:.45}.material-nav-icon{font-size:24px;color:#71916a}.material-nav strong{display:block;font-size:13px;font-weight:500}.material-nav small{display:block;font-size:10px;color:#8c9b87;margin-top:3px}.material-mode{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dde6d7;margin-bottom:18px;gap:12px}.material-mode>div{display:flex;gap:3px}.material-mode button{border:0;border-radius:0;background:transparent;padding:11px 16px;color:#83937d}.material-mode button.active{color:#285d48;border-bottom:2px solid #56814d;background:#edf3e7}.material-workspace{display:grid;grid-template-columns:330px minmax(0,1fr);align-items:start;gap:20px}.material-form{min-width:0}.material-form .panel-header,.material-form .panel-body{padding:15px}.material-form .panel-header h2{font-size:13px;margin:0}.material-form .fields{gap:0 10px}.material-form .field{margin-bottom:12px}.material-form .field>span{font-size:10px}.material-form input,.material-form select{padding:8px 9px;font-size:12px}.variant-switch{padding:11px;background:#f2f6ee;border-radius:6px;margin:4px 0 11px;font-size:11px}.material-form .help{margin-bottom:0;font-size:10px}.material-preview-panel{margin-bottom:0}.material-file-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:7px;padding:10px 12px}.file-row strong{font-size:10px}.preview-toolstrip{padding:9px 13px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5ebdf;gap:8px;min-height:43px}.preview-toolstrip>span{font-size:10px;color:#7f9278}.preview-toolstrip>div{display:flex;gap:5px;align-items:center;white-space:nowrap}.preview-toolstrip button{font-size:10px;padding:4px 7px}.zoom-value{min-width:34px;text-align:center;font-size:10px;color:#87997c}.project-preview{position:sticky;top:12px}.material-preview-panel .preview-wrap{min-height:400px;padding:24px;overflow:auto;align-items:flex-start}.material-preview-panel .preview-paper{max-width:none;width:480px;flex-shrink:0}.material-preview-panel .preview-paper.box-preview{width:650px}.material-preview-panel .preview-paper .loading{min-height:300px}.material-form .cert-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.material-form .cert-choice{gap:3px;padding:6px;grid-template-columns:13px minmax(0,1fr)}.material-form .cert-choice input{width:13px;height:13px}.material-form .cert-choice img{height:30px}.material-form .cert-choice span{font-size:8px;overflow-wrap:anywhere}.material-form .packing-item-grid{grid-template-columns:44px minmax(0,1fr);gap:8px}.material-form .packing-art{min-height:42px}.material-form .packing-entry-fields{grid-template-columns:minmax(0,1fr) 51px;gap:7px}.material-form .packing-item .flex{flex-wrap:wrap}.material-form .packing-item .switch-line{font-size:9px}.material-form .packing-item .fields{grid-template-columns:1fr 51px}.output-buttons{display:flex;gap:8px;flex-wrap:wrap}.output-buttons button{flex:1}.material-form .output-buttons{flex-direction:column}.material-form .result{overflow-wrap:anywhere}.material-form .notice{padding:10px;font-size:10px}.material-form .tabs button{padding:6px 10px;font-size:10px}.material-form .packing-entry-fields .compact-name{height:37px;min-height:37px;font-size:11px}.material-form .packing-entry-fields input{height:37px}.wide-studio{grid-template-columns:68px minmax(0,1fr)}.wide-studio .sidebar{padding:18px 8px}.wide-studio .brand{justify-content:center;padding:0 0 25px}.wide-studio .brand>div:last-child,.wide-studio .nav-label,.wide-studio .side-foot,.wide-studio .nav button>span:last-child{display:none}.wide-studio .nav button{justify-content:center;padding:13px 8px;gap:0}.wide-studio .nav button span:first-child{font-size:21px;width:auto}.wide-studio .page{padding:18px}.studio-editor{display:grid;grid-template-columns:180px minmax(0,1fr) 252px;gap:14px;align-items:start}.studio-layers,.studio-props{position:sticky;top:10px;min-width:0}.studio-layers .panel-header{padding:12px}.studio-layers .panel-header h3{margin:0}.studio-layers .material-file-list{grid-template-columns:1fr;padding:6px;gap:5px}.studio-layers .file-row>label{display:none}.studio-layers .file-row{padding:5px}.studio-layers .file-type{font-size:9px;margin-bottom:0}.studio-layers .file-row strong{font-size:9px}.layer-filters{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:6px;border-bottom:1px solid #e5ecdf}.layer-filters button{padding:5px 1px;font-size:9px;border:0;background:transparent}.layer-filters button.active{color:#285e3f;background:#eaf3e3}.studio-layers .element-list{max-height:calc(100vh - 475px);min-height:180px;padding:4px}.studio-layers .element-list button{font:10px StudioSans,sans-serif;padding:8px 6px;border-radius:4px;display:flex;gap:7px;align-items:center}.layer-icon{color:#809c73;width:16px;font:12px Georgia,serif;text-align:center}.layer-add{display:flex;gap:5px;padding:9px;border-top:1px solid #e5ecdf}.layer-add button{padding:5px 6px;font-size:10px;flex:1}.studio-canvas-panel{min-width:0;overflow:hidden}.studio-canvas-panel .panel-header{padding:12px 15px}.studio-canvas-panel .canvas-shell{min-height:650px;padding:20px 16px;justify-content:flex-start;overflow:auto;max-height:none}.studio-canvas-panel .canvas-paper{margin:0 auto;width:480px;min-width:240px;max-width:none;flex-shrink:0}.studio-canvas-panel .preview-toolstrip{flex-wrap:wrap}.studio-canvas-panel .canvas-paper #preview{max-width:none}.studio-props .panel-header{padding:12px 14px}.studio-props .panel-header h2{font-size:13px;margin:0}.studio-props .panel-body{padding:13px}.studio-props .panel{margin-bottom:12px}.studio-props .field>span{font-size:10px}.studio-props .switch-line{font-size:10px;line-height:1.5}.studio-props details>summary{font-size:11px;font-weight:500;padding:8px 0}.grid-dimensions{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}.grid-dimensions .field>span{font-size:9px}.cell-binding{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.cell-binding .pill{font-size:9px}.cell-binding button{font-size:9px}.element-hit.grid-hit{z-index:0}.element-hit{z-index:1}.element-hit.active{z-index:3}.element-hit.grid-hit.active{z-index:0;pointer-events:auto}.grid-resizer{position:absolute;z-index:9;background:transparent;touch-action:none}.grid-resizer:before{content:'';position:absolute;background:#4d9067;opacity:.5}.grid-resizer.horizontal{height:9px;transform:translateY(-4px);cursor:row-resize}.grid-resizer.horizontal:before{height:1px;top:4px;left:0;right:0}.grid-resizer.vertical{width:9px;transform:translateX(-4px);cursor:col-resize}.grid-resizer.vertical:before{width:1px;left:4px;top:0;bottom:0}.grid-resizer:hover:before{opacity:1;background:#0e8057}.grid-resizer:hover{background:#93bd7930}.material-page .alerts{max-height:120px}.material-page .packing-item{padding:9px}.material-page .page-heading .flex{gap:6px}
@media(min-width:1550px){.material-workspace{grid-template-columns:380px minmax(0,1fr)}.studio-editor{grid-template-columns:210px minmax(0,1fr) 275px}.material-form .cert-choice span{font-size:9px}}
@media(max-width:1100px){.shell{grid-template-columns:160px minmax(0,1fr)}.wide-studio{grid-template-columns:58px minmax(0,1fr)}.material-workspace{grid-template-columns:290px minmax(0,1fr);gap:12px}.page{padding:18px}.studio-editor{grid-template-columns:145px minmax(0,1fr) 224px;gap:10px}.material-nav button{padding:11px;gap:8px}.material-mode>.tiny{display:none}.studio-layers .file-type{font-size:8px}.studio-layers .file-row strong{font-size:8px}.project-preview{position:static}}
@media(max-width:850px){.shell,.wide-studio{grid-template-columns:1fr}.wide-studio .sidebar{padding:10px}.wide-studio .brand>div:last-child,.wide-studio .nav button>span:last-child{display:block}.wide-studio .brand{padding-bottom:10px;justify-content:flex-start}.wide-studio .nav button{gap:6px;padding:8px}.sidebar{padding:10px;height:auto;position:static}.material-workspace{grid-template-columns:1fr}.material-nav{gap:5px}.material-nav button{padding:9px;gap:5px}.material-nav-icon{font-size:18px}.material-nav strong{font-size:11px}.material-nav small{font-size:9px}.studio-editor{grid-template-columns:130px minmax(0,1fr)}.studio-props{grid-column:1/-1;position:static}.studio-layers{position:static}.studio-canvas-panel .canvas-shell{min-height:400px}.material-form .cert-options{grid-template-columns:repeat(4,1fr)}.page-heading{flex-wrap:wrap}.material-form .fields{grid-template-columns:1fr 1fr}.studio-layers .element-list{max-height:500px}.material-preview-panel .preview-wrap{min-height:300px}.project-preview .preview-paper{max-width:none}}
.element-hit.grid-hit.active{background:transparent}.wide-studio .nav button{position:relative}.wide-studio .nav button:hover:after{content:attr(aria-label);position:absolute;left:52px;background:#234e3c;color:white;white-space:nowrap;padding:7px 10px;border-radius:5px;z-index:20;font-size:11px;pointer-events:none}

.studio-canvas-panel{position:sticky;top:10px}.preview-focus>.page-heading,.preview-focus>.material-nav,.preview-focus>.material-mode{display:none}.preview-focus .material-workspace{grid-template-columns:1fr}.preview-focus .material-form{display:none}.preview-focus .preview-wrap{min-height:0}.preview-focus .canvas-shell{min-height:0}.preview-focus .project-preview{position:static}

/* Preview-first layout, with the main navigation always expanded. */
.studio-editor{grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.studio-editor.tools-open{grid-template-columns:minmax(0,1fr) 286px}
.studio-canvas-panel{position:static;margin-bottom:0;min-width:0}
.studio-canvas-panel .canvas-shell{min-height:0;max-height:none;padding:16px;align-items:flex-start;justify-content:center;overflow:auto}
.studio-canvas-panel .canvas-paper{min-width:0;margin:0;flex-shrink:0}
.studio-versions{margin-bottom:10px;background:#fff;border:1px solid #e0e5dc;border-radius:8px;max-height:106px;overflow:auto}
.studio-versions .material-file-list{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));padding:7px;gap:5px}
.studio-versions .file-row{padding:5px 8px}.studio-versions .file-type{font-size:9px}
.studio-props{position:sticky;top:12px;max-height:calc(100vh - 88px);overflow:auto;min-width:0}
.studio-props .studio-layers{position:static}.studio-layers .element-list{max-height:185px;min-height:0}
.studio-props .panel-body{padding:12px}.studio-props .field{margin-bottom:10px}
.studio-page-settings{border:1px solid #e0e5dc;border-radius:8px;background:white;margin-bottom:16px}
.studio-page-settings>summary{padding:13px}.studio-page-settings .panel{border:0;box-shadow:none;margin:0}
.material-page #hit-layer[hidden]{display:none}
.material-page .page-heading .subtitle{display:none}
.material-page .page-heading{margin-bottom:10px}.material-page .material-nav button{padding:9px 13px}
.material-page .material-mode{margin-bottom:10px}.material-page .material-mode button{padding:8px 14px}
.material-page .preview-toolstrip{padding:7px 12px;min-height:38px}
.material-page .canvas-shell .loading{min-height:100px}
@media(max-width:1100px) and (min-width:851px){.studio-editor.tools-open{grid-template-columns:minmax(0,1fr) 250px}.page{padding:14px}.material-nav small{display:none}.studio-props{max-height:calc(100vh - 76px)}}
@media(max-width:850px){.studio-editor,.studio-editor.tools-open{grid-template-columns:minmax(0,1fr)}.studio-props{position:static;max-height:none}.studio-versions{max-height:105px}.material-page .page-heading h1{font-size:18px}.material-page .page-heading .flex button{font-size:10px;padding:5px 7px}}

.layout-page{padding:14px 18px 22px}
.layout-page .page-heading{margin-bottom:8px;min-height:30px}
.layout-page .page-heading h1{font-size:18px}.layout-page .page-heading .small{font-size:10px;padding:6px 9px}
.layout-route{display:flex;gap:14px;align-items:center;margin-bottom:8px;min-width:0}
.layout-route .material-nav{flex:1;gap:5px;margin:0;min-width:0}
.layout-route .material-nav button{padding:8px;gap:6px;justify-content:center}
.layout-route .material-nav-icon{font-size:17px}.layout-route .material-nav strong{font-size:11px}
.layout-route .material-nav small{display:none}
.layout-route .material-mode{margin:0;flex-shrink:0;border:0;display:block}
.layout-route .material-mode>.tiny{display:none}
.layout-route .material-mode button{padding:9px 11px;font-size:11px;border-radius:4px}
.layout-route .material-mode button.active{border:0;background:#e5eee0}
.layout-page .studio-versions{max-height:92px;margin-bottom:8px}
.layout-page .studio-versions .file-type{font-size:9px;line-height:1.2}
.layout-page .studio-versions .file-row strong{font-size:10px;line-height:1.35}
.layout-page .studio-versions .file-row{padding:4px 7px}
.layout-page .studio-canvas-panel .preview-toolstrip{min-height:38px;flex-wrap:nowrap}
.preview-focus .layout-route,.preview-focus .studio-versions{display:none}
@media(max-width:1000px){.layout-route{gap:8px}.layout-route .material-mode button{padding:8px;font-size:10px}.layout-route .material-nav button{gap:4px;padding:7px 4px}.layout-route .material-nav-icon{display:none}.layout-page .studio-canvas-panel .preview-toolstrip{flex-wrap:wrap;justify-content:flex-end}.layout-page .studio-canvas-panel .preview-toolstrip>span{margin-right:auto}}
@media(max-width:650px){.layout-route{flex-direction:column;align-items:stretch}.layout-route .material-nav{flex:auto}.layout-route .material-mode{align-self:flex-start}.layout-page .preview-toolstrip>div{flex-wrap:wrap;white-space:normal;justify-content:flex-end}}

.export-all{font-weight:600!important;background:#195f46!important;color:white!important;border-color:#195f46!important;box-shadow:0 2px 7px #195f4625;min-width:140px;padding:8px 13px!important;font-size:12px!important}
.language-cards{display:flex;gap:12px;flex-wrap:wrap}.language-cards>div{display:flex;gap:10px;align-items:center;background:#f4f7ef;border-radius:7px;padding:12px}
.template-catalog article{display:flex;align-items:center;gap:9px;padding:12px 0;border-bottom:1px solid #edf0e9}.template-catalog article>div{flex:1}.template-catalog strong,.template-catalog small{display:block}.template-catalog small{color:#7b8d7c;margin-top:5px;font-size:11px}
.cert-number-fields{margin-top:12px}.cert-number-fields .field{padding:10px;border:1px solid #dedfc7;border-radius:7px;background:#fcfcf4}.required-note{font-size:10px;color:#9b6a22;margin-left:5px;font-weight:400}.cert-number-fields small{display:block;margin-top:6px}
.deleted-projects{margin-top:24px;background:white;border:1px solid #dfe5d9;border-radius:8px;padding:15px}.deleted-project-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.layout-page .page-heading .flex{justify-content:flex-end}.layout-page .page-heading{flex-wrap:wrap}.studio-props .field input[type=number]{min-width:0}
