:root{--font-heading:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;font-family:var(--font-body)}button,input,select,textarea{font:inherit}button,a,input,select{touch-action:manipulation}.skip-link{position:fixed;left:16px;top:-80px;z-index:99;padding:12px;background:white;color:#175cd3}.skip-link:focus{top:8px}#app-error:empty{display:none}#app-error{padding:16px;color:#a00;background:#fff0f0}#studio>div{max-width:1680px;margin:0 auto}.studio-header{min-height:80px!important;align-items:center!important;background:var(--color-surface);border-bottom:1px solid var(--color-divider)!important;padding:8px 20px;gap:8px;position:relative;z-index:3}.studio-header>div:first-child{border:0!important;padding:12px 16px!important}.studio-header>div:first-child span:first-child{font-size:var(--text-brand)!important;font-weight:750!important;letter-spacing:-1px!important}.studio-header>div:first-child span:last-child{font-size:var(--text-caption)!important;letter-spacing:0!important;text-transform:none!important;color:var(--color-accent-700)}.studio-header nav{gap:5px;align-self:stretch;padding:6px 12px;border:0!important}.studio-header nav button{border:0!important;border-radius:8px;padding:12px 18px!important;min-height:44px;box-shadow:none!important;font-weight:600!important}.studio-header nav button:hover{background:var(--color-neutral-100)!important}.studio-header nav button[aria-current=page]{background:var(--color-accent-100)!important;color:var(--color-accent-700)!important}.catalog{flex-basis:230px!important;border-right:1px solid var(--color-divider)!important;background:var(--color-surface)}.catalog>div{border-bottom:1px solid var(--color-divider)!important}.catalog>div:last-child{max-height:calc(100vh - 80px)!important;position:sticky;top:0;padding:6px 10px 24px}.catalog button{border:0!important;border-radius:7px;min-height:50px;margin:2px 0;padding:10px 12px!important}.catalog button span:last-child{font-size:var(--text-caption)!important}.generator-controls{max-width:580px;border-right:1px solid var(--color-divider)!important;background:var(--color-surface)}.generator-controls>div{border-bottom-width:1px!important;padding:22px 28px!important}.generator-controls>div:first-child{padding:12px 20px!important;background:var(--color-bg)}#studio h2,#studio h3{font-size:var(--text-ui)!important;letter-spacing:0!important;text-transform:none!important;font-weight:650!important}#studio .field{gap:8px}#studio .field>label{font-size:var(--text-ui);font-weight:600;letter-spacing:0;text-transform:none}#studio .input{border:1px solid var(--color-divider);border-radius:7px;background:var(--color-bg);color:var(--color-text);min-height:42px;font-size:var(--text-ui);padding:10px 12px;box-shadow:none}#studio textarea.input{min-height:108px;line-height:1.5}#studio select.input{padding-right:28px}#studio .btn{border-radius:7px;min-height:42px;font-size:var(--text-ui);font-weight:600;letter-spacing:0;text-transform:none;padding:10px 14px;border-width:1px}#studio .btn-primary{background:var(--color-accent);border-color:var(--color-accent);color:#fff}#studio[data-theme=dark] .btn-primary{color:#10233d}#studio .btn-secondary{background:var(--color-surface);border-color:var(--color-divider);color:var(--color-text)}#studio .btn-ghost{color:var(--color-text)}#studio .btn:hover{filter:brightness(.96)}#studio .btn:disabled{opacity:.45;cursor:not-allowed}#studio .seg{border:1px solid var(--color-divider);border-radius:7px;overflow:hidden;gap:0;box-shadow:none}#studio .seg-opt{font-size:var(--text-caption);min-height:38px;padding:8px 12px;border:0!important;cursor:pointer}#studio .seg-opt:has(input:checked){background:var(--color-accent-100);color:var(--color-accent-700);box-shadow:inset 0 -2px var(--color-accent)}#studio .tag{border-radius:5px;text-transform:none;letter-spacing:0;font-size:var(--text-caption);padding:5px 9px}.generator-preview{background:var(--color-bg)}.generator-preview>div{top:16px!important;margin:24px;border:1px solid var(--color-divider);border-radius:14px;overflow:hidden;background:var(--color-surface);box-shadow:0 8px 28px #18364b0a}.generator-preview>div>div{border-bottom-width:1px!important}.generator-preview>div>div:nth-child(2){min-height:350px!important;padding:32px!important}.generator-preview [role=img]{max-width:100%;filter:drop-shadow(0 4px 9px #0000000a)}.generator-preview>div>div:nth-child(3){grid-template-columns:repeat(auto-fit,minmax(100px,1fr))!important;background:var(--color-bg)}.generator-preview>div>div:nth-child(3) span:first-child{letter-spacing:0!important;text-transform:none!important;color:var(--color-text);opacity:.7;font-size:var(--text-caption)!important}.generator-preview>div>div:nth-child(3) span:last-child{font-size:var(--text-ui)!important}.generator-preview>div>div:nth-child(4)>.btn-primary{min-height:48px;font-size:var(--text-ui)}#studio button:focus-visible,#studio a:focus-visible,#studio input:focus-visible,#studio select:focus-visible,#studio textarea:focus-visible,#studio label:has(input:focus-visible){outline:3px solid var(--color-accent);outline-offset:3px}#studio table{width:100%;border-collapse:collapse}#studio td{padding:8px;border-bottom:1px solid var(--color-divider);overflow-wrap:anywhere}#studio section{min-width:0}#studio[data-tab=labels]>div>div:not(.studio-header),#studio[data-tab=batch]>div>div:not(.studio-header){border-color:var(--color-divider)}@media(max-width:1099px){.generator-controls{max-width:none}.studio-header{padding:6px 10px}.studio-header nav button{padding:10px 12px!important}.generator-preview>div{margin:18px}}@media(max-width:819px){.studio-header nav{width:100%;order:3;overflow-x:auto;padding:4px 0}.studio-header nav button{flex:1;white-space:nowrap;font-size:var(--text-caption)!important;padding:10px!important}.generator-controls{flex-basis:100%!important;border-right:0!important}.generator-controls>div{padding:18px 20px!important}.generator-preview{flex-basis:100%!important}.generator-preview>div{position:static!important;margin:16px}.generator-preview>div>div:nth-child(2){min-height:250px!important}.studio-header>div:first-child{padding:10px 4px!important}.studio-header>div:last-child{padding:8px 0!important}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
#studio .btn-icon{padding:8px;width:42px;min-width:42px;height:42px}#studio button svg{flex-shrink:0}#studio .radio input,#studio .seg-opt input{width:1px;height:1px}#studio [role=status]{line-height:1.5}
/* Modula: warm editorial identity for a practical, public utility. */
body{background:#f4f5f7;color:#20242a}body:has(#studio[data-theme=dark]){background:#111316;color:#edf0f4}
#studio>div{max-width:none}
.studio-header{padding:8px 32px;min-height:86px!important;background:var(--color-bg);border-bottom-color:var(--color-divider)!important}
.studio-header .brand{min-width:220px;padding-left:0!important;gap:13px!important}
.brand-symbol{width:40px;height:40px;padding:0;background:transparent}
.studio-header .brand .brand-name{font-size:var(--text-brand)!important;letter-spacing:-1.3px!important;font-weight:700!important}
.studio-header .brand .brand-subtitle{font-size:var(--text-caption)!important;letter-spacing:1.4px!important;font-weight:650;color:var(--color-neutral-800)!important;margin-top:4px}
.studio-header nav{flex:none!important;margin:auto;gap:4px;padding:8px!important}
.studio-header nav button{border-radius:6px;padding:11px 18px!important;font-size:var(--text-ui)!important;color:var(--color-neutral-800)!important}
.studio-header nav button[aria-current=page]{background:var(--color-text)!important;color:var(--color-surface)!important}
.studio-header>div:last-child{margin-left:0!important;padding-right:0!important}
.workspace-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:36px 38px 32px;border-bottom:1px solid var(--color-divider)}
.eyebrow{font-size:var(--text-caption);letter-spacing:1.8px;font-weight:700;color:var(--color-accent);margin-bottom:10px}
#studio h1{font-size:clamp(var(--text-brand),3vw,var(--text-display));line-height:1.13;letter-spacing:-1.4px;font-weight:600;margin:0 0 11px}
.workspace-intro p{margin:0;font-size:var(--text-ui);color:var(--color-neutral-800);line-height:1.6}
.trust-note{display:flex;align-items:flex-start;gap:10px;border-left:1px solid var(--color-divider);padding:6px 0 6px 24px;font-size:var(--text-caption);line-height:1.7}
.trust-note strong{display:block;font-weight:600}.trust-note span:not(.local-dot){display:block;color:var(--color-neutral-800)}
.local-dot{width:7px;height:7px;border-radius:50%;background:var(--color-neutral-800);margin-top:7px;flex:none}
.catalog{flex-basis:226px!important;background:var(--color-bg);padding:12px 10px 0}
.catalog-heading{display:flex;justify-content:space-between;align-items:center;font-weight:650;font-size:var(--text-caption);margin-bottom:15px}
.catalog-heading span{font-size:var(--text-caption);font-weight:500;border:1px solid var(--color-divider);border-radius:5px;padding:2px 5px}
.catalog>div{border:0!important}.catalog .catalog-search{padding:12px 9px!important}
.catalog>div:last-child{padding:4px 0 24px;max-height:calc(100vh - 40px)!important}
.catalog>div:last-child>div{color:var(--color-neutral-800)!important;font-size:var(--text-caption)!important;letter-spacing:1.3px!important;padding:19px 12px 7px!important}
.catalog button{min-height:48px;padding:9px 12px!important;border-radius:6px;margin:2px 0}
.catalog button span:first-child{font-size:var(--text-ui)!important;font-weight:600!important}.catalog button span:last-child{font-size:var(--text-caption)!important}
.generator-controls{max-width:none;flex-basis:440px!important;background:var(--color-surface);padding-bottom:24px}
.generator-controls>div{padding:24px 28px!important;border-bottom:1px solid var(--color-divider)!important}
.generator-controls>div:first-child{padding:12px 20px!important;background:var(--color-surface)}
#studio h2,#studio h3{font-size:var(--text-ui)!important;font-weight:650!important;letter-spacing:-.15px!important}
#studio .input{background:var(--color-surface);border-color:var(--color-divider);border-radius:6px;min-height:44px;font-size:var(--text-ui)}
#studio textarea.input{min-height:130px;padding:15px;font-size:var(--text-ui);line-height:1.6;background:var(--color-bg)}
#studio .input:hover{border-color:var(--color-neutral-800)}
#studio .field>label{font-size:var(--text-caption);color:var(--color-neutral-800);font-weight:600}
#studio .seg{padding:3px;gap:2px;background:var(--color-bg);border:1px solid var(--color-divider);border-radius:7px}
#studio .seg-opt{border-radius:4px;padding:8px 10px;min-height:34px;font-size:var(--text-caption);line-height:1.5}
#studio .seg-opt:has(input:checked){background:var(--color-surface);color:var(--color-text);box-shadow:0 1px 4px #00000014}
#studio .btn{border-radius:6px;min-height:44px;transition:background-color .16s ease,box-shadow .16s ease}
#studio .btn-primary{background:var(--color-accent);color:#fff;border-color:var(--color-accent);box-shadow:0 2px 3px #0000000b}
#studio[data-theme=dark] .btn-primary{color:var(--action-ink)}
#studio .btn-secondary{background:transparent}
#studio .btn-ghost{font-size:var(--text-caption)}
#studio .btn-icon{min-width:44px;width:44px;height:44px}
.settings-group{border-bottom:1px solid var(--color-divider)}
.settings-group summary{display:flex;align-items:center;gap:12px;list-style:none;cursor:pointer;padding:22px 28px;font-size:var(--text-ui);font-weight:600;min-height:64px}
.settings-group summary::-webkit-details-marker{display:none}
.settings-group summary>span{font-size:var(--text-caption);color:var(--color-neutral-800);border:1px solid var(--color-divider);border-radius:5px;width:25px;height:25px;display:grid;place-items:center;font-weight:500}
.settings-group summary:after{content:'+';font-size:var(--text-heading);font-weight:400;margin-left:auto;color:var(--color-neutral-800)}
.settings-group[open] summary:after{content:'−'}
.settings-group>div{border:0!important;padding:0 28px 24px!important}
.settings-group summary:focus-visible{outline:3px solid var(--color-accent);outline-offset:-4px}
.generator-preview{flex-basis:420px!important;background:var(--color-bg);padding:26px}
.generator-preview>div{margin:0;top:24px!important;border:1px solid var(--color-divider);border-radius:12px;background:var(--color-surface);box-shadow:0 6px 18px #24272305}
.generator-preview>div>div:first-child{padding:18px 22px!important}
.generator-preview>div>div:nth-child(2){min-height:310px!important;padding:35px!important;background-image:radial-gradient(var(--color-divider) .7px,transparent .7px);background-size:15px 15px}
.generator-preview [role=img]{padding:14px;background:#fff;border-radius:5px;filter:drop-shadow(0 6px 14px #00000010)}
.generator-preview>div>div:nth-child(3){background:var(--color-surface);padding:16px 20px!important;gap:12px!important}
.generator-preview>div>div:nth-child(4){padding:20px!important;background:var(--color-surface)}
#studio .tag{border-radius:5px;font-size:var(--text-caption);font-weight:600}
#studio[data-theme=dark] .brand-symbol{color:#18191d}
@media(max-width:1099px){.studio-header{padding:8px 20px}.studio-header .brand{min-width:150px}.studio-header nav button{padding:10px 12px!important}.workspace-intro{padding:28px 24px}.generator-preview{padding:20px;flex-basis:360px!important}.generator-controls{flex-basis:380px!important}}
@media(max-width:819px){.studio-header nav{order:3!important;flex-basis:100%!important;width:100%;margin:0;padding:5px 0!important}.studio-header>div:last-child{margin-left:auto!important}.workspace-intro{padding:25px 20px;align-items:flex-start;flex-direction:column;gap:16px}.workspace-intro h1{font-size:var(--text-display)}.trust-note{border:0;padding:0}.trust-note>div{display:flex;flex-wrap:wrap;gap:0 12px}.generator-controls{flex-basis:100%!important;padding-bottom:0}.generator-preview{flex-basis:100%!important;padding:18px}.generator-preview>div{margin:0}.generator-controls>div{padding:20px!important}.settings-group summary{padding:20px}.settings-group>div{padding:0 20px 20px!important}#studio .input{font-size:var(--text-body)}.studio-header .brand .brand-subtitle{display:none}.studio-header .brand{min-width:0}.generator-preview>div>div:nth-child(2){min-height:250px!important}}
.content-title{display:flex;align-items:center;gap:12px}.content-title>span{display:grid;place-items:center;border:1px solid var(--color-divider);border-radius:5px;font-size:var(--text-caption);font-weight:500;color:var(--color-neutral-800);width:25px;height:25px}
#studio[data-tab=labels] section,#studio[data-tab=batch] section{border-right-width:1px!important}
#studio[data-tab=labels] section>div,#studio[data-tab=batch] section>div{border-bottom-width:1px!important}
#studio[data-tab=labels] section:first-child,#studio[data-tab=batch] section:first-child{background:var(--color-surface)}
#studio[data-tab=labels] section:last-child>div,#studio[data-tab=batch] section:last-child>div{border-radius:10px}
.studio-header .brand .brand-name{display:block!important;color:var(--color-text)!important;font-size:var(--text-brand)!important;font-weight:700!important;letter-spacing:-1.3px!important;margin:0!important;text-transform:none!important}
@media(max-width:819px){.studio-header .brand .brand-name{font-size:var(--text-title)!important}.studio-header nav{gap:0!important}.studio-header nav button{padding:10px 8px!important;font-size:var(--text-caption)!important;min-width:0;flex:1!important;justify-content:center}.studio-header .brand .brand-subtitle{display:none!important}}
.studio-header .brand span.brand-name{font-size:var(--text-brand)!important;letter-spacing:-1.3px!important;color:var(--color-text)!important;text-transform:none!important;display:block!important;font-weight:700!important;margin:0!important}
@media(max-width:819px){.studio-header .brand span.brand-name{font-size:var(--text-title)!important;letter-spacing:-.9px!important}}
.studio-footer{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;border-top:1px solid var(--color-divider);padding:22px 32px;font-size:var(--text-caption);color:var(--color-neutral-800);background:var(--color-bg)}.studio-footer strong{color:var(--color-text);font-size:var(--text-ui);letter-spacing:-.5px}.studio-footer>span:last-child{margin-left:auto}@media(max-width:819px){.studio-footer{padding:20px}.studio-footer>span:last-child{margin:0}}
.people-start{padding:24px 32px;background:var(--color-bg);border-bottom:1px solid var(--color-divider)}.people-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.people-heading h2{margin:0}.people-heading p,.project-tools p{margin:6px 0 0;font-size:var(--text-caption);color:var(--color-neutral-800);line-height:1.6}.starter-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:18px}.starter-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:15px;border:1px solid var(--color-divider);border-radius:9px;background:var(--color-surface);text-align:left;color:var(--color-text);cursor:pointer;min-width:0;transition:border-color .15s}@media(hover:hover){.starter-card:hover{border-color:var(--catalog-border);background:var(--catalog-hover)}}.starter-card strong{font-size:var(--text-ui)}.starter-card>span:last-child{font-size:var(--text-caption);line-height:1.5;color:var(--color-neutral-800)}.starter-preview{height:42px;width:72px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:4px;padding:3px}.starter-preview svg{max-width:100%;max-height:100%;width:auto;height:auto}.project-tools{margin-top:18px;border-top:1px solid var(--color-divider);padding-top:4px}.project-tools summary,.calibration-tools summary{cursor:pointer;font-size:var(--text-ui);font-weight:600;padding:12px 0;min-height:44px}.project-row{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px}.project-row .field{min-width:180px;max-width:320px;flex:1}.file-button{position:relative;overflow:hidden;cursor:pointer}.file-button input[type=file]{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.file-button:focus-within,summary:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px}.quality-panel{border:1px solid var(--color-divider);border-radius:6px;background:var(--color-bg)}.quality-panel summary{padding:12px;cursor:pointer;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:var(--text-caption)}.quality-panel summary strong{color:var(--color-neutral-800);font-weight:600}.quality-panel ul{list-style:none;margin:0;padding:0 12px}.quality-panel li{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--color-divider);font-size:var(--text-caption)}.quality-panel li p{margin:4px 0 0;line-height:1.6;color:var(--color-neutral-800)}.quality-mark{flex:none;font-weight:700}.quality-ok .quality-mark{color:var(--color-text)}.quality-warning .quality-mark{color:var(--color-accent-700)}.quality-disclaimer{font-size:var(--text-caption);line-height:1.5;margin:12px;color:var(--color-neutral-800)}.calibration-tools{border:1px solid var(--color-divider);border-radius:7px;padding:0 12px}.calibration-body{display:flex;flex-direction:column;gap:12px;padding-bottom:16px}.calibration-body p{font-size:var(--text-caption);line-height:1.7;margin:0}.calibration-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:1100px){.starter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.people-start{padding:20px}.starter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.people-heading{align-items:flex-start;flex-direction:column}.starter-card{padding:12px}.project-row>.btn{width:100%}}

