/* ============================================================================
   SVIP Claw v3 — 设计系统
   目标：一屏多信息但不拥挤；颜色只表达语义；一套尺度，不再有 12 种字号 / 7 种圆角。
   ========================================================================== */

:root{
  /* 尺度：字号 5 档、间距 4 步、圆角 3 档 */
  --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-lg:20px; --fs-xl:28px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --r-sm:8px; --r-md:12px; --r-lg:16px;

  /* 语义色：主色只有一个（靛蓝）；成功/警告/危险只用于状态 */
  --accent:#4f6ef7; --accent-weak:#eef1fe; --accent-ink:#fff;
  --ok:#0f9d58; --ok-weak:#e8f6ee;
  --warn:#d98200; --warn-weak:#fdf3e3;
  --danger:#dc2f3c; --danger-weak:#fdecee;
  --info:#3b82f6; --info-weak:#eaf2fe;

  --bg:#f5f6f8; --surface:#fff; --surface-2:#fafbfc; --surface-3:#f0f2f5;
  --text:#151a21; --text-2:#5c6673; --text-3:#8b95a3;
  --line:#e4e7ec; --line-strong:#d3d8e0;
  --shadow-1:0 1px 2px rgba(16,24,40,.05);
  --shadow-2:0 8px 24px rgba(16,24,40,.10);
  --shadow-3:0 18px 48px rgba(16,24,40,.16);
  --side-w:236px; --top-h:56px; --content-max:1440px;
}
@media (prefers-color-scheme:dark){
  :root{
    --accent:#7b95ff; --accent-weak:#1e2540; --accent-ink:#0b0e14;
    --ok:#43c07d; --ok-weak:#14281d; --warn:#e0a94a; --warn-weak:#2a2113;
    --danger:#ff6b76; --danger-weak:#2c1618; --info:#6aa5ff; --info-weak:#141f33;
    --bg:#0d1016; --surface:#141822; --surface-2:#171c27; --surface-3:#1d2331;
    --text:#e8ebf1; --text-2:#a2acbb; --text-3:#727c8c;
    --line:#252c3a; --line-strong:#313a4c;
    --shadow-1:0 1px 2px rgba(0,0,0,.3);
    --shadow-2:0 8px 24px rgba(0,0,0,.45);
    --shadow-3:0 18px 48px rgba(0,0,0,.55);
  }
}
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{
  color-scheme:dark;
  --accent:#7b95ff; --accent-weak:#1e2540; --accent-ink:#0b0e14;
  --ok:#43c07d; --ok-weak:#14281d; --warn:#e0a94a; --warn-weak:#2a2113;
  --danger:#ff6b76; --danger-weak:#2c1618; --info:#6aa5ff; --info-weak:#141f33;
  --bg:#0d1016; --surface:#141822; --surface-2:#171c27; --surface-3:#1d2331;
  --text:#e8ebf1; --text-2:#a2acbb; --text-3:#727c8c;
  --line:#252c3a; --line-strong:#313a4c;
}

*{box-sizing:border-box}
/* 关键：作者级 display 会覆盖 UA 样式表的 [hidden]{display:none}，
   而 .auth/.app 都写了 display，所以必须把这条抬到 !important，否则视图切换失效。 */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:var(--fs-md)/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
       "Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.01em}
code,kbd{font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:var(--fs-sm)}
::selection{background:var(--accent-weak)}

/* ── 登录 ───────────────────────────────────────────────────────────── */
.auth{min-height:100vh; display:grid; place-items:center; padding:var(--sp-5);
  background:
    radial-gradient(900px 420px at 12% -10%, var(--accent-weak), transparent 60%),
    radial-gradient(700px 380px at 105% 110%, var(--ok-weak), transparent 55%), var(--bg)}
.auth-card{width:100%; max-width:392px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-3); padding:var(--sp-6) var(--sp-5) var(--sp-5)}
.auth-brand{display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-5)}
.auth-logo{width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:var(--fs-md)}
.auth-brand b{font-size:var(--fs-lg); display:block; line-height:1.2}
.auth-brand span{font-size:var(--fs-xs); color:var(--text-3)}
.field{margin-bottom:var(--sp-3)}
.field label{display:block; font-size:var(--fs-xs); color:var(--text-2); margin-bottom:6px}
.hint{font-size:var(--fs-xs); color:var(--text-3)}

