/* ESG-Hub 4.0 — layout & component layer, loaded last on every page.
   Colours stay the 总控台 palette (tokens.css, generated from esgx/ui/theme.py: laterite = action / input accent,
   nickel = good / computed, sulfur = attention, err / na); from EHS-hub only the structure is borrowed: a large display
   title (Fraunces → YaHei) under a mono eyebrow, one primary action per view, rounded cards (14 / 22 px) with a soft
   shadow, segmented language control, stat strips with display figures, info strips for hints, a brand set as
   “ESG-Hub” with an italic “Hub”. Selected navigation items keep the thin laterite bar. */

:root { --hub-r: var(--r-l, 14px); --hub-r-lg: var(--r-xl, 22px); --hub-ease: var(--ease-out, cubic-bezier(.16, 1, .3, 1)); }
body { font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- shared pieces */
.eyebrow { font: 600 11px/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .6; flex: none; }
.brand em, .wb-home em { font-style: italic; font-weight: 400; color: var(--accent); }
.theme-t { width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0; border-radius: 10px; flex: none;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .2s, transform .2s; }
.theme-t:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--border);
  border-radius: var(--hub-r-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; margin: 0 0 20px; }
.stat-row > div { padding: 18px 22px; border-right: 1px solid var(--border); min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.stat-row > div:last-child { border-right: 0; }
.stat-row > div > span:first-child { font-size: 12px; color: var(--muted); }
.stat-row b { font: 400 32px/1.05 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.stat-row .tag { align-self: flex-start; }
[data-theme="dark"] .brand img, [data-theme="dark"] .wb-home img { box-shadow: 0 0 0 1px var(--border-strong); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand img, :root:not([data-theme="light"]) .wb-home img { box-shadow: 0 0 0 1px var(--border-strong); } }

/* ================================================================ portal (index.html) */
html[data-skin][data-page="portal"] .shell { grid-template-columns: 252px minmax(0, 1fr); }
html[data-skin][data-page="portal"] .nav { padding: 22px 14px 16px; gap: 2px; }
html[data-skin][data-page="portal"] .nav .brand,
html[data-skin][data-page="portal"] .auth-card .brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px;
  font: 600 19px/1 var(--font-display); letter-spacing: -.02em; color: var(--text); background: none; -webkit-text-fill-color: currentColor; }
html[data-skin][data-page="portal"] .auth-card .brand { padding: 0 0 6px; font-size: 22px; }
html[data-skin][data-page="portal"] .brand img { width: 36px; height: 36px; border-radius: 11px; flex: none; }
html[data-skin][data-page="portal"] .nav .grp { font: 600 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--subtle); margin: 0; padding: 18px 12px 6px; }
html[data-skin][data-page="portal"] .nav a { display: flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 10px;
  color: var(--muted); transition: background .2s, color .2s; }
html[data-skin][data-page="portal"] .nav a:hover { background: var(--surface-alt); color: var(--text); }
html[data-skin][data-page="portal"] .nav a.on { background: var(--surface-alt); color: var(--text); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
html[data-skin][data-page="portal"] .nav a.fill { background: var(--surface); color: var(--accent); border: 1px solid var(--accent); font-weight: 700; margin: 2px 0; }
html[data-skin][data-page="portal"] .nav .me { border-top: 1px solid var(--border); padding: 14px 8px 0; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
html[data-skin][data-page="portal"] .nav .me a { padding: 0; min-height: 0; color: var(--muted); }
.me-tools, .links-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 中 / EN / ID as a segmented control */
html[data-skin][data-page="portal"] .lang-pick { display: inline-flex; padding: 3px; gap: 0; border-radius: 11px; background: var(--surface-alt); border: 1px solid var(--border); }
html[data-skin][data-page="portal"] .lang-pick button { height: 26px; padding: 0 9px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; }
html[data-skin][data-page="portal"] .lang-pick button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); text-decoration: none; }
html[data-skin][data-page="portal"] .nav .me .lang-pick button { color: var(--muted); }
html[data-skin][data-page="portal"] .nav .me .lang-pick button.on { color: var(--text); }

