/* =====================================================================
   天成内镜影像 AI 平台 — 设计系统
   深海青主色 + 琥珀强调，与展厅内其他展项保持同一视觉家族
   字体全部走系统栈，不引外部字体，保证展厅本地/内网秒开
   ===================================================================== */

:root{
  /* 纸面与表面 */
  --paper:#eceff3;
  --surface:#ffffff;
  --surface-2:#f4f7fa;
  --surface-3:#e9eef3;

  /* 墨色文字 */
  --ink:#0c2130;
  --ink-2:#3c5261;
  --ink-3:#657f8f;
  --muted:#93a5b3;

  /* 线条 */
  --line:#dce3ea;
  --line-2:#e9eef3;

  /* 主色：深海青（内镜影像） */
  --teal:#0b6579;
  --teal-deep:#07333f;
  --teal-darker:#04212a;
  --teal-bright:#16a5c4;
  --teal-soft:#d7eaf2;

  /* 强调：琥珀（预警与待办） */
  --amber:#b45309;
  --amber-soft:#fbedd8;

  /* 语义色 */
  --warn:#c07d14;
  --warn-soft:#fbeed6;
  --ok:#1f8f5f;
  --ok-soft:#dcf0e5;
  --info:#1f6fb2;
  --info-soft:#dceaf6;
  --grape:#6b4fa0;
  --grape-soft:#e8e2f4;

  /* 字体：纯系统栈 */
  --f-display:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --f-body:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --f-mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,"Liberation Mono",monospace;

  /* 尺寸 */
  --sidebar-w:258px;
  --topbar-h:60px;
  --radius:13px;
  --radius-sm:9px;
  --shadow-sm:0 1px 2px rgba(12,33,48,.05),0 1px 3px rgba(12,33,48,.04);
  --shadow:0 4px 18px -6px rgba(12,33,48,.14),0 2px 6px -2px rgba(12,33,48,.07);
  --shadow-lg:0 24px 60px -18px rgba(7,51,63,.34);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--paper);
  font-size:14px;
  line-height:1.55;
  letter-spacing:.005em;
}
::selection{background:var(--teal-bright);color:#04222b}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#c4ccd4;border-radius:8px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#a7b0ba;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* =====================================================================
   布局骨架
   ===================================================================== */
.app{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(22,165,196,.13), transparent 60%),
    linear-gradient(178deg,#08424f 0%,#07333f 42%,#04212a 100%);
  color:#cfe1e8;
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  border-right:1px solid #04212a;z-index:30;
}
.brand{display:flex;align-items:center;gap:11px;padding:17px 18px 15px;border-bottom:1px solid rgba(255,255,255,.06)}
.brand-mark{
  width:38px;height:38px;border-radius:11px;flex:0 0 38px;
  background:linear-gradient(150deg,var(--teal-bright),#0a7f96);
  display:grid;place-items:center;position:relative;
  box-shadow:0 6px 16px -4px rgba(22,165,196,.5),inset 0 1px 0 rgba(255,255,255,.3);
}
.brand-mark svg{width:21px;height:21px}
.brand-mark::after{content:"";position:absolute;inset:0;border-radius:11px;border:1px solid rgba(255,255,255,.18)}
.brand-text b{font-family:var(--f-display);font-weight:700;font-size:15px;color:#fff;display:block;letter-spacing:.01em;line-height:1.2}
.brand-text span{font-size:9.5px;letter-spacing:.24em;color:#6fa9bd;text-transform:uppercase;font-family:var(--f-mono)}

.nav{flex:1;overflow-y:auto;padding:11px 11px 22px}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12)}
.nav-group{margin-bottom:14px}
.nav-group-label{
  display:flex;align-items:center;gap:7px;
  font-size:10px;letter-spacing:.14em;color:#6a92a4;
  font-family:var(--f-mono);text-transform:uppercase;
  padding:0 9px 7px;
}
.nav-group-label .gi{width:13px;height:13px;opacity:.75}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:9px;margin-bottom:2px;
  font-size:13px;color:#b4c9d4;transition:.15s;position:relative;
}
.nav-item .ni{width:16px;height:16px;flex:none;opacity:.8}
.nav-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{background:linear-gradient(90deg,rgba(22,165,196,.26),rgba(22,165,196,.06));color:#fff;font-weight:600}
.nav-item.active .ni{opacity:1;color:var(--teal-bright)}
.nav-item.active::before{content:"";position:absolute;left:-11px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--teal-bright)}
.badge-sm{
  font-family:var(--f-mono);font-size:10px;font-style:normal;
  background:var(--amber);color:#fff;border-radius:20px;padding:1px 6px;line-height:1.5;
}
.badge-sm.g{background:rgba(22,165,196,.28);color:#8fdcec}

.sidebar-foot{
  display:flex;align-items:center;gap:10px;padding:12px 15px;
  border-top:1px solid rgba(255,255,255,.07);font-size:12px;
}
.sidebar-foot .avatar{
  width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#8fdcec;font-weight:600;font-size:12px;
}
.sidebar-foot b{display:block;color:#fff;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-foot small{color:#7b9fb0;font-size:10.5px}
.sidebar-foot svg{width:15px;height:15px;color:#7b9fb0;flex:none}

/* ---------- 主区 ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:var(--topbar-h);flex:none;display:flex;align-items:center;gap:12px;
  padding:0 22px;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
}
.crumbs{font-size:13px;color:var(--ink-3);display:flex;align-items:center;gap:8px}
.crumbs .sep{color:var(--muted)}
.crumbs b{color:var(--ink);font-weight:600}
.topbar-spacer{flex:1}
.demo-flag{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;
  color:var(--amber);background:var(--amber-soft);border:1px solid #f2dcb8;
  padding:3px 9px;border-radius:20px;
}
.search{
  display:flex;align-items:center;gap:8px;background:var(--surface-3);
  border:1px solid var(--line);border-radius:9px;padding:6px 10px;width:240px;
}
.search svg{width:15px;height:15px;color:var(--muted);flex:none}
.search input{border:none;background:none;outline:none;font-size:12.5px;flex:1;min-width:0;font-family:inherit;color:var(--ink)}
.search kbd{font-family:var(--f-mono);font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 4px}
.topbar-btn{
  width:33px;height:33px;border-radius:9px;display:grid;place-items:center;
  color:var(--ink-3);position:relative;transition:.15s;
}
.topbar-btn:hover{background:var(--surface-3);color:var(--teal)}
.topbar-btn svg{width:17px;height:17px}
.topbar-btn .dot{position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--amber);border:1.5px solid #fff}
.clock{font-family:var(--f-mono);font-size:12px;color:var(--ink-3);white-space:nowrap}
.clock b{color:var(--ink);font-weight:600}

.content{padding:22px;max-width:1560px;width:100%;margin:0 auto}

/* =====================================================================
   通用组件
   ===================================================================== */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card-h{
  display:flex;align-items:center;gap:10px;padding:14px 17px;border-bottom:1px solid var(--line-2);
}
.card-h h3{font-size:14px;font-weight:650;letter-spacing:-.01em;flex:none}
.card-h .sub{font-size:11.5px;color:var(--ink-3)}
.card-h .sp{flex:1}
.card-b{padding:16px 17px}
.card-b.tight{padding:0}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1200px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}}
@media(max-width:900px){.g2,.g4{grid-template-columns:1fr}}

/* KPI */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.kpi .kl{font-size:11.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px;margin-bottom:7px}
.kpi .kl svg{width:14px;height:14px;color:var(--teal)}
.kpi .kv{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-family:var(--f-display)}
.kpi .kv small{font-size:13px;font-weight:500;color:var(--ink-3);margin-left:3px}
.kpi .kd{font-size:11.5px;margin-top:6px;color:var(--ink-3);display:flex;align-items:center;gap:5px}
.kpi .kd .up{color:var(--ok);font-weight:600}
.kpi .kd .dn{color:var(--amber);font-weight:600}
.kpi::after{content:"";position:absolute;right:-24px;top:-24px;width:74px;height:74px;border-radius:50%;background:var(--teal-soft);opacity:.5}

/* 徽标 / 状态 */
.tag{
  display:inline-flex;align-items:center;gap:4px;font-size:11px;
  padding:2px 8px;border-radius:20px;white-space:nowrap;font-weight:500;
}
.tag.teal{background:var(--teal-soft);color:var(--teal)}
.tag.amber{background:var(--amber-soft);color:var(--amber)}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.info{background:var(--info-soft);color:var(--info)}
.tag.grape{background:var(--grape-soft);color:var(--grape)}
.tag.grey{background:var(--surface-3);color:var(--ink-3)}
.tag i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

.mono{font-family:var(--f-mono)}
.muted{color:var(--ink-3)}
.tiny{font-size:11.5px}

/* 表格 */
table.tb{width:100%;border-collapse:collapse;font-size:13px}
table.tb th{
  text-align:left;font-size:11px;font-weight:600;color:var(--ink-3);
  letter-spacing:.06em;padding:10px 14px;background:var(--surface-2);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
table.tb td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.tb tbody tr:hover{background:var(--surface-2)}
table.tb tbody tr:last-child td{border-bottom:none}
table.tb td b{font-weight:600}
.num{font-family:var(--f-mono);text-align:right;white-space:nowrap}

/* 分段控件 */
.segment{display:inline-flex;background:var(--surface-3);border-radius:9px;padding:3px;gap:2px}
.segment button{
  font-size:12px;padding:5px 12px;border-radius:7px;color:var(--ink-3);transition:.15s;white-space:nowrap;
}
.segment button.active{background:var(--surface);color:var(--teal);font-weight:600;box-shadow:var(--shadow-sm)}

.btn{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;
  padding:7px 13px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);transition:.15s;
}
.btn:hover{border-color:var(--teal);color:var(--teal)}
.btn svg{width:14px;height:14px}
.btn.pri{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.pri:hover{background:#095264;color:#fff}
.btn.sm{padding:4px 9px;font-size:11.5px}

/* 进度条 */
.bar{height:7px;border-radius:20px;background:var(--surface-3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--teal),var(--teal-bright))}
.bar.s i{background:linear-gradient(90deg,#d18b30,var(--amber))}

/* 分节标题 */
.sec-h{display:flex;align-items:center;gap:9px;margin:24px 0 12px}
.sec-h .ix{width:26px;height:26px;border-radius:8px;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;flex:none}
.sec-h .ix svg{width:15px;height:15px}
.sec-h h2{font-size:15px;font-weight:650;letter-spacing:-.01em}
.sec-h .cnt{font-family:var(--f-mono);font-size:11px;color:var(--muted);margin-left:auto}

/* 说明条 */
.note{
  display:flex;gap:10px;padding:12px 15px;border-radius:var(--radius-sm);
  background:var(--teal-soft);border-left:3px solid var(--teal);font-size:12.5px;color:var(--ink-2);line-height:1.65;
}
.note svg{width:16px;height:16px;color:var(--teal);flex:none;margin-top:2px}
.note.s{background:var(--amber-soft);border-left-color:var(--amber)}
.note.s svg{color:var(--amber)}
.note b{color:var(--ink);font-weight:600}

/* 阶段标记：一期人工 / 系统自动 / 二期 */
.ph{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;padding:2px 7px;border-radius:5px;white-space:nowrap}
.ph.man{background:var(--amber-soft);color:var(--amber)}
.ph.sys{background:var(--teal-soft);color:var(--teal)}
.ph.p2{background:var(--warn-soft);color:var(--warn)}

/* 时间线 */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:var(--line)}
.tl-i{position:relative;padding-bottom:16px}
.tl-i:last-child{padding-bottom:0}
.tl-i::before{
  content:"";position:absolute;left:-23px;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--surface);border:2px solid var(--teal);
}
.tl-i.man::before{border-color:var(--amber)}
.tl-i .tt{font-size:11px;color:var(--muted);font-family:var(--f-mono);margin-bottom:2px}
.tl-i b{font-size:13px;font-weight:600;display:block}
.tl-i p{font-size:12.5px;color:var(--ink-3);margin-top:2px;line-height:1.6}

/* 空心统计块 */
.stat-row{display:flex;gap:26px;flex-wrap:wrap}
.stat-row .st b{display:block;font-size:20px;font-weight:700;font-family:var(--f-display);line-height:1.2}
.stat-row .st span{font-size:11.5px;color:var(--ink-3)}

/* 简易柱图 */
.chart{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:10px}
.chart .cb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.chart .cb .cbar{
  width:100%;max-width:42px;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,var(--teal-bright),var(--teal));position:relative;transition:.2s;
}
.chart .cb:hover .cbar{filter:brightness(1.12)}
.chart .cb .cbar span{
  position:absolute;top:-19px;left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:11px;color:var(--ink-2);
}
.chart .cb small{font-size:11px;color:var(--ink-3);white-space:nowrap}

/* 漏斗 */
.funnel .fn{display:flex;align-items:center;gap:12px;padding:8px 0}
.funnel .fn .fl{width:118px;font-size:12.5px;color:var(--ink-2);flex:none}
.funnel .fn .fbar{flex:1;height:26px;border-radius:6px;background:var(--surface-3);overflow:hidden;position:relative}
.funnel .fn .fbar i{
  display:block;height:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--teal),var(--teal-bright));
  display:flex;align-items:center;justify-content:flex-end;padding-right:9px;
  color:#fff;font-family:var(--f-mono);font-size:11.5px;
}
.funnel .fn .fv{width:74px;text-align:right;font-family:var(--f-mono);font-size:12px;color:var(--ink-3);flex:none}