/* ── 表单控件 ───────────────────────────────────────────────────────── */
input,select,textarea{width:100%; font:inherit; color:var(--text); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:9px 11px;
  transition:border-color .15s, box-shadow .15s; min-height:38px}
textarea{min-height:96px; resize:vertical; line-height:1.6}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-weak)}
input[disabled],select[disabled],textarea[disabled]{background:var(--surface-3); color:var(--text-3)}
input::placeholder,textarea::placeholder{color:var(--text-3)}
label.check{display:flex; align-items:center; gap:var(--sp-2); min-height:32px; font-size:var(--fs-sm);
  color:var(--text-2); cursor:pointer}
label.check input{width:16px; min-height:16px; accent-color:var(--accent)}

/* ── 按钮 ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:36px; padding:0 14px; font:inherit; font-size:var(--fs-sm); font-weight:500;
  color:var(--text); background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r-sm); cursor:pointer; white-space:nowrap; transition:all .15s}
.btn:hover{background:var(--surface-3)}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--accent-weak); border-color:var(--accent)}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06); background:var(--accent)}
.btn.danger{color:var(--danger); border-color:var(--danger)}
.btn.danger:hover{background:var(--danger-weak)}
.btn.ghost{border-color:transparent; background:transparent; color:var(--text-2)}
.btn.ghost:hover{background:var(--surface-3); color:var(--text)}
.btn.sm{min-height:30px; padding:0 10px; font-size:var(--fs-xs)}
.btn.block{width:100%}
.actions{display:flex; gap:var(--sp-2); flex-wrap:wrap}

/* ── 应用外壳 ───────────────────────────────────────────────────────── */
.app{display:flex; min-height:100vh}
.side{width:var(--side-w); flex:0 0 var(--side-w); background:var(--surface);
  border-right:1px solid var(--line); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh}
.side-head{height:var(--top-h); display:flex; align-items:center; gap:10px; padding:0 var(--sp-4);
  border-bottom:1px solid var(--line); flex:0 0 auto}
.side-logo{width:26px; height:26px; border-radius:8px; background:var(--accent);
  color:var(--accent-ink); display:grid; place-items:center; font-weight:700; font-size:var(--fs-xs)}
.side-head b{font-size:var(--fs-sm); letter-spacing:.02em}
.side-nav{overflow-y:auto; padding:var(--sp-3) var(--sp-2) var(--sp-5); flex:1}
.nav-group{margin:var(--sp-3) 0 6px; padding:0 10px; font-size:11px; font-weight:600;
  color:var(--text-3); letter-spacing:.08em}
.nav-item{display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; margin:1px 0;
  border:0; background:transparent; color:var(--text-2); font:inherit; font-size:var(--fs-sm);
  border-radius:var(--r-sm); cursor:pointer; text-align:left}
.nav-item:hover{background:var(--surface-3); color:var(--text)}
.nav-item.on{background:var(--accent-weak); color:var(--accent); font-weight:600}
.nav-item .ico{width:18px; text-align:center; font-size:var(--fs-sm); opacity:.9}
.nav-item .badge{margin-left:auto; background:var(--danger); color:#fff; font-size:11px;
  min-width:18px; height:18px; border-radius:9px; display:grid; place-items:center; padding:0 5px}
.side-foot{border-top:1px solid var(--line); padding:var(--sp-3) var(--sp-4); flex:0 0 auto}
.side-user{font-size:var(--fs-sm); font-weight:600}
.side-role{font-size:var(--fs-xs); color:var(--text-3)}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.top{height:var(--top-h); position:sticky; top:0; z-index:20; background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:var(--sp-3); padding:0 var(--sp-5)}
@supports (backdrop-filter:blur(8px)){
  .top{background:color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter:saturate(1.6) blur(8px)}
}
.top h1{font-size:var(--fs-md); font-weight:600}
.top .sub{font-size:var(--fs-xs); color:var(--text-3)}
.top .spacer{flex:1}
.content{padding:var(--sp-5); width:100%; max-width:var(--content-max); margin:0 auto}
.page-head{display:flex; align-items:flex-end; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-4)}
.page-head h2{font-size:var(--fs-lg)}
.page-head p{margin:2px 0 0; font-size:var(--fs-xs); color:var(--text-3); max-width:70ch}
.page-head .grow{flex:1}

