:root{
  --bg:#f6f7fb; --panel:#fff; --ink:#0f172a; --ink-2:#475569; --muted:#94a3b8;
  --line:#e8ebf1; --line-2:#f1f4f9;
  --brand:#4f46e5; --brand-soft:#eef2ff; --brand-ink:#3730a3;
  --ok:#047857; --ok-soft:#ecfdf5; --warn:#b45309; --warn-soft:#fffbeb;
  --danger:#be123c; --danger-soft:#fff1f2; --info:#0369a1; --info-soft:#f0f9ff;
  --r:12px; --r-sm:8px;
  --sh:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.12);
  --sh-lg:0 24px 48px -16px rgba(15,23,42,.24);
}
*{box-sizing:border-box;margin:0;padding:0}
/* 组件自身有 display 声明，UA 的 [hidden] 会被覆盖，这里显式兜底 */
[hidden]{display:none!important}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* ---------- 布局 ---------- */
.app{display:flex;min-height:100vh}
.side{
  width:208px;flex:0 0 208px;background:var(--panel);border-right:1px solid var(--line);
  padding:20px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;
  z-index:30;   /* 让侧栏的身份菜单能盖住主区（sticky 不设 z-index 时会被后面的内容压住） */
  transition:width .2s ease,flex-basis .2s ease,padding .2s ease;
}
.brand{display:flex;align-items:center;gap:9px;padding:2px 8px 14px;position:relative}
.collapse{
  position:absolute;right:-13px;top:23px;z-index:5;
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-2);background:#fff;border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(15,23,42,.08);transition:.15s;
}
.collapse:hover{color:var(--brand);border-color:var(--brand);box-shadow:0 3px 10px rgba(79,70,229,.22)}
.collapse svg{width:13px;height:13px;transition:transform .2s ease}

/* 折叠态：只留图标 */
.app.mini .side{width:64px;flex:0 0 64px;padding:20px 8px}
.app.mini .brand{justify-content:center;padding:2px 0 14px}
.app.mini .brand .txt,.app.mini .foot{display:none}
.app.mini .nav button{justify-content:center;padding:10px 0}
.app.mini .nav button span{display:none}
.app.mini .collapse svg{transform:rotate(180deg)}
.brand .logo{
  width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#6366f1,#4338ca);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;letter-spacing:-.5px;
  box-shadow:0 4px 10px -2px rgba(79,70,229,.5);
}
.brand .txt b{display:block;font-size:13px;letter-spacing:.2px}
.brand .txt span{font-size:11px;color:var(--muted)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  font-size:13px;color:var(--ink-2);text-align:left;transition:.15s;
}
.nav button:not(.on){background:transparent}
.nav button:hover{background:var(--line-2);color:var(--ink)}
.nav button.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.nav svg{width:16px;height:16px;flex:0 0 16px;opacity:.85}
.side .sp{flex:1}
.side .foot{font-size:11px;color:var(--muted);padding:0 10px;line-height:1.7}

