/* SuperTraffic — original brand identity: light content + purple→crimson gradient chrome. */
:root,[data-theme="light"]{
  --bg:#F4F5F9;
  --bg-img:none;
  --surface:#FFFFFF; --surface-2:#F0F1F8; --surface-3:#FFFFFF;
  --border:#E6E8F1; --border-strong:#D7DAEA;
  --ink:#1E2233; --ink-soft:#414862; --muted:#717A92;
  --brand-grad:linear-gradient(110deg,#3A2C8C 0%,#6E2A8C 48%,#BE1E57 100%);
  --accent:#5A2EA6; --accent-2:#BE1E57; --accent-ink:#ffffff;
  --link:#2F6FE0;
  --hi:#BE1E57; --hi-soft:#BE1E57;
  --success:#0E9C6F; --danger:#DC2626;
  --on-nav:#FFFFFF; --on-nav-soft:rgba(255,255,255,.84);
  --card-shadow:0 10px 30px rgba(40,40,90,.10);
}
[data-theme="dark"]{
  --bg:#161235;
  --surface:#201B4A; --surface-2:#2A2459; --surface-3:#1B1640;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
  --ink:#ECEAF8; --ink-soft:#C9C4EC; --muted:#9C97C4;
  --brand-grad:linear-gradient(110deg,#4A38A8 0%,#8A2E9C 48%,#D43A6E 100%);
  --accent:#7C5CE6; --accent-2:#E0457E; --accent-ink:#ffffff;
  --link:#86B2FF;
  --hi:#FF6FA0; --hi-soft:#FF6FA0;
  --success:#33C98E; --danger:#FF6B81;
  --on-nav:#FFFFFF; --on-nav-soft:rgba(255,255,255,.84);
  --card-shadow:0 16px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
body{
  margin:0;min-height:100vh;color:var(--ink);
  font-family:"Fira Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);-webkit-font-smoothing:antialiased;
}
.mono,.kpi-value,.num,.price,.pack-credits,.credit-chip b{
  font-family:"Fira Code",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}

/* nav = brand gradient bar */
.st-nav{position:sticky;top:0;z-index:1000;background:var(--brand-grad);box-shadow:0 2px 16px rgba(58,44,140,.35)}
.st-nav-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 22px}
.st-brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.st-brand img{width:30px;height:30px;border-radius:9px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.brand-wm{font-size:1.2rem;font-weight:600;color:var(--on-nav);letter-spacing:.3px}
.brand-wm strong{font-weight:800}
.brand-wm i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#F5821F;margin-left:2px;vertical-align:super}
.st-links{display:flex;align-items:center;gap:6px}
.st-links a{color:var(--on-nav-soft);text-decoration:none;padding:8px 12px;border-radius:10px;font-weight:500;font-size:.93rem;transition:background .15s,color .15s}
.st-links a:hover{color:#fff;background:rgba(255,255,255,.16);text-decoration:none}
.st-links a.st-cta{color:var(--accent);background:#fff;font-weight:700;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.st-links a.st-cta:hover{color:var(--accent-2);background:#fff}
.st-links a.st-logout{color:#ffd4de}
.theme-toggle{cursor:pointer;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.16);color:#fff;
  width:38px;height:38px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;transition:transform .12s,background .15s}
.theme-toggle:hover{transform:translateY(-1px);background:rgba(255,255,255,.28)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .ic-sun{display:none}
html[data-theme="dark"] .theme-toggle .ic-sun{display:block}
html[data-theme="dark"] .theme-toggle .ic-moon{display:none}

/* layout */
.st-main{max-width:1180px;margin:0 auto;padding:34px 22px 64px}
h1,h2,h3{font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.text-muted{color:var(--muted)!important}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px;flex-wrap:wrap}

/* KPI cards */
.kpi-grid,.pack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:16px;margin-bottom:26px}
.kpi{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 20px;box-shadow:var(--card-shadow);overflow:hidden}
.kpi::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand-grad)}
.kpi-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.kpi-value{font-size:2.05rem;font-weight:700;margin-top:8px;line-height:1.05;color:var(--ink)}
.kpi.amber .kpi-value{color:var(--hi)}
.kpi-sub{font-size:.8rem;color:var(--muted);margin-top:6px}
.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--success);vertical-align:middle;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(14,156,111,.5)}70%{box-shadow:0 0 0 8px rgba(14,156,111,0)}100%{box-shadow:0 0 0 0 rgba(14,156,111,0)}}

/* cards */
.card{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:16px!important;box-shadow:var(--card-shadow);color:var(--ink)}
.card-header{background:transparent!important;border-bottom:1px solid var(--border)!important;color:var(--ink)}
.card-body{padding:22px}
.card-title,.card-text{color:var(--ink)}

/* buttons */
.btn{border-radius:11px;font-weight:600;transition:transform .12s,box-shadow .12s,filter .15s}
.btn-primary{background:var(--brand-grad);border:none;color:#fff;padding:10px 18px;box-shadow:0 8px 20px rgba(120,38,120,.32)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(190,30,87,.4);filter:brightness(1.04);color:#fff}
.btn-primary:active{transform:scale(.97)}
.btn-sm{padding:7px 13px;border-radius:9px}

/* forms */
.form-control,.form-select{border-radius:10px;border:1px solid var(--border-strong);padding:10px 13px;background:var(--surface);color:var(--ink)}
.form-control::placeholder{color:var(--muted)}
.form-control:focus,.form-select:focus{border-color:var(--accent);background:var(--surface);color:var(--ink);box-shadow:0 0 0 4px rgba(90,46,166,.18)}
.form-label{font-weight:600;font-size:.85rem;color:var(--ink-soft)}
.auth-card{max-width:430px}

/* tables */
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow-x:auto;box-shadow:var(--card-shadow)}
.table{--bs-table-bg:transparent;color:var(--ink-soft);border-color:var(--border);margin:0}
.table thead th{background:var(--surface-2);text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;color:var(--muted);border:none;border-bottom:1px solid var(--border);padding:13px 18px}
.table tbody td{padding:14px 18px;border-color:var(--border);vertical-align:middle}
.table tbody tr:hover{background:var(--surface-2)}
.table tbody td strong{color:var(--ink)}
.num{color:var(--ink)}