/* 语言点阵 */
.langs{display:flex;flex-wrap:wrap;gap:7px}
.lang-chip{
  display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface-2);font-size:12.5px;
}
.lang-chip b{font-family:var(--f-mono);font-size:11.5px;color:var(--teal)}

/* 手机框 */
.phone{
  width:330px;flex:none;border-radius:34px;padding:11px;
  background:linear-gradient(160deg,#0c3542,#062632);
  box-shadow:var(--shadow-lg);position:relative;
}
.phone::before{
  content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:86px;height:5px;border-radius:20px;background:rgba(255,255,255,.16);z-index:3;
}
.phone-screen{
  border-radius:25px;background:#f2f5f8;overflow:hidden;height:632px;
  display:flex;flex-direction:column;position:relative;
}
.phone-status{
  height:30px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);
  background:var(--surface);
}
.phone-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.phone-body::-webkit-scrollbar{width:0}

/* 通用小卡 */
.mini{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:12px 14px}
.mini .ml{font-size:11px;color:var(--ink-3);margin-bottom:3px}
.mini .mv{font-size:14px;font-weight:600}

/* 定义列表 */
.dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:13px;align-items:baseline}
.dl dt{color:var(--ink-3);font-size:12.5px;white-space:nowrap}
.dl dd{font-weight:500}

