/* =============================================================================
   昂沣集团 · 全国开店团队分成测算系统
   设计语言：金属纯银 × 液晶质感 × 数学艺术（Instrument 仪表版）
   - 银白拉丝金属机身：多向渐变 + 束光 + 倒角镶边，取消刻度标尺
   - 深色液晶显示屏：KPI 数显窗（内嵌仪表刻度）/ 图表井 / 输入端子
   - 数值仪表化：液晶数字 + 环形仪表 + ▲▼ 变化量
   - 主背景：天光/环境光/网格/暗角/金属噪声 多层景深
   基准 1600×900 设计，全屏流体自适应
   ========================================================================== */
@font-face{
  font-family:"DSEG7 Classic";
  src:url("fonts/DSEG7Classic-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"DSEG7 Classic";
  src:url("fonts/DSEG7Classic-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* —— 银白金属 —— */
  --silver-hi:#FBFCFD;
  --silver-1:#F1F4F7;
  --silver-2:#E0E5EA;
  --silver-3:#C8CFD7;
  --silver-4:#AEB7C1;
  --silver-5:#8E98A3;
  --edge:#9FA9B5;
  --edge-lo:rgba(58,72,88,.30);
  --metal-plate:linear-gradient(180deg,#FCFDFE 0%,#EBEFF3 28%,#DAE0E7 60%,#CDD5DD 84%,#C4CCD5 100%);
  --metal-raise:linear-gradient(180deg,#FDFEFE 0%,#E8ECF1 42%,#D2D9E0 78%,#C9D1D9 100%);
  --metal-deep:linear-gradient(180deg,#C9D1D9 0%,#D8DEE5 60%,#E6EBF0 100%);
  /* —— 石墨文字 —— */
  --ink:#1F252D;
  --ink-2:#48525D;
  --ink-3:#7B8590;
  --ink-4:#9AA3AE;
  --ink-note:#57616D;   /* 解释性文字：对比度 ≥4.5:1（口径说明/KPI 副行/徽章） */
  /* —— 液晶 —— */
  --lcd-1:#0E1A20;
  --lcd-2:#0A1216;
  --lcd-3:#12222A;
  --lcd-edge:#49555F;
  --lcd-line:rgba(120,215,230,.14);
  --lc:#6FF2DF;          /* 液晶青 */
  --lc-2:#39D8C4;
  --lc-amber:#FFC65C;
  --lc-blue:#7FC1FF;
  /* —— 变化 —— */
  --pos:#0E7F4E;
  --pos-bg:#E4F6EC;
  --pos-line:#B5E3C9;
  --neg:#C0392B;
  --neg-bg:#FBEBE9;
  --neg-line:#EEC4BE;
  /* —— 字体 —— */
  --font:"PingFang SC","Microsoft YaHei","Source Han Sans SC","Noto Sans SC",system-ui,sans-serif;
  --mono:"Bahnschrift","DIN Alternate","Segoe UI",Consolas,"Courier New",monospace;
  --lcd-font:"DSEG7 Classic","Bahnschrift",Consolas,monospace;
  --radius:12px;
  --bevel:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -2px 4px rgba(70,86,104,.13),
    inset 1px 0 0 rgba(255,255,255,.5),
    inset -1px 0 0 rgba(120,135,152,.16),
    0 1px 2px rgba(58,72,88,.18),
    0 12px 26px rgba(58,72,88,.12);
  --bevel-sm:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1.5px 3px rgba(70,86,104,.12),
    0 1px 2px rgba(58,72,88,.16),
    0 7px 16px rgba(58,72,88,.10);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:var(--font);
  color:var(--ink);
  /* 多层景深：网格 → 斜向束光 → 天光 → 环境光 → 暗角 → 基底纵深 */
  background:
    linear-gradient(rgba(92,112,134,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,112,134,.07) 1px, transparent 1px),
    linear-gradient(rgba(92,112,134,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,112,134,.032) 1px, transparent 1px),
    linear-gradient(115deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 36%, rgba(126,146,170,.14) 70%, rgba(96,114,138,.26) 100%),
    radial-gradient(1250px 580px at 79% -12%, rgba(255,255,255,.98), transparent 58%),
    radial-gradient(920px 640px at -7% 110%, rgba(150,170,195,.5), transparent 62%),
    radial-gradient(780px 430px at 108% 90%, rgba(118,138,164,.34), transparent 60%),
    radial-gradient(150% 128% at 50% 38%, rgba(0,0,0,0) 60%, rgba(84,98,118,.16) 100%),
    linear-gradient(170deg,#F5F7FA 0%,#E5EAF0 28%,#D0D7DF 60%,#BBC3CD 84%,#B0B8C3 100%);
  background-size:104px 104px, 104px 104px, 26px 26px, 26px 26px, auto, auto, auto, auto, auto, auto;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
/* 金属砂感噪声层 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05;
  mix-blend-mode:multiply;
}
/* 数学符号装饰（低透明度，融入背景景深） */
body::after{
  content:"Σ";
  position:fixed; right:-3%; bottom:-15%;
  font:700 540px/1 Georgia,"Times New Roman",serif;
  color:rgba(66,88,112,.055);
  text-shadow:0 2px 0 rgba(255,255,255,.6);
  pointer-events:none; z-index:0;
}
input,select,button{font-family:inherit;}
.num,table.tbl td:not(.l){font-family:var(--mono); font-variant-numeric:tabular-nums;}

/* ============================ 骨架 ============================ */
.app{
  display:grid;
  grid-template-columns:348px minmax(0,1fr);
  grid-template-rows:62px minmax(0,1fr);
  height:100vh;
  position:relative; z-index:1;
}
/* ---------- 顶栏：拉丝银面板 ---------- */
.topbar{
  grid-column:1 / -1;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px;
  background:linear-gradient(180deg,#FAFBFC 0%,#E7EBF0 52%,#D6DCE3 100%);
  border-bottom:1px solid var(--edge);
  box-shadow:inset 0 1.5px 0 #fff, inset 0 -2px 5px rgba(70,86,104,.14), 0 3px 12px rgba(58,72,88,.2);
  position:relative; z-index:6;
}
.topbar::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.5) 0 1px, rgba(150,165,182,.09) 1px 3px);
  opacity:.6;
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2.5px;
  background:linear-gradient(90deg, var(--lc-2), var(--lc-blue) 42%, rgba(255,198,92,.85) 78%, transparent);
  opacity:.62;
}
.brand{display:flex; align-items:center; gap:14px; position:relative;}
.brand-logo{
  height:44px; width:auto; display:block; flex:0 0 auto;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 2px 4px rgba(58,72,88,.28));
  user-select:none; -webkit-user-drag:none;
}
.brand-text h1{font-size:17px; font-weight:700; letter-spacing:.5px; color:#2A313A;}
.brand-text p{font-size:11.5px; color:var(--ink-3); margin-top:3px; letter-spacing:.3px; font-family:var(--mono);}
.topbar-right{display:flex; align-items:center; gap:9px; position:relative;}

/* 金属徽章 + LED 指示灯 */
.badge{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; padding:5.5px 12px; border-radius:999px;
  border:1px solid var(--edge); color:var(--ink-2);
  background:var(--metal-raise);
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(58,72,88,.16);
  white-space:nowrap; font-family:var(--mono);
}
.badge::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:#9AA3AE;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.35);
}
.badge-ok{color:#0B6B45; border-color:#9CC9B4;}
.badge-ok::before{background:#22C55E; box-shadow:0 0 8px rgba(34,197,94,.95);}
.badge-warn{color:#A93226; border-color:#D9A9A2;}
.badge-warn::before{background:#EF4444; box-shadow:0 0 8px rgba(239,68,68,.95);}
.badge-dim{color:var(--ink-note);}

/* ============================ 左侧参数栏 ============================ */
.rail{
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;   /* P-39：滚到底不串联到相邻区域 */
  min-width:0;
  padding:14px 13px 24px;
  border-right:1px solid var(--edge);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.4) 0 1px, rgba(160,175,190,.09) 1px 3px),
    linear-gradient(180deg,#F0F3F6 0%,#DCE2E8 100%);
  scrollbar-width:thin; scrollbar-color:var(--silver-4) transparent;
  position:relative;
}
.rail::-webkit-scrollbar{width:9px;}
.rail::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#C2CAD3,#98A2AE); border-radius:8px; border:2px solid #E4E8ED;}
.rail-group{
  position:relative;
  background:var(--metal-plate);
  border:1px solid var(--edge);
  border-radius:10px;
  padding:14px 13px 12px;
  margin-bottom:11px;
  box-shadow:var(--bevel-sm);
}
.rail-group h3{
  font-size:11.5px; font-weight:700; color:var(--ink-2);
  letter-spacing:2.5px; margin-bottom:10px; font-family:var(--mono);
}
.presets{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.preset-btn{
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  padding:9px 10px; border-radius:8px; cursor:pointer;
  color:var(--ink-2); font-size:12.5px; text-align:left;
  border:1px solid var(--edge);
  background:var(--metal-raise);
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(58,72,88,.16);
  transition:box-shadow .15s ease;
}
.preset-btn em{font-style:normal; font-size:10.5px; color:var(--ink-3); font-family:var(--mono);}
.preset-btn:hover{box-shadow:inset 0 1px 0 #fff, 0 3px 8px rgba(58,72,88,.22);}
.preset-btn.active{
  color:#0A5E52;
  border-color:#5FB9AA;
  background:linear-gradient(180deg,#F2FBF9,#DDF3EE 55%,#CBE9E2);
  box-shadow:inset 0 1.5px 0 #fff, inset 0 -2px 5px rgba(30,130,115,.14), 0 0 0 2px rgba(57,216,196,.18);
}
.preset-btn.active em{color:#1F8A78;}

/* 字段：标签 + 液晶端子 */
.field{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:6px 0; font-size:12.5px; color:var(--ink-2);
}
.field span{flex:1; min-width:0;}
.field input[type="number"], .field select{
  width:102px; padding:6.5px 9px; border-radius:6px;
  border:1px solid var(--lcd-edge);
  background:linear-gradient(180deg,#101C22 0%,#0B1418 62%,#0E1A20 100%);
  color:var(--lc); font-size:13px; text-align:right;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  text-shadow:0 0 8px rgba(111,242,223,.42);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.62), inset 0 0 0 1px rgba(120,215,230,.10);
  outline:none; transition:box-shadow .15s ease;
}
.field select{width:150px; text-align:left; cursor:pointer;}
.field input:focus, .field select:focus{
  box-shadow:inset 0 2px 7px rgba(0,0,0,.62), inset 0 0 0 1px rgba(120,215,230,.32), 0 0 0 2px rgba(57,216,196,.25);
}
.field input[type=number]::-webkit-inner-spin-button{opacity:.4; filter:invert(1);}
.field i{font-style:normal; font-size:10.5px; color:var(--ink-3); min-width:42px; text-align:right; font-family:var(--mono);}
.field.range{display:block;}
.field.range > span{display:flex; justify-content:space-between; margin-bottom:8px;}
.field.range b{color:#0A6B5C; font-weight:700; font-family:var(--mono);}
/* 滑杆：金属槽 + 滚花旋钮 */
.field input[type="range"]{
  width:100%; -webkit-appearance:none; appearance:none; height:7px; border-radius:4px; outline:none;
  background:linear-gradient(180deg,#AEB7C1,#D7DDE4);
  box-shadow:inset 0 2px 4px rgba(58,72,88,.4), inset 0 -1px 0 rgba(255,255,255,.7);
}
.field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:19px; height:19px; border-radius:50%;
  background:
    repeating-linear-gradient(90deg, rgba(90,104,120,.35) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 32% 26%, #FFFFFF 0%,#E7ECF1 38%,#B6BFC9 76%,#8F99A5 100%);
  border:1px solid #7C8691;
  box-shadow:0 2px 5px rgba(40,52,66,.4), inset 0 1px 0 #fff;
  cursor:pointer;
}
.range-meta{display:flex; justify-content:space-between; margin-top:7px; font-size:11px; color:var(--ink-note); font-family:var(--mono);}
.range-meta em{font-style:normal;}
.range-meta em:nth-child(2){color:#8A6A1F; font-weight:700;}
/* 提示：琥珀提示条 */
.hint{
  margin-top:9px; font-size:11.5px; color:#8A5F10;
  background:linear-gradient(180deg,#FDF6E7,#F9EDD2);
  border:1px solid #D9BC80; border-radius:7px;
  padding:7px 10px; line-height:1.55;
  box-shadow:inset 0 1px 0 #fff;
}
.hint b{font-family:var(--mono); color:#7A4E06;}
.advanced summary{
  cursor:pointer; font-size:11.5px; color:var(--ink-2); letter-spacing:2.5px;
  list-style:none; margin-bottom:6px; user-select:none; font-family:var(--mono);
}
.advanced summary::-webkit-details-marker{display:none;}
.advanced summary::before{content:"▸ "; color:#0C8577;}
.advanced[open] summary::before{content:"▾ ";}
.rail-foot{font-size:10.5px; color:var(--ink-4); text-align:center; margin-top:6px; letter-spacing:.5px; font-family:var(--mono);}

/* ============================ 主区 ============================ */
.main{
  overflow-y:auto;
  overscroll-behavior:contain;   /* P-39：滚到底不串联到相邻区域 */
  min-width:0;
  padding:14px 18px 36px;
  scrollbar-width:thin; scrollbar-color:var(--silver-4) transparent;
  counter-reset:panel;
}
.main::-webkit-scrollbar{width:10px;}
.main::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#C2CAD3,#98A2AE); border-radius:8px; border:2px solid #E4E8ED;}

/* 公式条：液晶 + 等宽公式 */
.formula-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 14px; margin-bottom:12px;
  border-radius:8px; border:1px solid var(--lcd-edge);
  background:linear-gradient(180deg,#0F1C22 0%,#0B1418 58%,#0E1B21 100%);
  box-shadow:inset 0 2px 9px rgba(0,0,0,.6), inset 0 0 0 1px rgba(120,215,230,.10), 0 3px 9px rgba(58,72,88,.24);
  font-family:var(--mono); font-size:12px; color:#9FC9C2;
  text-shadow:0 0 8px rgba(111,242,223,.18);
  position:relative; overflow:hidden;
}
.formula-bar::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.026) 0 1px, transparent 1px 3px);
}
.formula-bar .fx{color:var(--lc); font-weight:700; text-shadow:0 0 10px rgba(111,242,223,.45);}
.formula-bar .op{color:#5E7A80;}
.formula-bar .val{color:var(--lc-amber); font-weight:700; text-shadow:0 0 10px rgba(255,198,92,.35);}
.formula-bar .div{color:#3E545C; margin:0 2px;}

/* 页签：金属按键，选中 = 点亮液晶段 */
.tabs{display:flex; gap:7px; margin-bottom:12px; flex-wrap:wrap;}
.tab{
  padding:8px 16px; border-radius:8px; cursor:pointer; font-size:13px;
  color:var(--ink-2); border:1px solid var(--edge);
  background:var(--metal-raise);
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(58,72,88,.16);
  transition:box-shadow .15s ease, color .15s ease, background-color .15s ease, border-color .15s ease;
  letter-spacing:.4px;
}
.tab:hover{color:var(--ink); box-shadow:inset 0 1px 0 #fff, 0 3px 8px rgba(58,72,88,.22);}
.tab.active{
  color:var(--lc); font-weight:700;
  border-color:var(--lcd-edge);
  background:linear-gradient(180deg,#0F1C22 0%,#0B1418 60%,#0E1B21 100%);
  text-shadow:0 0 12px rgba(111,242,223,.55);
  box-shadow:inset 0 0 16px rgba(57,216,196,.16), inset 0 2px 6px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.7);
}
.tab-panel{display:none;}
.tab-panel.active{display:block; animation:fadeUp .22s ease;}
@keyframes fadeUp{from{opacity:0; transform:translateY(5px);} to{opacity:1; transform:none;}}

/* 面板：银白金属板（倒角镶边 + 拉丝纹理） */
.panel{
  position:relative;
  background:var(--metal-plate);
  border:1px solid var(--edge);
  border-radius:var(--radius);
  padding:15px 16px 16px;
  margin-bottom:13px;
  box-shadow:var(--bevel);
}
.panel::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.45) 0 1px, rgba(150,165,182,.05) 1px 3px);
  opacity:.3;
}
.panel h2{
  font-size:13.5px; font-weight:700; letter-spacing:.6px; color:#232A33;
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  position:relative; z-index:1;
}
.panel h2::before{
  counter-increment:panel;
  content:"§" counter(panel, decimal-leading-zero);
  font-family:var(--mono); font-size:10.5px; font-weight:700; color:#5A6570;
  border:1px solid var(--edge); border-radius:4px; padding:2px 7px;
  background:linear-gradient(180deg,#F4F6F9,#DFE4EA);
  box-shadow:inset 0 1px 0 #fff;
}
.panel h2 .unit{font-size:11px; color:var(--ink-3); font-weight:400; letter-spacing:.3px; font-family:var(--mono);}
.grid-2{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:13px;}
@media (max-width:1420px){.grid-2{grid-template-columns:minmax(0,1fr);}}

/* ============================ KPI：金属卡 + 液晶数显 + 仪表 ============================ */
.kpi-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(178px,1fr));
  gap:10px; margin-bottom:13px;
}
.kpi-grid.kpi-compact{grid-template-columns:repeat(auto-fit, minmax(210px,1fr));}
.kpi{
  position:relative; overflow:hidden;
  background:var(--metal-plate);
  border:1px solid var(--edge); border-radius:11px;
  padding:11px 12px 12px;
  box-shadow:var(--bevel-sm);
}
/* 液晶数显窗：内嵌底部仪表刻度 + 扫描线 */
.kpi .k-label{
  font-size:11px; color:var(--ink-2); letter-spacing:.6px;
  display:flex; align-items:center; gap:6px;
}
.kpi .k-label::before{
  content:""; width:6px; height:6px; border-radius:2px;
  background:linear-gradient(180deg,#B9C2CC,#8E98A3);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.3);
}
.kpi .k-value{
  margin-top:8px; padding:7px 11px 14px;
  border-radius:7px; border:1px solid var(--lcd-edge);
  background:linear-gradient(180deg,#101D23 0%,#0B1418 58%,#0E1B21 100%);
  box-shadow:inset 0 3px 10px rgba(0,0,0,.68), inset 0 0 0 1px rgba(120,215,230,.10), inset 0 -1px 0 rgba(255,255,255,.05);
  display:flex; align-items:baseline; gap:6px; overflow:hidden;
  position:relative;
}
.kpi .k-value::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
}
.kpi .k-value::after{                   /* 仪表刻度（数显窗底部） */
  content:""; position:absolute; left:9px; right:9px; bottom:4px; height:5px;
  background:repeating-linear-gradient(90deg, rgba(111,242,223,.55) 0 1px, transparent 1px 9px);
  opacity:.5;
}
.kpi .k-value .digits{
  font-family:var(--lcd-font); font-weight:700;
  font-size:24px; line-height:1.05; letter-spacing:1px;
  color:var(--lc); text-shadow:0 0 15px rgba(111,242,223,.5);
  animation:lcdFlip .3s ease;
  white-space:nowrap;
}
.kpi .k-value small{
  font-size:11px; color:#7FA39C; font-weight:400; font-family:var(--mono);
  margin-left:auto; align-self:flex-end; padding-bottom:2px;
}
@keyframes lcdFlip{from{opacity:.15;} to{opacity:1;}}
.kpi .k-sub{font-size:11.5px; color:var(--ink-note); margin-top:7px; letter-spacing:.2px; line-height:1.65;}
.kpi.tone-jade .k-value .digits{color:var(--lc);}
.kpi.tone-gold .k-value .digits{color:var(--lc-amber); text-shadow:0 0 15px rgba(255,198,92,.5);}
.kpi.tone-blue .k-value .digits{color:var(--lc-blue); text-shadow:0 0 15px rgba(127,193,255,.5);}
.kpi.tone-green .k-value .digits{color:#8CF0B4; text-shadow:0 0 15px rgba(140,240,180,.5);}
.kpi.tone-red .k-value .digits{color:#FFA3A3; text-shadow:0 0 15px rgba(255,140,140,.55);}
.kpi.tone-red{border-color:#D9A9A2;}
/* 环形仪表（比率型 KPI） */
.kpi.has-gauge{padding-right:96px;}
.kpi .gauge{
  position:absolute; right:12px; top:50%; transform:translateY(-42%);
  width:66px; height:66px; z-index:2;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));
}
.kpi .gauge .gauge-txt{
  font-family:var(--mono); font-size:9.5px; font-weight:700; fill:#7FF3E0;
  paint-order:stroke; stroke:rgba(8,14,18,.9); stroke-width:2px;
}
.kpi.has-gauge .k-value small{padding-right:2px;}

/* 变化量标记 ▲▼ */
.delta{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.2px;
  border:1px solid transparent; vertical-align:1px;
}
.delta.up{color:var(--pos); background:var(--pos-bg); border-color:var(--pos-line);}
.delta.down{color:var(--neg); background:var(--neg-bg); border-color:var(--neg-line);}
.delta.pt{font-size:10px;}
/* 临时变化徽章的生命周期：到点淡出（由 app.js 定时移除） */
.delta[data-transient]{transition:opacity .35s ease;}
.delta[data-transient].fade-out{opacity:0;}

/* ============================ 关键结论 ============================ */
.insights ul{list-style:none; position:relative; z-index:1;}
.insights li{
  position:relative; padding:7px 0 7px 21px; font-size:13px;
  color:#3B454F; line-height:1.66; border-bottom:1px dashed rgba(120,136,152,.35);
}
.insights li:last-child{border-bottom:none;}
.insights li::before{
  content:""; position:absolute; left:2px; top:15px; width:9px; height:9px;
  border-radius:2px;
  background:var(--lc-2); box-shadow:0 0 9px rgba(57,216,196,.85), inset 0 1px 0 rgba(255,255,255,.5);
}
.insights li.warn::before{background:#EF4444; box-shadow:0 0 9px rgba(239,68,68,.85);}
.insights li.gold::before{background:#E0A63A; box-shadow:0 0 9px rgba(224,166,58,.85);}
.insights b{color:#11161C; font-weight:700; font-family:var(--mono); font-size:12.5px;}

/* ============================ 图表：液晶显示井 ============================ */
.chart{
  width:100%; height:330px;
  border-radius:9px; border:1px solid var(--lcd-edge);
  background:linear-gradient(180deg,#0D181D 0%,#0A1215 58%,#0D1A1F 100%);
  box-shadow:inset 0 4px 18px rgba(0,0,0,.68), inset 0 0 0 1px rgba(120,215,230,.10), 0 3px 9px rgba(58,72,88,.22);
  position:relative; overflow:hidden;
}
.chart::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.024) 0 1px, transparent 1px 3px);
}
.chart-tall{height:396px;}
.chart-mid{height:430px;}

/* ============================ 表格：银底工程表 ============================ */
.tbl-wrap{
  overflow-x:auto; border-radius:9px;
  border:1px solid var(--edge);
  background:#F3F6F9;
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(58,72,88,.1);
  position:relative; z-index:1;
}
table.tbl{width:100%; border-collapse:collapse; font-size:12.5px; min-width:640px;}
table.tbl thead th{
  position:sticky; top:0; z-index:2;
  background:linear-gradient(180deg,#F7F9FB 0%,#DEE4EA 100%);
  color:#3F4954; font-weight:700; text-align:right; letter-spacing:.4px;
  padding:9px 12px; border-bottom:1px solid var(--edge); white-space:nowrap;
  font-family:var(--mono); font-size:11.5px;
  box-shadow:inset 0 1px 0 #fff;
}
table.tbl thead th:first-child, table.tbl thead th.l{text-align:left;}
table.tbl tbody td{
  padding:8px 12px; text-align:right;
  border-bottom:1px solid rgba(120,136,152,.16);
  font-variant-numeric:tabular-nums; color:#39424C; white-space:nowrap;
}
table.tbl tbody td:first-child, table.tbl tbody td.l{text-align:left; color:#212932; font-family:var(--font);}
table.tbl tbody tr:nth-child(even){background:rgba(120,140,162,.055);}
table.tbl tbody tr:hover{background:rgba(57,216,196,.10);}
table.tbl tbody tr.total-row{background:linear-gradient(180deg,#FFF7E8,#F9EDD3);}
table.tbl tbody tr.total-row td{color:#7A5210; font-weight:700; border-bottom-color:#E3CD9C;}
table.tbl tbody tr.danger-row{background:linear-gradient(180deg,#FDEDEB,#F8E0DC);}
table.tbl tbody tr.danger-row td{color:#A93226; font-weight:700;}
.tbl .pos{color:var(--pos) !important; font-weight:700;}
.tbl .neg{color:var(--neg) !important; font-weight:700;}
.tbl .gold{color:#8A6A1F !important; font-weight:700;}
.tbl .jade{color:#0C8577 !important; font-weight:700;}

/* 科目标签：金属底 + LED 色点 */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:3px 10px; border-radius:999px; font-size:11px;
  border:1px solid var(--edge); color:#39434D;
  background:linear-gradient(180deg,#F7F9FB,#E3E8ED);
  box-shadow:inset 0 1px 0 #fff;
  letter-spacing:.3px; white-space:nowrap;
}
.chip i{
  width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:currentColor;
  box-shadow:0 0 7px currentColor, inset 0 1px 0 rgba(255,255,255,.6);
}
.chip.gold{color:#7A5210; border-color:#D9BC80; background:linear-gradient(180deg,#FDF6E7,#F6E8CB);}
.chip.gold i{background:#E0A63A; color:#E0A63A;}
.chip.jade{color:#0A6B5C; border-color:#9CCFC4;}
.chip.blue{color:#2B5F9E;}
.chip.red{color:#A93226; border-color:#D9A9A2;}

/* ============================ 按钮：镀铬金属 ============================ */
.btn{
  cursor:pointer; border-radius:8px; font-size:12.5px; letter-spacing:.4px;
  padding:8px 15px; color:#2A313A; font-weight:600;
  border:1px solid var(--edge);
  background:var(--metal-raise);
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(58,72,88,.18);
  text-shadow:0 1px 0 rgba(255,255,255,.7);
  transition:box-shadow .14s ease, color .14s ease, border-color .14s ease;
}
.btn:hover{box-shadow:inset 0 1px 0 #fff, 0 3px 9px rgba(58,72,88,.26);}
.btn:active{box-shadow:inset 0 2px 6px rgba(58,72,88,.35);}
.btn-ghost{width:100%; margin-top:9px; color:var(--ink-2);}
.btn-mini{
  margin-left:auto; padding:5px 11px; font-size:11.5px; border-radius:7px; font-weight:500;
}
.btn-mini:hover{color:#0A6B5C; border-color:#7FBFB2;}

/* 工具栏（表格排序等） */
.toolbar{
  display:flex; align-items:center; gap:8px; justify-content:flex-end;
  margin-bottom:8px; font-size:11.5px; color:var(--ink-3); font-family:var(--mono);
  position:relative; z-index:1;
}
.toolbar select{
  padding:4px 8px; border-radius:6px; font-size:11.5px; cursor:pointer;
  border:1px solid var(--edge); color:var(--ink-2); background:var(--metal-raise);
  box-shadow:inset 0 1px 0 #fff;
}

/* ============================ AI 参谋 ============================ */
.ai-actions{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:10px; position:relative; z-index:1;}
.ai-actions.ai-ask{margin-bottom:12px;}
.ai-actions .btn{display:inline-flex; align-items:center; gap:6px;}
.ai-actions input{
  flex:1; min-width:260px; padding:8px 12px; border-radius:8px;
  border:1px solid var(--lcd-edge);
  background:linear-gradient(180deg,#101C22 0%,#0B1418 62%,#0E1A20 100%);
  color:var(--lc); font-size:12.5px; font-family:var(--mono);
  text-shadow:0 0 8px rgba(111,242,223,.35);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.62), inset 0 0 0 1px rgba(120,215,230,.10);
  outline:none;
}
.ai-actions input::placeholder{color:#5E7A80; text-shadow:none;}
.ai-out{
  min-height:60px; border-radius:9px; padding:13px 15px;
  border:1px solid rgba(126,166,220,.35);
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(242,246,250,.75));
  box-shadow:inset 0 1px 0 #fff, 0 1px 3px rgba(58,72,88,.12);
  position:relative; z-index:1;
}
.ai-answer{font-size:13px; color:#2E3842; line-height:1.75;}
.ai-answer h4{
  font-size:13px; font-weight:700; color:#0A6B5C; margin:16px 0 7px;
  padding:6px 11px; border-radius:7px;
  background:linear-gradient(90deg, rgba(47,191,174,.16), rgba(47,191,174,.04));
  border:1px solid rgba(47,191,174,.35);
  letter-spacing:.3px;
}
.ai-answer h4:first-child{margin-top:0;}
.ai-answer p{margin:6px 0;}
.ai-answer b{color:#141A20; font-weight:700;}
.ai-answer ul{margin:6px 0 6px 4px; padding-left:16px;}
.ai-answer li{margin:3px 0;}
.ai-answer code{font-family:var(--mono); font-size:11.5px; background:rgba(57,216,196,.12); border-radius:4px; padding:1px 5px; color:#0A6B5C;}
.ai-pre{
  font-family:var(--mono); font-size:11.5px; line-height:1.6; color:#9FE8DA;
  background:linear-gradient(180deg,#0F1C22,#0B1418);
  border:1px solid var(--lcd-edge); border-radius:7px;
  padding:10px 12px; margin:8px 0; overflow-x:auto; white-space:pre-wrap;
  text-shadow:0 0 8px rgba(111,242,223,.2);
}
.ai-params{border:1px dashed #8FBCB2; border-radius:9px; padding:10px 12px; margin:10px 0; background:rgba(47,191,174,.06);}
.ai-params-head{font-size:11px; color:#0A6B5C; font-weight:700; letter-spacing:1px; margin-bottom:6px; font-family:var(--mono);}
.ai-params .btn-mini{margin-left:0;}
.ai-loading{padding:14px 4px; font-size:13px; color:#0A6B5C; line-height:1.9;}
.ai-loading .dim,.ai-error .dim{color:var(--ink-3); font-size:11.5px;}
.ai-error{padding:10px 4px; font-size:13px; color:#A93226; line-height:1.8;}
.ai-usage{margin-top:9px; font-size:10.5px; color:var(--ink-4); font-family:var(--mono); text-align:right;}

/* ============================ 方案对比（槽位） ============================ */
.slots{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; position:relative; z-index:1;}
.slot{
  border:1px dashed #A9B2BC; border-radius:10px; padding:12px 13px;
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(236,240,245,.55));
  box-shadow:inset 0 1px 0 #fff;
  min-height:112px;
}
.slot.has{
  border-style:solid; border-color:#8FBCB2;
  background:linear-gradient(180deg,#F6FBFA,#E4F2EE);
  box-shadow:inset 0 1.5px 0 #fff, 0 4px 12px rgba(47,191,174,.14);
}
.slot-head{font-family:var(--mono); font-size:11.5px; font-weight:700; color:#5A6570; letter-spacing:1px; margin-bottom:7px;}
.slot-sum{font-size:12px; color:var(--ink-2); line-height:1.6; min-height:42px;}
.slot-sum .dim{color:var(--ink-4);}
.slot-actions{display:flex; gap:6px; margin-top:9px;}
.slot-actions .btn-mini{margin-left:0;}
@media (max-width:1100px){.slots{grid-template-columns:minmax(0,1fr);}}

.split-strip{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px 18px;
  padding:10px 14px; margin-bottom:11px;
  border:1px solid var(--edge); border-radius:9px;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(238,242,246,.6));
  box-shadow:inset 0 1px 0 #fff;
  position:relative; z-index:1;
}
@media (max-width:1100px){.split-strip{grid-template-columns:minmax(0,1fr);}}

.note{font-size:12px; color:var(--ink-note); line-height:1.75; margin-top:9px; letter-spacing:.2px; position:relative; z-index:1;}
.spec-list{list-style:none; position:relative; z-index:1;}
.spec-list li{
  position:relative; padding:7px 0 7px 20px; font-size:12.5px; color:#3B454F; line-height:1.68;
  border-bottom:1px dashed rgba(120,136,152,.32);
}
.spec-list li:last-child{border-bottom:none;}
.spec-list li::before{
  content:""; position:absolute; left:2px; top:14px; width:7px; height:7px;
  border-radius:2px; background:linear-gradient(180deg,#B9C2CC,#8E98A3);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.25);
}
.spec-list b{color:#11161C; font-weight:700;}

@media (max-width:1280px){
  .app{grid-template-columns:316px minmax(0,1fr);}
  .kpi .k-value .digits{font-size:21px;}
}
/* 移动端：单一主滚动区（body），结果区在前、参数区在后；顶栏允许换行防水平溢出 */
@media (max-width:960px){
  body{overflow:auto; overflow-x:hidden;}
  .app{grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto 1fr; height:auto; min-height:100vh;}
  .topbar{position:sticky; top:0; flex-wrap:wrap; gap:6px 10px; height:auto; padding:10px 14px;}
  .topbar-right{flex-wrap:wrap;}
  .brand-logo{height:34px;}
  .main{overflow:visible; order:1; padding:12px 12px 30px;}
  .rail{overflow:visible; max-height:none; order:2; border-right:none; border-bottom:1px solid var(--edge);}
  .kpi-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .kpi.has-gauge{padding-right:12px;}
  .kpi .gauge{display:none;}
}

/* 动效降级：尊重系统减弱动效设置 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}