/*
 * 可近运营控制台外壳：加载在 ui-polish.css 之后。
 * 只调整全局层级与导航容器；业务内容卡片、表单和表格由 tech-components.css 负责。
 */

:root{
  color-scheme:light;
  --bg:#eef3f8;
  --panel:#ffffff;
  --panel2:#f4f7fb;
  --text:#17283e;
  --muted:#50647d;
  --text-2:#50647d;
  --text-3:#50647d;
  --line:#d1dce8;
  --line-2:#e6edf4;
  --brand:#4989ff;
  --brand2:#256fdf;
  --brand-btn:#2264d1;
  --brand-btn-hover:#1753b6;
  --brand-text:#155db8;
  --brand-soft:#e1edff;
  --accent:#007c91;
  --ok:#087a54;
  --ok-soft:#dff7ec;
  --ok-text:#056143;
  --warn:#a65c00;
  --warn-soft:#fff1d8;
  --warn-text:#894900;
  --danger:#c83d4b;
  --danger-soft:#ffeaec;
  --danger-text:#a82d3a;
  --ctl-border:#d1dce8;
  --ctl-border-hover:#a8bdd3;
  --ctl-r:9px;
  --ctl-radius:9px;
  --ctl-pad-x:11px;
  --ctl-h:38px;
  --ctl-h-sm:34px;
  --ctl-h-touch:44px;
  --btn-bg:var(--brand-btn);
  --btn-bg-hover:var(--brand-btn-hover);
  --focus-ring:0 0 0 2px var(--panel),0 0 0 4px color-mix(in srgb,var(--brand) 62%,transparent);
  --shadow:0 1px 2px rgba(20,42,72,.05),0 10px 26px rgba(20,42,72,.055);
  --shadow-lg:0 22px 58px rgba(8,24,48,.22);
  --r:12px;
  --r-sm:8px;
  --sidebar:236px;
  --tech-rail:#0b1a2d;
  --tech-rail-raised:#10253d;
  --tech-rail-text:#d6e6f7;
  --tech-rail-muted:#8ea9c4;
  --tech-rail-line:rgba(166,209,245,.16);
  --tech-grid:rgba(32,113,169,.055);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#070d16;
  --panel:#101d2e;
  --panel2:#172a40;
  --text:#e6edf5;
  --muted:#a7bbd1;
  --text-2:#a7bbd1;
  --text-3:#7792ae;
  --line:#2b4058;
  --line-2:#22354b;
  --brand:#4989ff;
  --brand2:#65a9ff;
  --brand-btn:#2264d1;
  --brand-btn-hover:#2d73e1;
  --brand-text:#92c5ff;
  --brand-soft:#193454;
  --accent:#50dff1;
  --ok:#56d6a1;
  --ok-soft:#163b37;
  --ok-text:#7be4b8;
  --warn:#ffd080;
  --warn-soft:#443719;
  --warn-text:#ffe0a4;
  --danger:#ff8b92;
  --danger-soft:#482630;
  --danger-text:#ffabb0;
  --ctl-border:#2b4058;
  --ctl-border-hover:#476887;
  --tech-rail:#080f1a;
  --tech-rail-raised:#102237;
  --tech-rail-text:#dceaf9;
  --tech-rail-muted:#92aac4;
  --tech-rail-line:rgba(154,205,247,.15);
  --tech-grid:rgba(77,181,237,.065);
  --shadow:0 1px 2px rgba(0,0,0,.18),0 6px 18px rgba(0,0,0,.12);
  --shadow-lg:0 26px 68px rgba(0,0,0,.56);
}

