/* ============================================================
   SSW 设计令牌层 v13 — 向大厂学习（Ant/Arco/TDesign/Material/Fluent/Apple）
   原则：只新增变量，不改动 v12 已有变量名，零破坏兼容。
   ============================================================ */

:root{
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;
  --r-sm:4px; --r:6px; --r-lg:8px; --r-xl:12px; --r-full:999px;
  --blue-1:#eef3ff; --blue-2:#dbe6ff; --blue-3:#b8ccff; --blue-4:#8fadff;
  --blue-5:#6b91ff; --blue-6:#3370ff; --blue-7:#2959d6; --blue-8:#1f44ad;
  --blue-9:#163085;
  --green-1:#e8ffea; --green-6:#00b42a; --green-8:#007a1d;
  --yellow-1:#fff3e8; --yellow-6:#ff7d00; --yellow-8:#b35600;
  --red-1:#ffece8;   --red-6:#f53f3f;   --red-8:#ab2323;
  --purple-1:#f3e8ff; --purple-6:#722ed1; --purple-8:#4e1f8f;
  --n-1:#f7f8fa; --n-2:#f2f3f5; --n-3:#e5e6eb; --n-4:#c9cdd4;
  --n-5:#86909c; --n-6:#4e5969; --n-7:#1f2329;
  --sh-1:0 1px 2px rgba(0,0,0,.04), 0 1px 6px -1px rgba(0,0,0,.03);
  --sh-2:0 4px 10px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --sh-3:0 12px 32px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --dur-fast:.15s; --dur:.2s; --dur-slow:.3s;
  --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:14px;
  --fs-lg:16px; --fs-xl:20px; --fs-2xl:24px;
  --lh-tight:1.3; --lh-base:1.5; --lh-loose:1.7;
  --z-dropdown:100; --z-sticky:200; --z-modal:1000; --z-toast:2000;
  --radius:var(--r);
  /* === 边框与分割线 === */
  --border-w:1px;
  --border-w-2:2px;
  --border-w-3:3px;
  --border:var(--border-w) solid var(--n-3);
  --border-sub:var(--border-w) solid var(--n-2);

  /* === 尺寸/高度 === */
  --sz-xs:20px;   /* 小标签、微按钮 */
  --sz-sm:24px;   /* 小按钮、小输入框 */
  --sz:32px;      /* 标准按钮/输入框 */
  --sz-md:36px;   /* 中等按钮 */
  --sz-lg:44px;   /* 大按钮 */
  --sz-xl:48px;   /* 特大 */
  --sz-2xl:52px;  /* 超大 */
  --h-nav:60px;   /* 顶栏高度 */
  --h-tabbar:44px;/* tab 栏高度 */

  /* === 宽度 === */
  --w-sidebar:220px;
  --w-card-sm:140px;
  --w-card-md:200px;
  --w-card-lg:280px;
  --w-modal-sm:320px;
  --w-modal-md:480px;
  --w-modal-lg:600px;
  --w-max:1100px;

  /* === 断点 === */
  --bp-sm:480px;
  --bp-md:768px;
  --bp-lg:900px;
  --bp-xl:1100px;
  /* === 响应式 === */
  --w-sidebar-mobile:300px;
  --w-sidebar-mobile-max:320px;
  --z-sidebar:1000;
  --z-overlay:999;
  --z-topbar:100;
  --h-topbar-mobile:48px;
  --h-tabbar-mobile:52px;
  --h-bottom-safe:70px;
  --hamburger-size:24px;
  --hamburger-line-h:2px;
  --hamburger-line-w:20px;
  --hamburger-gap:5px;
  --hamburger-offset:7px;  /* 汉堡变X时的位移 */
  --shadow-sidebar:0 4px 24px rgba(0,0,0,.35);
  --blur-overlay:2px;
  --w-modal-mobile:90vw;
  --w-modal-mobile-max:320px;
  --h-trend:70px;
  --h-trend-sm:52px;
  --w-bar:10px;
  --w-bar-chart:14px;
  --w-mini-card:120px;
  --fs-vs-bar:8px;
  --shadow-bottom:0 -4px 12px rgba(0,0,0,.3);
  --ls-vs:.3px;
  --table-min-w:600px;
  --w-vs-kpi:120px;
  --w-tab-bar-offset:230px; /* 表格吸顶偏移计算 */
  --z-sticky:2;
  --fs-tab:13px;
  --shadow-sticky:0 1px 0 var(--border);
  --h-grad-stop:340px;   /* 渐变停止位置 */
  --w-scrollbar:8px;     /* 滚动条宽度 */
  --shadow-inset-top:inset 0 2px 0 rgba(51,112,255,.30);
  --translate-hover:-1px;/* hover 微位移 */
  --translate-hover-lg:-2px;   /* 大卡片 hover 位移 */
  --shadow-inset-left:inset 3px 0 0 var(--blue-6);
  --fs-stat-min:18px;
  --fs-stat-max:24px;

  /* === 字体补充 === */
  --fs-2xs:10px;
  --fs-3xl:28px;

  /* === 间距补充（细粒度） === */
  --sp-05:2px;
  --sp-12:5px;       /* 细间距 */
  --fs-icon-sm:9px;  /* 小图标/符号字号 */
  --ls-tight:.5px;    /* 紧字间距 */
  --ls-wide:var(--sp-12); /* 宽字间距 */
  --border-w-tab:2px;/* tab 激活下划线 */
  --sp-15:6px;
  --sp-9:48px;
  --sp-10:56px;
}