/* status pills */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;font-weight:600;font-size:.78rem;padding:.36em .8em;text-transform:capitalize;background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--border)}
.pill-active{background:rgba(14,156,111,.13);color:#0E9C6F;border-color:rgba(14,156,111,.32)}
.pill-paused{background:rgba(113,122,146,.14);color:#5b6379;border-color:rgba(113,122,146,.3)}
.pill-draft{background:rgba(90,46,166,.12);color:var(--accent);border-color:rgba(90,46,166,.3)}
.pill-stopped{background:rgba(190,30,87,.12);color:var(--accent-2);border-color:rgba(190,30,87,.3)}
.pill-completed{background:rgba(37,99,235,.13);color:#2563eb;border-color:rgba(37,99,235,.32)}
.pill-archived{background:rgba(113,122,146,.12);color:#717a92;border-color:rgba(113,122,146,.25)}

/* chips + pricing */
.credit-chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border-strong);border-radius:999px;padding:8px 15px;font-weight:600;color:var(--ink-soft)}
.credit-chip b{color:var(--hi);font-weight:700}
.price{font-size:1.95rem;font-weight:700;color:var(--ink)}
.price small{font-size:.9rem;color:var(--muted);font-weight:500}
.pack-credits{color:var(--accent);font-weight:700;font-size:1.02rem;margin:6px 0 2px}

/* alerts */
.alert{border-radius:12px;border:1px solid var(--border)}
.alert-success{background:rgba(14,156,111,.1);color:#0b7a56;border-color:rgba(14,156,111,.28)}
.alert-danger{background:rgba(220,38,38,.08);color:#b42318;border-color:rgba(220,38,38,.25)}

a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:10px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

.fade-up{animation:fadeUp .4s ease both}
.fade-up:nth-child(2){animation-delay:.05s}
.fade-up:nth-child(3){animation-delay:.1s}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- rebuilt original SuperTraffic wordmark (white pill so purple reads on gradient nav) ---- */
.st-brand{gap:0}
.logo{font-family:"Baloo 2","Fira Sans",sans-serif;font-weight:800;font-size:1.42rem;line-height:1;
  letter-spacing:.4px;color:#5C2D91;background:#ffffff;padding:7px 15px;border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.20);display:inline-flex;align-items:center}
.logo .g{color:#9AA0A6}                 /* the signature grey T */
.logo .ff{position:relative}
.logo .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#F5821F;
  align-self:flex-start;margin-top:4px;margin-left:1px}

/* --- campaign detail + form sections --- */
.st-section-title{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:14px}
.st-rowlink{text-decoration:none;color:var(--ink)}
.st-rowlink:hover{color:var(--accent)}
.st-dl{display:grid;gap:0}
.st-dl>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--border)}
.st-dl>div:last-child{border-bottom:none}
.st-dl dt{color:var(--muted);font-weight:600;margin:0}
.st-dl dd{margin:0;color:var(--ink);text-align:right}
.st-feed{list-style:none;padding:0;margin:0}
.st-feed li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--border);font-size:.9rem}
.st-feed li:last-child{border-bottom:none}
.st-feed .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:0 0 auto}
.st-feed .txt{flex:1;color:var(--ink)}
.st-feed .when{color:var(--muted);font-size:.78rem;white-space:nowrap}
.st-feed .tone-good .dot{background:var(--success)}
.st-feed .tone-warn .dot{background:var(--hi)}
.st-feed .tone-info .dot{background:var(--accent)}

/* --- Tom Select: follow the app theme (fixes dark-on-dark dropdown) --- */
.ts-wrapper .ts-control,
.ts-dropdown{
  background:var(--surface)!important;color:var(--ink)!important;
  border:1px solid var(--border)!important;border-radius:11px;
}
.ts-dropdown{box-shadow:var(--card-shadow)}
.ts-control input,.ts-control .item{color:var(--ink)!important}
.ts-control ::placeholder{color:var(--muted)!important}
.ts-dropdown .option{color:var(--ink)!important;background:transparent}
.ts-dropdown .option.active,
.ts-dropdown .option:hover{background:var(--surface-2)!important;color:var(--ink)!important}
.ts-dropdown .optgroup-header,.ts-dropdown .no-results{color:var(--muted)!important;background:transparent}
.ts-wrapper.multi .ts-control>.item{
  background:var(--surface-2)!important;color:var(--ink)!important;
  border:1px solid var(--border)!important;border-radius:8px;
}
.ts-wrapper.multi .ts-control>.item .remove{border-left-color:var(--border)!important}
.ts-dropdown-content{scrollbar-color:var(--border) transparent}

/* Tom Select: force readable text on the CLOSED control (single + multi) in dark mode */
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper .ts-control > .item,
.ts-wrapper .ts-control > input{ color:var(--ink)!important; }
.ts-wrapper .ts-control > input::placeholder{ color:var(--muted)!important; opacity:1; }
.ts-wrapper.single.input-active .ts-control > input{ color:var(--ink)!important; }