/* Agent SMSLab — design tokens (light default, smslab22.com palette) */
:root,
[data-theme="light"] {
  --bg: #ffffff;
  --elev: #fafbfe;
  --card: #ffffff;
  --ink: #10142a;
  --muted: #5a6178;
  --faint: #8b92a8;
  --line: rgba(24, 31, 71, 0.1);
  --line-strong: rgba(24, 31, 71, 0.2);
  --accent: #0e9e97;
  --accent-soft: rgba(14, 158, 151, 0.1);
  --task: #c2740a;
  --ok: #0e9e97;
  --ok-soft: rgba(14, 158, 151, 0.1);
  --warn: #c2740a;
  --danger: #c0392b;
  --err: #c0392b;
  --shadow: 0 2px 10px rgba(24, 31, 71, 0.04);
  --shadow-hover: 0 14px 32px rgba(24, 31, 71, 0.1);
  --surface: #ffffff;
  --surface-2: #f6f7fb;
  --surface-3: #eef0f6;
  --surface-inset: #f6f7fb;
  --btn-primary-bg: #10142a;
  --btn-primary-fg: #ffffff;
  --btn-secondary-bg: #f6f7fb;
  --btn-secondary-fg: #10142a;
  --rail-bg: rgba(255, 255, 255, 0.92);
  --mask: rgba(16, 20, 42, 0.32);
  --accent-2: var(--task);
  --serif: "Source Serif 4", "IBM Plex Serif", "Noto Serif", serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --side: 252px;
  --top: 64px;
  --radius: 16px;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #07090e;
  --elev: #10141c;
  --card: #10141c;
  --ink: #e8eef6;
  --muted: #8a96a8;
  --faint: #5a6574;
  --line: rgba(232, 238, 246, 0.12);
  --line-strong: rgba(232, 238, 246, 0.2);
  --accent: #7ec8c3;
  --accent-soft: rgba(126, 200, 195, 0.12);
  --task: #e8b86d;
  --ok: #7ec8c3;
  --ok-soft: rgba(126, 200, 195, 0.12);
  --warn: #e8b86d;
  --danger: #e08a8a;
  --err: #e08a8a;
  --shadow: none;
  --shadow-hover: none;
  --surface: #07090e;
  --surface-2: #1a2030;
  --surface-3: #10141c;
  --surface-inset: #07090e;
  --btn-primary-bg: #e8eef6;
  --btn-primary-fg: #07090e;
  --btn-secondary-bg: #1a2030;
  --btn-secondary-fg: #e8eef6;
  --rail-bg: rgba(7, 9, 14, 0.88);
  --mask: rgba(7, 9, 14, 0.48);
  --accent-2: var(--task);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg: #07090e;
    --elev: #10141c;
    --card: #10141c;
    --ink: #e8eef6;
    --muted: #8a96a8;
    --faint: #5a6574;
    --line: rgba(232, 238, 246, 0.12);
    --line-strong: rgba(232, 238, 246, 0.2);
    --accent: #7ec8c3;
    --accent-soft: rgba(126, 200, 195, 0.12);
    --task: #e8b86d;
    --ok: #7ec8c3;
    --ok-soft: rgba(126, 200, 195, 0.12);
    --warn: #e8b86d;
    --danger: #e08a8a;
    --err: #e08a8a;
    --shadow: none;
    --shadow-hover: none;
    --surface: #07090e;
    --surface-2: #1a2030;
    --surface-3: #10141c;
    --surface-inset: #07090e;
    --btn-primary-bg: #e8eef6;
    --btn-primary-fg: #07090e;
    --btn-secondary-bg: #1a2030;
    --btn-secondary-fg: #e8eef6;
    --rail-bg: rgba(7, 9, 14, 0.88);
    --mask: rgba(7, 9, 14, 0.48);
    --accent-2: var(--task);
    color-scheme: dark;
  }
}


/* Layout tokens (all themes) */
:root {
  --page-max: 1180px;
  --page-gutter: clamp(20px, 4vw, 48px);
  --page-inline: max(var(--page-gutter), calc((100% - var(--page-max)) / 2 + var(--page-gutter)));
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--faint) var(--bg);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--faint) var(--bg);
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--bg); }
*::-webkit-scrollbar-thumb {
  background: var(--faint);
  border: 2px solid var(--bg);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--accent); }
*::-webkit-scrollbar-corner { background: var(--bg); }

.bill-hint {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding: 1px 7px 1px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--task) 18%, transparent);
  color: var(--task);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.78em;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  vertical-align: middle;
  white-space: nowrap;
}
.bill-hint .bill-fire {
  width: 12px;
  height: 12px;
  display: block;
  flex: none;
}
.bill-hint .bill-n {
  font-variant-numeric: tabular-nums;
}