[data-theme="dark"]{
  --blue-1:#0d2233; --blue-2:#12314a; --blue-3:#1a4a6e; --blue-4:#2563a0;
  --blue-5:#3a82c9; --blue-6:#58a6ff; --blue-7:#7ab8ff; --blue-8:#9dcaff;
  --blue-9:#c0dcff;
  --green-1:#0d1f0d; --green-6:#3fb950; --green-8:#56d364;
  --yellow-1:#2d2000; --yellow-6:#d29922; --yellow-8:#e3b341;
  --red-1:#2d0d0d;   --red-6:#f85149;   --red-8:#ff7b72;
  --purple-1:#1f0d2d; --purple-6:#bc8cff; --purple-8:#d2a8ff;
  --n-1:#0d1117; --n-2:#161b22; --n-3:#21262d; --n-4:#30363d;
  --n-5:#6e7681; --n-6:#8b949e; --n-7:#e6edf3;
  --sh-1:0 1px 2px rgba(0,0,0,.3), 0 1px 6px -1px rgba(0,0,0,.2);
  --sh-2:0 4px 10px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.2);
  --sh-3:0 12px 32px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.3);
}

/* ===== 组件增强层（对齐真实类名） ===== */
.panel, .kpi-card, .stat-card, .quick-card, .vs-purpose-card{
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.panel:hover, .kpi-card:hover, .stat-card:hover, .quick-card:hover, .vs-purpose-card:hover{
  box-shadow:var(--sh-2);
}
.stat-card:hover, .kpi-card:hover{transform:translateY(-1px)}
button, .btn, .theme-toggle, .refresh-btn{
  border-radius:var(--r);
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
button:active, .btn:active, .theme-toggle:active, .refresh-btn:active{transform:scale(.97)}
input, select, textarea{
  border-radius:var(--r);
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--blue-6);
  box-shadow:0 0 0 3px var(--blue-1);
}
.nav-item .badge, .badge, .status{
  border-radius:var(--r-full);
  font-size:var(--fs-xs);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-item{
  border-radius:var(--r);
  margin:0 var(--sp-2);
  padding-left:var(--sp-3);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav-item.active{
  background:var(--blue-1);
  color:var(--blue-6);
  font-weight:500;
}
tbody tr{transition:background var(--dur-fast) var(--ease)}
.tab{transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease)}
.tab:hover{color:var(--fg)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--n-4);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:var(--n-5)}
:focus-visible{outline:2px solid var(--blue-6); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

/* ============================================================
   P2 布局栅格化层 — 间距归一（只加不改，零破坏）
   原则：容器级间距统一到 8 栅格，组件内部保留原值避免挤压
   ============================================================ */

/* --- 主内容区：统一 16/24 节奏 --- */
.content{padding:var(--sp-4) var(--sp-5)}

/* --- 卡片网格：统一 12px 间距 --- */
.stats-row{gap:var(--sp-3);margin-bottom:var(--sp-4)}
.quick-grid{gap:var(--sp-3);margin-bottom:var(--sp-4)}
.grid-2{gap:var(--sp-4)}

/* --- 面板内边距：统一 12/16 --- */
.panel-head{padding:var(--sp-3) var(--sp-4)}
.panel-body{padding:var(--sp-3) var(--sp-4)}
.stat-card{padding:var(--sp-3) var(--sp-4)}
.quick-card{padding:var(--sp-3)}

/* --- 顶栏：统一水平内边距 --- */
.topbar{padding:0 var(--sp-5);gap:var(--sp-3)}

/* --- 工具栏 --- */
.toolbar{gap:var(--sp-2);margin-bottom:var(--sp-3)}

/* --- 移动端：保持紧凑但走 8 栅格 --- */
@media(max-width:768px){
  .content{padding:var(--sp-3);padding-bottom:70px}
  .stats-row{gap:var(--sp-2);margin-bottom:var(--sp-3)}
  .stat-card{padding:var(--sp-3)}
  .panel-head{padding:var(--sp-2) var(--sp-3)}
  .panel-body{padding:var(--sp-3)}
}

/* --- 工具类：供后续新页面直接使用 --- */
.gap-1{gap:var(--sp-1)} .gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)}
.gap-4{gap:var(--sp-4)} .gap-6{gap:var(--sp-6)}
.p-2{padding:var(--sp-2)} .p-3{padding:var(--sp-3)} .p-4{padding:var(--sp-4)}
.mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)}
.mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)}


/* SSW Admin - 基础层
 * 令牌来源: design_tokens.css (唯一真源)
 * 本层只做「语义别名」: 把 admin 历史变量名映射到 design_tokens
 * design_tokens 的 --n-* / --blue-* 等随 [data-theme] 自适应,
 * 故亮/暗主题共用同一份映射, 无需重复定义值。
 */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* 背景层级 */
  --bg:var(--n-1);   --bg2:var(--n-2);  --bg3:var(--n-3);  --bg4:var(--n-4);
  /* 文字层级 */
  --fg:var(--n-7);   --fg2:var(--n-6);  --fg3:var(--n-6);
  /* 主色/语义色 */
  --blue:var(--blue-6);     --blue-bg:var(--blue-1);
  --green:var(--green-6);   --green-bg:var(--green-1);
  --yellow:var(--yellow-6); --yellow-bg:var(--yellow-1);
  --red:var(--red-6);       --red-bg:var(--red-1);
  --purple:var(--purple-6); --purple-bg:var(--purple-1);
  /* design_tokens 无对应令牌的, 保留字面值 */
  --cyan:#14c9c9; --gray:var(--n-4); --orange:var(--yellow-6);
  /* 补全: 组件层引用的历史变量 */
  --accent:var(--purple-6); --bd:var(--n-4); --err:var(--red-6); --hover:var(--n-3); --muted:var(--n-6);
  /* 结构 */
  --border:var(--n-4); --radius:var(--r); --panel:var(--n-2);
  /* 字体: design_tokens 无字体令牌, 保留字面值 */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"SF Mono",Monaco,"Cascadia Code",monospace;
}

/* 暗色主题: 令牌已自适应, 仅覆盖 design_tokens 未覆盖的项 */
[data-theme="dark"]{
  --cyan:#39c5cf;
}

html,body{height:100%;font-family:var(--sans);background:var(--bg);color:var(--fg);font-size:var(--fs-base);overflow:hidden}
#app{display:flex;height:100vh}


/* badges_tags.css — SSW Admin 组件层
 * 来源: design_tokens.css 令牌
 * 模块: badges_tags
 */

