/* Deal Explorer - shared tokens (light + dark), reference data-viz palette */
:root {
  color-scheme: light;
  --page: #f9f9f7; --surface: #fcfcfb; --surface-2: #f1f0ec;
  --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781;
  --grid: #e1e0d9; --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10); --border-2: rgba(11, 11, 11, 0.20);
  --accent: #2a78d6; --accent-ink: #1c5cab; --wash: rgba(42, 120, 214, 0.07); --sel: rgba(42, 120, 214, 0.13);
  --good: #006300; --bad: #d03b3b; --note-bg: #fff7e3; --note-ink: #5c4300;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #b3b1a9;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --surface-2: #242422;
    --ink: #ffffff; --ink-2: #c3c2b7; --muted: #898781;
    --grid: #2c2c2a; --axis: #383835;
    --border: rgba(255, 255, 255, 0.10); --border-2: rgba(255, 255, 255, 0.20);
    --accent: #3987e5; --accent-ink: #86b6ef; --wash: rgba(57, 135, 229, 0.10); --sel: rgba(57, 135, 229, 0.22);
    --good: #0ca30c; --bad: #e66767; --note-bg: #2b2412; --note-ink: #f0cc75;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #63625c;
    --shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --surface-2: #242422;
  --ink: #ffffff; --ink-2: #c3c2b7; --muted: #898781;
  --grid: #2c2c2a; --axis: #383835;
  --border: rgba(255, 255, 255, 0.10); --border-2: rgba(255, 255, 255, 0.20);
  --accent: #3987e5; --accent-ink: #86b6ef; --wash: rgba(57, 135, 229, 0.10); --sel: rgba(57, 135, 229, 0.22);
  --good: #0ca30c; --bad: #e66767; --note-bg: #2b2412; --note-ink: #f0cc75;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #63625c;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--page); color: var(--ink);
  font: 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn {
  border: 1px solid var(--border-2); background: var(--surface); border-radius: 8px;
  padding: 6px 12px; line-height: 1.3;
}
.btn:hover { background: var(--wash); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--wash); }
.btn[disabled] { opacity: 0.45; cursor: default; }

input[type="text"], input[type="password"], input[type="search"], select {
  border: 1px solid var(--border-2); background: var(--surface); border-radius: 8px; padding: 6px 10px;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
/* the open dropdown list is drawn by the browser on a light background: always black text there, in both themes */
select option, select optgroup { color: #0b0b0b; background-color: #ffffff; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login {
  width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 28px 24px; box-shadow: var(--shadow);
}
.login h1 { font-size: 20px; margin: 0 0 4px; font-weight: 600; }
.login p { margin: 0 0 18px; color: var(--ink-2); }
.login label { display: block; font-weight: 500; margin: 12px 0 6px; }
.login input { width: 100%; padding: 9px 12px; }
.login .btn { width: 100%; margin-top: 18px; padding: 9px 12px; font-weight: 600; }
.login .err { color: var(--bad); min-height: 1.4em; margin: 10px 0 0; }
.login .fine { font-size: 12px; color: var(--muted); margin: 16px 0 0; }