/* ==========================================================================
   学艺玩具 · 接单管理  Design System v4「晴空」
   取自参考图 3.jpg：天空蓝为主 + 彩虹五色做步骤色；白底、圆角、软阴影
   参考图 1.jpg 的圆润糖果图标：每个图标都放在 26px 的彩色圆角底片上
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

:root{
  /* 底色：白为主，浅天蓝只用来分区（3.jpg 的天空色被压到极淡） */
  --bg:#FFFFFF;
  --bg-2:#F7FAFD;
  --panel:#FFFFFF;
  --fill:#F2F7FC;
  --line:#E4EEF7;
  --line-2:#EFF5FA;
  --line-3:#D2E2F0;

  /* 文字：深海军蓝，比纯黑柔，比灰更清楚 */
  --ink:#0D2A43;
  --ink-2:#40566E;
  --ink-3:#5A7086;
  --ink-4:#6F8698;

  /* 主色：天空蓝（白字 4.98:1） */
  --brand:#1C74B5;
  --brand-2:#0F5D95;
  --brand-soft:#E9F4FC;
  --brand-line:#BFDCF3;
  --btn-bg:#1C74B5;
  --btn-ink:#FFFFFF;

  /* 语义色 */
  --amber:#A26800;
  --amber-soft:#FFF4E0;
  --amber-line:#F6DFB8;
  --red:#C0362A;
  --red-soft:#FDECEA;
  --red-line:#F7CFC9;
  --green:#147A4B;
  --green-soft:#E7F6EE;
  --green-line:#C6E9D6;
  --purple:#6D3FD1;
  --purple-soft:#F1EBFE;
  --purple-line:#DCCDF9;
  --teal:#0C8C86;
  --teal-soft:#E4F6F5;
  --teal-line:#BEE7E4;
  --blue:#1C74B5;
  --blue-soft:#E9F4FC;
  --blue-line:#BFDCF3;
  --pink:#C2306E;
  --pink-soft:#FDECF3;

  /* 五步各自的颜色（对应彩虹） */
  --s1:#1C74B5;  /* 接单 · 蓝 */
  --s2:#C77A00;  /* 生产 · 琥珀 */
  --s3:#0C8C86;  /* 出货 · 青 */
  --s4:#6D3FD1;  /* 换单 · 紫 */
  --s5:#147A4B;  /* 收款 · 绿 */

  --r-sm:10px;
  --r:14px;
  --r-lg:18px;
  --r-xl:24px;
  --shadow:0 2px 6px rgba(13,42,67,.045);
  --shadow-lg:0 30px 70px -34px rgba(13,42,67,.42);
  --side:214px;
}

html[data-theme="dark"]{
  --bg:#0B1420;
  --bg-2:#080F18;
  --panel:#111D2A;
  --fill:#16242F;
  --line:#21323F;
  --line-2:#182634;
  --line-3:#31465A;

  --ink:#F2F8FD;
  --ink-2:#C4D6E4;
  --ink-3:#9DB2C4;
  --ink-4:#8199AC;

  --brand:#4FA8E8;
  --brand-2:#6FBDF2;
  --brand-soft:rgba(79,168,232,.14);
  --brand-line:rgba(79,168,232,.34);
  --btn-bg:#2E8FD6;
  --btn-ink:#04121E;

  --amber:#F5BE6B;
  --amber-soft:rgba(245,190,107,.13);
  --amber-line:rgba(245,190,107,.3);
  --red:#FF8B7D;
  --red-soft:rgba(255,139,125,.13);
  --red-line:rgba(255,139,125,.3);
  --green:#5FD6A0;
  --green-soft:rgba(95,214,160,.13);
  --green-line:rgba(95,214,160,.3);
  --purple:#B79CFF;
  --purple-soft:rgba(183,156,255,.14);
  --purple-line:rgba(183,156,255,.3);
  --teal:#59D6CE;
  --teal-soft:rgba(89,214,206,.13);
  --teal-line:rgba(89,214,206,.3);
  --blue:#7FC0F5;
  --blue-soft:rgba(127,192,245,.14);
  --blue-line:rgba(127,192,245,.3);
  --pink:#FF9FC4;
  --pink-soft:rgba(255,159,196,.14);

  --s1:#7FC0F5; --s2:#F5BE6B; --s3:#59D6CE; --s4:#B79CFF; --s5:#5FD6A0;

  --shadow:none;
  --shadow-lg:0 34px 80px -30px rgba(0,0,0,.75);
}