/* ── 卡片 ───────────────────────────────────────────────────────────── */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-1); margin-bottom:var(--sp-4); overflow:hidden}
.card>header{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line)}
.card>header h3{font-size:var(--fs-sm)}
.card>header .grow{flex:1}
.card>header .sub{font-size:var(--fs-xs); color:var(--text-3)}
.card .body{padding:var(--sp-4)}
.card .body.tight{padding:0}
.grid{display:grid; gap:var(--sp-4)}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.split{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:var(--sp-4)}

/* KPI */
.kpi{padding:var(--sp-4)}
.kpi .label{font-size:var(--fs-xs); color:var(--text-3); margin-bottom:6px}
.kpi .value{font-size:var(--fs-xl); font-weight:650; letter-spacing:-.02em; line-height:1.1}
.kpi .foot{font-size:var(--fs-xs); color:var(--text-3); margin-top:6px}

/* ── 表格 ───────────────────────────────────────────────────────────── */
.tw{overflow:auto; max-height:calc(100vh - 300px)}
table{width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-sm)}
th,td{padding:10px var(--sp-3); text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
th{position:sticky; top:0; z-index:1; background:var(--surface-2); color:var(--text-2);
  font-size:var(--fs-xs); font-weight:600; white-space:nowrap}
tbody tr:hover td{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
td .sub{display:block; color:var(--text-3); font-size:var(--fs-xs); margin-top:2px}
.mono{font-family:ui-monospace,Consolas,monospace; font-size:var(--fs-xs)}
.nowrap{white-space:nowrap}

/* 状态胶囊 */
.tag{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:var(--fs-xs); font-weight:500; background:var(--surface-3); color:var(--text-2);
  border:1px solid transparent; white-space:nowrap}
.tag.ok{background:var(--ok-weak); color:var(--ok)}
.tag.warn{background:var(--warn-weak); color:var(--warn)}
.tag.danger{background:var(--danger-weak); color:var(--danger)}
.tag.info{background:var(--info-weak); color:var(--info)}
.tag.accent{background:var(--accent-weak); color:var(--accent)}

/* ── 反馈状态 ───────────────────────────────────────────────────────── */
.empty{padding:var(--sp-6) var(--sp-5); text-align:center; color:var(--text-3); font-size:var(--fs-sm)}
.empty .big{font-size:26px; display:block; margin-bottom:var(--sp-2); opacity:.6}
.skeleton{height:12px; border-radius:6px; background:linear-gradient(90deg,var(--surface-3),var(--surface-2),var(--surface-3));
  background-size:200% 100%; animation:sk 1.2s linear infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.alert{display:flex; gap:10px; padding:10px var(--sp-3); border-radius:var(--r-sm); font-size:var(--fs-sm);
  margin-bottom:var(--sp-3); border:1px solid transparent}
.alert.err{background:var(--danger-weak); color:var(--danger)}
.alert.ok{background:var(--ok-weak); color:var(--ok)}
.alert.warn{background:var(--warn-weak); color:var(--warn)}
.alert.info{background:var(--info-weak); color:var(--info)}
#toasts{position:fixed; right:var(--sp-5); bottom:var(--sp-5); z-index:80; display:flex;
  flex-direction:column; gap:var(--sp-2); pointer-events:none}
.toast{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  box-shadow:var(--shadow-2); border-radius:var(--r-sm); padding:10px var(--sp-4); font-size:var(--fs-sm);
  max-width:360px; animation:tin .18s ease-out}
.toast.err{border-left-color:var(--danger)} .toast.ok{border-left-color:var(--ok)}
@keyframes tin{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* ── 抽屉 / 对话框 ──────────────────────────────────────────────────── */
.scrim{position:fixed; inset:0; background:rgba(12,16,24,.42); z-index:60; display:flex;
  justify-content:flex-end; animation:fade .16s}
.scrim.center{align-items:center; justify-content:center}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer{width:min(560px,100%); height:100%; background:var(--surface); display:flex; flex-direction:column;
  box-shadow:var(--shadow-3); animation:slide .2s ease-out}
@keyframes slide{from{transform:translateX(24px); opacity:.6}to{transform:none; opacity:1}}
.drawer>header,.dialog>header{display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--line)}
.drawer>header h3,.dialog>header h3{font-size:var(--fs-md); flex:1}
.drawer .body{padding:var(--sp-5); overflow-y:auto; flex:1}
.drawer>footer,.dialog>footer{padding:var(--sp-3) var(--sp-5); border-top:1px solid var(--line);
  display:flex; gap:var(--sp-2); justify-content:flex-end; background:var(--surface-2)}
.dialog{width:min(520px,calc(100vw - 32px)); background:var(--surface); border-radius:var(--r-md);
  box-shadow:var(--shadow-3); animation:tin .16s ease-out; max-height:86vh; display:flex; flex-direction:column}
.dialog .body{padding:var(--sp-5); overflow-y:auto}
.icon-btn{width:32px; height:32px; min-height:32px; padding:0; border-radius:var(--r-sm);
  border:1px solid transparent; background:transparent; color:var(--text-2); cursor:pointer; font-size:16px}
.icon-btn:hover{background:var(--surface-3); color:var(--text)}

/* ── 杂项 ───────────────────────────────────────────────────────────── */
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px var(--sp-4); font-size:var(--fs-sm)}
.kv dt{color:var(--text-3)}
.kv dd{margin:0}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{border:1px solid var(--line-strong); background:var(--surface); border-radius:999px;
  padding:4px 11px; font-size:var(--fs-xs); cursor:pointer; color:var(--text-2)}
.chip.on{background:var(--accent-weak); border-color:var(--accent); color:var(--accent); font-weight:600}
.matrix{width:100%; font-size:var(--fs-sm)}
.matrix th:first-child,.matrix td:first-child{position:sticky; left:0; background:var(--surface); z-index:2}
.toolbar{display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; margin-bottom:var(--sp-3)}
.toolbar .grow{flex:1}
.muted{color:var(--text-3)}
.small{font-size:var(--fs-xs)}
.pre{background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:var(--sp-3); overflow:auto; max-height:320px; font-family:ui-monospace,Consolas,monospace;
  font-size:var(--fs-xs); line-height:1.6; white-space:pre-wrap; word-break:break-word}
.steps{counter-reset:s; margin:0; padding:0; list-style:none}
.steps li{counter-increment:s; position:relative; padding:0 0 var(--sp-4) 34px; font-size:var(--fs-sm)}
.steps li:before{content:counter(s); position:absolute; left:0; top:0; width:22px; height:22px;
  border-radius:50%; background:var(--accent-weak); color:var(--accent); display:grid;
  place-items:center; font-size:var(--fs-xs); font-weight:600}
.steps li:after{content:""; position:absolute; left:11px; top:24px; bottom:2px; width:1px; background:var(--line)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child:after{display:none}

/* ── 响应式 ─────────────────────────────────────────────────────────── */
.mobile-bar{display:none; height:52px; align-items:center; gap:var(--sp-3); padding:0 var(--sp-4);
  background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30}
@media (max-width:1180px){
  .split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:960px){
  :root{--content-max:100%}
  .side{position:fixed; left:0; top:0; bottom:0; z-index:70; transform:translateX(-104%);
    transition:transform .2s ease-out; box-shadow:var(--shadow-3)}
  .side.open{transform:none}
  .mobile-bar{display:flex}
  .top{display:none}
  .content{padding:var(--sp-4) var(--sp-3) var(--sp-6)}
  .tw{max-height:none}
  th,td{padding:9px 10px}
  .drawer{width:100%}
  .scrim.backdrop{background:rgba(12,16,24,.5)}
}