/* ============================================================
   RoonScope — Nothing Design System v3.0
   Swiss typography × industrial precision × dot-matrix motif
   Dark (OLED) / Light (paper) first-class, user-switchable.
   Fonts: Doto (display) + Space Grotesk (body) + Space Mono (data)
   ============================================================ */

/* ---------- FONT LOADING ---------- */
@import url('https://fonts.googleapis.com/css2?family=Doto:wght@400;700&family=Space+Grotesk:wght@300;400;500;700&family=Space+Mono:wght@400;700&display=swap');

/* ---------- TOKENS: DARK (default) ---------- */
:root, [data-mode="dark"]{
  --dot-color:rgba(255,255,255,.045);
  --black:#000000;
  --surface:#111111;
  --surface-raised:#1A1A1A;
  --border:#222222;
  --border-visible:#333333;
  --text-disabled:#666666;
  --text-secondary:#999999;
  --text-primary:#E8E8E8;
  --text-display:#FFFFFF;
  --interactive:#5B9BF6;
  /* data status (identical across modes) */
  --success:#4A9E5C;
  --warning:#D4A843;
  --error:#D71921;
  --accent:#D71921;
  --accent-subtle:rgba(215,25,33,.15);
  /* legacy aliases (mapped) */
  --bg:#000000;--card:#111111;--card2:#1A1A1A;--green:#4A9E5C;--red:#D71921;
  --blue:#5B9BF6;--pink:#999999;
  /* type scale */
  --display-xl:72px;--display-lg:48px;--display-md:36px;--heading:24px;
  --subheading:18px;--body:16px;--body-sm:14px;--caption:12px;--label:11px;
  color-scheme:dark;
}
[data-mode="light"]{
  --dot-color:rgba(0,0,0,.06);
  --black:#F5F5F5;
  --surface:#FFFFFF;
  --surface-raised:#F0F0F0;
  --border:#E8E8E8;
  --border-visible:#CCCCCC;
  --text-disabled:#999999;
  --text-secondary:#666666;
  --text-primary:#1A1A1A;
  --text-display:#000000;
  --interactive:#007AFF;
  --bg:#F5F5F5;--card:#FFFFFF;--card2:#F0F0F0;--green:#4A9E5C;--red:#D71921;
  --blue:#007AFF;--pink:#666666;
  color-scheme:light;
}

/* ---------- BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--black);color:var(--text-primary);
  font-family:"Space Grotesk","DM Sans","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:var(--body-sm);font-weight:400;line-height:1.5;
  min-height:100vh;transition:background .25s cubic-bezier(.25,.1,.25,1),color .25s cubic-bezier(.25,.1,.25,1);
  /* Nothing 点阵底纹：极淡的全局 dot grid */
  background-image:radial-gradient(circle,var(--dot-color) 1px,transparent 1px);
  background-size:22px 22px;
  background-attachment:fixed;
}
/* label style: Space Mono ALL CAPS */
.lbl{font-family:"Space Mono",monospace;font-size:var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.num{font-family:"Space Mono","Noto Sans SC","PingFang SC",monospace;font-variant-numeric:tabular-nums}
.mono{font-family:"Space Mono","Noto Sans SC","PingFang SC",monospace}
.pos{color:var(--success)}.neg{color:var(--error)}
.muted{color:var(--text-secondary)}
a{color:var(--interactive);text-decoration:none}
a:hover{color:var(--text-primary)}
:focus-visible{outline:1px solid var(--text-primary);outline-offset:2px}

/* ---------- HEADER ---------- */
header{
  padding:0 24px;height:64px;display:flex;align-items:center;gap:24px;
  background:var(--black);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;
}
.logo{width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex:none}
h1{font-size:var(--subheading);font-weight:500;letter-spacing:.02em}
h1 b{color:var(--text-display);font-weight:700}
.mode-toggle{
  display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
  font-family:"Space Mono",monospace;font-size:var(--label);letter-spacing:.08em;
  color:var(--text-secondary);background:none;border:1px solid var(--border-visible);
  border-radius:999px;padding:6px 14px;min-height:32px;transition:border-color .2s;
}
.mode-toggle:hover{border-color:var(--text-primary)}
.mode-toggle .dot{width:8px;height:8px;border-radius:50%;background:var(--text-disabled);transition:background .2s}
[data-mode="dark"] .mode-toggle .dot{background:var(--text-display)}
[data-mode="light"] .mode-toggle .dot{background:#000}

/* ---------- SEARCH ---------- */
.searchbox{position:relative;flex:1;max-width:420px}
.searchbox input{
  width:100%;padding:10px 14px;border:none;border-bottom:1px solid var(--border-visible);
  background:transparent;color:var(--text-primary);outline:none;
  font-family:"Space Mono",monospace;font-size:var(--body-sm);
  transition:border-color .2s;
}
.searchbox input:focus{border-bottom-color:var(--text-primary)}
.searchbox input::placeholder{color:var(--text-disabled);font-family:"Space Mono",monospace;font-size:var(--caption);letter-spacing:.04em}

/* ---------- STATS: stat rows (no cards) ---------- */
.stats{display:flex;gap:32px;padding:20px 0;flex-wrap:wrap}
.stat .k{font-family:"Space Mono",monospace;font-size:var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:6px}
.stat .v{font-family:"Space Mono",monospace;font-size:var(--subheading);font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-display)}
.stat .v small{font-family:"Space Mono",monospace;font-size:var(--caption);color:var(--text-secondary);font-weight:400}

/* ---------- TABS: bracket/pipe nav ---------- */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:0}
.tab{
  padding:12px 20px;cursor:pointer;font-family:"Space Mono",monospace;
  font-size:var(--caption);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-secondary);border-bottom:1px solid transparent;margin-bottom:-1px;
  background:none;border-left:none;border-right:none;border-top:none;transition:color .2s;
}
.tab:hover{color:var(--text-primary)}
.tab.active{color:var(--text-display);border-bottom-color:var(--text-display)}

