/* ============================================================
   仕兔平台 V1.0 MVP — 原型设计系统
   Design language: "工程蓝图 / 精密仪表" (Blueprint Instrument)
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Paper & ink — warm engineering-drawing base */
  --paper:        #F1EFE9;
  --paper-grid:   rgba(16, 20, 26, .045);
  --surface:      #FFFFFF;
  --surface-2:    #FAF9F5;
  --surface-3:    #F3F1EB;
  --chrome:       #12171E;
  --chrome-2:     #1A212B;
  --chrome-3:     #232C38;

  --ink-900:      #0D1117;
  --ink-800:      #1B2430;
  --ink-700:      #34404F;
  --ink-600:      #4A5867;
  --ink-500:      #6B7887;
  --ink-400:      #8B96A3;
  --ink-300:      #AEB7C1;
  --ink-200:      #D3D8DD;

  --line:         #E0DDD5;
  --line-2:       #CFCBC1;
  --line-ink:     rgba(13,17,23,.10);

  /* Signal — 仕兔橙, high-voltage accent */
  --signal:       #E8590C;
  --signal-700:   #B8460A;
  --signal-300:   #F6A97A;
  --signal-50:    #FDEEE3;

  /* Domain semantics — the product's visual signature */
  --private:      #C2410C;   /* 私域 = 有归属，受保护 */
  --private-bg:   #FDEDE2;
  --private-line: #F3C6A8;
  --public:       #0B7285;   /* 公域 = 无归属，全平台开放 */
  --public-bg:    #E1F2F4;
  --public-line:  #A7D3D9;
  --temp:         #7048A8;   /* 临时私域 */
  --temp-bg:      #F0EAF9;
  --temp-line:    #CDBCEB;

  /* Status */
  --ok:      #12734A;  --ok-bg:      #E3F3EA;  --ok-line:#A9D9C0;
  --warn:    #A85B00;  --warn-bg:    #FCF1DF;  --warn-line:#EDCB93;
  --danger:  #AE2B22;  --danger-bg:  #FBE9E7;  --danger-line:#EDB6B0;
  --info:    #1B5C99;  --info-bg:    #E7F0FA;  --info-line:#AFCAE6;
  --muted-bg:#EFEDE7;

  /* Typography */
  --f-cn:  "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  --f-dis: "Bahnschrift","DIN Alternate","DIN Condensed","Archivo Narrow","Oswald","PingFang SC","Microsoft YaHei",sans-serif;
  --f-mono:"Cascadia Mono","Consolas","SFMono-Regular","JetBrains Mono",ui-monospace,monospace;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(13,17,23,.06), 0 0 0 1px rgba(13,17,23,.05);
  --sh-2: 0 2px 4px rgba(13,17,23,.05), 0 8px 20px -8px rgba(13,17,23,.14);
  --sh-3: 0 24px 60px -18px rgba(13,17,23,.30), 0 4px 12px rgba(13,17,23,.10);
  --sh-in: inset 0 1px 0 rgba(255,255,255,.6);

  --r-xs: 3px; --r-sm: 5px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--f-cn); color:var(--ink-800);
  background:var(--paper); font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,p,figure,ul,ol,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; padding:0; }
img,svg{ display:block; max-width:100%; }
table{ border-collapse:collapse; width:100%; }
::selection{ background:var(--signal); color:#fff; }

/* Blueprint paper texture */
.bp-grid{
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--paper-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px);
  background-size:28px 28px, 28px 28px;
}

/* ---------- 3. Type utilities ---------- */
.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.num{ font-family:var(--f-dis); font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:.01em; }
.eyebrow{
  font-family:var(--f-mono); font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-400);
}
.t-h1{ font-family:var(--f-dis); font-size:34px; font-weight:700; line-height:1.15; letter-spacing:-.01em; color:var(--ink-900); }
.t-h2{ font-family:var(--f-dis); font-size:22px; font-weight:700; line-height:1.25; color:var(--ink-900); }
.t-h3{ font-size:15px; font-weight:700; color:var(--ink-900); letter-spacing:.01em; }
.t-sm{ font-size:12.5px; color:var(--ink-500); }
.t-xs{ font-size:11.5px; color:var(--ink-400); }
.dim{ color:var(--ink-500); }
.strong{ color:var(--ink-900); font-weight:600; }
.nowrap{ white-space:nowrap; }

