/* Oddtusk SEO Intelligence — theme per dataviz reference palette */
:root {
  --surface-1:#fcfcfb; --plane:#f9f9f7;
  --ink-1:#0b0b0b; --ink-2:#52514e; --muted:#898781;
  --grid:#e1e0d9; --axis:#c3c2b7; --ring:rgba(11,11,11,.10);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --good-text:#006300;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --surface-1:#1a1a19; --plane:#0d0d0d;
  --ink-1:#ffffff; --ink-2:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --axis:#383835; --ring:rgba(255,255,255,.10);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --good-text:#0ca30c;
  color-scheme: dark;
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; height:100%; }
body {
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--plane); color:var(--ink-1);
}
h1 { font-size:20px; margin:0 0 4px; }
h2 { font-size:15px; margin:0 0 10px; }
h3 { font-size:16px; margin:0 0 12px; }
a { color:var(--s1); }
.muted { color:var(--muted); }
.tiny { font-size:11px; letter-spacing:.04em; }
.err { color:var(--critical); font-size:13px; }

/* layout */
#app { display:grid; grid-template-columns:228px 1fr; min-height:100vh; }
.side {
  background:var(--surface-1); border-right:1px solid var(--ring);
  padding:18px 14px; display:flex; flex-direction:column; gap:18px;
  position:sticky; top:0; height:100vh;
}
main { padding:26px 30px 60px; max-width:1280px; }

.brand { display:flex; align-items:center; gap:10px; font-size:15px; line-height:1.15; }
.brand b { font-weight:700; }
.brand-mark {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px; background:var(--s1);
  color:#fff; font-weight:800; font-size:13px; flex:none;
}

.proj-box { display:flex; flex-direction:column; gap:6px; }
.proj-box select { width:100%; }

#nav { display:flex; flex-direction:column; gap:2px; }
#nav a {
  padding:9px 12px; border-radius:8px; color:var(--ink-2);
  text-decoration:none; cursor:pointer; font-weight:500;
}
#nav a:hover { background:color-mix(in oklab, var(--ink-1) 6%, transparent); }
#nav a.active { background:color-mix(in oklab, var(--s1) 14%, transparent); color:var(--ink-1); }

.side-foot { margin-top:auto; display:flex; flex-direction:column; gap:8px; }

/* controls */
input, select, textarea {
  width:100%; padding:8px 10px; border-radius:8px;
  border:1px solid var(--ring); background:var(--plane); color:var(--ink-1);
  font:inherit;
}
input:focus, select:focus, textarea:focus { outline:2px solid var(--s1); outline-offset:1px; border-color:transparent; }
label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--ink-2); }
.btn {
  padding:8px 14px; border-radius:8px; border:1px solid var(--ring);
  background:var(--surface-1); color:var(--ink-1); cursor:pointer; font:inherit; font-weight:600;
}
.btn:hover { background:color-mix(in oklab, var(--ink-1) 7%, var(--surface-1)); }
.btn.primary { background:var(--s1); border-color:var(--s1); color:#fff; }
.btn.primary:hover { filter:brightness(1.08); }
.btn.ghost { background:transparent; }
.btn.wide { width:100%; }
.tiny-btn { padding:6px 10px; font-size:12px; }
.row { display:flex; align-items:center; }
.row.gap { gap:10px; }
.row.end { justify-content:flex-end; }
.grow { flex:1; }
.searchbar { display:flex; gap:10px; margin:14px 0 20px; max-width:760px; }
.searchbar input { flex:1; }

/* badges & meta */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; letter-spacing:.05em;
  padding:3px 8px; border-radius:6px;
}
.badge.warn { background:color-mix(in oklab, var(--warning) 22%, transparent); color:var(--ink-1); }
.badge.ok   { background:color-mix(in oklab, var(--good) 18%, transparent); color:var(--ink-1); }
.fetchmeta { font-size:12px; color:var(--muted); display:flex; gap:10px; align-items:center; margin:6px 0 0; }
.fetchmeta button { padding:3px 9px; font-size:11px; }