@media(max-width:1000px){
  .sidebar{display:none}
  .content{padding:16px}
  .search{display:none}
}

/* =====================================================================
   本原型补充组件
   ===================================================================== */
.sf-id{flex:1;min-width:0}
.hidden{display:none}

/* 模块卡网格（门户页与各模块入口共用） */
.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
@media(max-width:1200px){.mod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.mod-grid{grid-template-columns:1fr}}
.mod{
  display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:15px 16px;box-shadow:var(--shadow-sm);transition:.16s;
}
.mod:hover{border-color:var(--teal);box-shadow:var(--shadow);transform:translateY(-2px)}
.mod .mh{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.mod .mi{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--teal-soft);color:var(--teal);
}
.mod .mi svg{width:17px;height:17px}
.mod .mh b{font-size:13.5px;font-weight:650;flex:1;min-width:0}
.mod p{font-size:12.5px;color:var(--ink-3);line-height:1.65}
.mod .mfoot{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap}

/* 能力状态：现有 / 扩展 / 对接 */
.cap{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;padding:2px 7px;border-radius:5px;white-space:nowrap}
.cap.have{background:var(--ok-soft);color:var(--ok)}
.cap.ext{background:var(--warn-soft);color:var(--warn)}
.cap.link{background:var(--info-soft);color:var(--info)}

