/* Theme tokens — BOTH blocks, verbatim from the platform style brief. Every screen reads these; never a hardcoded white/black. */
:root {
  --radius: 0.625rem;
  --sab: env(safe-area-inset-bottom, 0px);
  --background: #eef0f3; --foreground: #1a1d24;
  --surface: #f6f7f9; --card: #ffffff; --card-foreground: #1a1d24;
  --popover: #ffffff; --popover-foreground: #1a1d24;
  --text-heading: #0d0f14; --text-body: #3a3e47;
  --text-secondary: #4e5360; --text-tertiary: #6b7080; --text-placeholder: #9ca0ac;
  --primary: #20a2c7; --primary-foreground: #ffffff;
  --secondary: #eef0f3; --secondary-foreground: #3a3e47;
  --muted: #e4e7eb; --muted-foreground: #6b7080;
  --accent: #e4e7eb; --accent-foreground: #3a3e47;
  --destructive: #ef4444; --destructive-foreground: #ffffff;
  --border: #e0e3e7; --border-subtle: #e9ecef; --border-strong: #d2d6db;
  --input: #dce0e4; --input-background: #eef0f3; --ring: #20a2c7;
  --sidebar: #e4e7eb; --sidebar-foreground: #1a1d24;
  --sidebar-primary: #20a2c7; --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(32,162,199,0.08); --sidebar-accent-foreground: #1a1d24;
  --sidebar-border: #dce0e4; --sidebar-ring: #20a2c7;
}
.dark {
  --background: #191a1e; --foreground: #d4d4d8;
  --surface: #1c1d21; --card: #1f2024; --card-foreground: #d4d4d8;
  --popover: #1f2024; --popover-foreground: #d4d4d8;
  --text-heading: #f4f4f5; --text-body: #d4d4d8;
  --text-secondary: #a1a1aa; --text-tertiary: #71717a; --text-placeholder: #52525b;
  --primary: #20a2c7; --primary-foreground: #ffffff;
  --secondary: #2d2e33; --secondary-foreground: #d4d4d8;
  --muted: #2d2e33; --muted-foreground: #71717a;
  --accent: #2d2e33; --accent-foreground: #d4d4d8;
  --destructive: #ef4444; --destructive-foreground: #ffffff;
  --border: #2d2e33; --border-subtle: #252629; --border-strong: #3a3c42;
  --input: #3a3b40; --input-background: #1f2024; --ring: #20a2c7;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--background); color: var(--foreground);
  font: 15px/1.45 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 0 14px calc(24px + var(--sab, 0px));
}
main { max-width: 640px; margin: 0 auto; }
h1 { font-size: 17px; font-weight: 600; color: var(--text-heading); margin: 18px 0 8px; }
p { margin: 0 0 8px; color: var(--text-body); }
.muted { color: var(--text-secondary); }
.card { background: var(--card); color: var(--card-foreground); border: .5px solid var(--border); border-radius: var(--radius); padding: 16px; margin-top: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: var(--radius); border: .5px solid var(--border); background: var(--secondary); color: var(--secondary-foreground); font: inherit; font-weight: 500; cursor: pointer; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.input { width: 100%; min-height: 40px; padding: 8px 12px; border-radius: var(--radius); border: .5px solid var(--input); background: var(--input-background); color: var(--foreground); font: inherit; }
.input:focus { outline: 2px solid var(--ring); outline-offset: 1px; }
.empty { text-align: center; padding: 28px 12px; color: var(--text-secondary); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gear { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 18px; color: var(--text-secondary); text-decoration: none; font-size: 18px; }
.gear:hover { background: var(--muted); }