/* Tool Manager — Grok-Nobody skin (business-white + dark-gold).
   Tokens mapped onto existing --text-1 / --accent names so app.css keeps working.
   Local fonts only; isolated devices must not wait on CDN. */

:root,
[data-theme="light"] {
  --bg0: #f4f1ea;
  --bg1: #faf8f4;
  --panel: rgba(255, 255, 255, 0.82);
  --panel-solid: #ffffff;
  --panel-soft: #f7f4ee;
  --ink: #1c1917;
  --ink-2: #57534e;
  --ink-3: #a8a29e;
  --line: rgba(28, 25, 23, 0.08);
  --line-2: rgba(28, 25, 23, 0.14);
  --accent: #b45309;
  --accent-2: #d97706;
  --accent-soft: rgba(217, 119, 6, 0.12);
  --accent-ink: #fffbeb;
  --ok: #047857;
  --bad: #be123c;
  --warn: #b45309;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 10px 30px rgba(28, 25, 23, 0.06);
  --shadow-lg: 0 24px 60px rgba(28, 25, 23, 0.10);
  --mesh:
    radial-gradient(900px 420px at 0% -10%, rgba(251, 191, 36, 0.18), transparent 60%),
    radial-gradient(700px 360px at 100% 0%, rgba(120, 113, 108, 0.10), transparent 55%),
    linear-gradient(180deg, #fbfaf7 0%, #f1eee7 100%);

  /* aliases used by app.css */
  --bg-base: var(--bg0);
  --bg-soft: var(--bg1);
  --surface-0: var(--panel-soft);
  --surface-1: var(--panel-solid);
  --surface-2: var(--panel-soft);
  --surface-3: #efebe3;
  --border: var(--line);
  --border-strong: var(--line-2);
  --border-highlight: rgba(255, 255, 255, 0.9);
  --text-1: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --accent-rgb: 180, 83, 9;
  --accent-strong: #92400e;
  --accent-dim: var(--accent-soft);
  --teal: var(--accent);
  --teal-dim: var(--accent-soft);
  --success: var(--ok);
  --warning: var(--warn);
  --danger: var(--bad);
  --st-online: #047857;
  --st-offline: #78716c;
  --st-alarm: #be123c;
  --shadow-1: var(--shadow);
  --shadow-2: var(--shadow-lg);
  --ring: 0 0 0 3px var(--accent-soft);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mono: "SF Mono", "JetBrains Mono", "Menlo", "Consolas", ui-monospace, monospace;
  --sans: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif;
  --font: var(--sans);
  --glass-panel: var(--panel);
  --glass-panel-strong: rgba(255, 255, 255, 0.96);
  --glass-edge: rgba(255, 255, 255, 0.7);
  --glass-rim: rgba(28, 25, 23, 0.06);
  --sidebar-w: 248px;
  --rail-w: var(--sidebar-w);
  --topbar-h: 56px;
  --detail-h: 280px;
  --term-w: 42%;
  --r: 20px;
  --r-sm: 12px;
  --radius: var(--r);
  --radius-sm: var(--r-sm);
  --radius-xs: 8px;
  --ctrl-h: 36px;
  --row-h: 40px;
  --icon-sm: 15px;
  --icon-md: 17px;
  --z-toast: 200;
  --action-start-bg: var(--accent);
  --action-start-fg: var(--accent-ink);
  --action-start-bd: transparent;
  --action-cfg-bg: var(--panel-solid);
  --action-cfg-fg: var(--ink);
  --action-cfg-bd: var(--line-2);
  --action-doc-bg: var(--panel-solid);
  --action-doc-fg: var(--ink);
  --action-doc-bd: var(--line-2);
  --action-danger-bg: color-mix(in srgb, var(--bad) 10%, transparent);
  --action-danger-fg: var(--bad);
  --action-danger-bd: transparent;
  --action-warn-bg: var(--accent-soft);
  --action-warn-fg: var(--warn);
  --action-warn-bd: transparent;
  --bg: var(--bg-base);
  --sidebar-bg: color-mix(in srgb, var(--panel) 88%, transparent);
  --surface: var(--surface-1);
  --surface-muted: var(--surface-2);
  --online: var(--ok);
  --offline: var(--bad);
  --unknown: var(--ink-3);
  --danger-fg: var(--bad);
  color-scheme: light;
}

[data-theme="dark"] {
  --bg0: #0c0a09;
  --bg1: #14110f;
  --panel: rgba(28, 25, 23, 0.78);
  --panel-solid: #1c1917;
  --panel-soft: #211e1b;
  --ink: #fafaf9;
  --ink-2: #a8a29e;
  --ink-3: #78716c;
  --line: rgba(251, 191, 36, 0.10);
  --line-2: rgba(251, 191, 36, 0.18);
  --accent: #f59e0b;
  --accent-2: #fbbf24;
  --accent-soft: rgba(245, 158, 11, 0.14);
  --accent-ink: #1c1917;
  --ok: #34d399;
  --bad: #fb7185;
  --warn: #fbbf24;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 40px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.45);
  --mesh:
    radial-gradient(900px 420px at 10% -20%, rgba(245, 158, 11, 0.16), transparent 55%),
    radial-gradient(700px 400px at 100% 0%, rgba(68, 64, 60, 0.35), transparent 50%),
    linear-gradient(165deg, #0c0a09 0%, #171412 55%, #0c0a09 100%);

  --bg-base: var(--bg0);
  --bg-soft: var(--bg1);
  --surface-0: #171412;
  --surface-1: var(--panel-solid);
  --surface-2: var(--panel-soft);
  --surface-3: #2a241f;
  --border: var(--line);
  --border-strong: var(--line-2);
  --border-highlight: rgba(255, 255, 255, 0.05);
  --text-1: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --accent-rgb: 245, 158, 11;
  --accent-strong: #d97706;
  --accent-dim: var(--accent-soft);
  --teal: var(--accent);
  --teal-dim: var(--accent-soft);
  --success: var(--ok);
  --warning: var(--warn);
  --danger: var(--bad);
  --st-online: #34d399;
  --st-offline: #78716c;
  --st-alarm: #fb7185;
  --shadow-1: var(--shadow);
  --shadow-2: var(--shadow-lg);
  --ring: 0 0 0 3px var(--accent-soft);
  --glass-panel: var(--panel);
  --glass-panel-strong: rgba(28, 25, 23, 0.96);
  --glass-edge: rgba(255, 255, 255, 0.06);
  --glass-rim: rgba(251, 191, 36, 0.10);
  --action-start-bg: var(--accent);
  --action-start-fg: var(--accent-ink);
  --action-start-bd: transparent;
  --action-cfg-bg: color-mix(in srgb, var(--ink) 4%, transparent);
  --action-cfg-fg: var(--ink);
  --action-cfg-bd: var(--line);
  --action-doc-bg: color-mix(in srgb, var(--ink) 4%, transparent);
  --action-doc-fg: var(--ink);
  --action-doc-bd: var(--line);
  --action-danger-bg: color-mix(in srgb, var(--bad) 16%, transparent);
  --action-danger-fg: #fda4af;
  --action-danger-bd: transparent;
  --action-warn-bg: color-mix(in srgb, var(--warn) 14%, transparent);
  --action-warn-fg: #fcd34d;
  --action-warn-bd: transparent;
  --sidebar-bg: color-mix(in srgb, var(--panel) 88%, transparent);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 13px/1.45 var(--sans);
  color: var(--ink);
  background: var(--mesh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
[hidden] { display: none !important; }

input[type="checkbox"],
input[type="radio"] { accent-color: var(--accent); }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 99px;
}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink) 28%, transparent);
}