/* Clipping fork - "Studio Daylight" skin.
   Single light theme, replaces the legacy gold overlay. Loaded last so token
   overrides win the cascade. No purple, no dark, off-white canvas + electric
   cobalt action color + teal accent + money-green earnings. */

/* Force the light palette regardless of any [data-theme] state (toggle removed). */
:root,
html[data-theme="light"],
html[data-theme="dark"]{
  --bg:#f6f8fc; --bg2:#eef2f9; --panel:#ffffff; --panel2:#f2f5fb;
  --line:rgba(15,30,60,.12); --line2:rgba(15,30,60,.08);
  --text:#0e1b33; --muted:rgba(14,27,51,.72); --muted2:rgba(14,27,51,.62);

  /* cobalt action + teal accent + money green. The legacy --gold* aliases are
     re-aimed at cobalt so the ~600 existing var(--gold) call-sites stay on-brand. */
  --primary:#1f4bff; --primary-fg:#ffffff; --primary-press:#1a3fdb;
  --gold:#1f4bff; --gold2:#143a8f; --gold3:rgba(31,75,255,.10);
  --accent-lime:#0fb5c9; --accent-lime-fg:#04323a;
  --accent-sky:#0fb5c9; --accent-rose:#1f4bff;
  --accent-violet:#1f4bff;                 /* purge purple -> cobalt */
  --accent-emerald:#0e9f6e; --accent-amber:#b45309;
  --ok:#0e9f6e; --ok2:rgba(14,159,110,.12); --money:#0e9f6e; --money-ink:#067a52;
  --warn:#b45309; --danger:#d11d3b; --err:#d11d3b;

  --grad-ig:linear-gradient(135deg,#1f4bff 0%,#0fb5c9 100%);
  --grad-ig-story:conic-gradient(from 45deg,#1f4bff,#0fb5c9,#0e9f6e,#1f4bff);
  --grad-gold:linear-gradient(135deg,#1f4bff 0%,#143a8f 100%);
  --grad-lime:linear-gradient(135deg,#0fb5c9 0%,#1f4bff 100%);
  --grad-sky:linear-gradient(135deg,#1f4bff 0%,#0fb5c9 100%);
  --grad-violet:linear-gradient(135deg,#1f4bff 0%,#143a8f 100%);
  --grad-success:linear-gradient(135deg,#34d399 0%,#0e9f6e 100%);

  --shadow:0 28px 60px -20px rgba(31,75,255,.18);
  --shadow-sm:0 4px 12px rgba(15,30,60,.08);
  --e1:0 1px 2px rgba(15,30,60,.06);
  --e2:0 4px 12px rgba(15,30,60,.08),0 1px 3px rgba(15,30,60,.05);
  --e3:0 14px 32px -10px rgba(15,30,60,.14),0 4px 10px rgba(15,30,60,.06);
  --e4:0 28px 60px -20px rgba(31,75,255,.18);
  color-scheme:light;
}

/* Off-white canvas, cobalt + teal ambient wash only (no purple radials). */
html, body,
[data-theme="light"] html, [data-theme="light"] body{
  background:
    radial-gradient(ellipse 80% 40% at 50% -10%,rgba(31,75,255,.10),transparent),
    radial-gradient(ellipse 70% 35% at 12% 70%,rgba(15,181,201,.08),transparent),
    linear-gradient(180deg,#f6f8fc 0%,#eef2f9 100%) !important;
  color:#0e1b33 !important;
}
/* Cobalt blueprint glow, drop purple/sky orbs. */
[data-theme="light"] body::after{
  background:
    radial-gradient(circle at 50% 0%,rgba(31,75,255,.14) 0%,transparent 55%),
    radial-gradient(circle at 92% 100%,rgba(15,181,201,.08) 0%,transparent 60%) !important;
}
.admin-ambience .orb-3,
.orb-3{background:radial-gradient(circle,rgba(15,181,201,.16),transparent 70%) !important}
.noise-layer{opacity:.02 !important}

/* Cards: clean white sheets, crisp 16px radius, soft cool shadow (not dark glass). */
.card, .metric-card, .campaign-card, .gb-card{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
  box-shadow:0 4px 12px rgba(15,30,60,.08),0 1px 3px rgba(15,30,60,.05) !important;
}
.card-gold{border-color:rgba(31,75,255,.22) !important;background:#ffffff !important}

/* Nav: white sheet, crisp radius (drop the full-pill bar). */
.nav{
  background:rgba(255,255,255,.9) !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(15,30,60,.06) !important;
}
.brand-word,.brand-clipper{color:#0e1b33 !important}
.brand-stra{color:rgba(14,27,51,.5) !important}
.brand:hover .brand-mark{filter:drop-shadow(0 0 8px rgba(31,75,255,.40)) !important}

/* Earnings / wallet read money-green. */
.wallet,.wallet-amount,.kpi-money,.earnings,[data-money]{color:var(--money) !important}

/* Pills: light, cobalt-active. */
.pill.active{background:rgba(31,75,255,.10) !important;border-color:rgba(31,75,255,.28) !important;color:#143a8f !important}

/* Buttons: solid cobalt primary, calm hover (drop pulsing glow). */
.btn{border:1px solid rgba(31,75,255,.30) !important}
.btn:hover{box-shadow:0 8px 20px rgba(31,75,255,.16) !important}

/* Single theme: remove the dark/light toggle entirely. */
.theme-toggle{display:none !important}

/* ── Landing hero: convert the dark cinematic band to Studio Daylight ── */
/* Drop the dark space-globe / network / orb canvases so the hero sits on the
   light canvas. */
.lp-globe-wrap,.lp-globe-canvas,.lp-net,.lp-spot,
.lp-orb,.lp-orb-1,.lp-orb-2,.lp-orb-3{display:none !important}
.lp-hero-wrap{background:transparent !important}

/* "Go Viral" cycled through purple via a hue-rotate animation. Kill the
   animation so it stays the cobalt->blue gradient; force no purple. */
.lp-hue-shift{
  animation:none !important;
  background:linear-gradient(135deg,#1f4bff 0%,#0fb5c9 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;filter:none !important;
}
.lp-vb-burst line,.lp-vb-burst circle{stroke:#1f4bff !important;fill:#1f4bff !important}

/* Landing nav: white sheet (override the dark hero band), dark links. */
html[data-theme="light"] nav.nav{
  background:rgba(255,255,255,.92) !important;
  border:1px solid var(--line) !important;
  -webkit-backdrop-filter:blur(12px) !important;backdrop-filter:blur(12px) !important;
  box-shadow:0 1px 2px rgba(15,30,60,.06) !important;
}
html[data-theme="light"] nav.nav .pill:not(.pill-cta):not(.btn),
html[data-theme="light"] nav.nav a:not(.btn):not(.pill-cta){color:#0e1b33 !important}

/* Belt-and-suspenders: any leftover hardcoded purple swatch -> cobalt. */
[style*="#6366F1"],[style*="#962FBF"],[style*="#4F5BD5"],[style*="#7c3aed"]{color:#1f4bff !important}

/* Form controls: light fields (override hardcoded dark inputs/selects). */
input,textarea,select,
input[type="text"],input[type="email"],input[type="password"],input[type="search"]{
  background:#ffffff !important;color:#0e1b33 !important;
  border:1px solid var(--line) !important;
}
input::placeholder,textarea::placeholder{color:rgba(14,27,51,.45) !important}
select option{color:#0e1b33 !important;background:#ffffff !important}

/* ============================================================
   ADVANCED SHELL - Earnbase. CSS-only premium graphics (no JS,
   no canvas): animated conic-gradient nav border, glass, scroll-
   driven compaction, gradient-sheen wordmark, live pulse, mesh
   backdrop, bold outro footer. Distinct from the legacy reference shell.
   ============================================================ */
@property --cf-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes cf-spin{to{--cf-angle:360deg}}
@keyframes cf-sheen{0%{background-position:0% 50%}100%{background-position:-200% 50%}}
@keyframes cf-pulse{0%{box-shadow:0 0 0 0 rgba(14,159,110,.55)}70%{box-shadow:0 0 0 7px rgba(14,159,110,0)}100%{box-shadow:0 0 0 0 rgba(14,159,110,0)}}

/* Soft mesh backdrop at the top of every page (replaces the legacy
   blueprint lattice). */
[data-theme="light"] body::before{
  background-image:
    radial-gradient(42% 40% at 14% 6%,rgba(31,75,255,.16),transparent 70%),
    radial-gradient(38% 36% at 86% 2%,rgba(15,181,201,.13),transparent 70%),
    radial-gradient(34% 32% at 60% 0%,rgba(14,159,110,.09),transparent 70%) !important;
  background-size:auto !important;background-repeat:no-repeat !important;
  -webkit-mask:linear-gradient(180deg,#000,transparent 62%) !important;
          mask:linear-gradient(180deg,#000,transparent 62%) !important;
  opacity:1 !important;
}
/* Faint film grain for texture. */
.noise-layer{opacity:.025 !important;mix-blend-mode:multiply !important;display:block !important}

/* ---- Glass command bar with animated conic-gradient border ---- */
html[data-theme="light"] nav.cf-nav{
  position:sticky;top:14px;z-index:50;
  display:flex;align-items:center;gap:14px;
  margin:14px auto 30px;padding:11px 14px 11px 18px;border-radius:18px;
  background:rgba(255,255,255,.7) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid transparent !important;background-clip:padding-box;
  box-shadow:0 12px 34px -14px rgba(15,30,60,.24),inset 0 1px 0 rgba(255,255,255,.65) !important;
}
/* Animated conic-gradient glow border removed per operator: the spinning
   cobalt-teal-green ring on the top command bar read as the nav "lighting up"
   on cursor move. The nav keeps its translucent glass background + subtle
   box-shadow ring for definition. */
nav.cf-nav::before{display:none}
/* Scroll-driven: tighter + heavier shadow as the page scrolls (modern CSS). */
@keyframes cf-nav-scroll{to{
  box-shadow:0 18px 44px -16px rgba(15,30,60,.32),inset 0 1px 0 rgba(255,255,255,.75) !important;
  background-color:rgba(255,255,255,.9) !important;border-radius:14px;
}}
@supports (animation-timeline: scroll()){
  html[data-theme="light"] nav.cf-nav{animation:cf-nav-scroll linear both;animation-timeline:scroll(root);animation-range:0 180px}
}

/* Brand: gradient-sheen wordmark + glowing mark. */
.cf-word{
  background:linear-gradient(90deg,#0e1b33 0%,#1f4bff 35%,#0fb5c9 50%,#0e1b33 70%) !important;
  background-size:200% 100% !important;-webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  animation:cf-sheen 6s linear infinite;font-weight:900;letter-spacing:-.03em}
.cf-mark{filter:drop-shadow(0 2px 7px rgba(31,75,255,.4))}

/* Live status chip pushes the nav links to the right. */
.cf-status{display:inline-flex;align-items:center;gap:7px;margin-right:auto;
  font-size:12px;font-weight:700;letter-spacing:.01em;color:var(--muted) !important;
  padding:6px 12px;border-radius:999px;background:rgba(14,159,110,.08);border:1px solid rgba(14,159,110,.22)}
.cf-dot{width:7px;height:7px;border-radius:50%;background:#0e9f6e;animation:cf-pulse 2.1s ease-out infinite}
@media(max-width:820px){.cf-status{display:none}}

/* Buttons: no shine sweep (partner feedback cut shine sweeps site-wide;
   hover stays a plain background/border shift defined per component). */
.pill-cta,.btn{position:relative;overflow:hidden}

/* ---- Bold outro footer ---- */
.cf-foot{display:block !important;position:relative;margin-top:90px;padding:64px 0 40px;overflow:hidden;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(31,75,255,.04));max-width:none !important;width:auto !important}
.cf-foot-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(31,75,255,.26) 1.1px,transparent 1.1px);background-size:22px 22px;
  -webkit-mask:linear-gradient(180deg,#000,transparent 78%);mask:linear-gradient(180deg,#000,transparent 78%);opacity:.45}
.cf-foot-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 24px}
.cf-foot-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:44px}
.cf-foot-word{font-size:clamp(58px,12vw,158px);font-weight:900;letter-spacing:-.05em;line-height:.82;
  background:linear-gradient(125deg,#1f4bff,#0fb5c9 58%,#0e9f6e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cf-foot-tag{color:var(--muted);font-size:16px;font-weight:600}
.cf-foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:38px;max-width:640px}
.cf-foot-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted2);margin-bottom:12px}
.cf-foot-col a{display:block;color:var(--muted) !important;font-size:14px;padding:5px 0;transition:color .15s,transform .15s;text-decoration:none}
.cf-foot-col a:hover{color:var(--primary) !important;transform:translateX(3px)}
.cf-foot-meta{font-size:12px;color:var(--muted2);border-top:1px solid var(--line);padding-top:20px;max-width:640px}
@media(max-width:760px){.cf-foot-cols{grid-template-columns:1fr 1fr}.cf-foot-word{line-height:.9}}

@media(prefers-reduced-motion:reduce){
  nav.cf-nav::before,.cf-word,.cf-dot,.pill-cta::after,.btn::after,html[data-theme="light"] nav.cf-nav{animation:none !important}
}

/* ============================================================
   HYPER-ADVANCED LIGHT MOTION (Suite-tier, single light theme):
   animated gradient hero, drifting aurora orbs, scroll-reveal,
   premium glow. CSS-only, GPU-composited, reduced-motion aware.
   ============================================================ */
@keyframes cf-grad-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes cf-orb-float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(42px,-32px) scale(1.06)}66%{transform:translate(-30px,42px) scale(.95)}}
@keyframes cf-reveal{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes cf-board-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes cf-eyebrow-pulse{0%{box-shadow:0 0 0 0 rgba(31,75,255,.45)}70%{box-shadow:0 0 0 9px rgba(31,75,255,0)}100%{box-shadow:0 0 0 0 rgba(31,75,255,0)}}

/* Drifting aurora orbs (reuse the .admin-ambience .orb backdrop layer). */
.admin-ambience{display:block !important;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.admin-ambience .orb{position:absolute;border-radius:50%;filter:blur(86px);opacity:.85 !important;will-change:transform;animation:cf-orb-float 24s ease-in-out infinite}
.admin-ambience .orb-1{width:660px;height:660px;background:radial-gradient(circle,rgba(31,75,255,.42),transparent 70%) !important;top:-230px;left:-150px;animation-duration:24s}
.admin-ambience .orb-2{display:block !important;width:560px;height:560px;background:radial-gradient(circle,rgba(15,181,201,.38),transparent 70%) !important;top:-130px;right:-130px;animation-duration:19s;animation-delay:-6s}
.admin-ambience .orb-3{display:block !important;width:600px;height:600px;background:radial-gradient(circle,rgba(14,159,110,.3),transparent 70%) !important;top:300px;left:48%;animation-duration:28s;animation-delay:-11s}

/* Animated gradient hero headline + soft glow. */
.lpx-h1{text-shadow:0 6px 60px rgba(31,75,255,.12)}
.lpx-h1 .g{background:linear-gradient(120deg,#1f4bff,#0fb5c9 45%,#0e9f6e 70%,#1f4bff) !important;background-size:280% 280% !important;
  -webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;
  animation:cf-grad-shift 7s ease infinite}

/* Eyebrow badge pulse. */
.lpx-eyebrow i{animation:cf-eyebrow-pulse 2.2s ease-out infinite}

/* Premium CTA glow. */
.lpx-cta .btn{box-shadow:0 12px 36px -12px rgba(31,75,255,.4)}
.lpx-cta .btn:hover{box-shadow:0 20px 54px -14px rgba(31,75,255,.55)}

/* Scoreboard card: static, cobalt aura only (float animation cut with the
   rest of the always-running motion per partner feedback). */
.lpx-board{box-shadow:0 30px 70px -28px rgba(31,75,255,.3) !important}

/* Scroll-reveal removed: sections are simply there when you scroll
   (partner feedback: no slide-in entrances anywhere). */
@media(prefers-reduced-motion:reduce){
  .admin-ambience .orb,.lpx-h1 .g,.lpx-eyebrow i,.lpx-board{animation:none !important}
}

/* ════════════════════════════════════════════════════════════════════════
   INTERNAL PAGE ELEVATION - "Studio Daylight" (2026-06-19)
   The customer landing was rebuilt hyper-advanced light; the inner pages
   (/campaigns, /leaderboard, /users, /dashboard, /my-stats, /my-campaigns,
   campaign detail, auth) still carried the legacy dark cinematic body styles
   embedded in <style> blocks. This layer (a) re-points the legacy gold/amber
   token vars to the cobalt palette, (b) retones every dark surface to a light
   editorial sheet, and (c) adds the signature motion (gradient kicker bars,
   scroll-reveal, hover aura, count-up, cursor spotlight, pointer parallax).
   Loaded last + !important so it wins over the body <style> rules. CSS-only,
   GPU-composited, fully reduced-motion aware.
   ════════════════════════════════════════════════════════════════════════ */

/* ── (a) Legacy token re-point: the inner pages read var(--skn-*) / --tier-*
   with amber/gold fallbacks. Define them so every call-site goes cobalt. ── */
:root,html[data-theme="light"],html[data-theme="dark"]{
  --skn-gold:#1f4bff; --skn-gold-2:#143a8f; --skn-surface:#ffffff; --skn-surface-2:#f2f5fb;
  --tier-glow:rgba(31,75,255,.40); --tier-ring:rgba(31,75,255,.55);
  --glass-1:rgba(255,255,255,.66); --glass-2:rgba(255,255,255,.78);
  --font-display:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
}

/* ── (b) Dark-surface light retones (override the embedded legacy CSS) ── */

/* Filter / search / sort inputs were dark glass on a dark page. */
.cf-bar input,.cf-bar select,
.udir-search input,.udir-sort,
input.ma-add-input{
  background:#ffffff !important;color:#0e1b33 !important;
  border:1px solid var(--line) !important;font-weight:600;
}
.cf-bar input::placeholder,.udir-search input::placeholder{color:rgba(14,27,51,.45) !important}
.cf-bar input:focus,.cf-bar select:focus,.udir-search input:focus{
  border-color:rgba(31,75,255,.5) !important;background:#f8faff !important;
  box-shadow:0 0 0 3px rgba(31,75,255,.12) !important;outline:none}
.cf-bar{background:rgba(31,75,255,.04) !important;border:1px solid rgba(31,75,255,.14) !important}
.cf-bar button{background:linear-gradient(135deg,#1f4bff,#143a8f) !important;color:#fff !important}
.udir-sort{color:var(--muted) !important}

/* Campaign cards WITHOUT a cover were a dark purple gradient (off-brand).
   Convert to a luminous cobalt-tinted sheet with dark editorial text. */
.stra-card.no-cover{
  background:
    radial-gradient(72% 60% at 26% 18%,rgba(31,75,255,.16),transparent 62%),
    radial-gradient(60% 60% at 92% 8%,rgba(15,181,201,.14),transparent 60%),
    linear-gradient(165deg,#ffffff 0%,#eef3fc 100%) !important;
  border:1px solid rgba(31,75,255,.16) !important;
  box-shadow:0 10px 30px -14px rgba(31,75,255,.20) !important;
}
.stra-card.no-cover .sc-shade{background:linear-gradient(180deg,transparent 40%,rgba(255,255,255,.0) 100%) !important}
.stra-card.no-cover .sc-eyebrow-text{color:#1a3fa0 !important;text-shadow:none !important}
.stra-card.no-cover .sc-title{color:#0e1b33 !important;text-shadow:none !important}
.stra-card.no-cover .sc-brief{color:rgba(14,27,51,.72) !important;text-shadow:none !important}
.stra-card.no-cover .sc-meta{color:rgba(14,27,51,.62) !important;text-shadow:none !important}
.stra-card.no-cover .sc-meta b{color:#0e1b33 !important}
.stra-card.no-cover .sc-pill{background:rgba(255,255,255,.72) !important;border-color:rgba(31,75,255,.18) !important;
  color:#1a3fa0 !important;backdrop-filter:blur(6px);text-shadow:none !important}
.stra-card.no-cover .sc-pill.cpm{background:rgba(31,75,255,.12) !important;color:#143a8f !important;border-color:rgba(31,75,255,.30) !important}
.stra-card.no-cover .sc-pill.live{background:rgba(14,159,110,.12) !important;color:#067a52 !important;border-color:rgba(14,159,110,.34) !important}
.stra-card.no-cover .sc-pill.live::before{background:#0e9f6e !important;box-shadow:0 0 10px #0e9f6e !important}

/* /users directory cards: dark slate -> frosted white sheet. */
.user-card{
  background:#ffffff !important;border:1px solid var(--line) !important;
  box-shadow:0 4px 12px rgba(15,30,60,.08),0 1px 3px rgba(15,30,60,.05) !important;
}
.user-card .user-card-bg{opacity:.10 !important;filter:saturate(1.1)}

/* /leaderboard podium + table: dark -> light. */
.pd-card{
  background:linear-gradient(165deg,rgba(31,75,255,.05),#ffffff 70%) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 6px 18px -8px rgba(15,30,60,.16) !important;
}
.pd-card.pd-center{
  background:linear-gradient(165deg,rgba(31,75,255,.12),#ffffff 72%) !important;
  border-color:rgba(31,75,255,.34) !important;
  box-shadow:0 18px 44px -16px rgba(31,75,255,.30) !important;
}
.pd-substats{border-top:1px solid var(--line) !important}
.lb-table{background:#ffffff !important;border:1px solid var(--line) !important;
  box-shadow:0 4px 12px rgba(15,30,60,.07) !important}
.lb-table thead th{background:#f4f7fd !important;color:var(--muted2) !important;border-bottom:1px solid var(--line) !important}
.lb-table tbody td{color:#13233f !important;border-bottom:1px solid var(--line2) !important}
.lb-table tbody tr:hover td{background:rgba(31,75,255,.04) !important}
.usr-ava{border:1px solid var(--line) !important}

/* Dashboard tier ladder + my-accounts tag card carried gold glows. Cobalt-ize. */
.tier-row.is-current{box-shadow:0 0 0 1px rgba(31,75,255,.42),0 0 22px rgba(31,75,255,.16) !important}
.card.card-gold{--edge-glow:rgba(31,75,255,.40) !important;border-color:rgba(31,75,255,.22) !important}
.ma-tag-card{background:linear-gradient(160deg,rgba(31,75,255,.08),rgba(247,250,255,.7)) !important;border:1px solid rgba(31,75,255,.24) !important}
.ma-tag-code{color:#143a8f !important;background:rgba(31,75,255,.08) !important;border:1px solid rgba(31,75,255,.22) !important}
.ma-add-input:focus{border-color:#1f4bff !important;box-shadow:0 0 0 3px rgba(31,75,255,.16) !important}
.ma-agg-cell--lead{background:linear-gradient(160deg,rgba(31,75,255,.12),rgba(31,75,255,.03)) !important;border-color:rgba(31,75,255,.28) !important}
.ma-agg-v--big{color:#143a8f !important}
.ma-avatar{background:#f2f5fb !important;border:1.5px solid rgba(31,75,255,.24) !important;color:#143a8f !important}
.ma-remove:hover{color:#143a8f !important;border-color:rgba(31,75,255,.40) !important;background:rgba(31,75,255,.06) !important}
/* Tier-credit table (my-stats): amber scroller + rows -> cobalt. */
.tc-card{background:linear-gradient(160deg,#ffffff,#f4f7fd) !important;border:1px solid rgba(31,75,255,.18) !important;box-shadow:0 10px 28px -10px rgba(31,75,255,.14) !important}
.tc-title{color:#143a8f !important}
.tc-paid{color:#143a8f !important}
.tc-handle-met b{color:#143a8f !important}
.tc-handle-row{background:rgba(31,75,255,.05) !important;border:1px solid rgba(31,75,255,.12) !important}
.tc-row{border-bottom:1px solid rgba(31,75,255,.10) !important}
.tc-row[open]{background:rgba(31,75,255,.04) !important}
.tc-summary:hover{background:rgba(31,75,255,.06) !important}
.tc-chev{color:#1f4bff !important}
.tc-scroll{scrollbar-color:rgba(31,75,255,.45) transparent !important}
.tc-scroll::-webkit-scrollbar-thumb{background:rgba(31,75,255,.35) !important}

/* ── (c) Signature motion + craft (the "hyper-advanced light" layer) ── */

/* Editorial gradient kicker bar on every section heading. Robust against
   emoji in the heading text (no background-clip on the text itself). */
.section-title{position:relative}
.section-title h2,.section-title>h2{position:relative;padding-left:18px}
.section-title h2::before{content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:5px;border-radius:4px;
  background:linear-gradient(180deg,#1f4bff,#0fb5c9 55%,#0e9f6e);box-shadow:0 0 14px rgba(31,75,255,.35)}
.section-title .mini,.section-title .muted{color:var(--muted)}

/* Reusable animated-gradient text for spans we control. */
.cf-grad-text{background:linear-gradient(120deg,#1f4bff,#0fb5c9 45%,#0e9f6e 70%,#1f4bff) !important;
  background-size:280% 280% !important;-webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;animation:cf-grad-shift 7s ease infinite}

/* Hover aura + lift on the light surfaces (skip the dark photo cover cards,
   which keep their own hover recipe). */
@media(hover:hover){
  .card,.metric-card,.user-card,.pd-card,.gb-card,.stra-card.no-cover{
    transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s,border-color .26s}
  .card:hover,.metric-card:hover,.user-card:hover,.gb-card:hover,.stra-card.no-cover:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 50px -22px rgba(31,75,255,.26),0 2px 8px rgba(15,30,60,.06) !important;
    border-color:rgba(31,75,255,.26) !important}
  .pd-card:hover{transform:translateY(-5px);box-shadow:0 26px 56px -22px rgba(31,75,255,.32) !important}
}
/* KPI tiles get a faint cobalt top edge so the metric strip reads premium. */
.metric-card{position:relative}
.metric-card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,#1f4bff,#0fb5c9 60%,transparent);opacity:.55;border-radius:16px 16px 0 0}

/* Inner-page scroll-reveal removed: app content is simply there when you
   scroll (partner feedback: everything static and flat inside the app). */

/* Cursor spotlight on the hero (JS sets --spot-x / --spot-y; CSS draws it). */
.lpx-hero{position:relative;--spot-x:50%;--spot-y:0%}
.lpx-hero::after{content:"";position:absolute;inset:-12% -6%;z-index:-1;pointer-events:none;
  background:radial-gradient(420px 420px at var(--spot-x) var(--spot-y),rgba(31,75,255,.12),transparent 70%);
  opacity:0;transition:opacity .45s}
.lpx-hero:hover::after{opacity:1}

/* Pointer-parallax wrapper for the aurora layer (JS sets the translate vars). */
.admin-ambience{transition:transform .35s cubic-bezier(.2,.7,.3,1);
  transform:translate3d(var(--cf-par-x,0px),var(--cf-par-y,0px),0)}

/* Premium focus ring + selection + custom scrollbar. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid #1f4bff;outline-offset:2px;border-radius:6px;box-shadow:0 0 0 4px rgba(255,255,255,.85)}
::selection{background:rgba(31,75,255,.18);color:#0e1b33}
*{scrollbar-width:thin;scrollbar-color:rgba(31,75,255,.35) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(31,75,255,.32);border-radius:6px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(31,75,255,.5);background-clip:content-box}

@media(prefers-reduced-motion:reduce){
  .cf-grad-text{animation:none !important}
  .admin-ambience{transition:none !important;transform:none !important}
  .card,.metric-card,.user-card,.pd-card,.gb-card,.stra-card.no-cover{transition:none !important}
}
@supports (animation-timeline: view()){@media(prefers-reduced-motion:reduce){
  .camp-grid>*,.udir-grid>*,.lb-table tbody tr,.pd-card,
  .grid>.card,.grid>.metric-card,.section-title,.ma-row{animation:none !important;opacity:1 !important}
}}

/* ════════════════════════════════════════════════════════════════════════
   DARK THEME - "Midnight Cobalt" (2026-06-23). The site now runs a permanent
   animated dark backdrop (lightning + fireflies) and defaults to
   data-theme="dark". This block retones the Studio Daylight light-forcing
   component rules above to a premium deep-navy glass (deep-navy cinematic)
   while KEEPING the cobalt/teal/green accents + all CTAs. Loaded last + scoped
   html[data-theme="dark"] .X !important so it wins the cascade. Structural tokens
   come from cf-wow's body.cf-bg-dark flip; this covers the components + accent
   text that hardcode light values.
   ════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] body{background:#050b18 !important;color:#eef2ff !important}
/* Full dark token set on html (this block loads last, so it beats the skin's own
   html[data-theme="dark"] light tokens above) - makes var(--text/--muted/--panel/...)
   resolve dark everywhere, incl. surfaces cf-wow's body-level flip doesn't reach. */
html[data-theme="dark"]{--bg:#050b18;--bg2:#091428;--panel:rgba(13,21,40,.60);--panel2:rgba(18,29,54,.84);
  --text:#eef2ff;--muted:rgba(238,242,255,.70);--muted2:rgba(238,242,255,.48);
  --skn-surface:rgba(13,21,40,.60);--skn-surface-2:rgba(18,29,54,.84);
  --glass-1:rgba(18,28,52,.62);--glass-2:rgba(18,28,52,.78);--gold2:#7aa2ff;
  --line:rgba(120,160,255,.16);--line2:rgba(255,255,255,.07)}
/* Inactive filter/segment pills read var(--muted); force light on dark as a fallback. */
html[data-theme="dark"] .pill{color:rgba(238,242,255,.72) !important}
/* Cards / panels -> deep-navy glass. */
html[data-theme="dark"] .card,html[data-theme="dark"] .metric-card,html[data-theme="dark"] .campaign-card,
html[data-theme="dark"] .gb-card,html[data-theme="dark"] .card-gold{
  background:rgba(13,21,40,.60) !important;border-color:rgba(120,160,255,.14) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.45) !important}
/* Inputs / search / sort -> dark fields. */
html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select,
html[data-theme="dark"] .cf-bar input,html[data-theme="dark"] .cf-bar select,
html[data-theme="dark"] .udir-search input,html[data-theme="dark"] .udir-sort,html[data-theme="dark"] input.ma-add-input{
  background:rgba(18,28,52,.78) !important;color:#eef2ff !important;border-color:rgba(120,160,255,.16) !important}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .cf-bar input::placeholder,html[data-theme="dark"] .udir-search input::placeholder{color:rgba(238,242,255,.45) !important}
html[data-theme="dark"] .cf-bar{background:rgba(31,75,255,.10) !important;border-color:rgba(120,160,255,.18) !important}
html[data-theme="dark"] select option{background:#0b1424 !important;color:#eef2ff !important}
/* /users directory cards -> deep-navy glass. */
html[data-theme="dark"] .user-card{background:rgba(13,21,40,.60) !important;border-color:rgba(120,160,255,.14) !important;box-shadow:0 14px 32px rgba(0,0,0,.45) !important}
/* /leaderboard podium + table -> dark. */
html[data-theme="dark"] .pd-card{background:linear-gradient(165deg,rgba(59,91,255,.10),rgba(8,12,26,.92) 72%) !important;border-color:rgba(120,160,255,.14) !important;box-shadow:0 14px 32px rgba(0,0,0,.45) !important}
html[data-theme="dark"] .pd-card.pd-center{background:linear-gradient(165deg,rgba(59,91,255,.20),rgba(8,12,26,.94) 72%) !important;border-color:rgba(120,160,255,.30) !important}
html[data-theme="dark"] .pd-substats{border-top-color:rgba(120,160,255,.14) !important}
html[data-theme="dark"] .lb-table{background:rgba(13,21,40,.60) !important;border-color:rgba(120,160,255,.14) !important}
html[data-theme="dark"] .lb-table thead th{background:rgba(120,160,255,.06) !important;color:rgba(238,242,255,.62) !important;border-bottom-color:rgba(120,160,255,.14) !important}
html[data-theme="dark"] .lb-table tbody td{color:#eef2ff !important;border-bottom-color:rgba(120,160,255,.10) !important}
html[data-theme="dark"] .lb-table tbody tr:hover td{background:rgba(120,160,255,.07) !important}
/* Campaign no-cover cards -> dark cobalt sheet + light editorial text. */
html[data-theme="dark"] .stra-card.no-cover{background:radial-gradient(72% 60% at 26% 18%,rgba(31,75,255,.22),transparent 62%),linear-gradient(165deg,rgba(13,22,42,.95),rgba(8,12,26,.96)) !important;border-color:rgba(120,160,255,.18) !important}
html[data-theme="dark"] .stra-card.no-cover .sc-eyebrow-text{color:#9bc0ff !important}
html[data-theme="dark"] .stra-card.no-cover .sc-title{color:#eef2ff !important}
html[data-theme="dark"] .stra-card.no-cover .sc-brief{color:rgba(238,242,255,.72) !important}
html[data-theme="dark"] .stra-card.no-cover .sc-meta{color:rgba(238,242,255,.60) !important}
html[data-theme="dark"] .stra-card.no-cover .sc-meta b{color:#eef2ff !important}
html[data-theme="dark"] .stra-card.no-cover .sc-pill{background:rgba(18,28,52,.72) !important;border-color:rgba(120,160,255,.20) !important;color:#cfe0ff !important}
/* my-stats tier-credit + my-accounts tag surfaces -> dark. */
html[data-theme="dark"] .tc-card{background:linear-gradient(160deg,rgba(13,22,42,.92),rgba(8,12,26,.94)) !important;border-color:rgba(120,160,255,.18) !important}
html[data-theme="dark"] .tc-handle-row{background:rgba(120,160,255,.06) !important;border-color:rgba(120,160,255,.14) !important}
html[data-theme="dark"] .ma-tag-card{background:linear-gradient(160deg,rgba(31,75,255,.14),rgba(13,22,42,.88)) !important;border-color:rgba(120,160,255,.22) !important}
html[data-theme="dark"] .ma-avatar{background:rgba(18,28,52,.8) !important;border-color:rgba(120,160,255,.24) !important}
html[data-theme="dark"] .ma-tag-code{background:rgba(31,75,255,.16) !important;border-color:rgba(120,160,255,.22) !important}
/* Hardcoded dark-cobalt (#143a8f) accent text -> lighter cobalt, readable on dark. */
html[data-theme="dark"] .tc-title,html[data-theme="dark"] .tc-paid,html[data-theme="dark"] .tc-handle-met b,
html[data-theme="dark"] .ma-agg-v--big,html[data-theme="dark"] .ma-tag-code{color:#9bc0ff !important}
/* Active filter/segment pill: dark-cobalt text (#143a8f) fails contrast on the dark pill. */
html[data-theme="dark"] .pill.active{background:rgba(31,75,255,.20) !important;border-color:rgba(120,160,255,.42) !important;color:#bcd2ff !important}
/* Premium selection on dark. */
html[data-theme="dark"] ::selection{background:rgba(120,160,255,.28);color:#fff}
/* Frosted glass: panels are translucent + blurred so the animated backdrop glints
   through a little (even behind text), while the blur keeps the text readable. */
html[data-theme="dark"] .card,html[data-theme="dark"] .metric-card,html[data-theme="dark"] .panel,
html[data-theme="dark"] .gb-card,html[data-theme="dark"] .card-gold,html[data-theme="dark"] .user-card,
html[data-theme="dark"] .pd-card,html[data-theme="dark"] .lb-table,html[data-theme="dark"] .cf-feat,
html[data-theme="dark"] .fb-panel,html[data-theme="dark"] .fb-card,html[data-theme="dark"] .tc-card{
  -webkit-backdrop-filter:blur(15px) saturate(1.25);backdrop-filter:blur(15px) saturate(1.25)}
/* Cooler top command bar: more translucent + heavier blur so the lightning/fireflies AND the
   animated cobalt-teal-green conic border (nav.cf-nav::before) read through it. */
html[data-theme="dark"] nav.cf-nav{
  background:rgba(9,15,30,.52) !important;border:1px solid transparent !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
  box-shadow:0 18px 46px -18px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(120,160,255,.06) !important}
/* keep the spinning conic gradient border crisp + a touch brighter on the dark glass */
html[data-theme="dark"] nav.cf-nav::before{padding:1.5px;opacity:.9}

/* Mobile blur-kill block removed 2026-07-07: operator A/B on a real iPhone showed
   the page-change stall is identical with or without blurs/animations (Safari-only,
   pre-render block) - full desktop visuals restored on phones. */