.nav-item .badge{margin-left:auto;font-size:var(--fs-2xs);padding:var(--sp-05) var(--sp-2);border-radius:var(--r-lg);font-family:var(--mono);background:var(--red-bg);color:var(--red);min-width:var(--sz-xs);text-align:center}
.nav-item .badge.ok{background:var(--green-bg);color:var(--green)}
.nav-item .badge.warn{background:var(--yellow-bg);color:var(--yellow)}
.topbar .status-pill{font-size:var(--fs-xs);padding:var(--sp-05) var(--sp-2);border-radius:var(--r-lg);background:var(--bg3);color:var(--fg2);display:flex;align-items:center;gap:var(--sp-1)}
.status{display:inline-block;padding:var(--sp-05) var(--sp-2);border-radius:var(--r-lg);font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase}
.status.ok{background:var(--green-bg);color:var(--green)}
.status.error{background:var(--red-bg);color:var(--red)}
.status.warn{background:var(--yellow-bg);color:var(--yellow)}
.status.idle{background:var(--bg4);color:var(--fg3)}
.status.running{background:var(--blue-bg);color:var(--blue)}
.status.frozen{background:var(--purple-bg);color:var(--purple)}


/* cards.css — SSW Admin 组件层
 * 来源: design_tokens.css 令牌
 * 模块: cards
 */

.stat-card{background:var(--bg2);border:var(--border-w) solid var(--border);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4)}
.stat-card .value{font-size:var(--fs-xl);font-weight:700;font-family:var(--mono)}
.stat-card.blue .value{color:var(--blue)}
.stat-card.green .value{color:var(--green)}
.stat-card.red .value{color:var(--red)}
.stat-card.yellow .value{color:var(--yellow)}
.stat-card.purple .value{color:var(--purple)}
.stat-card.cyan .value{color:var(--cyan)}
.stat-card.gray .value{color:var(--gray)}
.stat-card.orange .value{color:var(--orange)}
.panel{background:var(--bg2);border:var(--border-w) solid var(--border);border-radius:var(--radius);margin-bottom:var(--sp-4)}
.panel-head{padding:var(--sp-3) var(--sp-4);border-bottom:var(--border-w) solid var(--border);font-weight:600;display:flex;align-items:center;gap:var(--sp-2)}
.panel-head .count{font-family:var(--mono);color:var(--fg3);font-weight:400;font-size:var(--fs-xs)}
.panel-head .actions{margin-left:auto;display:flex;gap:var(--sp-15)}
.panel-body{padding:var(--sp-3) var(--sp-4)}


/* charts_progress.css — SSW Admin 组件层
 * 来源: design_tokens.css 令牌
 * 模块: charts_progress
 */

.bar.green{background:var(--green)}.bar.yellow{background:var(--yellow)}.bar.red{background:var(--red)}.bar.blue{background:var(--blue)}.bar.purple{background:var(--purple)}


/* forms.css — SSW Admin 组件层
 * 来源: design_tokens.css 令牌
 * 模块: forms
 */

.stat-card .label{font-size:var(--fs-xs);color:var(--fg3);margin-bottom:var(--sp-1)}
select,input[type=text]{background:var(--bg3);border:var(--border-w) solid var(--border);color:var(--fg);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);font-size:var(--fs-sm);font-family:var(--sans)}
select:focus,input:focus{outline:none;border-color:var(--blue)}


/* layout.css — SSW Admin 组件层
 * 来源: design_tokens.css 令牌
 * 模块: layout
 */

.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--w-card-lg),1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)}


/* misc.css — SSW Admin 组件层
 * 来源: design_tokens.css 令牌
 * 模块: misc
 */

.logo{padding:var(--sp-4);font-size:var(--fs-md);font-weight:700;border-bottom:var(--border-w) solid var(--border);display:flex;align-items:center;gap:var(--sp-2)}
.logo .dot{width:var(--sp-2);height:var(--sp-2);border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.content{flex:1;overflow-y:auto;padding:var(--sp-4) var(--sp-5)}
.page{display:none}
.page.active{display:block}
.stats-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--w-card-sm),1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)}
.toolbar{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-3);flex-wrap:wrap;align-items:center}
.empty{text-align:center;padding:var(--sp-6);color:var(--fg3);font-size:var(--fs-sm)}
#log-content{background:var(--bg);font-family:var(--mono);font-size:var(--fs-xs);line-height:1.6;padding:var(--sp-3);border-radius:var(--radius);max-height:60vh;overflow:auto;white-space:pre-wrap;word-break:break-all;color:var(--fg2)}
.ts{color:var(--fg3)}.lv-ERROR{color:var(--red);font-weight:600}.lv-WARN{color:var(--yellow)}.lv-INFO{color:var(--blue)}.lv-DEBUG{color:var(--fg3)}
.quick-card{background:var(--bg2);border:var(--border-w) solid var(--border);border-radius:var(--radius);padding:var(--sp-3)}
.quick-card h4{font-size:var(--fs-xs);color:var(--fg3);text-transform:uppercase;letter-spacing:var(--ls-tight);margin-bottom:var(--sp-2);display:flex;align-items:center;gap:var(--sp-15)}
.quick-item{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) 0;font-size:var(--fs-sm);border-bottom:var(--border-w) solid var(--bg3)}
.quick-item:last-child{border-bottom:none}
.quick-item .dot{width:var(--sp-15);height:var(--sp-15);border-radius:50%;flex-shrink:0}
.usage-bar{height:var(--sp-1);background:var(--bg3);border-radius:var(--r-sm);overflow:hidden;min-width:var(--sz-xl)}
.usage-bar .fill{height:100%;border-radius:var(--r-sm)}
.freeze-tag{display:inline-block;padding:var(--sp-05) var(--sp-2);border-radius:var(--r-sm);font-size:var(--fs-2xs);background:var(--purple-bg);color:var(--purple);margin:var(--sp-05)}

/* ===== 移动端适配 ===== */
.mobile-only{display:none}



