/* ══════════════════════════════════════════════════════════════════
   Hafta — shared portal shell.
   Same tokens as the landing page so the marketing site and the product
   read as one thing. Loaded by advertiser.html and dashboard.html.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#070910; --panel:#0d1119; --panel-2:#131824;
  --ink:#e9eef7; --muted:#8894ab; --dim:#5c6880;
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.15);
  --amber:#5b8cff; --amber-hot:#8fb4ff; --violet:#22d3ee;
  --green:#34d399; --red:#f87171; --blue:#5fa8e8;
  --ff:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,sans-serif;
  --fm:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:13px;
}
*{box-sizing:border-box}
/* Any author `display` rule outranks the UA stylesheet's [hidden]{display:none},
   so .authwrap's `display:grid` kept the login card on screen after sign-in.
   This has to win. */
[hidden]{display:none!important}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
body::before{ /* one static wash; portals get no drifting aurora — it competes with data */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 500px at 12% -8%,rgba(91,140,255,.10),transparent 60%),
    radial-gradient(760px 460px at 92% 4%,rgba(34,211,238,.09),transparent 62%);
}
a{color:var(--amber);text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.02em}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums}

/* ── shell ─────────────────────────────────────────────── */
html,body{max-width:100%;overflow-x:hidden}
.shell{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 22px 80px}
/* Wide content scrolls inside its own box; the page body never does. */
.tablewrap{max-width:100%}
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;
  height:62px;margin-bottom:26px;
  background:rgba(7,9,16,.82);backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.topbar .inner{max-width:1180px;margin:0 auto;padding:0 22px;width:100%;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:750;font-size:17px;color:var(--ink);letter-spacing:-.025em}
.brand .mk{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--amber),#3b6fe0);color:#05070f;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;
}
.brand .mk svg{width:15px;height:15px}
.chip{
  font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;
  border:1px solid var(--line-2);border-radius:99px;padding:3px 9px;color:var(--muted);
}
.spacer{margin-left:auto}

/* ── buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:10px 17px;border-radius:10px;font:inherit;font-size:14px;font-weight:620;
  border:1px solid var(--line-2);background:rgba(255,255,255,.045);color:var(--ink);
  cursor:pointer;transition:transform .15s var(--ease),background .15s,border-color .15s,box-shadow .15s;
}
.btn:hover{background:rgba(255,255,255,.085);transform:translateY(-1px)}
.btn:active{transform:none}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.primary{background:linear-gradient(145deg,var(--amber),#4478f0);color:#05070f;border-color:transparent;box-shadow:0 8px 26px -12px rgba(91,140,255,.85)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:8px}
.btn.danger:hover{border-color:rgba(248,113,113,.6);color:var(--red)}
.btn svg{width:15px;height:15px;flex:0 0 15px}

/* ── panels ────────────────────────────────────────────── */
.panel{
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.012));
  padding:22px;
}
.panel h2{font-size:17px;margin-bottom:4px}
.panel .hint{color:var(--dim);font-size:13px;margin:0 0 18px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* ── stat tiles ────────────────────────────────────────── */
.tile{border:1px solid var(--line);border-radius:var(--r);padding:17px;background:rgba(255,255,255,.025);position:relative;overflow:hidden}
.tile .k{font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;color:var(--dim);display:flex;align-items:center;gap:7px}
.tile .k svg{width:13px;height:13px;opacity:.8}
.tile .v{font-family:var(--fm);font-size:25px;font-weight:650;margin-top:9px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tile .s{font-size:12px;color:var(--dim);margin-top:3px}
.tile.amber .v{color:var(--amber)} .tile.green .v{color:var(--green)}
.tile.violet .v{color:var(--violet)} .tile.blue .v{color:var(--blue)}

/* ── tables ────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);
  font-family:var(--fm);font-size:10px;letter-spacing:.12em;color:var(--dim);font-weight:500;
}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .14s}
tbody tr:hover{background:rgba(255,255,255,.028)}
td.num,th.num{text-align:right;font-family:var(--fm);font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;margin:0 -6px}

/* ── badges ────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--fm);font-size:10.5px;letter-spacing:.07em;
  padding:3px 9px;border-radius:99px;border:1px solid;
}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.b-active{color:var(--green);border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.1)}
.b-draft{color:var(--amber);border-color:rgba(91,140,255,.35);background:rgba(91,140,255,.1)}
.b-paused{color:var(--muted);border-color:var(--line-2);background:rgba(255,255,255,.04)}
.b-dead{color:var(--red);border-color:rgba(248,113,113,.3);background:rgba(248,113,113,.08)}

/* ── forms ─────────────────────────────────────────────── */
label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:500}
input,select{
  width:100%;padding:11px 13px;border-radius:10px;font:inherit;font-size:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);
  transition:border-color .16s,box-shadow .16s,background .16s;
}
input::placeholder{color:var(--dim)}
input:focus,select:focus{
  outline:0;border-color:rgba(91,140,255,.55);background:rgba(255,255,255,.06);
  box-shadow:0 0 0 4px rgba(91,140,255,.1);
}
select option{background:#111726}
.field{margin-bottom:15px}
.field .sub{font-size:11.5px;color:var(--dim);margin-top:5px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.row2{grid-template-columns:1fr}}

.msg{font-size:13.5px;margin-top:12px;min-height:20px}
.msg.ok{color:var(--green)} .msg.err{color:var(--red)}

/* ── chart ─────────────────────────────────────────────── */
/* max-width is load-bearing: the chart's viewBox is generated from the parent's
   measured width, and on a narrow screen a stale/larger viewBox would push the
   whole page wider than the viewport. */
.chart{width:100%;max-width:100%;height:210px;display:block}
.chart .bar{transition:opacity .16s}
.chart .bar:hover{opacity:.75}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .lbl{font-family:var(--fm);font-size:9.5px;fill:var(--dim)}
.legend{display:flex;gap:18px;margin-top:12px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* ── empty / loading ───────────────────────────────────── */
.empty{text-align:center;padding:44px 20px;color:var(--dim)}
.empty svg{width:34px;height:34px;opacity:.35;margin-bottom:12px}
.empty p{margin:0 0 6px;font-size:14px}
.skel{background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.1),rgba(255,255,255,.05));
  background-size:200% 100%;animation:sk 1.3s linear infinite;border-radius:6px;height:12px}