html[data-skin][data-page="portal"] .main { padding: 34px 40px 64px; max-width: 1480px; }
html[data-skin][data-page="portal"] .main h1 { font: 400 clamp(30px, 3vw, 46px)/1.06 var(--font-display); letter-spacing: -.025em; margin: 0 0 10px; }
html[data-skin][data-page="portal"] .main .lead { font-size: 14.5px; color: var(--muted); max-width: 72ch; margin: 0 0 26px; }
html[data-skin][data-page="portal"] .card { border-radius: var(--hub-r-lg); box-shadow: var(--shadow); padding: 22px; border-color: var(--border); }
html[data-skin][data-page="portal"] .cards { gap: 16px; margin-bottom: 18px; }
html[data-skin][data-page="portal"] .cards .card:hover { box-shadow: var(--shadow-lg); border-color: var(--border-strong); transform: translateY(-2px); }
html[data-skin][data-page="portal"] .cards .card { transition: transform .35s var(--hub-ease), box-shadow .35s var(--hub-ease), border-color .35s; }
html[data-skin][data-page="portal"] .card h2 { font: 600 13.5px/1.3 var(--font-ui); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html[data-skin][data-page="portal"] .card .num { font: 400 26px/1.15 var(--font-display); letter-spacing: -.02em; }
html[data-skin][data-page="portal"] .hero { padding: 26px 30px; gap: 24px; }
html[data-skin][data-page="portal"] .hero h2 { font: 400 26px/1.15 var(--font-display); letter-spacing: -.02em; margin-bottom: 6px; }
html[data-skin][data-page="portal"] .hero p { font-size: 13.5px; }
html[data-skin][data-page="portal"] .fill-hero { border: 1px solid var(--border); box-shadow: inset 4px 0 0 var(--accent), var(--shadow); }
html[data-skin][data-page="portal"] .btn { border-radius: 12px; min-height: 40px; padding: 0 18px; font-weight: 600; }
html[data-skin][data-page="portal"] .btn.small { min-height: 30px; padding: 0 11px; border-radius: 10px; font-size: 12.5px; font-weight: 500; }
html[data-skin][data-page="portal"] .btn.big { min-height: 46px; padding: 0 22px; font-size: 15px; }
html[data-skin][data-page="portal"] .btn.block { min-height: 44px; }
html[data-skin][data-page="portal"] .tbl-wrap { border-radius: var(--hub-r); box-shadow: var(--shadow); }
html[data-skin][data-page="portal"] th { font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .03em; padding: 11px 12px; }
html[data-skin][data-page="portal"] td { padding: 10px 12px; }
/* hints: a quiet info strip */
html[data-skin][data-page="portal"] .note { background: color-mix(in srgb, var(--info) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--info) 22%, transparent);
  color: var(--text); border-radius: var(--hub-r); padding: 12px 16px; }
html[data-skin][data-page="portal"] .modal-box { border-radius: var(--hub-r-lg); padding: 24px 26px; box-shadow: var(--shadow-lg); }
html[data-skin][data-page="portal"] .modal-box h2 { font: 400 22px/1.2 var(--font-display); letter-spacing: -.02em; }
html[data-skin][data-page="portal"] .toast { border-radius: 14px; box-shadow: var(--shadow-lg); }

/* sign-in */
html[data-skin][data-page="portal"] .auth { background: var(--bg); }
html[data-skin][data-page="portal"] .auth-card { max-width: 430px; padding: 34px 32px 28px; border-radius: var(--hub-r-lg); box-shadow: var(--shadow-lg); }
html[data-skin][data-page="portal"] .auth-card::before { display: none; }
html[data-skin][data-page="portal"] .auth-card h1 { font: 400 32px/1.1 var(--font-display); letter-spacing: -.025em; margin: 22px 0 6px; }
html[data-skin][data-page="portal"] .auth-card p.sub { font-size: 13.5px; }
html[data-skin][data-page="portal"] .field label { font-size: 12px; color: var(--muted); }
html[data-skin][data-page="portal"] .field input { min-height: 42px; border-radius: 12px; }
html[data-skin][data-page="portal"] .auth-card .links { align-items: center; }

