/* ================= Alvricx啤酒 v11 · 深空科技设计系统 =================
   借鉴：DataV 边框装饰 / Grafana 面板网格 / ThingsBoard 部件密度 / ECharts */
:root{
  --bg0:#E9EDF3; --bg:#F5F6F8; --bg2:#EEF1F5;
  --panel:rgba(255,255,255,.8); --panel2:rgba(255,255,255,.94); --panel-solid:#FFFFFF;
  --line:#E4E9F1; --line2:#D2DAE6; --glass:rgba(255,255,255,.62);
  --ink:#202124; --mut:#697386; --dim:#98A2B3;
  --cy:#0A84FF; --cy2:#0071E3; --mint:#0E9F8A; --blue:#0A84FF; --violet:#7D6FE8;
  --amber:#E8930C; --red:#E5484D; --pink:#E55CA0;
  --grad:linear-gradient(92deg,#0A84FF,#00A3A1);
  --grad-soft:linear-gradient(92deg, rgba(10,132,255,.12), rgba(0,163,161,.12));
  --r:14px; --r-s:10px;
  --shadow:0 12px 32px rgba(31,45,80,.10), 0 2px 8px rgba(31,45,80,.05);
  --glass-brd:rgba(255,255,255,.75);
  --glass-sh:0 18px 44px rgba(31,45,80,.14), inset 0 1px 0 rgba(255,255,255,.9);
  --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(10,132,255,.07), transparent 60%),
    radial-gradient(760px 520px at -10% 110%, rgba(0,163,161,.055), transparent 60%),
    radial-gradient(600px 400px at 55% 120%, rgba(125,111,232,.045), transparent 60%),
    linear-gradient(180deg,#F7F8FA,#F2F4F7);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:
    linear-gradient(rgba(32,33,36,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,33,36,.032) 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(80px); opacity:.20}
.bg-fx i:nth-child(1){width:420px;height:420px;background:#7CC0FF;top:-140px;right:-80px;animation:drift 26s ease-in-out infinite alternate}
.bg-fx i:nth-child(2){width:340px;height:340px;background:#7FE3D0;bottom:-120px;left:-60px;animation:drift 32s ease-in-out infinite alternate-reverse}
.bg-fx i:nth-child(3){width:220px;height:220px;background:#B7C6FF;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(10,132,255,.22)}
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:23px; 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(--line2); border-radius:var(--r-s);
  background:#FFFFFF; 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 3.5px rgba(10,132,255,.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='%23697386' 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(180,35,24,.35); background:#FEF3F2; color:#B42318; border-radius:var(--r-s); font-size:13px}
.ok-msg{display:none; margin-top:12px; padding:9px 12px; border:1px solid rgba(6,118,71,.3); background:#ECFDF3; color:#067647; 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:#FFFFFF; font-size:14px; font-weight:700; letter-spacing:.4px;
  box-shadow:0 6px 16px rgba(10,110,220,.28), 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.07); transform:translateY(-1px); box-shadow:0 9px 20px rgba(10,110,220,.32)}
.btn:active{transform:translateY(0)}
.btn svg{width:15px;height:15px;flex:none}
.btn.ghost{background:rgba(255,255,255,.75); color:var(--ink); border-color:var(--line2); box-shadow:0 1px 3px rgba(31,45,80,.05); font-weight:600}
.btn.ghost:hover{border-color:var(--cy2); color:var(--cy2); background:#EFF6FF}
.btn.danger{background:linear-gradient(92deg,#F04438,#E8930C); color:#fff; box-shadow:0 6px 16px rgba(240,68,56,.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(--line2); border-radius:9px; background:rgba(255,255,255,.8); color:var(--mut);
  cursor:pointer; transition:all .16s;
}
.ibtn:hover{color:var(--cy2); border-color:var(--cy2); box-shadow:0 2px 10px rgba(10,132,255,.18)}
.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:rgba(255,255,255,.60);
  border:1px solid var(--glass-brd); border-radius:22px; box-shadow:var(--glass-sh);
  backdrop-filter:blur(22px) saturate(1.6); -webkit-backdrop-filter:blur(22px) saturate(1.6);
}
.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:rgba(118,130,150,.12); border:1px solid var(--line); border-radius:11px; 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:#FFFFFF; color:var(--ink); 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:rgba(255,255,255,.58);
  backdrop-filter:blur(24px) saturate(1.7); -webkit-backdrop-filter:blur(24px) saturate(1.7);
  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:12px; letter-spacing:.4px; 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(10,132,255,.06); transform:translateX(2px)}
.nav-item.on{
  color:var(--ink); background:#E9EAEE;
  border-color:transparent; font-weight:600;
}
.nav-item.on::before{display:none}
.nav-item.on svg{color:var(--ink); 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(245,246,248,.70), rgba(245,246,248,.52) 78%, transparent);
  backdrop-filter:blur(18px) saturate(1.6); -webkit-backdrop-filter:blur(18px) saturate(1.6);
}
.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(255,255,255,.8); font-size:12.5px; color:var(--mut); white-space:nowrap}
.avatar{width:27px; height:27px; border-radius:50%; background:var(--grad); color:#fff; 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:#FFFFFF;
  border:1px solid var(--line); border-radius:var(--r); padding:18px;
}
.card::before{display:none}
.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(10,132,255,.07), 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:.35; 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)}
.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(10,132,255,.09); border:1px solid rgba(10,132,255,.18); color:var(--cy2)}
.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{color:var(--ink); 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:#067647; background:#D3F8DF; padding:2px 8px; border-radius:99px}
.delta.down{background:#FECDCA; color:#B42318}
.bar{height:6px; border-radius:99px; background:rgba(31,45,80,.09); overflow:hidden; margin-top:10px}
.bar i{display:block; height:100%; width:0; border-radius:99px; background:var(--grad); transition:width 1s cubic-bezier(.22,.8,.3,1)}
.bar.warn i{background:linear-gradient(92deg,#F79009,#F97016)}
.bar.bad i{background:linear-gradient(92deg,#F04438,#F97016)}
.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:#067647; border-color:rgba(6,118,71,.32); background:#ECFDF3}
.b-down{color:#B42318; border-color:rgba(180,35,24,.3); background:#FEF3F2}
.b-blue{color:#175CD3; border-color:rgba(23,92,211,.3); background:#EFF6FF}
.b-yellow{color:#B54708; border-color:rgba(181,71,8,.32); background:#FFFAEB}
.b-gray{color:#475467; border-color:rgba(71,84,103,.3); background:#F2F4F7}
.b-pink{color:#C11574; border-color:rgba(193,21,116,.3); background:#FDF2F8}

/* 表格 */
.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:12px; letter-spacing:.2px; font-weight:600;
  border-bottom:1px solid var(--line2); white-space:nowrap; background:transparent}
td{padding:8.5px 10px; border-bottom:1px solid #EDF0F5; color:#2B3245; vertical-align:middle}
tbody tr, table>tr{transition:background .14s}
tr:hover td{background:#F5F9FF}
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(255,255,255,.85);
  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:#FFFFFF; color:var(--ink); border-color:var(--line2); font-weight:700}

/* 条目卡片（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:#F6F8FB; 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 var(--line2); 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:#FFFFFF}
.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(10,132,255,.10), rgba(255,255,255,.65));
  border:1px solid var(--line2); display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.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 #FFFFFF; background:#12B76A; box-shadow:0 1px 5px rgba(6,118,71,.45)}
.itile.st-warn .idot{background:var(--amber); box-shadow:0 1px 5px rgba(232,147,12,.5)}
.itile.st-bad .idot{background:var(--red); box-shadow:0 1px 6px rgba(229,72,77,.55); animation:blink 1.15s ease-in-out infinite}
.itile.st-info .idot{background:var(--blue); box-shadow:0 1px 5px rgba(10,132,255,.45)}
.itile.st-off .idot{background:#98A2B3; box-shadow:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.itile.t-violet{--c:#7D6FE8}.itile.t-blue{--c:#0A84FF}.itile.t-cyan{--c:#0891C7}.itile.t-teal{--c:#0E9F8A}
.itile.t-amber{--c:#E8930C}.itile.t-green{--c:#079455}.itile.t-red{--c:#E5484D}.itile.t-pink{--c:#E55CA0}.itile.t-slate{--c:#667085}
.itile[class*="t-"] .ic-svg{stroke:var(--c, #0A84FF)}
.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:#FFFFFF}
.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 var(--line2)}
.feed-item:last-child{border-bottom:none}
.feed-dot{width:8px; height:8px; border-radius:50%; margin-top:6px; flex:none; background:var(--blue)}
.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:#F6F8FB; border-radius:6px; padding:2.5px 8px; color:#2B3245}
.kv i{font-style:normal; color:var(--dim); margin-right:5px}

/* 弹窗 / 扫码 / 提示 */
.modal-mask{position:fixed; inset:0; z-index:100; background:rgba(38,48,68,.38); backdrop-filter:blur(7px) saturate(1.3); -webkit-backdrop-filter:blur(7px) saturate(1.3);
  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:rgba(255,255,255,.70); border:1px solid var(--glass-brd);
  border-radius:18px; padding:24px; box-shadow:var(--glass-sh); backdrop-filter:blur(24px) saturate(1.6); -webkit-backdrop-filter:blur(24px) saturate(1.6);
  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:rgba(255,255,255,.85); border:1px solid var(--line2); color:var(--ink);
  padding:11px 20px; border-radius:11px; font-size:13.5px; box-shadow:0 12px 30px rgba(31,45,80,.18);
  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(10,132,255,.08), transparent 60%), linear-gradient(180deg,#F2F5F9,#E9EEF5)}
.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,#123E7C,#0A84FF 55%,#00A3A1); -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:#123E7C; line-height:1.1}
.hud-btn{margin-top:7px; padding:6px 15px; border-radius:8px; border:1px solid var(--line2); background:rgba(255,255,255,.85);
  color:var(--mut); cursor:pointer; font-family:inherit; font-size:12.5px}
.hud-btn:hover{color:var(--cy2); 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(--glass-brd); border-radius:15px; padding:15px 16px;
  background:rgba(255,255,255,.66); box-shadow:0 12px 28px rgba(31,45,80,.10), inset 0 1px 0 rgba(255,255,255,.9); overflow:hidden;
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4)}
.hud-panel::before{content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(10,132,255,.4), transparent)}
.hud-panel>.cnr{position:absolute; width:14px; height:14px; border:2px solid var(--cy); opacity:.3; 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:#26334D; 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}
.hud-live{margin-left:auto; font-family:var(--num); font-size:10.5px; color:#079455; letter-spacing:1.5px; display:inline-flex; align-items:center; gap:6px}
.hud-live::before{content:""; width:7px; height:7px; border-radius:50%; background:#12B76A; animation:blink 1.6s infinite}
.hud-kpi{display:flex; justify-content:space-between; align-items:baseline; padding:9.5px 2px; border-bottom:1px dashed var(--line2)}
.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:#202124; 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:#D92D20}
.hud-kpi .hk-v.cy{color:#0071E3}
.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(10,132,255,.06), transparent 65%), #E8EEF6}
#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:#175CD3;
  background:rgba(255,255,255,.85); border:1px solid rgba(10,132,255,.35); backdrop-filter:blur(3px)}
.twin-tag::after{content:""; position:absolute; left:50%; bottom:-13px; width:1px; height:12px; background:linear-gradient(180deg, rgba(10,132,255,.5), 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:#2B3245;
  background:rgba(255,255,255,.88); 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(255,255,255,.85)}
.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:19px}
  .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)}

/* ===== v12: 全局待办强提醒 ===== */
.todo-bell{position:relative}
.todo-count{position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; padding:0 5px;
  border-radius:999px; background:#F04438; color:#fff; font-size:10.5px; font-weight:700;
  font-family:var(--num); display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px #FFFFFF, 0 4px 10px rgba(240,68,56,.4)}
#todoFloat{position:fixed; right:18px; bottom:18px; width:min(338px, calc(100vw - 24px)); z-index:940;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(240,68,56,.4); border-radius:18px; padding:14px 15px 13px;
  box-shadow:var(--glass-sh); backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5)}
.tf-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:9px}
.tf-title{display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:14.5px}
.tf-title svg{width:17px; height:17px; color:#D92D20}
.tf-n{font-family:var(--num); color:#D92D20; font-size:16px}
.tf-collapse{background:none; border:1px solid var(--line); color:var(--dim); border-radius:999px;
  padding:3px 11px; font-size:12px; cursor:pointer}
.tf-collapse:hover{color:var(--ink); border-color:var(--dim)}
.tf-item{display:flex; gap:9px; align-items:flex-start}
.tf-item b{font-size:14px; line-height:1.45}
.tf-dot{flex:none; width:9px; height:9px; border-radius:50%; margin-top:6px; background:#0A84FF}
.tf-dot.urgent, .tf-item.urgent .tf-dot{background:#F04438; box-shadow:0 0 7px rgba(240,68,56,.6)}
.tf-desc{color:var(--mut); font-size:12.5px; line-height:1.55; margin-top:2px}
.tf-due{color:#B54708; font-size:12px; margin-top:3px; font-family:var(--num)}
.tf-more{color:var(--dim); font-size:12px; margin-top:8px}
.tf-acts{display:flex; gap:8px; margin-top:12px}
#todoDot{position:fixed; right:18px; bottom:18px; width:54px; height:54px; border-radius:50%; z-index:940;
  border:1px solid rgba(240,68,56,.5); cursor:pointer; color:#D92D20;
  background:rgba(255,255,255,.78);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--glass-sh); backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5)}
#todoDot svg{width:23px; height:23px}
#todoDot .td-n{position:absolute; top:-6px; right:-6px; min-width:21px; height:21px; padding:0 6px;
  border-radius:999px; background:#F04438; color:#fff; font-size:11px; font-weight:700; font-family:var(--num);
  display:inline-flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #FFFFFF}
.todo-list{display:flex; flex-direction:column; gap:4px; max-height:52vh; overflow:auto}
.tl-row{display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:10px; border:1px solid transparent}
.tl-row:hover{background:rgba(10,132,255,.05); border-color:var(--line)}
.tl-row .tf-dot{margin-top:0}
.tl-main{flex:1; min-width:0}
.tl-main b{font-size:13.5px}
@media (max-width:760px){ #todoFloat, #todoDot{bottom:78px} }

/* ===== v12: Galaxy 模式适配组件（借鉴 uiverse-io/galaxy，MIT，按本系统规范重写） ===== */
/* 按钮：全状态（默认/悬停流光/按下/禁用/加载/成功/失败） */
.btn{transition:transform .15s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, opacity .2s}
.btn:active{transform:scale(.965)}
.btn:disabled, .btn.disabled{opacity:.45; pointer-events:none; filter:saturate(.35)}
.btn:not(.ghost){overflow:hidden}
.btn:not(.ghost)::after{content:""; position:absolute; top:0; left:-90%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
  transform:skewX(-20deg); transition:left .55s ease; pointer-events:none}
.btn:not(.ghost):hover::after{left:135%}
.btn.loading{pointer-events:none; opacity:.8}
.btn.loading::before{content:""; width:14px; height:14px; flex:none; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:gxspin .7s linear infinite}
@keyframes gxspin{to{transform:rotate(360deg)}}
.btn.done{background:linear-gradient(90deg, #12B76A, #00A3A1) !important; color:#fff !important}
.btn.fail{background:linear-gradient(90deg, #F04438, #D92D20) !important; color:#fff !important}
/* 卡片：顶部渐变线生长 + 轻抬升（Galaxy 卡片悬停模式） */
.card.hoverable, .icard{position:relative}
.card.hoverable::before, .icard::before{display:none}
.card.hoverable:hover::before, .icard:hover::before{transform:scaleX(1)}
.icard{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.icard:hover{transform:none; box-shadow:none; border-color:var(--line2)}
/* 开关：Galaxy 滑动开关模式（渐变轨道 + 弹性圆钮） */
.gx-switch{position:relative; display:inline-block; width:52px; height:28px; flex:none; cursor:pointer; vertical-align:middle}
.gx-switch input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:2; width:100%; height:100%}
.gx-track{position:absolute; inset:0; border-radius:999px; background:#E4E7EC; border:1px solid var(--line2); transition:background .3s, box-shadow .3s, border-color .3s}
.gx-knob{position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFFFFF, #EDF1F6); box-shadow:0 2px 6px rgba(31,45,80,.28);
  transition:transform .35s cubic-bezier(.4,1.6,.4,1)}
.gx-switch input:checked ~ .gx-track{background:linear-gradient(90deg, #0A84FF, #00A3A1); border-color:transparent; box-shadow:0 3px 10px rgba(10,132,255,.3)}
.gx-switch input:checked ~ .gx-track .gx-knob{transform:translateX(24px)}
.gx-switch input:focus-visible ~ .gx-track{outline:2px solid var(--cy); outline-offset:2px}
.gx-switch input:disabled ~ .gx-track{opacity:.4}
/* 输入框：聚焦渐变下边 + 校验失败态 + 错误信息 */
input:not([type=checkbox]), select, textarea{transition:border-color .2s ease, box-shadow .25s ease}
input:not([type=checkbox]):focus, select:focus, textarea:focus{border-color:rgba(10,132,255,.6) !important;
  box-shadow:inset 0 -2px 0 rgba(10,132,255,.8), 0 0 0 3.5px rgba(10,132,255,.13); outline:none}
input.invalid, select.invalid, textarea.invalid{border-color:rgba(217,45,32,.7) !important;
  box-shadow:inset 0 -2px 0 rgba(217,45,32,.85), 0 0 0 3.5px rgba(217,45,32,.12) !important}
.ferr{color:#D92D20; font-size:12px; margin-top:5px}

/* ===== v12: 大屏孪生工具条/信息卡/说明 ===== */
.twin-tools{position:absolute; top:10px; right:10px; z-index:6; display:flex; gap:8px}
#twinInfo{position:absolute; top:52px; right:10px; z-index:6; width:262px; max-width:calc(100% - 20px);
  background:rgba(255,255,255,.9);
  border:1px solid var(--glass-brd); border-radius:14px; padding:12px 14px;
  box-shadow:var(--glass-sh); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5)}
.ti-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.ti-head b{font-size:15px}
.ti-x{cursor:pointer; color:var(--dim); font-size:18px; line-height:1; padding:0 2px}
.ti-x:hover{color:#D92D20}
.ti-line{color:#2B3245; font-size:12.5px; line-height:1.65}
.twin-note{position:absolute; left:10px; top:10px; z-index:5; color:#475467;
  font-size:11px; background:rgba(255,255,255,.85); padding:3px 9px; border-radius:999px; border:1px solid var(--line2)}

/* ===== v13: 交互设计规范（令牌） ===== */
:root{
  --dur-1:120ms;  /* 快速反馈：按下/勾选 */
  --dur-2:200ms;  /* 常规交互：悬停/开关/标签 */
  --dur-3:320ms;  /* 面板展开/弹窗 */
  --dur-4:450ms;  /* 页面级转场 */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --press:.97;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}
/* 弹窗退出动画 */
.modal-mask.closing{animation:maskOut var(--dur-2) ease both}
.modal-mask.closing .modal{animation:modalOut var(--dur-2) ease both}
@keyframes maskOut{to{opacity:0}}
@keyframes modalOut{to{opacity:0; transform:translateY(10px) scale(.98)}}
/* 按钮 v2：成功勾选绘制 / 失败轻晃 / 真禁用 */
.btn .btn-check{width:16px; height:16px; flex:none}
.btn .btn-check path{stroke-dasharray:26; stroke-dashoffset:26; animation:drawCheck .38s var(--ease-out) .05s forwards}
@keyframes drawCheck{to{stroke-dashoffset:0}}
.btn.shake{animation:btnShake .3s ease}
@keyframes btnShake{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.btn[disabled]{opacity:.45; pointer-events:none; filter:saturate(.35)}
/* 勾选联动：自定义复选（审批/授权弹窗） */
.pp-head{display:flex; align-items:center; gap:9px; margin:2px 0 9px}
.pp-count{margin-left:auto; color:var(--dim); font-size:12.5px; font-family:var(--num)}
.pp-item{display:flex; align-items:center; gap:8px; cursor:pointer; padding:5px 7px; border-radius:8px; margin:0}
.pp-item:hover{background:rgba(10,132,255,.05)}
.pp-item input{position:absolute; opacity:0; width:0; height:0}
.pp-box{flex:none; width:19px; height:19px; border-radius:6px; border:1.5px solid var(--line2);
  background:#FFFFFF; display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease)}
.pp-box svg{width:12px; height:12px; color:#fff; opacity:0; transform:scale(.4); transition:opacity var(--dur-1), transform var(--dur-2) var(--ease-out)}
.pp-item input:checked ~ .pp-box{background:var(--grad); border-color:transparent; transform:scale(1.02)}
.pp-item input:checked ~ .pp-box svg{opacity:1; transform:scale(1)}
.pp-item input:focus-visible ~ .pp-box{outline:2px solid var(--cy); outline-offset:2px}
.pp-all .pp-box.indet{background:rgba(10,132,255,.18); border-color:var(--cy)}
.pp-all .pp-box.indet svg{opacity:0}
.pp-all .pp-box.indet::after{content:""; width:9px; height:2.5px; border-radius:2px; background:var(--cy)}
/* 可展开卡片（叠卡展开） */
.x-head{cursor:pointer; user-select:none}
.x-chev{display:inline-flex; color:var(--dim); transition:transform var(--dur-2) var(--ease); flex:none}
.x-chev svg{width:15px; height:15px}
.xcard.open .x-chev{transform:rotate(180deg)}
.x-body{display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows var(--dur-3) var(--ease), opacity var(--dur-2) ease}
.xcard.open .x-body{grid-template-rows:1fr; opacity:1}
.x-body > div{overflow:hidden; min-height:0}
/* 追溯时间线（SVG 连线） */
.trace-wrap{position:relative}
.trace-nodes{display:flex; flex-direction:column; gap:0}
.tnode{position:relative; padding:0 0 18px 34px}
.tnode:last-child{padding-bottom:2px}
.tnode .tdot{position:absolute; left:8px; top:14px; width:13px; height:13px; border-radius:50%;
  background:var(--panel-solid); border:2.5px solid var(--cy); z-index:2; transition:transform var(--dur-1) var(--ease), background var(--dur-1)}
.tnode:hover .tdot{transform:scale(1.25)}
.tnode.bad .tdot{border-color:var(--red)}
.tnode.ok .tdot{border-color:var(--mint)}
.tnode .tcard{background:#FFFFFF; border:1px solid var(--line); border-radius:11px; padding:11px 14px; box-shadow:0 2px 8px rgba(31,45,80,.05)}
.trace-svg{position:absolute; left:14px; top:10px; width:2px; overflow:visible; z-index:1}
.trace-svg path{stroke:rgba(10,132,255,.35); stroke-width:2; fill:none; stroke-dasharray:1; stroke-dashoffset:1}
.trace-svg.go path{animation:drawLine .8s var(--ease-out) forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}
/* 通知 v2：右上堆叠 */
#toastWrap{position:fixed; top:74px; right:16px; z-index:300; display:flex; flex-direction:column; gap:9px; max-width:min(360px, calc(100vw - 32px))}
.toastItem{background:rgba(255,255,255,.94); border:1px solid var(--line2); border-left:3.5px solid var(--cy);
  color:var(--ink); padding:11px 15px; border-radius:12px; font-size:13.5px; box-shadow:0 12px 30px rgba(31,45,80,.16);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:flex; gap:9px; align-items:flex-start; animation:toastIn var(--dur-3) var(--ease-out) both}
.toastItem.success{border-left-color:var(--mint)}
.toastItem.warn{border-left-color:var(--amber)}
.toastItem.error{border-left-color:var(--red)}
.toastItem.out{opacity:0; transform:translateX(14px); transition:all var(--dur-2) ease}
@keyframes toastIn{from{opacity:0; transform:translateX(20px)}to{opacity:1; transform:none}}
/* 骨架屏 */
.skl{border-radius:12px; background:linear-gradient(100deg, rgba(209,217,229,.55) 40%, rgba(233,238,245,.9) 50%, rgba(209,217,229,.55) 60%);
  background-size:200% 100%; animation:sklWave 1.15s linear infinite}
@keyframes sklWave{from{background-position:120% 0}to{background-position:-80% 0}}
/* 标签滑标 */
.pill-tabs{position:relative}
.tab-glider{position:absolute; top:0; left:0; height:100%; border-radius:999px; background:var(--grad);
  box-shadow:0 4px 12px rgba(10,110,220,.3); transition:left var(--dur-2) var(--ease), width var(--dur-2) var(--ease); z-index:0}
.pill-tabs.has-glider button{position:relative; z-index:1; background:transparent; border-color:transparent; box-shadow:none}
.pill-tabs.has-glider button.on{background:transparent; box-shadow:none; color:#fff}
/* 宽表横滚（卡片内） */
.card:has(> table){overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:thin}
@media (max-width:760px){ .pill-tabs{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding-bottom:2px}
  .pill-tabs button{scroll-snap-align:start; flex:none} }
/* 输入清除按钮 */
.input-clear{position:relative; display:inline-block}
.input-clear input{padding-right:30px}
.input-clear .ic-x{position:absolute; right:8px; top:50%; transform:translateY(-50%); width:19px; height:19px;
  border-radius:50%; background:rgba(105,115,134,.16); color:var(--mut); font-size:12px; line-height:19px;
  text-align:center; cursor:pointer; display:none}
.input-clear.has-val .ic-x{display:block}
.input-clear .ic-x:hover{background:rgba(240,68,56,.3); color:#fff}
/* 页面切换淡入 */
.page-enter{animation:pageIn var(--dur-3) var(--ease-out) both}
@keyframes pageIn{from{opacity:0; transform:translateY(7px)}to{opacity:1; transform:none}}
/* 大屏圆形扩散转场 */
#screenView.revealing{transition:clip-path var(--dur-4) var(--ease-out)}
.nt-body{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.alarm.open .nt-body{-webkit-line-clamp:unset}

/* ===== v15: 智能资料导入向导 ===== */
.imp-steps{display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap}
.imp-step{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--dim); font-weight:600}
.imp-step-n{width:23px; height:23px; border-radius:50%; background:#E4E7EC; color:#475467; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-family:var(--num); flex:none}
.imp-step.on{color:var(--cy2)}
.imp-step.on .imp-step-n{background:var(--grad); color:#fff}
.imp-step.done{color:var(--mut)}
.imp-step.done .imp-step-n{background:#D3F8DF; color:#067647}
.imp-step-line{flex:0 0 26px; height:1.5px; background:var(--line2); border-radius:2px}
.imp-src-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:13px}
.imp-src{border:1.5px dashed var(--line2); border-radius:16px; padding:22px 18px; text-align:center; cursor:pointer; background:rgba(255,255,255,.65); transition:all var(--dur-2) var(--ease)}
.imp-src:hover{border-color:var(--cy); background:#fff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(31,45,80,.09)}
.imp-src.over{border-color:var(--cy); background:#EFF6FF; border-style:solid}
.imp-src svg{width:30px; height:30px; color:var(--cy2); margin-bottom:9px}
.imp-src b{display:block; font-size:15.5px; margin-bottom:5px}
.imp-src span{font-size:12.5px; color:var(--mut); line-height:1.7}
.imp-grid td{padding:5px 6px}
.imp-cell{width:100%; min-width:86px; padding:6px 8px !important; font-size:13px}
tr.imp-issue td{background:#FFFBEB; color:#B54708; font-size:12px; padding:5px 10px; border-bottom:1px solid #FDE9C8}
@media (max-width:900px){ .imp-src-grid{grid-template-columns:1fr} }

/* ===== v16: taste-skill 应用规则 + 更透的苹果玻璃 ===== */
.frame>.cnr, .hud-panel>.cnr{display:none}
.kpi .k-ic{display:none}
body::after{display:none}

.trial-banner{background:#FFF7E6;border:1px solid #F5C97B;color:#7A4A00;border-radius:12px;padding:10px 14px;margin:0 0 14px;line-height:1.7}