@keyframes sk{to{background-position:-200% 0}}

/* ── auth card ─────────────────────────────────────────── */
.authwrap{min-height:100vh;display:grid;place-items:center;padding:26px;position:relative;z-index:1}
.authcard{width:100%;max-width:410px}
.authcard .panel{padding:28px}
.tabs{display:flex;gap:4px;padding:4px;background:rgba(255,255,255,.035);border-radius:11px;margin-bottom:22px}
.tabs button{
  flex:1;padding:9px;border:0;border-radius:8px;background:transparent;color:var(--muted);
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .16s,color .16s;
}
.tabs button.on{background:rgba(255,255,255,.075);color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ── analytics ─────────────────────────────────────────── */
.heat { display: flex; flex-direction: column; gap: 3px; }
.heat-row { display: grid; grid-template-columns: 34px repeat(24, 1fr); gap: 3px; align-items: center; }
.heat-day { font-family: var(--fm); font-size: 9.5px; color: var(--dim); }
.heat-hr { font-family: var(--fm); font-size: 9px; color: var(--dim); }
.heat i { display: block; aspect-ratio: 1; border-radius: 2px; background: rgba(255,255,255,.04); }

.fun-row { display: grid; grid-template-columns: 130px 1fr 58px; gap: 12px; align-items: center; margin-bottom: 9px; }
.fun-k { font-family: var(--fm); font-size: 11px; color: var(--dim); }
.fun-bar { height: 8px; background: rgba(255,255,255,.05); border-radius: 4px; overflow: hidden; }
.fun-bar i { display: block; height: 100%; border-radius: 4px; }
.fun-v { font-family: var(--fm); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }

.sig-row { display: grid; grid-template-columns: 132px 1fr 46px; gap: 12px; align-items: center; margin-bottom: 8px; }
.sig-k { font-family: var(--fm); font-size: 11px; color: var(--dim); }
.sig-bar { height: 6px; background: rgba(255,255,255,.05); border-radius: 3px; overflow: hidden; }
.sig-bar i { display: block; height: 100%; border-radius: 3px; }
.sig-v { font-family: var(--fm); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

.range { display: flex; gap: 3px; padding: 3px; background: rgba(255,255,255,.035); border-radius: 9px; }
.range button { height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent;
  color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer; }
.range button.on { background: rgba(255,255,255,.075); color: var(--ink); }

.legend2 { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--muted); }
.legend2 i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.pagerow { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 12.5px; color: var(--dim); }