/* tables.css — SSW Admin 组件层
 * 来源: design_tokens.css 令牌
 * 模块: tables
 */

table{width:100%;border-collapse:collapse;font-size: var(--fs-tab)}
th{text-align:left;padding:var(--sp-15) var(--sp-2);color:var(--fg3);font-weight:500;border-bottom:var(--border-w) solid var(--border);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-tight)}
td{padding:var(--sp-15) var(--sp-2);border-bottom:var(--border-w) solid var(--bg3);font-family:var(--mono);font-size:var(--fs-base)}
tr:hover td{background:var(--bg3)}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}
.metric-row{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-15);font-size:var(--fs-sm)}
.metric-row .name{width:calc(var(--sz-lg) + var(--sp-3));color:var(--fg3)}
.metric-row .val{width:var(--sz-md);font-family:var(--mono);text-align:right}
.metric-row .bar{flex:1;height:var(--sp-15);background:var(--bg3);border-radius:var(--r-sm);overflow:hidden}
.metric-row .bar .progress{height:100%;border-radius:var(--r-sm)}


/* tabs_nav.css — SSW Admin 组件层
 * 来源: design_tokens.css 令牌
 * 模块: tabs_nav
 */

/* SSW Admin - 组件层(卡片/表格/面板/徽章/图表) */
.sidebar{width:var(--w-sidebar);background:var(--bg2);border-right:var(--border-w) solid var(--border);display:flex;flex-direction:column;flex-shrink:0}
.nav{flex:1;overflow-y:auto;padding:var(--sp-2) 0;scrollbar-width:none;-ms-overflow-style:none}.nav::-webkit-scrollbar{display:none;width:0;height:0}
.nav-group{padding:var(--sp-3) var(--sp-4) var(--sp-1);font-size:var(--fs-2xs);color:var(--muted);letter-spacing:var(--sp-05);opacity:.75;user-select:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:opacity .15s}.nav-group:hover{opacity:1}.nav-caret{font-size:var(--fs-icon-sm);letter-spacing:0;transition:transform .15s}.nav-group.folded .nav-caret{transform:rotate(-90deg)}.nav-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4);cursor:pointer;color:var(--fg2);font-size:var(--fs-base);border-left:var(--border-w-2) solid transparent;transition:all .15s}
.nav-item:hover{background:var(--bg3);color:var(--fg)}
.nav-item.active{background:var(--bg3);color:var(--fg);border-left-color:var(--blue)}
.nav-item .icon{width:var(--sp-4);text-align:center;font-size:var(--fs-sm);opacity:.7}
.topbar{height:var(--h-tabbar);background:var(--bg2);border-bottom:var(--border-w) solid var(--border);display:flex;align-items:center;padding:0 var(--sp-5);gap:var(--sp-3);flex-shrink:0}
.topbar .breadcrumb{color:var(--fg3);font-size:var(--fs-sm)}
.topbar .page-title{font-size:var(--fs-md);font-weight:600}
.topbar .spacer{flex:1}
.topbar .refresh-btn{background:var(--bg3);border:var(--border-w) solid var(--border);color:var(--fg2);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-sm);cursor:pointer;font-size:var(--fs-xs)}
.topbar .refresh-btn:hover{color:var(--fg);border-color:var(--fg3)}
.tab-bar{display:flex;gap:0;margin-bottom:var(--sp-3);border-bottom:var(--border-w) solid var(--border)}
.tab{padding:var(--sp-15) var(--sp-4);cursor:pointer;font-size:var(--fs-sm);color:var(--fg3);border-bottom:var(--border-w-2) solid transparent}
.tab.active{color:var(--fg);border-bottom-color:var(--blue)}
.tab:hover{color:var(--fg)}


/* home_polish.css — 首页视觉精修样式
 * 渐变背景、卡片质感、hover 动效
 * 来源: design_tokens.css 令牌
 */

   SSW UI Polish v15 -- 视觉层次增强层
   原则: 只加法不覆盖核心; 全部引用 design_tokens; 零破坏兼容.
   ============================================================ */
