:root {
  color-scheme:dark; --canvas:#081525; --shell:#091728; --surface:#102238; --inset:#0b1b2e; --border:#263d56;
  --text:#f4f7fc; --muted:#b0c3d8; --subtle:#97aec6; --blue:#79baff; --cyan:#49c8ff; --green:#77d8b1;
  --amber:#f1c27a; --red:#ffa7b2; --side:222px; --radius:14px; --gutter:clamp(19px,2.7vw,40px);
  --display:'Segoe UI Variable Display','Segoe UI',system-ui,sans-serif; --mono:ui-monospace,'Cascadia Code',Consolas,monospace;
  font-family:'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif; background:var(--canvas); color:var(--text); font-synthesis:none;
}
* { box-sizing:border-box; }
body { margin:0; }
button,input,select,textarea { font:inherit; }
button,summary { cursor:pointer; }
button:disabled { opacity:.5; cursor:default; }
a { color:inherit; text-decoration:none; }
a,button,input,select,textarea { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid #8accff; outline-offset:3px; }
h1,h2,h3,p,dl,dd { margin:0; }
p { line-height:1.55; }
img { display:block; max-width:100%; }
[hidden] { display:none!important; }
.icon { flex:none; vertical-align:middle; }
.skip { position:fixed; top:-90px; left:12px; z-index:20; background:#2168a9; padding:12px; border-radius:7px; }
.skip:focus { top:12px; }
.sidebar {
  position:fixed; inset:0 auto 0 0; z-index:4; width:var(--side); background:var(--shell);
  border-right:1px solid var(--border); padding:0 14px 16px; display:flex; flex-direction:column;
}
.brand { display:flex; align-items:center; gap:10px; width:fit-content; min-width:0; min-height:76px; padding:2px 6px 0; }
.brand-mark { width:43px; height:43px; flex:none; display:grid; place-items:center; color:var(--blue); }
.brand-mark img { width:100%; height:100%; object-fit:contain; }
.brand strong { display:block; font:800 21px/1 var(--display); letter-spacing:.105em; overflow-wrap:anywhere; }
.brand small { display:block; margin-top:5px; font:700 9px/1.2 var(--mono); color:var(--blue); letter-spacing:.14em; overflow-wrap:anywhere; }
.side-main { flex:1; padding-top:26px; border-top:1px solid var(--border); overflow:auto; }
.side-label,.label { display:block; color:var(--subtle); font:700 10px/1.3 var(--mono); letter-spacing:.11em; }
.side-label { margin:0 10px 10px; }
.side-divider { margin-top:28px; }
.sidebar nav { display:grid; gap:5px; }
.nav-link {
  min-height:44px; padding:8px 10px; display:flex; align-items:center; gap:10px; color:var(--muted);
  font-size:13px; font-weight:650; border:1px solid transparent; border-radius:8px; transition:background .18s,color .18s,border-color .18s;
}
.nav-link span { flex:1; }
.nav-link > .icon { color:var(--subtle); }
.nav-link:hover { background:#12273d; color:var(--text); }
.nav-link.selected { background:#15334e; border-color:#2a4d6d; color:#e9f5ff; }
.nav-link.selected > .icon { color:var(--cyan); }
.side-foot { display:flex; align-items:center; gap:9px; border-top:1px solid var(--border); margin-top:12px; padding:13px 4px 2px; }
.system-icon { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--border); border-radius:9px; color:var(--blue); }
.side-foot strong,.side-foot small { display:block; }
.side-foot strong { font-size:12px; }
.side-foot small { color:var(--subtle); margin-top:3px; font-size:11px; }
.workspace { margin-left:var(--side); min-height:100vh; display:flex; flex-direction:column; }
.topbar {
  position:relative; z-index:3; min-height:65px; display:flex; justify-content:space-between; align-items:center;
  gap:14px; padding:8px var(--gutter); background:var(--shell); border-bottom:1px solid var(--border);
}
.crumbs,.top-actions,.header-time { display:flex; align-items:center; gap:10px; }
.crumbs { min-width:0; font-size:13px; color:var(--subtle); }
.crumbs strong { color:var(--text); overflow-wrap:anywhere; }
.top-actions { justify-content:flex-end; }
.header-time { gap:6px; color:var(--muted); font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.header-time .icon { color:var(--blue); }
.header-brand,.mobile-nav { display:none; }
.account-menu { position:relative; }
.account-menu summary {
  min-height:39px; min-width:42px; max-width:170px; list-style:none; display:flex; align-items:center; justify-content:center;
  gap:7px; padding:5px 8px; border:1px solid var(--border); background:var(--inset); color:var(--muted);
  border-radius:8px; font-size:12px; font-weight:650; transition:background .18s;
}
.account-menu summary > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-menu summary:hover,.account-menu[open] summary { background:#1b3a58; color:var(--text); }
summary::-webkit-details-marker { display:none; }
.account-popover {
  position:absolute; right:0; top:calc(100% + 8px); width:211px; padding:8px; background:var(--surface);
  border:1px solid #385873; border-radius:10px; box-shadow:0 14px 35px #03091480;
}
.account-popover > span { color:var(--subtle); font-size:11px; display:block; padding:5px 7px; }
.account-popover > a { display:flex; align-items:center; gap:8px; padding:10px 7px; border-radius:6px; font-size:13px; }
.account-popover > a:hover { background:#204362; }
.account-popover > a .icon:last-child { margin-left:auto; color:var(--blue); }
.main { flex:1; width:100%; max-width:1510px; margin:0 auto; padding:27px var(--gutter) 34px; min-width:0; }
.workspace.entering .main { animation:enter .14s ease-out both; }
@keyframes enter { from { opacity:.65; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
.footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; border-top:1px solid var(--border); padding:16px var(--gutter); color:var(--subtle); font-size:11px; }
.footer b { color:var(--muted); letter-spacing:.04em; }

.headline { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:20px; }
.eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:10px; font:700 11px/1.4 var(--mono); letter-spacing:.12em; color:var(--cyan); }
.eyebrow > span { width:16px; height:1px; background:currentColor; }
.eyebrow b { font-weight:600; color:#a0bbd5; }
h1 { font:750 clamp(30px,4.1vw,54px)/1.04 var(--display); letter-spacing:-.052em; overflow-wrap:anywhere; }
.subtitle { max-width:59ch; margin-top:10px; color:var(--muted); font-size:15px; }
.panorama,.showcase-hero,.login-visual { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(105deg,#10253c 8%,#153a5d 72%,#10263d); }
.panorama {
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); grid-template-rows:1fr auto; gap:0; align-items:center;
  min-height:274px; margin-bottom:14px; border:1px solid #36597d; border-radius:18px;
}
.hero-copy { padding:24px clamp(18px,3vw,40px); z-index:1; min-width:0; }
.panorama h1 { font-size:clamp(42px,5.25vw,77px); letter-spacing:-.065em; }
.panorama .subtitle { color:#ccdbed; max-width:43ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:17px; }
.hero-meta {
  z-index:1; grid-column:1/-1; padding:9px clamp(18px,3vw,40px); min-height:40px; border-top:1px solid #55789669;
  background:#091d30bc; display:flex; flex-wrap:wrap; align-items:center; gap:6px 23px; color:#bbd1e6; font-size:11px;
}
.hero-meta span { display:inline-flex; align-items:center; gap:6px; }
.hero-meta .icon { color:#8bc6f4; }
.hero-meta time { color:#edf6ff; font-weight:650; }
.brand-art { position:relative; align-self:stretch; min-width:0; min-height:160px; display:grid; place-items:center; color:#94cdff; }
.brand-art img { position:relative; z-index:1; width:clamp(126px,16vw,203px); height:auto; aspect-ratio:1; object-fit:contain; }
.art-grid {
  position:absolute; inset:0; background:linear-gradient(90deg,#96d5ff31 1px,transparent 1px),linear-gradient(#96d5ff29 1px,transparent 1px);
  background-size:25px 25px; mask-image:radial-gradient(ellipse at 54% 50%,#000 12%,transparent 73%);
}
.art-rings {
  position:absolute; width:265px; height:265px; border:1px solid #78bcf04d; border-radius:50%;
  box-shadow:0 0 0 19px #73acdd10,0 0 0 38px #73acdd0b,inset 0 0 52px #329bfc25;
  background:radial-gradient(circle,#2579bd40,transparent 71%);
}
.art-rings::before,.art-rings::after { content:''; position:absolute; border-radius:50%; }
.art-rings::before { inset:14px; border:1px dashed #8bcfff57; }
.art-rings::after { inset:-25px; border:1px solid #8bcfff2c; }
.notice {
  display:flex; align-items:flex-start; gap:8px; padding:9px 12px; margin:0 0 15px; border:1px solid #2e4963;
  border-left:2px solid #549de2; border-radius:7px; background:#102740; color:#c3d8ec; font-size:12px;
}
.notice .icon { color:var(--blue); margin-top:1px; }
.notice.error { background:#34232e; border-color:#745066; border-left-color:var(--red); color:#ffd4dc; }
.banner { width:100%; max-height:245px; object-fit:cover; margin-bottom:16px; border-radius:var(--radius); }

.card { min-width:0; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:17px; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius); background:#0d2035; }
.kpi { border:0; border-radius:0; border-right:1px solid var(--border); background:transparent; padding:12px 15px; }
.kpi:last-child { border-right:0; }
.kpi-top { display:flex; justify-content:space-between; align-items:center; gap:6px; color:var(--muted); font-size:12px; font-weight:650; }
.kpi-icon { display:grid; place-items:center; width:28px; height:28px; flex:none; border-radius:7px; color:var(--blue); background:#173653; }
.kpi-icon.green { color:var(--green); background:#1a373b; }
.kpi-icon.amber { color:var(--amber); background:#372f2b; }
.kpi-icon.red { color:var(--red); background:#3c2b39; }
.kpi > strong { display:block; margin-top:2px; font:750 clamp(22px,2.6vw,34px)/1.04 var(--display); letter-spacing:-.04em; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.kpi p { margin-top:4px; color:var(--subtle); font-size:11px; }
.analytics-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:16px; margin-bottom:17px; align-items:stretch; }
.analytics-grid > :only-child { grid-column:1/-1; }
.analytics-grid .panel { margin:0; }
.detail-grid,.records-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.records-grid { align-items:start; }
.panel { min-width:0; padding:17px; margin-bottom:17px; }
.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:13px; }
.head-group { display:flex; align-items:center; gap:9px; min-width:0; }
.head-icon { display:grid; place-items:center; width:32px; height:32px; flex:none; color:var(--blue); background:#17324d; border:1px solid #284963; border-radius:8px; }
.panel-head h2 { font:740 18px/1.18 var(--display); letter-spacing:-.02em; overflow-wrap:anywhere; }
.panel-head p { color:var(--subtle); font-size:12px; margin-top:3px; }
.chart-summary { display:flex; align-items:baseline; gap:8px; }
.chart-summary strong { font:750 33px/1.1 var(--display); letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.chart-summary span { color:var(--muted); font-size:12px; }
.chart-wrap { position:relative; min-width:0; }
.chart-wrap svg { display:block; width:100%; min-height:140px; }
.grid-line { stroke:#3b5570; stroke-opacity:.7; stroke-dasharray:3 5; }
.chart-label { fill:#adc2d9; font:13px var(--mono); }
.chart-line { fill:none; stroke:#55bdff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; animation:draw-in .34s ease-out both; }
@keyframes draw-in { from { opacity:.24; } to { opacity:1; } }
.plot-mark { fill:#83d5ff; stroke:#122a41; stroke-width:1.5; }
.data-point { fill:transparent; cursor:pointer; outline:none; }
.plot-point:focus-within .plot-mark,.plot-point:hover .plot-mark { fill:#fff; stroke:#268cff; stroke-width:3; r:6px; }
.chart-tip { position:absolute; right:0; top:4px; opacity:0; pointer-events:none; padding:6px 9px; background:#0d2136; border:1px solid #5781a7; border-radius:6px; color:#e0efff; font-size:11px; transition:opacity .16s; }
.chart-tip.open { opacity:1; }
.chart-foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:7px; border-top:1px solid var(--border); padding-top:9px; color:var(--muted); font-size:11px; }
.chart-foot i { display:inline-block; width:12px; height:2px; margin-right:6px; background:var(--cyan); vertical-align:3px; }
.slash { color:var(--subtle); margin:0 3px; }
.insight { display:flex; flex-direction:column; border-top:2px solid #539de0; background:#0d2035; }
.insight ul,.ranking ol,.history ul,.connector-list { margin:0; padding:0; list-style:none; }
.insight li { padding:10px 0; border-top:1px solid var(--border); }
.insight li > a { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.insight li > a:hover,.ranking li a:hover { color:var(--cyan); }
.insight li strong { display:block; font-size:14px; }
.insight li small { display:block; margin-top:4px; color:var(--muted); font-size:10px; font-weight:650; }
.insight li > a .icon { color:var(--blue); }
.insight li p { color:#c1d0e2; font-size:12px; margin-top:5px; }
.insight > .text-link,.rank-link { margin-top:auto; padding-top:10px; }
.ranking { display:flex; flex-direction:column; }
.ranking li { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.ranking li a { flex:1; min-width:0; overflow-wrap:anywhere; }
.ranking li strong { display:block; font-size:12px; }
.ranking li small { display:block; margin-top:3px; color:var(--subtle); font-size:11px; }
.ranking li > b { font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rank { display:grid; place-items:center; width:31px; height:30px; border-radius:7px; background:#19324b; color:#c4d9f0; font:700 12px var(--mono); }
.rank.first { color:#bce9ff; background:#1a4669; border:1px solid #35719b; }


.rooms-section { margin:23px 0; }
.rooms-section > .panel-head h2 { font-size:23px; }
.rooms-section > .panel-head > .text-link { min-height:35px; }
.room-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.room-grid > .empty,.product-grid > .empty { grid-column:1/-1; }
.room-card {
  --series:#67caff; display:flex; flex-direction:column; gap:9px; padding:13px 13px 10px;
  border-top:2px solid #377bac; background:#10243a; transition:border-color .18s,background .18s;
}
.room-card[data-series=G1] { --series:#8faeff; border-top-color:#536d9e; }
.room-card[data-series=G2] { --series:#87d4dc; border-top-color:#4b828d; }
.room-card:hover { border-color:var(--series); background:#132b44; }
.room-top,.room-identity,.room-meta,.room-footer { display:flex; align-items:center; gap:7px; }
.room-top,.room-meta,.room-footer { justify-content:space-between; }
.room-identity { flex:none; }
.room-symbol { width:25px; height:25px; display:grid; place-items:center; border-radius:6px; overflow:hidden; }
.room-symbol img { width:100%; height:100%; object-fit:cover; }
.mode { color:var(--series,var(--blue)); font:700 10px/1.4 var(--mono); letter-spacing:.08em; }
.mode span { color:var(--subtle); }
.room-name h3 { min-height:36px; font:740 15px/1.23 var(--display); letter-spacing:-.012em; overflow-wrap:anywhere; }
.room-signal { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:8px; align-items:center; }
.room-signal strong { display:block; margin-top:3px; font:750 clamp(21px,2.4vw,34px)/1.1 var(--display); letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.room-signal small,.spark-empty { display:block; color:var(--subtle); font-size:10px; }
.spark-box { text-align:right; }
.sparkline { display:block; width:100%; height:39px; }
.spark-grid { fill:none; stroke:#415b75; stroke-dasharray:3 4; }
.spark-line { fill:none; stroke:var(--series); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.spark-end { fill:var(--series); }
.room-stats { display:grid; grid-template-columns:1fr 1.25fr; gap:8px; padding:8px 9px; border-radius:7px; background:#0c1d31; }
.room-stats dt { color:var(--subtle); font-size:10px; }
.room-stats dd { margin-top:3px; font-size:12px; font-weight:700; overflow-wrap:anywhere; }
.room-meta,.room-footer { font-size:11px; color:var(--muted); flex-wrap:wrap; }
.room-footer { margin-top:auto; padding-top:5px; border-top:1px solid var(--border); }
.room-link { min-height:30px; }
.pill { display:inline-flex; align-items:center; gap:5px; width:fit-content; padding:4px 7px; border-radius:6px; font-size:10px; font-weight:700; line-height:1.25; color:#c0d0e2; background:#23354b; }
.pill .dot { width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; }
.pill.featured,.pill.validated { color:var(--green); background:#1a3b3d; }
.pill.watch,.pill.hypothesis { color:var(--amber); background:#3b332e; }
.pill.below { color:var(--red); background:#3e2939; }
.pill.demo { color:#b9ddff; background:#1c3c5d; }
.pill.historical { color:#c4d9ec; background:#243d54; }
.pill.offline { color:#bac9d9; background:#283447; }
.positive { color:var(--green); }
.negative { color:var(--red); }
.muted,.fine { color:var(--subtle); }
.fine { margin-top:9px; font-size:11px; }
.text-link,.room-link,.back-link { display:inline-flex; align-items:center; gap:6px; color:#a5d5ff; font-size:12px; font-weight:700; transition:color .17s; }
.text-link:hover,.room-link:hover,.back-link:hover { color:#fff; }
.history li { display:grid; grid-template-columns:86px 7px minmax(0,1fr); align-items:baseline; gap:8px; padding:9px 0; border-top:1px solid var(--border); }
.history li > div { min-width:0; overflow-wrap:anywhere; }
.history li strong,.connector-list strong { display:block; font-size:12px; }
.history li time,.history li small,.connector-list small { color:var(--subtle); font-size:11px; }
.history li time { font-variant-numeric:tabular-nums; }
.history li small .icon { color:var(--blue); margin:0 2px; }
.history-dot { width:6px; height:6px; border-radius:50%; background:#5eb7f5; align-self:center; }
.history-more summary { display:flex; justify-content:space-between; align-items:center; list-style:none; padding:10px 0 3px; border-top:1px solid var(--border); color:var(--blue); font-size:12px; font-weight:700; }
.history-more[open] summary .icon { transform:rotate(180deg); }
.empty { display:grid; justify-items:center; gap:7px; padding:20px 10px; text-align:center; border:1px dashed #3a526d; border-radius:9px; color:var(--muted); font-size:12px; }
.empty .icon { color:var(--blue); }

.back-link { min-height:34px; margin-bottom:8px; }
.back-link .icon { transform:rotate(180deg); }
.page-room > .headline,.page-rooms > .headline,.page-lab > .headline,.page-admin > .headline { border-bottom:1px solid var(--border); padding:6px 0 16px; }
.page-room > .headline { padding:18px 15px; border:1px solid var(--border); border-left:3px solid #4d9cda; border-radius:10px; background:#10243a; }
.page-room > .headline .pill { flex:none; }
.detail-strip { display:flex; align-items:center; gap:14px; min-width:0; padding:12px 14px; margin-bottom:15px; border:1px solid var(--border); border-left:2px solid #478ccc; border-radius:9px; background:#0d2035; }
.detail-strip > div { flex:none; }
.detail-strip > span { flex:none; color:var(--subtle); font-size:11px; margin-left:auto; }
.detail-strip p { color:var(--muted); font-size:13px; }
.label { margin-bottom:6px; }
.tabs { display:flex; flex-wrap:wrap; gap:5px; }
.tabs button,.filter-link {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 10px; min-height:36px; border:1px solid transparent;
  border-radius:7px; background:transparent; color:var(--muted); font-size:12px; font-weight:650; transition:background .17s,border-color .17s,color .17s;
}
.tabs button:hover,.filter-link:hover { color:var(--text); background:#1b3955; }
.tabs button[aria-pressed=true],.filter-link.selected { background:#1c4467; color:#e0f2ff; border-color:#3c6d96; }
.tabs.compact { flex:none; flex-wrap:nowrap; padding:2px; border:1px solid var(--border); background:#0b1c30; border-radius:8px; }
.tabs.compact button { min-height:29px; padding:4px 8px; font-size:11px; }
.room-filters { margin-bottom:11px; }
.room-filters button { background:#10243a; border-color:var(--border); }
.room-filters button span { color:#aad2f6; font-size:10px; }
.table-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:12px; text-align:left; }
th,td { padding:9px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
thead th { color:#b9d2e8; font-size:11px; white-space:nowrap; background:#0b1e33; }
tbody th { font-weight:650; }
tbody tr:hover { background:#142b44; }
td small,th small { display:block; color:var(--subtle); font-size:10.5px; margin-top:4px; }
td .pill { white-space:nowrap; }
.hourly { display:grid; gap:8px; max-height:300px; overflow:auto; padding-right:7px; }
.hour-row { display:grid; grid-template-columns:30px 1fr 55px 54px; align-items:center; gap:8px; font-size:11px; }
.hour-row small { color:var(--muted); }
progress { width:100%; height:7px; accent-color:#62baff; }
.definition-list div { display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--border); font-size:12px; }
.definition-list dt { color:var(--muted); }
.definition-list dd { font-weight:650; text-align:right; }
.definition-list small { display:block; margin-top:3px; color:var(--muted); font-weight:400; }
.lab-form,.admin-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; align-items:end; }
.lab-workbench { display:grid; grid-template-columns:minmax(0,1fr); gap:13px; margin-bottom:16px; }
.lab-workbench .panel { margin:0; }
.lab-method { background:#0d2035; }
.lab-method ol { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.lab-method li { display:flex; align-items:flex-start; gap:8px; border-top:1px solid var(--border); padding-top:9px; }
.lab-method li > span { color:var(--blue); font:700 11px/1.5 var(--mono); }
.lab-method li strong { display:block; font-size:12px; }
.lab-method li p { color:var(--muted); font-size:12px; }
.lab-method .fine { margin-top:12px; }
.admin-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
label { display:grid; gap:6px; color:#c2d5e9; font-size:12px; font-weight:650; }
input,select,textarea { width:100%; min-width:0; min-height:41px; padding:9px 10px; border:1px solid #3b5875; border-radius:7px; background:#0b1c30; color:var(--text); transition:border-color .18s; }
input:focus,select:focus,textarea:focus { border-color:var(--cyan); }
textarea { resize:vertical; }
input::placeholder { color:var(--subtle); }
input[type=checkbox] { width:17px; height:17px; min-height:17px; accent-color:#51aaff; }
.check { display:flex; align-items:center; gap:7px; }
.checks { display:flex; flex-wrap:wrap; gap:9px 16px; }
fieldset { border:1px solid var(--border); border-radius:8px; margin:0; padding:9px; min-width:0; }
legend { color:var(--muted); font-size:12px; }
.span-two { grid-column:span 2; }
.button {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:8px 12px;
  border:1px solid #3d6385; background:#15324f; color:#e6f3ff; border-radius:8px; font-size:12px; font-weight:720;
  text-align:center; transition:background .18s,border-color .18s,transform .18s;
}
.button:hover { background:#21466a; border-color:#6197c4; }
.button:active:not(:disabled) { transform:translateY(1px); }
.button.primary { background:#57b3ff; border-color:#78c5ff; color:#061a2b; }
.button.primary:hover { background:#87ccff; }
.button.subtle { background:#0c2035; }
.button.danger { color:var(--red); justify-self:start; }
.button.hero-secondary { background:#0d2339a6; }
.form-action .button { width:100%; }

.showcase-hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:center; border:1px solid #385d80; border-radius:16px; margin-bottom:19px; }
.showcase-hero .headline { margin:0; padding:21px 24px; }
.showcase-hero .brand-art { min-height:162px; }
.showcase-hero .brand-art img { width:113px; }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.product { display:flex; flex-direction:column; overflow:hidden; }
.product-cover { position:relative; display:grid; place-items:center; isolation:isolate; min-height:142px; aspect-ratio:2.05; background:#183d60; color:#a6d8ff; overflow:hidden; border-bottom:1px solid #3a5e7e; }
.product-cover:not(.has-image)::before {
  content:''; z-index:-1; position:absolute; inset:0;
  background:linear-gradient(140deg,transparent 40%,#91c8ed34 40.5%,transparent 41%,transparent 65%,#91c8ed36 65.5%,transparent 66%),radial-gradient(ellipse at 30% 110%,#226ab4,#112b48 80%);
}
.product:nth-child(even) .product-cover:not(.has-image)::before { background:radial-gradient(ellipse at 70% 130%,#336983,#162942 79%); }
.product-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cover-icon { display:grid; place-items:center; width:62px; height:62px; border:1px solid #8dc6fa62; border-radius:14px; background:#102c4b8c; }
.cover-brand,.cover-index { position:absolute; padding:4px 6px; color:#d2e7fa; font:700 10px var(--mono); letter-spacing:.16em; }
.cover-brand { left:9px; bottom:8px; }
.cover-index { right:9px; top:8px; background:#0a2038b8; border-radius:5px; }
.product-info { flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding:15px; }
.product-info h2 { font:750 20px/1.2 var(--display); overflow-wrap:anywhere; }
.product-info p,.product-info .muted { color:var(--muted); font-size:12px; }
.product-action { width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:10px; }
.product-price small { display:block; color:var(--subtle); font-size:10px; }
.product-price strong { font-size:15px; overflow-wrap:anywhere; }

.login-frame { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); max-width:925px; margin:22px auto; border:1px solid var(--border); border-radius:17px; overflow:hidden; background:var(--surface); }
.login-visual { padding:19px 21px; display:flex; flex-direction:column; justify-content:center; }
.login-visual .brand-art { min-height:152px; }
.login-visual .brand-art img { width:130px; }
.login-visual .art-rings { width:173px; height:173px; }
.login-visual .headline { position:relative; z-index:1; margin:14px 0 0; }
.login-visual .subtitle { color:#cadbed; }
.login-panel { align-self:center; padding:24px; margin:0; }
.login-panel form { display:grid; gap:13px; }
.login-panel button { justify-self:start; }
.login-panel .notice { margin:0; }
.admin-toolbar { display:flex; justify-content:space-between; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:13px; padding:10px; }
.admin-toolbar > div { display:flex; flex-wrap:wrap; gap:6px; }
.admin-workspace { display:grid; grid-template-columns:177px minmax(0,1fr); gap:15px; align-items:start; }
.admin-tabs { display:grid; padding:8px; border:1px solid var(--border); background:var(--inset); border-radius:10px; }
.admin-tabs > span { color:var(--subtle); padding:7px 5px; font:700 9px var(--mono); letter-spacing:.09em; }
.admin-tabs button { justify-content:flex-start; }
.editor { border:1px solid var(--border); border-radius:8px; margin-top:7px; }
.editor summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px; background:#0c1e32; border-radius:8px; }
.editor summary:hover { background:#15324c; }
.editor summary strong { display:block; font-size:13px; overflow-wrap:anywhere; }
.editor summary small { color:var(--subtle); font-size:10.5px; }
.editor[open] summary > .icon { transform:rotate(90deg); }
.editor .admin-form { padding:11px; border-top:1px solid var(--border); }
.image-field { display:grid; gap:5px; align-self:start; }
.upload-label { display:flex; align-items:center; gap:5px; cursor:pointer; color:var(--blue); width:fit-content; min-height:31px; padding:3px; }
.upload-label input { position:absolute; opacity:0; width:1px; height:1px; min-height:1px; padding:0; }
.upload-label:focus-within { outline:2px solid var(--blue); }
.import-form { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-top:10px; }
.code-note { color:var(--blue); font:11px var(--mono); overflow-wrap:anywhere; }
.connector-list li { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 0; border-top:1px solid var(--border); }
.connector-list li strong { flex:1; min-width:130px; }
.admin-content .history li { display:flex; align-items:center; }
.admin-content .history li div { flex:1; }
.loading { min-height:100vh; display:grid; align-content:center; justify-items:center; gap:11px; color:var(--muted); }
.loader { width:27px; height:27px; border:2px solid #2a4d70; border-top-color:var(--cyan); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }


@media (min-width:1560px) { .room-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1200px) { .lab-workbench { grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); } }
@media (min-width:901px) and (max-width:1210px) {
  :root { --side:190px; }
  .room-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .panel { padding:14px; }
}
@media (max-width:900px) {
  .sidebar { display:none; }
  .workspace { margin:0; padding-bottom:calc(63px + env(safe-area-inset-bottom)); }
  .topbar { min-height:59px; padding:6px 16px; }
  .header-brand { display:block; min-width:0; }
  .header-brand .brand { min-height:43px; padding:0; }
  .header-brand .brand-mark { width:35px; height:35px; }
  .header-brand .brand strong { font-size:16px; }
  .header-brand .brand small { font-size:8px; margin-top:3px; }
  .crumbs { margin-right:auto; }
  .crumbs > span,.crumbs > .icon { display:none; }
  .mobile-nav {
    position:fixed; inset:auto 0 0; z-index:5; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px;
    padding:5px 8px calc(5px + env(safe-area-inset-bottom)); background:#0a1a2c; border-top:1px solid #304b68;
  }
  .mobile-nav .nav-link { flex-direction:column; justify-content:center; gap:4px; text-align:center; padding:4px; min-height:49px; font-size:10px; line-height:1.2; }
  .mobile-nav .nav-link > span { flex:0; overflow-wrap:anywhere; }
  .mobile-nav .nav-link > .icon:last-child:not(:first-child) { display:none; }
  .room-grid,.product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:690px) {
  :root { --gutter:13px; }
  .topbar { gap:8px; padding-inline:var(--gutter); }
  .top-actions { gap:7px; }
  .crumbs,.header-time,.account-menu summary > span { display:none; }
  .main { padding-top:17px; }
  .headline { align-items:flex-start; }
  .panorama { min-height:0; grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr); border-radius:13px; }
  .hero-copy { padding:20px 15px 16px; }
  .hero-meta { padding:8px 13px; gap:4px 12px; }
  .art-rings { width:180px; height:180px; }
  .brand-art img { width:clamp(85px,24vw,151px); }
  .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi { padding:10px 11px; }
  .kpi:nth-child(2) { border-right:0; }
  .kpi:nth-child(-n+2) { border-bottom:1px solid var(--border); }
  .analytics-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .panel { padding:13px; margin-bottom:13px; }
  .chart-wrap svg { min-height:135px; }
  .chart-label { font-size:16px; }
  .button,.room-link,.tabs button,.filter-link { min-height:42px; }
  .tabs.compact button { min-height:36px; }
  .lab-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lab-form .form-action { grid-column:span 2; }
  .detail-strip { flex-wrap:wrap; }
  .detail-strip p { flex-basis:100%; order:1; }
  .admin-workspace { grid-template-columns:minmax(0,1fr); gap:10px; }
  .admin-tabs { display:flex; flex-wrap:wrap; }
  .admin-tabs > span { display:none; }
  .login-frame { margin-top:0; }
  .login-panel { padding:17px; }
}
@media (max-width:485px) {
  .headline { flex-wrap:wrap; gap:10px; }
  .eyebrow { font-size:9px; gap:6px; }
  .eyebrow > span { width:11px; }
  .eyebrow b { display:none; }
  .panorama { grid-template-columns:minmax(0,1.55fr) minmax(0,.75fr); gap:0; }
  .panorama h1 { font-size:clamp(33px,9vw,46px); }
  .panorama .subtitle { font-size:12px; }
  .hero-actions { gap:5px; margin-top:12px; }
  .hero-actions .button { min-height:38px; padding:6px 8px; font-size:11px; }
  .hero-actions .icon { width:13px; }
  .panorama .brand-art { min-height:0; }
  .panorama .brand-art img { width:min(100%,108px); }
  .art-rings { width:131px; height:131px; }
  .hero-meta { font-size:10px; }
  .hero-meta .icon { width:13px; }
  .room-grid,.product-grid,.admin-form,.login-frame { grid-template-columns:minmax(0,1fr); }
  .room-name h3 { min-height:auto; }
  .room-signal strong { font-size:33px; }
  .panel-head h2 { font-size:16px; }
  .panel-head p { font-size:11px; }
  .trend-panel .head-icon { display:none; }
  .chart-label { font-size:19px; }
  .showcase-hero .headline { padding:14px; }
  .showcase-hero .brand-art img { width:88px; }
  .login-visual { padding:15px; }
  .login-visual .brand-art { min-height:110px; }
  .login-visual .brand-art img { width:90px; }
  .login-visual .art-rings { width:115px; height:115px; }
  .admin-form .span-two { grid-column:auto; }
  input:not([type=checkbox]),select,textarea { font-size:16px; }
}
@media (max-width:350px) {
  .mobile-nav { padding-inline:5px; gap:3px; }
  .mobile-nav .nav-link { padding-inline:2px; font-size:9px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}


.table-hint { display:flex; justify-content:flex-end; align-items:center; gap:5px; margin-bottom:5px; color:var(--subtle); font-size:11px; }
.matrix { min-width:0; }
@media (max-width:780px) { .header-time > span { display:none; } }