/* Shared shell for the top-level pages (landing, SEO, users).
   The Ads module keeps its own self-contained styles in index.html; these variables
   are the same values, so the two look like one tool. */
:root {
  --bg:#0b0b0f; --surface:#16161d; --surface-2:#1e1e27; --surface-3:#262632;
  --ink:#ececf2; --muted:#9a9aa8; --line:#26262f;
  --primary:#723cea; --primary-2:#a78bfa; --primary-ink:#ffffff;
  --cyan:#00bbfa; --green:#c3ff1f; --amber:#f5b23e; --escalate:#ff5c6c;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.5; }
a { color:var(--primary-2); }

/* Header and main match the Ads module's shell exactly (index.html). Keep them in
   step: the rail is positioned from the header's height, and different proportions
   are what made the SEO page look unlike the rest of the tool. */
header { background:#121218; color:#fff; padding:16px 24px; display:flex;
  align-items:baseline; gap:14px; flex-wrap:wrap; border-bottom:1px solid var(--line); }
header h1 { font-size:18px; margin:0; font-weight:650; letter-spacing:.2px; }
header .sub { color:var(--muted); font-size:13px; }
header .spacer { margin-left:auto; }
header .who { color:var(--muted); font-size:13px; }
/* Same metrics as the Ads module's .navbtn, so every page's header is the same
   height — the left rail is positioned from it. */
.homelink { color:#c7c7d4; text-decoration:none; font-size:14px; font-weight:600;
  border:1px solid var(--line); border-radius:7px; padding:7px 13px; }
.homelink:hover { color:var(--ink); border-color:var(--primary-2); }

main { max-width:1800px; margin:0 auto; padding:20px 28px; }
h2 { font-size:19px; margin:0 0 4px; font-weight:650; }
.lede { color:var(--muted); font-size:14px; margin:0 0 22px; }

button { font-family:var(--sans); font-size:14px; cursor:pointer; border-radius:8px;
  padding:8px 15px; font-weight:650; border:1px solid transparent; }
button:disabled { opacity:.5; cursor:default; }
.run { background:var(--primary); color:var(--primary-ink); }
.run:hover:not(:disabled) { background:#8250f5; }
.ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.ghost:hover:not(:disabled) { border-color:var(--primary-2); }
.danger { background:transparent; color:var(--escalate); border-color:rgba(255,92,108,.4); }

input, select, textarea { background:var(--surface-2); color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:14px;
  font-family:var(--sans); color-scheme:dark; width:100%; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--primary-2); }
label.frow { display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; }
label.frow .hint { font-weight:400; color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }

.card { background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:18px; margin-bottom:16px; }
.card h3 { margin:0 0 10px; font-size:15px; font-weight:650; }

.bubble { border-radius:10px; padding:10px 14px; margin-bottom:12px; font-size:14px;
  border:1px solid; }
.bubble.ok { background:rgba(195,255,31,.10); border-color:rgba(195,255,31,.35); color:var(--green); }
.bubble.err { background:rgba(255,92,108,.10); border-color:rgba(255,92,108,.4); color:var(--escalate); }
.bubble.warn { background:rgba(245,178,62,.10); border-color:rgba(245,178,62,.4); color:var(--amber); }
.bubble.info { background:rgba(124,77,255,.12); border-color:var(--primary-2); color:var(--ink); }
.bubble .det { display:block; color:var(--muted); font-size:13px; margin-top:4px; }

.empty { color:var(--muted); padding:22px; text-align:center; }
.muted { color:var(--muted); }
.mono { font-family:var(--mono); font-size:12px; }

/* login overlay */
.overlay { position:fixed; inset:0; background:rgba(8,8,12,.92); display:flex;
  align-items:center; justify-content:center; z-index:80; }
.overlay .box { background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:26px; width:340px; }
.overlay h2 { margin:0 0 16px; }
.overlay .frow { margin-bottom:12px; }
.err-line { color:var(--escalate); font-size:13px; min-height:18px; }

/* modal */
.modal-overlay { position:fixed; inset:0; background:rgba(8,8,12,.75); display:flex;
  align-items:center; justify-content:center; z-index:90; }
.modal { background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:22px; max-width:500px; width:calc(100% - 40px); }
.modal h3 { margin:0 0 10px; font-size:17px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* Fixed left rail, matching the Ads module's GA4-style navigation. */
.has-rail main { padding-left:78px; }
.leftrail { position:fixed; left:0; top:var(--header-h,62px); bottom:0; width:70px; z-index:40;
  background:var(--surface); border-right:2px solid var(--line);
  display:flex; flex-direction:column; align-items:center; padding-top:10px; gap:6px; }
.rail-ic { width:54px; height:54px; border:none; background:transparent; border-radius:12px;
  color:#c7c7d4; display:flex; align-items:center; justify-content:center; cursor:pointer;
  padding:10px 16px; transition:color .14s ease, background .14s ease; }
/* The declared 40px is never what you see: the 16px side padding leaves 22px of room,
   the svg shrinks to fit, and the viewBox scales the glyph to 22x22. That is exactly
   what the Ads module draws, because there .rail-ic never overrides the generic
   button padding. Setting padding:0 here is what made these icons look huge — so if
   you ever change the padding, change .rail-ic svg to match, or the two rails drift. */
.rail-ic svg { width:40px; height:40px; }
.rail-ic:hover { color:var(--primary-2); background:rgba(139,92,246,.12); }
.rail-ic.active { color:var(--primary-2); background:rgba(139,92,246,.18); }
.rail-ic.rail-settings { margin-top:auto; margin-bottom:10px; }
.rail-slot { position:relative; }
/* Popout list, revealed by hovering its slot — full height, to the right of the rail. */
.rail-popout { position:fixed; left:70px; top:var(--header-h,62px); bottom:0; width:270px;
  background:var(--surface); border-right:2px solid var(--line);
  box-shadow:14px 0 40px rgba(0,0,0,.5); overflow-y:auto; opacity:0; visibility:hidden;
  transform:translateX(-8px); z-index:39;
  transition:opacity .14s ease, transform .14s ease, visibility .14s; }
.rail-slot:hover .rail-popout, .rail-popout:hover { opacity:1; visibility:visible; transform:none; }
.rail-popout .po-head { padding:12px 14px 8px; font-size:11px; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase; color:var(--muted); }
.po-item { display:flex; align-items:center; gap:9px; padding:9px 14px; cursor:pointer;
  border:none; background:none; width:100%; text-align:left; color:var(--ink);
  border-top:1px solid var(--line); font-size:14px; font-family:var(--sans); }
.po-item:hover { background:var(--surface-2); }
.po-item .po-sub { color:var(--muted); font-size:12px; margin-left:auto; }
@media (max-width:720px){
  .leftrail { flex-direction:row; width:auto; right:0; bottom:auto; height:56px;
    border-right:none; border-bottom:2px solid var(--line); justify-content:space-around; }
  .rail-ic.rail-settings { margin-top:0; margin-bottom:0; }
  .rail-popout { left:0; top:118px; width:100%; }
  .has-rail main { padding-left:0; padding-top:12px; }
}

[hidden] { display:none !important; }