html,body{margin:0;height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font:400 14.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
em{font-style:normal}
::selection{background:var(--brand-soft);color:var(--brand-2)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}

.ttl{font-size:22px;font-weight:700;letter-spacing:-.4px;line-height:1.3}
.sub{font-size:13.5px;color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}

/* 彩虹条：取自 3.jpg 的糖果配色，只做 4px 装饰 */
.rainbow{display:flex;height:4px;border-radius:99px;overflow:hidden;background:var(--line-2)}
.rainbow i{flex:1}
.rainbow i:nth-child(1){background:#4FA8E8}
.rainbow i:nth-child(2){background:#F7C948}
.rainbow i:nth-child(3){background:#59C9A5}
.rainbow i:nth-child(4){background:#A78BFA}
.rainbow i:nth-child(5){background:#FB8FA7}

/* ---------------- 应用骨架 ---------------- */
.app{display:flex;min-height:100%}

.side{
  width:var(--side);flex:0 0 var(--side);
  background:var(--bg);border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  padding:18px 12px 12px;
}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px 18px}
.brand .mark{
  width:36px;height:36px;flex:0 0 36px;border-radius:12px;
  background:linear-gradient(150deg,#4FA8E8,#1C74B5 62%,#0F5D95);
  color:#fff;
  display:grid;place-items:center;font-size:17px;font-weight:700;letter-spacing:0;
  box-shadow:0 8px 18px -10px rgba(28,116,181,.9);
}
.brand .nm{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.brand .nm b{font-size:15px;font-weight:700;letter-spacing:-.2px;white-space:nowrap}
.brand .nm em{font-size:11.5px;color:var(--ink-4);white-space:nowrap}

.nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav .gl{font-size:11px;font-weight:600;color:var(--ink-4);letter-spacing:.8px;padding:14px 10px 7px}
.nav a{
  display:flex;align-items:center;gap:10px;
  height:42px;padding:0 10px 0 8px;border-radius:12px;
  font-size:13.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;
  transition:background .14s,color .14s;
}
/* 图标底片：1.jpg 包装上的圆角彩色小片 */
.nav a svg{
  width:28px;height:28px;flex:0 0 28px;padding:6px;border-radius:9px;
  stroke:currentColor;stroke-width:1.9;fill:none;
  background:var(--fill);color:var(--ink-3);
  transition:.14s;
}
.nav a:nth-of-type(1) svg{background:#E9F4FC;color:#1C74B5}
.nav a:nth-of-type(2) svg{background:#FFF4E0;color:#A26800}
.nav a:nth-of-type(3) svg{background:#E4F6F5;color:#0C8C86}
.nav a:nth-of-type(4) svg{background:#F1EBFE;color:#6D3FD1}
.nav a:nth-of-type(5) svg{background:#E7F6EE;color:#147A4B}
.nav a:nth-of-type(6) svg{background:#FDECF3;color:#C2306E}
.nav a:nth-of-type(7) svg{background:#E9F4FC;color:#1C74B5}
.nav a:nth-of-type(8) svg{background:#FFF4E0;color:#A26800}
.nav a:nth-of-type(9) svg{background:#E4F6F5;color:#0C8C86}
.nav a:nth-of-type(10) svg{background:#F1EBFE;color:#6D3FD1}
html[data-theme="dark"] .nav a svg{background:rgba(255,255,255,.06);color:var(--ink-3)}
html[data-theme="dark"] .nav a:nth-of-type(1) svg{background:rgba(79,168,232,.16);color:#7FC0F5}
html[data-theme="dark"] .nav a:nth-of-type(2) svg{background:rgba(245,190,107,.16);color:#F5BE6B}
html[data-theme="dark"] .nav a:nth-of-type(3) svg{background:rgba(89,214,206,.16);color:#59D6CE}
html[data-theme="dark"] .nav a:nth-of-type(4) svg{background:rgba(183,156,255,.18);color:#B79CFF}
html[data-theme="dark"] .nav a:nth-of-type(5) svg{background:rgba(95,214,160,.16);color:#5FD6A0}
html[data-theme="dark"] .nav a:nth-of-type(6) svg{background:rgba(255,159,196,.16);color:#FF9FC4}
html[data-theme="dark"] .nav a:nth-of-type(7) svg{background:rgba(79,168,232,.16);color:#7FC0F5}
html[data-theme="dark"] .nav a:nth-of-type(8) svg{background:rgba(245,190,107,.16);color:#F5BE6B}
html[data-theme="dark"] .nav a:nth-of-type(9) svg{background:rgba(89,214,206,.16);color:#59D6CE}
html[data-theme="dark"] .nav a:nth-of-type(10) svg{background:rgba(183,156,255,.18);color:#B79CFF}

.nav a:hover{background:var(--fill);color:var(--ink)}
.nav a.on{background:var(--brand-soft);color:var(--brand-2);font-weight:700}
html[data-theme="dark"] .nav a.on{color:var(--brand)}
.nav a.on svg{background:var(--brand);color:#fff;padding:5px;stroke-width:2}
html[data-theme="dark"] .nav a.on svg{background:var(--brand);color:#04121E}
.nav a .tail{margin-left:auto;font-size:11px;font-weight:600;color:var(--ink-4)}
.nav a.on .tail{color:var(--brand)}
.nav a.off{color:var(--ink-4);cursor:default}
.nav a.off:hover{background:none;color:var(--ink-4)}
.nav a.off svg{opacity:.62}

.side-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-2)}
.me{display:flex;align-items:center;gap:9px;padding:8px;border-radius:12px;transition:background .14s}
.me:hover{background:var(--fill)}
.me .av{
  width:30px;height:30px;flex:0 0 30px;border-radius:10px;
  background:linear-gradient(150deg,#FFE7C2,#FFD39B);color:#8A5200;
  display:grid;place-items:center;font-size:12.5px;font-weight:700;
}
.me .who{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.me .who b{font-size:12.5px;font-weight:600;white-space:nowrap}
.me .who em{font-size:11px;color:var(--ink-4);white-space:nowrap}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  height:62px;flex:0 0 62px;
  display:flex;align-items:center;gap:12px;
  padding:0 26px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:20;
}
.crumb{font-size:13px;color:var(--ink-4);display:flex;align-items:center;gap:8px}
.crumb b{color:var(--ink);font-weight:600}
.crumb .sl{color:var(--line-3)}
.spacer{flex:1}

.iconb{
  width:36px;height:36px;border-radius:11px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-3);
  background:var(--bg);transition:.14s;
}
.iconb:hover{color:var(--brand);border-color:var(--brand-line);background:var(--brand-soft)}
.iconb svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none}

.wrap{padding:30px 26px 56px;max-width:1180px;width:100%;margin:0 auto}
.wrap.wide{max-width:1440px}

/* 页头 */
.ph{display:flex;align-items:flex-end;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.ph .h{display:flex;flex-direction:row;align-items:center;gap:15px;min-width:0}
.ph .h .tt2{display:flex;flex-direction:column;gap:5px;min-width:0}
.ph .phe{
  width:48px;height:48px;flex:0 0 48px;border-radius:16px;
  display:grid;place-items:center;color:#fff;
  box-shadow:0 10px 20px -12px rgba(13,42,67,.5);
}
.ph .phe svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.85;fill:none}
.ph h1{font-size:26px;font-weight:700;letter-spacing:-.7px;line-height:1.25}
.ph p{font-size:14px;color:var(--ink-3)}
.ph .rt{margin-left:auto;display:flex;align-items:center;gap:9px}

/* ---------------- 按钮 ---------------- */
.btn{
  height:40px;padding:0 16px;border-radius:12px;
  border:1px solid var(--line-3);background:var(--bg);color:var(--ink-2);
  font-size:13.5px;font-weight:600;letter-spacing:0;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:.15s;white-space:nowrap;
}
.btn:hover{border-color:var(--brand-line);color:var(--brand);background:var(--brand-soft)}
.btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none}
.btn-primary{
  background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-ink);
  box-shadow:0 3px 10px -4px rgba(28,116,181,.6);
}
.btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2);color:#fff;box-shadow:0 6px 16px -8px rgba(15,93,149,.8)}
html[data-theme="dark"] .btn-primary:hover{background:var(--brand-2);color:var(--btn-ink)}
.btn-primary:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.btn-soft{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-2)}
html[data-theme="dark"] .btn-soft{color:var(--brand)}
.btn-soft:hover{background:var(--brand-soft);border-color:var(--brand)}
.btn-lg{height:48px;padding:0 24px;font-size:15px;border-radius:14px}
.btn-sm{height:34px;padding:0 13px;font-size:12.5px;border-radius:10px}
.btn-danger{background:var(--red-soft);border-color:var(--red-line);color:var(--red)}
.btn-ghost{border-color:transparent;background:none;color:var(--ink-3)}
.btn-ghost:hover{background:var(--fill);color:var(--ink)}
.btn-block{width:100%}

/* ---------------- 卡片 ---------------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.card.flat{box-shadow:none}
.card-h{display:flex;align-items:center;gap:10px;padding:18px 20px 0}
.card-h h2{font-size:15px;font-weight:700;letter-spacing:-.2px}
.card-h .more{margin-left:auto;font-size:12.5px;color:var(--ink-3);display:inline-flex;align-items:center;gap:3px}
.card-h .more:hover{color:var(--brand)}
.card-b{padding:16px 20px 20px}

/* 无边框区块 */
.sec{border-top:1px solid var(--line-2);padding:24px 0}
.sec:first-of-type{border-top:0;padding-top:0}
.sec-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sec-h h2{font-size:15px;font-weight:700;letter-spacing:-.2px}
.sec-h .n{font-size:12px;color:var(--ink-4);font-weight:500}
.sec-h .rt{margin-left:auto;display:flex;gap:8px;align-items:center}

/* ---------------- 徽标 / 标签 ---------------- */
.pill{
  display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;
  border-radius:8px;font-size:11.5px;font-weight:600;white-space:nowrap;letter-spacing:0;
}
.pill i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 5px}
.p-g{color:var(--green);background:var(--green-soft)}
.p-a{color:var(--amber);background:var(--amber-soft)}
.p-r{color:var(--red);background:var(--red-soft)}
.p-b{color:var(--brand-2);background:var(--brand-soft)}
html[data-theme="dark"] .p-b{color:var(--brand)}
.p-p{color:var(--purple);background:var(--purple-soft)}
.p-n{color:var(--ink-3);background:var(--fill)}
.tag{font-size:11.5px;color:var(--ink-3);background:var(--fill);border-radius:7px;padding:2px 7px;font-weight:500}

/* ---------------- 五步圆圈流程（渐进显示） ---------------- */
.flow{display:flex;list-style:none;margin:0;padding:0;align-items:flex-start}
.flow li{
  position:relative;min-width:0;flex:0 1 132px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
}
.flow li::before{
  content:"";position:absolute;top:22px;left:calc(50% + 27px);
  width:calc(100% - 54px);height:2px;background:var(--line-3);border-radius:2px;z-index:0;
}
.flow li:last-child::before{display:none}
.flow li.done::before{background:var(--stc,var(--brand));opacity:.42}
.flow .dot{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;
  display:grid;place-items:center;position:relative;z-index:1;
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--bg);border:2px solid var(--line-3);color:var(--ink-4);
  transition:.2s;
}
.flow .dot svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.6;fill:none}
.flow .tx{display:flex;flex-direction:column;gap:2px;min-width:0;padding:0 2px}
.flow .tx b{font-size:13px;font-weight:700;color:var(--ink-4);letter-spacing:0}
.flow .tx em{font-size:11px;color:var(--ink-4);font-variant-numeric:tabular-nums;line-height:1.5}
.flow .tx em.by{color:var(--ink-4);opacity:.92}

/* 已完成：各自颜色实心 */
.flow li.done .dot{background:var(--stc,var(--brand));border-color:var(--stc,var(--brand));color:#fff;box-shadow:0 6px 14px -8px var(--stc,var(--brand))}
html[data-theme="dark"] .flow li.done .dot{color:#08202E}
.flow li.done .tx b{color:var(--ink-2)}
.flow li.done .tx em{color:var(--ink-3)}
/* 当前（未确认） */
.flow li.now .dot{background:var(--bg);border-color:var(--stc,var(--brand));border-width:2.5px;color:var(--stc,var(--brand));box-shadow:0 0 0 5px color-mix(in srgb,var(--stc,var(--brand)) 12%,transparent)}
.flow li.now .tx b{color:var(--stc,var(--brand));font-weight:700}
.flow li.now .tx em{color:var(--ink-3)}
/* 卡住 / 逾期 */
.flow li.warn .dot{border-color:var(--amber);color:var(--amber);background:var(--amber-soft);box-shadow:0 0 0 5px var(--amber-soft)}
.flow li.warn .tx b{color:var(--amber)}
.flow li.warn .tx em{color:var(--amber)}
/* 未到（默认不显示，留着以防） */
.flow li.todo{opacity:.4}
.flow li .who{font-size:10.5px;color:var(--ink-4)}

/* 下一步提示（圆圈只显示走到的步骤，后面用一句话交代） */
.flowrow{display:flex;align-items:center;gap:20px}
.nextstep{
  margin-left:auto;flex:0 0 auto;min-width:196px;max-width:250px;
  display:flex;flex-direction:column;gap:5px;
  padding:12px 15px;border:1.5px dashed var(--line-3);border-radius:14px;
  background:color-mix(in srgb,var(--bg) 70%,transparent);
}
.nextstep .k{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--ink-3);letter-spacing:.2px}
.nextstep .k i{
  width:15px;height:15px;border-radius:50%;border:2px dashed var(--stc,var(--brand));
  display:inline-block;flex:0 0 15px;
}
.nextstep .who{font-size:12.5px;color:var(--ink-3);line-height:1.55}
.nextstep .who b{color:var(--ink);font-weight:700}
.nextstep.late{border-color:var(--amber-line);background:var(--amber-soft)}
.nextstep.late .who,.nextstep.late .who b{color:var(--amber)}

/* 竖排 */
.flow.v{flex-direction:column;gap:0;align-items:stretch}
.flow.v li{
  flex:none;flex-direction:row;align-items:flex-start;text-align:left;gap:14px;
  padding-bottom:20px;
}
.flow.v li:last-child{padding-bottom:0}
.flow.v li::before{top:44px;bottom:0;left:21px;right:auto;width:2px;height:auto}
.flow.v .tx{padding-top:8px;flex:1}
.flow.v .tx b{font-size:13.5px}
.flow.v .tx em{font-size:11.5px;line-height:1.6}
.flow.v .dot{align-self:flex-start}

/* 极简迷你流程点（列表里用）：未走到的点直接隐藏 */
.mini{display:inline-flex;align-items:center;gap:3px}
.mini i{width:7px;height:7px;border-radius:50%;background:var(--line-3);flex:0 0 7px}
.mini i:nth-child(1){--mc:#1C74B5}
.mini i:nth-child(2){--mc:#C77A00}
.mini i:nth-child(3){--mc:#0C8C86}
.mini i:nth-child(4){--mc:#6D3FD1}
.mini i:nth-child(5){--mc:#147A4B}
html[data-theme="dark"] .mini i:nth-child(1){--mc:#7FC0F5}
html[data-theme="dark"] .mini i:nth-child(2){--mc:#F5BE6B}
html[data-theme="dark"] .mini i:nth-child(3){--mc:#59D6CE}
html[data-theme="dark"] .mini i:nth-child(4){--mc:#B79CFF}
html[data-theme="dark"] .mini i:nth-child(5){--mc:#5FD6A0}
.mini i.on{background:var(--mc)}
.mini i.now{background:transparent;border:2px solid var(--mc);box-shadow:0 0 0 2px color-mix(in srgb,var(--mc) 14%,transparent)}
.mini i.late{background:var(--amber)}
.mini i:not(.on):not(.now):not(.late){display:none}

/* ---------------- 表格 ---------------- */
.tbl{width:100%;border-collapse:collapse}
.tbl th{
  font-size:11.5px;font-weight:600;color:var(--ink-4);letter-spacing:.3px;
  text-align:left;padding:0 12px 11px;border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.tbl td{
  padding:14px 12px;border-bottom:1px solid var(--line-2);
  font-size:13.5px;color:var(--ink-2);vertical-align:middle;
}
.tbl tr:last-child td{border-bottom:0}
.tbl .r{text-align:right}
.tbl .c{text-align:center}
.tbl td.b{color:var(--ink);font-weight:600}
.tbl tbody tr.click{cursor:pointer;transition:background .13s}
.tbl tbody tr.click:hover{background:var(--bg-2)}

/* 列表行 */
.rows{display:flex;flex-direction:column}
.row{
  display:flex;align-items:center;gap:14px;
  padding:14px 2px;border-bottom:1px solid var(--line-2);
  transition:.13s;
}
.row:last-child{border-bottom:0}
a.row:hover{background:var(--bg-2)}
.row .lead{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.row .lead b{font-size:14px;font-weight:600;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .lead span{font-size:12px;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .mid{display:flex;flex-direction:column;gap:3px;align-items:flex-end;min-width:0}
.row .mid b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.row .mid span{font-size:11.5px;color:var(--ink-4);white-space:nowrap}
.row .go{color:var(--ink-4);flex:0 0 auto}
.row .go svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.9;fill:none}

/* ---------------- KPI ---------------- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:17px 18px 15px;display:flex;flex-direction:column;gap:2px;
  transition:box-shadow .16s,transform .16s,border-color .16s;
}
.kpis .kpi:nth-child(1){background:linear-gradient(170deg,#F1F8FF,#FFFFFF 72%)}
.kpis .kpi:nth-child(2){background:linear-gradient(170deg,#F0FBFA,#FFFFFF 72%)}
.kpis .kpi:nth-child(3){background:linear-gradient(170deg,#FFFAF0,#FFFFFF 72%)}
.kpis .kpi:nth-child(4){background:linear-gradient(170deg,#FFF5F4,#FFFFFF 72%)}
html[data-theme="dark"] .kpis .kpi{background:var(--panel)}
html[data-theme="dark"] .kpis .kpi:nth-child(1){background:linear-gradient(170deg,rgba(79,168,232,.12),var(--panel) 74%)}
html[data-theme="dark"] .kpis .kpi:nth-child(2){background:linear-gradient(170deg,rgba(89,214,206,.10),var(--panel) 74%)}
html[data-theme="dark"] .kpis .kpi:nth-child(3){background:linear-gradient(170deg,rgba(245,190,107,.10),var(--panel) 74%)}
html[data-theme="dark"] .kpis .kpi:nth-child(4){background:linear-gradient(170deg,rgba(255,139,125,.10),var(--panel) 74%)}
a.kpi:hover{box-shadow:0 10px 24px -18px rgba(13,42,67,.6);border-color:var(--line-3);transform:translateY(-1px)}
.kpi .k{font-size:12.5px;color:var(--ink-3);font-weight:500;display:flex;align-items:center;gap:7px}
.kpi .k i{width:8px;height:8px;border-radius:3px;background:var(--line-3);flex:0 0 8px}
.kpi .v{font-size:30px;font-weight:700;letter-spacing:-1.2px;line-height:1.25;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:4px}
.kpi .v small{font-size:12px;font-weight:500;color:var(--ink-4);letter-spacing:0}
.kpi .d{font-size:11.5px;color:var(--ink-4);display:flex;align-items:center;gap:4px}
.kpi .d.up{color:var(--amber)}
.kpi .d.ok{color:var(--green)}

/* ---------------- 表单 ---------------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;font-weight:600;color:var(--ink-3)}
.inp{
  height:44px;padding:0 14px;border-radius:12px;
  border:1.5px solid var(--line-3);background:var(--bg);color:var(--ink);
  font-size:14px;font-weight:500;width:100%;
  transition:border-color .14s,box-shadow .14s;
}
.inp::placeholder{color:var(--ink-4);font-weight:400}
.inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.inp.big{height:50px;font-size:15px}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-4) 50%),linear-gradient(135deg,var(--ink-4) 50%,transparent 50%);background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}

.kv{display:grid;gap:14px 24px}
.kv.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kv.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kv .it{display:flex;flex-direction:column;gap:4px}
.kv .it .k{font-size:11.5px;color:var(--ink-4);font-weight:500}
.kv .it .v{font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------------- 弹层 ---------------- */
.mask{
  position:fixed;inset:0;z-index:60;background:rgba(13,42,67,.36);
  display:none;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(3px);
}
.mask.on{display:flex}
.sheet{
  background:var(--panel);border-radius:20px;width:min(440px,100%);
  padding:26px;box-shadow:var(--shadow-lg);border:1px solid var(--line);
  animation:pop .2s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.sheet h3{font-size:18px;font-weight:700;letter-spacing:-.3px;margin-bottom:5px}
.sheet .desc{font-size:13px;color:var(--ink-3);margin-bottom:18px;line-height:1.6}
.sheet .acts{display:flex;gap:9px;margin-top:22px}
.sheet .acts .btn{flex:1}
.sumline{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;font-size:13px;color:var(--ink-3)}
.sumline b{font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.sumline.tot{border-top:1px solid var(--line);margin-top:4px;padding-top:13px}

/* 提示条 */
.note{
  display:flex;gap:10px;padding:13px 15px;border-radius:14px;
  background:var(--bg-2);border:1px solid var(--line-2);
  font-size:12.5px;color:var(--ink-3);line-height:1.65;
}
.note b{color:var(--ink-2);font-weight:600}
.note.warn{background:var(--amber-soft);border-color:var(--amber-line);color:var(--amber)}
.note.info{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue)}
.note.ok{background:var(--green-soft);border-color:var(--green-line);color:var(--green)}

/* 空态 */
.empty{text-align:center;padding:48px 20px;color:var(--ink-4);font-size:13px}
.empty svg{width:30px;height:30px;stroke:currentColor;stroke-width:1.4;fill:none;margin-bottom:10px;opacity:.6}

/* 响应式 */
@media(max-width:1180px){
  :root{--side:198px}
  .wrap{padding:26px 22px 48px}
}
@media(max-width:900px){
  .app{flex-direction:column}
  .side{
    width:100%;flex:none;height:auto;position:static;
    border-right:0;border-bottom:1px solid var(--line);
    padding:12px 12px 6px;
  }
  .brand{padding:0 2px 10px}
  .brand .mark{width:32px;height:32px;flex-basis:32px;border-radius:10px;font-size:15px}
  .nav{flex-direction:row;flex-wrap:wrap;overflow:visible;gap:4px;padding-bottom:9px}
  .nav a{height:36px;font-size:13px;padding:0 11px 0 8px}
  .nav a svg{width:15px;height:15px}
  .nav .gl{display:none}
  .nav a{height:40px;padding:0 12px 0 8px;flex:0 0 auto;border-radius:11px}
  .nav a .tail{display:none}
  .side-foot{display:none}
  .topbar{padding:0 16px;height:56px;flex-basis:56px;position:sticky}
  .wrap{padding:20px 16px 44px}
  .ph h1{font-size:22px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow:not(.v) .tx em.by{display:none}
  .kv.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flowrow{flex-direction:column;align-items:stretch;gap:16px}
  .nextstep{margin-left:0;max-width:none;min-width:0}
}
@media(max-width:520px){
  .flow li{flex:0 1 96px}
  .flow .tx b{font-size:11.5px}
  .flow .tx em{font-size:10px}
  .flow .dot{width:38px;height:38px;flex-basis:38px;font-size:12.5px}
  .flow li::before{top:19px;left:calc(50% + 23px);width:calc(100% - 46px)}
  .kpi .v{font-size:26px}
  .kv.c2,.kv.c3{grid-template-columns:minmax(0,1fr)}
}