/* 分层架构图 */
.arch{display:grid;gap:10px}
.arch-row{
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);
  padding:12px 14px;display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:center;
}
.arch-row .al{font-size:12.5px;font-weight:650;color:var(--teal);line-height:1.4}
.arch-row .al small{display:block;font-family:var(--f-mono);font-size:10px;color:var(--muted);font-weight:400;letter-spacing:.08em}
.arch-row .ab{display:flex;flex-wrap:wrap;gap:7px}
.arch-row .ac{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:6px 11px;font-size:12.5px;display:flex;align-items:center;gap:6px;
}
.arch-row.base{background:linear-gradient(100deg,var(--teal-soft),var(--surface-2))}
.arch-row.base .ac{border-color:#bcdde8}
@media(max-width:800px){.arch-row{grid-template-columns:1fr}}

/* 横向流程链 */
.chain{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:1100px){.chain{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.chain{grid-template-columns:1fr}}
.chain .cn{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 13px;position:relative;
}
.chain .cn .cnum{font-family:var(--f-mono);font-size:10.5px;color:var(--teal);letter-spacing:.08em;margin-bottom:5px}
.chain .cn b{font-size:13px;display:block;margin-bottom:4px}
.chain .cn p{font-size:12px;color:var(--ink-3);line-height:1.6}

/* 首屏 */
.hero{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(22,165,196,.16), transparent 62%),
    linear-gradient(160deg,#08424f 0%,#07333f 55%,#04212a 100%);
  color:#d8e8ee;border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow-lg);
}
.hero-grid{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr}}
.hero .eyebrow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.22em;color:#6fc2d8;margin-bottom:10px}
.hero h1{font-family:var(--f-display);font-size:27px;line-height:1.32;color:#fff;font-weight:700;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:#5fd3ec}
.hero p{margin-top:11px;font-size:13.5px;line-height:1.75;color:#a9c6d1;max-width:760px}
.hero-stats{display:flex;flex-wrap:wrap;gap:26px;margin-top:18px}
.hero-stats .hs b{display:block;font-family:var(--f-display);font-size:21px;color:#fff;line-height:1.2}
.hero-stats .hs span{font-size:11.5px;color:#7fa8b8}
.hero-pass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);padding:14px 16px}
.hero-pass .hl{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;color:#6fc2d8;margin-bottom:10px}
.hero-pass .hsr{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:12.5px;border-bottom:1px solid rgba(255,255,255,.07)}
.hero-pass .hsr:last-child{border-bottom:none}
.hero-pass .hsr span{color:#9dbdc9}
.hero-pass .hsr b{color:#fff;font-weight:600;font-family:var(--f-mono);font-size:12px}
.hero-pass .hsr b.on{color:#6ee7c8}
.hero-pass .hsr b.wait{color:#f0be6a}

/* 两栏内容 */
.cols{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start}
@media(max-width:1200px){.cols{grid-template-columns:1fr}}
.cols.wide{grid-template-columns:1fr 420px}
@media(max-width:1200px){.cols.wide{grid-template-columns:1fr}}

/* 列表项 */
.lst{display:grid;gap:1px;background:var(--line-2)}
.lst .li{background:var(--surface);padding:11px 15px;display:flex;align-items:center;gap:11px}
.lst .li:hover{background:var(--surface-2)}
.lst .li .lmain{flex:1;min-width:0}
.lst .li .lmain b{font-size:13px;font-weight:600;display:block}
.lst .li .lmain small{font-size:11.5px;color:var(--ink-3)}

/* 头像圆点 */
.ava{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--teal-soft);color:var(--teal);font-size:12px;font-weight:600;
}
.ava.w{background:var(--warn-soft);color:var(--warn)}
.ava.o{background:var(--ok-soft);color:var(--ok)}
.ava.g{background:var(--grape-soft);color:var(--grape)}

/* 影像占位格 */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:900px){.shots{grid-template-columns:repeat(2,1fr)}}
.shot{
  aspect-ratio:4/3;border-radius:var(--radius-sm);position:relative;overflow:hidden;
  background:radial-gradient(80% 80% at 50% 45%,#c9695f 0%,#9c4038 55%,#5d211c 100%);
  border:1px solid var(--line);
}
.shot::after{
  content:attr(data-t);position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(0,0,0,.62));color:#fff;
  font-size:11px;padding:12px 8px 5px;
}
.shot .flag{
  position:absolute;top:6px;left:6px;font-family:var(--f-mono);font-size:10px;
  background:rgba(4,33,42,.72);color:#8fdcec;padding:2px 6px;border-radius:5px;
}
.shot .flag.risk{background:rgba(180,83,9,.85);color:#fff}

/* 步骤条 */
.steps{display:flex;gap:0;flex-wrap:wrap}
.steps .sp{
  flex:1;min-width:120px;padding:10px 12px;border:1px solid var(--line);
  background:var(--surface-2);font-size:12.5px;position:relative;
}
.steps .sp:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.steps .sp:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.steps .sp + .sp{border-left:none}
.steps .sp b{display:block;font-size:12.5px;font-weight:600}
.steps .sp small{font-size:11px;color:var(--ink-3)}
.steps .sp.done{background:var(--ok-soft);border-color:#bfe3cf}
.steps .sp.now{background:var(--teal-soft);border-color:#bcdde8}
.steps .sp.now b{color:var(--teal)}

/* 工具类：进度/柱高百分比（替代内联 style，全站通用） */
.w-1{width:1%}
.w-2{width:2%}
.w-3{width:3%}
.w-4{width:4%}
.w-5{width:5%}
.w-6{width:6%}
.w-7{width:7%}
.w-8{width:8%}
.w-9{width:9%}
.w-10{width:10%}
.w-11{width:11%}
.w-12{width:12%}
.w-13{width:13%}
.w-14{width:14%}
.w-15{width:15%}
.w-16{width:16%}
.w-17{width:17%}
.w-18{width:18%}
.w-19{width:19%}
.w-20{width:20%}
.w-21{width:21%}
.w-22{width:22%}
.w-23{width:23%}
.w-24{width:24%}
.w-25{width:25%}
.w-26{width:26%}
.w-27{width:27%}
.w-28{width:28%}
.w-29{width:29%}
.w-30{width:30%}
.w-31{width:31%}
.w-32{width:32%}
.w-33{width:33%}
.w-34{width:34%}
.w-35{width:35%}
.w-36{width:36%}
.w-37{width:37%}
.w-38{width:38%}
.w-39{width:39%}
.w-40{width:40%}
.w-41{width:41%}
.w-42{width:42%}
.w-43{width:43%}
.w-44{width:44%}
.w-45{width:45%}
.w-46{width:46%}
.w-47{width:47%}
.w-48{width:48%}
.w-49{width:49%}
.w-50{width:50%}
.w-51{width:51%}
.w-52{width:52%}
.w-53{width:53%}
.w-54{width:54%}
.w-55{width:55%}
.w-56{width:56%}
.w-57{width:57%}
.w-58{width:58%}
.w-59{width:59%}
.w-60{width:60%}
.w-61{width:61%}
.w-62{width:62%}
.w-63{width:63%}
.w-64{width:64%}
.w-65{width:65%}
.w-66{width:66%}
.w-67{width:67%}
.w-68{width:68%}
.w-69{width:69%}
.w-70{width:70%}
.w-71{width:71%}
.w-72{width:72%}
.w-73{width:73%}
.w-74{width:74%}
.w-75{width:75%}
.w-76{width:76%}
.w-77{width:77%}
.w-78{width:78%}
.w-79{width:79%}
.w-80{width:80%}
.w-81{width:81%}
.w-82{width:82%}
.w-83{width:83%}
.w-84{width:84%}
.w-85{width:85%}
.w-86{width:86%}
.w-87{width:87%}
.w-88{width:88%}
.w-89{width:89%}
.w-90{width:90%}
.w-91{width:91%}
.w-92{width:92%}
.w-93{width:93%}
.w-94{width:94%}
.w-95{width:95%}
.w-96{width:96%}
.w-97{width:97%}
.w-98{width:98%}
.w-99{width:99%}
.w-100{width:100%}
.h-1{height:1%}
.h-2{height:2%}
.h-3{height:3%}
.h-4{height:4%}
.h-5{height:5%}
.h-6{height:6%}
.h-7{height:7%}
.h-8{height:8%}
.h-9{height:9%}
.h-10{height:10%}
.h-11{height:11%}
.h-12{height:12%}
.h-13{height:13%}
.h-14{height:14%}
.h-15{height:15%}
.h-16{height:16%}
.h-17{height:17%}
.h-18{height:18%}
.h-19{height:19%}
.h-20{height:20%}
.h-21{height:21%}
.h-22{height:22%}
.h-23{height:23%}
.h-24{height:24%}
.h-25{height:25%}
.h-26{height:26%}
.h-27{height:27%}
.h-28{height:28%}
.h-29{height:29%}
.h-30{height:30%}
.h-31{height:31%}
.h-32{height:32%}
.h-33{height:33%}
.h-34{height:34%}
.h-35{height:35%}
.h-36{height:36%}
.h-37{height:37%}
.h-38{height:38%}
.h-39{height:39%}
.h-40{height:40%}
.h-41{height:41%}
.h-42{height:42%}
.h-43{height:43%}
.h-44{height:44%}
.h-45{height:45%}
.h-46{height:46%}
.h-47{height:47%}
.h-48{height:48%}
.h-49{height:49%}
.h-50{height:50%}
.h-51{height:51%}
.h-52{height:52%}
.h-53{height:53%}
.h-54{height:54%}
.h-55{height:55%}
.h-56{height:56%}
.h-57{height:57%}
.h-58{height:58%}
.h-59{height:59%}
.h-60{height:60%}
.h-61{height:61%}
.h-62{height:62%}
.h-63{height:63%}
.h-64{height:64%}
.h-65{height:65%}
.h-66{height:66%}
.h-67{height:67%}
.h-68{height:68%}
.h-69{height:69%}
.h-70{height:70%}
.h-71{height:71%}
.h-72{height:72%}
.h-73{height:73%}
.h-74{height:74%}
.h-75{height:75%}
.h-76{height:76%}
.h-77{height:77%}
.h-78{height:78%}
.h-79{height:79%}
.h-80{height:80%}
.h-81{height:81%}
.h-82{height:82%}
.h-83{height:83%}
.h-84{height:84%}
.h-85{height:85%}
.h-86{height:86%}
.h-87{height:87%}
.h-88{height:88%}
.h-89{height:89%}
.h-90{height:90%}
.h-91{height:91%}
.h-92{height:92%}
.h-93{height:93%}
.h-94{height:94%}
.h-95{height:95%}
.h-96{height:96%}
.h-97{height:97%}
.h-98{height:98%}
.h-99{height:99%}
.h-100{height:100%}

/* 页头（各业务页通用） */
.page-h{display:flex;align-items:flex-end;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.page-h h1{font-family:var(--f-display);font-size:20px;font-weight:700;letter-spacing:-.01em}
.page-h p{margin-top:3px}
.page-h-act{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mt{margin-top:14px}
.li-arrow{width:15px;height:15px;color:var(--muted);flex:none}
.ok-txt{color:var(--ok)}
.amber-txt{color:var(--amber)}

/* 分布条（多页共用） */
.dist{display:grid;gap:10px}
.dist .dr{display:grid;grid-template-columns:132px 1fr 56px;gap:11px;align-items:center;font-size:12.5px}
.dist .dr span{color:var(--ink-2)}
.dist .dr b{text-align:right;font-size:12.5px}
.funnel .fn .fbar i.low{background:linear-gradient(90deg,#d18b30,var(--amber))}