/* ---------- TABLE ---------- */
.card{background:var(--black);border:1px solid var(--border);border-radius:0;overflow:hidden}
.card-h{padding:14px 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-h .ttl{font-family:"Space Mono",monospace;font-size:var(--caption);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:var(--body-sm)}
th{
  font-family:"Space Mono",monospace;font-size:var(--label);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-secondary);text-align:left;
  padding:10px 16px;border-bottom:1px solid var(--border-visible);white-space:nowrap;font-weight:400;
  background:var(--surface);
}
td{padding:12px 16px;border-bottom:1px solid var(--border);white-space:nowrap;color:var(--text-primary)}
tbody tr{cursor:pointer;transition:background .15s}
tbody tr:hover{background:var(--surface-raised)}
tbody tr:last-child td{border-bottom:none}
.num{font-family:"Space Mono",monospace;font-variant-numeric:tabular-nums}
th.num{text-align:right}

/* ---------- TAGS: no fill, border pill ---------- */
.tag{
  font-family:"Space Mono",monospace;font-size:var(--caption);letter-spacing:.04em;
  text-transform:uppercase;padding:3px 10px;border-radius:999px;
  border:1px solid var(--border-visible);color:var(--text-secondary);
  display:inline-flex;align-items:center;gap:4px;background:none;
}
.tag.spark{border-color:var(--text-primary);color:var(--text-display)}
.tag.grad{border-color:var(--success);color:var(--success)}
.tag.manual{border-color:var(--border-visible);color:var(--text-secondary)}
.tag.verified{border-color:var(--text-primary);color:var(--text-display)}
.tag.bonding{border-color:var(--warning);color:var(--warning)}

/* ---------- CHG PILL: value-colored, minimal ---------- */
.chg-pill{
  font-family:"Space Mono",monospace;font-size:var(--caption);font-weight:700;
  padding:2px 8px;border-radius:4px;display:inline-flex;gap:4px;
}
.chg-pill.up{color:var(--success);background:none}
.chg-pill.down{color:var(--error);background:none}

/* ---------- BUTTONS ---------- */
.btn{
  font-family:"Space Mono",monospace;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;padding:12px 24px;min-height:44px;cursor:pointer;
  background:var(--text-display);color:var(--black);border:none;border-radius:999px;
  transition:opacity .2s;
}
.btn:hover{opacity:.85}
.btn.ghost{background:transparent;border:1px solid var(--border-visible);color:var(--text-primary)}
.btn.ghost:hover{border-color:var(--text-primary)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.swap-btn{font-family:"Space Mono",monospace;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:12px 24px;min-height:44px;cursor:pointer;border:none;border-radius:999px}
.swap-btn.buy{background:var(--text-display);color:var(--black)}
.swap-btn.sell{background:transparent;color:var(--error);border:1px solid var(--error)}
.swap-btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- ICONS: monoline thin ---------- */
.ic{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex:none}
svg.ic{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- PAGER ---------- */
.pager{display:flex;gap:4px;align-items:center}
.pg{
  font-family:"Space Mono",monospace;font-size:var(--caption);min-width:32px;min-height:32px;
  background:none;border:1px solid var(--border-visible);color:var(--text-secondary);
  cursor:pointer;border-radius:4px;transition:border-color .2s,color .2s;padding:0 8px;
}
.pg:hover{border-color:var(--text-primary);color:var(--text-primary)}
#pgInfo{font-family:"Space Mono",monospace;font-size:var(--caption);color:var(--text-secondary);padding:0 8px}

/* ---------- PROGRESS: segmented (signature) ---------- */
.seg-bar{display:flex;gap:2px;width:120px;height:8px}
.seg-bar i{flex:1;background:var(--border);border-radius:0}
.seg-bar i.f{background:var(--text-display)}

/* ---------- DOT GRID motif ---------- */
.dot-grid{background-image:radial-gradient(circle,var(--border-visible) 1px,transparent 1px);background-size:16px 16px}
.dot-grid-subtle{background-image:radial-gradient(circle,var(--border) .5px,transparent .5px);background-size:12px 12px}

/* ---------- STATUS TEXT (no toasts) ---------- */
.status{font-family:"Space Mono",monospace;font-size:var(--caption);letter-spacing:.04em;display:none;padding:10px 12px;border:1px solid var(--border)}
.status.info{display:block;color:var(--text-secondary)}
.status.ok{display:block;color:var(--success);border-color:var(--success)}
.status.err{display:block;color:var(--error);border-color:var(--error)}

/* ---------- MODAL: flat, border ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:100}
[data-mode="light"] .modal-bg{background:rgba(0,0,0,.3)}
.modal-bg.show{display:flex}
.modal{background:var(--surface);border:1px solid var(--border-visible);border-radius:12px;padding:24px;width:min(92vw,400px);max-height:80vh;overflow-y:auto}
.modal h3{font-size:var(--subheading);font-weight:500;margin-bottom:16px}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:var(--border-visible);border-radius:0}
::-webkit-scrollbar-track{background:var(--black)}

/* ---------- MOTION ---------- */
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}