/* 页面底色微妙渐变, 内容区与背景拉开层次 */
body{background:linear-gradient(180deg,var(--n-1) 0%,#ffffff var(--h-grad-stop))}
/* 卡片/面板: 细边框+阴影+悬浮反馈(视觉差异核心) */
.card,.panel{position:relative;background:var(--bg2);border:var(--border-w) solid var(--n-3);border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease)}
.card:hover,.panel:hover{box-shadow:var(--sh-2);border-color:var(--n-4);transform:translateY(var(--translate-hover))}
/* 面板头部品牌色强调条(低饱和, 不喧宾夺主) */
.panel-head{box-shadow:var(--shadow-inset-top)}
/* 统计卡: 数字更大更专业(等宽数字) */
.stat-card{background:#ffffff;border:var(--border-w) solid var(--n-3);border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.stat-card:hover{box-shadow:var(--sh-2);transform:translateY(var(--translate-hover-lg))}
.stat-card .value{font-size:clamp(var(--fs-stat-min),2.6vw,var(--fs-stat-max));font-weight:700;color:var(--n-7);font-variant-numeric:tabular-nums;line-height:1.25}
.stat-card .label{color:var(--n-6);font-weight:600}
/* 侧边栏: 与内容区拉开层次 + 当前页高亮 */
.sidebar{box-shadow:var(--sh-2)}
.nav-item{transition:background .15s var(--ease),color .15s var(--ease)}
.nav-item.active{background:var(--blue-1);color:var(--blue-8);font-weight:600;box-shadow:var(--shadow-inset-left)}
/* 按钮: 微交互反馈 */
.btn{transition:all .15s var(--ease)}
.btn:hover{filter:brightness(1.04);box-shadow:var(--sh-1);transform:translateY(var(--translate-hover))}
.btn:active{transform:translateY(0);filter:brightness(.98)}
/* 表格行悬浮定位 */
table tbody tr{transition:background .12s var(--ease)}
table tbody tr:hover{background:rgba(51,112,255,.045)}
/* 滚动条(大厂细节) */
::-webkit-scrollbar{width:var(--w-scrollbar);height:var(--w-scrollbar)}
::-webkit-scrollbar-thumb{background:var(--n-4);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:var(--n-5)}
::-webkit-scrollbar-track{background:transparent}
/* 数字等宽 */
.count,.val,.value{font-variant-numeric:tabular-nums}

/* 触屏: 禁用 hover 位移, 避免粘滞 */
@media(hover:none){.card:hover,.panel:hover,.stat-card:hover,.btn:hover{transform:none}}
/* 窄屏: 卡片阴影减淡, 减少视觉噪音 */
@media(max-width:768px){.card,.panel,.stat-card{box-shadow:none;border-color:var(--n-3)}}


/* models.css — 能力池页面专属样式
 * tab 切换 + 统计卡 + 表格增强
 * 来源: design_tokens.css 令牌
 */

.tabs {
  display: flex;
  gap: var(--sp-05);
  padding: 0 var(--sp-4);
  border-bottom: var(--border-w) solid var(--border);
  margin-bottom: var(--sp-3);
  background: var(--panel);
}
.tab-btn {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-tab);
  color: var(--fg2);
  cursor: pointer;
  border-bottom: var(--border-w-tab) solid transparent;
  transition: all 0.15s;
  user-select: none;
}
.tab-btn:hover {
  color: var(--fg);
}
.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.tab-content {
  padding: 0 var(--sp-4) var(--sp-4);
}

/* 统计卡行 */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.stat-card {
  background: var(--panel);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-4);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--border-w-3);
  background: var(--accent);
}
.stat-card.blue::before { background: #4a9eff; }
.stat-card.green::before { background: #2ecc71; }
.stat-card.red::before { background: #e74c3c; }
.stat-card.yellow::before { background: #f39c12; }
.stat-card.purple::before { background: #9b59b6; }
.stat-card.orange::before { background: #e67e22; }
.stat-card .label {
  font-size: var(--fs-sm);
  color: var(--fg2);
  margin-bottom: var(--sp-15);
}
.stat-card .value {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--fg);
}

/* 面板 */
.panel {
  background: var(--panel);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
}
.panel-head {
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  font-size: var(--fs-lg, 16px);
  border-bottom: var(--border-w) solid var(--border);
  color: var(--fg);
}
.panel-body {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-tab);
}

/* 表格 */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
thead th {
  background: var(--bg);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  font-weight: 600;
  color: var(--fg2);
  border-bottom: var(--border-w) solid var(--border);
  white-space: nowrap;
}
tbody td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: var(--border-w) solid var(--border);
  color: var(--fg);
}
tbody tr:hover {
  background: var(--bg);
}

/* 按钮 */
.btn {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn:hover {
  opacity: 0.85;
}

/* 响应式 */
@media (max-width: 768px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .tab-btn {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
  }
}

/* [scroll20261006] 清单表格容器内滚+吸顶表头(长表滚动体感修复, 侨哥令) */
.ml-scroll {
  max-height: calc(100vh - var(--w-tab-bar-offset));
  overflow-y: auto;
}
.ml-scroll thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  box-shadow: var(--shadow-sticky); var(--border);
}


/* compare_page.css — 响应式断点样式
 * 来源: design_tokens.css 令牌
 */

@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
.kpi-card{background:var(--bg2);border:var(--border-w) solid var(--border);border-radius:var(--radius);padding:var(--sp-2) var(--sp-3);min-height:var(--h-topbar-mobile);display:flex;flex-direction:column;justify-content:center;transition:border-color .15s}
@media(max-width:1100px){.kpi-sub{grid-template-columns:1fr}}
.sub-card{background:var(--bg2);border:var(--border-w) solid var(--border);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4)}


/* mobile_base.css — 响应式断点样式
 * 来源: design_tokens.css 令牌
 */

@media(max-width:768px){
  html,body{overflow:auto;height:auto;min-height:100%}
  /* 侧边栏打开时锁滚动，防止背景滑动 + 主内容被截断感 */
  body.sidebar-open{overflow:hidden;position:fixed;width:100%}
  #app{flex-direction:column;height:auto;min-height:100vh}

  /* 侧边栏：默认隐藏，点击汉堡后从左滑出 */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:1000;
    width:min(var(--w-sidebar-mobile),85vw);max-width:var(--w-sidebar-mobile-max);
    transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:var(--shadow-sidebar);
    padding-top:env(safe-area-inset-top,0);
    will-change:transform;
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);
    z-index:999;
    backdrop-filter:blur(var(--blur-overlay));
    -webkit-backdrop-filter:blur(var(--blur-overlay));
    animation:fadeIn .25s ease;
  }
  .sidebar-overlay.open{display:block}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}

  /* 顶栏：汉堡按钮 */
  .topbar{
    padding:0 var(--sp-3);height:var(--h-topbar-mobile);gap:var(--sp-2);
    position:sticky;top:0;z-index:1100;
  }
  .hamburger{
    display:flex;flex-direction:column;gap:var(--hamburger-gap);
    width:var(--hamburger-size);height:var(--hamburger-size);justify-content:center;align-items:center;
    cursor:pointer;flex-shrink:0;
    position:relative;
  }
  .hamburger span{
    display:block;height:var(--hamburger-line-h);width:var(--hamburger-line-w);background:var(--fg);
    border-radius:var(--r-sm);transition:all .25s cubic-bezier(.4,0,.2,1);
    transform-origin:center;
  }
  /* 汉堡变 X 动画 */
  .hamburger.active span:nth-child(1){
    transform:translateY(var(--hamburger-offset)) rotate(45deg);
  }
  .hamburger.active span:nth-child(2){
    opacity:0;transform:scaleX(0);
  }
  .hamburger.active span:nth-child(3){
    transform:translateY(calc(var(--hamburger-offset) * -1)) rotate(-45deg);
  }
  .topbar .breadcrumb{display:none}
  .topbar .page-title{font-size:var(--fs-md);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .status-pill{font-size:var(--fs-2xs);padding:var(--sp-05) var(--sp-2)}
  .topbar .refresh-btn{padding:var(--sp-1) var(--sp-2);font-size:var(--fs-xs)}

  /* 内容区 */
  .content{padding:var(--sp-3);padding-bottom:var(--h-bottom-safe)}
  .main{overflow:visible}
/* SSW Admin - 响应式层(移动端/抽屉/bottom-nav) */

  /* 统计卡片：更紧凑 */
  .stats-row{grid-template-columns:repeat(2,1fr);gap:var(--sp-2);margin-bottom:var(--sp-3)}
  .stat-card{padding:var(--sp-3) var(--sp-3)}
  .stat-card .label{font-size:var(--fs-2xs)}
  .stat-card .value{font-size:var(--fs-lg)}

  /* 面板 */
  .panel{margin-bottom:var(--sp-3)}
  .panel-head{padding:var(--sp-2) var(--sp-3)}
  .panel-body{padding:var(--sp-3) var(--sp-3)}

  /* 表格：允许横向滚动 */
  .panel-body table{min-width:var(--table-min-w)}

  /* 底部Tab导航（手机端主入口） */
  .bottom-nav{
    display:flex;position:fixed;bottom:0;left:0;right:0;
    background:var(--bg2);border-top:var(--border-w) solid var(--border);
    z-index:100;padding:var(--sp-1) 0;padding-bottom:calc(var(--sp-1) + env(safe-area-inset-bottom));
    justify-content:space-around;
  }
  .bottom-nav .bn-item{
    flex:1;display:flex;flex-direction:column;align-items:center;
    gap:var(--sp-05);padding:var(--sp-1) var(--sp-05);font-size:var(--fs-2xs);color:var(--fg3);
    cursor:pointer;transition:color .15s;
  }
  .bottom-nav .bn-item .icon{font-size:var(--fs-lg)}
  .bottom-nav .bn-item.active{color:var(--blue)}
  .bottom-nav .bn-item .label{font-size:var(--fs-2xs)}
  .bottom-nav .bn-more{position:relative}
  .bottom-nav .bn-more .bn-more-menu{
    position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
    background:var(--bg2);border:var(--border-w) solid var(--border);
    border-radius:var(--r);padding:var(--sp-1);min-width:var(--w-mini-card);
    display:none;box-shadow:var(--shadow-bottom);
    margin-bottom:var(--sp-1);
  }
  .bottom-nav .bn-more.open .bn-more-menu{display:block}
  .bottom-nav .bn-more-menu .bn-sub{
    padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);color:var(--fg2);
    cursor:pointer;border-radius:var(--r-sm);
  }
  .bottom-nav .bn-more-menu .bn-sub:hover{background:var(--bg3);color:var(--fg)}

  /* 网格：单列 */
  .grid-2{grid-template-columns:1fr;gap:var(--sp-3)}
  .quick-grid{grid-template-columns:1fr;gap:var(--sp-2)}

  /* 详情弹窗 */
  .detail-overlay{padding:var(--sp-2)}
  .detail-panel{margin:0;width:100%;max-height:90vh;border-radius:var(--r-lg) var(--r-lg) 0 0;position:fixed;bottom:0;left:0;right:0}

  /* 按钮/输入：更大点击区域 */
  .btn{min-height:var(--sz-md);min-width:var(--sz-lg)}
  select,input[type=text]{min-height:var(--sz-md);font-size:var(--fs-md)}

  /* 隐藏桌面端专属 */
  .desktop-only{display:none!important}
  .mobile-only{display:block}
  .bottom-nav.mobile-only{display:flex}
}


