/* ZAP Publish — dark / neon-blue theme */
:root {
  --bg: #05070e;
  --bg-2: #0a0f1c;
  --panel: #0d1424;
  --panel-2: #111a2e;
  --line: rgba(120, 170, 255, 0.14);
  --line-strong: rgba(120, 170, 255, 0.30);
  --ink: #eaf1ff;
  --muted: #8ea3c8;
  --dim: #5f7194;
  --neon: #29e0ff;      /* cyan neon */
  --neon-2: #2f7bff;    /* electric blue */
  --neon-3: #7c5cff;    /* violet accent */
  --good: #43e08a;
  --warn: #ffcf5c;
  --radius: 16px;
  --glow: 0 0 24px rgba(41, 224, 255, 0.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  /* ambient neon glow */
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 40vw at 78% -8%, rgba(47, 123, 255, 0.20), transparent 60%),
    radial-gradient(50vw 40vw at 8% 4%, rgba(41, 224, 255, 0.14), transparent 60%),
    radial-gradient(70vw 60vw at 50% 120%, rgba(124, 92, 255, 0.12), transparent 60%);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 22px; }

/* ---------- header ---------- */
header.nav {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(5, 7, 14, 0.92), rgba(5, 7, 14, 0.55));
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 22px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: 0.3px; font-size: 18px; }
.brand .bolt {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--neon), var(--neon-2));
  color: #001018; font-size: 17px; box-shadow: var(--glow);
}
.brand b { background: linear-gradient(90deg, #fff, var(--neon)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { color: var(--muted); font-size: 14px; font-weight: 600; }
.nav-links a:hover { color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 12px; font-weight: 700; font-size: 15px;
  border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  color: #00131b; background: linear-gradient(135deg, var(--neon), var(--neon-2));
  box-shadow: 0 8px 30px rgba(41, 224, 255, 0.30);
}
.btn-primary:hover { box-shadow: 0 10px 40px rgba(41, 224, 255, 0.5); }
.btn-ghost { color: var(--ink); border-color: var(--line-strong); background: rgba(120, 170, 255, 0.05); }
.btn-ghost:hover { border-color: var(--neon); box-shadow: var(--glow); }
.btn-sm { padding: 9px 15px; font-size: 13px; border-radius: 10px; }

/* ---------- hero ---------- */
.hero { padding: 78px 0 40px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .4px;
  color: var(--neon); border: 1px solid var(--line-strong); background: rgba(41, 224, 255, 0.06);
  text-transform: uppercase;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: var(--glow); }
.hero h1 {
  margin: 20px 0 0; font-size: clamp(34px, 6vw, 60px); line-height: 1.05; letter-spacing: -1px; font-weight: 850;
}
.hero h1 .grad { background: linear-gradient(100deg, var(--neon) 0%, var(--neon-2) 55%, var(--neon-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.sub { margin: 20px 0 0; max-width: 620px; font-size: clamp(16px, 2.2vw, 19px); color: var(--muted); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.stats { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line); }
.stat .n { font-size: 30px; font-weight: 850; background: linear-gradient(90deg, #fff, var(--neon)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .l { font-size: 13px; color: var(--dim); margin-top: 2px; }

/* ---------- section ---------- */
section { padding: 56px 0; }
.eyebrow { color: var(--neon); font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 820; letter-spacing: -0.5px; margin: 10px 0 0; }
.lead { color: var(--muted); max-width: 640px; margin: 12px 0 0; }

.grid { display: grid; gap: 18px; margin-top: 34px; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
  transition: border-color .2s ease, transform .12s ease, box-shadow .2s ease;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); }
.card .ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 20px;
  background: rgba(41, 224, 255, 0.08); border: 1px solid var(--line-strong); color: var(--neon); box-shadow: inset 0 0 18px rgba(41,224,255,.12); }
.card h3 { margin: 14px 0 6px; font-size: 17px; font-weight: 750; }
.card p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* ---------- steps ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.step { position: relative; padding: 26px 22px 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.step::before { counter-increment: step; content: counter(step);
  position: absolute; top: -16px; left: 22px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-weight: 850; color: #00131b; background: linear-gradient(135deg, var(--neon), var(--neon-2)); box-shadow: var(--glow); }
.step h3 { margin: 14px 0 6px; font-size: 17px; }
.step p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* ---------- cta band ---------- */
.cta-band {
  margin: 20px 0 0; border-radius: 22px; padding: 44px; text-align: center;
  background: linear-gradient(135deg, rgba(47,123,255,.16), rgba(41,224,255,.10));
  border: 1px solid var(--line-strong); box-shadow: 0 0 60px rgba(41,224,255,.10) inset;
}
.cta-band h2 { font-size: clamp(24px, 4vw, 34px); font-weight: 820; margin: 0; }
.cta-band p { color: var(--muted); margin: 12px auto 24px; max-width: 520px; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 30px 0; color: var(--dim); font-size: 13.5px; }
.foot-inner { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .grid.c3, .grid.c4, .steps { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 560px) {
  .grid.c3, .grid.c4, .steps { grid-template-columns: 1fr; }
  .hero { padding: 54px 0 24px; }
  .stats { gap: 22px; }
}

/* ---------- auth / login ---------- */
.btn-block { width: 100%; justify-content: center; margin-top: 6px; }
.who { color: var(--muted); font-size: 13px; margin-left: auto; font-weight: 600; }
.auth-body { min-height: 100vh; }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 22px; }
.auth-box { width: 100%; max-width: 400px; text-align: center; }
.brand-center { justify-content: center; margin-bottom: 22px; }
.auth-below { color: var(--dim); font-size: 12.5px; margin: 18px 0 0; }
.auth-below a { color: var(--muted); }
.auth-below a:hover { color: var(--ink); }
.auth-card {
  width: 100%; text-align: center; background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line-strong); border-radius: 20px; padding: 34px 30px 28px;
  box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 40px rgba(41,224,255,.06);
}
.auth-lock {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; font-size: 25px;
  background: rgba(41,224,255,.08); border: 1px solid var(--line-strong); color: var(--neon);
  box-shadow: inset 0 0 22px rgba(41,224,255,.14); margin: 0 auto 16px;
}
.auth-title { margin: 0; font-size: 26px; font-weight: 820; letter-spacing: -0.4px; }
.auth-sub { margin: 6px 0 18px; color: var(--muted); font-size: 14.5px; }
.auth-invite {
  font-size: 12.5px; line-height: 1.55; color: var(--muted); background: rgba(41,224,255,.05);
  border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; text-align: center;
}
.auth-invite b { color: var(--neon); }
.auth-error {
  font-size: 13.5px; color: #ffd7d7; background: rgba(255,80,80,.10);
  border: 1px solid rgba(255,80,80,.35); border-radius: 10px; padding: 11px 13px; margin-bottom: 16px;
}
.fld { display: block; margin-bottom: 14px; text-align: left; }
.fld span { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px; letter-spacing: .3px; }
.fld input {
  width: 100%; padding: 12px 14px; font-size: 15px; color: var(--ink);
  background: #070c17; border: 1px solid var(--line-strong); border-radius: 11px; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fld input::placeholder { color: #40506e; }
.fld input:focus { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(41,224,255,.14); }
.auth-foot { text-align: center; color: var(--dim); font-size: 12.5px; margin: 18px 0 2px; }

/* ---------- dashboard layout ---------- */
.dash-body { background: var(--bg); }
.dash { display: flex; min-height: 100vh; }
.side {
  width: 246px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; padding: 18px 14px;
  background: linear-gradient(180deg, #070c18, #05070e); border-right: 1px solid var(--line);
}
.side .brand { padding: 6px 8px 18px; font-size: 17px; }
.side-nav { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.side-nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  color: var(--muted); font-size: 14px; font-weight: 600; border: 1px solid transparent;
}
.side-nav a .si { width: 18px; text-align: center; font-size: 13px; opacity: .9; }
.side-nav a:hover { color: var(--ink); background: rgba(120,170,255,.05); }
.side-nav a.on { color: var(--ink); background: rgba(41,224,255,.10); border-color: var(--line-strong); box-shadow: inset 0 0 18px rgba(41,224,255,.08); }
.side-label { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dim); padding: 16px 12px 6px; font-weight: 800; }
.side-joint { position: relative; }
.side-joint::before { content: ''; position: absolute; left: 2px; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: linear-gradient(var(--neon-3), var(--neon-2)); opacity: .75; }
.side-joint.on::before { opacity: 1; box-shadow: 0 0 8px rgba(124,92,255,.5); }
.side-foot { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 10px; }
.side-user { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 0 4px; }
.av { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; color: #00131b;
  background: linear-gradient(135deg, var(--neon), var(--neon-2)); box-shadow: var(--glow); }
.side-user-t .nm { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.side-user-t .rl { font-size: 11px; color: var(--dim); text-transform: capitalize; }

.dash-main { flex: 1; min-width: 0; padding: 26px 30px 50px; }
.dash-top h1 { margin: 0; font-size: 26px; font-weight: 820; letter-spacing: -0.5px; }
.dash-sub { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.dash-content { margin-top: 22px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi { background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.kpi-l { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.kpi-n { font-size: 30px; font-weight: 850; margin: 6px 0 2px; background: linear-gradient(90deg,#fff,var(--neon)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi-s { font-size: 12px; color: var(--dim); }
.kpi-a { font-size: 12.5px; color: var(--neon); font-weight: 700; }
.card-link { display: block; }

/* table */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl thead th { text-align: left; padding: 12px 14px; color: var(--muted); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--line-strong); position: sticky; top: 0; background: #0c1322; white-space: nowrap; }
.tbl td { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.045); }
.tbl tbody tr:hover { background: rgba(120,170,255,.035); }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl .ctr { text-align: center; }
.tbl .dom { font-weight: 650; color: var(--ink); }
.tbl .sig { color: var(--good); font-weight: 650; }
.tbl .good { color: var(--good); }
.tbl .dim { color: var(--dim); }
.tbl-note { color: var(--dim); font-size: 12.5px; margin-top: 14px; }

/* tier dots */
.tiers { display: inline-flex; gap: 4px; }
.tdot { width: 9px; height: 9px; border-radius: 50%; background: rgba(120,170,255,.14); border: 1px solid var(--line); display: inline-block; }
.tdot.on { background: var(--neon); border-color: var(--neon); box-shadow: 0 0 7px rgba(41,224,255,.6); }
/* admin */
.admin-nav { margin-top: 6px; padding-top: 10px !important; border-top: 1px solid var(--line); }
.admin-act { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.admin-act .btn-sm { padding: 5px 10px; font-size: 11px; }
.sched-wait { font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; }

/* billing page */
.bill-hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 24px 26px; border-radius: 16px; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(41,224,255,.08), rgba(120,90,255,.06)); border: 1px solid var(--line-strong); }
.bh-l { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.bh-n { font-size: 44px; font-weight: 860; letter-spacing: -1px; line-height: 1.05; margin: 4px 0;
  background: linear-gradient(90deg, #fff, var(--neon)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bh-s { font-size: 13px; color: var(--muted); }
.bh-s .up { color: var(--good); font-weight: 700; } .bh-s .down { color: #ff8f8f; font-weight: 700; }
.bh-side { display: flex; gap: 12px; }
.bh-mini { text-align: center; padding: 12px 16px; border-radius: 11px; background: rgba(120,170,255,.04); border: 1px solid var(--line); }
.bh-mini span { display: block; font-size: 18px; font-weight: 820; }
.bh-mini small { font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .3px; }
.bill-note { font-size: 12.5px; color: var(--muted); margin: 0 2px 18px; line-height: 1.5; }
.month-invoice { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 16px; background: rgba(255,255,255,.012); }
.month-invoice.mi-now { border-color: var(--line-strong); box-shadow: 0 0 0 1px rgba(41,224,255,.15); }
.mi-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: rgba(120,170,255,.03); }
.month-invoice.mi-now .mi-head { background: rgba(41,224,255,.06); }
.mi-title { font-size: 15px; font-weight: 780; display: flex; align-items: center; }
.mi-total { font-size: 19px; font-weight: 840; color: var(--good); white-space: nowrap; }
.mi-total small { font-size: 11px; font-weight: 600; color: var(--dim); margin-left: 6px; }
.month-invoice .tbl-wrap { border: none; margin: 0; }
.bill-empty-card { text-align: center; color: var(--muted); padding: 30px; border: 1px dashed var(--line); border-radius: 14px; }
.our-cost { font-size: 11px; font-weight: 700; color: var(--neon-3); background: rgba(124,92,255,.10); border: 1px solid rgba(124,92,255,.3); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.aff-input { min-height: auto !important; }
.pending-aff { border: 1px dashed rgba(255,207,92,.4); background: rgba(255,207,92,.05); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.pa-head { font-size: 12.5px; font-weight: 750; margin-bottom: 8px; }
.pa-n { color: var(--warn); font-weight: 850; }
.pa-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.pa-row .dom { font-weight: 650; }
.pa-tag { margin-left: auto; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--warn); background: rgba(255,207,92,.12); border: 1px solid rgba(255,207,92,.35); padding: 2px 8px; border-radius: 999px; }
.bill-empty { text-align: center; color: var(--muted); padding: 26px 10px; }
.bill-note-cell { font-size: 12px; color: var(--muted); max-width: 240px; }
.bgroup td { background: rgba(120,170,255,.04); border-top: 1px solid var(--line-strong); font-weight: 750; font-size: 13px; padding-top: 11px; padding-bottom: 11px; }
.bgroup-now td { background: rgba(41,224,255,.08); }
.bgroup-n { font-size: 11px; font-weight: 600; color: var(--dim); margin-left: 8px; }
.bgroup-tag { font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; margin-left: 8px;
  color: var(--muted); background: rgba(120,170,255,.08); border: 1px solid var(--line); }
.bgroup-tag.now { color: #00131b; background: linear-gradient(135deg, var(--neon), var(--neon-2)); border: none; }
.ostatus { font-size: 10.5px; font-weight: 800; letter-spacing: .3px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.s-requested { color: var(--warn); background: rgba(255,207,92,.12); border: 1px solid rgba(255,207,92,.4); }
.s-locked { color: var(--neon); background: rgba(41,224,255,.10); border: 1px solid var(--line-strong); }
.s-done { color: var(--good); background: rgba(67,224,138,.12); border: 1px solid rgba(67,224,138,.4); }
.odel { width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 800;
  color: var(--dim); background: rgba(120,170,255,.05); border: 1px solid var(--line); transition: all .12s; }
.odel:hover { color: #ff9a9a; border-color: rgba(255,80,80,.45); background: rgba(255,60,60,.08); }
.odel.arm { color: #fff; background: rgba(255,60,60,.9); border-color: rgba(255,120,120,.7); width: auto; padding: 0 10px; }
.olock { opacity: .55; font-size: 13px; }

/* at-a-glance warnings column */
.warn-cell { white-space: nowrap; }
.wchip { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .2px; padding: 3px 6px; border-radius: 6px; margin: 0 2px; }
.wchip.crit { color: #ff9a9a; background: rgba(255,60,60,.12); border: 1px solid rgba(255,80,80,.45); }
.wchip.flatline { color: #ff77d4; background: rgba(255,50,180,.14); border: 1px solid rgba(255,70,190,.55); box-shadow: 0 0 9px rgba(255,60,190,.4); }
.wchip.warn { color: var(--warn); background: rgba(255,207,92,.10); border: 1px solid rgba(255,207,92,.4); }
.wchip.more { color: var(--muted); background: rgba(120,170,255,.06); border: 1px solid var(--line); }
.warn-ok { color: var(--good); font-weight: 800; opacity: .55; }
.warn-tot { color: var(--warn); }
.tchips { display: inline-flex; gap: 6px; }
/* package badge states in the table: ordered = gold, in progress = violet (bought = lit, available = dim) */
.tchips .pkg-badge.ordered { color: #ffd76a; background: rgba(240,180,40,.16); filter: none;
  box-shadow: 0 0 0 2px #f0b428, 0 0 8px rgba(240,180,40,.5); }
.tchips .pkg-badge.inprogress { color: #c3b4ff; background: rgba(124,92,255,.20); filter: none;
  box-shadow: 0 0 0 2px #7c5cff, 0 0 8px rgba(124,92,255,.55); }
/* reuse the overlay .pkg-badge — bought = lit (HDR green), not-bought = dimmed */
.pkg-badge.hdr { font-size: 11px; background: linear-gradient(135deg, #43e08a, #2fae6a); }
.pkg-badge.off { color: var(--dim); background: rgba(120,170,255,.05); border: 1px solid var(--line); box-shadow: none; }

/* pills */
.pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .2px; }
.pill-ok { color: #063; background: rgba(67,224,138,.16); border: 1px solid rgba(67,224,138,.4); color: var(--good); }
.pill-muted { color: var(--dim); background: rgba(120,170,255,.06); border: 1px solid var(--line); }
.pill-t1 { color: var(--neon); background: rgba(41,224,255,.14); border: 1px solid var(--line-strong); }
.pill-t2 { color: var(--neon-2); background: rgba(47,123,255,.14); border: 1px solid var(--line-strong); }
.pill-t3 { color: var(--neon-3); background: rgba(124,92,255,.14); border: 1px solid var(--line-strong); }

@media (max-width: 820px) {
  .dash { flex-direction: column; }
  .side { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .side-nav { flex-direction: row; flex: 1 1 100%; flex-wrap: wrap; }
  .side-label { display: none; }
  .side-foot { border-top: 0; margin: 0; padding: 0; display: flex; gap: 10px; align-items: center; }
  .kpis { grid-template-columns: 1fr 1fr; }
}

/* ---------- filter bar (clusters + search) ---------- */
.filterbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.fb-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.spend-pill { font-size: 12.5px; color: var(--muted); text-decoration: none; padding: 6px 13px; border-radius: 999px;
  background: rgba(41,224,255,.06); border: 1px solid var(--line-strong); white-space: nowrap; }
.spend-pill b { color: var(--neon); font-weight: 820; font-size: 13.5px; margin-left: 3px; }
.spend-pill:hover { border-color: var(--neon); box-shadow: var(--glow); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer;
  background: rgba(120,170,255,.05); border: 1px solid var(--line); }
.chip:hover { color: var(--ink); border-color: var(--line-strong); }
.chip.on { color: #00131b; background: linear-gradient(135deg,var(--neon),var(--neon-2)); border-color: transparent; }
.chip .ct { opacity: .7; font-weight: 700; margin-left: 3px; font-size: 11px; }
.search input { width: 260px; max-width: 100%; padding: 9px 13px; font-size: 14px; color: var(--ink);
  background: #070c17; border: 1px solid var(--line-strong); border-radius: 10px; outline: none; }
.search input:focus { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(41,224,255,.14); }
.pill-cl { color: var(--neon-2); background: rgba(47,123,255,.12); border: 1px solid var(--line-strong); }

/* ---------- link tiers ---------- */
.tiers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tier-card { background: linear-gradient(180deg,var(--panel),var(--bg-2)); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; }
.tier-card.tier-available { border-color: rgba(67,224,138,.3); }
.tier-card.tier-preparing { border-color: var(--line-strong); box-shadow: 0 0 40px rgba(41,224,255,.06) inset; }
.tier-top { display: flex; align-items: center; justify-content: space-between; }
.tier-badge { min-width: 40px; padding: 0 8px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-weight: 850; font-size: 15px;
  color: #00131b; background: linear-gradient(135deg,var(--neon),var(--neon-2)); box-shadow: var(--glow); }
.tier-name { margin: 14px 0 4px; font-size: 18px; font-weight: 780; }
.tier-price { color: var(--neon); font-weight: 820; }
.tier-nums { font-size: 13px; color: var(--muted); }
.tier-nums b { color: var(--ink); font-size: 15px; }
.bar { height: 8px; border-radius: 999px; background: rgba(120,170,255,.12); overflow: hidden; margin: 10px 0 12px; }
.bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg,var(--neon),var(--neon-2)); box-shadow: 0 0 12px rgba(41,224,255,.5); }
.tier-note { font-size: 12.5px; color: var(--dim); margin: 0 0 16px; min-height: 34px; flex: 1; }
.pill-prep { color: var(--warn); background: rgba(255,207,92,.12); border: 1px solid rgba(255,207,92,.35); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn[disabled]:hover { transform: none; box-shadow: none; }

@media (max-width: 900px) { .tiers-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tiers-grid { grid-template-columns: 1fr; } .search input { width: 100%; } }

/* ---------- sortable table + totals ---------- */
.sortable-tbl th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-tbl th.sortable:hover { color: var(--ink); }
.sortable-tbl th.sortable::after { content: ' ⇅'; opacity: .32; font-size: 10px; }
.sortable-tbl th.sort-asc::after { content: ' ▲'; opacity: 1; color: var(--neon); }
.sortable-tbl th.sort-desc::after { content: ' ▼'; opacity: 1; color: var(--neon); }
/* Totals live at the TOP of the table now — reading them should not cost a scroll
   to the bottom of 474 rows. They sit above the column headers and stick with them;
   the header row is sticky at top:0, so this one gets its offset from JS, because the
   header's height depends on the select inside the Packages cell. */
.tbl thead .totals td {
  border-bottom: 2px solid var(--line-strong); background: #0c1322;
  padding: 11px 14px; font-weight: 700;
  position: sticky; top: 0; z-index: 21;
}
.tot-v { font-size: 15px; font-weight: 850; }
.tot-l { display: block; font-size: 9.5px; color: var(--dim); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-top: 1px; }

/* ---------- site detail overlay ---------- */
.row-open { cursor: pointer; }
.modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(3,5,10,.72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 22px; }
.modal-backdrop[hidden] { display: none; }
.modal-card { position: relative; width: 100%; max-width: 800px; max-height: 92vh; overflow-y: auto; background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line-strong); border-radius: 22px; padding: 30px 32px 26px; box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 50px rgba(41,224,255,.08); animation: modalIn .16s ease; }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 8px; background: rgba(120,170,255,.06); border: 1px solid var(--line); color: var(--muted); cursor: pointer; font-size: 13px; }
.modal-x:hover { color: var(--ink); border-color: var(--line-strong); }
.modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-right: 30px; }
.modal-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: rgba(41,224,255,.08); border: 1px solid var(--line-strong); box-shadow: inset 0 0 20px rgba(41,224,255,.12); flex-shrink: 0; }
.modal-head h2 { margin: 0; font-size: 20px; font-weight: 820; letter-spacing: -0.3px; word-break: break-all; }
.modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.modal-tags .pill { font-size: 11px; }
.modal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.mstat { background: rgba(120,170,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; }
.mstat-l { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.mstat-v { font-size: 16px; font-weight: 820; margin-top: 2px; }
.mstat-v.good { color: var(--good); }
.modal-tiers { margin-top: 16px; }
.modal-label { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--dim); font-weight: 800; margin-bottom: 8px; }
.tiers-big { display: flex; gap: 8px; }
.tbig { flex: 1; text-align: center; padding: 9px 0; border-radius: 10px; font-weight: 800; font-size: 13px; color: var(--dim); background: rgba(120,170,255,.05); border: 1px solid var(--line); }
.tbig.on { color: #00131b; background: linear-gradient(135deg, var(--neon), var(--neon-2)); border-color: transparent; box-shadow: 0 0 14px rgba(41,224,255,.4); }

/* buyable / owned link packages in the site overlay */
.pkgs { display: flex; flex-direction: column; gap: 8px; }
.pkg { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line); background: rgba(120,170,255,.04); }
.pkg-badge { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 850; font-size: 14px; color: #00131b; background: linear-gradient(135deg, var(--neon), var(--neon-2)); }
.pkg-body { flex: 1; min-width: 0; }
.pkg-name { font-size: 14px; font-weight: 750; display: flex; align-items: center; gap: 8px; }
.pkg-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pkg-cta { flex-shrink: 0; white-space: nowrap; }
.pkg-tick { font-size: 11px; font-weight: 700; color: var(--good); }
.pkg-price { font-size: 13px; font-weight: 820; color: var(--neon); margin-left: auto; padding-left: 8px; }
.pkg-bought { border-color: rgba(67,224,138,.32); background: rgba(67,224,138,.06); }
.pkg-bought .pkg-badge { background: linear-gradient(135deg, #43e08a, #2fae6a); }
.pkg-avail .pkg-badge { filter: saturate(.7) brightness(.9); }
.pkg-ordered { border-color: rgba(240,180,40,.45); background: rgba(240,180,40,.06); }
.pkg-ordered .pkg-badge { color: #1a1400; background: linear-gradient(135deg,#ffd76a,#f0b428); box-shadow: 0 0 12px rgba(240,180,40,.45); }
.pill-gold { color: #1a1400 !important; background: linear-gradient(135deg,#ffd76a,#f0b428) !important; border: none !important; }
.pkg-ordered-tag { flex-shrink: 0; color: #ffd76a; font-weight: 820; font-size: 12.5px; white-space: nowrap; }
.pkg-inprogress { border-color: rgba(124,92,255,.45); background: rgba(124,92,255,.06); }
.pkg-inprogress .pkg-badge { color: #fff; background: linear-gradient(135deg,#9a7cff,#6b4cff); box-shadow: 0 0 12px rgba(124,92,255,.45); }
.pill-violet { color: #fff !important; background: linear-gradient(135deg,#9a7cff,#6b4cff) !important; border: none !important; }
.pkg-inprogress-tag { flex-shrink: 0; color: #b9a8ff; font-weight: 820; font-size: 12.5px; white-space: nowrap; }
.pkg-managed .pkg-badge { color: var(--dim); background: rgba(120,170,255,.06); border: 1px solid var(--line); box-shadow: none; }
.pkg-managed .pkg-sub { color: var(--dim); }

/* ---- order overlay (split + drip) ---- */
.order-backdrop { z-index: 300; }
.order-card { max-width: 560px; }
.split-presets { display: flex; gap: 8px; margin-bottom: 12px; }
.split-range { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 6px; margin: 4px 0 14px;
  background: linear-gradient(90deg, var(--neon), var(--neon-3)); outline: none; }
.split-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--neon); box-shadow: var(--glow); cursor: pointer; }
.split-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--neon); cursor: pointer; }
.split-counts { display: flex; gap: 12px; }
.split-counts > div { flex: 1; text-align: center; background: rgba(120,170,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.split-counts b { font-size: 22px; font-weight: 840; display: block; line-height: 1.1; }
.split-counts .sc-main b { color: var(--neon); }
.split-counts .sc-inner b { color: var(--neon-3); }
.split-counts span { font-size: 11px; color: var(--muted); }
.drip-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.split-presets .osplit, .drip-pills .odrip { cursor: pointer; }
.order-summary { margin-top: 14px; padding: 12px 14px; border-radius: 11px; font-size: 13.5px;
  background: rgba(41,224,255,.06); border: 1px solid var(--line-strong); }
.order-err { margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13px;
  background: rgba(255,60,60,.08); border: 1px solid rgba(255,80,80,.4); color: #ff9a9a; }
.order-done { text-align: center; padding: 22px 10px 8px; }
.done-tick { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #00131b; background: linear-gradient(135deg, var(--good), #2fae6a); box-shadow: 0 0 18px rgba(67,224,138,.5); }
.order-done h3 { font-size: 19px; margin-bottom: 6px; }
.order-done p { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.done-note { margin-top: 10px; font-size: 12px !important; color: var(--dim) !important; }

/* recommendation card carried in from the SEO plan */
.order-rec { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 12px; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(255,207,92,.10), rgba(41,224,255,.05)); border: 1px solid rgba(255,207,92,.35); }
.rec-star { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #1a1400; background: linear-gradient(135deg, #ffd76a, #f0b428); box-shadow: 0 0 12px rgba(240,180,40,.4); }
.rec-h { font-size: 11px; font-weight: 850; letter-spacing: .5px; text-transform: uppercase; color: var(--warn); }
.rec-reason { font-size: 13px; color: var(--ink); line-height: 1.5; margin-top: 3px; }
.rec-plan { font-size: 11.5px; color: var(--muted); margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
.split-ends { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--dim); font-weight: 700; letter-spacing: .3px; margin-bottom: 1px; }
.chip.rec { border-color: rgba(255,207,92,.5); }
.chip.rec:not(.on) { color: var(--warn); background: rgba(255,207,92,.08); }
.odrip.rec::after { content: ' ★'; color: #ffd76a; }
.order-note { width: 100%; box-sizing: border-box; resize: vertical; min-height: 46px; padding: 10px 12px; border-radius: 10px;
  font: inherit; font-size: 13px; color: var(--ink); background: rgba(120,170,255,.05); border: 1px solid var(--line); outline: none; }
.order-note:focus { border-color: var(--neon); box-shadow: var(--glow); }
.order-note::placeholder { color: var(--dim); }
.done-your-note { margin-top: 10px; font-size: 13px !important; color: var(--ink) !important; font-style: italic;
  background: rgba(120,170,255,.05); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* ---------- overlay sections: suggestions + gsc chart ---------- */
.modal-sec { margin-top: 20px; }
.label-meta { font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 11px; }
.sug { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 11px; margin-bottom: 8px;
  background: rgba(120,170,255,.04); border: 1px solid var(--line); }
.sug:last-child { margin-bottom: 0; }
.sug-p { flex-shrink: 0; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; padding: 3px 7px; border-radius: 6px; margin-top: 1px; }
.sug-high .sug-p { color: #ff8f8f; background: rgba(255,80,80,.12); border: 1px solid rgba(255,80,80,.35); }
.sug-med .sug-p { color: var(--warn); background: rgba(255,207,92,.12); border: 1px solid rgba(255,207,92,.35); }
.sug-low .sug-p { color: var(--neon); background: rgba(41,224,255,.10); border: 1px solid var(--line-strong); }
.sug-urgent { background: rgba(255,60,60,.09); border-color: rgba(255,80,80,.45); }
.sug-urgent .sug-p { color: #fff; background: rgba(255,60,60,.9); border: 1px solid rgba(255,120,120,.6); }
.sug b { font-size: 14px; }
.sug-d { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

.gsc-chart { display: flex; gap: 10px; align-items: flex-end; height: 170px; padding: 6px 4px 0; }
.gbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; }
.gbar-v { font-size: 11px; font-weight: 700; color: var(--muted); }
.gbar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; background: rgba(120,170,255,.05); border-radius: 6px 6px 0 0; }
.gbar-fill { width: 100%; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--neon), var(--neon-2)); box-shadow: 0 0 14px rgba(41,224,255,.4); transition: height .3s ease; }
.gbar-m { font-size: 10.5px; color: var(--dim); font-weight: 600; }

@media (max-width: 520px) { .modal-stats { grid-template-columns: 1fr 1fr; } }

/* sitemap check / x in stat */
.sm-yes { color: var(--good); font-size: 17px; }
.sm-no { color: #ff8f8f; font-size: 17px; }

/* ---------- traffic: trend chips + SVG chart + legend ---------- */
.trend-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.tchip { flex: 1; min-width: 130px; background: rgba(120,170,255,.04); border: 1px solid var(--line); border-radius: 11px; padding: 10px 13px; }
.tchip-l { font-size: 11px; color: var(--muted); font-weight: 600; }
.tchip-v { font-size: 17px; font-weight: 820; margin-top: 2px; }
.tchip-v.up { color: var(--good); }
.tchip-v.down { color: #ff8f8f; }
.tchip-s { display: block; font-size: 10.5px; color: var(--dim); font-weight: 600; margin-top: 2px; }
.gsc-svg { width: 100%; }
.tsvg { width: 100%; height: auto; display: block; overflow: visible; }
.svg-v { fill: #9fb4d8; font-size: 11px; font-weight: 700; }
.svg-m { fill: #5f7194; font-size: 11px; font-weight: 600; }
.chart-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.lg { display: inline-block; width: 18px; height: 0; border-top: 2px dashed currentColor; vertical-align: middle; margin-right: 5px; }
.lg-core { color: #8a6bff; }
.lg-spam { color: #ffab52; }

/* SEO suggestion category tag */
.sug-cat { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; color: var(--muted); background: rgba(120,170,255,.07); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; margin-left: 4px; vertical-align: middle; white-space: nowrap; }

/* ---------- MC-style monthly traffic rows + top keywords ---------- */
.gsc-months { display: flex; flex-direction: column; gap: 2px; }
.gm { display: grid; grid-template-columns: 82px 1fr 58px 62px 42px; gap: 10px; align-items: center; padding: 3px 0; font-size: 12.5px; }
.gm-m { color: var(--muted); font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 3px; }
.gm-bar { height: 13px; background: rgba(120,170,255,.10); border-radius: 4px; overflow: hidden; }
.gm-fill { height: 100%; background: linear-gradient(90deg, var(--neon-2), var(--neon)); border-radius: 4px; box-shadow: 0 0 8px rgba(41,224,255,.3); }
.gm-c { text-align: right; font-weight: 750; color: var(--ink); }
.gm-d { text-align: right; font-size: 11px; font-weight: 700; }
.gm-d.up { color: var(--good); }
.gm-d.down { color: #ff8f8f; }
.gm-d.flat { color: var(--dim); }
.gm-d.alert { color: #ff6b6b; font-weight: 800; }
.gm-p { text-align: right; color: var(--muted); font-size: 11.5px; }
.ud { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.ud-core { background: #8a6bff; }
.ud-spam { background: #ffab52; }
.kw-lbl { margin-top: 18px; }
.kw-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.kwc { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(120,170,255,.05); border: 1px solid var(--line); color: var(--muted); }
.kwc b { color: var(--good); margin-left: 3px; }
.lg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.lg-dot.lg-core { background: #8a6bff; }
.lg-dot.lg-spam { background: #ffab52; }

/* traffic trend arrow in table */
.tarrow { font-size: 10px; font-weight: 800; margin-left: 3px; }
.tarrow.up { color: var(--good); }
.tarrow.down { color: #ff8f8f; }
.idx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.idx-c { background: rgba(120,170,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; text-align: center; }
.idx-c.idx-bad { border-color: rgba(255,80,80,.4); background: rgba(255,60,60,.06); }
.idx-c.idx-good { border-color: rgba(95,207,133,.35); background: rgba(95,207,133,.05); }
.idx-v { font-size: 22px; font-weight: 840; letter-spacing: -.5px; }
.idx-c.idx-bad .idx-v { color: #ff9a9a; }
.idx-c.idx-good .idx-v { color: var(--good); }
.idx-l { font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.idx-s { font-size: 10px; color: var(--dim); margin-top: 3px; }
@media (max-width: 520px) { .idx { grid-template-columns: 1fr; } }
.pot { font-weight: 700; }
.pgu { font-size: 9px; opacity: .55; font-weight: 600; margin-left: 1px; }
.pot-hi { color: #5fcf85; }
.pot-mid { color: #a9d94b; }
.pot-amb { color: #f0b428; }
.pot-lo { color: #ff9a9a; }
.tflat { font-size: 14px; margin-left: 5px; vertical-align: -1px; display: inline-block;
  filter: drop-shadow(0 0 5px rgba(255,190,40,.7)) saturate(1.35); animation: flatpulse 1.4s ease-in-out infinite; }
@keyframes flatpulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.15); } }

/* partial (incomplete current) month in traffic chart */
.gm.partial .gm-fill { opacity: .4; background: repeating-linear-gradient(45deg, var(--neon-2) 0 4px, transparent 4px 8px); box-shadow: none; }
.gm.partial .gm-m { opacity: .65; }
/* the running month: shown, never compared — "collecting…" needs the room */
.part { font-size: 9px; color: var(--warn); font-weight: 700; letter-spacing: -.2px; white-space: nowrap; }

/* ── Links overlay ─────────────────────────────────────────────────────────
   Second layer, opened from a delivered package card. Stacks above the site
   overlay (which stays mounted underneath) so Close returns to it.          */
.pkg-clickable { cursor: pointer; position: relative; transition: border-color .15s, transform .15s; }
.pkg-clickable:hover { border-color: rgba(90,180,255,.55); transform: translateY(-1px); }
.pkg-clickable:focus-visible { outline: 2px solid rgba(90,180,255,.8); outline-offset: 2px; }
.pkg-see { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
           font-size: 11.5px; color: #7fc4ff; opacity: .85; white-space: nowrap; }

.links-backdrop { z-index: 260; }   /* above .modal-backdrop (200) — it stays mounted underneath */
.links-card { max-width: 1080px; width: 94vw; }
.lk-wrap { max-height: 58vh; overflow: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; }
.lk-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lk-tbl thead th { position: sticky; top: 0; background: #10161f; z-index: 1;
                   text-align: left; padding: 8px 10px; font-weight: 600; opacity: .75;
                   border-bottom: 1px solid rgba(255,255,255,.12); }
.lk-tbl td { padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: top; }
.lk-tbl tbody tr:hover { background: rgba(255,255,255,.03); }
.lk-tbl .ctr { text-align: center; }
.lk-tbl .dim { opacity: .55; }
.lk-dom { color: #cfe6ff; white-space: nowrap; }
.lk-anchor { color: #e8e8e8; }
.lk-url { color: #7fc4ff; text-decoration: none; white-space: nowrap; }
.lk-url:hover { text-decoration: underline; }
.lk-do { color: #6ee7a8; font-size: 11px; }
.lk-no { color: #ffb454; font-size: 11px; }
.lk-empty { padding: 18px; text-align: center; opacity: .6; font-size: 12.5px; }
.lk-live { color: #6ee7a8; font-size: 11px; white-space: nowrap; }
.lk-dead { color: #ff7a7a; font-size: 11px; white-space: nowrap; }
.lk-unk  { color: #7a7a7a; font-size: 11px; }
.lk-dr { color: #cfe6ff; font-size: 12px; }
.lk-dr-hi { color: #6ee7a8; font-weight: 600; }
.mstat-sub { font-size: 10.5px; opacity: .5; margin-top: 2px; white-space: nowrap; }

/* ── Collapsible month invoices ──────────────────────────────────────────── */
.mi-toggle { width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
             font: inherit; color: inherit; display: flex; align-items: center; gap: 10px; }
.mi-toggle:hover .mi-title { color: #cfe6ff; }
.mi-toggle:focus-visible { outline: 2px solid rgba(90,180,255,.7); outline-offset: 2px; border-radius: 4px; }
.mi-caret { font-size: 12px; opacity: .6; transition: transform .15s; flex: 0 0 auto; }
.month-invoice.mi-collapsed .mi-caret { transform: rotate(-90deg); }
.month-invoice.mi-collapsed .mi-body { display: none; }
.month-invoice.mi-collapsed { padding-bottom: 0; }
.mi-toggle .mi-title { flex: 1 1 auto; }   /* keep the title beside the caret, total hard right */


/* Header refresh control — sits opposite the page title. */
.dash-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.dash-top-t { min-width: 0; }
.refresh-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; padding-top: 4px; }
.refresh-msg { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.refresh-msg.is-busy { color: var(--accent, #6aa9ff); }
.refresh-msg.is-bad { color: #e06c6c; white-space: normal; max-width: 260px; }
#refreshBtn[disabled] { opacity: .55; cursor: default; }
@media (max-width: 720px) {
  .dash-top { flex-direction: column; }
  .refresh-box { justify-content: flex-start; }
  .refresh-msg { white-space: normal; }
}


/* Delivery date on a bought package card. Deliberately quiet — it is a fact the
   client can check, not a headline. */
.pkg-when { opacity: .72; white-space: nowrap; }


/* Packages column — delivery-year filter.
   Picking a year keeps every row in place and only changes how the chips read:
   the matching package stays lit, the rest fade back. Nothing is hidden, so the
   column can be scanned against the other columns without the table shifting. */
.yr-sel { margin-left: 6px; font-size: 11px; padding: 1px 4px; border-radius: 6px;
          background: var(--panel, #1b2030); color: inherit; border: 1px solid var(--line, #2c3446); }
.pkg-badge.yr-hit { outline: 2px solid #5fcf85; outline-offset: 1px; }
/* Everything that is not a hit steps back — including the gold "ordered" and the
   violet "in progress" chips, which have their own colour and would otherwise
   keep drawing the eye while the year filter is on. !important is needed because
   those two set their own filter/background at a higher specificity. */
.pkg-badge.yr-miss { opacity: .18 !important; filter: grayscale(1) !important; }
.pkg-badge.yr-unknown { opacity: .4 !important; filter: grayscale(1) !important; border-style: dashed; }
.tchips .pkg-badge.ordered.yr-miss, .tchips .pkg-badge.inprogress.yr-miss,
.tchips .pkg-badge.ordered.yr-unknown, .tchips .pkg-badge.inprogress.yr-unknown {
  color: var(--muted); background: rgba(255,255,255,.05);
}
/* the rows lifted to the top get a hairline so the block is visible at a glance */
tr.yr-top td { box-shadow: inset 0 1px 0 rgba(95,207,133,.10); }
#pkgYearCount { font-size: 11px; color: var(--muted); margin-left: 8px; }

/* ── Billing: drag an order into another month ─────────────────────────────── */
/* Only 'requested' rows get .omove; started work stays put and shows the padlock. */
tr.omove { cursor: grab; }
tr.omove:active { cursor: grabbing; }
.ogrip {
  display: inline-block; color: var(--dim, #8a8f98); cursor: grab;
  padding: 0 .25rem; letter-spacing: -1px; user-select: none; touch-action: none;
}
tr.omove:hover .ogrip { color: var(--fg, #e6e8ea); }
tr.od-dragging { opacity: .45; }
/* a row that just landed — brief confirmation without a dialog */
tr.od-moved > td { animation: odMoved 1.2s ease-out; }
@keyframes odMoved {
  0%   { background: rgba(90, 200, 130, .30); }
  100% { background: transparent; }
}

/* Empty months are hidden until a drag starts — otherwise the page grows four
   €0 cards nobody asked for. During a drag they become the drop targets. */
.month-invoice.mi-empty { display: none; }
body.bill-dragging .month-invoice.mi-empty { display: block; }
body.bill-dragging .month-invoice.md-ok { outline: 1px dashed var(--accent, #5aa9e6); outline-offset: 2px; }
body.bill-dragging .month-invoice.md-no { opacity: .4; }
body.bill-dragging .month-invoice.md-over {
  outline: 2px solid var(--accent, #5aa9e6); outline-offset: 2px;
  background: rgba(90, 169, 230, .07);
}
.mi-drophint { display: none; }
body.bill-dragging .month-invoice.md-ok .mi-drophint {
  display: block; padding: .4rem .9rem; font-size: .82rem;
  color: var(--accent, #5aa9e6); border-top: 1px dashed rgba(128, 128, 128, .35);
}
body.bill-dragging .month-invoice.md-over .mi-drophint { font-weight: 600; }
/* a collapsed month must still accept a drop, so give it a body to aim at */
body.bill-dragging .month-invoice.mi-collapsed .mi-body { display: none; }
.mi-none td { padding: .7rem .9rem; color: var(--dim, #8a8f98); font-style: italic; }

/* touch drag follows the finger; HTML5 drag does not fire on touch at all */
.od-ghost {
  position: fixed; z-index: 9999; transform: translate(-50%, -140%);
  padding: .3rem .6rem; border-radius: 6px; pointer-events: none;
  background: var(--accent, #5aa9e6); color: #fff; font-size: .82rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3); white-space: nowrap;
}

/* ── "Quiet for" filter — sites with no package delivered in a chosen window ── */
.quiet-filter {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .84rem; color: var(--dim, #8a8f98); white-space: nowrap;
}
.quiet-filter select { margin: 0; }
#quietCount { color: var(--accent, #5aa9e6); font-weight: 600; }

/* ── API & Webhooks page ───────────────────────────────────────────────────── */
.api-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .api-grid { grid-template-columns: 1fr 1fr; } }
.api-card {
  background: var(--card, rgba(255,255,255,.03)); border: 1px solid rgba(128,128,128,.22);
  border-radius: 10px; padding: 1rem 1.1rem;
}
.api-card h3 { margin: 0 0 .6rem; font-size: 1rem; }
.api-lead { margin: 0 0 .7rem; color: var(--dim, #8a8f98); font-size: .9rem; line-height: 1.5; }
.api-uses { margin: 0; padding-left: 1.1rem; font-size: .9rem; line-height: 1.6; }
.api-uses li { margin-bottom: .45rem; }
.api-tbl { width: 100%; border-collapse: collapse; font-size: .86rem; }
.api-tbl th { text-align: left; font-weight: 600; padding: .3rem .4rem; color: var(--dim, #8a8f98); }
.api-tbl td { padding: .35rem .4rem; border-top: 1px solid rgba(128,128,128,.16); vertical-align: top; }
.api-tbl code { font-size: .85em; }
.api-foot { margin: .7rem 0 0; font-size: .84rem; color: var(--dim, #8a8f98); line-height: 1.5; }
.api-empty { color: var(--dim, #8a8f98); font-style: italic; font-size: .88rem; }
/* wide code must scroll inside its own box, never the page */
.api-pre {
  margin: .5rem 0; padding: .6rem .7rem; border-radius: 7px; overflow-x: auto;
  background: rgba(0,0,0,.28); font-size: .8rem; line-height: 1.45;
}
.api-pre code { white-space: pre; }
.m { display: inline-block; min-width: 3.1rem; text-align: center; padding: .05rem .3rem;
     border-radius: 4px; font-size: .72rem; font-weight: 700; letter-spacing: .3px; }
.m.get { background: rgba(90,169,230,.18); color: #6fb6ef; }
.m.post { background: rgba(90,200,130,.18); color: #63c98a; }
.m.del { background: rgba(230,110,110,.18); color: #e08585; }
.api-mask { font-size: .82rem; color: var(--dim, #8a8f98); }
.api-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .8rem; }
.api-form input[type="text"], .api-form input[type="url"] {
  flex: 1 1 14rem; min-width: 0; padding: .38rem .55rem; border-radius: 6px;
  border: 1px solid rgba(128,128,128,.3); background: rgba(0,0,0,.2); color: inherit;
}
.api-chk { display: inline-flex; align-items: center; gap: .3rem; font-size: .84rem; color: var(--dim, #8a8f98); }
.api-hint { font-size: .78rem; color: var(--dim, #8a8f98); }
.api-inline { display: inline; }
/* the one-time reveal after generating */
.api-new {
  margin-bottom: 1rem; padding: .8rem 1rem; border-radius: 10px;
  border: 1px solid rgba(90,200,130,.45); background: rgba(90,200,130,.09);
}
.an-h { font-size: .92rem; margin-bottom: .45rem; }
.an-key {
  display: block; padding: .5rem .6rem; border-radius: 6px; background: rgba(0,0,0,.32);
  font-size: .84rem; word-break: break-all; user-select: all;
}
.an-note { margin-top: .4rem; font-size: .8rem; color: var(--dim, #8a8f98); }

/* the reference hand-off strip — the client's actual entry point, so it leads */
.api-handoff {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; padding: 1rem 1.2rem; border-radius: 10px;
  border: 1px solid rgba(90,169,230,.4); background: rgba(90,169,230,.07);
}
.api-handoff .ah-l { flex: 1 1 22rem; min-width: 0; }
.api-handoff .ah-t { font-size: 1rem; font-weight: 600; margin-bottom: .3rem; }
.api-handoff p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--dim, #8a8f98); }
.api-handoff .ah-r { flex: 0 0 auto; }
.btn-lg { padding: .55rem 1.1rem; font-size: .95rem; }
/* full-width cards inside the two-column grid */
@media (min-width: 1100px) { .api-card.api-wide { grid-column: 1 / -1; } }

/* the totals traffic cell opens the portfolio trend — make that discoverable */
.tot-click { cursor: pointer; border-radius: 6px; transition: background .12s ease; }
.tot-click:hover { background: rgba(120,170,255,.09); }
.tot-click .tot-v { text-decoration: underline dotted rgba(255,255,255,.35); text-underline-offset: 3px; }
#trendModal .gsc-months { max-height: 62vh; overflow-y: auto; }