/* ---------- 4. Badges / Tags ---------- */
.tag{
  display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 7px;
  border-radius:var(--r-xs); font-size:11px; font-weight:600; line-height:1;
  background:var(--muted-bg); color:var(--ink-600); border:1px solid transparent;
  white-space:nowrap;
}
.tag--private{ background:var(--private-bg); color:var(--private); border-color:var(--private-line); }
.tag--public { background:var(--public-bg);  color:var(--public);  border-color:var(--public-line); }
.tag--temp   { background:var(--temp-bg);    color:var(--temp);    border-color:var(--temp-line); }
.tag--ok     { background:var(--ok-bg);      color:var(--ok);      border-color:var(--ok-line); }
.tag--warn   { background:var(--warn-bg);    color:var(--warn);    border-color:var(--warn-line); }
.tag--danger { background:var(--danger-bg);  color:var(--danger);  border-color:var(--danger-line); }
.tag--info   { background:var(--info-bg);    color:var(--info);    border-color:var(--info-line); }
.tag--signal { background:var(--signal-50);  color:var(--signal-700); border-color:var(--signal-300); }
.tag--ink    { background:var(--ink-900);    color:#fff; }
.tag--lg{ height:24px; padding:0 9px; font-size:12px; }
.dot{ width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; }

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; padding:0 14px; border-radius:var(--r-sm); font-size:13px; font-weight:600;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-800);
  transition:.15s ease; white-space:nowrap; cursor:pointer;
}
.btn:hover{ border-color:var(--ink-400); background:var(--surface-2); }
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--ink-900); border-color:var(--ink-900); color:#fff; }
.btn--primary:hover{ background:#000; border-color:#000; }
.btn--signal{ background:var(--signal); border-color:var(--signal); color:#fff; }
.btn--signal:hover{ background:var(--signal-700); border-color:var(--signal-700); }
.btn--danger{ color:var(--danger); border-color:var(--danger-line); background:var(--danger-bg); }
.btn--danger:hover{ background:#F8DBD7; border-color:var(--danger); }
.btn--ghost{ border-color:transparent; background:transparent; color:var(--ink-600); }
.btn--ghost:hover{ background:var(--surface-3); border-color:transparent; }
.btn--sm{ height:27px; padding:0 10px; font-size:12px; }
.btn--xs{ height:23px; padding:0 8px; font-size:11.5px; border-radius:var(--r-xs); }
.btn--block{ width:100%; }
.btn[disabled],.btn.is-disabled{ opacity:.45; pointer-events:none; }

/* ---------- 6. Cards / Panels ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--sh-1);
}
.card__hd{
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--line);
}
.card__hd h3{ font-size:14px; font-weight:700; color:var(--ink-900); }
.card__bd{ padding:16px; }
.card__ft{ padding:10px 16px; border-top:1px solid var(--line); background:var(--surface-2); }

/* Technical corner ticks */
.ticked{ position:relative; }
.ticked::before,.ticked::after{
  content:""; position:absolute; width:9px; height:9px; pointer-events:none;
  border-color:var(--line-2); border-style:solid; border-width:0;
}
.ticked::before{ left:-1px; top:-1px; border-left-width:2px; border-top-width:2px; }
.ticked::after { right:-1px; bottom:-1px; border-right-width:2px; border-bottom-width:2px; }

/* ---------- 7. Tables ---------- */
.tbl{ font-size:13px; }
.tbl th{
  font-family:var(--f-mono); font-size:10.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-400); text-align:left;
  padding:9px 12px; border-bottom:1px solid var(--line-2); background:var(--surface-2);
  white-space:nowrap; position:sticky; top:0; z-index:2;
}
.tbl td{ padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tbody tr:hover td{ background:#FBFAF7; }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl .r{ text-align:right; }
.tbl td.r{ white-space:nowrap; }
.tbl td .row > b, .tbl td .row > div > b{ white-space:nowrap; }
.tbl td.r .btn + .btn{ margin-left:4px; }
.tbl .c{ text-align:center; }
.tbl-wrap{ overflow:auto; border-radius:var(--r-md); }

/* ---------- 8. Forms ---------- */
.field{ display:block; margin-bottom:14px; }
.field > label, .lbl{
  display:block; font-size:12px; font-weight:600; color:var(--ink-600); margin-bottom:5px;
}
.inp, .sel, .ta{
  width:100%; height:34px; padding:0 10px; background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r-sm); font-size:13px; color:var(--ink-900);
  transition:.15s;
}
.ta{ height:auto; padding:8px 10px; min-height:74px; resize:vertical; line-height:1.55; }
.inp:focus,.sel:focus,.ta:focus{ outline:none; border-color:var(--ink-700); box-shadow:0 0 0 3px rgba(13,17,23,.07); }
.inp::placeholder{ color:var(--ink-300); }
.sel{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-400) 50%),linear-gradient(135deg,var(--ink-400) 50%,transparent 50%); background-position:calc(100% - 15px) 15px, calc(100% - 10px) 15px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:28px; }
.hint{ font-size:11.5px; color:var(--ink-400); margin-top:4px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 14px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 14px; }
.switch{ position:relative; width:36px; height:20px; border-radius:10px; background:var(--ink-200); transition:.2s; flex:none; cursor:pointer; }
.switch::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:.2s; }
.switch.on{ background:var(--ok); }
.switch.on::after{ left:18px; }