.main{flex:1;min-width:0;padding:22px 26px 64px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.crumb{font-size:11.5px;color:var(--muted);margin-bottom:3px;letter-spacing:.2px}
.crumb b{color:var(--ink-2);font-weight:600}
.topbar h1{font-size:19px;font-weight:700;letter-spacing:-.2px}
.topbar p{font-size:12.5px;color:var(--muted);margin-top:2px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:7px 13px;min-width:92px;
}
.chip b{display:block;font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.chip span{font-size:11px;color:var(--muted)}
.chip.accent b{color:var(--brand)}

/* ---------- 卡片 ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:16px}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-2)}
.card-hd h2{font-size:13px;font-weight:650;letter-spacing:.2px}
.card-hd .sub{font-size:11.5px;color:var(--muted);font-weight:400;margin-left:6px}
.card-bd{padding:14px 16px}
.card-bd.tight{padding:10px 12px}
.cols{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px;align-items:start}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:1080px){.cols,.cols-2{grid-template-columns:1fr}}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel);font-size:12.5px;color:var(--ink-2);
  transition:.15s;white-space:nowrap;
}
.btn:hover{border-color:#c7cddb;background:#fbfcfe;color:var(--ink)}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 2px 8px -2px rgba(79,70,229,.45)}
.btn.pri:hover{background:#4338ca;border-color:#4338ca;color:#fff}
.btn.danger{color:var(--danger);border-color:#fecdd3;background:var(--danger-soft)}
.btn.danger:hover{background:#ffe4e6;color:var(--danger)}
.btn.sm{padding:4px 9px;font-size:12px;border-radius:7px}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn svg{width:14px;height:14px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}

/* ---------- 表单 ---------- */
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;color:var(--ink-2);margin-bottom:5px;font-weight:500}
.field .hint{font-size:11px;color:var(--muted);margin-top:4px}
.inp{
  width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:#fcfdff;
  transition:.15s;font-size:13px;
}
.inp:focus{outline:none;border-color:#a5b4fc;background:#fff;box-shadow:0 0 0 3px rgba(99,102,241,.12)}
textarea.inp{min-height:72px;resize:vertical;line-height:1.6}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- 列表项 ---------- */
.item{
  border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-bottom:8px;
  cursor:pointer;transition:.15s;background:#fff;
}
.item:hover{border-color:#c7cddb;box-shadow:0 2px 8px -4px rgba(15,23,42,.16)}
.item.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.item .t{font-weight:600;font-size:13px;margin-bottom:4px;display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.item .m{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.item .price{font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600}

/* ---------- 标记 ---------- */
.badge{
  display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 8px;border-radius:20px;
  border:1px solid transparent;font-weight:500;white-space:nowrap;
}
.badge.gray{background:#f1f5f9;color:var(--ink-2);border-color:#e2e8f0}
.badge.blue{background:var(--brand-soft);color:var(--brand-ink);border-color:#e0e7ff}
.badge.green{background:var(--ok-soft);color:var(--ok);border-color:#d1fae5}
.badge.amber{background:var(--warn-soft);color:var(--warn);border-color:#fde68a}
.badge.red{background:var(--danger-soft);color:var(--danger);border-color:#fecdd3}
.badge .dot{width:5px;height:5px;border-radius:50%;background:currentColor}

/* ---------- 表格 ---------- */
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.table th{
  text-align:left;font-weight:600;font-size:11.5px;color:var(--muted);padding:8px 10px;
  border-bottom:1px solid var(--line);background:#fbfcfe;white-space:nowrap;position:sticky;top:0;
}
.table th:first-child{border-top-left-radius:8px}
.table th:last-child{border-top-right-radius:8px}
.table td{padding:9px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.table tbody tr:hover td{background:#fbfdff}
.table tbody tr:last-child td{border-bottom:0}
.num{font-variant-numeric:tabular-nums;text-align:right;font-weight:600}
.t-in{color:var(--ok)} .t-out{color:var(--danger)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;color:var(--ink-2)}
.scroll{max-height:420px;overflow:auto;border-radius:8px}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px}
.kpi{background:#fbfcfe;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.kpi b{display:block;font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.kpi span{font-size:11px;color:var(--muted)}
.kpi.hi{background:var(--brand-soft);border-color:#e0e7ff}
.kpi.hi b{color:var(--brand-ink)}

/* ---------- 商单详情 ---------- */
.order-hd{padding:16px;border-bottom:1px solid var(--line-2)}
.order-hd .no{font-family:ui-monospace,monospace;font-size:12px;color:var(--muted)}
.order-hd h3{font-size:15px;font-weight:650;margin:3px 0 10px;letter-spacing:-.1px}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
.meta>div{background:#fbfcfe;border:1px solid var(--line);border-radius:9px;padding:7px 10px}
.meta b{display:block;font-size:13px;font-variant-numeric:tabular-nums}
.meta span{font-size:10.5px;color:var(--muted)}

.steps{display:flex;gap:0;padding:14px 16px;border-bottom:1px solid var(--line-2);overflow:auto}
.step{flex:1;min-width:74px;text-align:center;position:relative;font-size:11px;color:var(--muted)}
.step .b{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);background:#fff;margin:0 auto 5px;
  display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--muted)}
.step:not(:last-child)::after{content:"";position:absolute;top:9px;left:calc(50% + 14px);right:calc(-50% + 14px);
  height:2px;background:var(--line)}
.step.done .b{background:var(--ok);border-color:var(--ok);color:#fff}
.step.done{color:var(--ok);font-weight:600}
.step.done:not(:last-child)::after{background:#a7f3d0}
.step.now .b{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 4px rgba(99,102,241,.15)}
.step.now{color:var(--brand-ink);font-weight:700}

.nextbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;
  background:linear-gradient(90deg,var(--brand-soft),#fafbff);border-bottom:1px solid #e6ecff;flex-wrap:wrap}
.nextbar .txt{font-size:12.5px;color:var(--brand-ink)}
.nextbar .txt b{font-weight:650}

.ms{border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-bottom:9px;background:#fff}
.ms.done{border-color:#d1fae5;background:#fbfffd}
.ms .h{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.ms .nm{font-weight:600;font-size:13px;display:flex;align-items:center;gap:7px}
.ms .amt{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-2)}
.ms .dl{font-size:11.5px;color:var(--muted);margin-top:6px;padding-left:2px;border-left:2px solid var(--line-2);padding-left:9px}

.tl{list-style:none;padding:4px 0 0}
.tl li{position:relative;padding:0 0 12px 18px;font-size:12px;color:var(--ink-2)}
.tl li::before{content:"";position:absolute;left:3px;top:6px;width:7px;height:7px;border-radius:50%;
  background:#cbd5e1;box-shadow:0 0 0 3px #f6f7fb}
.tl li::after{content:"";position:absolute;left:6px;top:16px;bottom:0;width:1px;background:var(--line)}
.tl li:last-child{padding-bottom:0}
.tl li:last-child::after{display:none}
.tl li.hi::before{background:var(--brand);box-shadow:0 0 0 3px #eef2ff}
.tl b{color:var(--ink);font-weight:600}
.tl .tm{color:var(--muted);font-size:11px;margin-left:6px}

/* ---------- 空状态 / 骨架 ---------- */
.empty{text-align:center;padding:34px 16px;color:var(--muted)}
.empty .ico{width:38px;height:38px;border-radius:12px;background:var(--line-2);display:grid;place-items:center;
  margin:0 auto 10px;color:#cbd5e1}
.empty p{font-size:12.5px}
.empty .sub{font-size:11.5px;color:#b6c2d2;margin-top:3px}
.sk{background:linear-gradient(90deg,#f1f4f9 25%,#f8fafc 37%,#f1f4f9 63%);background-size:400% 100%;
  animation:sh 1.3s ease infinite;border-radius:8px;height:14px;margin-bottom:9px}
@keyframes sh{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------- 弹窗 ---------- */
.mask{position:fixed;inset:0;background:rgba(15,23,42,.36);
  display:none;place-items:center;z-index:60;padding:20px;opacity:0;
  transition:opacity .18s ease,display .18s allow-discrete}
.mask.on{display:grid;opacity:1}
@starting-style{.mask.on{opacity:0}}
.modal{background:#fff;border-radius:14px;box-shadow:var(--sh-lg);width:min(460px,100%);
  overflow:hidden;transition:transform .2s cubic-bezier(.2,.85,.3,1),opacity .2s ease}
@starting-style{.mask.on .modal{opacity:0;transform:translateY(10px) scale(.985)}}
.modal h3{font-size:15px;font-weight:650;padding:16px 18px 0}
.modal .sub{font-size:12px;color:var(--muted);padding:4px 18px 0}
.modal .bd{padding:14px 18px}
.modal .ft{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;background:#fbfcfe;border-top:1px solid var(--line-2)}

/* ---------- 提示 ---------- */
.toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:80;
  pointer-events:none}   /* 容器常驻但不抢点击，只有 toast 本身可交互 */
.toast{pointer-events:auto}
.toast{
  display:flex;align-items:flex-start;gap:9px;background:#0f172a;color:#fff;padding:10px 14px;border-radius:10px;
  font-size:12.5px;box-shadow:var(--sh-lg);max-width:340px;animation:in .2s ease-out;
}
.toast.ok{background:#064e3b} .toast.err{background:#881337}
.toast .ic{flex:0 0 14px;margin-top:1px}
@keyframes in{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}

.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.seg{display:flex;background:#f1f4f9;border-radius:9px;padding:2px}
.seg button{display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:5px 12px;border-radius:7px;font-size:12px;color:var(--ink-2)}
.seg button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(15,23,42,.1)}
.seg button svg{flex:0 0 auto}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}

/* ---------- 任务卡片 ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(302px,1fr));gap:14px}
/* 列表视图：同一批数据换成紧凑形态 */
.cards.list{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:4px 14px 6px;box-shadow:var(--sh)}
.cards.list .table th{top:-4px}
.table svg{width:11px;height:11px;vertical-align:-1px;margin-right:3px}

.tcard{
  --accent:#4f46e5; --tint:#eef2ff;
  position:relative;border:1px solid var(--line);border-radius:14px;
  padding:15px 15px 13px 19px;cursor:pointer;display:flex;flex-direction:column;gap:9px;min-height:178px;
  overflow:hidden;isolation:isolate;
  background:linear-gradient(176deg, var(--tint) 0%, #fff 46%);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,border-color .22s,background .22s;
}
.tcard:hover{background:linear-gradient(176deg, var(--tint) 0%, #fff 60%)}
.tcard::before{                       /* 左缘状态条 */
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);
  transition:width .2s ease;
}
.tcard::after{                        /* 右上角环境光，随状态色变化 */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(250px 140px at 94% -22%, var(--tint) 0%, transparent 72%);
  opacity:.9;transition:opacity .25s ease;
}
.tcard:hover{
  transform:translateY(-3px);border-color:var(--accent);
  box-shadow:0 18px 38px -26px var(--accent), 0 6px 16px -10px rgba(15,23,42,.16);
}
.tcard:hover::before{width:6px}
.tcard:hover::after{opacity:1}
.tcard:active{transform:translateY(-1px) scale(.996)}
.tcard.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--tint), 0 16px 32px -26px var(--accent)}
.tcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.tcard .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tcard h4{font-size:14px;font-weight:650;line-height:1.45;letter-spacing:-.1px;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tcard .desc{font-size:12px;color:var(--muted);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 品类小标签：用品类色着色，淡底胶囊 */
.cat{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:10.5px;
  font-weight:600;color:var(--accent);background:var(--tint,#f1f5f9);border:1px solid var(--tint,#f1f5f9);
  letter-spacing:.02em;transition:border-color .2s,background .2s}
.cat svg{width:11px;height:11px;opacity:.85}
.tcard:hover .cat{border-color:var(--accent);background:#fff}

/* 卡内徽章统一跟随状态色 */
.tcard .badge{background:var(--tint);color:var(--accent);border-color:transparent;font-weight:600}

.tcard .facts{display:flex;gap:22px;align-items:baseline;margin-top:auto}
.tcard .facts b{display:block;font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:-.3px;line-height:1.3}
.tcard .facts span{font-size:10.5px;color:var(--muted);display:inline-flex;align-items:center;gap:3px}
.tcard .facts span svg{width:10px;height:10px;opacity:.75}
.tcard .facts .money{color:var(--accent);font-weight:700}

.tcard .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-top:10px;border-top:1px solid var(--line-2)}
.tcard .btn{transition:background .18s,border-color .18s,color .18s,box-shadow .18s}
.tcard .btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 4px 12px -8px var(--accent)}
.tcard:hover .btn{border-color:var(--accent);color:var(--accent)}
.tcard:hover .btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 8px 18px -10px var(--accent)}

.avatar{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:700;
  color:#fff;flex:0 0 22px;background:var(--accent,#4f46e5);
  background-image:linear-gradient(135deg,rgba(255,255,255,.4),transparent 70%);
  box-shadow:0 0 0 2px #fff,0 0 0 3px var(--tint,#eef2ff);transition:box-shadow .22s}
.tcard:hover .avatar{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--accent)}
.who{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2)}

.bar{height:5px;border-radius:4px;background:var(--line-2);overflow:hidden;margin-top:2px}
.tcard .bar{background:var(--tint)}
.bar>i{display:block;height:100%;border-radius:4px;background:var(--accent,linear-gradient(90deg,#6366f1,#8b5cf6));
  transition:width .6s cubic-bezier(.2,.8,.3,1)}
.barlab{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:4px}

.detail{border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh);overflow:hidden}
.detail.empty{border-style:dashed;background:transparent;box-shadow:none}
.detail.empty .empty{padding:18px 16px}
.detail.empty .empty .ico{width:30px;height:30px;margin-bottom:6px}

/* 应用封面：淡色渐变 + 主色大字，比整块饱和色更耐看 */
.appcover{height:62px;border-radius:11px;display:grid;place-items:center;overflow:hidden;position:relative;
  font-size:25px;font-weight:800;color:var(--accent);letter-spacing:.02em;
  background:linear-gradient(135deg,var(--tint,#f8fafc) 0%,#fff 78%);
  border:1px solid var(--tint,#f1f5f9);
  transition:border-color .2s ease;
}
.appcover::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120px 60px at 88% -20%,var(--tint),transparent 70%)}
.appcover span{position:relative;z-index:1}
.tcard:hover .appcover{border-color:var(--accent)}

.plan-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:4px 10px;
  border-radius:8px;border:1px solid var(--tint,#e8ebf1);background:var(--tint,#fbfcfe);
  color:var(--accent,var(--brand-ink));font-weight:600;transition:.18s}
.plan-chip:hover{background:var(--accent,var(--brand));border-color:var(--accent,var(--brand));color:#fff;
  box-shadow:0 6px 14px -10px var(--accent)}

/* =========================================================
   动效层：全部为渐进增强，浏览器不支持时自动无感降级
   1) CSS Scroll-driven Animations —— 顶部滚动进度条
   2) View Transitions API —— 视图切换转场
   3) @starting-style —— 元素"出生动画"（已在弹窗上使用）
   4) :has() —— 父级联动状态（表单聚焦、待处理高亮）
   ========================================================= */

/* 1) 滚动进度条：不监听 scroll 事件，跑在合成器线程 */
.scrollbar{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:90;pointer-events:none;
  background:linear-gradient(90deg,#6366f1,#8b5cf6 55%,#ec4899);
  transform:scaleX(0);transform-origin:0 50%;
}
@supports (animation-timeline:scroll()) {
  .scrollbar{
    animation:scrollGrow linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes scrollGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
@supports not (animation-timeline:scroll()) {
  .scrollbar{display:none}
}

/* 2) 视图切换转场：标题与 Logo 做共享元素位移，内容交叉淡入 */
#pageTitle{view-transition-name:page-title}
.brand .logo{view-transition-name:brand-logo}
::view-transition-old(root),
::view-transition-new(root){animation-duration:.2s}
::view-transition-group(page-title),
::view-transition-group(brand-logo){animation-duration:.26s}

/* 4) :has() 父级联动 */
.field:has(.inp:focus) > label{color:var(--brand);font-weight:600}
.item:has(.badge.amber){border-color:#fde68a;background:#fffdf6}
.item:has(.badge.red){border-color:#fecdd3;background:#fffafb}
.card:has(.badge.amber) .card-hd{background:#fffdf6}

/* ---------- 登录页 ---------- */
.auth[hidden],#app[hidden]{display:none!important}
.auth{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;overflow:auto;
  background:radial-gradient(920px 520px at 10% -8%,#e0e7ff 0%,transparent 58%),
             radial-gradient(820px 500px at 102% 104%,#cffafe 0%,transparent 52%),#f6f7fb}
.auth-card{display:grid;grid-template-columns:1.03fr .97fr;width:min(976px,100%);background:#fff;
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 34px 80px -34px rgba(30,41,59,.32),0 2px 8px rgba(15,23,42,.05)}
.auth-side{position:relative;padding:32px 32px 26px;display:flex;flex-direction:column;gap:20px;
  background:linear-gradient(158deg,#eef2ff 0%,#f7f9ff 54%,#effcfd 100%);overflow:hidden}
.auth-side::before{content:"";position:absolute;width:260px;height:260px;right:-96px;top:-96px;border-radius:50%;
  background:radial-gradient(circle,rgba(165,180,252,.55),transparent 68%)}
.auth-side::after{content:"";position:absolute;width:290px;height:290px;left:-124px;bottom:-136px;border-radius:50%;
  background:radial-gradient(circle,rgba(103,232,249,.4),transparent 66%)}
.auth-side>*{position:relative;z-index:1}
.abrand{display:flex;align-items:center;gap:9px}
.abrand .lg{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:#fff;
  font-weight:800;font-size:14px;background:linear-gradient(135deg,#6366f1,#4338ca);
  box-shadow:0 6px 14px -6px rgba(79,70,229,.7)}
.abrand b{font-size:13.5px;letter-spacing:.2px}
.abrand em{display:block;font-style:normal;font-size:10.5px;color:var(--muted)}
.auth-side h1{font-size:24px;line-height:1.36;letter-spacing:-.6px;font-weight:750;margin-top:4px}
.auth-side h1 u{text-decoration:none;background:linear-gradient(transparent 58%,#c7d2fe 58%);padding:0 2px}
.auth-side .lead{font-size:12.6px;color:#475569;line-height:1.78;margin-top:-8px}
.aRoles{display:flex;flex-wrap:wrap;gap:6px;margin-top:-10px}
.aRoles span{font-size:10.8px;color:#4338ca;background:rgba(255,255,255,.8);border:1px solid #dbe3ff;
  border-radius:20px;padding:3px 9px;font-weight:600}
.aTip{margin-top:auto;font-size:11px;line-height:1.65;color:#475569;background:rgba(255,255,255,.72);
  border:1px dashed #c7d2fe;border-radius:9px;padding:8px 10px}
.aTip code{background:#e0e7ff;color:#3730a3;border-radius:4px;padding:1px 5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px}
.aFeats{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.aFeat{display:flex;gap:10px;align-items:flex-start}
.aFeat i{width:26px;height:26px;flex:0 0 26px;border-radius:8px;display:grid;place-items:center;
  background:#fff;border:1px solid #e0e7ff;color:#4338ca;box-shadow:0 2px 6px -3px rgba(30,41,59,.18)}
.aFeat svg{width:14px;height:14px}
.aFeat b{display:block;font-size:12.2px;font-weight:650;color:#1e293b;line-height:1.5}
.aFeat span{font-size:11px;color:#64748b}
.auth-foot{font-size:10.6px;color:#94a3b8;border-top:1px solid rgba(148,163,184,.22);padding-top:11px;
  display:flex;justify-content:space-between;gap:8px}

.auth-form{padding:30px 30px 26px;display:flex;flex-direction:column;justify-content:center}
.auth-form h2{font-size:19px;letter-spacing:-.3px}
.auth-form .sub{font-size:12px;color:var(--muted);margin:4px 0 16px}
.auth-form .field{margin-bottom:11px}
.auth-form .inp{width:100%;padding:10px 12px;border-radius:9px;background:#fbfcfe;font-size:13.5px}
.auth-row{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--ink-2);
  margin:0 0 13px}
.ck{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.ck input{width:13px;height:13px;accent-color:var(--brand)}
.auth-row a{color:var(--brand-ink);text-decoration:none}
.auth-btn{width:100%;padding:11px;border-radius:10px;background:var(--brand);color:#fff;font-size:14px;
  font-weight:650;box-shadow:0 10px 22px -12px rgba(79,70,229,.9);transition:.16s}
.auth-btn:hover{background:#4338ca}
.auth-btn:disabled{opacity:.6;cursor:default}
.auth-err{display:none;margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--danger-soft);
  border:1px solid #fecdd3;color:var(--danger);font-size:11.8px}
.auth-err.on{display:block}
.auth-or{display:flex;align-items:center;gap:10px;margin:15px 0 9px;font-size:10.6px;color:var(--muted)}
.auth-or::before,.auth-or::after{content:"";height:1px;flex:1;background:var(--line)}
.accs{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.acc{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;
  text-align:left;background:#fff;transition:.15s}
.acc:hover{border-color:#c7d2fe;background:#f8faff;transform:translateY(-1px)}
.acc.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.acc .av{width:24px;height:24px;border-radius:50%;flex:0 0 24px;display:grid;place-items:center;
  font-size:10.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,#818cf8,#4f46e5)}
.acc .nm{font-size:11.8px;font-weight:600;line-height:1.35}
.acc .rl{font-size:10px;color:var(--muted);line-height:1.35}
.acc .pin{margin-left:auto;font-size:9px;color:#94a3b8}

/* ---------- 侧栏身份卡（放侧栏底部） ---------- */
.idbox{position:relative;margin:0 2px 10px}
.idcard{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border:1px solid var(--line);
  border-radius:12px;background:#fff;text-align:left;transition:.15s}
.idcard:hover{border-color:#c7d2fe;box-shadow:0 4px 12px -8px rgba(30,41,59,.4)}
.uav{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-size:11px;font-weight:700;background:linear-gradient(135deg,#818cf8,#4338ca)}
.idmeta{min-width:0;line-height:1.28}
.idmeta b{display:block;font-size:12.2px;font-weight:650;letter-spacing:-.1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idmeta span{display:block;font-size:10.2px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idchev{margin-left:auto;display:grid;place-items:center;color:var(--muted);transition:transform .18s}
.idchev svg{width:12px;height:12px}
.idbox.open .idchev{transform:rotate(180deg)}
.idmenu{position:absolute;left:0;top:auto;bottom:calc(100% + 8px);width:238px;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-lg);padding:8px;display:none;z-index:60}
.idbox.open .idmenu{display:block}
.idmenu-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;white-space:nowrap;
  font-size:10.4px;color:var(--muted);padding:3px 8px 6px}
.idmenu-tip{font-size:9.8px;line-height:1.55;color:var(--muted);padding:6px 8px 2px}
.umenu-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:8px;text-align:left}
.umenu-item:hover{background:var(--line-2)}
.umenu-item.on{background:var(--brand-soft)}
.umenu-item .av{width:22px;height:22px;border-radius:50%;flex:0 0 22px;display:grid;place-items:center;
  font-size:10px;font-weight:700;color:#fff;background:linear-gradient(135deg,#94a3b8,#64748b)}
.umenu-item .nm{font-size:12px;font-weight:600;line-height:1.3}
.umenu-item .rl{font-size:10.2px;color:var(--muted);line-height:1.3}
.umenu-item .chk{margin-left:auto;color:var(--brand);font-size:11px;font-weight:700}
.idmenu-ft{border-top:1px solid var(--line-2);margin-top:6px;padding-top:5px}
.idmenu-ft button{width:100%;text-align:left;padding:7px 8px;border-radius:8px;font-size:12px;color:var(--danger)}
.idmenu-ft button:hover{background:var(--danger-soft)}
/* 折叠态：只留头像，菜单从右侧弹出 */
.app.mini .idbox{margin:0 0 10px}
.app.mini .idcard{justify-content:center;padding:6px 0;border-radius:10px}
.app.mini .idmeta,.app.mini .idchev{display:none}
.app.mini .idmenu{left:calc(100% + 10px);top:auto;bottom:0;width:230px;
  animation:none!important;background:rgba(255,255,255,.94)}
.permnote{font-size:10.6px;color:var(--warn);background:var(--warn-soft);border:1px solid #fde68a;
  border-radius:6px;padding:2px 7px;white-space:nowrap}
@media(max-width:880px){
  .auth-card{grid-template-columns:1fr}
  .auth-side{display:none}
  .accs{grid-template-columns:1fr}
}

/* =========================================================
   主题：蓝色渐变 + 玻璃拟态（Glassmorphism）
   只覆盖视觉层，不改布局与交互。语义状态色（青/琥珀/紫/绿/玫红）保留，
   否则卡片墙会失去"一眼看出状态"的能力。
   ========================================================= */
:root{
  --bg:#e9f2ff;
  --panel:rgba(255,255,255,.62);
  --ink:#0b1b33; --ink-2:#3d5372; --muted:#6b7f9b;
  --line:rgba(255,255,255,.72);
  --line-2:rgba(178,205,240,.45);
  --brand:#2563eb; --brand-soft:rgba(219,234,254,.8); --brand-ink:#1d4ed8;
  --glass:rgba(255,255,255,.6);
  --glass-brd:rgba(255,255,255,.78);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.92);
  --sh:0 12px 32px -24px rgba(23,58,120,.6), var(--glass-hi);
  --sh-lg:0 32px 64px -28px rgba(15,40,90,.45);
}
body{
  background:
    radial-gradient(1150px 720px at 4% -10%,#a9ccff 0%,rgba(169,204,255,0) 60%),
    radial-gradient(980px 680px at 100% -4%,#b9c8ff 0%,rgba(185,200,255,0) 56%),
    radial-gradient(900px 640px at 88% 46%,#bfe6ff 0%,rgba(191,230,255,0) 58%),
    radial-gradient(1100px 820px at 42% 118%,#a5e8fb 0%,rgba(165,232,251,0) 62%),
    linear-gradient(158deg,#f2f8ff 0%,#e4f0ff 46%,#e8f8ff 100%);
  background-attachment:fixed;
}
/* 两团极光光斑：fixed + blur，滚动时不重绘 */
body::before,body::after{
  content:"";position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(64px);opacity:.62;
}
body::before{width:520px;height:520px;left:-110px;top:6%;background:radial-gradient(circle,#7db4ff,transparent 68%)}
body::after{width:600px;height:600px;right:-150px;bottom:-100px;background:radial-gradient(circle,#4fd8f0,transparent 66%)}
.app{position:relative;z-index:1}

/* 玻璃面：统一半透明底 + 背景模糊 + 顶部高光边 */
.side,.card,.detail,.chip,.modal,.kpi,.cards.list,.auth-card{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  box-shadow:0 14px 36px -26px rgba(23,58,120,.62), var(--glass-hi);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
}
.side{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(235,245,255,.44))}
.card{background:linear-gradient(180deg,rgba(255,255,255,.68),rgba(233,243,255,.46))}
.detail.empty{background:rgba(255,255,255,.28);box-shadow:none;border-style:dashed}

/* 侧栏与导航 */
.brand .logo{background:linear-gradient(140deg,#60a5fa,#2563eb 55%,#0ea5e9);
  box-shadow:0 8px 18px -6px rgba(37,99,235,.75)}
.collapse{background:rgba(255,255,255,.82);border-color:rgba(255,255,255,.9);
  box-shadow:0 4px 12px -6px rgba(23,58,120,.4)}
.collapse:hover{border-color:#60a5fa;color:#1d4ed8}
.nav button:hover{background:rgba(255,255,255,.55);color:var(--ink)}
.nav button.on{
  background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(37,99,235,.06));
  color:#1d4ed8;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85), 0 8px 18px -16px rgba(37,99,235,.9);
}

/* 顶栏 */
.chip b{color:var(--ink)}
.chip.accent b{background:linear-gradient(115deg,#1d4ed8,#0ea5e9);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.idcard{background:rgba(255,255,255,.54);border-color:var(--glass-brd);box-shadow:var(--glass-hi);
  -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%)}
.idcard:hover{background:rgba(255,255,255,.82);border-color:rgba(147,197,253,.95);
  box-shadow:0 8px 20px -14px rgba(37,99,235,.8)}
.idbox.open .idcard{background:rgba(255,255,255,.9);border-color:#93c5fd}
.uav{background:linear-gradient(140deg,#60a5fa,#2563eb)}
.idmenu{background:rgba(255,255,255,.86);border-color:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%)}
.umenu-item:hover{background:rgba(219,234,254,.7)}
.umenu-item.on{background:rgba(219,234,254,.8)}

/* 按钮 */
.btn{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.85);color:var(--ink-2)}
.btn:hover{background:rgba(255,255,255,.88);border-color:rgba(147,197,253,.95);color:var(--ink)}
.btn.pri{
  background:linear-gradient(135deg,#3b82f6,#2563eb 55%,#1d4ed8);
  border-color:rgba(37,99,235,.85);color:#fff;
  box-shadow:0 10px 24px -14px rgba(37,99,235,.95), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn.pri:hover{background:linear-gradient(135deg,#2f74f0,#1d4ed8 60%,#1e40af);color:#fff}
.btn.danger{background:rgba(255,241,242,.8);border-color:rgba(254,205,211,.9)}

/* 表单 */
.inp{background:rgba(255,255,255,.62);border-color:rgba(255,255,255,.9)}
.inp:focus{background:rgba(255,255,255,.95);border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(96,165,250,.22)}
.seg{background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.7)}
.seg button.on{background:linear-gradient(180deg,#fff,#eff6ff);color:#1e40af;
  box-shadow:0 4px 12px -8px rgba(37,99,235,.7)}
.toolbar .inp{background:rgba(255,255,255,.66)}

/* 表格 */
.table th{background:rgba(255,255,255,.72);border-bottom-color:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.table td{border-bottom-color:var(--line-2)}
.table tbody tr:hover td{background:rgba(219,234,254,.5)}

/* KPI */
.kpi{background:rgba(255,255,255,.48)}
.kpi.hi{background:linear-gradient(135deg,rgba(219,234,254,.9),rgba(239,246,255,.66));
  border-color:rgba(191,219,254,.9)}
.kpi.hi b{color:#1d4ed8}

/* 任务卡片：玻璃底 + 状态色薄染，悬停只加亮不换色系 */
.tcard{
  background:
    linear-gradient(182deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.68) 52%,rgba(238,246,255,.56) 100%),
    linear-gradient(176deg,var(--tint) 0%,transparent 62%);
  border-color:var(--glass-brd);
  box-shadow:0 16px 36px -28px rgba(23,58,120,.7), var(--glass-hi);
  -webkit-backdrop-filter:blur(16px) saturate(175%);
  backdrop-filter:blur(16px) saturate(175%);
}
.tcard:hover{
  background:
    linear-gradient(182deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.8) 52%,rgba(255,255,255,.66) 100%),
    linear-gradient(176deg,var(--tint) 0%,transparent 66%);
  border-color:var(--accent);
  box-shadow:0 24px 46px -28px var(--accent), 0 10px 24px -18px rgba(15,40,90,.5), var(--glass-hi);
}
.tcard::after{opacity:.55}
.tcard:hover::after{opacity:.75}
.tcard .badge{background:rgba(255,255,255,.55);color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--tint)}
.tcard .cat{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.85)}
.tcard:hover .cat{background:#fff;border-color:var(--accent)}
.tcard .bar{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--tint)}
.tcard .foot{border-top-color:rgba(148,180,225,.22)}
.appcover{background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.8));
  border-color:rgba(255,255,255,.85)}
.plan-chip{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.9)}
.plan-chip:hover{color:#fff}

/* 详情与弹窗 */
.detail{border-color:var(--glass-brd)}
.modal{background:rgba(255,255,255,.86);border-color:rgba(255,255,255,.9);
  box-shadow:0 40px 80px -30px rgba(10,32,74,.5), var(--glass-hi)}
.modal .ft{background:rgba(255,255,255,.45);border-top-color:rgba(148,180,225,.22)}
.toast{background:rgba(8,32,72,.82);-webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.16)}
.toast.ok{background:rgba(4,68,58,.85)}
.toast.err{background:rgba(120,12,42,.85)}

/* 滚动进度条 */
.scrollbar{background:linear-gradient(90deg,#60a5fa,#2563eb,#22d3ee)!important}

/* ---------- 登录页：深蓝渐变 + 磨砂玻璃 ---------- */
.auth{
  background:
    radial-gradient(900px 620px at 10% 0%,rgba(96,165,250,.55),transparent 62%),
    radial-gradient(760px 600px at 96% 100%,rgba(34,211,238,.42),transparent 58%),
    linear-gradient(152deg,#0a2a66 0%,#1546a8 34%,#2277d8 68%,#3fb6e8 100%);
}
.auth-card{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.42);
  box-shadow:0 48px 90px -34px rgba(2,18,52,.7), inset 0 1px 0 rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%)}
.auth-side{background:transparent;color:#fff}
.auth-side::before{background:radial-gradient(circle,rgba(255,255,255,.22),transparent 66%)}
.auth-side::after{background:radial-gradient(circle,rgba(34,211,238,.3),transparent 64%)}
.abrand .lg{background:rgba(255,255,255,.94);color:#1d4ed8;
  box-shadow:0 10px 24px -10px rgba(0,12,40,.7)}
.abrand b{color:#fff}
.abrand em{color:rgba(255,255,255,.72)}
.auth-side h1{color:#fff}
.auth-side h1 u{background:linear-gradient(transparent 60%,rgba(103,232,249,.55) 60%)}
.auth-side .lead{color:rgba(255,255,255,.84)}
.aRoles span{color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32)}
.aTip{color:rgba(255,255,255,.85);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.aTip code{background:rgba(255,255,255,.22);color:#fff}
.aFeat i{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);color:#fff}
.aFeat b{color:#fff}
.aFeat span{color:rgba(255,255,255,.72)}
.auth-foot{color:rgba(255,255,255,.6);border-top-color:rgba(255,255,255,.2)}
.auth-form{background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.auth-form .inp{background:rgba(255,255,255,.72);border-color:rgba(191,219,254,.9)}
.auth-btn{background:linear-gradient(135deg,#3b82f6,#2563eb 55%,#1d4ed8);
  box-shadow:0 14px 28px -14px rgba(37,99,235,1), inset 0 1px 0 rgba(255,255,255,.3)}
.auth-btn:hover{background:linear-gradient(135deg,#2f74f0,#1d4ed8 60%,#1e40af)}
.acc{background:rgba(255,255,255,.7);border-color:rgba(191,219,254,.7)}
.acc:hover{background:#fff;border-color:#93c5fd}
.acc.on{background:rgba(219,234,254,.9);border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,.16)}

/* ---------- 容器级毛玻璃：把还在用实心白的内部容器统一成半透明 ---------- */
.item,.ms,.meta>div,.modal .ft,.auth-form .inp,.badge.gray,.empty,.idmenu-hd{
  background:rgba(255,255,255,.52);
  border-color:rgba(255,255,255,.8);
}
.item,.ms,.meta>div,.modal .ft{
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  backdrop-filter:blur(10px) saturate(160%);
}
.ms.done{background:rgba(236,253,245,.62)}
.item:hover{background:rgba(255,255,255,.78);border-color:rgba(147,197,253,.9)}
.item.on{background:rgba(219,234,254,.72)}
.meta>div{box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.step .b{background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.9)}
.step.done .b{background:var(--ok);border-color:var(--ok)}
.step.now .b{background:var(--brand);border-color:var(--brand)}
/* 卡片头 / 弹窗头做成磨砂条，和卡身形成层次 */
.card-hd,.dhd{
  background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,.18));
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
}
.card-hd{border-bottom-color:rgba(178,205,240,.22)}
.dhd{border-bottom-color:rgba(178,205,240,.24)}
/* 行悬停、时间线、骨架屏同步半透明，别留实心白块 */
.table tbody tr:hover td{background:rgba(219,234,254,.42)}
.tl li:hover{background:rgba(219,234,254,.28);border-radius:8px}
.sk{background:linear-gradient(90deg,rgba(226,236,252,.5) 25%,rgba(248,250,252,.58) 37%,rgba(226,236,252,.5) 63%);
  background-size:400% 100%}
.item:has(.badge.amber){background:rgba(255,251,235,.66)}
.item:has(.badge.red){background:rgba(255,241,242,.66)}
.card:has(.badge.amber) .card-hd{
  background:linear-gradient(180deg,rgba(255,251,235,.6),rgba(255,251,235,.18))}

/* ---------- 头部滚动公告（控制台） ---------- */
.notice{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:6px 12px;border-radius:11px;
  overflow:hidden;
  background:linear-gradient(90deg,rgba(219,234,254,.92),rgba(239,246,255,.62) 58%,rgba(224,242,254,.74));
  border:1px solid rgba(191,219,254,.92);box-shadow:var(--glass-hi);
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%)}
.ntag{flex:0 0 auto;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#1d4ed8}
.ntag svg{width:14px;height:14px}
.track{flex:1;min-width:0;overflow:hidden;position:relative;height:18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
.move{position:absolute;left:0;top:0;display:flex;gap:42px;white-space:nowrap;
  animation:marquee 32s linear infinite;will-change:transform}
.notice:hover .move{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ni{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.ni b{color:var(--ink);font-weight:650}
.ni .lv{font-size:9.5px;padding:1px 6px;border-radius:5px;font-weight:700}
.ni .lv0{background:rgba(219,234,254,.95);color:#1d4ed8}
.ni .lv1{background:rgba(254,243,199,.95);color:#b45309}
.ni .lv2{background:rgba(254,226,226,.95);color:#be123c}
@media (prefers-reduced-motion: reduce){
  .move{animation:none;position:static;flex-wrap:wrap;white-space:normal;gap:10px}
  .track{height:auto;-webkit-mask-image:none;mask-image:none}
}

/* ---------- 登录首屏公告 ---------- */
.anotice{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:9px 16px;color:#fff;
  font-size:12px;background:linear-gradient(90deg,rgba(29,78,216,.94),rgba(14,165,233,.86))}
.anotice[hidden]{display:none}
.anotice .antag{flex:0 0 auto;display:flex;align-items:center;gap:5px;font-weight:700;letter-spacing:.2px}
.anotice .antag svg{width:14px;height:14px}
.anotice .antxt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:opacity .22s ease}
.anotice .antxt b{font-weight:700;margin-right:6px}
.anotice .lv{font-size:9.5px;padding:1px 6px;border-radius:5px;background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.4);font-weight:700}

/* ---------- 按身份的工作台 ---------- */
.dh-hero{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;margin-bottom:14px;
  background:linear-gradient(120deg,rgba(37,99,235,.16),rgba(14,165,233,.1) 52%,rgba(255,255,255,.42));
  border:1px solid rgba(255,255,255,.88);box-shadow:var(--sh),var(--glass-hi);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%)}
.dh-ava{width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center;
  font-size:18px;font-weight:800;color:#fff;background:linear-gradient(140deg,#60a5fa,#2563eb);
  box-shadow:0 12px 24px -14px rgba(37,99,235,.95)}
.dh-who b{display:block;font-size:15.5px;letter-spacing:-.2px}
.dh-who .dh-sub{font-size:12px;color:var(--ink-2);margin-top:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dh-role{font-size:10.5px;color:#1d4ed8;background:rgba(219,234,254,.9);border:1px solid rgba(191,219,254,.95);
  border-radius:20px;padding:2px 9px;font-weight:600}
.dh-quick{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:760px){.dh-hero{flex-wrap:wrap}.dh-quick{margin-left:0;width:100%}}
.dh-tip{font-size:11.5px;color:var(--ink-2);background:rgba(219,234,254,.5);border:1px solid rgba(191,219,254,.7);
  border-radius:10px;padding:9px 12px;margin-bottom:14px;line-height:1.7}

/* ---------- 商单详情弹窗（卡片点开就是弹窗，不再占用下方版面） ---------- */
.dmask{
  position:fixed;inset:0;z-index:70;padding:22px;display:none;place-items:center;overflow:auto;
  background:rgba(12,30,64,.42);opacity:0;
  transition:opacity .18s ease,display .18s allow-discrete;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
/* 注意：必须是 display:none → grid。若像早先那样默认就 display:grid 只把 opacity 置 0，
   会留下一层看不见但盖住全屏的遮罩，整个页面都点不了。 */
.dmask.on{display:grid;opacity:1}
@starting-style{.dmask.on{opacity:0}}
.dmodal{
  width:min(780px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(240,247,255,.82));
  border:1px solid rgba(255,255,255,.92);border-radius:18px;
  box-shadow:0 48px 90px -34px rgba(10,32,74,.55),var(--glass-hi);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  transform:translateY(10px) scale(.985);opacity:.6;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),opacity .22s;
}
.dmask.on .dmodal{transform:none;opacity:1}
@starting-style{.dmask.on .dmodal{transform:translateY(12px) scale(.98);opacity:0}}
.dhd{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:16px 18px 12px;border-bottom:1px solid rgba(178,205,240,.3);flex:0 0 auto}
.dhd .dno{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--muted);
  letter-spacing:.2px}
.dhd h3{font-size:16px;font-weight:700;letter-spacing:-.2px;margin-top:3px;line-height:1.4}
.dhd .dx{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;place-items:center;
  color:var(--ink-2);background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.9);transition:.15s}
.dhd .dx:hover{background:#fff;color:var(--danger);border-color:#fecdd3}
.dhd .dx svg{width:14px;height:14px}
.dbody{overflow:auto;padding:0 0 6px;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.dbody .order-hd{padding:14px 18px 12px}
.dbody .card-bd{padding:12px 18px}
.dbody .card-bd + .card-bd{border-top:1px solid rgba(178,205,240,.22)}
.dbody .steps{padding:12px 18px 2px}
.dbody .nextbar{margin:0 18px;border-radius:12px}
.dbody .ms{margin:0 18px 10px}
.dbody .tl{padding:2px 18px 14px}
@media(max-width:640px){
  .dmask{padding:10px}
  .dmodal{max-height:92vh;border-radius:14px}
  .dbody .nextbar,.dbody .ms{margin-left:12px;margin-right:12px}
  .dbody .order-hd,.dbody .card-bd,.dbody .steps,.dbody .tl{padding-left:12px;padding-right:12px}
}

/* 不支持背景模糊时退回高不透明度，保证可读性 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .side,.card,.detail,.chip,.kpi,.modal,.idmenu,.auth-card,.cards.list{background:rgba(255,255,255,.94)}
  .tcard{background:#fff}
  .auth-form{background:#fff}
}
/* 系统开启"降低透明度"时同样退回实色 */
@media (prefers-reduced-transparency: reduce){
  .side,.card,.detail,.chip,.kpi,.modal,.idmenu,.auth-card,.cards.list,.tcard,.auth-form{
    background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important
  }
}

/* 无障碍：尊重系统"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .scrollbar{display:none}
}

/* ---------- 渲染性能：降低大面积毛玻璃/模糊的合成开销 ---------- */
/* 背景光斑原来用 64px filter:blur()，固定定位元素每次重绘都要重新模糊，改用径向渐变本身做柔边 */
body::before,body::after{filter:none;opacity:.55}
body::before{background:radial-gradient(circle,#7db4ff 0%,rgba(125,180,255,.55) 30%,rgba(125,180,255,0) 72%)}
body::after{background:radial-gradient(circle,#4fd8f0 0%,rgba(79,216,240,.5) 30%,rgba(79,216,240,0) 72%)}
/* 列表/表格里数量最多的元素不再做 backdrop-filter，视觉差异很小，合成成本下降一个量级 */
.tcard,.item,.ms,.meta>div,.card-hd,.dhd,.table th,.notice,.dh-hero{-webkit-backdrop-filter:none;backdrop-filter:none}
/* 保留玻璃层次，但把半径减半 */
.side,.card,.detail,.chip,.modal,.kpi,.cards.list,.auth-card{
  -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%)}
.dmodal{-webkit-backdrop-filter:blur(12px) saturate(170%);backdrop-filter:blur(12px) saturate(170%)}