@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@400;500;600;700&family=Public+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Martian+Mono:wght@300;400;500;700&display=swap');

/* ReviewBay shared theme. Terminal-editorial system: near-black surfaces,
   lime-chartreuse accent, Funnel Display / Public Sans / Martian Mono, square
   corners. Semantic tokens only (no raw hex in page components). The legacy
   token names (--bg, --surface, --ink, --muted, --line, --accent, --pos ...)
   are kept and remapped, so every existing page re-skins with no markup change. */
:root {
  /* base scale (brand DNA: #090909 / #ffffff / #cbfb5e) */
  --bg-0: #090909;   /* page */
  --bg-1: #121210;   /* card / panel */
  --bg-2: #1A1A17;   /* raised / input / bar track */
  --border-1: #262621;
  --border-2: #3A3A31;
  --text-0: #FFFFFF; /* headings */
  --text-1: #B7B7AD; /* body */
  --text-2: #7C7C72; /* muted / footnote */

  /* lime-chartreuse accent */
  --accent-base: #CBFB5E;
  --accent-bright: #E9FDAC;
  --accent-dim: #84A144;
  --accent-faint: #465423;

  /* inverse (light-on-dark primary buttons) */
  --inverse-bg: #FFFFFF;
  --inverse-text: #090909;

  /* ---- legacy semantic aliases (consumed by the pages) ---- */
  --bg: var(--bg-0);
  --surface: var(--bg-1);
  --surface-2: var(--bg-2);
  --ink: var(--text-0);
  --muted: var(--text-2);
  --line: var(--border-1);
  --line-strong: var(--border-2);
  --accent: var(--accent-base);
  --accent-2: var(--accent-bright);
  --accent-soft: rgba(203, 251, 94, 0.10);

  /* sentiment (always paired with a text label, never colour alone) */
  --pos: #9DE064;
  --neu: #E0B23E;
  --neg: #E0645C;

  /* shape: corners are always square */
  --r: 0px;
  --r-lg: 0px;
  --shadow: none;

  /* type */
  --font: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Funnel Display', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --tracking-label: 0.14em;

  --dur-fast: 120ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text-1);
  font-family: var(--font); font-size: 16px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-wrap: break-word;   /* long URLs/words never push the layout wider */
}
img, video { max-width: 100%; height: auto; }   /* media can't overflow its column */
h1, h2, h3, h4 { color: var(--ink); font-family: var(--font-display); font-weight: 500; margin: 0; letter-spacing: -.01em; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-bright); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- top bar / nav ---- */
.topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 15px 24px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.topbar .brand { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -.01em; color: var(--ink); }
.topbar .brand::before { content: "// "; color: var(--accent); font-weight: 700; }
.topbar .brand:hover { text-decoration: none; color: var(--accent-bright); }
.topbar .sp { flex: 1; }
.nav { display: flex; align-items: center; flex-wrap: wrap; }
.nav a {
  color: var(--text-1); font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--tracking-label); padding: 6px 0;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a:hover { color: var(--accent); text-decoration: none; }
.nav a.active { color: var(--accent); border-bottom-color: var(--accent); }
.nav a + a { margin-left: 22px; }

/* ---- layout ---- */
.wrap { max-width: 1000px; margin: 0 auto; padding: 24px 16px 80px; }
.wrap.narrow { max-width: 640px; }
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }

/* ---- cards ---- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius:0; padding: 20px; box-shadow: var(--shadow);
}
.card h3 {
  margin: 0 0 12px; font-family: var(--font-mono); font-size: 12px; color: var(--accent); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
}
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.full { grid-column: 1 / -1; }
.empty { color: var(--muted); padding: 22px; text-align: center; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--inverse-bg); color: var(--inverse-text); border: 1px solid var(--inverse-bg); cursor: pointer;
  font-family: var(--font-mono); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  padding: 13px 20px; border-radius:0; min-height: 44px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--inverse-text); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.block { width: 100%; }
.btn.small { padding: 9px 14px; font-size: 12px; min-height: 38px; }
.btn.ghost { background: transparent; color: var(--text-0); border: 1px solid var(--line-strong); }
.btn.ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }

/* ---- forms ---- */
label {
  display: block; font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; margin: 0 0 6px;
}
input, select, textarea {
  font-family: var(--font); font-size: 16px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius:0; padding: 12px 14px;
}
input { width: 100%; }
input::placeholder { color: var(--text-2); }
select { cursor: pointer; }

/* ---- pills / badges / text ---- */
.pill {
  display: inline-block; background: var(--surface-2); color: var(--text-1);
  border: 1px solid var(--line-strong); border-radius:0;
  padding: 4px 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em; margin-right: 6px;
}
.muted { color: var(--muted); }
code, .mono { font-family: var(--font-mono); font-size: .9em; }
code { background: var(--surface-2); border: 1px solid var(--line); padding: 1px 6px; border-radius:0; }

/* ---- charts: donut + bars ---- */
.donut { border-radius: 50%; position: relative; flex: 0 0 auto; }
.donut::after { content: ""; position: absolute; inset: 22%; background: var(--surface); border-radius: 50%; }
.dot { display: inline-block; border-radius:0; }
.bar { background: var(--surface-2); border-radius:0; overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius:0; background: var(--accent); }

/* ---- status dot (drawn, not emoji) ---- */
.status { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); margin-right: 7px; vertical-align: middle; }
.status.ok { background: var(--pos); }
.status.off { background: var(--muted); }