@media (max-width: 860px) {
  /* phones: the rail becomes one top strip that scrolls sideways (brand, pages, language, theme, sign-out) */
  html[data-skin][data-page="portal"] .shell { grid-template-columns: minmax(0, 1fr); }
  html[data-skin][data-page="portal"] .nav { position: sticky; top: 0; z-index: 5; height: auto; flex-direction: row; flex-wrap: nowrap; align-items: center;
    overflow-x: auto; overflow-y: hidden; gap: 4px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--border); scrollbar-width: none; }
  html[data-skin][data-page="portal"] .nav::-webkit-scrollbar { display: none; }
  html[data-skin][data-page="portal"] .nav > * { flex: none; }
  html[data-skin][data-page="portal"] .nav .brand { padding: 0 10px 0 0; font-size: 17px; gap: 8px; }
  html[data-skin][data-page="portal"] .nav .brand img { width: 28px; height: 28px; border-radius: 8px; }
  html[data-skin][data-page="portal"] .nav a { min-height: 34px; padding: 0 11px; white-space: nowrap; }
  html[data-skin][data-page="portal"] .nav a.on { box-shadow: inset 0 -2px 0 var(--accent); }
  html[data-skin][data-page="portal"] .nav .grp, html[data-skin][data-page="portal"] .nav .spacer { display: none; }
  html[data-skin][data-page="portal"] .nav .me { flex-direction: row; align-items: center; border-top: 0; border-left: 1px solid var(--border);
    padding: 0 0 0 10px; margin: 0 0 0 6px; width: auto; background: none; white-space: nowrap; }
  html[data-skin][data-page="portal"] .nav .me > div:first-child { display: none; }
  html[data-skin][data-page="portal"] .main { padding: 22px 16px 40px; }
  html[data-skin][data-page="portal"] .main h1 { font-size: 30px; }
  html[data-skin][data-page="portal"] .main .lead { font-size: 13.5px; margin-bottom: 18px; }
  html[data-skin][data-page="portal"] .hero { flex-direction: column; align-items: stretch; padding: 20px; gap: 14px; }
  html[data-skin][data-page="portal"] .hero > div:last-child { display: flex; flex-direction: column; gap: 8px; }
  html[data-skin][data-page="portal"] .hero .btn { width: 100%; }
  html[data-skin][data-page="portal"] .hero h2 { font-size: 22px; }
  html[data-skin][data-page="portal"] .cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html[data-skin][data-page="portal"] .card { padding: 18px; border-radius: var(--hub-r); }
  html[data-skin][data-page="portal"] .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--hub-r); }
  html[data-skin][data-page="portal"] .stat-row > div { padding: 14px 16px; border-bottom: 1px solid var(--border); }
  html[data-skin][data-page="portal"] .stat-row > div:nth-child(2n) { border-right: 0; }
  html[data-skin][data-page="portal"] .stat-row b { font-size: 26px; }
  html[data-skin][data-page="portal"] .auth-card { padding: 28px 22px 22px; }
  html[data-skin][data-page="portal"] .auth-card h1 { font-size: 28px; }
}