/* ---------- 8b. Shared layout utilities（App / Console 共用） ---------- */
.stack > * + *{ margin-top:12px; }
.stack-sm > * + *{ margin-top:8px; }
.row{ display:flex; align-items:center; gap:8px; }
.row-b{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.flex1{ flex:1; min-width:0; }

.chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.chip{ font-size:11px; padding:2px 7px; border-radius:var(--r-xs); background:var(--surface-3); color:var(--ink-600); border:1px solid var(--line); }

/* List row */
.lrow{ display:flex; align-items:center; gap:10px; padding:13px 14px; background:var(--surface); border-bottom:1px solid var(--line); }
.lrow .lt{ flex:1; min-width:0; }
.lrow .lt b{ font-size:13.5px; font-weight:600; color:var(--ink-900); display:block; }
.lrow .lt span{ font-size:11.5px; color:var(--ink-400); }
.lrow .chev{ color:var(--ink-300); flex:none; }

/* Step indicator */
.steps{ display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.steps .st{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-400); }
.steps .st i{ width:18px; height:18px; border-radius:50%; background:var(--surface-3); color:var(--ink-400);
  display:grid; place-items:center; font-family:var(--f-mono); font-size:10px; font-style:normal; flex:none; }
.steps .st.done i{ background:var(--ok); color:#fff; }
.steps .st.now i{ background:var(--signal); color:#fff; }
.steps .st.now{ color:var(--ink-900); font-weight:600; }
.steps .ln{ flex:1; min-width:14px; height:1px; background:var(--line-2); margin:0 6px; }

/* ---------- 9. Misc atoms ---------- */
.kv{ display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.kv:last-child{ border-bottom:0; }
.kv dt{ color:var(--ink-500); flex:none; }
.kv dd{ color:var(--ink-900); font-weight:600; text-align:right; }

.avatar{
  width:34px; height:34px; border-radius:var(--r-sm); flex:none;
  display:grid; place-items:center; font-size:13px; font-weight:700; color:#fff;
  background:linear-gradient(150deg,var(--ink-700),var(--ink-900)); letter-spacing:.02em;
}
.avatar--o{ background:linear-gradient(150deg,#F0803C,var(--signal-700)); }
.avatar--t{ background:linear-gradient(150deg,#2196A8,var(--public)); }
.avatar--p{ background:linear-gradient(150deg,#8B6BC7,var(--temp)); }
.avatar--sm{ width:26px; height:26px; font-size:11px; }
.avatar--lg{ width:46px; height:46px; font-size:16px; border-radius:var(--r-md); }

.bar{ height:6px; border-radius:3px; background:var(--surface-3); overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:3px; background:var(--ink-800); }
.bar > i.sig{ background:linear-gradient(90deg,var(--signal-300),var(--signal)); }
.bar > i.ok{ background:var(--ok); }
.bar > i.warn{ background:var(--warn); }
.bar > i.danger{ background:var(--danger); }

.divider{ height:1px; background:var(--line); margin:14px 0; }
.rule-label{ display:flex; align-items:center; gap:10px; margin:20px 0 12px; }
.rule-label::after{ content:""; flex:1; height:1px; background:var(--line); }

.note{
  border-left:3px solid var(--signal); background:var(--signal-50);
  padding:10px 12px; border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:12.5px; color:var(--ink-700);
}
.note--info{ border-color:var(--info); background:var(--info-bg); }
.note--warn{ border-color:var(--warn); background:var(--warn-bg); }
.note--ok{ border-color:var(--ok); background:var(--ok-bg); }
.note--danger{ border-color:var(--danger); background:var(--danger-bg); }
.note b{ color:var(--ink-900); }

.empty{ padding:44px 20px; text-align:center; color:var(--ink-400); }
.empty svg{ margin:0 auto 10px; opacity:.5; }

/* Timeline */
.tl{ position:relative; padding-left:20px; }
.tl::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--line-2); }
.tl li{ position:relative; padding:0 0 16px; }
.tl li:last-child{ padding-bottom:0; }
.tl li::before{
  content:""; position:absolute; left:-18px; top:5px; width:9px; height:9px; border-radius:50%;
  background:var(--surface); border:2px solid var(--line-2);
}
.tl li.done::before{ background:var(--ok); border-color:var(--ok); }
.tl li.now::before{ background:var(--signal); border-color:var(--signal); box-shadow:0 0 0 3px var(--signal-50); }
.tl li.fail::before{ background:var(--danger); border-color:var(--danger); }
.tl .tl-t{ font-size:13px; font-weight:600; color:var(--ink-900); }
.tl .tl-m{ font-size:11.5px; color:var(--ink-400); font-family:var(--f-mono); }

/* Stat tile */
.stat{ padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); }
.stat .stat-l{ font-size:12px; color:var(--ink-500); display:flex; align-items:center; gap:5px; }
.stat .stat-v{ font-family:var(--f-dis); font-size:28px; font-weight:700; color:var(--ink-900); line-height:1.15; margin-top:6px; font-variant-numeric:tabular-nums; }
.stat .stat-v small{ font-size:13px; font-weight:600; color:var(--ink-500); margin-left:2px; }
.stat .stat-d{ font-size:11.5px; margin-top:4px; font-family:var(--f-mono); }
.stat .up{ color:var(--ok); } .stat .down{ color:var(--danger); }

/* Scrollbars */
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgba(13,17,23,.16); border-radius:5px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(13,17,23,.30); background-clip:content-box; }

/* Reveal animation */
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.rise{ animation:rise .5s cubic-bezier(.2,.7,.3,1) both; }

/* Toast */
#toast{ position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(20px); z-index:9999;
  background:var(--ink-900); color:#fff; padding:10px 18px; border-radius:var(--r-md); font-size:13px;
  box-shadow:var(--sh-3); opacity:0; pointer-events:none; transition:.25s cubic-bezier(.2,.7,.3,1); max-width:80vw; }
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* Version scope badges — V1.0 / V1.5 / V2.0 delivery boundary */
.vtag{
  display:inline-flex; align-items:center; gap:3px; font-family:var(--f-mono); font-size:9.5px; font-weight:600;
  letter-spacing:.06em; padding:1px 5px; border-radius:var(--r-xs); border:1px solid; white-space:nowrap; vertical-align:middle;
}
.vtag--v10{ color:var(--ok);     border-color:var(--ok-line);     background:var(--ok-bg); }
.vtag--v15{ color:var(--warn);   border-color:var(--warn-line);   background:var(--warn-bg); }
.vtag--v20{ color:var(--temp);   border-color:var(--temp-line);   background:var(--temp-bg); }
.vtag--ext{ color:var(--info);   border-color:var(--info-line);   background:var(--info-bg); }
.device.is-v15 .phone{ box-shadow:var(--sh-3), inset 0 0 0 1.5px #33383F, 0 0 0 3px var(--warn-bg); }

/* Doc reference chip — links prototype back to the spec */
.ref{
  display:inline-flex; align-items:center; gap:4px; font-family:var(--f-mono);
  font-size:10px; letter-spacing:.04em; color:var(--ink-400);
  border:1px dashed var(--line-2); border-radius:var(--r-xs); padding:1px 5px; background:var(--surface-2);
}
.ref b{ color:var(--signal-700); font-weight:600; }