/* ===== 网关总览KPI卡片 [v318 2026-09-22] ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);margin-bottom:var(--sp-3)}
.kpi-card:hover{border-color:var(--bg4)}
.k-label{font-size:var(--fs-2xs);color:var(--fg3);margin-bottom:var(--sp-05);letter-spacing:var(--ls-vs)}
.k-val{font-size:var(--fs-md);font-weight:700;font-family:var(--mono);color:var(--fg);word-break:break-all}
.k-val.purple{color:var(--purple)}
.k-val.blue{color:var(--blue)}
.k-val.green{color:var(--green)}
.k-val.red{color:var(--red)}
.k-val.yellow{color:var(--yellow)}
.k-val.cyan{color:var(--cyan)}
.kpi-sub{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.sub-title{font-size:var(--fs-sm);font-weight:600;color:var(--fg2);margin-bottom:var(--sp-3)}
.sub-row{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-12) 0;border-bottom:var(--border-w) dashed var(--bg3);font-size:var(--fs-sm);color:var(--fg2)}
.sub-row:last-child{border-bottom:none}
.sub-row .v{font-family:var(--mono);color:var(--fg);font-weight:600}

/* ===== ReAct 效率对比面板 [v319 2026-09-27] ===== */
.react-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.react-card.scaffolded{border-left:var(--border-w-3) solid var(--green)}
.react-card.non-scaffolded{border-left:var(--border-w-3) solid var(--yellow)}
.react-label{font-size:var(--fs-xs);color:var(--fg3);letter-spacing:var(--ls-vs)}
.react-value{font-size:var(--fs-2xl);font-weight:700;font-family:var(--mono);color:var(--fg)}
.react-card.scaffolded .react-value{color:var(--green)}
.react-card.non-scaffolded .react-value{color:var(--yellow)}
.react-sub{font-size:var(--fs-xs);color:var(--fg2);font-family:var(--mono)}
.react-trend{margin-top:var(--sp-3)}
.trend-title{font-size:var(--fs-xs);color:var(--fg3);margin-bottom:var(--sp-15)}
.trend-chart{display:flex;gap:var(--sp-15);align-items:flex-end;height:var(--h-trend);padding:var(--sp-1) var(--sp-05)}
.trend-bar{display:flex;flex-direction:column;align-items:center;flex:1;gap:var(--sp-05)}
.trend-day{font-size:var(--fs-icon-sm);color:var(--fg3);font-family:var(--mono)}
.trend-bars{display:flex;gap:var(--sp-05);align-items:flex-end;height:var(--h-trend-sm);width:100%;justify-content:center}
.trend-bars .bar-s{width:var(--w-bar);background:var(--green);border-radius:var(--r-sm) var(--sp-05) 0 0}
.trend-bars .bar-n{width:var(--w-bar);background:var(--yellow);border-radius:var(--r-sm) var(--sp-05) 0 0}
.react-error{color:var(--red);font-size:var(--fs-sm);padding:var(--sp-3)}