/* ================================================================ browser ESG-Hub (/app, workbench.html) */
html[data-skin][data-page="app"] #wb-bar { height: 44px; gap: 8px; padding: 0 14px; }
html[data-skin][data-page="app"] #wb-root { top: 44px; }
html[data-skin][data-page="app"] .wb-home { font: 600 17px/1 var(--font-display); letter-spacing: -.02em; gap: 8px; }
html[data-skin][data-page="app"] .wb-home img { width: 26px; height: 26px; border-radius: 8px; }
html[data-skin][data-page="app"] .wb-btn { border-radius: 10px; padding: 5px 11px; font-size: 12.5px; }
html[data-skin][data-page="app"] .wb-icon { width: 32px; height: 30px; padding: 0; display: inline-grid; place-items: center; }
/* the ESG-Hub top bar (Qt widgets, objectNames from esgx/ui/main_window.py) */
html[data-skin][data-page="app"] .TopBar { padding: 8px 18px; gap: 10px; }
html[data-skin][data-page="app"] .q-label.Brand { font: 600 18px/1 var(--font-display); letter-spacing: -.02em; color: var(--text); }
html[data-skin][data-page="app"] .q-label.Brand i, html[data-skin][data-page="app"] .q-label.Brand em { font-style: italic; font-weight: 400; color: var(--accent); }
html[data-skin][data-page="app"] .BrandMark { width: 30px; height: 30px; border-radius: 9px; }
html[data-skin][data-page="app"] .q-select.EntSwitch { border-radius: 999px; font-weight: 600; padding: 6px 12px 6px 26px; min-width: 12rem;
  background: radial-gradient(circle at 13px 50%, var(--accent) 0 3.5px, transparent 4px) no-repeat, var(--surface); }
html[data-skin][data-page="app"] .q-label.Crumbs { color: var(--muted); font-size: 13px; }
html[data-skin][data-page="app"] .q-label.Crumbs b { color: var(--text); font-weight: 600; }
html[data-skin][data-page="app"] .q-input.SearchBox { border-radius: 11px; min-width: 15rem; padding: 7px 12px; }
html[data-skin][data-page="app"] .Seg { display: inline-flex; flex-wrap: nowrap; padding: 3px; gap: 0; border-radius: 11px; background: var(--surface-alt); border: 1px solid var(--border); }
html[data-skin][data-page="app"] .Seg .q-btn.SegBtn, html[data-skin][data-page="app"] .q-btn.SegBtn { border: 0; background: none; box-shadow: none; padding: 4px 10px; border-radius: 8px;
  font: 600 12px/1.2 var(--font-mono); color: var(--muted); }
