/* ================= Alvricx啤酒 v11 · 深空科技设计系统 =================
   借鉴：DataV 边框装饰 / Grafana 面板网格 / ThingsBoard 部件密度 / ECharts */
:root{
  --bg0:#04070D; --bg:#070B14; --bg2:#0A101E;
  --panel:rgba(15,23,42,.78); --panel2:rgba(19,29,51,.92); --panel-solid:#0C1424;
  --line:#1C2B4A; --line2:#2A3E63; --glass:rgba(94,168,255,.06);
  --ink:#E8F1FF; --mut:#93A7C9; --dim:#5F7396;
  --cy:#22D3EE; --cy2:#0EA5C6; --mint:#2DE1B2; --blue:#5EA8FF; --violet:#A78BFA;
  --amber:#FFB454; --red:#FF5C7A; --pink:#F472B6;
  --grad:linear-gradient(92deg,#22D3EE,#2DE1B2);
  --r:12px; --r-s:9px;
  --shadow:0 14px 34px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35);
  --num:"SFMono-Regular",ui-monospace,"Cascadia Mono",Consolas,"Roboto Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.55;
  min-height:100vh; overflow-x:hidden;
}
/* 全站背景：细网格 + 光晕（纯 CSS 生成，缓慢漂移） */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(34,211,238,.13), transparent 60%),
    radial-gradient(760px 520px at -10% 110%, rgba(45,225,178,.09), transparent 60%),
    radial-gradient(600px 400px at 55% 120%, rgba(94,168,255,.07), transparent 60%),
    linear-gradient(180deg,#070B14,#05080F);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:
    linear-gradient(rgba(94,168,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,168,255,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 0%, #000 30%, transparent 100%);
}
.bg-fx{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.bg-fx i{position:absolute; border-radius:50%; filter:blur(70px); opacity:.16}
.bg-fx i:nth-child(1){width:420px;height:420px;background:#0EA5C6;top:-140px;right:-80px;animation:drift 26s ease-in-out infinite alternate}
.bg-fx i:nth-child(2){width:340px;height:340px;background:#2DE1B2;bottom:-120px;left:-60px;animation:drift 32s ease-in-out infinite alternate-reverse}
.bg-fx i:nth-child(3){width:220px;height:220px;background:#5EA8FF;top:44%;left:56%;animation:drift 38s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-46px,34px) scale(1.12)}}
::selection{background:rgba(34,211,238,.35)}
a{color:var(--cy); text-decoration:none}
.link{color:var(--cy); cursor:pointer; font-size:13px; white-space:nowrap}
.link:hover{text-decoration:underline; text-underline-offset:3px}
.muted{color:var(--mut); font-size:12.5px}
.flex{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.spacer{flex:1}
h2#pageTitle{font-size:19px; font-weight:700; letter-spacing:.4px}

/* ---------- 表单 ---------- */
label{display:block; font-size:12px; color:var(--mut); margin:13px 0 5px; letter-spacing:.6px}
input,select,textarea{
  width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-s);
  background:#0A1322; color:var(--ink); font-size:14px; font-family:inherit; outline:none;
  transition:border-color .18s, box-shadow .18s;
}
input:focus,select:focus,textarea:focus{border-color:var(--cy2); box-shadow:0 0 0 3px rgba(34,211,238,.16)}
input::placeholder{color:var(--dim)}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2393A7C9' fill='none' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px}
input[type="checkbox"]{accent-color:var(--cy2)}
.err{display:none; margin-top:12px; padding:9px 12px; border:1px solid rgba(255,92,122,.5); background:rgba(255,92,122,.1); color:#FFB3C2; border-radius:var(--r-s); font-size:13px}
.ok-msg{display:none; margin-top:12px; padding:9px 12px; border:1px solid rgba(45,225,178,.45); background:rgba(45,225,178,.09); color:#9CF0D8; border-radius:var(--r-s); font-size:13px}
.hint{color:var(--dim); font-size:12.5px; line-height:1.8; margin-top:14px}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  padding:9px 18px; border:1px solid transparent; border-radius:var(--r-s); cursor:pointer;
  background:var(--grad); color:#03202B; font-size:14px; font-weight:700; letter-spacing:.4px;
  box-shadow:0 6px 18px rgba(14,165,198,.35), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .15s, box-shadow .15s, filter .15s; font-family:inherit; white-space:nowrap;
}
.btn:hover{filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 9px 22px rgba(14,165,198,.45)}
.btn:active{transform:translateY(0)}
.btn svg{width:15px;height:15px;flex:none}
.btn.ghost{background:rgba(94,168,255,.05); color:var(--ink); border-color:var(--line2); box-shadow:none; font-weight:600}
.btn.ghost:hover{border-color:var(--cy2); color:var(--cy); background:rgba(34,211,238,.08)}
.btn.danger{background:linear-gradient(92deg,#FF5C7A,#FF8A5C); color:#2B060D; box-shadow:0 6px 18px rgba(255,92,122,.3)}
.btn.small{padding:6px 12px; font-size:13px; border-radius:8px}
.btn:disabled{opacity:.55; cursor:wait; transform:none}
.ibtn{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; flex:none;
  border:1px solid var(--line); border-radius:9px; background:rgba(94,168,255,.05); color:var(--mut);
  cursor:pointer; transition:all .16s;
}
.ibtn:hover{color:var(--cy); border-color:var(--cy2); box-shadow:0 0 12px rgba(34,211,238,.25)}
.ibtn svg{width:18px; height:18px}

/* ---------- 登录 ---------- */
#loginView{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:26px 16px; position:relative}
#loginFx{position:fixed; inset:0; z-index:0; opacity:.85}
.login-card{
  position:relative; z-index:1; width:100%; max-width:400px; padding:34px 32px 28px;
  background:linear-gradient(180deg, rgba(19,29,51,.92), rgba(9,14,26,.96));
  border:1px solid var(--line2); border-radius:16px; box-shadow:var(--shadow);
}
.login-card::before,.login-card::after{content:""; position:absolute; width:22px; height:22px; border:2px solid var(--cy); opacity:.85}
.login-card::before{top:-2px; left:-2px; border-right:none; border-bottom:none; border-radius:16px 0 0 0}
.login-card::after{bottom:-2px; right:-2px; border-left:none; border-top:none; border-radius:0 0 16px 0}
.login-card h1{font-size:30px; font-weight:800; letter-spacing:.5px}
.login-card h1 .beer{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.login-card .sub{color:var(--mut); font-size:13px; margin-top:5px; letter-spacing:1.5px}
.login-logo{display:flex; align-items:center; gap:13px}
.login-logo .lg-mark{width:46px; height:46px; flex:none}
.tabs{display:flex; gap:8px; margin:22px 0 6px; background:#0A1322; border:1px solid var(--line); border-radius:10px; padding:4px}
.tabs button{flex:1; padding:8px; border:none; background:transparent; color:var(--mut); font-size:14px; border-radius:7px; cursor:pointer; font-family:inherit; transition:all .16s}
.tabs button.on{background:var(--grad); color:#03202B; font-weight:700}
.code-row{display:flex; gap:8px} .code-row input{flex:1} .code-row .btn{flex:none}

/* ---------- 外壳 ---------- */
#appView{display:none}
.sidebar{
  position:fixed; left:0; top:0; bottom:0; width:216px; z-index:40;
  background:linear-gradient(180deg, rgba(13,20,36,.96), rgba(7,11,20,.98));
  border-right:1px solid var(--line); padding:20px 14px; display:flex; flex-direction:column;
}
.brand{display:flex; align-items:center; gap:10px; font-size:19px; font-weight:800; letter-spacing:.4px; padding:0 6px}
.brand .beer{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.brand-mark{width:34px; height:34px; flex:none}
.brand-sub{color:var(--dim); font-size:11px; letter-spacing:3.5px; margin:7px 0 18px 50px}
.nav-list{flex:1; overflow-y:auto; scrollbar-width:thin}
.nav-group{font-size:10.5px; letter-spacing:2.6px; color:var(--dim); margin:16px 8px 7px}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:9px 11px; margin-bottom:3px; border-radius:9px;
  color:var(--mut); font-size:13.5px; cursor:pointer; border:1px solid transparent; position:relative;
  transition:all .16s; user-select:none;
}
.nav-item svg{width:17px; height:17px; flex:none; opacity:.85}
.nav-item:hover{color:var(--ink); background:rgba(94,168,255,.07); transform:translateX(2px)}
.nav-item.on{
  color:#EAFBFF; background:linear-gradient(90deg, rgba(34,211,238,.20), rgba(45,225,178,.05));
  border-color:rgba(34,211,238,.35);
}
.nav-item.on::before{content:""; position:absolute; left:-14px; top:20%; height:60%; width:3px; border-radius:2px; background:var(--grad); box-shadow:0 0 10px var(--cy)}
.nav-item.on svg{color:var(--cy); opacity:1}
.nav-item .dot{display:none}
.side-screen{margin-top:14px}
.main{margin-left:216px; padding:0 26px 44px; min-height:100vh}
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px;
  padding:15px 2px 13px; background:linear-gradient(180deg, rgba(7,11,20,.94), rgba(7,11,20,.82) 78%, transparent);
  backdrop-filter:blur(8px);
}
.topbar .flex{margin-left:auto}
.userchip{display:flex; align-items:center; gap:9px; padding:5px 12px 5px 5px; border:1px solid var(--line); border-radius:999px; background:rgba(94,168,255,.05); font-size:12.5px; color:var(--mut); white-space:nowrap}
.avatar{width:27px; height:27px; border-radius:50%; background:var(--grad); color:#03202B; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:13px; flex:none}
#pageBody{padding-top:8px}
.page-enter{animation:pageIn .38s cubic-bezier(.22,.8,.3,1) both}
@keyframes pageIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.rise{animation:riseIn .5s cubic-bezier(.22,.8,.3,1) both}
@keyframes riseIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

/* ---------- 面板 / 卡片 ---------- */
.card{
  position:relative; background:linear-gradient(180deg, rgba(21,32,56,.66), rgba(10,16,30,.86));
  border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.card::before{content:""; position:absolute; top:0; left:14px; right:14px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.45), transparent)}
.card.hoverable{transition:transform .18s, border-color .18s, box-shadow .18s}
.card.hoverable:hover{border-color:var(--line2)}
.tilt{transform-style:preserve-3d; will-change:transform}
.glare{position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .2s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(120,220,255,.14), transparent 45%)}
.tilt:hover .glare{opacity:1}
/* 科技框线（借鉴 DataV 边框装饰）：四角 L 形框 */
.frame{border-color:var(--line2)}
.frame>.cnr{position:absolute; width:15px; height:15px; border:2px solid var(--cy); opacity:.75; pointer-events:none; z-index:2}
.frame>.cnr.tl{top:-2px; left:-2px; border-right:none; border-bottom:none}
.frame>.cnr.tr{top:-2px; right:-2px; border-left:none; border-bottom:none}
.frame>.cnr.bl{bottom:-2px; left:-2px; border-right:none; border-top:none}
.frame>.cnr.br{bottom:-2px; right:-2px; border-left:none; border-top:none}
.section-title{font-size:14.5px; font-weight:700; letter-spacing:.5px; margin:20px 0 12px; display:flex; align-items:center; gap:9px}
.section-title::before{content:""; width:3.5px; height:15px; border-radius:2px; background:var(--grad); box-shadow:0 0 8px rgba(34,211,238,.6)}
.section-title .st-ic{width:17px; height:17px; color:var(--cy)}
.section-title .spacer{flex:1}
.grid{display:grid; gap:16px}
.grid.two{grid-template-columns:1fr 1fr}
.grid.kpis{grid-template-columns:repeat(5, 1fr); gap:13px}
.grid.dash-main{grid-template-columns:2.05fr 1fr}
.grid.dash-sub{grid-template-columns:1.25fr 1fr 1fr}

/* KPI 数字翻牌卡 */
.kpi{padding:15px 16px 13px; overflow:hidden}
.kpi .k-ic{position:absolute; right:12px; top:12px; width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.25); color:var(--cy)}
.kpi .k-ic svg{width:16px; height:16px}
.k-label{font-size:11.5px; color:var(--mut); letter-spacing:1.4px; margin-bottom:7px}
.k-value{font-family:var(--num); font-size:31px; font-weight:800; line-height:1.1; letter-spacing:.2px; font-variant-numeric:tabular-nums}
.k-value small{font-size:14px; color:var(--mut); font-weight:600}
.kpi.hero .k-value{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:35px}
.k-sub{color:var(--dim); font-size:12px; margin-top:5px}
.k-sub b{color:var(--mut); font-weight:600}
.delta{font-family:var(--num); font-size:11.5px; font-weight:700; color:#0B2B1E; background:var(--mint); padding:2px 8px; border-radius:99px}
.delta.down{background:var(--red); color:#2B060D}
.bar{height:6px; border-radius:99px; background:rgba(94,168,255,.13); overflow:hidden; margin-top:10px}
.bar i{display:block; height:100%; width:0; border-radius:99px; background:var(--grad); box-shadow:0 0 10px rgba(34,211,238,.5); transition:width 1s cubic-bezier(.22,.8,.3,1)}
.bar.warn i{background:linear-gradient(92deg,#FFB454,#FF8A5C); box-shadow:0 0 10px rgba(255,180,84,.5)}
.bar.bad i{background:linear-gradient(92deg,#FF5C7A,#FF8A5C); box-shadow:0 0 10px rgba(255,92,122,.5)}
.spark{margin-top:8px; display:block}
.gauge-txt{fill:var(--ink); font-weight:700; font-family:var(--num)}
.chart-line{stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.2s .2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.chart-dot{opacity:0; animation:pop .3s ease forwards}
@keyframes pop{to{opacity:1}}
.ec{width:100%; height:250px}
.ec.sm{height:196px} .ec.lg{height:290px}

/* 徽章 */
.badge{display:inline-flex; align-items:center; gap:5px; padding:2.5px 9px; border-radius:99px; font-size:11.5px; font-weight:600; border:1px solid; white-space:nowrap; line-height:1.5}
.badge::before{content:""; width:5.5px; height:5.5px; border-radius:50%; background:currentColor; flex:none}
.b-up{color:#3CE8A8; border-color:rgba(60,232,168,.4); background:rgba(60,232,168,.08)}
.b-down{color:#FF8299; border-color:rgba(255,92,122,.45); background:rgba(255,92,122,.1)}
.b-blue{color:#7CC0FF; border-color:rgba(94,168,255,.45); background:rgba(94,168,255,.1)}
.b-yellow{color:#FFD08A; border-color:rgba(255,180,84,.45); background:rgba(255,180,84,.09)}
.b-gray{color:#9DB2CE; border-color:rgba(147,167,201,.35); background:rgba(147,167,201,.07)}
.b-pink{color:#F9A8D4; border-color:rgba(244,114,182,.4); background:rgba(244,114,182,.08)}

/* 表格 */
.tbl{overflow-x:auto; border-radius:8px; scrollbar-width:thin}
table{width:100%; border-collapse:collapse; font-size:13px}
th{ text-align:left; padding:8px 10px; color:var(--dim); font-size:11px; letter-spacing:1.6px; font-weight:600;
  border-bottom:1px solid var(--line2); white-space:nowrap; background:rgba(94,168,255,.04)}
td{padding:8.5px 10px; border-bottom:1px solid rgba(28,43,74,.6); color:#C9D8F2; vertical-align:middle}
tbody tr, table>tr{transition:background .14s}
tr:hover td{background:rgba(34,211,238,.045)}
td .num, .num{font-family:var(--num); font-variant-numeric:tabular-nums}
.legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; font-size:12px; color:var(--mut)}
.legend i{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px}

/* 页签 */
.pill-tabs{display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.pill-tabs button{
  padding:7px 15px; border-radius:99px; border:1px solid var(--line); background:rgba(94,168,255,.04);
  color:var(--mut); font-size:13px; cursor:pointer; font-family:inherit; transition:all .16s}
.pill-tabs button:hover{color:var(--ink); border-color:var(--line2)}
.pill-tabs button.on{background:var(--grad); color:#03202B; border-color:transparent; font-weight:700; box-shadow:0 4px 14px rgba(14,165,198,.35)}

/* 条目卡片（v11：高密度 + 线性图标 + 状态） */
.icards{display:grid; grid-template-columns:repeat(auto-fill, minmax(295px, 1fr)); gap:13px}
.icard{padding:14px 15px}
.ic-top{display:flex; gap:12px; align-items:flex-start}
.ic-name{min-width:0; flex:1}
.ic-name b{font-size:14.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ic-meta{color:var(--dim); font-size:11.5px; margin-top:2.5px; font-family:var(--num)}
.ic-badges{display:flex; gap:6px; flex-wrap:wrap; margin-top:9px}
.ic-chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:9px}
.chip{font-size:11px; color:var(--mut); border:1px solid var(--line); background:rgba(94,168,255,.05); padding:2.5px 8px; border-radius:6px}
.chip b{color:var(--ink); font-weight:600}
.ic-prog{margin-top:11px}
.ic-prog .flex{justify-content:space-between; font-size:11.5px; color:var(--mut)}
.ic-qty{font-family:var(--num); font-size:12px; color:var(--mut); margin-top:9px}
.ic-qty b{color:var(--ink); font-size:15px}
.ic-acts{display:flex; gap:7px; margin-top:12px; padding-top:11px; border-top:1px dashed rgba(42,62,99,.8); flex-wrap:wrap}
.summary-strip{display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:11px; margin-bottom:14px}
.sum-cell{padding:11px 14px; border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(180deg, rgba(21,32,56,.55), rgba(10,16,30,.8))}
.sum-cell .s-l{font-size:11px; color:var(--dim); letter-spacing:1.2px}
.sum-cell .s-v{font-family:var(--num); font-size:21px; font-weight:800; margin-top:2px}
.sum-cell .s-v small{font-size:12px; color:var(--mut); font-weight:600}

/* 图标瓷砖：玻璃 + 线性仪器图 + 状态点 */
.itile{position:relative; width:56px; height:56px; flex:none; border-radius:13px;
  background:linear-gradient(160deg, rgba(34,211,238,.13), rgba(10,16,30,.4));
  border:1px solid var(--line2); display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 4px 12px rgba(0,0,0,.3)}
.itile .ic-svg{width:36px; height:36px; fill:none; stroke:var(--cy); stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round}
.itile .idot{position:absolute; top:-3.5px; right:-3.5px; width:11px; height:11px; border-radius:50%; border:2px solid #0B1220; background:#3CE8A8; box-shadow:0 0 8px rgba(60,232,168,.8)}
.itile.st-warn .idot{background:var(--amber); box-shadow:0 0 8px rgba(255,180,84,.85)}
.itile.st-bad .idot{background:var(--red); box-shadow:0 0 9px rgba(255,92,122,.9); animation:blink 1.15s ease-in-out infinite}
.itile.st-info .idot{background:var(--blue); box-shadow:0 0 8px rgba(94,168,255,.8)}
.itile.st-off .idot{background:#64748B; box-shadow:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.itile.t-violet{--c:#A78BFA}.itile.t-blue{--c:#5EA8FF}.itile.t-cyan{--c:#22D3EE}.itile.t-teal{--c:#2DD4BF}
.itile.t-amber{--c:#FFB454}.itile.t-green{--c:#3CE8A8}.itile.t-red{--c:#FF8299}.itile.t-pink{--c:#F472B6}.itile.t-slate{--c:#9DB2CE}
.itile[class*="t-"] .ic-svg{stroke:var(--c, #22D3EE)}
.itile .a-bub{animation:bub 2.6s ease-in infinite}
.itile .a-bub.d1{animation-delay:.8s}.itile .a-bub.d2{animation-delay:1.5s}
@keyframes bub{0%{transform:translateY(0); opacity:0}25%{opacity:.95}100%{transform:translateY(-7px); opacity:0}}
.itile .a-flow{stroke-dasharray:5 4; animation:flow 1.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-18}}
.itile .a-wave{animation:waveShift 3.2s ease-in-out infinite alternate}
@keyframes waveShift{from{transform:translateX(-1.6px)}to{transform:translateX(1.6px)}}
.itile .a-sway{transform-origin:24px 12px; animation:sway 3.6s ease-in-out infinite}
.itile .a-sway2{transform-origin:24px 30px; animation:sway 2.8s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(2.6deg)}}

/* 预警卡 / 动态流 */
.alarm{border:1px solid var(--line); border-left:3.5px solid var(--blue); border-radius:var(--r);
  padding:13px 16px; background:linear-gradient(180deg, rgba(21,32,56,.6), rgba(10,16,30,.85))}
.alarm.warn{border-left-color:var(--amber)} .alarm.urgent{border-left-color:var(--red)}
.feed-item{display:flex; gap:11px; padding:10px 2px; border-bottom:1px dashed rgba(42,62,99,.7)}
.feed-item:last-child{border-bottom:none}
.feed-dot{width:8px; height:8px; border-radius:50%; margin-top:6px; flex:none; background:var(--blue); box-shadow:0 0 7px currentColor}
.feed-item .f-t{font-size:13px; font-weight:600}
.feed-item .f-b{font-size:12.5px; color:var(--mut); margin-top:1px}
.feed-item .f-time{margin-left:auto; font-size:11px; color:var(--dim); font-family:var(--num); white-space:nowrap}

/* 审批 kv */
.kv-wrap{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.kv{font-size:11.5px; border:1px solid var(--line); background:rgba(94,168,255,.05); border-radius:6px; padding:2.5px 8px; color:#C9D8F2}
.kv i{font-style:normal; color:var(--dim); margin-right:5px}

/* 弹窗 / 扫码 / 提示 */
.modal-mask{position:fixed; inset:0; z-index:100; background:rgba(3,6,12,.72); backdrop-filter:blur(5px);
  display:none; align-items:flex-start; justify-content:center; padding:5vh 14px 30px; overflow-y:auto}
.modal-mask.show{display:flex}
.modal{width:100%; max-width:520px; background:linear-gradient(180deg, #131D33, #0A111F); border:1px solid var(--line2);
  border-radius:15px; padding:24px; box-shadow:var(--shadow); animation:modalIn .3s cubic-bezier(.22,.8,.3,1) both}
@keyframes modalIn{from{opacity:0; transform:translateY(16px) scale(.985)}to{opacity:1; transform:none}}
.modal h3{font-size:16.5px; margin-bottom:6px; letter-spacing:.3px}
.qr-flex{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; margin-top:6px}
.qr-box{background:#fff; padding:12px; border-radius:12px; line-height:0; position:relative; overflow:hidden; flex:none}
.qr-box::after{content:""; position:absolute; left:8px; right:8px; height:2px; top:10px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--cy), transparent); box-shadow:0 0 12px var(--cy);
  animation:scanline 2.6s ease-in-out infinite}
@keyframes scanline{0%,100%{top:8%}50%{top:90%}}
#toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%, 18px); z-index:200; max-width:92vw;
  background:linear-gradient(180deg,#16233C,#0C1526); border:1px solid var(--cy2); color:var(--ink);
  padding:11px 20px; border-radius:11px; font-size:13.5px; box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 18px rgba(34,211,238,.22);
  opacity:0; pointer-events:none; transition:all .3s cubic-bezier(.22,.8,.3,1)}
#toast.show{opacity:1; transform:translate(-50%, 0)}
.scan-frame{position:relative}
.scan-frame::before,.scan-frame::after{content:""; position:absolute; width:26px; height:26px; border:2.5px solid var(--cy); z-index:3}
.scan-frame::before{top:8px; left:8px; border-right:none; border-bottom:none; border-radius:8px 0 0 0}
.scan-frame::after{bottom:8px; right:8px; border-left:none; border-top:none; border-radius:0 0 8px 0}

/* ================= 电视大屏 HUD（v11） ================= */
#screenView{display:none; min-height:100vh; padding:20px 24px 24px; position:relative;
  background:radial-gradient(1000px 500px at 50% -8%, rgba(34,211,238,.12), transparent 60%), linear-gradient(180deg,#050A15,#03060C)}
.hud-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px}
.hud-head h1{font-size:27px; font-weight:800; letter-spacing:1.5px;
  background:linear-gradient(92deg,#EAFBFF,#7DD3FC 55%,#2DE1B2); -webkit-background-clip:text; background-clip:text; color:transparent}
.hud-sub{color:var(--mut); font-size:13px; margin-top:4px; letter-spacing:2px}
.hud-clockbox{text-align:right}
#clock{font-family:var(--num); font-size:31px; font-weight:800; color:#BFF3FF; text-shadow:0 0 18px rgba(34,211,238,.55); line-height:1.1}
.hud-btn{margin-top:7px; padding:6px 15px; border-radius:8px; border:1px solid var(--line2); background:rgba(94,168,255,.06);
  color:var(--mut); cursor:pointer; font-family:inherit; font-size:12.5px}
.hud-btn:hover{color:var(--cy); border-color:var(--cy2)}
.hud-layout{display:grid; grid-template-columns:295px 1fr 315px; gap:14px; margin-top:16px; align-items:stretch}
.hud-col{display:flex; flex-direction:column; gap:14px; min-width:0}
.hud-panel{position:relative; border:1px solid var(--line2); border-radius:13px; padding:15px 16px;
  background:linear-gradient(180deg, rgba(17,27,48,.88), rgba(7,12,22,.94)); box-shadow:0 10px 26px rgba(0,0,0,.4); overflow:hidden}
.hud-panel::before{content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.55), transparent)}
.hud-panel>.cnr{position:absolute; width:14px; height:14px; border:2px solid var(--cy); opacity:.8; z-index:2; pointer-events:none}
.hud-panel>.cnr.tl{top:-2px;left:-2px;border-right:none;border-bottom:none}
.hud-panel>.cnr.tr{top:-2px;right:-2px;border-left:none;border-bottom:none}
.hud-panel>.cnr.bl{bottom:-2px;left:-2px;border-right:none;border-top:none}
.hud-panel>.cnr.br{bottom:-2px;right:-2px;border-left:none;border-top:none}
.hud-p-title{font-size:13.5px; font-weight:700; letter-spacing:1.6px; color:#CFE8FF; display:flex; align-items:center; gap:8px; margin-bottom:11px}
.hud-p-title::before{content:""; width:3.5px; height:14px; background:var(--grad); border-radius:2px; box-shadow:0 0 8px rgba(34,211,238,.7)}
.hud-live{margin-left:auto; font-family:var(--num); font-size:10.5px; color:#3CE8A8; letter-spacing:1.5px; display:inline-flex; align-items:center; gap:6px}
.hud-live::before{content:""; width:7px; height:7px; border-radius:50%; background:#3CE8A8; box-shadow:0 0 9px #3CE8A8; animation:blink 1.6s infinite}
.hud-kpi{display:flex; justify-content:space-between; align-items:baseline; padding:9.5px 2px; border-bottom:1px dashed rgba(42,62,99,.8)}
.hud-kpi:last-child{border-bottom:none}
.hud-kpi .hk-l{font-size:12.5px; color:var(--mut); letter-spacing:1px}
.hud-kpi .hk-v{font-family:var(--num); font-size:24px; font-weight:800; color:#EAFBFF; font-variant-numeric:tabular-nums}
.hud-kpi .hk-v small{font-size:11px; color:var(--dim); margin-left:4px; font-weight:600}
.hud-kpi.hot .hk-v{color:#FFB3C2; text-shadow:0 0 14px rgba(255,92,122,.5)}
.hud-kpi .hk-v.cy{color:#8FEBFF; text-shadow:0 0 14px rgba(34,211,238,.45)}
.hud-ec{width:100%; height:168px}
.hud-ec.tall{height:196px}
#twinWrap{position:relative; height:520px; border-radius:9px; overflow:hidden;
  background:radial-gradient(700px 340px at 50% 0%, rgba(34,211,238,.07), transparent 65%)}
#twinCanvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.twin-tag{position:absolute; z-index:3; padding:4px 11px; border-radius:7px; font-size:11.5px; letter-spacing:1.2px; color:#BFF3FF;
  background:rgba(8,15,28,.78); border:1px solid rgba(34,211,238,.45); backdrop-filter:blur(3px)}
.twin-tag::after{content:""; position:absolute; left:50%; bottom:-13px; width:1px; height:12px; background:linear-gradient(180deg, rgba(34,211,238,.7), transparent)}
.twin-legend{position:absolute; left:10px; bottom:10px; z-index:3; display:flex; gap:6px; flex-wrap:wrap; max-width:88%}
.twin-legend span{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-family:var(--num); color:#CFE8FF;
  background:rgba(8,15,28,.8); border:1px solid var(--line); padding:3.5px 9px; border-radius:99px}
.twin-legend i{width:8px; height:8px; border-radius:50%; display:inline-block}
.twin-off-msg{display:none; position:absolute; inset:auto 12px 12px auto; z-index:2; color:var(--dim); font-size:12px}
.twin-off .twin-off-msg{display:block}
.hud-alarm-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:11px}
.hud-alarm{border:1px solid var(--line); border-left:3.5px solid var(--blue); border-radius:10px; padding:11px 13px;
  background:rgba(10,17,31,.75)}
.hud-alarm.warn{border-left-color:var(--amber)} .hud-alarm.urgent{border-left-color:var(--red)}
.hud-alarm b{font-size:13.5px}
.hud-alarm .ha-t{float:right; font-size:11px; color:var(--dim); font-family:var(--num)}
.hud-alarm .ha-b{font-size:12.5px; color:var(--mut); margin-top:4px; line-height:1.6; clear:both}
.hud-bottom{margin-top:14px}

/* ---------- 响应式 ---------- */
@media (max-width:1180px){
  .grid.kpis{grid-template-columns:repeat(3, 1fr)}
  .grid.dash-main,.grid.dash-sub{grid-template-columns:1fr}
  .hud-layout{grid-template-columns:1fr}
  #twinWrap{height:420px}
}
@media (max-width:900px){
  .sidebar{position:fixed; left:0; right:0; top:0; bottom:auto; width:auto; height:57px; flex-direction:row; align-items:center;
    padding:8px 12px; gap:12px; border-right:none; border-bottom:1px solid var(--line); z-index:60}
  .brand{font-size:16.5px; padding:0}
  .brand-mark{width:28px; height:28px}
  .brand-sub,.side-screen{display:none}
  .nav-list{display:flex; gap:2px; overflow-x:auto; overflow-y:hidden; flex:1; scrollbar-width:none; align-items:center}
  .nav-list::-webkit-scrollbar{display:none}
  .nav-group{display:none}
  .nav-item{white-space:nowrap; padding:7px 10px; margin:0; font-size:12.5px; gap:7px}
  .nav-item svg{width:15px; height:15px}
  .nav-item.on::before{display:none}
  .main{margin-left:0; padding:57px 13px 40px}
  .topbar{padding-top:12px}
  .userchip span#userTxt{display:none}
  .grid.two{grid-template-columns:1fr}
  .grid.kpis{grid-template-columns:repeat(2, 1fr)}
  h2#pageTitle{font-size:17px}
  .topbar .btn .bt-t{display:none}
  .topbar .btn{padding:7px 10px}
  #screenView{padding:14px 12px}
  .hud-head h1{font-size:19px}
  #clock{font-size:22px}
  #twinWrap{height:330px}
  .modal{padding:19px}
  .login-card{padding:27px 21px 23px}
  .ec{height:225px}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* v11.1 图标描边穿透 use 引用 */
.nav-item svg, .btn svg, .k-ic svg, .st-ic, svg.icn{
  fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* v11.2 环图中心覆盖层 */
.ec-wrap{position:relative}
.hud-ec{position:relative}
.ec-center{position:absolute; left:0; right:0; top:0; bottom:26px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none; padding-top:6px}
.ec-center b{font-family:var(--num); font-size:25px; line-height:1.15; color:var(--ink)}
.ec-center span{font-size:11px; color:var(--dim)}