/* 4.0 look — the 总控台 (studio) style for the portal, the browser ESG-X and the fill page: quiet panels, thin rules, a
   serif for titles, mono for figures and labels; input = laterite, computed = nickel, attention = sulfur. skin.js marks
   every page <html data-skin="studio">. The colours come from the shared design tokens (tokens.css, generated from
   esgx/ui/theme.py), so light and dark follow the same palette as the desktop app. */
:root[data-skin="studio"] {
  --s-bg: var(--bg); --s-panel: var(--surface); --s-panel-2: var(--surface-alt); --s-ink: var(--text); --s-muted: var(--muted);
  --s-faint: var(--subtle); --s-line: var(--border); --s-line-2: var(--border-strong); --s-laterite: var(--accent);
  --s-nickel: var(--good); --s-sulfur: var(--warn); --s-err: var(--bad); --s-na: var(--info);
  --s-display: var(--font-display); --s-body: var(--font-ui); --s-mono: var(--font-mono);
  /* the variables the three pages are built on (the token names themselves already carry the palette) */
  --primary: var(--s-laterite); --primary-dark: var(--s-laterite); --faint: var(--s-faint);
  --solid: var(--s-panel); --soft: var(--s-panel-2); --surface-strong: var(--s-panel);
  --app-bg: var(--s-bg); --nav-bg: var(--s-panel); --brand: var(--s-ink); --brand-hover: var(--primary-hover); --header-bg: var(--s-panel-2);
  --shadow-hover: 0 0 0 3px rgba(63, 125, 34, .12); --violet: var(--s-laterite);
  --font: var(--s-body); --mono: var(--s-mono);
}
[data-skin="studio"] body { background: var(--s-bg) !important; color: var(--s-ink); }
[data-skin="studio"] body::before { display: none !important; }
[data-skin="studio"] * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
[data-skin="studio"] :focus-visible { outline: 2px solid var(--s-sulfur); outline-offset: 2px; }
[data-skin="studio"] input[type=checkbox] { accent-color: var(--s-ink); }