html[data-skin][data-page="app"] .q-btn.SegBtn.checked { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
html[data-skin][data-page="app"] .q-btn.IconBtn { width: 36px; height: 34px; padding: 0; border-radius: 11px; display: inline-grid; place-items: center; }
/* the rail: navigation, the KPI badge (real data from the desktop), the collapse control */
html[data-skin][data-page="app"] .Rail { --navw: clamp(236px, 17vw, 300px); width: var(--navw); flex: 0 0 var(--navw) !important; display: flex; flex-direction: column;
  min-height: 0; overflow: hidden; background: var(--surface); border-right: 1px solid var(--border); transition: flex-basis .25s, width .25s; }
html[data-skin][data-page="app"] .Rail > .q-tree.Nav { width: auto; flex: 1 1 auto !important; border-right: 0; position: static; padding: 10px 8px; }
html[data-skin][data-page="app"] .Rail > :not(.q-tree) { flex: none; }
html[data-skin][data-page="app"] .q-tree.Nav .it.head { font: 600 10.5px/1.4 var(--font-mono); letter-spacing: .12em; }
html[data-skin][data-page="app"] .q-tree.Nav .it { border-radius: 9px; }
html[data-skin][data-page="app"] .RailKpi { margin: 6px 10px; padding: 10px 12px; border-radius: 12px; gap: 10px; align-items: center;
  background: color-mix(in srgb, var(--good) 10%, var(--surface)); border: 0; box-shadow: none; }
html[data-skin][data-page="app"] .q-label.RailKpiValue { font: 400 24px/1 var(--font-display); letter-spacing: -.02em; color: var(--good); }
html[data-skin][data-page="app"] .q-label.RailKpiText { font-size: 11.5px; line-height: 1.3; color: var(--text); }
html[data-skin][data-page="app"] .RailKpi .q-btn.Link { border: 0; background: none; color: var(--link); padding: 0; font-weight: 600; }
html[data-skin][data-page="app"] .q-btn.CollapseBtn { border: 0; background: none; color: var(--muted); text-align: left; margin: 4px 10px 10px; padding: 6px 8px; border-radius: 8px; font-size: 12px; }
html[data-skin][data-page="app"] .q-btn.CollapseBtn:hover { background: var(--surface-alt); color: var(--text); }
body.nav-off .Rail { --navw: 0px !important; border-right: 0; }
/* page head: mono eyebrow + display title + one sentence */
html[data-skin][data-page="app"] .q-label.Eyebrow { font: 600 11px/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 10px; }
/* the desktop label already starts with its rule (“──  GROUP”): no second rule here */
html[data-skin][data-page="app"] .q-label.PageTitle { font: 400 clamp(1.75rem, 2.3vw, 2.6rem)/1.08 var(--font-display); letter-spacing: -.025em; margin: 2px 0 2px; }
html[data-skin][data-page="app"] .q-label.PageSubtitle { font-size: .92rem; color: var(--muted); max-width: 90ch; }
html[data-skin][data-page="app"] .q-label.HeroTitle { font: 400 2.1rem/1.1 var(--font-display); letter-spacing: -.02em; }
/* cards */
html[data-skin][data-page="app"] .q-card { border-radius: var(--hub-r); box-shadow: var(--shadow); }
html[data-skin][data-page="app"] .q-card.frame { box-shadow: none; }
html[data-skin][data-page="app"] .q-card.Kpi:hover { box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
html[data-skin][data-page="app"] .Hero { border-radius: var(--hub-r-lg); box-shadow: var(--shadow); }
html[data-skin][data-page="app"] .XCard, html[data-skin][data-page="app"] .q-card.XCard { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--hub-r-lg); box-shadow: var(--shadow); padding: 18px 20px; }
html[data-skin][data-page="app"] .q-tablewrap { border-radius: var(--hub-r); box-shadow: var(--shadow); }
html[data-skin][data-page="app"] .q-tabs > .q-tabbody > .q-box, html[data-skin][data-page="app"] .q-tabs > .q-tabbody > .q-scroll { min-width: 0; }
/* summary strip of list pages: display figures in cells divided by thin rules */
html[data-skin][data-page="app"] .StatStrip { display: flex; flex-wrap: wrap; gap: 0; padding: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--hub-r-lg); box-shadow: var(--shadow); overflow: hidden; }
html[data-skin][data-page="app"] .StatStrip > * { flex: 1 1 10rem; min-width: 0; }
html[data-skin][data-page="app"] .StatCell, html[data-skin][data-page="app"] .q-card.StatCell { padding: 14px 18px; border: 0; border-right: 1px solid var(--border);
  border-radius: 0; box-shadow: none; background: transparent; gap: 4px; }