/* cards & grids */
.cards { display:grid; gap:14px; }
.cards.tiles { grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); }
.cards.two { grid-template-columns:1fr 1fr; }
@media (max-width:1100px){ .cards.two { grid-template-columns:1fr; } }
.card {
  background:var(--surface-1); border:1px solid var(--ring);
  border-radius:12px; padding:16px 18px;
}
.tile .t-label { font-size:12px; color:var(--ink-2); margin-bottom:4px; }
.tile .t-value { font-size:26px; font-weight:700; }
.tile .t-sub { font-size:12px; color:var(--muted); margin-top:2px; }
.tile .up { color:var(--good-text); font-weight:600; }
.tile .down { color:var(--critical); font-weight:600; }

.chart-box { position:relative; height:260px; }
.chart-box.tall { height:320px; }

/* tables */
.tblwrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:13px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--grid); white-space:nowrap; }
td.wrap { white-space:normal; max-width:420px; }
th { color:var(--muted); font-weight:600; font-size:12px; position:sticky; top:0; background:var(--surface-1); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tr:hover td { background:color-mix(in oklab, var(--ink-1) 4%, transparent); }
.pill { display:inline-block; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:600; border:1px solid var(--ring); }
.kd { display:inline-block; min-width:30px; text-align:center; padding:2px 7px; border-radius:6px; font-weight:700; font-size:12px; color:#fff; }

/* tabs */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--grid); margin:16px 0 14px; }
.tabs button {
  border:none; background:none; padding:8px 14px; cursor:pointer;
  color:var(--ink-2); font:inherit; font-weight:600;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tabs button.active { color:var(--ink-1); border-bottom-color:var(--s1); }

/* login */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-card {
  background:var(--surface-1); border:1px solid var(--ring); border-radius:14px;
  padding:34px; width:320px; display:flex; flex-direction:column; gap:14px;
}

/* dialog */
dialog { border:none; border-radius:14px; background:var(--surface-1); color:var(--ink-1); padding:0; width:440px; max-width:92vw; }
dialog::backdrop { background:rgba(0,0,0,.5); }
.dlg-card { padding:24px; display:flex; flex-direction:column; gap:12px; }

/* serp list */
.serp-item { padding:12px 0; border-bottom:1px solid var(--grid); }
.serp-item .pos { display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center;
  border-radius:7px; background:color-mix(in oklab, var(--ink-1) 8%, transparent); font-weight:700; font-size:12px; margin-right:10px; }
.serp-item.mine .pos { background:var(--s1); color:#fff; }
.serp-item .s-title { font-weight:600; }
.serp-item .s-url { font-size:12px; color:var(--good-text); }
.serp-item .s-desc { font-size:13px; color:var(--ink-2); margin-top:2px; max-width:640px; }

/* llm answer */
.llm-answer { white-space:pre-wrap; background:var(--plane); border:1px solid var(--ring);
  border-radius:10px; padding:16px; font-size:13.5px; }
.spinner { display:inline-block; width:16px; height:16px; border:2px solid var(--grid);
  border-top-color:var(--s1); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-3px; }
@keyframes spin { to { transform:rotate(360deg);} }
.empty { padding:30px; text-align:center; color:var(--muted); }

/* ---- platform additions ---- */
.app { display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
.side { background:var(--surface-1); border-right:1px solid var(--ring); padding:18px 14px; display:flex; flex-direction:column; gap:16px; position:sticky; top:0; height:100vh; }
.side nav { display:flex; flex-direction:column; gap:2px; }
.side nav a { padding:9px 12px; border-radius:8px; color:var(--ink-2); text-decoration:none; font-weight:500; }
.side nav a:hover { background:color-mix(in oklab, var(--ink-1) 6%, transparent); }
.side nav a.active { background:color-mix(in oklab, var(--s1) 14%, transparent); color:var(--ink-1); }
.nav-sep { font-size:10px; letter-spacing:.08em; color:var(--muted); margin:12px 4px 4px; }
.proj-box select { width:100%; }
.side-foot { margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.who { font-size:13px; line-height:1.3; }
main { padding:26px 30px 60px; max-width:1280px; }
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-card { background:var(--surface-1); border:1px solid var(--ring); border-radius:14px; padding:34px; width:340px; display:flex; flex-direction:column; gap:14px; }
.health-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }
.health-ok { background:var(--good); } .health-error { background:var(--critical); }
.health-pending { background:var(--warning); } .health-stale { background:var(--muted); }