/* XMECH DGX portal · 玉泉 pixel campus.
   Palette unchanged (teal / ink / paper / red). Every pixel asset is a flat SVG in /static generated by
   verification/portal-polish-20261018/pixel_art.py: scenes (pixel-*.svg), 9-slice frames and buttons
   (ui-*.svg), icons, digit glyphs and cursors. html[data-motion] comes from prefs-ui.js. */
:root{--teal:#006b91;--teal-dark:#034f70;--teal-soft:#eaf3f8;--teal-light:#2f8db0;--red:#be3e35;--ink:#17384b;--muted:#516b7a;--line:#c5d5df;--line-strong:#8eafbf;--shadow:#c9dae3;--paper:#f5f9fc;--sky:#cfe4ee;--white:#fff;--width:1360px;--gutter:32px;--scene:300px;--mono:"Cascadia Code",Consolas,monospace;--sans:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
/* theme tokens (light); dark values below. html[data-theme] is set by prefs-ui.js (system / light / dark) */
:root{--surface:#fff;--text:var(--ink);--emboss:#b7d3e0;--emboss-2:#dcecf3;--dash:#e1ecf1;--warn-bg:#fff1ec;--zebra:#f8fbfd;--warn-chip-bg:#f6e2dc;--warn-chip-text:#8b3a30;--tag-bg:#e3eef4;--dot:#d6e5ed;--chart-grid:#c8dce6;--placeholder:#7d93a0;--warn-text:#755d58;--chart-text:#416477;--rider-w:30px;--rider-sheet:60px;--accent-bg:#006b91;--icon-plate:#fff;--bar-a:#034f70;--bar-b:#0a5878;--chip-strong:#034f70;color-scheme:light}
:root[data-theme=dark]{--teal:#4fb8e0;--teal-dark:#8fd3ee;--teal-soft:#12293b;--teal-light:#5cc3e6;--red:#e0675c;--ink:#04101a;--text:#dbe9f1;--muted:#93adbf;--line:#2a4459;--line-strong:#3e6580;--shadow:#050d14;--paper:#0b1722;--sky:#07131e;--surface:#13283a;--emboss:#05101a;--emboss-2:#0f2232;--dash:#203a4e;--warn-bg:#2a1717;--zebra:#102435;--warn-chip-bg:#3a2020;--warn-chip-text:#f0a69c;--tag-bg:#172f42;--dot:#15283a;--chart-grid:#25425a;--placeholder:#6f8ba0;--warn-text:#e6b3ab;--chart-text:#93adbf;--rider-w:40px;--rider-sheet:80px;--accent-bg:#1b7aa3;--icon-plate:#0b1a28;--bar-a:#0c3a54;--bar-b:#0f4762;--chip-strong:#1b7aa3;color-scheme:dark}
:root{--img-pixel-admin:url('/static/pixel-admin.svg');--img-pixel-backdrop:url('/static/pixel-backdrop.svg');--img-pixel-chevron:url('/static/pixel-chevron.svg');--img-pixel-cyclist:url('/static/pixel-cyclist.svg');--img-pixel-digits:url('/static/pixel-digits.svg');--img-pixel-gate:url('/static/pixel-gate.svg');--img-pixel-guide:url('/static/pixel-guide.svg');--img-pixel-icons:url('/static/pixel-icons.svg');--img-pixel-koi:url('/static/pixel-koi.svg');--img-pixel-models:url('/static/pixel-models.svg');--img-pixel-ridge:url('/static/pixel-ridge.svg');--img-pixel-settings:url('/static/pixel-settings.svg');--img-pixel-texture:url('/static/pixel-texture.svg');--img-pixel-yuquan:url('/static/pixel-yuquan.svg');--img-ui-btn:url('/static/ui-btn.svg');--img-ui-btn-danger:url('/static/ui-btn-danger.svg');--img-ui-btn-down:url('/static/ui-btn-down.svg');--img-ui-btn-ghost:url('/static/ui-btn-ghost.svg');--img-ui-btn-hover:url('/static/ui-btn-hover.svg');--img-ui-btn-primary:url('/static/ui-btn-primary.svg');--img-ui-btn-primary-down:url('/static/ui-btn-primary-down.svg');--img-ui-btn-primary-hover:url('/static/ui-btn-primary-hover.svg');--img-ui-frame:url('/static/ui-frame.svg');--img-ui-frame-active:url('/static/ui-frame-active.svg');--img-ui-frame-dark:url('/static/ui-frame-dark.svg');--img-ui-frame-soft:url('/static/ui-frame-soft.svg');--img-ui-frame-warn:url('/static/ui-frame-warn.svg');--img-ui-input:url('/static/ui-input.svg');--img-ui-input-focus:url('/static/ui-input-focus.svg')}
:root[data-motion=off]{--img-pixel-backdrop:url('/static/pixel-backdrop-still.svg');--img-pixel-yuquan:url('/static/pixel-yuquan-still.svg');--img-pixel-gate:url('/static/pixel-gate-still.svg');--img-pixel-models:url('/static/pixel-models-still.svg');--img-pixel-guide:url('/static/pixel-guide-still.svg');--img-pixel-settings:url('/static/pixel-settings-still.svg');--img-pixel-admin:url('/static/pixel-admin-still.svg');--img-pixel-koi:url('/static/pixel-koi-still.svg')}
:root[data-theme=dark]{--img-pixel-backdrop:url('/static/pixel-backdrop-night.svg');--img-pixel-yuquan:url('/static/pixel-yuquan-night.svg');--img-pixel-gate:url('/static/pixel-gate-night.svg');--img-pixel-models:url('/static/pixel-models-night.svg');--img-pixel-guide:url('/static/pixel-guide-night.svg');--img-pixel-settings:url('/static/pixel-settings-night.svg');--img-pixel-admin:url('/static/pixel-admin-night.svg');--img-pixel-koi:url('/static/pixel-koi-night.svg');--img-ui-frame:url('/static/ui-frame-night.svg');--img-ui-frame-soft:url('/static/ui-frame-soft-night.svg');--img-ui-frame-warn:url('/static/ui-frame-warn-night.svg');--img-ui-frame-dark:url('/static/ui-frame-dark-night.svg');--img-ui-frame-active:url('/static/ui-frame-active-night.svg');--img-ui-btn:url('/static/ui-btn-night.svg');--img-ui-btn-hover:url('/static/ui-btn-hover-night.svg');--img-ui-btn-down:url('/static/ui-btn-down-night.svg');--img-ui-btn-primary:url('/static/ui-btn-primary-night.svg');--img-ui-btn-primary-hover:url('/static/ui-btn-primary-hover-night.svg');--img-ui-btn-primary-down:url('/static/ui-btn-primary-down-night.svg');--img-ui-btn-danger:url('/static/ui-btn-danger-night.svg');--img-ui-btn-ghost:url('/static/ui-btn-ghost-night.svg');--img-ui-input:url('/static/ui-input-night.svg');--img-ui-input-focus:url('/static/ui-input-focus-night.svg');--img-pixel-icons:url('/static/pixel-icons-night.svg');--img-pixel-digits:url('/static/pixel-digits-night.svg');--img-pixel-chevron:url('/static/pixel-chevron-night.svg');--img-pixel-cyclist:url('/static/pixel-cyclist-night.svg');--img-pixel-ridge:url('/static/pixel-ridge-night.svg');--img-pixel-texture:url('/static/pixel-texture-night.svg')}
:root[data-theme=dark][data-motion=off]{--img-pixel-backdrop:url('/static/pixel-backdrop-night-still.svg');--img-pixel-yuquan:url('/static/pixel-yuquan-night-still.svg');--img-pixel-gate:url('/static/pixel-gate-night-still.svg');--img-pixel-models:url('/static/pixel-models-night-still.svg');--img-pixel-guide:url('/static/pixel-guide-night-still.svg');--img-pixel-settings:url('/static/pixel-settings-night-still.svg');--img-pixel-admin:url('/static/pixel-admin-night-still.svg');--img-pixel-koi:url('/static/pixel-koi-night-still.svg')}
@media(prefers-reduced-motion:reduce){
  :root:not([data-motion=on]){--img-pixel-backdrop:url('/static/pixel-backdrop-still.svg');--img-pixel-yuquan:url('/static/pixel-yuquan-still.svg');--img-pixel-gate:url('/static/pixel-gate-still.svg');--img-pixel-models:url('/static/pixel-models-still.svg');--img-pixel-guide:url('/static/pixel-guide-still.svg');--img-pixel-settings:url('/static/pixel-settings-still.svg');--img-pixel-admin:url('/static/pixel-admin-still.svg');--img-pixel-koi:url('/static/pixel-koi-still.svg')}
  :root[data-theme=dark]:not([data-motion=on]){--img-pixel-backdrop:url('/static/pixel-backdrop-night-still.svg');--img-pixel-yuquan:url('/static/pixel-yuquan-night-still.svg');--img-pixel-gate:url('/static/pixel-gate-night-still.svg');--img-pixel-models:url('/static/pixel-models-night-still.svg');--img-pixel-guide:url('/static/pixel-guide-night-still.svg');--img-pixel-settings:url('/static/pixel-settings-night-still.svg');--img-pixel-admin:url('/static/pixel-admin-night-still.svg');--img-pixel-koi:url('/static/pixel-koi-night-still.svg')}
}

*{box-sizing:border-box}
html{cursor:url('/static/cursor-arrow.svg') 0 0,auto;scrollbar-color:var(--teal) var(--teal-soft)}
body{margin:0;color:var(--text);font:15px/1.7 var(--sans);background:var(--paper) radial-gradient(var(--dot) 1px,transparent 1.2px) 0 0/16px 16px}
a,button,summary,select,label.checkbox-label,[role=tab],.legend-item,.usage-option{cursor:url('/static/cursor-hand.svg') 9 0,pointer}
input,textarea{cursor:text}
button:disabled{cursor:not-allowed}
::selection{background:var(--accent-bg);color:#fff}
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:var(--teal-soft)}
::-webkit-scrollbar-thumb{background:var(--accent-bg);border:3px solid var(--teal-soft)}
::-webkit-scrollbar-thumb:hover{background:var(--chip-strong)}
button,input,select,textarea{font:inherit;color:inherit;border-radius:0}
button,a,input,select,summary{touch-action:manipulation}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
:is(button,a,input,select,textarea,summary):focus-visible{outline:2px dashed var(--red);outline-offset:3px}
[hidden]{display:none!important}
[hidden]::before,[hidden]::after{content:none!important}
h1,h2,h3,p{margin:0}
h1{font-size:34px;line-height:1.3;font-weight:800}
h2{font-size:19px;line-height:1.5}
h3{font-size:16px}
p,h1,h2,h3{overflow-wrap:anywhere}
label{display:block;font-size:14px}
label>input,label>select{display:block;width:100%;margin-top:6px}
form>label{margin-bottom:18px}
code,pre{font-family:var(--mono)}
.sr-only,.pixel-source{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:16px;background:var(--accent-bg);color:white;padding:12px;z-index:100}
.skip-link:focus{top:10px}
.muted{color:var(--muted)}
.eyebrow{display:inline-block;font:700 12px/1.6 var(--mono);letter-spacing:1.4px;color:var(--teal)}

/* ---------- pixel primitives ---------- */
.px-icon{display:inline-block;flex:none;width:24px;height:24px;background:var(--img-pixel-icons) 0 0/720px 24px no-repeat;background-position:calc(var(--i,0) * -24px) 0;vertical-align:-6px}
[data-icon=home]{--i:0}[data-icon=chip]{--i:1}[data-icon=map]{--i:2}[data-icon=key]{--i:3}[data-icon=shield]{--i:4}[data-icon=bell]{--i:5}[data-icon=user]{--i:6}
[data-icon=bars]{--i:7}[data-icon=people]{--i:8}[data-icon=plug]{--i:9}[data-icon=sign]{--i:10}[data-icon=term]{--i:11}[data-icon=spark]{--i:12}[data-icon=chart]{--i:13}
[data-icon=lock]{--i:14}[data-icon=card]{--i:15}[data-icon=warn]{--i:16}[data-icon=horn]{--i:17}[data-icon=laptop]{--i:18}[data-icon=scroll]{--i:19}[data-icon=chat]{--i:20}
[data-icon=image]{--i:21}[data-icon=film]{--i:22}[data-icon=wave]{--i:23}[data-icon=cube]{--i:24}[data-icon=fish]{--i:25}[data-icon=gear]{--i:26}[data-icon=sun]{--i:27}[data-icon=moon]{--i:28}[data-icon=globe]{--i:29}
.pixel-num{display:inline-flex;gap:0;line-height:0;--s:5}
.pixel-num i{display:block;width:calc(6px * var(--s));height:calc(8px * var(--s));background:var(--img-pixel-digits) 0 0/calc(138px * var(--s)) calc(8px * var(--s)) no-repeat;background-position:calc(var(--i,0) * -6px * var(--s)) 0}
.pixel-num i[data-c="0"]{--i:0}.pixel-num i[data-c="1"]{--i:1}.pixel-num i[data-c="2"]{--i:2}.pixel-num i[data-c="3"]{--i:3}.pixel-num i[data-c="4"]{--i:4}.pixel-num i[data-c="5"]{--i:5}
.pixel-num i[data-c="6"]{--i:6}.pixel-num i[data-c="7"]{--i:7}.pixel-num i[data-c="8"]{--i:8}.pixel-num i[data-c="9"]{--i:9}.pixel-num i[data-c="10"]{--i:10}.pixel-num i[data-c="11"]{--i:11}
.pixel-num i[data-c="12"]{--i:12}.pixel-num i[data-c="13"]{--i:13}.pixel-num i[data-c="14"]{--i:14}.pixel-num i[data-c="15"]{--i:15}.pixel-num i[data-c="16"]{--i:16}.pixel-num i[data-c="17"]{--i:17}
.pixel-num i[data-c="18"]{--i:18}.pixel-num i[data-c="19"]{--i:19}.pixel-num i[data-c="20"]{--i:20}.pixel-num i[data-c="21"]{--i:21}.pixel-num i[data-c="22"]{--i:22}
/* 9-slice frames: paper window, soft info, warning, terminal, active */
.panel,.window,.model-card,.request-card,.user-card,.dialog-box,.auth-card,.announcement-form,.account-menu,.notice-panel,dialog,.usage-options,.guide-illustration,.guide-step,.empty-state{border:8px solid transparent;border-image:var(--img-ui-frame) 4 fill/8px stretch;background:none}
.action-banner,.announcement-banner,.research-notice,.input-summary,.guide-intro,.user-filters,.audit-filters,.document-guide,.toast,.segmented{border:8px solid transparent;border-image:var(--img-ui-frame-soft) 4 fill/8px stretch;background:none}
.model-card.active,.secret-panel{border:8px solid transparent;border-image:var(--img-ui-frame-active) 4 fill/8px stretch;background:none}
.switch-warning,.action-banner.busy{border:8px solid transparent;border-image:var(--img-ui-frame-warn) 4 fill/8px stretch;background:none}
.code-block{border:8px solid transparent;border-image:var(--img-ui-frame-dark) 4/8px stretch;background:#102e40 repeating-linear-gradient(0deg,transparent 0 3px,#ffffff08 3px 4px) padding-box}
.table-wrap{border:8px solid transparent;border-image:var(--img-ui-frame) 4/8px stretch;background:var(--surface) padding-box;overflow:auto}
/* buttons */
.button,.copy-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:2px 12px;border:6px solid transparent;border-image:var(--img-ui-btn) 3 fill/6px stretch;background:none;color:var(--text);font-size:14px;line-height:1.5;font-weight:700;white-space:normal;text-align:center;text-decoration:none}
.button:hover,.copy-button:hover{border-image-source:var(--img-ui-btn-hover);color:var(--teal-dark);text-decoration:none}
.button:active,.copy-button:active{border-image-source:var(--img-ui-btn-down);transform:translateY(2px)}
.button.primary{border-image-source:var(--img-ui-btn-primary);color:#fff}
.button.primary:hover{border-image-source:var(--img-ui-btn-primary-hover);color:#fff}
.button.primary:active{border-image-source:var(--img-ui-btn-primary-down)}
.button.danger{border-image-source:var(--img-ui-btn-danger);color:var(--red)}
.button:disabled,.copy-button:disabled{opacity:.5;transform:none}
.button:disabled:hover,.copy-button:disabled:hover{border-image-source:var(--img-ui-btn);color:var(--text)}
.button.primary:disabled:hover{border-image-source:var(--img-ui-btn-primary);color:#fff}
.button.small{min-height:36px;padding:0 10px;font-size:13px}
.button.wide{width:100%;justify-content:space-between}
.copy-button{min-height:34px;padding:0 8px;font-size:13px;flex-shrink:0}
.button .px-icon{margin-left:-2px}
.icon-button,.text-button{border:0;background:none;color:var(--teal);padding:8px 10px;min-height:40px;font-size:14px;font-weight:600}
.icon-button:hover,.text-button:hover{background:var(--teal-soft)}
.text-button{padding-left:0;text-align:left}
/* inputs */
input,select,textarea{min-height:44px;min-width:0;max-width:100%;padding:6px 10px;border:4px solid transparent;border-image:var(--img-ui-input) 2/4px stretch;background:var(--surface) padding-box}
input:focus,select:focus,textarea:focus{border-image-source:var(--img-ui-input-focus);outline:none}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
select{appearance:none;-webkit-appearance:none;padding-right:34px;background:var(--surface) var(--img-pixel-chevron) right 10px center/14px 8px no-repeat padding-box}
input[type=checkbox],input[type=radio]{min-height:0;padding:0;border:0;border-image:none;background:none}
input[readonly]{background:var(--paper) padding-box;color:var(--muted)}
textarea{display:block;width:100%;margin-top:6px;resize:vertical;min-height:120px}
/* chips, tabs, badges: stepped corners */
.chip,.state-chip,.tag,.number-chip,.tab-label,.speaker-tag,.badge,.banner-marker{clip-path:polygon(0 3px,3px 3px,3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px))}
.chip,.state-chip,.tag,.number-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 10px;font-size:12px;line-height:1.6;background:var(--teal-soft);color:var(--teal-dark);font-weight:600}
.state-chip{white-space:nowrap;background:var(--emboss-2)}
.state-chip.ready{background:var(--accent-bg);color:#fff}
.state-chip.ready:before{content:"";width:6px;height:6px;background:var(--surface)}
.state-chip.warning{color:#fff;background:var(--red)}
.tag{background:var(--tag-bg);color:var(--muted);font-weight:500}
.tag-row{display:flex;gap:6px;flex-wrap:wrap}
.number-chip{font-family:var(--mono);background:var(--teal-soft);color:var(--teal-dark);padding:4px 8px}
.badge{display:inline-block;background:var(--red);color:white;padding:0 6px;min-width:20px;font:700 12px/20px var(--mono);text-align:center}
.tab-label,.speaker-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;background:var(--accent-bg);color:#fff;font:700 13px/22px var(--sans);letter-spacing:1px}
.tab-label .px-icon,.banner-marker .px-icon,.window-title .px-icon,.nav-inner>a.active .px-icon{background-color:var(--icon-plate);clip-path:polygon(0 2px,2px 2px,2px 0,22px 0,22px 2px,24px 2px,24px 22px,22px 22px,22px 24px,2px 24px,2px 22px,0 22px)}
.speaker-tag{padding:2px 12px;font:700 12px/22px var(--mono);letter-spacing:1px}
.status-dot{display:inline-block;width:8px;height:8px;background:var(--accent-bg);margin-right:8px;vertical-align:middle;box-shadow:2px 2px 0 #9fc3d5}
.status-dot.offline{background:var(--red)}
.segmented{display:flex;gap:4px;padding:0}
.segmented button{display:inline-flex;align-items:center;gap:6px;min-height:40px;border:6px solid transparent;background:none;color:var(--muted);padding:0 12px;font-size:14px;font-weight:600}
.segmented button:hover{color:var(--teal-dark);border-image:var(--img-ui-btn-hover) 3 fill/6px stretch}
.segmented button.selected,.segmented button[aria-selected=true]{color:#fff;border-image:var(--img-ui-btn-primary) 3 fill/6px stretch}
summary{list-style:none;display:flex;align-items:center;gap:10px}
summary::-webkit-details-marker{display:none}
summary:before{content:"";flex:none;width:8px;height:10px;background:var(--accent-bg);clip-path:polygon(0 0,2px 0,2px 2px,4px 2px,4px 4px,6px 4px,6px 6px,4px 6px,4px 8px,2px 8px,2px 10px,0 10px)}
details[open]>summary:before{transform:rotate(90deg)}

/* ---------- shell ---------- */
.topbar{position:relative;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:70px;padding:16px max(var(--gutter),calc((100% - var(--width))/2)) 10px;background:var(--surface)}
.topbar:before,.auth-masthead:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(90deg,var(--teal) 0 12px,var(--teal-dark) 12px 24px)}
.brand{display:flex;align-items:center;gap:14px;color:var(--text);font-size:18px;flex-shrink:0;font-weight:700}
.brand:hover{text-decoration:none}
.brand img{width:104px;height:auto}
.brand strong{font-size:14px;font-weight:600}
.brand-divider{width:2px;height:24px;background:var(--line)}
.topbar-right{display:flex;align-items:center;gap:14px;min-width:0}
.campus-label{font:12px var(--mono);color:var(--muted)}
.notice-button{display:inline-flex;align-items:center;gap:6px}
.user-button{display:flex;align-items:center;gap:9px;border:0;background:none;min-width:0;padding:4px;font-size:14px;font-weight:600}
.user-button:hover{background:var(--teal-soft)}
.avatar{display:inline-flex;justify-content:center;align-items:center;width:36px;height:36px;flex-shrink:0;border:6px solid transparent;border-image:var(--img-ui-btn-ghost) 3 fill/6px stretch;color:var(--teal-dark);font:700 14px/1 var(--mono)}
.user-button #user-name{max-width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.main-nav{background:var(--surface);border-bottom:3px solid var(--ink)}
.nav-inner{display:flex;align-items:center;gap:6px;max-width:calc(var(--width) + 2 * var(--gutter));padding:6px var(--gutter) 8px;margin:auto}
.nav-inner>a{display:flex;align-items:center;gap:6px;padding:0 12px 0 8px;min-height:44px;color:var(--muted);font-size:14px;font-weight:600;white-space:nowrap;border:6px solid transparent}
.nav-inner>a:hover{text-decoration:none;color:var(--teal-dark);border-image:var(--img-ui-btn-hover) 3 fill/6px stretch}
.nav-inner>a.active{color:#fff;border-image:var(--img-ui-btn-primary) 3 fill/6px stretch}
.nav-status{margin-left:auto;white-space:nowrap;color:var(--muted);font:12px var(--mono)}
main{padding:0 0 24px;min-height:calc(100vh - 260px)}
#approved-content{display:flex;flex-direction:column;gap:24px}
.view{display:contents}
#approved-content>aside,.view>*{width:min(var(--width),calc(100% - 2 * var(--gutter)));margin-inline:auto}
.view>.scene{order:-1;width:100%}
.view>:not(.scene){order:1}
.view>.disclosure{margin-inline:auto}
.campus-ridge{position:relative;height:48px;margin-top:32px;background:var(--img-pixel-ridge) 0 100%/384px 48px repeat-x;overflow:hidden}
.ridge-rider{position:absolute;left:0;bottom:3px;width:var(--rider-w);height:22px;background:var(--img-pixel-cyclist) 0 0/var(--rider-sheet) 22px no-repeat;transform:translateX(14vw)}
.page-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;padding:16px max(var(--gutter),calc((100% - var(--width))/2)) 20px;background:var(--ink);color:#b9d3df;font:11px/1.7 var(--mono)}
.page-footer b{color:var(--red);padding:0 6px}
.icp-filing{flex-basis:100%;text-align:center;color:inherit;font-size:12px;line-height:1.8;letter-spacing:normal;text-decoration:underline;text-underline-offset:3px}
.icp-filing:hover{color:#fff}
.icp-filing:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* ---------- scene bands ---------- */
.scene{position:relative;isolation:isolate;display:flex;align-items:flex-start;min-height:var(--scene);padding:30px max(var(--gutter),calc((100% - var(--width))/2)) 80px;background:var(--sky) var(--img-pixel-backdrop) 0 100%/auto var(--scene) repeat-x;overflow:hidden;border-bottom:3px solid var(--ink)}
.scene:after{content:"";position:absolute;bottom:0;right:max(var(--gutter),calc((100% - var(--width))/2));height:var(--scene);aspect-ratio:240/100;background:var(--img-pixel-yuquan) right bottom/auto 100% no-repeat;z-index:-1;pointer-events:none}
.scene-models:after{aspect-ratio:190/100;background-image:var(--img-pixel-models)}
.scene-guide:after{aspect-ratio:210/100;background-image:var(--img-pixel-guide)}
.scene-settings:after{aspect-ratio:180/100;background-image:var(--img-pixel-settings)}
.scene-admin:after{aspect-ratio:170/100;background-image:var(--img-pixel-admin)}
.dialog-box{position:relative;z-index:1;width:min(460px,100%);padding:18px 24px 20px;margin-top:14px}
.dialog-box .speaker-tag{position:absolute;left:10px;top:-24px}
.dialog-box h1{font-size:clamp(28px,2.6vw,36px);letter-spacing:1px;text-shadow:2px 2px 0 var(--emboss),4px 4px 0 var(--emboss-2);margin-top:4px}
.dialog-box p{color:var(--muted);margin-top:6px}
.dialog-box:after{content:"";position:absolute;right:14px;bottom:10px;width:10px;height:6px;background:var(--red);clip-path:polygon(0 0,100% 0,100% 2px,8px 2px,8px 4px,6px 4px,6px 6px,4px 6px,4px 4px,2px 4px,2px 2px,0 2px)}
.heading-dot{color:var(--red)}
.heading-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.scene-sign{position:absolute;top:18px;right:max(var(--gutter),calc((100% - var(--width))/2));font:700 11px var(--mono);letter-spacing:1px;background:var(--ink);color:#d9f0fb;padding:5px 12px}

/* ---------- status strips ---------- */
.action-banner{display:flex;align-items:center;gap:12px;padding:4px 10px;font-size:13px}
.action-banner p{flex:1;min-width:0}
.action-banner a{white-space:nowrap;font-size:13px;font-weight:600}
.banner-marker{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;padding:2px 10px 2px 3px;background:var(--accent-bg);color:#fff;font:700 12px/22px var(--sans)}
.action-banner.busy .banner-marker{background:var(--red)}
.announcement-banner{display:flex;gap:16px;align-items:flex-start;padding:12px 16px}
.announcement-banner>div{min-width:0;flex:1}
.announcement-banner h2{font-size:18px}
.announcement-banner .announcement-body{margin:6px 0}
.announcement-banner .muted{font-size:12px}
.announcement-body,#confirm-message{white-space:pre-wrap;overflow-wrap:anywhere}

/* ---------- panels and windows ---------- */
.panel{position:relative;min-width:0;padding:18px 22px 22px}
.panel-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px}
.panel-top h2{font-size:18px}
.window{padding:0}
.window-bar{display:flex;align-items:center;gap:12px;min-height:38px;padding:4px 10px 4px 8px;background:repeating-linear-gradient(0deg,var(--bar-a) 0 2px,var(--bar-b) 2px 4px);color:#fff}
.window-title{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;letter-spacing:1px}
.window-path{font:12px var(--mono);color:#9fd0e4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.window-dots{display:flex;gap:6px;margin-left:auto}
.window-dots i{width:10px;height:10px;background:var(--surface);box-shadow:2px 2px 0 var(--ink)}
.window-dots i:nth-child(2){background:#9fd0e4}.window-dots i:nth-child(3){background:var(--red)}
.window-body{padding:20px 22px 24px}

/* home status row */
.status-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(250px,.78fr);gap:24px;align-items:stretch}
.model-hero{display:flex;flex-direction:column}
.model-reading{flex:1;display:flex;align-items:center}
.model-reading>div{min-width:0}
.model-hero h2{font-size:clamp(22px,2vw,28px);color:var(--teal-dark);line-height:1.35;text-shadow:2px 2px 0 var(--emboss-2)}
.model-hero .muted{font-size:13px;margin:6px 0 14px}
.hero-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:18px;padding-top:14px;border-top:2px dashed var(--line);font-size:12px;color:var(--muted)}
.capacity-panel{display:flex;flex-direction:column}
.capacity-panel h2{font-size:13px;font-weight:600;color:var(--muted)}
.live-label{font-size:12px;color:var(--muted)}
.capacity-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:8px 0 12px}
.capacity-stats>div{display:flex;flex-direction:column;gap:6px}
.capacity-stats strong{display:block;font:600 36px/1.2 var(--mono);color:var(--teal-dark)}
.capacity-stats span:not(.pixel-num){font-size:12px;color:var(--muted)}
.capacity-footer{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:auto;font-size:12px;color:var(--muted);border-top:2px dashed var(--line);padding-top:12px}
.request-pixels{font-size:12px;margin-bottom:12px}
.pixel-meter{display:flex;gap:10px;margin-bottom:6px;align-items:flex-start}
.pixel-label{min-width:30px;color:var(--muted)}
.pixel-cells{display:flex;align-items:center;flex-wrap:wrap;gap:3px;min-height:20px}
.request-pixel{display:block;width:10px;height:10px;background:var(--accent-bg);box-shadow:inset -2px -2px 0 var(--teal-dark)}
.waiting .request-pixel{background:var(--surface);box-shadow:inset 0 0 0 2px var(--red)}
.pixel-legend{display:block;font-size:11px;color:var(--muted);margin-top:6px}
.pixel-overflow{color:var(--muted)}
.online-panel .panel-top{margin-bottom:12px}
.online-panel .pixel-num{--s:2}
.online-list{display:grid;grid-template-columns:1fr;gap:10px}
.online-list>.muted{font-size:13px}
.online-member{display:flex;gap:10px;align-items:center;min-width:0}
.online-member>div{min-width:0}
.online-member-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600}
.online-member-detail{font-size:12px;color:var(--muted)}
.online-member-detail:before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;background:var(--accent-bg);vertical-align:1px}

/* connect window */
.connect-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px 32px;padding-bottom:18px;margin-bottom:4px;border-bottom:2px dashed var(--line)}
.connect-head h2{font-size:22px}
.connect-head p{font-size:13px;margin-top:2px}
.connect-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.connect-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px}
.connect-main,.connect-more{min-width:0}
.connect-more{padding-top:20px}
.code-label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin:20px 0 6px;letter-spacing:.5px}
.copy-field{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 6px 6px 12px;border:4px solid transparent;border-image:var(--img-ui-input) 2/4px stretch;background:var(--paper) padding-box}
.copy-field code{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--teal-dark);font-size:13px;font-weight:600}
.connection-values{display:grid;grid-template-columns:1fr;gap:0}
.connection-values>div{min-width:0}
.config-tip{font-size:12px;color:var(--muted);margin-top:6px}
#api-client{width:100%}
.input-summary{margin:0 0 6px;padding:8px 12px}
.input-summary-heading{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.input-summary-heading strong{font-size:12px;color:var(--muted)}
#api-input-types{font-weight:700;color:#fff;background:var(--chip-strong);padding:1px 10px;font-size:13px;clip-path:polygon(0 3px,3px 3px,3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px))}
.input-summary p{font-size:13px;margin-top:6px}
.input-summary p:empty{display:none}
.disclosure{border-bottom:2px dashed var(--line);padding:0;margin:0}
.disclosure>summary{padding:12px 2px;color:var(--teal-dark);font-size:14px;font-weight:700}
.disclosure>summary:hover{color:var(--teal)}
.disclosure[open]{padding-bottom:16px}
.disclosure>p{margin:8px 0;line-height:1.85}
.disclosure .table-wrap{margin:12px 0}
.attachment-help{font-size:13px;color:var(--muted);white-space:pre-line;overflow-wrap:anywhere}
.context-advice{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.context-advice p{flex:1 1 220px;font-size:13px;color:var(--muted)}
.example-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 8px 6px 14px;background:#1f4a63;color:#d9f0fb;font:12px var(--mono)}
.example-top .copy-button{min-height:30px}
.code-block{margin:0;color:#bfe8f7;padding:16px 18px;font:13px/1.8 var(--mono);overflow:auto;max-height:420px;white-space:pre;tab-size:4}
.ai-config-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:18px 0 0}
.ai-config-actions p{font-size:12px;flex:1 1 160px}
.api-alternatives{margin-top:14px}
.api-alternatives summary{font-size:13px;color:var(--muted)}
.backup-entry{display:grid;gap:8px;padding-top:10px;min-width:0}
.backup-entry>a{justify-self:start}
#api-connection-note{font-size:12px;margin-top:12px}

/* route: an unboxed map trail with data flowing along it */
.route-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,auto);gap:14px 40px;align-items:center;padding:6px 0}
.trail-title{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:15px;color:var(--teal-dark)}
.request-route{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;list-style:none;margin:0;padding:0}
.request-route:before{content:"";position:absolute;left:22px;right:calc((100% - 56px) / 3 - 22px);top:20px;height:4px;background:repeating-linear-gradient(90deg,var(--teal) 0 8px,transparent 8px 16px)}
.request-route li{position:relative;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.request-route b{display:grid;place-items:center;width:44px;height:44px;flex:none;border:6px solid transparent;border-image:var(--img-ui-btn) 3 fill/6px stretch}
.request-route h2{font-size:15px;margin-bottom:2px}
.request-route p{font-size:12px;color:var(--muted)}
.route-aside p{font-size:13px;color:var(--muted)}
.route-aside a{display:inline-block;font-size:13px;margin-top:6px;font-weight:600}

/* ---------- models ---------- */
.switch-warning{display:flex;align-items:center;gap:12px;padding:6px 12px}
.warning-symbol{display:grid;place-items:center;flex-shrink:0}
.switch-warning>div{flex:1;min-width:0}
.switch-warning strong{font-size:15px}
.switch-warning p{font-size:13px;color:var(--warn-text);margin-top:0}
.switch-warning>.chip{background:var(--warn-chip-bg);color:var(--warn-chip-text)}
.model-controls{display:grid;gap:10px}
.model-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 20px}
.filter-controls{display:flex;flex-wrap:wrap;gap:8px}
.filter-controls input{width:220px}
.filter-controls input,.filter-controls select{font-size:13px}
.section-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font:12px var(--mono);color:var(--muted)}
.model-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.model-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:16px 20px 20px;gap:10px}
.model-card.active:before{content:"";position:absolute;right:-4px;top:-4px;width:12px;height:12px;background:var(--red);box-shadow:-4px 4px 0 #fff}
.model-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.model-kind-label{display:inline-flex;align-items:center;gap:8px;font:700 12px var(--mono);color:var(--teal);letter-spacing:1px}
.model-kind-label:before{content:"";width:24px;height:24px;background:var(--img-pixel-icons) 0 0/720px 24px no-repeat;background-position:calc(var(--i,1) * -24px) 0}
.model-card[data-kind=chat]{--i:20}.model-card[data-kind=image]{--i:21}.model-card[data-kind=video]{--i:22}.model-card[data-kind=audio]{--i:23}
.model-card[data-kind="3d"]{--i:24}.model-card[data-kind=embedding]{--i:7}.model-card[data-kind=component],.model-card[data-kind=unknown]{--i:1}
.model-card h2{font-size:19px;line-height:1.4}
.model-card.active h2{color:var(--teal-dark);text-shadow:2px 2px 0 var(--emboss-2)}
.model-context,.model-slot-summary,.model-reason,.model-identity{font-size:12px;color:var(--muted);line-height:1.7}
.model-slot-summary{color:var(--teal-dark)}
.model-card-footer{margin-top:auto;padding-top:12px;border-top:2px dashed var(--line)}
.model-card-footer>span{display:block;font-size:12px;color:var(--muted);margin-bottom:10px}
.model-actions{display:flex;flex-wrap:wrap;gap:8px}
.model-actions .button{flex:1}
.empty-state{text-align:center;padding:92px 24px 30px;background:var(--img-pixel-koi) center 22px/120px auto no-repeat;color:var(--muted);grid-column:1/-1}

/* ---------- guide: a quest log ---------- */
.guide-intro{display:flex;align-items:end;flex-wrap:wrap;gap:12px 20px;padding:10px 14px}
.guide-intro label{font-weight:700;font-size:13px}
.guide-intro select{display:block;margin-top:6px;min-width:240px;font-weight:400}
.guide-intro .state-chip{margin-bottom:12px}
.guide-intro .button{margin-left:auto}
.quest-log{position:relative;display:grid;gap:24px;padding-left:64px}
.quest-log:before{content:"";position:absolute;left:24px;top:30px;bottom:30px;width:4px;background:repeating-linear-gradient(180deg,var(--teal) 0 8px,transparent 8px 16px)}
.guide-step{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;padding:20px 24px 24px}
.step-badge{display:inline-flex;align-items:center;gap:8px;font:700 12px var(--mono);color:var(--teal);letter-spacing:1.5px}
.step-badge b{position:absolute;left:-72px;top:14px;display:grid;place-items:center;width:48px;height:48px;border:6px solid transparent;border-image:var(--img-ui-btn-primary) 3 fill/6px stretch;color:#fff;font:700 16px var(--mono)}
.guide-step-verify .step-badge b{border-image-source:var(--img-ui-btn-danger);color:var(--red)}
.guide-explanation h2{margin:6px 0 10px;font-size:20px}
.guide-explanation p{margin:10px 0;color:var(--muted);font-size:14px}
.guide-explanation .disclosure{margin-top:6px}
.guide-illustration{margin:0;min-width:0;padding:0;align-self:start}
.guide-illustration>figcaption{display:flex;align-items:center;gap:8px;padding:6px 12px;background:repeating-linear-gradient(0deg,var(--bar-a) 0 2px,var(--bar-b) 2px 4px);color:#fff;font-size:12px;font-weight:600}
.guide-illustration>figcaption:after{content:"";margin-left:auto;width:8px;height:8px;background:var(--red);box-shadow:-12px 0 0 #9fd0e4,-24px 0 0 #fff}
.guide-illustration>.code-block{border-width:0;max-height:none}
.guide-illustration>.config-tip{padding:8px 14px}
.guide-window,.guide-fields{padding:16px 18px;margin:0}
.guide-key-row{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.guide-key-row span{flex:1;padding:4px 10px;border:4px solid transparent;border-image:var(--img-ui-input) 2/4px stretch;background:var(--surface) padding-box}
.guide-key-row b{padding:4px 12px;border:6px solid transparent;border-image:var(--img-ui-btn-primary) 3 fill/6px stretch;color:#fff}
.guide-key-output{display:grid;gap:8px;border-top:2px dashed var(--line);padding-top:14px}
.guide-key-output code{overflow-wrap:anywhere;color:var(--teal-dark)}
.guide-key-output b{color:var(--red)}
.guide-field{display:grid;grid-template-columns:28px minmax(90px,.7fr) minmax(0,1.3fr);gap:10px;padding:10px 0;border-bottom:2px dashed var(--dash);font-size:13px;align-items:center}
.guide-field:last-child{border:0}
.guide-field dd{margin:0;overflow-wrap:anywhere;font-family:var(--mono);color:var(--teal-dark);font-weight:600}
.guide-field dt{overflow-wrap:anywhere}
.guide-number{display:grid;place-items:center;width:24px;height:20px;background:var(--accent-bg);color:#fff;font:700 11px var(--mono)}
.harness-model-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:12px;border-bottom:2px dashed var(--line)}
.harness-model-heading code{overflow-wrap:anywhere;font-weight:600}
.harness-model-heading>span{font-size:22px;color:var(--teal)}
.harness-model-diagram>.muted{margin:12px 0;font-size:13px}
.harness-input-diagram{display:grid;gap:12px;font-size:13px}
.harness-input-diagram>div{display:flex;flex-wrap:wrap;gap:20px}
.harness-checked{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.harness-checked b{display:grid;place-items:center;width:24px;height:24px;background:var(--accent-bg);color:white;box-shadow:inset -3px -3px 0 var(--teal-dark)}
.harness-save-diagram{margin-top:16px;padding-top:12px;border-top:2px dashed var(--line);color:var(--teal);font-size:14px;font-weight:600}
.guide-checks{padding-left:0;list-style:none;color:var(--muted);font-size:14px;counter-reset:check}
.guide-checks li{position:relative;padding-left:30px;margin-bottom:10px;counter-increment:check}
.guide-checks li:before{content:counter(check);position:absolute;left:0;top:2px;display:grid;place-items:center;width:20px;height:20px;background:var(--teal-soft);color:var(--teal-dark);font:700 11px var(--mono);box-shadow:2px 2px 0 var(--line)}
.guide-troubleshooting h2{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:18px}
.document-guide{padding:0 16px}
.document-guide>p{font-size:13px;color:var(--muted)}

/* ---------- settings ---------- */
.settings-top{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:24px;align-items:start}
.settings-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:24px;align-items:start}
.settings-side{display:grid;gap:24px}
.api-keys-panel .window-body>.muted{font-size:13px}
.inline-form{display:flex;gap:10px;margin:16px 0 12px}
.inline-form input{flex:1}
.secret-panel{padding:14px 16px;margin:16px 0}
.secret-panel .copy-field{margin-top:10px;background:var(--surface) padding-box}
.secret-panel code{user-select:all}
.key-filters{display:flex;gap:10px;margin:0 0 6px}
.key-filters input{flex:1}
.key-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-top:2px dashed var(--line)}
.key-info{flex:1;min-width:0}
.key-info h3{display:flex;align-items:center;gap:8px;font-size:15px}
.key-info h3:before{content:"";flex:none;width:24px;height:24px;background:var(--img-pixel-icons) -72px 0/720px 24px no-repeat}
.key-row.revoked .key-info h3:before{filter:grayscale(1);opacity:.6}
.key-meta,.key-usage{font-size:12px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere;padding-left:32px}
.key-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.key-row.revoked{opacity:.75}
.quota-panel h2{font-size:18px}
.detail-list{margin:12px 0;font-size:14px}
.detail-list>div{display:flex;align-items:baseline;gap:8px;padding:6px 0}
.detail-list dt{display:flex;flex:1;align-items:baseline;gap:8px;color:var(--muted);min-width:0}
.detail-list dt:after{content:"";flex:1;min-width:12px;border-bottom:3px dotted var(--line-strong)}
.detail-list dd{margin:0;text-align:right;font:700 13px var(--mono);color:var(--teal-dark)}
.quota-panel>.muted{font-size:12px}
.profile-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:16px}
.profile-form label{margin:0;min-width:0}
.profile-form button{justify-self:start}
.field-note{display:block;font-size:12px;font-weight:400;color:var(--muted);line-height:1.7;margin-top:6px}
.nickname-entry{display:flex;align-items:center;gap:10px}
.nickname-entry input{flex:1;min-width:0}
.nickname-entry button{flex-shrink:0}
#nickname-label{margin-bottom:18px}
#nickname-label>label{margin-bottom:6px}
.settings-side form{margin-top:16px}
.password-note{font-size:12px;margin:0 0 16px}
.figure-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.figure-heading>div{display:flex;align-items:center;gap:12px}
.usage-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.usage-filters label{font-size:13px;margin:0}
.usage-filters select{display:block;margin-top:6px;font-size:13px}
.usage-custom{display:flex;flex-wrap:wrap;gap:12px}
.usage-picker{position:relative;font-size:13px}
.usage-picker>summary{padding:6px 12px;min-height:44px;color:var(--teal);font-weight:600;border:4px solid transparent;border-image:var(--img-ui-input) 2/4px stretch;background:var(--surface) padding-box}
.usage-options{position:absolute;top:100%;left:0;width:300px;max-width:calc(100vw - 40px);max-height:330px;overflow:auto;z-index:20;padding:12px 14px}
.usage-options>p{margin-bottom:10px;color:var(--muted)}
.usage-option{display:flex;align-items:flex-start;gap:10px;padding:6px 0}
.usage-option input{width:16px;height:16px;min-height:16px;margin:4px 0 0;accent-color:var(--teal)}
.usage-option span{overflow-wrap:anywhere}
.usage-totals{display:flex;flex-wrap:wrap;gap:18px 36px;border-bottom:2px dashed var(--line);padding:22px 0 18px;margin-bottom:16px}
.usage-totals>div{display:flex;gap:10px;align-items:center}
.usage-totals span:not(.pixel-num){color:var(--muted);font-size:13px}
.usage-totals strong{font:28px var(--mono);color:var(--teal-dark)}
.usage-totals .pixel-num{--s:4}
.chart-stamp,.figure-caption{font-size:12px;color:var(--muted);line-height:1.8}
.chart-stamp{margin-bottom:14px;font-family:var(--mono)}
.usage-legend{display:flex;flex-wrap:wrap;gap:10px 20px;margin-bottom:14px}
.legend-item{border:0;border-bottom:3px solid currentColor;background:none;font-size:13px;font-weight:600;text-align:left;max-width:100%;overflow-wrap:anywhere;padding:4px 0}
.muted-series{opacity:.5;text-decoration:line-through}
.usage-chart{min-width:0;padding:8px;border:8px solid transparent;border-image:var(--img-ui-frame-soft) 4 fill/8px stretch;background:none}
.usage-chart svg{display:block;width:100%;height:auto}
.chart-grid{stroke:var(--chart-grid);stroke-width:1;stroke-dasharray:3 3}
.chart-grid.vertical{stroke-dasharray:2 4}
.chart-axis{stroke:var(--text);fill:none;stroke-width:2}
.chart-tick,.chart-label,.chart-empty{fill:var(--chart-text);font:12px var(--mono)}
.chart-empty{font-size:15px}
.chart-series{fill:none;stroke:currentColor;stroke-width:2}
.chart-point{fill:currentColor}
.chart-point:hover{stroke:#fff;stroke-width:2}
.series-0{color:#056993}.series-1{color:#be493a}.series-2{color:#33806d}.series-3{color:#705b97}.series-4{color:#a06920}.series-5{color:#437cb6}
.series-6{color:#8a435d}.series-7{color:#51615d}.series-8{color:#74822d}.series-9{color:#377a7e}.series-10{color:#825b43}.series-11{color:#657a9e}
.figure-caption{margin-top:12px}
.usage-data{margin-top:14px;font-size:13px}
.usage-data summary{color:var(--teal);margin-bottom:10px;font-weight:600}
.usage-data .table-wrap{max-height:360px}
.usage-data th{min-width:170px;max-width:300px;overflow-wrap:anywhere}

/* ---------- admin ---------- */
.admin-tabs{overflow-x:auto}
.admin-tabs button{white-space:nowrap}
.admin-pane{display:grid;gap:16px}
.admin-pane>p{max-width:860px;font-size:13px;color:var(--muted);margin:0}
.admin-pane>h2,.device-section-heading{font-size:17px;margin:6px 0 0}
.request-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.request-card{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 20px}
.request-card h3{margin:8px 0}
.request-card p{font-size:13px;color:var(--muted)}
.request-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.request-name{color:var(--teal-dark)}
.users-list{display:grid;gap:20px}
.user-card{position:relative;display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,3fr);gap:14px 30px;padding:18px 22px}
.user-card-heading{min-width:0;grid-column:1;grid-row:1 / span 3}
.user-card-heading h3{color:var(--teal-dark)}
.user-card-heading p,.user-card>.muted{font-size:12px;color:var(--muted);margin-top:6px;overflow-wrap:anywhere}
.user-edit{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));align-items:end;gap:12px 14px}
.user-edit label{min-width:0;margin:0;font-size:13px;color:var(--muted)}
.user-edit input,.user-edit select{display:block;width:100%;margin-top:6px}
.user-edit>p{grid-column:1/-1;font-size:12px}
.user-edit>button{justify-self:start}
.device-edit{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.device-edit>label{flex:1 1 320px}
.user-card .request-actions p{font-size:12px;color:var(--muted)}
.checkbox-label{display:flex;align-items:center;gap:10px;font-size:13px}
.checkbox-label input{width:18px;height:18px;min-height:18px;margin:0;accent-color:var(--teal);flex-shrink:0}
.user-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:12px;align-items:end;padding:10px 14px;margin:0}
.user-filters label{margin:0;font-size:13px}
.user-filters select{width:100%;margin-top:6px}
.audit-filters{display:flex;align-items:flex-end;flex-wrap:wrap;gap:14px;padding:10px 14px}
.audit-filters label{font-size:13px;color:var(--muted)}
.audit-filters input,.audit-filters select{display:block;width:180px;margin-top:6px}
.audit-filters input[type=datetime-local]{width:220px}
.audit-table{border-collapse:collapse;min-width:680px;width:100%;text-align:left;font-size:13px}
.audit-table th{background:var(--teal-soft);color:var(--teal-dark);font-weight:700;border-bottom:3px solid var(--ink)}
.audit-table th,.audit-table td{padding:12px 14px;vertical-align:top}
.audit-table td{border-bottom:2px dashed var(--dash)}
.audit-table tbody tr:nth-child(even) td{background:var(--zebra)}
.audit-table td:last-child{max-width:400px;overflow-wrap:anywhere}
.audit-pagination{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;color:var(--muted);font-size:13px}
.audit-pagination>div{display:flex;gap:10px}
.announcement-form{padding:18px 22px;max-width:960px}
.announcement-options{display:flex;align-items:end;flex-wrap:wrap;gap:18px}
.announcement-options>label{margin:0}
.announcement-options .checkbox-label{align-self:center}
.announcement-record{display:flex;justify-content:space-between;gap:24px;padding:18px 0;border-bottom:2px dashed var(--line)}
.announcement-record>div{min-width:0}
.announcement-record h3{margin:8px 0}
.announcement-record .muted{font-size:12px;margin-top:10px}
.announcement-record .button{flex-shrink:0}

/* ---------- menus, notices, dialogs, toasts ---------- */
.account-menu{position:absolute;right:max(var(--gutter),calc((100% - var(--width))/2));top:68px;min-width:220px;padding:10px;z-index:40}
.account-menu p{border-bottom:2px dashed var(--line);padding:4px 8px 10px;font-size:12px;color:var(--muted)}
.account-menu button{display:block;width:100%;padding:10px;border:0;background:none;text-align:left;font-weight:600}
.account-menu button:hover{background:var(--teal-soft)}
.notice-panel{position:fixed;right:24px;top:84px;width:520px;max-width:calc(100vw - 32px);max-height:75dvh;display:flex;flex-direction:column;overflow:hidden;z-index:40}
.notice-toolbar{padding:14px 18px 10px;border-bottom:2px dashed var(--line);flex:none}
.notice-toolbar .panel-top{margin-bottom:6px}
.notice-toolbar h2{display:flex;align-items:center;gap:8px}
.notice-controls{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
#notice-list{min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 18px 16px}
.notice-item{padding:16px 0;border-top:2px dashed var(--line);font-size:14px}
.notice-item:first-child{border-top:0}
.notice-item h3{margin-bottom:8px}
.notice-item time{display:block;color:var(--muted);font:12px var(--mono);margin-top:8px}
.notice-item.unread{border-left:4px solid var(--teal);padding-left:12px}
.notice-item>a{display:inline-block;margin-top:8px}
.notice-item-actions{display:flex;justify-content:flex-end;margin-top:8px}
.notice-details,.audit-detail,#role-target{white-space:pre-wrap;overflow-wrap:anywhere}
.notice-details+.notice-details{margin-top:10px}
dialog{width:620px;max-width:calc(100vw - 40px);max-height:calc(100dvh - 48px);overflow:auto;padding:22px 26px 24px;color:var(--text)}
dialog::backdrop{background:#102e40aa radial-gradient(#ffffff22 1px,transparent 1.2px) 0 0/8px 8px}
dialog h2{font-size:23px;line-height:1.4;margin:10px 0 16px}
dialog h3{margin-bottom:12px}
dialog p{font-size:14px;margin-bottom:12px}
.dialog-close-form{position:absolute;top:6px;right:8px}
.dialog-close-form button{font-size:22px}
.dialog-advisory{padding:12px 14px;background:var(--teal-soft);margin:16px 0;font-size:13px;border-left:4px solid var(--teal)}
.dialog-advisory.busy{background:var(--warn-bg);color:var(--red);border-left-color:var(--red)}
.dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:12px;margin-top:22px;padding-top:16px;border-top:2px dashed var(--line)}
dialog .checkbox-label{align-items:flex-start}
dialog .checkbox-label input{margin-top:3px}
#switch-slot-settings{margin-top:20px;padding-top:20px;border-top:2px dashed var(--line)}
.switch-slot-controls>p{font-size:13px}
.switch-slot-controls details{font-size:13px;color:var(--muted);margin-top:12px}
.switch-slot-controls details>p{margin:8px 0}
.model-slot-fields{display:flex;align-items:end;flex-wrap:wrap;gap:14px}
.model-slot-fields label{flex:1 1 190px;min-width:0}
#slots-range-note,#slots-advice{font-size:13px}
.switch-slot-controls select{display:block;margin-top:6px;min-width:160px}
.form-error{color:var(--red);font-size:14px;margin:12px 0;font-weight:600}
.toast-region{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100;display:grid;gap:10px;width:max-content;max-width:calc(100vw - 32px)}
.toast{padding:6px 14px;color:var(--teal-dark);font-size:14px;font-weight:600}
.toast:before{content:"▶ ";color:var(--teal)}
.toast.error{color:var(--red);border-image-source:var(--img-ui-frame-warn)}
.toast.error:before{content:"! ";color:var(--red)}

/* ---------- sign-in: a title screen ---------- */
.auth-screen{position:relative;isolation:isolate;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,440px);grid-template-rows:auto 1fr auto;gap:28px 64px;padding:0 max(var(--gutter),calc((100% - var(--width))/2));background:var(--sky);overflow:hidden}
.auth-masthead{grid-column:1/-1;position:relative;display:flex;align-items:center;gap:16px;margin:0 calc(-1 * max(var(--gutter),calc((100% - var(--width))/2)));padding:18px max(var(--gutter),calc((100% - var(--width))/2)) 12px;background:var(--surface);border-bottom:3px solid var(--ink);font:700 13px var(--sans);color:var(--teal-dark)}
.auth-masthead img{width:116px;height:auto}
.auth-network{margin-left:auto;font:12px var(--mono);color:var(--muted)}
.auth-scene{position:absolute;left:0;right:0;bottom:34px;height:var(--scene);background:var(--img-pixel-backdrop) 0 100%/auto var(--scene) repeat-x;z-index:-1}
.auth-scene:after{content:"";position:absolute;bottom:0;left:max(var(--gutter),calc((100% - var(--width))/2 + 40px));height:100%;aspect-ratio:200/100;background:var(--img-pixel-gate) 0 100%/auto 100% no-repeat}
.auth-story{align-self:start;position:relative;padding:22px 26px 20px;margin-top:40px;max-width:600px;border:8px solid transparent;border-image:var(--img-ui-frame) 4 fill/8px stretch}
.auth-story .speaker-tag{position:absolute;left:10px;top:-24px}
.auth-story h1{font-size:44px;line-height:1.25;margin:4px 0 6px;letter-spacing:2px;text-shadow:3px 3px 0 var(--emboss),6px 6px 0 var(--emboss-2)}
.auth-lead{font-size:16px;color:var(--muted)}
.access-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:20px 0 0;padding:0}
.access-flow li{display:flex;flex-direction:column;gap:8px}
.access-flow b{display:grid;place-items:center;width:36px;height:36px;border:6px solid transparent;border-image:var(--img-ui-btn-primary) 3 fill/6px stretch;color:#fff;font:700 12px var(--mono)}
.access-flow h2{font-size:15px}
.access-flow p{font-size:12px;color:var(--muted)}
.auth-identity-help{margin-top:14px;border-top:2px dashed var(--line);border-bottom:0}
.auth-identity{margin:6px 0 0;font-size:13px}
.auth-identity>div+div{margin-top:10px}
.auth-identity dt{font-weight:700;color:var(--teal)}
.auth-identity dd{margin:2px 0;color:var(--muted)}
.auth-entry{align-self:start;margin-top:40px}
.auth-card{padding:0;width:100%}
.auth-card .window-body{padding:18px 22px 22px}
.auth-card h2{font-size:26px;text-shadow:2px 2px 0 var(--emboss-2)}
.auth-card .muted{font-size:14px}
.auth-tabs{margin:18px 0}
.auth-tabs button{flex:1;justify-content:center}
.auth-card label{font-size:14px;font-weight:700}
.auth-card input{font-weight:400}
.auth-card .button.wide{margin-top:4px}
.auth-footnote{font-size:12px;color:var(--muted);margin-top:16px}
.auth-footer{grid-column:1/-1;align-self:end;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:0 calc(-1 * max(var(--gutter),calc((100% - var(--width))/2)));padding:10px max(var(--gutter),calc((100% - var(--width))/2));background:var(--ink);color:#b9d3df;font:11px var(--mono)}
.pending-view{max-width:720px;margin:40px auto;padding:0 16px;display:grid;gap:16px}
.pending-view>h1{text-shadow:3px 3px 0 var(--emboss)}
.pending-view>p{color:var(--muted)}
.pending-view .profile-form{grid-template-columns:1fr}
.boot-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;background:var(--paper)}
.boot-screen img{width:150px}
.boot-screen p{color:var(--muted)}
.boot-pixels{display:flex;gap:6px}
.boot-pixels i{width:12px;height:12px;background:var(--line)}

/* ---------- texture and slow pixel motion ---------- */
body:before{content:"";position:fixed;inset:-96px;z-index:-1;pointer-events:none;background:var(--img-pixel-texture) 0 0/96px 96px}
@keyframes texture-drift{to{transform:translate(96px,96px)}}
@keyframes pixel-blink{50%{opacity:.2}}
@keyframes cursor-blink{50%{opacity:0}}
@keyframes cell-pulse{0%,70%{opacity:1}80%{opacity:.35}}
@keyframes boot-step{0%,100%{background:var(--line)}25%{background:var(--accent-bg)}}
@keyframes trail-flow{to{background-position:16px 0}}
@keyframes trail-flow-y{to{background-position:0 16px}}
@keyframes bob{50%{transform:translateY(3px)}}
@keyframes ride{from{transform:translateX(-40px)}to{transform:translateX(100vw)}}
@keyframes pedal{to{background-position:-60px 0}}
@keyframes pedal-night{to{background-position:-80px 0}}
@keyframes corner-glint{0%,60%{opacity:1}70%,100%{opacity:.25}}
[data-motion=on] body:before{animation:texture-drift 120s steps(48) infinite}
[data-motion=on] :is(.live-label,.nav-status) .status-dot{animation:pixel-blink 2.4s steps(1) infinite}
[data-motion=on] .workspace-hero .heading-dot{animation:cursor-blink 1.2s steps(1) infinite}
[data-motion=on] .dialog-box:after{animation:bob 1.2s steps(2) infinite}
[data-motion=on] .request-pixels .running .request-pixel{animation:cell-pulse 2.8s steps(1) infinite}
[data-motion=on] .request-pixels .running .request-pixel:nth-child(3n+1){animation-delay:-.9s}
[data-motion=on] .request-pixels .running .request-pixel:nth-child(3n+2){animation-delay:-1.8s}
[data-motion=on] .request-route:before{animation:trail-flow 1.6s steps(4) infinite}
[data-motion=on] .quest-log:before{animation:trail-flow-y 2.4s steps(4) infinite}
[data-motion=on] .ridge-rider{animation:ride 70s linear infinite,pedal .5s steps(2) infinite}
[data-motion=on] .model-card.active:before{animation:corner-glint 2s steps(1) infinite}
.boot-pixels i{animation:boot-step 1.2s steps(1) infinite}
.boot-pixels i:nth-child(2){animation-delay:.3s}.boot-pixels i:nth-child(3){animation-delay:.6s}.boot-pixels i:nth-child(4){animation-delay:.9s}
[data-motion=off] *,[data-motion=off] *:before,[data-motion=off] *:after{animation:none!important}

/* ---------- settings popover, language switch, dark-theme touches ---------- */
.pref-button{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--teal-dark);white-space:nowrap}
.pref-button[aria-expanded=true]{background:var(--teal-soft)}
.lang-toggle{font:700 12px var(--mono);letter-spacing:.5px;gap:2px;padding:6px 8px;border:6px solid transparent;border-image:var(--img-ui-btn-ghost) 3 fill/6px stretch;min-height:36px}
.lang-toggle:hover{background:none;border-image-source:var(--img-ui-btn-hover)}
.lang-toggle span{opacity:.45}
.lang-toggle .lang-sep{opacity:.35;margin:0 1px}
:root[lang=zh-CN] .lang-toggle .lang-zh,:root[lang=en] .lang-toggle .lang-en{opacity:1;color:var(--red)}
.prefs-panel{position:fixed;z-index:60;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;width:340px;max-width:calc(100vw - 24px);padding:0;border:8px solid transparent;border-image:var(--img-ui-frame) 4 fill/8px stretch;background:none}
.prefs-body{display:grid;gap:14px;padding:14px 16px 16px}
.prefs-group{display:grid;gap:6px}
.prefs-label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
.prefs-seg{flex-wrap:wrap}
.prefs-seg button{flex:1;justify-content:center;padding:0 8px;font-size:13px;min-height:36px}
.prefs-note{font-size:12px;color:var(--muted)}
.prefs-close{position:absolute;right:6px;top:4px;color:#fff;min-height:30px;padding:2px 8px}
.prefs-close:hover{background:#ffffff22}
:root[data-theme=dark] .brand img,:root[data-theme=dark] .auth-masthead img,:root[data-theme=dark] .boot-screen img{filter:brightness(1.45) saturate(1.1)}
:root[data-theme=dark] .main-nav,:root[data-theme=dark] .auth-masthead{border-bottom-color:#050d14}
:root[data-theme=dark] .topbar:before,:root[data-theme=dark] .auth-masthead:before{background:repeating-linear-gradient(90deg,#1b7aa3 0 12px,#0c3a54 12px 24px)}
:root[data-theme=dark] .scene{border-bottom-color:#050d14}
:root[data-theme=dark] .page-footer,:root[data-theme=dark] .auth-footer{background:#050d14}
:root[data-theme=dark] .scene-sign{background:#050d14;color:#f2c66a}
:root[data-theme=dark] .dialog-box h1,:root[data-theme=dark] .auth-story h1{color:#eaf4fa}
:root[data-theme=dark] .status-dot{box-shadow:2px 2px 0 #050d14}
:root[data-theme=dark] .request-pixel{box-shadow:inset -2px -2px 0 #0c3a54}
:root[data-theme=dark] .waiting .request-pixel{background:transparent}
:root[data-theme=dark] .dialog-box:after{background:#f2c66a}
:root[data-theme=dark] .online-member-detail:before{background:#7fd38b}
:root[data-theme=dark] .series-0{color:#5cc3e6}:root[data-theme=dark] .series-1{color:#f08a7e}:root[data-theme=dark] .series-2{color:#6fcfae}
:root[data-theme=dark] .series-3{color:#b39ae0}:root[data-theme=dark] .series-4{color:#f2c66a}:root[data-theme=dark] .series-5{color:#86b8f0}
:root[data-theme=dark] .series-6{color:#e08aac}:root[data-theme=dark] .series-7{color:#a9bcb8}
:root[data-theme=dark] .chart-point:hover{stroke:#0b1722}
:root[data-theme=dark] .harness-checked b{box-shadow:inset -3px -3px 0 #0c3a54}
:root[data-theme=dark] .guide-checks li:before{box-shadow:2px 2px 0 #050d14}
:root[data-theme=dark] .window-dots i{box-shadow:2px 2px 0 #050d14}
:root[data-theme=dark] dialog::backdrop{background:#020910cc radial-gradient(#ffffff14 1px,transparent 1.2px) 0 0/8px 8px}
:root[data-theme=dark][data-motion=on] .ridge-rider{animation:ride 70s linear infinite,pedal-night .5s steps(2) infinite}
:root[lang=en] body{letter-spacing:.1px}

/* ---------- responsive ---------- */
@media(max-width:1280px){
  .model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .status-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .online-panel{grid-column:1/-1}
  .online-list{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}
@media(max-width:1200px){
  .campus-label{display:none}
  .topbar-right{gap:10px}
  .model-toolbar{flex-direction:column;align-items:stretch}
  .filter-controls input{flex:1}
  .auth-screen{gap:24px 36px;grid-template-columns:minmax(0,1fr) minmax(320px,400px)}
  .auth-story h1{font-size:36px}
  .access-flow{grid-template-columns:1fr}
  .access-flow li{flex-direction:row;align-items:center}
  .dialog-box{width:min(400px,100%)}
}
@media(max-width:980px){
  :root{--scene:200px}
  .scene{flex-direction:column;align-items:stretch;padding:38px var(--gutter) calc(var(--scene) - 10px)}
  .scene:after{right:auto;left:50%;transform:translateX(-50%)}
  .dialog-box{width:100%;max-width:640px;margin-top:0}
  .status-grid{grid-template-columns:1fr 1fr}
  .model-hero{grid-column:1/-1}
  .online-panel{grid-column:auto}
  .online-list{grid-template-columns:1fr}
  .connect-body{grid-template-columns:1fr;gap:0}
  .route-panel{grid-template-columns:1fr}
  .settings-top,.settings-grid{grid-template-columns:1fr}
  .user-card{grid-template-columns:1fr}
  .user-card-heading{grid-row:auto}
  .request-list{grid-template-columns:1fr}
  .guide-step{grid-template-columns:1fr;gap:18px}
  .usage-picker{position:static}
  .usage-options{top:auto;left:18px;width:calc(100% - 36px);max-width:none}
  .auth-screen{grid-template-columns:1fr;grid-template-rows:auto auto auto auto auto;gap:22px}
  .auth-story{margin-top:30px;max-width:none}
  .auth-entry{margin-top:0}
  .auth-scene{position:relative;grid-column:1/-1;height:var(--scene);margin:0 calc(-1 * var(--gutter))}
  .auth-scene:after{left:50%;transform:translateX(-50%)}
  .access-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .access-flow li{flex-direction:column;align-items:flex-start}
}
@media(max-width:760px){
  :root{--gutter:14px}
  body{font-size:14px}
  .topbar{padding:14px 14px 8px;min-height:60px;gap:8px}
  .brand{gap:8px;font-size:16px}
  .brand img{width:78px}
  .brand strong{display:none}
  .brand-divider{height:20px}
  .topbar-right{gap:2px}
  .user-button #user-name{max-width:64px}
  .user-button>span:last-child{display:none}
  .pref-button .pref-text,.notice-text{display:none}
  .lang-toggle{padding:4px 5px}
  .nav-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:6px 10px 8px}
  .nav-inner>a{justify-content:center;font-size:13px;padding:0 4px;min-height:42px}
  .nav-inner>a .px-icon{display:none}
  .nav-status{display:none}
  #approved-content{gap:16px}
  .scene{padding:34px 14px calc(var(--scene) - 16px)}
  .dialog-box{padding:14px 16px 16px}
  .dialog-box h1{font-size:26px}
  .scene-sign{display:none}
  .heading-actions .button{flex:1}
  .action-banner{align-items:flex-start;font-size:12px;padding:2px 6px}
  .action-banner a{display:none}
  .status-grid{grid-template-columns:1fr;gap:16px}
  .panel{padding:14px 14px 16px}
  .window{padding:0}
  .window-body{padding:16px 14px 18px}
  .window-path{display:none}
  .model-hero h2{font-size:22px}
  .capacity-panel .pixel-num{--s:4}
  .connect-head{padding-bottom:14px}
  .connect-actions{width:100%}
  .connect-actions .button{flex:1}
  .copy-field code{font-size:12px}
  .code-block{font-size:12px;padding:12px 14px}
  .request-route{grid-template-columns:1fr;gap:16px}
  .request-route li{flex-direction:row;gap:12px}
  .request-route:before{left:20px;right:auto;top:22px;bottom:22px;width:4px;height:auto;background:repeating-linear-gradient(180deg,var(--teal) 0 8px,transparent 8px 16px)}
  [data-motion=on] .request-route:before{animation-name:trail-flow-y}
  .model-grid{grid-template-columns:1fr;gap:16px}
  .model-card{padding:12px 14px 16px}
  .switch-warning{flex-wrap:wrap;align-items:flex-start;padding:4px 8px}
  .switch-warning>div{min-width:calc(100% - 40px)}
  .switch-warning>.chip{margin-left:36px}
  .model-kind{width:100%;overflow-x:auto}
  .model-kind button{flex:1;justify-content:center;white-space:nowrap;padding:0 8px;font-size:13px}
  .filter-controls{width:100%}
  .filter-controls input{flex-basis:100%;width:100%}
  .filter-controls select{flex:1;min-width:96px}
  .guide-intro{align-items:stretch;gap:12px;padding:8px 10px}
  .guide-intro label,.guide-intro select{width:100%;min-width:0}
  .guide-intro .button{margin-left:0;width:100%}
  .quest-log{padding-left:0}
  .quest-log:before{display:none}
  .step-badge b{position:static;width:36px;height:36px;font-size:13px}
  .guide-step{padding:14px 14px 16px}
  .guide-field{grid-template-columns:28px minmax(0,1fr);gap:4px 10px}
  .guide-field dd{grid-column:2}
  .guide-explanation h2{font-size:19px}
  .profile-form{grid-template-columns:1fr}
  .inline-form{flex-wrap:wrap}
  .inline-form input{min-width:160px}
  .inline-form .button{flex:1}
  .key-row{flex-wrap:wrap;gap:10px}
  .key-info{flex-basis:100%}
  .key-filters{flex-wrap:wrap}
  .key-filters input{min-width:150px}
  .figure-heading{align-items:flex-start;flex-wrap:wrap}
  .usage-filters{gap:12px 10px}
  .usage-filters>label{flex:1 1 40%;min-width:0}
  .usage-filters select{width:100%}
  .usage-totals{gap:14px 24px}
  .usage-totals>div{flex:1 1 40%;flex-wrap:wrap}
  .usage-totals .pixel-num{--s:3}
  .admin-tabs{flex-wrap:wrap;overflow:visible}
  .admin-tabs button{flex:1 1 30%;justify-content:center;padding:0 6px;font-size:13px}
  .admin-tabs .px-icon{display:none}
  .user-card,.request-card{padding:14px 14px 16px}
  .request-card{flex-wrap:wrap}
  .user-edit{grid-template-columns:1fr 1fr}
  .user-edit label:first-child,.device-edit>label{grid-column:1/-1}
  .user-filters,.audit-filters{padding:8px 10px}
  .audit-filters label{width:calc(50% - 8px)}
  .audit-filters input,.audit-filters select,.audit-filters input[type=datetime-local]{width:100%;font-size:12px}
  .announcement-banner{padding:10px 12px;gap:10px}
  .announcement-form{padding:14px 16px}
  .announcement-options>*{flex:1 1 100%}
  .announcement-record{flex-direction:column}
  .page-footer{font-size:10px}
  .account-menu{right:14px;top:58px}
  .notice-panel{top:70px;right:14px}
  dialog{padding:18px 16px 20px;max-width:calc(100vw - 24px)}
  dialog h2{font-size:21px}
  .auth-masthead{gap:10px;font-size:12px;padding:16px 14px 10px}
  .auth-masthead img{width:92px}
  .auth-product,.auth-network{display:none}
  .auth-story{padding:16px 16px 14px}
  .auth-story h1{font-size:30px}
  .auth-lead{font-size:14px}
  .auth-story .access-flow,.auth-identity-help{display:none}
  .auth-card .window-body{padding:14px 16px 18px}
  .auth-card h2{font-size:23px}
  .auth-footer{font-size:10px}
}
@media(max-width:390px){
  .topbar .lang-toggle{display:none}
  .brand img{width:68px}
  .user-button #user-name{max-width:44px}
  .copy-field{flex-wrap:wrap}
  .copy-field code{flex-basis:100%}
  .copy-field .copy-button{margin-left:auto}
  .capacity-panel .pixel-num{--s:3}
}

/* Preserve the shared .view > * inline margins; use the same pixel info frame. */
.research-notice{min-width:0;margin-block:0;padding:12px 16px;color:var(--text)}
.research-notice h2{max-width:100%;margin:0 0 8px;font-size:13px;line-height:22px}
.research-notice p{font-size:14px;line-height:1.8}
.research-notice a{display:inline-block;max-width:100%;margin-top:8px;font-size:12px;overflow-wrap:anywhere}
.auth-story .research-notice{margin-block:16px}
@media(max-width:760px){.research-notice{padding:10px 12px}}