/* Shared page frame: all tools use the same edges, including ultrawide. */
html{scrollbar-gutter:stable}
#studio{--workspace-width:1600px}
#studio>div>:is(.studio-header,.workspace-intro,.people-start,.studio-footer),
#studio>div>div{width:100%;max-width:var(--workspace-width);margin-inline:auto}
#studio>div>.workspace-intro{padding-inline:32px}
#studio:not([data-tab=gen]) .workspace-intro,
#studio:not([data-tab=gen]) .people-heading,
#studio:not([data-tab=gen]) .starter-grid{display:none}
#studio:not([data-tab=gen]) .people-start{padding-block:8px}
#studio:not([data-tab=gen]) .project-tools{margin-top:0;border-top:0}
.generator-controls{align-self:flex-start}
#studio .btn:disabled{background:var(--color-neutral-100);border-color:var(--color-divider);color:var(--color-neutral-800);box-shadow:none;opacity:.65;cursor:not-allowed}
.catalog button span:last-child{font-size:var(--text-caption)!important}
.catalog>div:last-child>div{font-size:var(--text-caption)!important}
.starter-card>span:last-child,.people-heading p,.project-tools p{font-size:var(--text-ui)}
@media(max-width:819px){#studio>div>.workspace-intro{padding-inline:20px}}

/* Semantic roles keep brand, actions, warnings and errors distinct. */
#studio{--action:#303640;--action-hover:#424a57;--action-pressed:#20242a;--action-ink:#fff;--ok:#424a57;--warn:#765b00;--danger:#b42318;--focus:#0f62fe;--status-ok-bg:#e9ecf0;--status-error-bg:#fff0ee}
#studio[data-theme=dark]{--action:#d8dee7;--action-hover:#edf0f4;--action-pressed:#b7c0cd;--action-ink:#20242a;--ok:#d8dee7;--warn:#e5cd78;--danger:#ffb4ab;--focus:#78a9ff;--status-ok-bg:#303640;--status-error-bg:#422622}
#studio>div{font-family:var(--font-body)!important;font-size:var(--text-ui)}
#studio .btn-primary:not(:disabled){background:var(--action);border-color:var(--action);color:var(--action-ink)}
#studio .status-ok{color:var(--ok);background:var(--status-ok-bg)}
#studio .status-error{color:var(--danger);background:var(--status-error-bg)}
#studio .quality-warning .quality-mark{color:var(--warn)}
#studio .quality-panel summary strong{color:var(--ok)}
#studio .quality-panel:has(.quality-warning) summary strong{color:var(--warn)}
#studio .quality-ok .quality-mark{color:var(--ok)}
#studio .field>label,#studio .btn,#studio .quality-panel summary,#studio .quality-panel li{font-size:var(--text-ui)}
#studio .input{font-size:var(--text-body)}
#studio .tag,#studio .seg-opt{font-size:var(--text-caption)}
#studio .catalog button span:first-child{font-size:var(--text-ui)!important}
#studio .generator-preview>div>div:nth-child(3) span{font-size:var(--text-caption)!important;font-variant-numeric:tabular-nums}
#studio :is(button,a,input,select,textarea,summary):focus-visible{outline-color:var(--focus)}
.size-explanation,.batch-summary{font-size:var(--text-ui);line-height:1.65;color:var(--color-neutral-800);margin:0 0 14px}
.batch-error{color:var(--danger);font-size:var(--text-ui);line-height:1.6;margin:0;min-height:110px;overflow-wrap:anywhere}
.workspace-intro.intro-compact{padding-block:16px}
#studio .intro-compact h1{font-size:var(--text-compact-brand);margin:0}
.intro-compact p,.intro-compact .trust-note{display:none}
#offline-status{padding:10px 20px;background:#e9ecf0;color:#303640;font:14px system-ui}

#offline-status button{margin-left:16px;padding:8px 12px;cursor:pointer}
@media(max-width:600px){.starter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#studio .generator-preview>div>div:nth-child(3){grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Neutral interaction states, inspired by Carbon and Atlassian role separation. */
#studio{--catalog-hover:#eceef0;--catalog-selected:#e1e6eb;--catalog-selected-hover:#d6dee5;--catalog-ink:#243341;--catalog-border:#718395}
#studio[data-theme=dark]{--catalog-hover:#20272e;--catalog-selected:#303c47;--catalog-selected-hover:#3b4855;--catalog-ink:#f1f5f9;--catalog-border:#8499ad}
#studio .catalog button{position:relative;border-radius:9px;background:transparent!important;color:var(--color-text)!important;box-shadow:none;transition:background-color .15s ease,box-shadow .15s ease}
@media(hover:hover){#studio .catalog button:hover{background:var(--catalog-hover)!important;box-shadow:inset 0 0 0 1px var(--color-divider)}}
#studio .catalog button[aria-pressed=true]{background:var(--catalog-selected)!important;color:var(--catalog-ink)!important;box-shadow:inset 0 0 0 1px var(--catalog-border)}

#studio .catalog button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

@media(hover:hover){#studio .catalog button[aria-pressed=true]:hover{background:var(--catalog-selected-hover)!important}}

.studio-header a.brand{text-decoration:none;color:var(--color-text);border-radius:8px}
.studio-header a.brand:focus-visible,.starter-card:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.studio-header .brand .brand-subtitle{font-size:var(--text-caption)!important;letter-spacing:.2px!important;text-transform:none!important;font-weight:500!important;margin-top:5px!important}



/* Shared interaction roles across generator, labels, batch, history and scanner. */
#studio .btn-primary:not(:disabled):hover{background:var(--action-hover);border-color:var(--action-hover)}
#studio .btn-primary:not(:disabled):active{background:var(--action-pressed);border-color:var(--action-pressed)}
#studio .seg-opt:has(input:checked){background:var(--catalog-selected);color:var(--catalog-ink);box-shadow:inset 0 0 0 1px var(--catalog-border)}
#studio .input{border-color:var(--catalog-border)}
#studio .input:focus-visible{border-color:var(--focus)}
#studio .seg-opt:has(input:focus-visible),#studio .radio input:focus-visible+.dot{outline:2px solid var(--focus);outline-offset:-2px}
#studio .status-ok{border:1px solid var(--color-divider);font-weight:500}
#studio .quality-mark{font-size:var(--text-caption);min-width:24px}

/* Shared alignment and content-driven columns at the desktop boundary. */
#studio>div>.privacy-tools{width:100%;max-width:var(--workspace-width);margin:0 auto;padding:12px 32px 20px;border-top:1px solid var(--color-divider)}
.privacy-tools .project-row{align-items:center;justify-content:space-between;gap:16px}
.privacy-tools .session-option{display:flex;align-items:flex-start;gap:12px;flex:1 1 300px;min-width:0;line-height:1.6;cursor:pointer;padding-block:8px}
.session-option input{flex:none;width:18px;height:18px;margin-top:3px;accent-color:var(--action)}
.session-option span{min-width:0;overflow-wrap:anywhere}
.privacy-tools p{max-width:80ch;overflow-wrap:anywhere}
.privacy-body{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .35s ease,opacity .25s ease}
.privacy-body>div{min-height:0;overflow:hidden;padding:4px}
.privacy-body.is-closing{grid-template-rows:0fr;opacity:0}
.privacy-tools .deletion-confirmation{padding:12px 16px;margin-top:16px;border:1px solid var(--catalog-border);border-radius:6px;background:var(--status-ok-bg);color:var(--color-text);font-size:var(--text-ui)}
#studio .toast-notice{width:max-content;max-width:min(480px,calc(100vw - 32px))!important;left:max(16px,env(safe-area-inset-left))!important;bottom:max(16px,env(safe-area-inset-bottom))!important;border-radius:8px;line-height:1.5;word-break:normal!important;overflow-wrap:anywhere;box-shadow:0 4px 24px #0003}
#offline-status{padding-inline:max(20px,calc((100% - 1600px)/2 + 32px));line-height:1.6}
.scanner-viewport{width:100%;max-height:420px;border-radius:8px;flex-shrink:0}
@media(min-width:820px){
 #studio .generator-layout{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
 .generator-layout>.generator-controls,.generator-layout>.generator-preview{min-width:0;width:100%}
}
@media(min-width:1100px){
 #studio .generator-layout{grid-template-columns:220px minmax(0,1fr) minmax(0,1.1fr)}
 .generator-layout>.catalog{min-width:0;width:100%}
}
@media(max-width:1099px) and (min-width:820px){
 .generator-layout .generator-preview{padding:16px}
 .generator-layout .generator-controls>div{padding-inline:20px!important}
}
@media(max-width:819px){
 #studio>div>.privacy-tools{padding:12px 20px 20px}
 .privacy-tools .project-row{align-items:stretch}
 .privacy-tools .session-option{flex-basis:100%}
 .privacy-tools .btn{width:100%;white-space:normal}
 .generator-preview>div>div:nth-child(2){padding:20px!important}
}
@media(max-width:380px){
 .generator-preview{padding:12px}
 .generator-preview>div>div:nth-child(4){padding:14px!important}
 .starter-grid{gap:8px}
}
@media(prefers-reduced-motion:reduce){.privacy-body{transition:none}}

/* Focused confirmation: one readable surface on phone and desktop. */
#studio .delete-dialog{position:fixed;inset:0;width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 48px);margin:auto;padding:28px;border:1px solid var(--color-divider);border-radius:16px;background:var(--color-surface);color:var(--color-text);box-shadow:0 24px 80px #0005;overflow:auto;opacity:1;transform:translateY(0);transition:opacity .25s ease,transform .25s ease}
.delete-dialog::backdrop{background:#10151b99;backdrop-filter:blur(3px)}
#studio .delete-dialog h2{font-size:var(--text-title)!important;line-height:1.25;letter-spacing:-.5px!important;margin:8px 0 16px}
.delete-dialog p{font-size:var(--text-ui);line-height:1.65;margin:0 0 16px;overflow-wrap:anywhere}
.dialog-eyebrow{font-weight:650;font-size:var(--text-ui);color:var(--color-neutral-800)}
.delete-dialog .dialog-note{padding:12px 14px;border-radius:8px;background:var(--color-bg);color:var(--color-neutral-800);font-size:var(--text-ui)}
.dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px;flex-wrap:wrap}
#studio .delete-dialog.is-closing{opacity:0;transform:translateY(8px)}
@media(max-width:480px){#studio .delete-dialog{padding:22px}.dialog-actions{flex-direction:column-reverse}.dialog-actions .btn{width:100%}}
@media(prefers-reduced-motion:reduce){#studio .delete-dialog{transition:none}}

/* Search and workshop tools share the neutral workspace surfaces. */
.command-dialog{position:fixed;inset:0;margin:auto;width:min(580px,calc(100% - 32px));max-height:calc(100dvh - 48px);padding:24px;border:1px solid var(--color-divider);border-radius:16px;background:var(--color-surface);color:var(--color-text);box-shadow:0 24px 80px #0004;}
.command-dialog::backdrop{background:#10151b99;backdrop-filter:blur(3px)}
.command-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.command-heading h2{font-size:var(--text-heading);margin:0}.command-results{max-height:50dvh;overflow:auto;margin-top:12px}.command-results button{display:flex;flex-direction:column;gap:4px;width:100%;padding:12px;text-align:left;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;cursor:pointer}.command-results button:hover,.command-results button:focus-visible{background:var(--color-neutral-100)}.command-results span{font-size:var(--text-ui);color:var(--color-neutral-800)}
.workflow-tools{border:1px solid var(--color-divider);border-radius:8px;padding:12px}.workflow-tools summary{cursor:pointer;font-weight:600}.workflow-actions{display:flex;flex-wrap:wrap;align-items:end;gap:12px;padding-top:14px}.workflow-actions p{flex-basis:100%;font-size:var(--text-ui);line-height:1.6;margin:0}.structured-hint{font-size:var(--text-ui);line-height:1.6;color:var(--color-neutral-800)}.structured-hint:empty{display:none}
@media(max-width:480px){.command-dialog{padding:16px}.command-heading h2{font-size:var(--text-body)}.workflow-actions>.btn{width:100%}}

.studio-footer>span.maker-credit{margin-left:auto;text-align:right;white-space:nowrap}

/* Workspace-specific layouts: no positional selectors for these tools. */
.batch-workspace,.scan-workspace{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(0,1.4fr);align-items:start;flex:1}
.scan-workspace{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)}
.scan-workspace p,.empty-result{max-width:65ch;line-height:1.65}
.empty-result{margin:0;padding:24px;border:1px dashed var(--color-divider);border-radius:8px;color:var(--color-neutral-800);font-size:var(--text-ui)}
.scan-message:empty{display:none}
.batch-error{font-size:var(--text-ui);line-height:1.5;color:var(--danger);overflow-wrap:anywhere}
.batch-error summary{cursor:pointer;font-weight:600;padding:6px 0}
.batch-error p{margin:8px 0}
.batch-summary{font-size:var(--text-ui);line-height:1.6;margin:0}
#studio .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
#studio input[type=number],.batch-workspace input{font-variant-numeric:tabular-nums}
#studio :is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media(max-width:819px){.batch-workspace,.scan-workspace{grid-template-columns:minmax(0,1fr)}.batch-workspace>section,.scan-workspace>section{border-right:0!important;padding:20px!important}.scan-result{border-top:1px solid var(--color-divider)}}
@media(min-width:1600px){.batch-workspace{grid-template-columns:minmax(360px,.7fr) minmax(0,1.5fr)}}

.scan-workspace .scanner-viewport{max-height:420px;border-width:1px!important;border-radius:8px}
.scan-workspace .scanner-viewport:has(video[style*="display:none"]){aspect-ratio:auto!important;min-height:180px}
#studio[data-theme=dark]{--color-accent-2:#b7c0cd;--color-neutral-200:#303640;--color-neutral-300:#424a56;--color-neutral-400:#657180;--color-neutral-500:#8893a2;--color-neutral-600:#a5aebb;--color-neutral-700:#c5ccd6;--color-neutral-900:#edf0f4}

.field-error{color:var(--danger);font-size:var(--text-ui);line-height:1.5;margin:6px 0;overflow-wrap:anywhere}.search-shortcut{font:inherit;font-size:var(--text-caption);color:var(--color-neutral-800)}@media(max-width:600px){.search-shortcut{display:none}}

.batch-workspace>section:last-child:has(.batch-summary:empty){display:none}
.valid-export{padding:12px 0;border-top:1px solid var(--color-divider)}.valid-export p{font-size:var(--text-ui);line-height:1.5;margin:0 0 10px}

/* Field focus stays on the field edge; neutral contrast works in both themes. */
#studio{--field-focus:#515b69;--field-active:#ffffff}
#studio[data-theme=dark]{--field-focus:#b7c0cd;--field-active:#20252c}
#studio .input{transition:border-color 120ms ease,box-shadow 120ms ease,background-color 120ms ease}
#studio .input:focus,#studio .input:focus-visible{
 border-color:var(--field-focus);
 background:var(--field-active);
 box-shadow:inset 0 0 0 1px var(--field-focus);
 outline:2px solid transparent;
 outline-offset:2px;
}
#studio .input[aria-invalid=true]:focus{border-color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}
@media(forced-colors:active){#studio .input:focus,#studio .input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}
@media(prefers-reduced-motion:reduce){#studio .input{transition:none}}

/* One viewport budget includes PWA notices; short tools keep the footer at the bottom. */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
#studio{display:flex;flex:1 0 auto;min-width:0}
#studio>div{flex:1;min-width:0;min-height:0!important}
#studio .studio-header,#studio .people-start,#studio .privacy-tools,#studio .studio-footer{flex-shrink:0}
#studio[data-tab]>div>.privacy-tools{margin-top:auto}
#studio .studio-header{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 16px}
#studio .studio-header nav{min-width:0;max-width:100%;margin-inline:auto;order:0!important}
#studio .header-tools{min-width:0;margin:0!important;padding:0!important}
#studio .studio-footer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px 24px;line-height:1.6}
#studio .studio-footer .privacy-note{min-width:0;overflow-wrap:anywhere}
#studio .studio-footer .maker-credit{margin:0;text-align:right}
@media(max-width:1099px){
 #studio .studio-header{grid-template-columns:minmax(0,1fr) auto}
 #studio .studio-header nav{grid-column:1/-1;grid-row:2;width:100%;margin:0;justify-content:center}
 #studio .studio-header .brand{min-width:0;justify-self:start}
}
@media(max-width:600px){
 #studio .studio-footer{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px}
 #studio .studio-footer .privacy-note{grid-column:1/-1;grid-row:2}
 #studio .studio-footer .maker-credit{grid-column:2;grid-row:1}
}
@media(max-width:480px){
 #studio .studio-header{padding:8px 12px;gap:4px 8px}
 #studio .studio-header .brand{gap:8px!important;padding:8px 0!important}
 #studio .studio-header .brand-symbol{width:32px;height:32px}
 #studio .studio-header .brand .brand-name{font-size:var(--text-compact-brand)!important}
 #studio .header-tools{gap:4px!important}
 #studio .header-tools>.btn{min-width:36px;min-height:40px;padding:8px}
 #studio .header-tools .seg-opt{min-width:30px;min-height:38px;padding:8px 5px}
 #studio .studio-header nav{justify-content:stretch;padding:4px 0!important}
 #studio .studio-header nav button{padding:10px 7px!important}
}

/* Readable UI roles; print-label typography remains configured in millimetres/points. */
#studio>div{line-height:1.5}
#studio h2,#studio h3{font-size:var(--text-heading)!important;line-height:1.3}
#studio .field>label,#studio .btn,.project-tools summary{font-size:var(--text-ui)}

.studio-header nav button span:empty{display:none}
@media(max-width:480px){#studio .studio-header nav button{flex:1 0 auto!important;padding:10px 5px!important;gap:4px}}

/* Approved five-bar identity: quiet monochrome mark with a lighter wordmark. */
#studio .studio-header .brand{gap:12px!important}
#studio .studio-header .brand-symbol{width:29px;height:20px;color:#242830}
#studio[data-theme=dark] .studio-header .brand-symbol{color:#f4f5f7}
#studio .studio-header .brand span.brand-name{font-weight:400!important;letter-spacing:-.035em!important;line-height:1.1;color:#242830!important}
#studio[data-theme=dark] .studio-header .brand span.brand-name{color:#f4f5f7!important}
@media(max-width:480px){#studio .studio-header .brand{gap:9px!important}#studio .studio-header .brand-symbol{width:25px;height:18px}}

.verification-report{font-size:var(--text-ui);line-height:1.6;overflow-wrap:anywhere;border:1px solid var(--color-divider);border-radius:8px;padding:12px}.scan-batch-list{max-height:420px;overflow:auto;display:grid;gap:12px}.scan-batch-list article{border:1px solid var(--color-divider);border-radius:8px;padding:12px;overflow-wrap:anywhere}.scan-batch-list span{display:block;font-size:var(--text-caption)}.scan-batch-list p{white-space:pre-wrap}

@media (max-width:420px){#studio .label-dimensions{grid-template-columns:repeat(2,minmax(0,1fr))!important}#studio .label-dimensions>.field:last-child{grid-column:1 / -1}}

/* Shared rhythm for the tool forms and restrained update dialog. */
#studio .field{display:flex;flex-direction:column;gap:8px;min-width:0}
#studio .field>label{font-size:14px;line-height:1.45;font-weight:600}
#studio .input{line-height:1.5;font-weight:400;min-width:0;width:100%}
#studio .settings-group summary,#studio .content-title{font-size:16px;line-height:1.5}
#studio .seg{flex-wrap:wrap;max-width:100%}
#studio .seg-opt{font-size:14px;line-height:1.4;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
#studio .workflow-tools p,#studio .verification-report{font-size:14px;line-height:1.65;max-width:75ch}
#studio input[type=checkbox]{accent-color:var(--color-text)}
#offline-status{position:fixed;inset:auto 24px 24px auto;z-index:20;max-width:min(440px,calc(100vw - 32px));padding:18px 20px;border:1px solid #cdd2d9;border-radius:12px;background:#fff;color:#303640;box-shadow:0 12px 40px #0002;font:14px/1.6 var(--font-body)}
#offline-status[hidden]{display:none}
#offline-status button{display:block;margin:12px 0 0;padding:10px 14px;border:1px solid #303640;border-radius:7px;background:#303640;color:#fff;font:600 14px/1.4 var(--font-body);cursor:pointer}
.update-dialog{--dialog-bg:var(--color-surface);--dialog-ink:var(--color-text);--dialog-soft:var(--color-bg);--dialog-line:var(--color-divider);--dialog-action:var(--color-accent);--dialog-action-ink:var(--color-on-accent);position:fixed;inset:0;width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 48px);margin:auto;padding:28px;border:1px solid var(--dialog-line);border-radius:16px;background:var(--dialog-bg);color:var(--dialog-ink);box-shadow:0 24px 80px #0005;font:14px/1.65 var(--font-body);overflow:auto}
.update-dialog::backdrop{background:#10151b99;backdrop-filter:blur(3px)}
.update-dialog h2{font-size:24px;font-weight:600;line-height:1.25;letter-spacing:-.5px;margin:8px 0 16px}
.update-dialog p{margin:0 0 16px;overflow-wrap:anywhere}
.update-dialog .dialog-note{padding:12px 14px;border-radius:8px;background:var(--dialog-soft)}
.update-dialog .btn{font:600 14px/1.4 var(--font-body);padding:11px 16px;min-height:44px;border:1px solid var(--dialog-line);border-radius:7px;background:var(--dialog-bg);color:var(--dialog-ink);cursor:pointer}
.update-dialog .btn-primary{background:var(--dialog-action);color:var(--dialog-action-ink);border-color:var(--dialog-action)}
.update-dialog .btn:focus-visible,#offline-status button:focus-visible{outline:2px solid currentColor;outline-offset:3px}



@media(max-width:480px){.update-dialog{padding:22px}#offline-status{inset:auto 16px 16px 16px}.update-dialog .dialog-actions{flex-direction:column-reverse}.update-dialog .btn{width:100%}}

#studio .template-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:16px}
#studio .template-fields>.field:only-child{grid-column:1/-1}

.update-dialog .dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
.update-dialog .dialog-eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.update-dialog .btn-secondary:hover{background:var(--dialog-soft)}
.update-dialog [hidden]{display:none!important}

.update-dialog .dialog-eyebrow{color:var(--dialog-ink);opacity:.75}
#studio .template-fields{align-items:end}

#offline-status{background:var(--color-surface);color:var(--color-text);border-color:var(--color-divider)}
#offline-status button{background:var(--color-accent);color:var(--color-on-accent);border-color:var(--color-accent)}
body:has(dialog[open]) #offline-status{display:none}
#studio button,#studio .btn,#studio .seg-opt,#studio summary,#studio select,#studio input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),.update-dialog button{min-height:44px!important}
#studio button,#studio .btn-icon{min-width:44px!important}
#studio .content-types{flex-wrap:nowrap!important;overflow-x:auto!important;scroll-snap-type:x proximity;align-self:stretch!important}
#studio .content-types .seg-opt{flex:0 0 auto;scroll-snap-align:start}

/* Shared application palette: inherited by every dialog and workspace. */
:root{--color-bg:#f4f5f7;--color-surface:#ffffff;--color-text:#20242a;--color-divider:#d5d9df;--color-accent:#303640;--color-accent-600:#424a57;--color-accent-700:#424a57;--color-accent-100:#e9ecf0;--color-accent-800:#303640;--color-neutral-100:#e9ecf0;--color-neutral-800:#515b69;color-scheme:light;--color-on-accent:#ffffff}
:root[data-theme=dark]{--color-bg:#111316;--color-surface:#1b1f24;--color-text:#edf0f4;--color-divider:#424a56;--color-accent:#d8dee7;--color-accent-600:#edf0f4;--color-accent-700:#c5ccd6;--color-accent-100:#303640;--color-accent-800:#edf0f4;--color-neutral-100:#2a3038;--color-neutral-800:#b7c0cd;color-scheme:dark;--color-on-accent:#20242a}

/* Keep nested navigation scrollers inside the document viewport. */
html{overflow-x:clip}

#studio label:has(input[type=checkbox]),#studio input[type=range]{min-height:44px} #studio label:has(input[type=checkbox]){display:flex;align-items:center;gap:8px}

/* Navigation hierarchy: primary workspaces, then compact in-form choices. */
#studio .studio-header nav{align-self:center;display:flex;gap:4px!important;padding:5px!important;border-radius:12px;background:var(--color-bg);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:5px}
#studio .studio-header nav .workspace-tab{flex:0 0 auto!important;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;padding:10px 16px!important;border:0!important;border-radius:8px;background:transparent;color:var(--color-neutral-800)!important;font:600 14px/1.4 var(--font-body)!important;cursor:pointer;scroll-snap-align:start;transition:background-color 140ms ease,color 140ms ease}
#studio .studio-header nav .workspace-tab:hover{background:var(--color-neutral-100)!important;color:var(--color-text)!important}
#studio .studio-header nav .workspace-tab[aria-current=page]{background:var(--color-accent)!important;color:var(--color-on-accent)!important;box-shadow:0 1px 2px #00000014!important}
#studio .studio-header nav .workspace-tab:focus-visible{outline:2px solid var(--color-text);outline-offset:-2px}
#studio .studio-header nav .workspace-tab[aria-current=page]:focus-visible{outline-color:var(--color-on-accent)}
#studio .workspace-count{font-size:12px;font-weight:500;min-width:20px;padding:1px 5px;border-radius:4px;background:var(--color-neutral-100);color:var(--color-text)}
#studio .workspace-tab[aria-current=page] .workspace-count{background:var(--color-on-accent);color:var(--color-accent)}
#studio .seg{padding:4px;gap:4px;border:1px solid var(--color-divider);border-radius:10px;background:var(--color-bg)}
#studio .seg-opt{position:relative;border-radius:6px;padding:10px 12px;color:var(--color-neutral-800);font-size:14px;font-weight:500;white-space:nowrap;box-shadow:none;transition:background-color 140ms ease,color 140ms ease}
#studio .seg-opt:hover{background:var(--color-neutral-100);color:var(--color-text)}
#studio .seg-opt:has(input:checked){background:var(--color-surface);color:var(--color-text);font-weight:600;box-shadow:inset 0 0 0 1px var(--color-divider),0 1px 2px #0000000d}
#studio .seg-opt:has(input:focus-visible){outline:2px solid var(--color-text);outline-offset:-2px}
#studio .header-tools .seg{flex-wrap:nowrap}
#studio .header-tools .seg-opt{min-width:44px;padding:10px}
#studio .content-types{scroll-padding-inline:4px;scrollbar-width:thin}
@media(max-width:1099px){#studio .studio-header nav{justify-content:flex-start}}
@media(max-width:480px){#studio .studio-header nav .workspace-tab{padding:10px 14px!important}#studio .header-tools{gap:6px!important}#studio .header-tools .seg-opt{padding:10px 8px}}
@media(forced-colors:active){#studio .workspace-tab[aria-current=page],#studio .seg-opt:has(input:checked){outline:2px solid Highlight;outline-offset:-3px}}

/* Header utilities share one outer height and aligned icon/text centres. */
#studio .header-tools{display:flex;align-items:center;gap:8px!important}
#studio .header-tools>.btn{height:48px;min-height:48px!important;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border-radius:9px;line-height:1}
#studio .header-tools>.btn-icon{width:48px;min-width:48px!important;padding:0}
#studio .header-tools>.seg{height:48px;display:flex;align-items:center;flex-wrap:nowrap;padding:1px;gap:2px;border-radius:9px;box-sizing:border-box}
#studio .header-tools .seg-opt{height:44px;min-height:44px!important;min-width:44px;padding:0 10px;border-radius:7px;font-size:14px;line-height:1}
#studio .header-tools>.btn svg{width:18px;height:18px;flex:none}
#studio .header-tools .search-shortcut{font-size:12px;line-height:1;margin:0}
@media(max-width:480px){#studio .header-tools{gap:6px!important}#studio .header-tools>.btn{padding:0 10px}#studio .header-tools>.btn-icon{padding:0}#studio .header-tools .seg-opt{padding:0 8px}}

/* Shared label/input/error tracks keep multiline serial labels aligned. */
.serial-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:8px 12px}
#studio .serial-fields>.field{display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:8px;min-width:0;margin:0}
#studio .serial-fields>.field>label{align-self:end;justify-self:start;text-align:left;margin:0;line-height:1.4}
#studio .serial-fields>.field>.input{height:44px;min-width:0;width:100%;box-sizing:border-box}
.serial-fields .field-error{margin:0}

.serial-journal{border:1px solid var(--color-divider);border-radius:8px;padding:12px;min-width:0}
.serial-journal summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.serial-journal p{font-size:var(--text-ui);line-height:1.55;overflow-wrap:anywhere}
.serial-tracking{display:flex;align-items:center;gap:8px;min-height:44px}
.serial-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.serial-journal .field{margin:12px 0}.serial-status:empty{display:none}