html[data-skin][data-page="app"] .StatStrip > :last-child { border-right: 0; }
html[data-skin][data-page="app"] .q-label.StatValue { font: 400 1.85rem/1.05 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
html[data-skin][data-page="app"] .q-label.StatLabel { font-size: .8rem; color: var(--muted); }
html[data-skin][data-page="app"] .q-status { font-size: .74rem; }

@media (max-width: 760px) {
  html[data-skin][data-page="app"] #wb-bar { height: 44px; }
  html[data-skin][data-page="app"] .wb-home span { display: none; }
  /* the ESG-Hub top bar: one row that scrolls sideways; the brand is already in the strip above */
  html[data-skin][data-page="app"] .TopBar { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 8px 10px; gap: 8px; }
  html[data-skin][data-page="app"] .TopBar::-webkit-scrollbar { display: none; }
  html[data-skin][data-page="app"] .TopBar > * { flex: none !important; }
  html[data-skin][data-page="app"] .TopBar .q-label.Logo, html[data-skin][data-page="app"] .TopBar .q-label.LogoMark,
  html[data-skin][data-page="app"] .TopBar .Brand, html[data-skin][data-page="app"] .TopBar .BrandMark,
  html[data-skin][data-page="app"] .TopBar .q-label.Muted, html[data-skin][data-page="app"] .TopBar > .q-stretch,
  html[data-skin][data-page="app"] .TopBar .Crumbs { display: none !important; }
  html[data-skin][data-page="app"] .TopBar .q-select { min-width: 0; max-width: 62vw; }
  html[data-skin][data-page="app"] .TopBar .q-input { min-width: 9rem; }
  html[data-skin][data-page="app"] .Rail { position: absolute; z-index: 15; top: 0; bottom: 0; left: 0; --navw: 80vw; box-shadow: var(--shadow-lg); }
  html[data-skin][data-page="app"] body:not(.nav-on-mobile) .Rail { --navw: 0px; box-shadow: none; border-right: 0; }
  body:not(.nav-on-mobile) .Rail { --navw: 0px !important; box-shadow: none; border-right: 0; }
  html[data-skin][data-page="app"] .q-split.h { position: relative; }
  html[data-skin][data-page="app"] .q-page { padding: 16px 12px 24px; gap: 10px; }
  html[data-skin][data-page="app"] .q-label.PageTitle { font-size: 1.8rem; }
  html[data-skin][data-page="app"] .q-label.PageSubtitle { font-size: .86rem; }
  html[data-skin][data-page="app"] .q-label.HeroTitle { font-size: 1.6rem; }
  html[data-skin][data-page="app"] .Hero { padding: 16px; }
  html[data-skin][data-page="app"] .q-grid.responsive:has(> .q-card.Kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  html[data-skin][data-page="app"] .q-card.Kpi { padding: 10px 12px; }
  html[data-skin][data-page="app"] .q-label.KpiValue { font-size: 1.2rem; }
  html[data-skin][data-page="app"] .q-label.KpiTitle { font-size: .78rem; }
  html[data-skin][data-page="app"] .q-label.KpiSub { font-size: .72rem; }
  html[data-skin][data-page="app"] .StatStrip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-skin][data-page="app"] .StatCell, html[data-skin][data-page="app"] .q-card.StatCell { border-bottom: 1px solid var(--border); padding: 12px 14px; }
  html[data-skin][data-page="app"] .StatStrip > :nth-child(2n) { border-right: 0; }
  html[data-skin][data-page="app"] .q-label.StatValue { font-size: 1.45rem; }
  html[data-skin][data-page="app"] .q-tabbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  html[data-skin][data-page="app"] .q-tabbar button { flex: none; white-space: nowrap; }
  html[data-skin][data-page="app"] .q-status { display: none; }
  html[data-skin][data-page="app"] .q-box.h { gap: 6px; }
  html[data-skin][data-page="app"] .wb-dlg { border-radius: var(--hub-r); }
}

/* ================================================================ 数据填报 (fill.html) */
html[data-skin][data-page="fill"] .brand { gap: 10px; align-items: center; }
html[data-skin][data-page="fill"] .brand img { display: block; width: 32px; height: 32px; border-radius: 10px; flex: none; }
html[data-skin][data-page="fill"] .brand b { font: 600 19px/1 var(--font-display); letter-spacing: -.02em; }
html[data-skin][data-page="fill"] .head h1 { font: 400 clamp(28px, 2.6vw, 40px)/1.08 var(--font-display); letter-spacing: -.025em; margin: 0 0 6px; }
html[data-skin][data-page="fill"] .head p { font-size: 13px; }
html[data-skin][data-page="fill"] .card { border-radius: var(--hub-r); box-shadow: var(--shadow); }
html[data-skin][data-page="fill"] .card.ro { box-shadow: none; }
html[data-skin][data-page="fill"] .card.ok { box-shadow: inset 3px 0 0 var(--good), var(--shadow); }
html[data-skin][data-page="fill"] .card.na { box-shadow: inset 3px 0 0 var(--info), var(--shadow); }
html[data-skin][data-page="fill"] .card.bad { box-shadow: inset 3px 0 0 var(--bad), var(--shadow); }
html[data-skin][data-page="fill"] .gridwrap, html[data-skin][data-page="fill"] .recorded, html[data-skin][data-page="fill"] details.notes { border-radius: var(--hub-r); }
html[data-skin][data-page="fill"] .gridwrap { box-shadow: var(--shadow); }
html[data-skin][data-page="fill"] .btn { border-radius: 11px; }
html[data-skin][data-page="fill"] .dlg { border-radius: var(--hub-r-lg); box-shadow: var(--shadow-lg); }
html[data-skin][data-page="fill"] .dlg-h { font: 400 20px/1.25 var(--font-display); }
html[data-skin][data-page="fill"] .seg { border-radius: 11px; padding: 3px; background: var(--surface-alt); gap: 0; }
html[data-skin][data-page="fill"] .seg button { border-radius: 8px; }
html[data-skin][data-page="fill"] .seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
html[data-skin][data-page="fill"] .rail .theme-t { align-self: flex-start; }
html[data-skin][data-page="fill"] .empty { border-radius: var(--hub-r); }

/* ================================================================ 总控台 (studio.html) */
html .side .brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px 14px; }
html .side .brand img { width: 32px; height: 32px; border-radius: 10px; flex: none; }
html .side .brand b { font: 600 19px/1 var(--font-display); letter-spacing: -.02em; }
html .side .brand span { font: 600 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
html .side nav h6 { font-family: var(--font-mono); }
html .top .chip.icon { width: 32px; padding: 0; justify-content: center; }
html .top .seg { padding: 3px; border-radius: 11px; background: var(--surface-alt); height: 32px; gap: 0; }
html .top .seg button { border-radius: 8px; background: none; }
html .top .seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
html .pad .ph { display: block; }
html .pad .ph h1, html .ed .ph h1 { font: 400 clamp(28px, 2.6vw, 40px)/1.08 var(--font-display); letter-spacing: -.025em; margin: 0 0 6px; }
html .pad .ph p { font-size: 13px; }
html .pad .box, html .pad .card { border-radius: var(--hub-r); box-shadow: var(--shadow); }
html .pad .kpi { border-radius: var(--hub-r); box-shadow: var(--shadow); }
html .pad .kpi b { font: 400 30px/1.05 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
html .pad .card .big { font: 400 28px/1.05 var(--font-display); letter-spacing: -.02em; }
@media (max-width: 760px) {
  html .pad .ph h1 { font-size: 26px; }
  html .pad .kpi b { font-size: 24px; }
}

/* the Qt label font is bold for titles: the display face carries the weight instead */
html[data-skin][data-page="app"] .q-label.PageTitle, html[data-skin][data-page="app"] .q-label.HeroTitle,
html[data-skin][data-page="app"] .q-label.StatValue, html[data-skin][data-page="app"] .q-label.RailKpiValue { font-weight: 400 !important; }
/* one primary action per view: further hero buttons are secondary */
html[data-skin][data-page="app"] .Hero .q-btn.HeroBtn ~ .q-btn.HeroBtn { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
html[data-skin][data-page="app"] .Hero .q-btn.HeroBtn ~ .q-btn.HeroBtn:hover { background: var(--surface-alt); border-color: var(--text); }
/* in the browser the strip above already carries the brand: the desktop top bar starts with the enterprise switch */
html[data-skin][data-page="app"] .TopBar .q-label.Logo, html[data-skin][data-page="app"] .TopBar .q-label.LogoMark,
html[data-skin][data-page="app"] .TopBar .Brand, html[data-skin][data-page="app"] .TopBar .BrandMark { display: none !important; }