/* ============================================================== portal (index.html) */
[data-skin="studio"][data-page="portal"] .nav { background: var(--s-panel); color: var(--s-ink); border-right: 1px solid var(--s-line); box-shadow: none; padding: 18px 10px; }
[data-skin="studio"][data-page="portal"] .nav .brand { color: var(--s-ink); font: 900 21px/1 var(--s-display); padding: 2px 8px 16px; }
[data-skin="studio"][data-page="portal"] .nav .grp { color: var(--s-faint); opacity: 1; font: 600 10px/1 var(--s-mono); letter-spacing: .14em; text-transform: uppercase; margin: 16px 10px 6px; }
[data-skin="studio"][data-page="portal"] .nav a { color: var(--s-muted); border-radius: 7px; padding: 7px 10px; }
[data-skin="studio"][data-page="portal"] .nav a:hover { background: var(--s-panel-2); color: var(--s-ink); }
[data-skin="studio"][data-page="portal"] .nav a.on { background: var(--s-panel-2); color: var(--s-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--s-laterite); }
[data-skin="studio"][data-page="portal"] .nav a.fill { background: var(--s-panel); color: var(--s-laterite); border: 1px solid var(--s-laterite); font-weight: 700; }
[data-skin="studio"][data-page="portal"] .nav .me { color: var(--s-ink); background: none; border-top: 1px solid var(--s-line); border-radius: 0; }
[data-skin="studio"][data-page="portal"] .nav .me a { color: var(--s-muted); }
[data-skin="studio"][data-page="portal"] .nav .me .lang-pick button { color: var(--s-muted); }
[data-skin="studio"][data-page="portal"] .nav .me .lang-pick button.on { color: var(--s-ink); text-decoration-color: var(--s-laterite); }
[data-skin="studio"][data-page="portal"] .main h1 { font: 900 24px/1.2 var(--s-display); letter-spacing: -.01em; }
[data-skin="studio"][data-page="portal"] .main .lead { color: var(--s-muted); font-size: 13px; }
[data-skin="studio"][data-page="portal"] .card { background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 12px; box-shadow: none; }
[data-skin="studio"][data-page="portal"] .cards .card::before { display: none; }
[data-skin="studio"][data-page="portal"] .cards .card:hover { border-color: var(--s-line-2); background: var(--s-panel); box-shadow: 0 0 0 3px rgba(63, 125, 34, .10); }
[data-skin="studio"][data-page="portal"] .card h2 { font-size: 13px; font-weight: 600; color: var(--s-ink); }
[data-skin="studio"][data-page="portal"] .card .num { font: 600 22px/1.2 var(--s-mono); }
[data-skin="studio"][data-page="portal"] .hero { background: var(--s-panel); }
[data-skin="studio"][data-page="portal"] .hero::after { display: none; }
[data-skin="studio"][data-page="portal"] .hero h2 { font: 900 20px/1.2 var(--s-display); }
[data-skin="studio"][data-page="portal"] .fill-hero { border: 1px solid var(--s-line); box-shadow: inset 4px 0 0 var(--s-laterite); background: var(--s-panel); }
[data-skin="studio"][data-page="portal"] .btn { background: var(--s-ink); color: var(--s-panel); border: 1px solid var(--s-ink); box-shadow: none; border-radius: 8px; }
[data-skin="studio"][data-page="portal"] .btn:hover { background: var(--primary-hover); transform: none; box-shadow: none; }
[data-skin="studio"][data-page="portal"] .btn.secondary, [data-skin="studio"][data-page="portal"] .btn.danger { background: var(--s-panel); color: var(--s-ink); border-color: var(--s-line-2); }
[data-skin="studio"][data-page="portal"] .btn.danger { border-color: color-mix(in srgb, var(--s-err) 55%, transparent); }
[data-skin="studio"][data-page="portal"] .btn.secondary:hover { border-color: var(--s-ink); background: var(--s-panel-2); }
[data-skin="studio"][data-page="portal"] .tbl-wrap { background: var(--s-panel); border: 1px solid var(--s-line); box-shadow: none; }
[data-skin="studio"][data-page="portal"] th { background: var(--s-panel-2); font: 600 11px/1.3 var(--s-mono); color: var(--s-muted); border-bottom: 1px solid var(--s-line); }
[data-skin="studio"][data-page="portal"] td { border-bottom: 1px solid var(--s-line); }
[data-skin="studio"][data-page="portal"] tr:nth-child(even) td { background: none; }
[data-skin="studio"][data-page="portal"] tr:hover td { background: var(--s-panel-2); }
[data-skin="studio"][data-page="portal"] .tag { background: var(--s-panel-2); border-color: var(--s-line); font-size: 11.5px; }
[data-skin="studio"][data-page="portal"] .tag.ok { background: color-mix(in srgb, var(--s-nickel) 12%, transparent); color: var(--s-nickel); border-color: transparent; }
[data-skin="studio"][data-page="portal"] .tag.warn { background: color-mix(in srgb, var(--s-sulfur) 14%, transparent); color: var(--s-sulfur); border-color: transparent; }
[data-skin="studio"][data-page="portal"] .tag.bad { background: color-mix(in srgb, var(--s-err) 12%, transparent); color: var(--s-err); border-color: transparent; }
[data-skin="studio"][data-page="portal"] .tag.admin { background: var(--s-ink); color: var(--s-panel); }
[data-skin="studio"][data-page="portal"] .note { background: var(--s-panel-2); border-color: var(--s-line); }
[data-skin="studio"][data-page="portal"] .field input, [data-skin="studio"][data-page="portal"] .field select, [data-skin="studio"][data-page="portal"] .inp { background: var(--s-panel); border-color: var(--s-line-2); }
[data-skin="studio"][data-page="portal"] .field input:focus, [data-skin="studio"][data-page="portal"] .inp:focus { border-color: var(--s-ink); box-shadow: 0 0 0 3px rgba(169, 124, 12, .18); }
[data-skin="studio"][data-page="portal"] .auth::before, [data-skin="studio"][data-page="portal"] .auth::after { display: none; }
[data-skin="studio"][data-page="portal"] .auth-card { background: var(--s-panel); border: 1px solid var(--s-line); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
[data-skin="studio"][data-page="portal"] .auth-card::before { background: var(--s-laterite); height: 3px; }
[data-skin="studio"][data-page="portal"] .auth-card .brand { background: none; color: var(--s-ink); -webkit-text-fill-color: currentColor; font: 900 24px/1 var(--s-display); }
[data-skin="studio"][data-page="portal"] .modal { background: rgba(21, 26, 27, .32); }
[data-skin="studio"][data-page="portal"] .modal-box { background: var(--s-panel); border: 1px solid var(--s-line); box-shadow: 0 20px 50px rgba(21, 26, 27, .18); }
[data-skin="studio"][data-page="portal"] .modal-box h2 { font: 900 19px/1.2 var(--s-display); }
[data-skin="studio"][data-page="portal"] .toast { background: var(--s-ink); border-color: var(--s-ink); }
[data-skin="studio"][data-page="portal"] .rd-dept.on { background: var(--s-panel-2); box-shadow: inset 2px 0 0 var(--s-laterite); }
[data-skin="studio"][data-page="portal"] .code { border-color: var(--s-laterite); }
[data-skin="studio"][data-page="portal"] .skin-sw { color: var(--s-laterite) !important; }

/* ============================================================== browser ESG-X (workbench.html) */
[data-skin="studio"][data-page="app"] #wb-bar { background: var(--s-panel); color: var(--s-ink); border-bottom: 1px solid var(--s-line); box-shadow: none; }
[data-skin="studio"][data-page="app"] .wb-home { color: var(--s-ink); font: 900 17px/1 var(--s-display); }
[data-skin="studio"][data-page="app"] .wb-btn { color: var(--s-ink); background: var(--s-panel); border: 1px solid var(--s-line); }
[data-skin="studio"][data-page="app"] .wb-btn:hover { background: var(--s-panel-2); border-color: var(--s-line-2); }
[data-skin="studio"][data-page="app"] .wb-fill { background: var(--s-ink); color: var(--s-panel); border-color: var(--s-ink); box-shadow: none; }
[data-skin="studio"][data-page="app"] .wb-fill:hover { background: var(--primary-hover); }
[data-skin="studio"][data-page="app"] .wb-submit.has { background: var(--s-panel); color: var(--s-laterite); border-color: var(--s-laterite); box-shadow: none; }
[data-skin="studio"][data-page="app"] .wb-submit b { background: var(--s-panel-2); }
[data-skin="studio"][data-page="app"] .wb-submit.has b { background: var(--s-err); color: #fff; }
[data-skin="studio"][data-page="app"] .wb-busy { color: var(--s-muted); }
[data-skin="studio"][data-page="app"] .spinner { border-color: var(--s-line); border-top-color: var(--s-laterite); }
[data-skin="studio"][data-page="app"] .q-tree.Nav { background: var(--s-panel); color: var(--s-ink); border-right: 1px solid var(--s-line); box-shadow: none; }
[data-skin="studio"][data-page="app"] .q-tree.Nav .it { color: var(--s-muted); border-radius: 7px; }
[data-skin="studio"][data-page="app"] .q-tree.Nav .it .tw { color: var(--s-faint); }
[data-skin="studio"][data-page="app"] .q-tree.Nav .it.head { color: var(--s-faint); font: 600 10px/1.4 var(--s-mono); letter-spacing: .12em; text-transform: uppercase; margin-top: 14px; }
[data-skin="studio"][data-page="app"] .q-tree.Nav .it:hover { background: var(--s-panel-2); color: var(--s-ink); }
[data-skin="studio"][data-page="app"] .q-tree.Nav .it.sel { background: var(--s-panel-2); color: var(--s-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--s-laterite); }
[data-skin="studio"][data-page="app"] .q-box.TopBar, [data-skin="studio"][data-page="app"] .TopBar { background: var(--s-panel); border-bottom: 1px solid var(--s-line); }
[data-skin="studio"][data-page="app"] .q-label.Logo { background: none; color: var(--s-ink); -webkit-text-fill-color: currentColor; font: 900 1.35rem/1 var(--s-display); }
[data-skin="studio"][data-page="app"] .q-label.PageTitle { font: 900 1.55rem/1.2 var(--s-display); letter-spacing: -.01em; }
[data-skin="studio"][data-page="app"] .q-label.PageSubtitle { font-size: .9rem; }
[data-skin="studio"][data-page="app"] .q-label.SectionTitle { font-size: .95rem; font-weight: 600; }
[data-skin="studio"][data-page="app"] .q-label.KpiTitle { font-size: .82rem; }
[data-skin="studio"][data-page="app"] .q-label.KpiValue { font: 600 1.5rem/1.15 var(--s-mono); font-variant-numeric: tabular-nums; }
[data-skin="studio"][data-page="app"] .q-label.KpiSub { color: var(--s-faint); font-size: .8rem; }
[data-skin="studio"][data-page="app"] .q-card { background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 12px; box-shadow: none; }
[data-skin="studio"][data-page="app"] .q-card.Kpi { border-top-width: 1px; }
[data-skin="studio"][data-page="app"] .q-card.Kpi:hover { border-color: var(--s-line-2); background: var(--s-panel); box-shadow: 0 0 0 3px rgba(63, 125, 34, .10); }
[data-skin="studio"][data-page="app"] .q-input, [data-skin="studio"][data-page="app"] .q-select, [data-skin="studio"][data-page="app"] .q-textarea,
[data-skin="studio"][data-page="app"] .q-number, [data-skin="studio"][data-page="app"] .q-date { background: var(--s-panel); border-color: var(--s-line-2); border-radius: 7px; }
[data-skin="studio"][data-page="app"] .q-input:focus, [data-skin="studio"][data-page="app"] .q-select:focus, [data-skin="studio"][data-page="app"] .q-textarea:focus,
[data-skin="studio"][data-page="app"] .q-number:focus, [data-skin="studio"][data-page="app"] .q-date:focus { border-color: var(--s-ink); box-shadow: 0 0 0 3px rgba(169, 124, 12, .18); }
[data-skin="studio"][data-page="app"] .q-input[readonly], [data-skin="studio"][data-page="app"] .q-textarea[readonly] { background: var(--s-panel-2); }
[data-skin="studio"][data-page="app"] .q-btn { background: var(--s-panel); border-color: var(--s-line-2); color: var(--s-ink); border-radius: 8px; }
[data-skin="studio"][data-page="app"] .q-btn:hover { border-color: var(--s-ink); background: var(--s-panel-2); }
[data-skin="studio"][data-page="app"] .q-btn.Primary { background: var(--s-ink); color: var(--s-panel); border-color: var(--s-ink); box-shadow: none; }
[data-skin="studio"][data-page="app"] .q-btn.Primary:hover { background: var(--primary-hover); }
[data-skin="studio"][data-page="app"] .q-btn.Danger { border-color: color-mix(in srgb, var(--s-err) 55%, transparent); color: var(--s-err); }
[data-skin="studio"][data-page="app"] .q-btn.checked { background: var(--s-panel-2); border-color: var(--s-ink); }
[data-skin="studio"][data-page="app"] .q-btn.HeroBtn { background: var(--s-ink); color: var(--s-panel); border-color: var(--s-ink); }
[data-skin="studio"][data-page="app"] .q-btn.HeroBtn:hover { background: var(--primary-hover); }
[data-skin="studio"][data-page="app"] .q-btn.Chip.checked { background: var(--s-ink); color: var(--s-panel); border-color: var(--s-ink); }
[data-skin="studio"][data-page="app"] .q-btn:disabled, [data-skin="studio"][data-page="app"] .q-btn.dis { color: var(--s-faint); background: var(--s-panel-2); }
[data-skin="studio"][data-page="app"] .q-check input { accent-color: var(--s-ink); }
[data-skin="studio"][data-page="app"] .q-bar { background: var(--s-line); }
[data-skin="studio"][data-page="app"] .q-bar > i { background: var(--s-nickel); }
[data-skin="studio"][data-page="app"] .q-menu { background: var(--s-panel); border-color: var(--s-line); box-shadow: 0 10px 30px rgba(21, 26, 27, .12); }
[data-skin="studio"][data-page="app"] .q-menu button:hover { background: var(--s-panel-2); }
[data-skin="studio"][data-page="app"] .q-tabbar { border-bottom-color: var(--s-line); }
[data-skin="studio"][data-page="app"] .q-tabbar button { color: var(--s-muted); }
[data-skin="studio"][data-page="app"] .q-tabbar button:hover { background: var(--s-panel-2); color: var(--s-ink); }
[data-skin="studio"][data-page="app"] .q-tabbar button.on { background: none; color: var(--s-ink); box-shadow: inset 0 -2px 0 var(--s-laterite); }
[data-skin="studio"][data-page="app"] .q-tablewrap, [data-skin="studio"][data-page="app"] .q-tree, [data-skin="studio"][data-page="app"] .q-list,
[data-skin="studio"][data-page="app"] .q-html, [data-skin="studio"][data-page="app"] .q-vec { background: var(--s-panel); border-color: var(--s-line); }
[data-skin="studio"][data-page="app"] .q-table th { background: var(--s-panel-2); font: 600 11px/1.3 var(--s-mono); color: var(--s-muted); border-bottom: 1px solid var(--s-line); border-right-color: var(--s-line); }
[data-skin="studio"][data-page="app"] .q-table th .ar { color: var(--s-laterite); }
[data-skin="studio"][data-page="app"] .q-table td { border-bottom-color: var(--s-line); }
[data-skin="studio"][data-page="app"] .q-table td.r { font-family: var(--s-mono); }
[data-skin="studio"][data-page="app"] .q-table tr:nth-child(even) td { background-color: transparent; }
[data-skin="studio"][data-page="app"] .q-table tbody tr:hover td { background-color: var(--s-panel-2); }
[data-skin="studio"][data-page="app"] .q-table tbody tr.sel td { background-color: color-mix(in srgb, var(--s-sulfur) 12%, var(--s-panel)) !important; }
[data-skin="studio"][data-page="app"] .q-table td:first-child { background-color: var(--s-panel); box-shadow: 1px 0 0 var(--s-line); }
[data-skin="studio"][data-page="app"] .q-table tr:nth-child(even) td:first-child { background-color: var(--s-panel); }
[data-skin="studio"][data-page="app"] .q-table tbody tr.sel td:first-child { background-color: color-mix(in srgb, var(--s-sulfur) 16%, var(--s-panel)) !important; }
[data-skin="studio"][data-page="app"] .q-tree .it:hover, [data-skin="studio"][data-page="app"] .q-list .it:hover { background: var(--s-panel-2); }
[data-skin="studio"][data-page="app"] .q-tree:not(.Nav) .it.sel, [data-skin="studio"][data-page="app"] .q-list .it.sel { background: color-mix(in srgb, var(--s-sulfur) 14%, var(--s-panel)); }
[data-skin="studio"][data-page="app"] .q-html td, [data-skin="studio"][data-page="app"] .q-html th { border-color: var(--s-line); }
[data-skin="studio"][data-page="app"] .q-status { background: var(--s-panel); border-top-color: var(--s-line); font-family: var(--s-mono); font-size: .78rem; }
[data-skin="studio"][data-page="app"] .q-chart svg text { fill: var(--s-muted); }
[data-skin="studio"][data-page="app"] .wb-layer { background: rgba(21, 26, 27, .32); }
[data-skin="studio"][data-page="app"] .wb-dlg { background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 14px; box-shadow: 0 20px 50px rgba(21, 26, 27, .18); }
[data-skin="studio"][data-page="app"] .wb-dlg-h { border-bottom-color: var(--s-line); font: 900 16px/1.3 var(--s-display); }
[data-skin="studio"][data-page="app"] .wb-toast, [data-skin="studio"][data-page="app"] .wb-tip { background: var(--s-ink); border-color: var(--s-ink); }
[data-skin="studio"][data-page="app"] .wb-toast a { color: #f0c9a8; }
[data-skin="studio"][data-page="app"] .wb-toast.bad { background: var(--s-err); border-color: var(--s-err); }
[data-skin="studio"][data-page="app"] .q-label.DemoTag { background: color-mix(in srgb, var(--s-sulfur) 14%, transparent); border-color: color-mix(in srgb, var(--s-sulfur) 40%, transparent); }

/* ============================================================== 数据填报 (fill.html) */
[data-skin="studio"][data-page="fill"] .rail { background: var(--s-panel); color: var(--s-ink); border-right: 1px solid var(--s-line); }
[data-skin="studio"][data-page="fill"] .back { background: var(--s-panel); color: var(--s-ink); border: 1px solid var(--s-line); }
[data-skin="studio"][data-page="fill"] .back:hover { background: var(--s-panel-2); }
[data-skin="studio"][data-page="fill"] .brand b { font: 900 21px/1 var(--s-display); }
[data-skin="studio"][data-page="fill"] .brand span { color: var(--s-laterite); font-size: 12px; letter-spacing: .06em; }
[data-skin="studio"][data-page="fill"] .brand img { display: none; }
[data-skin="studio"][data-page="fill"] .pick { background: var(--s-panel-2); border-color: var(--s-line); }
[data-skin="studio"][data-page="fill"] .pick span { color: var(--s-faint); opacity: 1; font: 600 10px/1.2 var(--s-mono); letter-spacing: .12em; text-transform: uppercase; }
[data-skin="studio"][data-page="fill"] .pick select { color: var(--s-ink); }
[data-skin="studio"][data-page="fill"] .depts span { background: color-mix(in srgb, var(--s-laterite) 10%, transparent); color: var(--s-laterite); }
[data-skin="studio"][data-page="fill"] .links a, [data-skin="studio"][data-page="fill"] .links button { color: var(--s-muted); opacity: 1; }
[data-skin="studio"][data-page="fill"] .links a:hover, [data-skin="studio"][data-page="fill"] .links button:hover { background: var(--s-panel-2); color: var(--s-ink); }
[data-skin="studio"][data-page="fill"] .links [aria-current="page"] { background: var(--s-panel-2); color: var(--s-ink); box-shadow: inset 2px 0 0 var(--s-laterite); }
[data-skin="studio"][data-page="fill"] .links b.badge { background: var(--s-err); color: #fff; }
[data-skin="studio"][data-page="fill"] .seg { border-color: var(--s-line); }
[data-skin="studio"][data-page="fill"] .seg button { color: var(--s-muted); font: 600 11px/1 var(--s-mono); letter-spacing: .06em; padding: 6px 10px; }
[data-skin="studio"][data-page="fill"] .seg button[aria-pressed="true"] { background: var(--s-ink); color: var(--s-panel); }
[data-skin="studio"][data-page="fill"] .me { color: var(--s-muted); }
[data-skin="studio"][data-page="fill"] .skin-sw { background: none; border: 0; color: var(--s-laterite); cursor: pointer; padding: 0; text-align: left; font-size: 12px; }
[data-skin="studio"][data-page="fill"] .sheets { background: var(--s-panel-2); border-right-color: var(--s-line); }
[data-skin="studio"][data-page="fill"] .sheets h5, [data-skin="studio"][data-page="fill"] .tpl h5 { color: var(--s-faint); font: 600 10px/1.2 var(--s-mono); letter-spacing: .14em; text-transform: uppercase; }
[data-skin="studio"][data-page="fill"] .sh { background: transparent; border-color: transparent; border-radius: 8px; }
[data-skin="studio"][data-page="fill"] .sh:hover { background: var(--s-panel); box-shadow: none; border-color: transparent; }
[data-skin="studio"][data-page="fill"] .sh[aria-current="true"] { background: var(--s-panel); border-color: var(--s-line); box-shadow: inset 2px 0 0 var(--s-laterite); }
[data-skin="studio"][data-page="fill"] .sh b { font-size: 13.5px; font-weight: 600; }
[data-skin="studio"][data-page="fill"] .sh small { color: var(--s-faint); }
[data-skin="studio"][data-page="fill"] .st { font: 600 10.5px/1.6 var(--s-mono); }
[data-skin="studio"][data-page="fill"] .st.todo { background: color-mix(in srgb, var(--s-sulfur) 14%, transparent); color: var(--s-sulfur); }
[data-skin="studio"][data-page="fill"] .st.part { background: color-mix(in srgb, var(--s-na) 12%, transparent); color: var(--s-na); }
[data-skin="studio"][data-page="fill"] .st.done { background: color-mix(in srgb, var(--s-nickel) 13%, transparent); color: var(--s-nickel); }
[data-skin="studio"][data-page="fill"] .st.info { background: var(--s-panel); color: var(--s-muted); }
[data-skin="studio"][data-page="fill"] .tpl { background: var(--s-panel); border: 1px dashed var(--s-line-2); }
[data-skin="studio"][data-page="fill"] .main { background: var(--s-bg); }
[data-skin="studio"][data-page="fill"] .head h1 { font: 900 24px/1.15 var(--s-display); letter-spacing: -.01em; }
[data-skin="studio"][data-page="fill"] .head p { font-size: 12.5px; }
[data-skin="studio"][data-page="fill"] .view-seg { border-color: var(--s-line); background: var(--s-panel); }
[data-skin="studio"][data-page="fill"] .view-seg button { color: var(--s-muted); font-size: 12.5px; }
[data-skin="studio"][data-page="fill"] .view-seg button[aria-pressed="true"] { background: var(--s-ink); color: var(--s-panel); }
[data-skin="studio"][data-page="fill"] details.notes, [data-skin="studio"][data-page="fill"] .recorded { background: var(--s-panel); border-color: var(--s-line); }
[data-skin="studio"][data-page="fill"] details.notes summary { color: var(--s-laterite); font-weight: 600; }
[data-skin="studio"][data-page="fill"] .saved { background: color-mix(in srgb, var(--s-nickel) 8%, var(--s-panel)); border-color: color-mix(in srgb, var(--s-nickel) 35%, transparent); color: var(--s-ink); }
[data-skin="studio"][data-page="fill"] .saved .x { color: var(--s-muted); }
[data-skin="studio"][data-page="fill"] .card { background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 12px; box-shadow: none; }
[data-skin="studio"][data-page="fill"] .card.ro { background: var(--s-panel-2); border: 1px dashed var(--s-line-2); }
[data-skin="studio"][data-page="fill"] .card.ok { border-left: 1px solid var(--s-line); box-shadow: inset 3px 0 0 var(--s-nickel); }
[data-skin="studio"][data-page="fill"] .card.na { box-shadow: inset 3px 0 0 var(--s-na); }
[data-skin="studio"][data-page="fill"] .card.edited { border-color: var(--s-laterite); }
[data-skin="studio"][data-page="fill"] .card.bad { border-color: var(--s-err); box-shadow: inset 3px 0 0 var(--s-err); }
[data-skin="studio"][data-page="fill"] .card-h .n { background: var(--s-panel-2); color: var(--s-muted); font: 600 11px/1 var(--s-mono); }
[data-skin="studio"][data-page="fill"] .card-h .t { font-weight: 600; font-size: 14.5px; }
[data-skin="studio"][data-page="fill"] .card .kepttag { background: color-mix(in srgb, var(--s-nickel) 12%, transparent); color: var(--s-nickel); font: 600 10.5px/1.6 var(--s-mono); }
[data-skin="studio"][data-page="fill"] .card-h .ico { background: var(--s-panel); border-color: var(--s-line); }
[data-skin="studio"][data-page="fill"] .card-h .ico:hover { border-color: var(--s-ink); color: var(--s-ink); }
[data-skin="studio"][data-page="fill"] .f label { color: var(--s-laterite); font-size: 11.5px; }
[data-skin="studio"][data-page="fill"] .f label i { color: var(--s-err); }
[data-skin="studio"][data-page="fill"] .f input, [data-skin="studio"][data-page="fill"] .f select { border-color: var(--s-line-2); border-radius: 7px; }
[data-skin="studio"][data-page="fill"] .f input:focus, [data-skin="studio"][data-page="fill"] .f select:focus { border-color: var(--s-ink); box-shadow: 0 0 0 3px rgba(169, 124, 12, .18); }
[data-skin="studio"][data-page="fill"] .f .prev { font-family: var(--s-mono); color: var(--s-nickel); }
[data-skin="studio"][data-page="fill"] .f.miss input, [data-skin="studio"][data-page="fill"] .f.miss select { border-color: var(--s-sulfur); }
[data-skin="studio"][data-page="fill"] dl.auto { background: var(--s-panel-2); }
[data-skin="studio"][data-page="fill"] dl.auto dt { font: 600 10px/1.3 var(--s-mono); letter-spacing: .08em; color: var(--s-nickel); }
[data-skin="studio"][data-page="fill"] .add { background: transparent; border: 1px dashed var(--s-line-2); color: var(--s-muted); font-weight: 600; }
[data-skin="studio"][data-page="fill"] .add:hover { background: var(--s-panel); color: var(--s-ink); border-color: var(--s-ink); }
[data-skin="studio"][data-page="fill"] .gridwrap { background: var(--s-panel); border-color: var(--s-line); }
[data-skin="studio"][data-page="fill"] .g th { background: var(--s-panel-2); color: var(--s-laterite); font: 600 11px/1.3 var(--s-body); border-bottom-color: var(--s-line); }
[data-skin="studio"][data-page="fill"] .g td { border-bottom-color: var(--s-line); border-right: 1px solid var(--s-line); }
[data-skin="studio"][data-page="fill"] .g input:focus, [data-skin="studio"][data-page="fill"] .g select:focus { border-color: transparent; outline: 2px solid var(--s-laterite); outline-offset: -2px; }
[data-skin="studio"][data-page="fill"] .g tr.bad td { background: color-mix(in srgb, var(--s-err) 7%, var(--s-panel)); }
[data-skin="studio"][data-page="fill"] .bar { background: var(--s-panel); border-top-color: var(--s-line); }
[data-skin="studio"][data-page="fill"] .bar .cnt { font-size: 12.5px; }
[data-skin="studio"][data-page="fill"] .bar .cnt b { font-family: var(--s-mono); font-weight: 600; }
[data-skin="studio"][data-page="fill"] .btn { background: var(--s-ink); color: var(--s-panel); border: 1px solid var(--s-ink); border-radius: 8px; box-shadow: none; filter: none; }
[data-skin="studio"][data-page="fill"] .btn:hover { background: var(--primary-hover); box-shadow: none; }
[data-skin="studio"][data-page="fill"] .btn.sec { background: var(--s-panel); color: var(--s-ink); border-color: var(--s-line-2); }
[data-skin="studio"][data-page="fill"] .btn.sec:hover { border-color: var(--s-ink); background: var(--s-panel-2); }
[data-skin="studio"][data-page="fill"] .btn.sub { background: var(--s-panel); color: var(--s-laterite); border-color: var(--s-laterite); }
[data-skin="studio"][data-page="fill"] .btn.sub b { background: var(--s-err); }
[data-skin="studio"][data-page="fill"] .layer { background: rgba(21, 26, 27, .32); }
[data-skin="studio"][data-page="fill"] .dlg { border: 1px solid var(--s-line); border-radius: 14px; box-shadow: 0 20px 50px rgba(21, 26, 27, .18); }
[data-skin="studio"][data-page="fill"] .dlg-h { font: 900 17px/1.3 var(--s-display); border-bottom-color: var(--s-line); }
[data-skin="studio"][data-page="fill"] .dlg th { font: 600 11px/1.3 var(--s-mono); color: var(--s-muted); }
[data-skin="studio"][data-page="fill"] .toast { background: var(--s-ink); }
[data-skin="studio"][data-page="fill"] .toast.bad { background: var(--s-err); }
[data-skin="studio"][data-page="fill"] .spin { border-color: var(--s-line); border-top-color: var(--s-laterite); }
[data-skin="studio"][data-page="fill"] .empty { background: var(--s-panel); border-color: var(--s-line); }