html{background:var(--bg);scroll-padding-top:76px}
/* The boot placeholder has inline legacy colours; keep the first paint on-theme. */
#boot{background:var(--bg)!important;color:var(--text)!important}
#boot>div:last-child{color:var(--muted)!important}
body{
  min-width:320px;
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:radial-gradient(ellipse 60rem 26rem at 100% 0,color-mix(in srgb,var(--brand) 9%,transparent),transparent 72%),var(--bg);
  font-variant-numeric:tabular-nums;
}
button,input,select,textarea{font-family:inherit}
button{touch-action:manipulation}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{box-shadow:var(--focus-ring)}
[hidden],.hidden{display:none!important}
/* ui-system's legacy variable held a complete border declaration; ui-polish's
   later convention stores only the colour. Keep both selector families valid. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),select:not([multiple]):not([size]),textarea),
select[multiple],select[size]:not([size="1"]){border:1px solid var(--ctl-border)}

/* Sign-in keeps the app's real form and behaviour, with an understated control-room setting. */
.login-mask{
  background:
    radial-gradient(circle at 16% 16%,color-mix(in srgb,var(--brand) 17%,transparent),transparent 27rem),
    linear-gradient(135deg,color-mix(in srgb,var(--tech-rail) 94%,var(--bg)),var(--bg) 56%,color-mix(in srgb,var(--panel2) 78%,var(--bg)));
}
.login-card{
  border:1px solid color-mix(in srgb,var(--line) 88%,var(--brand));
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(18px);
}
html[data-theme="dark"] .login-mask{background:radial-gradient(ellipse at 50% 0,#15334d 0,transparent 65%),var(--bg)}
.login-card{border-top:2px solid var(--accent)}
.login-logo,.logo-mark{background:var(--brand-btn)!important;border:1px solid color-mix(in srgb,var(--accent) 52%,var(--brand-btn))}
.login-primary{background:var(--brand-btn)!important}.login-primary:hover{background:var(--brand-btn-hover)!important}
.login-field input{background:color-mix(in srgb,var(--panel2) 72%,var(--panel))}

/* Application rail */
#app{min-height:100dvh;background:transparent}
.sidebar{
  width:var(--sidebar);
  padding:22px 14px 14px;
  color:var(--tech-rail-text);
  background:linear-gradient(180deg,var(--tech-rail-raised),var(--tech-rail) 44%,color-mix(in srgb,var(--tech-rail) 92%,#030811));
  border-right:1px solid var(--tech-rail-line);
  box-shadow:8px 0 28px rgba(4,15,30,.12);
}
.logo{gap:10px;padding:4px 9px 24px}
.logo-mark{
  width:38px;height:38px;border-radius:11px;
  box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 30%,transparent)!important;
}
.logo-title{max-width:160px;color:var(--tech-rail-text);font-size:15px;font-weight:700;letter-spacing:.015em}
.logo-sub{color:var(--tech-rail-muted);font-size:11px;letter-spacing:.03em}
.space-switcher{gap:6px;margin:0 4px 15px;padding:5px;border:1px solid var(--tech-rail-line);border-radius:11px;background:rgba(4,13,25,.24)}
.space-switch{border:1px solid transparent;border-radius:7px;background:transparent;color:var(--tech-rail-muted);padding:8px 7px}
.space-switch small{color:color-mix(in srgb,var(--tech-rail-muted) 74%,transparent)}
.space-switch:hover{border-color:color-mix(in srgb,var(--brand) 65%,var(--tech-rail-line));background:rgba(112,171,232,.09);color:var(--tech-rail-text)}
.space-switch.active{border-color:color-mix(in srgb,var(--brand) 66%,#c4e7ff);background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 38%,#102b49),rgba(20,85,132,.45));color:#f3f9ff;box-shadow:inset 0 1px 0 rgba(224,246,255,.14)}
.space-switch.active small{color:#c6e2fc}
.nav{gap:3px;padding:0 2px 2px}
.nav-item{
  min-height:42px;padding:9px 11px;border:1px solid transparent;border-radius:8px;
  color:var(--tech-rail-muted);font-size:13px;letter-spacing:.01em;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.nav-item:hover{color:var(--tech-rail-text);background:rgba(123,182,237,.095);border-color:rgba(161,211,246,.08)}
.nav-item.active{color:#e9faff;background:linear-gradient(90deg,#173e59,#10283e);border-color:#295878;box-shadow:inset 3px 0 #50dff1;font-weight:700}
.nav-item.active .ico{color:#7be9f5}
.home-nav-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 21px;color:var(--tech-rail-muted)}
.home-nav-icon svg{width:19px;height:19px}
.nav-item.active .home-nav-icon{color:#7be9f5}
.nav-item.active::after{content:"";width:5px;height:5px;background:#50dff1;box-shadow:0 0 0 3px rgba(80,223,241,.12)}
.nav-item[data-ui-group-start="true"]{margin-top:13px}.nav-item[data-ui-group-start="true"]::before{left:7px;right:7px;top:-8px;border-color:var(--tech-rail-line)}
.sidebar .nav-group-label{color:var(--tech-rail-muted);font-size:12px;padding:18px 11px 7px;letter-spacing:.03em}
.nav-badge{background:var(--danger);box-shadow:0 0 0 2px var(--tech-rail)}
.side-foot{gap:6px;padding:12px 3px 0;border-color:var(--tech-rail-line)}
.side-foot .ghost{min-height:36px;padding-inline:8px;color:var(--tech-rail-muted);border-color:transparent;background:transparent}
.side-foot .ghost:hover{color:var(--tech-rail-text);border-color:var(--tech-rail-line);background:rgba(121,182,235,.08)}

/* Workspace chrome */
.main{position:relative;min-width:0;background:color-mix(in srgb,var(--bg) 88%,transparent)}
.topbar{
  min-height:72px;padding:13px clamp(18px,2.7vw,38px);
  background:color-mix(in srgb,var(--panel) 87%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--line) 90%,var(--brand));
  box-shadow:0 8px 22px rgba(7,28,53,.035);
  backdrop-filter:blur(18px) saturate(130%);
}
.crumb{font-size:20px;font-weight:700;letter-spacing:-.02em}
.top-search input{border-radius:8px;min-height:38px}
.top-right{gap:10px}.top-tools{gap:8px}.top-search input{background:color-mix(in srgb,var(--panel2) 72%,transparent)}
.top-space-status{padding:5px 10px;border:1px solid color-mix(in srgb,var(--line) 86%,var(--brand));border-radius:999px;background:color-mix(in srgb,var(--brand-soft) 52%,var(--panel));color:var(--brand-text);font-weight:650}
.avatar{width:36px;height:36px;background:var(--brand-btn);box-shadow:0 4px 12px color-mix(in srgb,var(--brand) 27%,transparent)}
.hamb{border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text)}
body[data-role-home="on"] #page-tabs:not(.hidden){display:flex;gap:5px;min-height:48px;padding:7px clamp(18px,2.7vw,38px);overflow-x:auto;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 82%,transparent);scrollbar-width:thin}
body:not([data-role-home="on"]) #page-tabs:not(.hidden){display:none}
#page-tabs>*{flex:0 0 auto}
.page-tab{min-height:36px;padding:6px 14px;border:1px solid transparent;border-radius:7px;color:var(--muted);background:transparent;font-size:13px;font-weight:600;white-space:nowrap}
.page-tab:hover{color:var(--text);background:var(--panel2)}
.page-tab.active,.page-tab[aria-selected="true"]{border-color:color-mix(in srgb,var(--accent) 30%,var(--line));background:var(--brand-soft);color:var(--brand-text);box-shadow:inset 0 -2px var(--accent)}
.view{max-width:1560px;padding:28px clamp(18px,2.7vw,38px) 58px;animation:none}

@media (max-width:1100px){
  :root{--sidebar:212px}
  .top-search input{max-width:190px}
}
@media (max-width:860px){
  .sidebar{width:min(84vw,304px);padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom));box-shadow:18px 0 52px rgba(0,0,0,.45)}
  body.side-open::after{background:rgba(2,10,20,.64);backdrop-filter:blur(2px)}
  .topbar{min-height:62px;padding-inline:16px}
  body[data-role-home="on"] #page-tabs:not(.hidden){padding-inline:16px}
  .view{padding:20px 16px calc(78px + env(safe-area-inset-bottom))}
}
@media (max-width:600px){
  .topbar{gap:9px;padding:9px 12px}
  .hamb{min-width:44px;min-height:44px}
  .crumb{font-size:17px;min-width:0}
  .top-right{gap:7px}.top-search,.top-space-status{display:none}
  .top-right .primary.sm{min-width:44px;min-height:44px;padding-inline:10px}.top-right .primary.sm span{display:none}
  .avatar{width:40px;height:40px}
  body[data-role-home="on"] #page-tabs:not(.hidden){min-height:46px;padding:6px 12px}
  .page-tab{min-height:44px;padding-inline:12px}
  .nav-item,.side-foot .ghost{min-height:44px}
  .view{padding:16px 14px calc(82px + env(safe-area-inset-bottom))}
  .login-card{border-radius:16px}
}
@media (max-width:680px){
  .page-tab,.nav-item,.side-foot .ghost,.icon-btn,.perspective select{min-height:44px}
  .icon-btn{min-width:44px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}