/* === 验证脚手架 4目的看板 (v2 2026-10-05) === */
.vs-top-kpi{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.vs-kpi-card{flex:1;min-width:var(--w-mini-card);padding:var(--sp-3) var(--sp-3);text-align:center}
.vs-kpi-label{font-size:var(--fs-xs);color:var(--fg2);margin-bottom:var(--sp-05)}
.vs-kpi-val{font-size:var(--fs-xl);font-weight:700;line-height:1.2}
.vs-kpi-sub{font-size:var(--fs-2xs);color:var(--fg2);margin-top:var(--sp-05)}
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-2)}
.vs-purpose-card{padding:var(--sp-3) var(--sp-3)}
.vs-purpose-head{font-size:var(--fs-base);font-weight:600;margin-bottom:var(--sp-2);padding-bottom:var(--sp-1);border-bottom:var(--border-w) solid var(--bd)}
.vs-purpose-kpi{display:flex;gap:var(--sp-15);flex-wrap:wrap;margin-bottom:var(--sp-15)}
.vs-chip-wrap{display:flex;align-items:center;gap:var(--sp-15);padding:var(--sp-15) var(--sp-3);border:var(--border-w) solid var(--bd);border-radius:var(--r-lg)}
.vs-gate-item{display:flex;align-items:center;gap:var(--sp-15);padding:var(--sp-05) 0;font-size:var(--fs-sm)}
.vs-gate-item.vs-ok{color:var(--fg)}
.vs-gate-item.vs-fail{color:var(--err,#f87171)}
.vs-layer-item{display:flex;align-items:center;gap:var(--sp-15);padding:var(--sp-05) 0;font-size:var(--fs-sm)}
.vs-layer-item.vs-ok{}
.vs-layer-item.vs-fail{color:var(--err,#f87171)}
.vs-ms-chip{font-size:var(--fs-xs)}
.vs-ms-done{opacity:1}
.vs-ms-todo{opacity:0.5}
.vs-bar{background:var(--accent,#6366f1);border-radius:var(--r-sm) var(--sp-05) 0 0;width:var(--w-bar-chart);min-height:var(--sp-05);display:flex;align-items:flex-end;justify-content:center;color:#fff;font-size:var(--fs-vs-bar);position:relative}
.vs-bar span{position:absolute;top:calc(var(--sz-sm) * -1);font-size:var(--fs-vs-bar);color:var(--fg2)}

/* ===== 验证脚手架补充样式 ===== */
.vs-mini-table{width:100%;font-size:var(--fs-2xs);border-collapse:collapse;margin-top:var(--sp-1)}
.vs-mini-table th{text-align:left;padding:var(--sp-05) var(--sp-1);color:var(--fg2);font-weight:500;border-bottom:var(--border-w) solid var(--border,rgba(128,128,128,.2))}
.vs-mini-table td{padding:var(--sp-05) var(--sp-1);border-bottom:var(--border-w) solid var(--border,rgba(128,128,128,.08))}
.vs-mini-table tr:hover{background:var(--hover,rgba(128,128,128,.05))}
.vs-purpose-card .empty{font-size:var(--fs-xs);color:var(--fg2);text-align:center;padding:var(--sp-3) 0}


/* mobile_small.css — 响应式断点样式
 * 来源: design_tokens.css 令牌
 */

@media(max-width:480px){
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .stat-card .value{font-size:var(--fs-lg)}
  .topbar .page-title{font-size:var(--fs-base)}
}


/* tablet.css — 响应式断点样式
 * 来源: design_tokens.css 令牌
 */

@media(max-width:768px){.react-compare-grid{grid-template-columns:1fr}}
.react-card{background:var(--bg2);border:var(--border-w) solid var(--border);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-1)}
@media(max-width:900px){.vs-grid{grid-template-columns:1fr}}
/* 基础层: 遮罩默认隐藏(桌面/移动通用) */
.sidebar-overlay{display:none}

/* base-layer: overlay default hidden (desktop); mobile .open(0,2,0) still wins inside media */
.sidebar-overlay{display:none}

/* G457: 深色主题下控件适配(切换钮/刷新钮去白底) */
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .refresh-btn{background:var(--bg4);color:var(--fg2);border-color:var(--border)}

/* G458: 系统资源数值防截断 + 状态卡紧凑化(用户反馈: 显示乱/太大) */
.metric-row .name{white-space:nowrap}
.metric-row .val{min-width:var(--sz-md);width:auto;white-space:nowrap;flex:0 0 auto}
.stat-card{padding:var(--sp-2) var(--sp-3)}
.stat-card .value{font-size:var(--fs-lg)}

/* ============================================================
   SSW UI Polish v16 (G100179) — 字体/颜色/底色对齐大厂三阶段
   基线: Ant Design字体栈 / Arco语义色#3370ff / TDesign令牌; 字体对齐三生前端tokens.css
   原则: 只加法零破坏, 全部尾置覆盖, 暗色随令牌自适应.
   ============================================================ */
:root{
  /* 字体栈: 补中文回退PingFang/雅黑(修中文落默认字体); mono补Consolas/Roboto Mono */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans",sans-serif;
  --mono:"SF Mono",Monaco,"Cascadia Code",Consolas,"Roboto Mono",monospace;
  /* 文字层级对齐Arco(Ant): fg3次级灼n-5, 修复fg2==fg3无层级 */
  --fg2:var(--n-6);
  --fg3:var(--n-5);
}
/* 表格: 正文回UI字体(等宽只留数字/日志), 行距加大修拥挤 */
td,th{font-family:var(--sans)}
td{padding:var(--sp-2) var(--sp-2);line-height:var(--lh-base)}
th{text-transform:none;letter-spacing:0;font-size:var(--fs-sm);font-weight:600;padding:var(--sp-2) var(--sp-2)}
/* 数字位保持等宽 */
.metric-row .val,.panel-head .count,#log-content{font-family:var(--mono)}
/* 统计卡色彩语义收敛: 蓝主色+红绿语义, cyan/purple/gray归中性主文字(修五彩混乱) */
.stat-card.cyan .value,.stat-card.purple .value,.stat-card.gray .value{color:var(--n-7)}
.stat-card.purple .label{color:var(--n-5);font-weight:500}
/* 统计数字恢复20px层级(对齐Ant/Dashboard规范, v15尾随紧凑化压成18px) */
.stat-card .value{font-size:var(--fs-xl)}

/* ===== SSW UI Polish v17 (G100181) -- 侧栏密度对齐行业基线 =====
   现状: nav-item padding 8px 16px = 36px/行(20+项撑满) ; 基线: Ant 30px Arco 28-31px
   收敛: 纵向 8->4px, 项间距 gap 12->8px; 分组标题同步收紧; 字号不变 */
.nav-item{padding:var(--sp-1) var(--sp-4)}
.nav{gap:var(--sp-1)}
.nav-group{padding:var(--sp-2) var(--sp-4) var(--sp-05)}
.sidebar .nav-item .badge{padding:0 var(--sp-1)}
/* v17 end */

/* ===== SSW UI Polish v18 (G100182) -- 分组标题对齐行业实践 =====
   现状: .nav-group fs-2xs + opacity .75, 无字重 -> 分组与菜单项无层级差
   行业: ArkUI itemGroupLabel fontWeight 500; Ant区块标题600; B端规范"关注文本加字重突出"
   收敛: 字重600(去掉opacity弱化, 用颜色深浅做层级), 字号12px, letter-spacing略收紧 */
.sidebar .nav-group{font-weight:700;opacity:1;font-size:var(--fs-sm);color:var(--fg2);letter-spacing:.02em;border-top:1px solid var(--border);margin-top:var(--sp-2);padding-top:var(--sp-3)}
.sidebar .nav-group:first-child{border-top:none;margin-top:0}
/* v18 end */


/* ===== SSW v19 (G100244) -- 行内散色收编: JS行内style的21个高频色(>=5处)命名化为sc-*令牌 =====
   值完全不变(亮暗双档同值), 换肤零视觉变化; 定义须进bundle才生效(页面只加载bundle) ===== */
:root{
  --sc-amber-1:#f39c12;
  --sc-amber-2:#fbbf24;
  --sc-amber-3:#f59e0b;
  --sc-blue-1:#58a6ff;
  --sc-dark-1:#161922;
  --sc-gray-1:#888;
  --sc-gray-2:#6e7681;
  --sc-gray-3:#8b949e;
  --sc-gray-4:#999;
  --sc-gray-5:#555;
  --sc-gray-6:#666;
  --sc-green-1:#4ade80;
  --sc-green-2:#16a34a;
  --sc-light-1:#ddd;
  --sc-misc-1:#f85149;
  --sc-red-1:#e74c3c;
  --sc-red-2:#dc2626;
  --sc-red-3:#f87171;
  --sc-red-4:#c00;
  --sc-red-5:#ff4d4f;
  --sc-red-6:#c62828;
}
[data-theme="dark"]{
  --sc-amber-1:#f39c12;
  --sc-amber-2:#fbbf24;
  --sc-amber-3:#f59e0b;
  --sc-blue-1:#58a6ff;
  --sc-dark-1:#161922;
  --sc-gray-1:#888;
  --sc-gray-2:#6e7681;
  --sc-gray-3:#8b949e;
  --sc-gray-4:#999;
  --sc-gray-5:#555;
  --sc-gray-6:#666;
  --sc-green-1:#4ade80;
  --sc-green-2:#16a34a;
  --sc-light-1:#ddd;
  --sc-misc-1:#f85149;
  --sc-red-1:#e74c3c;
  --sc-red-2:#dc2626;
  --sc-red-3:#f87171;
  --sc-red-4:#c00;
  --sc-red-5:#ff4d4f;
  --sc-red-6:#c62828;
}
/* v19 end */
/* v19 end */


/* ===== SSW UI Polish v19b (G100244) -- 反馈态三件套: 与平台 /ai/ p-state 同源思路 =====
   现状: .empty 空态已统一(28文件), 缺 loading/error/skeleton 统一类
   原则: 增量新增不重造, 新页面/新代码用 .st-*, 旧 .empty 保持兼容 ===== */
.st{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-6);color:var(--fg3);font-size:var(--fs-sm);text-align:center}
.st-loading:before{content:'';width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:st-spin .8s linear infinite}
.st-error{color:var(--red-6)}
.st-skel{position:relative;overflow:hidden;background:var(--n-3);border-radius:var(--r-sm);min-height:14px}
.st-skel:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:st-wave 1.4s infinite}
@keyframes st-spin{to{transform:rotate(360deg)}}
@keyframes st-wave{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
[data-theme="dark"] .st-skel{background:var(--n-3)}
/* v19b end */


/* ===== SSW v19c (G100244) -- 珊瑚主色令牌接入(只新增不改accent, 零视觉突变) =====
   平台 /ai/ sanseng肤 主色=珊瑚#d97757; 8765后台保持紫, 珊瑚作为可选令牌备用 ===== */
:root{--coral-1:#2b120c; --coral-6:#d97757; --coral-8:#f0a884; --coral:var(--coral-6)}
[data-theme="dark"]{--coral-1:#2b120c; --coral-6:#d97757; --coral-8:#f0a884}
/* v19c end */