/* AdVenture UI — "Sunny & warm".
   One stylesheet. Warm cream pages, candy colour blocks, rounded bold headlines (Unbounded),
   hard-edged buttons in warm ink. Only the video player is dark.
   Colour roles: orange = the one main action, gold = money, candy colours = categories, pages and celebrations. */

:root{
  color-scheme:light;
  --bg:#fff8ec;--s1:#fffdf8;--s2:#fbf0dc;--s3:#f1e2c6;
  --line:#efe1c8;--line-2:#dcc8a6;
  --text:#2b1d12;--ink-2:#4a3a22;--muted:#6b5a48;--dim:#7d6b57;
  --signal:#ff7a1a;--signal-hi:#ff8f3a;--signal-ink:#a84300;
  --gold:#e9b949;--gold-deep:#8a6514;--money:#8f5a00;
  --sun:#ffd84d;--sky:#a8d8ff;--mint:#9ee8c4;--apricot:#ffc89e;--lilac:#d9d2ff;
  --ok:#14804a;--warn:#9a5800;--err:#c4282c;
  --accent:var(--sun);
  --r:12px;--r-lg:20px;
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Unbounded","Archivo",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.3,1.6,.5,1)
}
/* Page accents: each section of the app has its own soft colour. */
body[data-page="activities"]{--accent:var(--lilac)}
body[data-page="account"]{--accent:var(--sun)}
body[data-page="discover"]{--accent:var(--sky)}
body[data-page="earnings"]{--accent:var(--mint)}
body[data-page="admin"]{--accent:var(--s3)}
/* The video player is the only dark surface: cinema for the ad itself. */
.cx-player,.video-frame{
  color-scheme:dark;--bg:#16100b;--s1:#211810;--s2:#2c2117;--s3:#3a2d20;--line:#3a2d20;--line-2:#54432f;
  --text:#fff8ec;--muted:#c9b9a3;--dim:#ad9d88;color:var(--text)
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.5 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
p{margin:0}
/* No grey/blue tap flash on phones: buttons have their own pressed states. Keyboard focus still shows the ring below. */
html{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
.ui-icon,.nav-icon{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Nav icons fill in when their tab is selected; detail strokes (.nd) switch to the pill colour so they stay visible. */
.nav-icon .nf,.nav-icon .nd{transition:fill .2s,stroke .2s}
.nav-link.active .nav-icon .nf{fill:currentColor}
.nav-link.active .nav-icon .nd{stroke:var(--pill,var(--bg))}
.nav-link.active .nav-icon .nd-fill{fill:var(--sun)}
.money,.wallet-balance,.stat-value,.reward-chip,.activity-reward,.admin-stat strong,.data-table td,.cx-amount,.cx-reward-big{font-variant-numeric:tabular-nums}
.label,.eyebrow,.welcome-greeting{display:block;color:var(--muted);font-size:13px;font-weight:600;line-height:1.3}
/* Kickers: small lead-in lines get a short orange tick that draws in, so they read as a deliberate first beat. */
.eyebrow,.cx-kicker,.auth-kicker{display:inline-flex;align-items:center;gap:10px;color:var(--ink-2);font-size:14px;font-weight:700;letter-spacing:.01em}
.eyebrow::before,.cx-kicker::before,.auth-kicker::before{content:"";flex:none;width:20px;height:3px;border-radius:99px;background:var(--signal);transform-origin:left;animation:tick-in .6s var(--ease) .15s both}
@keyframes tick-in{from{transform:scaleX(0)}}
/* Greeting: time-of-day icon, the name in ink with a hand-drawn underline that draws in once. */
.hello{display:inline-flex;align-items:center;gap:10px;color:var(--ink-2);font-size:clamp(16px,4.2vw,18px);font-weight:600;line-height:1.3;animation:hello-in .5s var(--ease) both}
@keyframes hello-in{from{opacity:0;transform:translateY(6px)}}
.hello-icon{flex:none;display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--text);border-radius:50%;background:var(--sun)}
.hello-icon svg{width:18px;height:18px;fill:none;stroke:var(--text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:sun-turn 12s linear infinite}
.hello.is-night .hello-icon{background:var(--lilac)}
.hello.is-night .hello-icon svg{fill:var(--s1);animation:moon-rock 4s ease-in-out infinite}
@keyframes sun-turn{to{transform:rotate(360deg)}}
@keyframes moon-rock{50%{transform:rotate(-14deg)}}
.hello.is-night .hello-star{fill:var(--text);stroke:none;transform-box:fill-box;transform-origin:center;animation:star-twinkle 2.6s ease-in-out infinite}
.hello.is-night .hello-star+.hello-star{animation-delay:1.3s}
@keyframes star-twinkle{50%{opacity:.25;transform:scale(.6)}}
@media(prefers-reduced-motion:reduce){.hello.is-night .hello-star{animation:none}}
.hello.is-afternoon .hello-icon{background:var(--signal-hi)}
.hello.is-afternoon .hello-icon svg{animation:none}
.hello.is-afternoon .hello-sun{fill:var(--sun)}
.hello.is-afternoon .hello-cloud{fill:var(--s1);animation:cloud-drift 5s ease-in-out infinite}
@keyframes cloud-drift{50%{transform:translateX(-1.5px)}}
.hello b{position:relative;color:var(--text);font-weight:800;padding-bottom:4px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' viewBox='0 0 24 6'%3E%3Cpath d='M0 3c3-3 6-3 9 0s6 3 9 0 4.5-2 6-1.5' fill='none' stroke='%23ff7a1a' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") left bottom/0 6px repeat-x;
  animation:squiggle-in .9s var(--ease) .45s forwards}
@keyframes squiggle-in{to{background-size:100% 6px}}
@media(prefers-reduced-motion:reduce){.hello b{background-size:100% 6px}}
.skip-link{position:fixed;z-index:100;left:12px;top:10px;padding:10px 14px;border-radius:var(--r);background:var(--text);color:var(--bg);font-weight:700;transform:translateY(-200%)}
.skip-link:focus{transform:none}

/* ---------- Buttons: warm-ink edge that presses flat ---------- */
.primary-btn,.welcome-action,.cx-cta,.cx-next{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;margin:0 3px 3px 0;
  border:2px solid var(--text);border-radius:var(--r);background:var(--signal);color:var(--text);font-weight:800;font-size:15px;
  box-shadow:3px 3px 0 var(--text);transition:transform .25s var(--spring),box-shadow .25s var(--spring),background .12s}
.primary-btn:hover,.welcome-action:hover,.cx-cta:hover,.cx-next:not(:disabled):hover{background:var(--signal-hi)}
.primary-btn:active,.welcome-action:active,.cx-cta:active,.cx-next:not(:disabled):active{transform:translate(3px,3px);box-shadow:0 0 0 var(--text)}
.primary-btn:disabled,.cx-next:disabled{border-color:var(--line-2);background:var(--s2);color:var(--dim);box-shadow:3px 3px 0 var(--line-2);cursor:not-allowed}
.primary-btn .ui-icon,.cx-cta .ui-icon{width:18px;height:18px;stroke-width:2.3}
.secondary-btn,.cx-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 20px;
  border:2px solid var(--text);border-radius:var(--r);background:transparent;color:var(--text);font-weight:700;font-size:15px;transition:background .12s}
.secondary-btn:hover,.cx-ghost:hover{background:#2b1d120d}
.text-link{display:inline-flex;align-items:center;gap:6px;padding:6px 0;border:0;background:none;color:var(--text);font-weight:700;font-size:14px;white-space:nowrap;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--accent);text-underline-offset:6px}
.text-link:hover{text-decoration-color:var(--signal)}
.text-link .ui-icon{width:16px;height:16px}

/* ---------- Brand ---------- */
.brand,.auth-brand,.app-loading-brand{display:inline-flex;align-items:center;font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.03em;color:var(--text)}
.brand::before,.auth-brand::before,.app-loading-brand::before{content:"";flex:none;width:14px;height:14px;margin-right:10px;border:2px solid var(--text);border-radius:50%;background:var(--gold)}
.brand-dot,.auth-brand span,.app-loading-brand span{color:inherit}

/* ---------- Loading ---------- */
.app-loading{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg);color:var(--muted);font-size:14px;font-weight:600}
.app-loading-brand{font-size:26px}
.app-loading i{position:relative;width:120px;height:6px;border-radius:99px;background:var(--s3);overflow:hidden}
.app-loading i::after{content:"";position:absolute;inset:0;width:40%;border-radius:inherit;background:var(--signal);animation:load-sweep 1s ease-in-out infinite alternate}
@keyframes load-sweep{from{transform:translateX(-10%)}to{transform:translateX(160%)}}

/* ---------- App shell (mobile first) ---------- */
.app-shell{min-height:100vh}
/* Phones: no top bar. The bottom dock carries the three tabs and Account. */
.sidebar{display:none;background:var(--bg)}
.workspace-label,.sidebar>.main-nav,.side-level,.profile-copy,.dots,.admin-shortcut{display:none}
.sidebar-bottom{display:flex;align-items:center}
.profile-button{display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;text-align:left}
.avatar{flex:none;display:grid;place-items:center;width:36px;height:36px;border:2px solid var(--text);border-radius:50%;background:var(--accent);color:var(--text);font-family:var(--display);font-weight:800;font-size:13px}
.avatar-small{width:32px;height:32px;font-size:12px}
.main-area{min-height:100vh}
.topbar{display:none}
.topbar-account{display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
body[data-page="account"] .topbar-account .avatar{box-shadow:3px 3px 0 var(--text)}
.page-content{width:100%;padding:calc(26px + env(safe-area-inset-top)) 16px calc(100px + env(safe-area-inset-bottom));overflow-x:clip}

/* Bottom dock (a clone of the sidebar nav, appended to body by app.js). */
body>.mobile-main-nav{position:fixed;z-index:40;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  padding:6px 6px calc(4px + env(safe-area-inset-bottom));background:var(--s1);border-top:1.5px solid var(--line)}
.mobile-main-nav .nav-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;padding:4px 2px;border:0;background:none;color:var(--muted);font-size:11.5px;font-weight:600;white-space:nowrap}
.mobile-main-nav .nav-icon{box-sizing:content-box;width:22px;height:22px;padding:5px 18px;border-radius:99px;transition:background .2s,color .2s,transform .3s var(--spring)}
.mobile-main-nav .nav-link.active{--pill:var(--text);color:var(--text);font-weight:800}
.mobile-main-nav .nav-link.active .nav-icon{background:var(--text);color:var(--bg);transform:scale(1.04)}
.mobile-main-nav .nav-link:active .nav-icon{transform:scale(.92)}
.mobile-main-nav .nav-count{display:none}
/* Account tab: the member's initial in a bubble, sized to sit where the other tabs' icons do. */
.mobile-main-nav .nav-avatar{width:28px;height:28px;font-size:12px;border-width:2px}
.mobile-main-nav .nav-account.active .nav-avatar{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--text)}
body.auth-gate>.mobile-main-nav,html:has(#modalRoot.campaign-flow) body>.mobile-main-nav{display:none}

@media(min-width:768px){
  body>.mobile-main-nav{display:none}
  .sidebar{position:fixed;inset:0 auto 0 0;z-index:20;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:236px;height:auto;padding:26px 14px 16px;border-bottom:0;border-right:1.5px solid var(--line)}
  .sidebar .brand{margin:0 10px 30px}
  .workspace-label{display:block;margin:0 12px 8px;color:var(--dim);font-size:12px;font-weight:700}
  .sidebar>.main-nav{display:grid;gap:4px}
  .sidebar .nav-link{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:2px solid transparent;border-radius:var(--r);background:none;color:var(--muted);font-size:15px;font-weight:600;text-align:left;transition:background .15s}
  .sidebar .nav-link:hover{background:var(--s2);color:var(--text)}
  .sidebar .nav-link.active{--pill:var(--accent);border-color:var(--text);background:var(--accent);color:var(--text);font-weight:800;box-shadow:3px 3px 0 var(--text)}
  .nav-count{margin-left:auto;padding:1px 8px;border-radius:99px;background:var(--s2);color:var(--muted);font-size:12px;font-weight:700}
  .nav-link.active .nav-count{background:#fffdf8b3;color:var(--text)}
  .sidebar-bottom{flex-direction:column;align-items:stretch;margin-top:auto}
  .side-level{display:block;margin:0 2px 14px;padding:14px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--s1)}
  .profile-button{width:100%;padding:14px 4px 0;border-top:1.5px solid var(--line)}
  .profile-copy{display:grid;min-width:0}
  .profile-copy strong{overflow:hidden;font-size:14px;font-weight:700;white-space:nowrap;text-overflow:ellipsis}
  .profile-copy small{color:var(--muted);font-size:12px}
  .dots{display:block;margin-left:auto;color:var(--dim);letter-spacing:1px}
  .admin-shortcut{display:flex;align-items:center;gap:8px;width:100%;margin-top:10px;padding:8px 6px;border:0;border-radius:var(--r);background:none;color:var(--muted);font-size:13px;font-weight:600}
  .admin-shortcut:hover{background:var(--s2);color:var(--text)}
  .admin-shortcut[hidden]{display:none}
  .main-area{margin-left:236px}
  .topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;height:62px;padding:0 32px;border-bottom:1.5px solid var(--line);background:var(--bg)}
  .breadcrumbs{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:14px;font-weight:600}
  .breadcrumbs strong{color:var(--text);font-weight:800}
  .top-actions{display:flex;align-items:center;gap:18px}
  .secure-tag{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;font-weight:600}
  .secure-tag .ui-icon{width:16px;height:16px;color:var(--ok)}
  .page-content{max-width:1180px;margin:0 auto;padding:34px 32px 64px}
}

/* ---------- Levels & stickers ---------- */
.side-level .label{margin-bottom:4px}
.side-level strong{display:block;font-family:var(--display);font-size:18px;font-weight:800}
.side-level small{display:block;margin-top:8px;color:var(--muted);font-size:12px}
.level-track{display:block;height:8px;margin-top:10px;border-radius:99px;background:var(--s3);overflow:hidden}
.level-track span{display:block;height:100%;border-radius:inherit;background:var(--tier,var(--text))}
.tier-1{--tier:#b56a33}.tier-2{--tier:#6b7280}.tier-3{--tier:#c58f12}.tier-4{--tier:#1f9a92}
.level-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:2px solid var(--text);border-radius:99px;background:var(--s1);color:var(--text);font-size:13px;font-weight:800;white-space:nowrap}
.level-chip::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--tier,var(--gold));box-shadow:0 0 0 2px var(--text)}
.dash-badges{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sticker{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:2px solid var(--text);border-radius:99px;background:var(--c,var(--sun));color:var(--text);
  font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;box-shadow:3px 3px 0 var(--text);transform:rotate(var(--tilt,-3deg));animation:sticker-in .5s var(--spring) .25s both}
.sticker .ui-icon{width:15px;height:15px;stroke-width:2.2}
@keyframes sticker-in{from{opacity:0;transform:rotate(var(--tilt,-3deg)) scale(.6)}}
.sticker-streak{--c:var(--sun);--tilt:-4deg}
.sticker-streak .ui-icon{color:var(--signal-ink);fill:var(--signal);animation:flicker 1.6s ease-in-out infinite}
@keyframes flicker{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.15) rotate(-5deg)}}
.sticker-ready{--c:var(--mint)}
.sticker-togo{--c:var(--s1)}

/* ---------- Doodles: flat shapes, warm-ink outline, a gentle float ---------- */
.doodles{position:absolute;pointer-events:none}
.doodle{position:absolute;overflow:visible;color:var(--text);animation:float 5s ease-in-out infinite}
.doodle .f{fill:var(--c,var(--sun));stroke:currentColor;stroke-width:3;stroke-linejoin:round}
.doodle .s{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.doodle .t{fill:currentColor;font-family:var(--display);font-weight:800}
.doodle:nth-child(2){animation-delay:-1.6s;animation-duration:6s}
.doodle:nth-child(3){animation-delay:-3.2s;animation-duration:7s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(6deg)}}
.d-sun{--c:var(--sun)}.d-coin{--c:var(--gold)}.d-star{--c:var(--accent)}.d-star.sun{--c:var(--sun)}.d-star.sky{--c:var(--sky)}.d-star.mint{--c:var(--mint)}.d-squig{--c:none}

/* ---------- Headings ---------- */
.page-heading,.dash-head{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin-bottom:26px}
.page-heading h1,.dash-head h1{margin-top:8px;font-size:clamp(36px,9.6vw,64px);line-height:1}
.dash-head h1{font-size:clamp(38px,10.4vw,76px);line-height:1}
.outline{--fill:var(--bg)}
.page-heading p,.dash-head p{max-width:36em;margin-top:12px;color:var(--muted);font-size:16px}
.page-heading .right{display:flex;flex-wrap:wrap;gap:10px}
.page-heading .eyebrow{display:none}
.page-heading h1:has(.admin-tag){font-size:clamp(26px,5vw,40px)}
.dash-head>div:not(.doodles),.page-heading>div:not(.doodles){position:relative;z-index:1}
.doodles-hero{top:-6px;right:0;width:150px;height:130px}
.doodles-hero .d-sun{top:0;right:6px;width:72px}
.doodles-hero .d-coin{top:66px;right:78px;width:46px}
.doodles-hero .d-star{top:84px;right:0;width:34px;--c:var(--lilac)}
.doodles-page{top:0;right:0;width:110px;height:80px}
.doodles-page .d-star{top:4px;right:56px;width:44px}
.doodles-page .d-squig{top:40px;right:0;width:64px}
.page-heading:has(.right) .doodles-page,body[data-page="admin"] .doodles{display:none}
@media(max-width:600px){
  .doodles-hero{top:-14px;right:-6px;transform:scale(.72);transform-origin:top right}
  .doodles-page{transform:scale(.7);transform-origin:top right}
}
.section-heading{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px;margin:46px 0 18px}
.section-heading h2{font-size:clamp(22px,4.4vw,30px)}
.admin-tag{display:inline-block;margin-left:8px;padding:3px 9px;border:2px solid var(--text);border-radius:99px;font-family:var(--font);font-size:12px;font-weight:800;letter-spacing:0;vertical-align:middle}

/* ---------- Wallet: a sunny card ---------- */
.vault{position:relative;display:grid;margin-top:22px;border:2px solid var(--text);border-radius:var(--r-lg);background:var(--sun);color:var(--text);box-shadow:6px 6px 0 var(--signal);--money:var(--text);--line:#2b1d1229}
.vault>.sticker{position:absolute;z-index:2;top:-16px;right:18px;--tilt:4deg}
.wallet-main{position:relative;padding:24px 20px}
.vault .label{color:var(--ink-2)}
.wallet-balance{display:block;margin:12px 0 18px;font-family:var(--display);font-size:clamp(54px,15.5vw,108px);font-weight:800;line-height:.95;letter-spacing:-.045em;color:var(--text)}
.payout-meter{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;max-width:440px}
.payout-meter i{height:12px;border-radius:4px;background:#2b1d121f}
.payout-meter i.on{background:var(--signal);box-shadow:inset 0 0 0 1.5px var(--text);animation:seg-on .3s var(--spring) calc(.2s + var(--i)*70ms) both}
@keyframes seg-on{from{background:#2b1d121f;transform:scaleY(.4)}}
.wallet-note{margin-top:12px;color:var(--ink-2);font-size:14px;font-weight:600}
.wallet-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.wallet-stats{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:2px solid var(--text);border-radius:0 0 18px 18px;background:#fffdf880}
.wallet-stats>div{min-width:0;padding:16px 14px}
.wallet-stats>div+div{border-left:2px solid var(--text)}
.wallet-stats dt{color:var(--ink-2);font-size:12px;font-weight:700}
.wallet-stats dd{margin:6px 0 0;font-family:var(--display);font-size:clamp(17px,4.8vw,24px);font-weight:800;line-height:1.05;letter-spacing:-.03em;white-space:nowrap}
.wallet-stats small{display:block;margin-top:6px;color:var(--ink-2);font-family:var(--font);font-size:12px;font-weight:500;letter-spacing:0;line-height:1.35;white-space:normal}
.wallet-stats .level-track{background:#2b1d121f}
@media(min-width:900px){
  .vault{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .wallet-main{padding:32px}
  .vault>.sticker{right:auto;left:28px;--tilt:-3deg}
  .wallet-stats{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--text);border-radius:0 18px 18px 0}
  .wallet-stats>div{padding:20px 24px}
  .wallet-stats>div+div{border-left:0;border-top:2px solid var(--text)}
}

/* ---------- First run & tips ---------- */
.first-run-guide{position:relative;margin-bottom:24px;padding:26px 20px;border:2px solid var(--text);border-radius:var(--r-lg);background:var(--s1);box-shadow:5px 5px 0 var(--text)}
.first-run-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.first-run-heading h1{margin:10px 0 14px;font-size:clamp(32px,7.6vw,60px);line-height:1}
.first-run-heading h1 span{--fill:var(--s1)}
.first-run-heading p{max-width:40em;color:var(--muted)}
.onboarding-dismiss{flex:none;padding:6px 0;border:0;background:none;color:var(--muted);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.first-run-steps{display:grid;gap:10px;margin:24px 0;padding:0;list-style:none}
.first-run-steps li{display:flex;align-items:flex-start;gap:12px;padding:14px;border:2px solid var(--text);border-radius:var(--r);background:var(--s1)}
.first-run-steps strong{display:block;font-size:15px}
.first-run-steps li>div>span{display:block;margin-top:2px;color:var(--muted);font-size:13px}
.first-run-number{flex:none;display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--text);border-radius:50%;background:var(--sun);font-family:var(--display);font-weight:800;font-size:13px}
.first-run-steps li:nth-child(2) .first-run-number{background:var(--sky)}
.first-run-steps li:nth-child(3) .first-run-number{background:var(--mint)}
.first-run-footer{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.first-run-footer span{color:var(--muted);font-size:14px}
@media(min-width:720px){.first-run-guide{padding:34px}.first-run-steps{grid-template-columns:repeat(3,1fr)}}
.first-run-tip{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin:0 0 22px;padding:14px 16px;border:2px solid var(--text);border-radius:var(--r);background:var(--s1)}
.first-run-tip>div{flex:1 1 220px;min-width:0}
.first-run-tip strong{display:block;font-size:15px}
.first-run-tip>div>span{display:block;color:var(--muted);font-size:13px}
.first-run-tip>.first-run-number{background:var(--accent)}
.location-pin{flex:none;display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--text);border-radius:50%;background:var(--sky)}
.location-pin .ui-icon{width:18px;height:18px}
.location-card .primary-btn{margin-left:auto}
.location-card.is-problem{background:var(--s2);border-color:var(--signal-ink)}
.location-card.is-problem .location-pin{background:var(--apricot)}
.location-card b{color:var(--text)}
.location-help{margin-top:10px;font-size:13px;color:var(--ink-2)}
.location-help summary{cursor:pointer;font-weight:700;color:var(--signal-ink)}
.location-help ol{margin:8px 0;padding-left:20px;display:grid;gap:6px}
.location-help small{display:block;margin-top:6px;color:var(--muted)}
.location-help .secondary-btn{margin-top:4px}
.campaign-card.is-locked .campaign-art{filter:grayscale(.55)}
.campaign-card.is-locked .card-play{display:none}
.campaign-art[data-play]{cursor:pointer}
.campaign-card.is-locked .campaign-meta span:first-child{color:var(--signal-ink);font-weight:700}
.locked-note{display:block;padding:12px 0;color:var(--muted);font-size:13px}
@media(max-width:520px){.location-card .primary-btn{width:100%;margin-left:0}}

/* ---------- Filters ---------- */
.filter-row{display:flex;gap:8px;margin:0 -16px 22px;padding:2px 16px 6px;overflow-x:auto;scrollbar-width:none}
.filter-row::-webkit-scrollbar{display:none}
.filter-chip{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px 0 6px;border:2px solid var(--line-2);border-radius:99px;background:var(--s1);color:var(--ink-2);font-size:14px;font-weight:700;white-space:nowrap}
.filter-chip .ui-icon{box-sizing:content-box;width:16px;height:16px;padding:5px;border-radius:50%;background:var(--chip,var(--s2));color:var(--text)}
.filter-chip:nth-child(2){--chip:var(--apricot)}.filter-chip:nth-child(3){--chip:var(--sky)}.filter-chip:nth-child(4){--chip:var(--lilac)}.filter-chip:nth-child(5){--chip:var(--mint)}.filter-chip:nth-child(6){--chip:var(--sun)}
.filter-chip:hover{border-color:var(--text);color:var(--text)}
.filter-chip.active{border-color:var(--text);background:var(--chip,var(--sun));color:var(--text);box-shadow:2px 2px 0 var(--text)}
.filter-chip.active .ui-icon{background:var(--s1)}
/* Category icons are two-tone: a light fill inside the candy circle, the chip's candy colour once selected. */
.filter-chip .ui-icon[class*=cat-]{width:19px;height:19px;padding:4px;stroke-width:2.1}.filter-chip .ui-icon .f{fill:var(--s1)}.filter-chip.active .ui-icon .f{fill:var(--chip,var(--sun))}.filter-chip .ui-icon .k{fill:currentColor}
@media(min-width:768px){.filter-row{flex-wrap:wrap;margin:0 0 26px;padding:0;overflow:visible}}

/* ---------- Campaign cards ---------- */
.campaign-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:640px){.campaign-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.campaign-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.campaign-card{display:flex;flex-direction:column;min-width:0;border:2px solid var(--text);border-radius:var(--r-lg);background:var(--s1);overflow:hidden;transition:transform .25s var(--spring),box-shadow .25s var(--spring)}
.campaign-card:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--text)}
.campaign-art{position:relative;aspect-ratio:16/9;border-bottom:2px solid var(--text);background:var(--art,var(--s3));overflow:hidden}
.campaign-art.coral{--art:var(--apricot)}.campaign-art.blue{--art:var(--sky)}.campaign-art.yellow{--art:var(--sun)}
.campaign-art.green{--art:var(--mint)}.campaign-art.lilac{--art:var(--lilac)}.campaign-art.purple{--art:var(--lilac)}
.card-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.art-label{position:absolute;z-index:1;left:16px;right:16px;bottom:14px;color:var(--text);font-family:var(--display);font-size:clamp(20px,6vw,26px);font-weight:800;line-height:1;letter-spacing:-.03em}
.campaign-badge{position:absolute;z-index:2;top:12px;left:12px;max-width:calc(100% - 110px);overflow:hidden;padding:4px 10px;border:2px solid var(--text);border-radius:99px;background:var(--s1);color:var(--text);font-size:12px;font-weight:700;white-space:nowrap;text-overflow:ellipsis}
.reward-chip{position:absolute;z-index:2;top:11px;right:14px;padding:4px 10px;border:2px solid var(--text);border-radius:10px;background:var(--gold);color:var(--text);font-family:var(--display);font-size:15px;font-weight:800;box-shadow:3px 3px 0 var(--text);transform:rotate(3deg)}
.card-play{position:absolute;z-index:2;left:50%;top:50%;display:grid;place-items:center;width:52px;height:52px;padding-left:3px;border:2px solid var(--text);border-radius:50%;background:var(--s1);color:var(--text);transform:translate(-50%,-50%);transition:background .15s,transform .25s var(--spring)}
.card-play svg{width:18px;height:18px;fill:currentColor}
.campaign-card:hover .card-play{background:var(--signal);transform:translate(-50%,-50%) scale(1.08)}
.campaign-art:has(.art-label) .card-play{display:none}
.campaign-body{display:flex;flex-direction:column;flex:1;padding:16px}
.campaign-brand{color:var(--muted);font-size:13px;font-weight:700}
.campaign-title{margin:4px 0 12px;font-size:19px;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.campaign-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:16px;color:var(--muted);font-size:13px;font-weight:500}
.campaign-meta span{display:inline-flex;align-items:center;gap:6px}
.campaign-meta .ui-icon{width:15px;height:15px}
.campaign-foot{margin-top:auto}
/* Referral share link under "Watch & earn"; a card opened from someone's share link gets a sunny ring. */
.card-share{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:8px;padding:8px;border:0;background:none;color:var(--signal-ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.card-share:hover{text-decoration:underline}
.card-share .ui-icon{width:14px;height:14px}
.campaign-card.is-shared{box-shadow:0 0 0 4px var(--sun),5px 5px 0 var(--text)}
.earn-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:calc(100% - 3px);min-height:50px;margin:0 3px 3px 0;padding:0 16px;
  border:2px solid var(--text);border-radius:var(--r);background:var(--text);color:var(--bg);font-weight:800;font-size:15px;box-shadow:3px 3px 0 var(--signal);transition:transform .25s var(--spring),box-shadow .25s var(--spring)}
.earn-btn:hover{background:#3d2b1c}
.earn-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--signal)}
.earn-btn:disabled{opacity:.6;cursor:progress}
.btn-arrow{display:inline-flex}
.btn-arrow .ui-icon{width:18px;height:18px;stroke-width:2.3}
.reward-amount{display:none}
.empty-state{position:relative;grid-column:1/-1;display:grid;justify-items:center;gap:6px;padding:44px 20px;border:2px dashed var(--line-2);border-radius:var(--r-lg);background:var(--s1);color:var(--muted);text-align:center}
.empty-state strong{color:var(--text);font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.02em}

/* ---------- Earnings ---------- */
.stat-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:22px 0 0}
@media(min-width:640px){.stat-grid{grid-template-columns:repeat(3,1fr)}}
.stat-card{padding:18px 20px;border:2px solid var(--text);border-radius:var(--r-lg);background:var(--s1)}
.stat-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:14px;font-weight:600}
.stat-icon{display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--text);border-radius:50%;background:var(--s2);color:var(--text)}
.stat-icon .ui-icon{width:16px;height:16px;stroke-width:2.2}
.stat-card:nth-child(1) .stat-icon{background:var(--apricot)}.stat-card:nth-child(2) .stat-icon{background:var(--mint)}.stat-card:nth-child(3) .stat-icon{background:var(--sun)}
.stat-value{margin-top:10px;font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.035em}
.stat-note{margin-top:4px;color:var(--muted);font-size:13px}
.stat-note.positive{color:var(--ok);font-weight:600}
@media(max-width:639px){
  .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .stat-card{padding:12px}
  .stat-top{font-size:12px;line-height:1.3}
  .stat-icon{display:none}
  .stat-value{margin-top:6px;font-size:clamp(16px,4.6vw,20px)}
  .stat-note{font-size:11.5px;line-height:1.3}
}

/* ---------- Tables ---------- */
.table-wrap{max-width:100%;overflow-x:auto;border:2px solid var(--text);border-radius:var(--r-lg);background:var(--s1)}
.data-table{width:100%;min-width:600px;border-collapse:collapse;text-align:left}
.data-table th{padding:13px 16px;border-bottom:2px solid var(--text);background:var(--s2);color:var(--ink-2);font-size:13px;font-weight:700;white-space:nowrap}
.data-table td{padding:14px 16px;border-top:1.5px solid var(--line);color:var(--muted);font-size:14px;vertical-align:top}
.data-table tr:first-child td{border-top:0}
.data-table td strong{color:var(--text);font-weight:700}
.table-sub{display:block;margin-top:3px;color:var(--dim);font-size:12px}
.table-action{min-height:34px;margin:0 4px 4px 0;padding:0 12px;border:2px solid var(--text);border-radius:99px;background:var(--s1);color:var(--text);font-size:13px;font-weight:700}
.table-action:hover{background:var(--accent)}
.status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:var(--s2);color:var(--ink-2);font-size:12px;font-weight:700;white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status.approved,.status.paid,.status.live{background:#c9f2dc;color:#0d6b3c}
.status.pending,.status.review,.status.pending-review,.status.requested,.status.processing,.status.in-progress{background:#ffeba8;color:#7a4b00}
.status.rejected{background:#ffd9d6;color:#9e1f22}

/* ---------- Activity ---------- */
.activity-feed{border:2px solid var(--text);border-radius:var(--r-lg);background:var(--s1)}
.activity-row{display:flex;align-items:center;gap:14px;padding:14px 16px}
.activity-row+.activity-row{border-top:1.5px solid var(--line)}
.activity-mark{flex:none;display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--text);border-radius:50%;background:var(--s2);color:var(--text)}
.activity-mark .ui-icon{width:18px;height:18px;stroke-width:2.2}
.activity-mark.approved{background:var(--mint)}.activity-mark.paid{background:var(--sun)}.activity-mark.pending-review{background:var(--apricot)}.activity-mark.rejected{background:var(--s3)}
.activity-copy{flex:1;min-width:0;display:grid;gap:2px}
.activity-copy strong{font-size:15px;font-weight:700}
.activity-copy small{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;color:var(--muted);font-size:13px}
.activity-reward{flex:none;color:var(--money);font-family:var(--display);font-weight:800;letter-spacing:-.02em}
.activity-reward.out{color:var(--muted)}

/* ---------- Admin (calm console) ---------- */
.admin-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:26px}
@media(min-width:900px){.admin-stat-grid{grid-template-columns:repeat(4,1fr)}}
.admin-stat{padding:16px 18px;border:2px solid var(--text);border-radius:var(--r-lg);background:var(--s1)}
.admin-stat small{display:block;color:var(--muted);font-size:13px;font-weight:600}
.admin-stat strong{display:block;margin:8px 0 4px;font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.035em}
.admin-stat span{color:var(--dim);font-size:12px}
.admin-tabs{display:flex;gap:6px;margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.admin-tabs button{flex:none;padding:8px 16px;border:2px solid var(--line-2);border-radius:99px;background:var(--s1);color:var(--muted);font-size:14px;font-weight:700}
.admin-tabs button:hover{border-color:var(--text);color:var(--text)}
.admin-tabs button.active{border-color:var(--text);background:var(--text);color:var(--bg)}
.panel{padding:20px;border:2px solid var(--text);border-radius:var(--r-lg);background:var(--s1)}
.panel h3{margin-bottom:14px;font-size:17px}
.panel-sub{margin:-8px 0 14px;color:var(--muted);font-size:13px}
.panel .table-wrap{border-width:1.5px;border-color:var(--line-2)}

/* ---------- Modals & forms ---------- */
#modalRoot{position:relative;z-index:50}
.modal-backdrop{position:fixed;inset:0;z-index:1;display:grid;place-items:center;padding:16px;background:#2b1d1299;overflow-y:auto}
.modal{width:min(480px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:2px solid var(--text);border-radius:var(--r-lg);background:var(--s1);box-shadow:6px 6px 0 var(--text);animation:rise .25s var(--spring)}
.modal.wide{width:min(680px,100%)}
@keyframes rise{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.modal-head h2{margin-top:6px;font-size:22px}
.modal-head p{margin-top:6px;color:var(--muted);font-size:14px}
.close-modal{flex:none;display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--text);border-radius:50%;background:var(--s1);color:var(--text);font-size:20px;line-height:1}
.close-modal:hover{background:var(--accent)}
.modal-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:22px}
@media(max-width:520px){.modal{padding:20px}.modal-actions>*{flex:1 1 auto}}
.field-label{display:block;margin:16px 0 6px;color:var(--text);font-size:14px;font-weight:700}
.field-label small{color:var(--muted);font-weight:500}
.text-field,.select-field{width:100%;min-height:50px;padding:12px 14px;border:2px solid var(--line-2);border-radius:var(--r);background:var(--s1);color:var(--text);font-size:16px}
.text-field::placeholder{color:var(--dim)}
.text-field:hover{border-color:var(--muted)}
.text-field:focus{outline:none;border-color:var(--text);box-shadow:3px 3px 0 var(--accent)}
select.text-field{appearance:none;padding-right:38px;background:var(--s1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%232b1d12' stroke-width='1.8'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center}
.campaign-budget-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.campaign-budget-fields>.text-field{margin-top:8px}
@media(max-width:400px){.campaign-budget-fields{grid-template-columns:1fr}}
.question-editor,.campaign-offer-fields{margin:20px 0 0;padding:4px 16px 16px;border:2px solid var(--line-2);border-radius:var(--r)}
.question-editor legend,.campaign-offer-fields legend{padding:0 6px;color:var(--ink-2);font-size:13px;font-weight:800}
.campaign-offer-fields legend.field-label{margin:0}
.notice{margin:16px 0 0;padding:12px 14px;border-radius:var(--r);background:var(--s2);color:var(--ink-2);font-size:13.5px;line-height:1.5}
.notice.is-success,.truecaller-success-message{background:#c9f2dc;color:#0d4f2d}
.notice.is-alert{padding:14px 16px;border:2px solid var(--err);background:#ffe4dd;color:#5c1013;font-size:14.5px;box-shadow:3px 3px 0 var(--err);animation:notice-alert-in .35s var(--spring)}
.notice.is-alert:not([hidden]){display:flex;gap:10px;align-items:flex-start}
.notice.is-alert strong{display:block;margin-bottom:2px;color:#8f1b1f;font-size:15px}
.notice-icon{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:50%;background:var(--err);color:#fff;font-weight:900;font-size:15px;line-height:1}
@keyframes notice-alert-in{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.notice.is-alert{animation:none}}
.reward-preview{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;margin:18px 0 0;padding:14px 16px;border:2px solid var(--text);border-radius:var(--r);background:var(--sun)}
.reward-preview>span{color:var(--ink-2);font-size:13px;font-weight:600}
.reward-preview>strong{grid-column:2;grid-row:1/span 2;font-family:var(--display);font-size:26px;font-weight:800}
.reward-preview>small{color:var(--ink-2);font-size:12px}
.draft-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 0}
.draft-detail-grid>div{display:grid;gap:6px;padding:14px;border-radius:var(--r);background:var(--s2)}
.draft-detail-grid span{color:var(--muted);font-size:12px;font-weight:700}
.draft-detail-grid strong{font-family:var(--display);font-size:18px;font-weight:800}
/* Campaign performance (admin) */
.perf-notice{margin:0 0 14px;background:#ffeba8;color:#7a4b00}
.perf-table{min-width:980px}
.perf-table td{white-space:nowrap}
.perf-table td:first-child{white-space:normal;min-width:200px}
.perf-table .status{margin-top:4px}
.perf-kpis{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:6px}
.perf-kpis small{color:var(--dim);font-size:12px;font-weight:600}
@media(min-width:640px){.perf-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
.perf-h{margin:22px 0 10px;font-size:15px}
.perf-funnel,.perf-reactions{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.perf-funnel li,.perf-reactions li{display:grid;grid-template-columns:minmax(90px,130px) 1fr auto;align-items:center;gap:10px;font-size:13px}
.perf-funnel li{grid-template-columns:minmax(100px,130px) 1fr 44px 52px}
.perf-reactions li{grid-template-columns:22px minmax(70px,120px) 1fr 44px}
.perf-funnel small{color:var(--dim);font-size:12px;font-weight:700;text-align:right}
.perf-funnel strong,.perf-reactions strong{text-align:right;font-variant-numeric:tabular-nums}
.perf-label{overflow:hidden;color:var(--ink-2);font-weight:700;white-space:nowrap;text-overflow:ellipsis}
.perf-bar{height:12px;border:1.5px solid var(--text);border-radius:99px;background:var(--s2);overflow:hidden}
.perf-bar i{display:block;height:100%;background:var(--signal)}
.perf-funnel li:nth-child(2) .perf-bar i{background:var(--sun)}
.perf-funnel li:nth-child(3) .perf-bar i{background:var(--mint)}
.perf-funnel li:nth-child(4) .perf-bar i{background:var(--sky)}
.perf-reactions .perf-bar i{background:var(--lilac)}
.perf-bar.low i{background:var(--err)}
/* Yes vs No on the question after the reward. */
.perf-ask li{grid-template-columns:22px minmax(40px,70px) 1fr 52px 32px}
.perf-ask small{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.perf-ask li:first-child .perf-bar i{background:var(--mint)}
.perf-ask li:last-child .perf-bar i{background:var(--line-2)}
.perf-q{font-weight:900}
.perf-questions .perf-reactions li{grid-template-columns:28px minmax(0,1fr) minmax(60px,30%) 44px}
.perf-split{display:grid;gap:4px 24px}
@media(min-width:640px){.perf-split{grid-template-columns:1fr 1fr}}
.perf-list{display:grid;gap:6px;margin:0}
.perf-list div{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:var(--r);background:var(--s2);font-size:13px}
.perf-list dt{color:var(--muted);font-weight:700}
.perf-list dd{margin:0;color:var(--text);font-weight:800}
.perf-empty{margin:8px 0 0;color:var(--dim);font-size:12.5px}
.perf-panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.perf-panel-head h3{margin:0}
/* Clickable metrics → "Who did what" list */
.perf-kpis>.perf-kpi{display:grid;gap:6px;align-content:start;padding:14px;border:2px solid transparent;border-radius:var(--r);background:var(--s2);color:inherit;font:inherit;text-align:left;cursor:pointer}
.perf-kpi:hover,.perf-kpi:focus-visible{border-color:var(--text)}
.perf-kpi em{color:var(--ink-2);font-size:11.5px;font-style:normal;font-weight:800}
.perf-click{margin:0 -6px;padding:4px 6px;border-radius:10px;cursor:pointer}
.perf-click:hover,.perf-click:focus-visible{background:var(--s2)}
.perf-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.perf-chip{min-height:34px;padding:0 12px;border:2px solid var(--text);border-radius:99px;background:var(--s1);color:var(--text);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.perf-chip b{margin-left:4px;font-variant-numeric:tabular-nums}
.perf-chip:hover{background:var(--accent)}
.perf-chip.active{background:var(--text);color:var(--s1)}
.perf-people{min-width:860px}
.perf-people td{white-space:nowrap}
.perf-people .status{margin-top:4px}
.perf-emoji{font-size:20px}
.perf-cell{display:block;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.perf-cell:hover strong,.perf-cell:focus-visible strong{text-decoration:underline;text-underline-offset:3px}
.users-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.users-tools .text-field{width:min(260px,100%);margin:0}
.users-count{font-family:var(--font);letter-spacing:0;font-weight:500}
.users-table td{vertical-align:top}
.users-table .upi-flag{display:block;margin-top:3px;font-size:12px}

/* ---------- Toasts ---------- */
.toast-root{position:fixed;z-index:60;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));display:grid;justify-items:center;gap:8px;pointer-events:none}
.toast{max-width:420px;padding:12px 16px;border:2px solid var(--text);border-radius:var(--r);background:var(--s1);color:var(--text);font-size:14px;font-weight:700;box-shadow:4px 4px 0 var(--signal);animation:rise .25s var(--spring)}
@media(min-width:768px){.toast-root{left:auto;right:24px;bottom:24px;justify-items:end}}
.toast.is-shaking{animation:toast-shake .4s var(--ease)}
@keyframes toast-shake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}

/* ---------- Account / Truecaller ---------- */
.truecaller-mark{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#0a84ff;color:#fff;font-size:12px;font-weight:800}
.truecaller-account-status{display:flex;align-items:center;gap:12px;margin:4px 0 10px;padding:14px;border:2px solid var(--line-2);border-radius:var(--r);background:var(--s2)}
.truecaller-account-status.is-verified{border-color:var(--ok);background:#e6f8ee}
.truecaller-status-mark{flex:none;display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--text);border-radius:50%;background:var(--s1);font-weight:800}
.truecaller-account-status.is-verified .truecaller-status-mark{background:var(--mint)}
.truecaller-account-status strong{display:block;font-size:15px}
.truecaller-account-status span:not(.truecaller-status-mark){display:block;color:var(--muted);font-size:13px}

/* ---------- Sign in ---------- */
body.auth-gate #modalRoot .modal-backdrop{align-items:center;padding:24px;background:radial-gradient(#2b1d1218 1.6px,transparent 1.7px) 0 0/22px 22px,var(--bg)}
.modal.auth-modal{width:min(440px,100%);max-height:none;padding:0;border-radius:24px;overflow:hidden;box-shadow:8px 8px 0 var(--text)}
/* One card: brand, a short sunny promise, then Google first. Email and Truecaller are one tap away. */
.auth-simple{display:grid;padding:24px 24px 20px;background:var(--s1)}
.auth-top{display:grid;gap:12px}
.auth-top .hello{font-size:16px}
.auth-wave{display:inline-block;font-style:normal;transform-origin:70% 80%;animation:wave 1.6s ease-in-out .6s 2}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-10deg)}}
.auth-hero{position:relative;isolation:isolate;overflow:hidden;margin:18px -24px 22px;padding:22px 96px 22px 24px;border-block:2px solid var(--text);background:var(--sun)}
.auth-hero:has(.invite-card){padding-right:24px}
/* Slow sunburst behind the coin, like the reward screen */
.auth-rays{position:absolute;top:-69px;right:-69px;z-index:-1;width:240px;height:240px;background:repeating-conic-gradient(#fffdf8a6 0deg 8deg,transparent 8deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%);animation:sun-turn 40s linear infinite}
.auth-hero:has(.invite-card) .auth-rays{top:auto;bottom:-120px;right:-120px}
.doodles-auth{inset:0;z-index:-1}
.doodles-auth .d-star:nth-child(1){top:96px;right:48px;width:26px}
.doodles-auth .d-squig{top:134px;right:14px;width:50px}
.doodles-auth .d-star:nth-child(3){top:8px;right:94px;width:18px}
.auth-hero:has(.invite-card) .doodles-auth .d-star:nth-child(1){top:22px;right:20px}
.auth-hero:has(.invite-card) .doodles-auth .d-squig,.auth-hero:has(.invite-card) .doodles-auth .d-star:nth-child(3){display:none}
.auth-stickers{display:flex;flex-wrap:wrap;gap:10px 8px;margin:16px -72px 0 0}
.auth-stickers .sticker{font-size:11px;padding:5px 10px;box-shadow:2px 2px 0 var(--text)}
.auth-stickers .sticker:nth-child(1){--c:var(--mint);--tilt:-3deg;animation-delay:.35s}
.auth-stickers .sticker:nth-child(2){--c:var(--lilac);--tilt:2deg;animation-delay:.5s}
.auth-stickers .sticker:nth-child(3){--c:var(--sky);--tilt:-2deg;animation-delay:.65s}
.auth-hero h2{font-size:clamp(28px,7.6vw,34px);line-height:1.04}
.auth-hero .auth-promise-highlight{-webkit-text-stroke-width:3px}
.auth-hero .auth-coin{position:absolute;top:20px;right:20px;width:62px;height:62px;font-size:26px;transform:rotate(-10deg);animation:auth-bob 4s ease-in-out infinite}
@keyframes auth-bob{50%{transform:translateY(-6px) rotate(4deg)}}
#signInMessage{margin:0 0 14px}
.auth-form.is-entering{animation:rise .3s var(--spring)}
.auth-form h3{margin:8px 0 2px;font-size:22px}
/* Our styled Google button. When Google's script loads, its real button is laid over it invisibly (.google-host). */
.auth-buttons{display:grid;gap:14px}
.google-wrap{position:relative;animation:nudge .7s ease 2.6s}
.google-wrap:hover{animation:none}
@keyframes nudge{30%{transform:translateY(-5px)}55%{transform:translateY(0)}75%{transform:translateY(-2px)}}
.google-badge{position:absolute;top:-11px;right:14px;z-index:3;padding:3px 9px;border:2px solid var(--text);border-radius:99px;background:var(--mint);color:var(--text);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;transform:rotate(4deg);pointer-events:none;animation:sticker-in .5s var(--spring) .8s both}
/* Truecaller: as loud as Google, in its own blue. Android only — it doesn't work on iPhone. */
.tc-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:58px;border:2.5px solid var(--text);border-radius:var(--r);background:#0a84ff;color:#fff;font:inherit;font-size:17px;font-weight:800;box-shadow:5px 5px 0 var(--text);cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.tc-btn .truecaller-mark{width:24px;height:24px;background:#fff;color:#0a84ff;font-size:13px}
.tc-btn:hover{background:#0074e6}
.tc-btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--text)}
.tc-btn:disabled{opacity:.7;cursor:wait}
.auth-buttons .notice{margin:0}
.auth-caption{margin-top:14px;color:var(--muted);font-size:13px;font-weight:600;text-align:center}
/* Big faint doodles around the card, on screens with room for them */
.doodles-authbg{inset:0;z-index:0;opacity:.55}
.doodles-authbg .d-sun{top:12%;left:9%;width:120px}
.doodles-authbg .d-coin{bottom:14%;left:16%;width:80px}
.doodles-authbg .d-star{top:20%;right:11%;width:90px}
body.auth-gate #modalRoot .modal{position:relative;z-index:1}
@media(max-width:860px){.doodles-authbg{display:none}}
.google-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:58px;border:2.5px solid var(--text);border-radius:var(--r);background:#fff;color:var(--text);font:inherit;font-size:17px;font-weight:800;box-shadow:5px 5px 0 var(--text);cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.google-btn svg{width:24px;height:24px}
.google-btn:hover,.google-wrap:hover .google-btn{background:var(--s2)}
.google-btn:active,.google-wrap:active .google-btn{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--text)}
.google-btn:disabled{opacity:.6;cursor:wait}
.google-host{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;overflow:hidden;opacity:.01}
.google-host>div{transform:scale(var(--gsi-scale,1.3))}
.auth-links{display:grid;justify-items:center;gap:2px;margin-top:6px}
.auth-link{display:inline-flex;align-items:center;gap:8px;padding:8px;border:0;background:none;color:var(--ink-2);font:inherit;font-size:15px;font-weight:700;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;cursor:pointer}
.auth-link:hover{color:var(--text);text-decoration-color:var(--text)}
.auth-link .truecaller-mark{width:20px;height:20px;font-size:11px}
.auth-link:disabled{opacity:.6;cursor:wait}
.auth-back{justify-self:start;padding:4px 0;color:var(--muted);font-size:14px;text-decoration:none}
.auth-switch{margin-top:12px;color:var(--muted);font-size:14px;text-align:center}
.auth-switch .auth-link{padding:4px;font-size:14px}

.auth-promise-highlight{--fill:var(--sun)}
/* Outlined words: a fill drawn over the stroke hides the font's inner contour lines and the overlaps between letters. */
.outline,.first-run-heading h1 span,.auth-promise-highlight{color:var(--fill);-webkit-text-stroke:4px var(--text);paint-order:stroke fill;letter-spacing:.005em}
h2 .outline{-webkit-text-stroke-width:3px}
.auth-field{position:relative}
.auth-field-icon{position:absolute;left:14px;top:50%;width:18px;height:18px;color:var(--dim);transform:translateY(-50%);pointer-events:none}
.auth-field-icon svg,.auth-eye svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.auth-field:focus-within .auth-field-icon{color:var(--text)}
.auth-field .text-field{padding-left:44px}
.auth-field.has-eye .text-field{padding-right:50px}
.auth-eye{position:absolute;right:4px;top:50%;display:grid;place-items:center;width:42px;height:42px;padding:11px;border:0;border-radius:var(--r);background:none;color:var(--dim);transform:translateY(-50%)}
.auth-eye:hover{color:var(--text)}
.auth-eye[aria-pressed="true"]::after{content:"";position:absolute;width:20px;height:2px;background:currentColor;transform:rotate(-45deg)}
.auth-submit{width:calc(100% - 3px);min-height:54px;margin-top:24px;font-size:16px}
.auth-submit.is-loading{cursor:wait}
.auth-submit.is-loading .auth-submit-arrow{width:16px;height:16px;font-size:0;border:2.5px solid #2b1d1244;border-top-color:var(--text);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.auth-footnote{margin-top:20px;color:var(--dim);font-size:12px;text-align:center}
.auth-form .notice{margin-top:14px}
.auth-error-screen{position:fixed;inset:0;display:grid;align-content:center;justify-items:center;gap:12px;padding:32px;background:var(--bg);text-align:center}
.auth-error-screen .auth-brand{position:absolute;top:28px;left:28px}
.auth-error-screen h1{font-size:30px}
.auth-error-screen p{max-width:420px;color:var(--muted)}
@media(max-width:700px){
  body.auth-gate #modalRoot .modal-backdrop{align-items:start;padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
  .modal.auth-modal{border-radius:20px;box-shadow:5px 5px 0 var(--text)}
}

/* ---------- Coin (sign in and the campaign flow) ---------- */
.auth-coin,.cx-coin{display:grid;place-items:center;border:3px solid var(--text);border-radius:50%;color:#3b2a06;font-family:var(--display);font-weight:800;font-size:50px;line-height:1;
  background:radial-gradient(circle at 32% 26%,#fff6d0 0,#f7d57a 24%,#e9b949 52%,#c58f12 100%);
  box-shadow:inset 0 0 0 6px #ffffff40,inset -5px -7px 0 #0000001f,5px 5px 0 var(--text)}

/* ---------- Campaign journey ---------- */
html:has(#modalRoot.campaign-flow),body:has(#modalRoot.campaign-flow){overflow:hidden}
#modalRoot.campaign-flow .modal-backdrop{display:flex;align-items:stretch;padding:0;background:var(--bg);overflow:hidden}
#modalRoot.campaign-flow .modal{display:flex;flex-direction:column;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;padding:0;border:0;border-radius:0;background:var(--bg);box-shadow:none;overflow-y:auto;overscroll-behavior:contain;animation:none;transition:background .4s}
#modalRoot.campaign-flow .modal.campaign-experience:has(.cx-watch){overflow:hidden;background:#16100b}
/* Stage colours: the intro takes the campaign's category colour; results are sunny (earned) or soft apricot (missed). */
/* The ready screen uses a juicier take on the category colour than the cards do. */
.modal:has(.cx-intro.cat-coral){--stage:#ffa86b}.modal:has(.cx-intro.cat-blue){--stage:#8ccaff}.modal:has(.cx-intro.cat-yellow){--stage:#ffd23a}
.modal:has(.cx-intro.cat-green){--stage:#7fe0b2}.modal:has(.cx-intro.cat-lilac){--stage:#c9bfff}.modal:has(.cx-intro.cat-purple){--stage:#c4b8ff}
.modal:has(.cx-result.is-earned){--stage:var(--sun)}.modal:has(.cx-result.is-missed){--stage:var(--apricot)}
#modalRoot.campaign-flow .modal:has(.cx-intro),#modalRoot.campaign-flow .modal:has(.cx-result){background:var(--stage,var(--bg))}
.cx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Top bar */
.cx-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) clamp(16px,4vw,32px) 12px;background:inherit}
.cx-close{flex:none;display:grid;place-items:center;width:42px;height:42px;border:2px solid var(--text);border-radius:50%;background:var(--s1);color:var(--text);font-size:22px;line-height:1}
.cx-close:hover{background:var(--s2)}
.cx-brand{flex:1;min-width:0;overflow:hidden;color:var(--ink-2);font-size:14px;font-weight:700;white-space:nowrap;text-overflow:ellipsis}
.cx-pill{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border:2px solid var(--text);border-radius:99px;background:var(--s1);font-family:var(--display);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.cx-pill i{display:grid;place-items:center;width:24px;height:24px;border:2px solid var(--text);border-radius:50%;background:var(--gold);font-style:normal;font-size:11px}

/* Stage */
.cx-stage{flex:1;display:flex;flex-direction:column;width:100%;max-width:960px;margin:0 auto;padding:16px clamp(16px,4vw,32px) calc(28px + env(safe-area-inset-bottom));animation:cx-in .4s var(--ease) both}
@keyframes cx-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* The intro and reward glows are pinned to the screen (position:fixed) so their oversized rays never add scroll room.
   A moving parent would re-anchor them mid-animation, so these two screens fade in without the slide. */
.cx-intro,.cx-result.is-earned{animation-name:cx-fade}
@keyframes cx-fade{from{opacity:0}to{opacity:1}}
.cx-kicker{position:relative;margin:0}
.cx-cta{min-height:56px;padding:0 28px;font-size:16px}

/* 1. Ready */
.cx-intro{position:relative;isolation:isolate;align-items:center;justify-content:center;text-align:center}
/* A soft sunburst behind the coin: slow, faint rays plus a warm glow. */
.cx-intro::before{content:"";position:fixed;left:50%;top:30%;z-index:-1;width:160vmax;height:160vmax;
  background:radial-gradient(circle,#fffdf8d9 0,#fffdf866 9%,transparent 24%),repeating-conic-gradient(from 0deg,#fffdf859 0deg 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 40%);mask:radial-gradient(circle,#000 0,transparent 40%);
  transform:translate(-50%,-50%);animation:cx-rays 90s linear infinite;pointer-events:none}
.cx-intro .doodles{inset:0;z-index:-1}
.doodles-intro .d-star:nth-child(1){top:14%;left:9%;width:40px}
.doodles-intro .d-star:nth-child(2){top:24%;right:10%;width:30px}
.doodles-intro .d-squig{top:44%;right:5%;width:56px}
.d-star.white{--c:var(--s1)}.d-star.sun{--c:var(--sun)}
.modal:has(.cx-intro) .cx-top,.modal:has(.cx-result.is-earned) .cx-top{background:transparent}
/* Dark start button, matching the card's "Watch & earn", so it stands out on every category colour. */
.cx-intro .cx-cta{background:var(--text);color:var(--bg);box-shadow:4px 4px 0 var(--s1)}
.cx-intro .cx-cta:hover{background:#3d2b1c}
.cx-intro .cx-cta:active{box-shadow:0 0 0 var(--s1)}
.cx-coin-lg{width:104px;height:104px;margin:0 auto 22px;font-size:42px;animation:cx-float 4s ease-in-out infinite}
@keyframes cx-float{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-10px) rotate(-2deg)}}
.cx-reward-big{margin:8px 0 6px;font-family:var(--display);font-size:clamp(72px,22vw,140px);font-weight:900;line-height:.95;letter-spacing:-.05em}
.cx-title{max-width:34rem;margin:8px 0 24px;font-size:clamp(17px,2.4vw,20px);font-weight:700}
.cx-sponsor{margin:0 0 18px;padding:6px 14px;border:2px solid var(--text);border-radius:99px;background:var(--s1);box-shadow:2px 2px 0 var(--text);font-size:14px;font-weight:600}
.cx-sponsor b{font-weight:800}
/* Watch-closely line: drawn eyes that look around and blink, sitting straight on the stage. */
.cx-attention{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:22rem;margin:0 0 28px;font-size:16px;font-weight:700;line-height:1.35;text-align:center}
.cx-attention span{display:flex;flex-direction:column;gap:2px;color:var(--ink-2);font-size:15px;font-weight:500}
.cx-attention b{color:var(--text);font-family:var(--display);font-size:18px;font-weight:800;letter-spacing:-.02em}
.cx-eyes{flex:none;width:58px;height:32px;overflow:visible}
.cx-eyes ellipse{fill:var(--s1);stroke:var(--text);stroke-width:2}
.cx-eyes .pupil{fill:var(--text);animation:cx-look 4s var(--ease) infinite}
.cx-eyes .eye{transform-box:fill-box;transform-origin:center;animation:cx-blink 4s infinite}
@keyframes cx-look{0%,20%{transform:none}30%,45%{transform:translateX(-3px)}55%,70%{transform:translateX(3px) translateY(-1px)}80%,100%{transform:none}}
@keyframes cx-blink{0%,88%,100%{transform:none}92%{transform:scaleY(.1)}}
@media(prefers-reduced-motion:reduce){.cx-eyes .pupil,.cx-eyes .eye{animation:none}}
.cx-intro .cx-cta{min-width:min(100%,320px)}

/* 2. Watch — the player fills the window above a dark dock (messages, then controls). Nothing sits on the video. */
.cx-watch{flex:1 1 0;min-height:0;padding:0}
#modalRoot .cx-watch .cx-player{position:fixed;inset:0;z-index:6;display:flex;flex-direction:column;background:#000}
.cx-video{position:relative;flex:1 1 0;min-height:0;width:100%;background:#000}
.cx-video.is-done{box-shadow:inset 0 0 0 3px var(--sun)}
#modalRoot.campaign-flow .cx-video .campaign-video{display:block;width:100%;height:100%;object-fit:contain;background:#000;cursor:pointer}
.cx-paused{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border:0;background:#16100b8c;color:#fff8ec;font-size:15px;font-weight:700}
.cx-paused-icon{display:grid;place-items:center;width:78px;height:78px;padding:22px 20px 22px 25px;border:3px solid #fff8ec;border-radius:50%;background:var(--signal);color:#2b1d12;transition:transform .25s var(--spring)}
.cx-paused:hover .cx-paused-icon{transform:scale(1.07)}
.cx-paused-icon svg,.cx-ctrl svg{width:100%;height:100%;fill:currentColor}
.cx-ctrl svg .stroke,.cx-paused-icon svg .stroke{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cx-dock{flex:none;display:flex;flex-direction:column;gap:8px;padding:10px max(14px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));border-top:1.5px solid var(--line);background:var(--bg)}
.cx-slot{position:relative;display:grid;place-items:center}
.cx-slot>*{grid-area:1/1}
.cx-bubbles{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:46px}
/* Coaching messages under the video: a sun-tinted pill with a pulsing dot, readable at a glance without covering the ad. */
.cx-bubble{position:absolute;display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:8px 16px 8px 12px;border:1.5px solid #ffd84d59;border-radius:99px;background:#ffd84d1a;color:var(--text);font-size:15px;font-weight:700;line-height:1.25;text-align:left;animation:cx-bubble-in .35s var(--spring) both;transition:opacity .3s,transform .3s}
.cx-bubble::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--sun);animation:dot-pulse 1.6s ease-out infinite}
@keyframes dot-pulse{0%{box-shadow:0 0 0 0 #ffd84d99}100%{box-shadow:0 0 0 9px #ffd84d00}}
.cx-bubble.urgent{border-color:var(--sun);background:var(--sun);color:#2b1d12;font-weight:800}
.cx-bubble.urgent::before{background:#2b1d12}
.cx-bubble.leaving{opacity:0;transform:translateY(-8px)}
@keyframes cx-bubble-in{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
.cx-slot:has(.cx-unlock:not([hidden])) .cx-bubbles{display:none}
.cx-unlock{display:flex;align-items:center;gap:10px;width:min(100%,540px);animation:cx-in .35s var(--ease) both}
.cx-unlock .cx-cta{flex:1.6;min-width:0;padding:0 16px;color:#2b1d12;border-color:#fff8ec;box-shadow:3px 3px 0 #fff8ec;white-space:nowrap}
.cx-unlock .cx-ghost{border-color:#fff8ec;color:#fff8ec}
.cx-replay{flex:1;min-height:56px;padding:0 14px;white-space:nowrap}
.cx-replay>span:first-child{font-size:18px;line-height:1}
.cx-short{display:none}
.cx-bar{display:flex;align-items:center;gap:10px}
.cx-ctrl{flex:none;display:grid;place-items:center;width:42px;height:42px;padding:11px;border:1.5px solid var(--line-2);border-radius:50%;background:var(--s1);color:var(--text)}
.cx-ctrl:hover{background:var(--s2)}
.cx-ctrl[hidden]{display:none}
.cx-bar .cx-exit{width:42px;height:42px;border-width:1.5px;border-color:var(--line-2);background:var(--s1);color:var(--text)}
.cx-track{--p:0;--glow:0;position:relative;flex:1;min-width:40px;height:10px;margin:0 8px;border-radius:99px;background:var(--s3)}
.cx-track i{position:absolute;top:0;bottom:0;width:2px;background:var(--bg)}
.cx-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:var(--sun);transition:width .3s linear}
.cx-rider{position:absolute;top:50%;left:calc(14px + (100% - 28px)*var(--p));display:grid;place-items:center;width:30px;height:30px;border:2px solid #2b1d12;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,#fff6d0,#e9b949 50%,#c58f12);color:#3b2a06;font-size:12px;font-weight:800;transform:translate(-50%,-50%);transition:left .3s linear}
.cx-track.complete .cx-rider{animation:cx-pop .5s var(--spring)}
@keyframes cx-pop{50%{transform:translate(-50%,-50%) scale(1.4)}}
.cx-left{flex:none;min-width:48px;color:var(--muted);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.cx-player:fullscreen{width:100%;height:100%}
@media(max-width:480px){
  .cx-bar{flex-wrap:wrap;row-gap:8px}
  .cx-track{order:-1;flex:1 0 100%;margin:8px 4px 4px}
  .cx-left{margin-right:auto;text-align:left}
  .cx-bubble{font-size:14px}
}
@media(max-width:420px){.cx-long{display:none}.cx-short{display:inline}.cx-replay{flex:0 0 auto}.cx-unlock .cx-cta{flex:1;font-size:15px}}

/* 3. Questions */
.cx-quiz{max-width:640px;justify-content:center;gap:20px}
.cx-quiz-head{display:flex;flex-direction:column;align-items:center;gap:12px}
/* Back to the ad from a question; answers already picked stay picked. */
.cx-rewatch{align-self:center;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:2px solid var(--text);border-radius:99px;background:var(--s1);color:var(--text);font-size:14px;font-weight:800;box-shadow:2px 2px 0 var(--text);transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.cx-rewatch svg{width:14px;height:14px;fill:currentColor}
.cx-rewatch:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--text)}
.cx-dots{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.cx-dots li{width:34px;height:8px;border-radius:99px;background:var(--s3)}
.cx-dots li.done{background:var(--text)}
.cx-dots li.current{background:var(--signal)}
#modalRoot.campaign-flow #quizForm.cx-question{width:100%;margin:0}
.cx-question fieldset{display:grid;gap:10px;margin:0;padding:0;border:0}
.cx-question legend{width:100%;margin:0 0 14px;padding:0;text-align:center}
.cx-question h2{font-size:clamp(22px,5vw,34px);font-weight:700;line-height:1.15}
.cx-answer{position:relative;display:flex;align-items:center;gap:14px;min-height:62px;padding:12px 14px;border:2px solid var(--line-2);border-radius:16px;background:var(--s1);font-size:16px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s,opacity .15s,transform .25s var(--spring)}
.cx-answer:hover{border-color:var(--text)}
.cx-answer:active{transform:scale(.98)}
.cx-answer input{position:absolute;opacity:0;pointer-events:none}
.cx-answer:has(input:focus-visible){outline:3px solid var(--signal);outline-offset:3px}
.cx-letter{flex:none;display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--text);border-radius:50%;background:var(--s2);font-family:var(--display);font-weight:800;font-size:13px}
.cx-answer-text{flex:1;line-height:1.35}
.cx-lock{flex:none;padding:4px 10px;border-radius:99px;background:var(--text);color:var(--bg);font-size:12px;font-weight:800;opacity:0;transform:scale(.85);transition:opacity .15s,transform .25s var(--spring)}
.cx-answer.is-picked{border-color:var(--text);background:var(--sun);box-shadow:3px 3px 0 var(--text)}
.cx-answer.is-picked .cx-letter{background:var(--s1)}
.cx-answer.is-picked .cx-lock{opacity:1;transform:none}
.cx-question.has-pick .cx-answer:not(.is-picked){opacity:.6}
.cx-question.has-pick .cx-answer:not(.is-picked):hover{opacity:1}
.cx-quiz-foot{display:flex;align-items:center;justify-content:space-between;min-height:56px}
.cx-back{padding:12px 4px;border:0;background:none;color:var(--muted);font-weight:700}
.cx-back:hover{color:var(--text)}
.cx-need{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:14px;font-weight:600}
.cx-need .ui-icon{width:16px;height:16px}

/* 4. Checking */
.cx-checking{align-items:center;justify-content:center;text-align:center}
.cx-checking h2{margin:28px 0 8px;font-size:clamp(24px,5vw,34px)}
.cx-checking p{color:var(--muted)}
.cx-coin-spin{width:92px;height:92px;font-size:40px;animation:cx-spin 1.1s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes cx-spin{to{transform:rotateY(360deg)}}

/* 5. Result — the one loud moment */
.cx-result{position:relative;isolation:isolate;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.cx-result.is-earned::before{content:"";position:fixed;left:50%;top:34%;width:180vmax;height:180vmax;z-index:-1;
  background:repeating-conic-gradient(from 0deg,#fffdf880 0deg 7deg,transparent 7deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 45%);mask:radial-gradient(circle,#000 0,transparent 45%);
  transform:translate(-50%,-50%);animation:cx-rays 40s linear infinite}
@keyframes cx-rays{to{transform:translate(-50%,-50%) rotate(360deg)}}
.cx-confetti{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.cx-glow{position:absolute;left:50%;top:34%;width:440px;height:440px;max-width:110vw;border-radius:50%;background:radial-gradient(circle,#fffdf8cc,transparent 65%);transform:translate(-50%,-50%);pointer-events:none}
.cx-coin-flip{position:relative;width:120px;height:120px;margin-bottom:24px;font-size:52px;animation:cx-flip .9s var(--ease) both}
@keyframes cx-flip{0%{opacity:0;transform:scale(.3) rotateY(-540deg)}70%{opacity:1;transform:scale(1.08) rotateY(15deg)}100%{transform:none}}
.cx-coin-dim{width:84px;height:84px;margin-bottom:22px;font-size:36px;filter:saturate(.3)}
.cx-result .doodles{inset:0;z-index:-1}
.cx-result .d-star{width:44px}
.cx-result .d-star:nth-child(1){top:16%;left:12%}
.cx-result .d-star:nth-child(2){top:24%;right:12%;width:34px}
.cx-result h2{position:relative;margin:12px 0 14px;font-size:clamp(32px,8vw,64px);line-height:1}
.cx-amount{color:var(--signal-ink)}
.cx-result.is-missed h2{font-size:clamp(24px,5.4vw,38px)}
.cx-score{position:relative;display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;padding:5px 12px;border:2px solid var(--text);border-radius:99px;background:var(--mint);font-size:13px;font-weight:800}
.cx-fine{position:relative;max-width:26rem;margin-bottom:28px;color:var(--ink-2);font-size:15px;font-weight:500}
.cx-result-actions{position:relative;z-index:4;display:flex;flex-direction:column;align-items:stretch;gap:10px;width:min(100%,340px)}
.cx-result-actions .cx-ghost{background:#fffdf866}
.cx-share-big{min-height:66px;font-size:19px;box-shadow:5px 5px 0 var(--text)}
.cx-share-note{margin:-2px 0 6px;color:var(--ink-2);font-size:13px;font-weight:600}
.cx-another{min-height:46px;align-self:center;padding:0 20px;font-size:14px}

/* Advertiser offer at the reward moment */
.cx-offer{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;width:min(100%,420px);margin:0 0 18px;padding:14px 18px;border:2px solid var(--text);border-radius:var(--r-lg);background:var(--s1);box-shadow:4px 4px 0 var(--text);animation:cx-in .45s var(--ease) both}
.cx-offer.is-earned{animation-delay:.35s}
.cx-offer-thanks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;color:var(--muted);font-size:14px}
.cx-offer-thanks b{color:var(--text)}
/* "Yes / No": a one-tap question; the sponsor's line and link appear only after a yes. */
.cx-ask-wrap{display:flex;align-items:center;gap:14px;width:100%;text-align:left}
.cx-ask-wrap:not(:has(.cx-product)){justify-content:center;text-align:center}
.cx-ask-wrap:not(:has(.cx-product)) .cx-ask-row{justify-content:center}
.cx-ask-body{display:flex;flex-direction:column;gap:8px;min-width:0}
/* The product itself: the advertiser's image, or a still from the ad. */
.cx-product{flex:none;width:76px;height:76px;border:2px solid var(--text);border-radius:var(--r);background:var(--s2);object-fit:cover;box-shadow:3px 3px 0 var(--text)}
img.cx-product{object-position:center 55%}
.cx-ask{margin:0;color:var(--text);font-family:var(--display);font-size:16px;font-weight:700;line-height:1.3;text-wrap:balance}
.cx-ask-row{display:flex;gap:8px}
.cx-yes,.cx-no{min-height:42px;padding:0 18px;border:2px solid var(--text);border-radius:var(--r);font-size:15px;font-weight:800;transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.cx-yes{background:var(--sun);color:var(--text);box-shadow:3px 3px 0 var(--text)}
.cx-yes:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--text)}
.cx-no{border-color:var(--line-2);background:transparent;color:var(--muted);font-weight:700}
.cx-yes{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.cx-thumb{display:inline-block;font-size:19px;line-height:1;transform-origin:30% 85%;animation:cx-thumb 1.8s var(--ease) .9s infinite}
.cx-yes:hover .cx-thumb,.cx-yes:focus-visible .cx-thumb{animation-duration:.9s}
@keyframes cx-thumb{0%,55%,100%{transform:none}65%{transform:translateY(-3px) rotate(-14deg) scale(1.15)}75%{transform:translateY(0) rotate(6deg)}85%{transform:rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){.cx-thumb{animation:none}}
.cx-ask-done{margin:0;color:var(--muted);font-size:14px;animation:cx-fade .3s var(--ease) both}
.cx-ask-done .cx-claim{min-height:36px;margin-top:6px;padding:0 14px;font-size:14px}
/* After a yes, Share steps back so the sponsor link is the clear action. */
.cx-share-big.is-quiet{min-height:48px;font-size:15px;background:var(--s1);box-shadow:3px 3px 0 var(--text)}
.cx-offer-next,.cx-perk{display:flex;flex-direction:column;align-items:center;gap:10px;animation:cx-reveal .45s var(--spring) both}
.cx-offer-next[hidden]{display:none}
@keyframes cx-reveal{from{opacity:0;transform:scale(.9) translateY(6px)}to{opacity:1;transform:none}}
/* Kept to two lines so the reward stays the star. */
.cx-offer-pitch{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;color:var(--ink-2);font-size:14px;line-height:1.4;text-wrap:balance}
/* The link is a dark button so Share & earn stays the one orange action. */
.cx-claim{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 20px;border:2px solid var(--text);border-radius:var(--r);background:var(--text);color:var(--s1);font-size:15px;font-weight:800;text-decoration:none;box-shadow:3px 3px 0 var(--signal)}
.cx-claim:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--signal)}
/* Sponsor gift: a wrapped ticket that wiggles now and then; opening it reveals the perk and code. */
.cx-gift{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;border:2px dashed var(--text);border-radius:var(--r);background:var(--lilac);color:var(--text);text-align:left;animation:cx-gift-wiggle 4s ease-in-out 1.2s infinite}
.cx-gift-copy{display:flex;flex-direction:column;gap:2px}
.cx-gift-copy b{font-family:var(--display);font-size:15px;line-height:1.25}
.cx-gift-copy small{color:var(--ink-2);font-size:13px;font-weight:700}
.cx-gift-icon{flex:none;width:34px;height:34px;fill:none;stroke:var(--text);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cx-gift-icon .f{fill:var(--sun)}
.cx-gift.is-opening{animation:cx-gift-open .5s var(--ease) both}
@keyframes cx-gift-wiggle{0%,86%,100%{transform:none}89%{transform:rotate(-2deg)}92%{transform:rotate(2deg)}95%{transform:rotate(-1deg)}}
@keyframes cx-gift-open{40%{transform:scale(1.05) rotate(-2deg)}100%{opacity:0;transform:scale(.6)}}
.cx-perk-text{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--display);font-size:16px;line-height:1.3;text-align:left}
.cx-perk-text .cx-gift-icon{width:30px;height:30px}
.cx-code{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 18px;border:2px dashed var(--text);border-radius:var(--r);background:var(--s2);color:var(--text)}
.cx-code span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:18px;font-weight:800;letter-spacing:.08em}
.cx-code small{color:var(--muted);font-size:12px;font-weight:700}
@media(prefers-reduced-motion:reduce){.cx-gift,.cx-gift.is-opening,.cx-offer-next,.cx-perk{animation:none}}
.cx-offer-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 2px;border:2px solid var(--text);border-radius:99px;background:var(--sun);font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums}
.cx-offer-coin{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--gold);font-size:11px;font-weight:900}
.cx-result:has(.cx-offer) .cx-coin-flip{width:88px;height:88px;font-size:40px;margin-bottom:16px}
@media(max-width:620px){
  .cx-result:has(.cx-offer) .cx-coin-flip{width:68px;height:68px;font-size:30px;margin-bottom:10px}
  .cx-result:has(.cx-offer) h2{font-size:clamp(26px,7.6vw,34px);margin:6px 0 10px}
}
@media(max-height:700px){.cx-result:has(.cx-offer) .cx-coin-flip,.cx-result:has(.cx-offer) .cx-fine{display:none}}

/* ---------- Demo-mode campaign flow (no Supabase) ---------- */
#modalRoot.campaign-flow .modal-head,#modalRoot.campaign-flow .journey-steps,#modalRoot.campaign-flow .watch-layout,
#modalRoot.campaign-flow .modal>.notice,#modalRoot.campaign-flow #quizForm:not(.cx-question),#modalRoot.campaign-flow .reward-celebration{width:min(100% - 32px,960px);margin-inline:auto}
#modalRoot.campaign-flow .modal-head{padding:calc(20px + env(safe-area-inset-top)) 0 16px;border-bottom:1.5px solid var(--line)}
#modalRoot.campaign-flow .modal-head h2{font-size:clamp(22px,4vw,34px)}
#modalRoot.campaign-flow .modal-actions{position:sticky;bottom:0;margin-top:auto;padding:14px max(16px,calc((100vw - 960px)/2)) calc(14px + env(safe-area-inset-bottom));border-top:1.5px solid var(--line);background:var(--bg)}
.journey-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0;padding:0;list-style:none}
.journey-steps li{display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:3px solid var(--line);color:var(--muted);font-size:14px;font-weight:700}
.journey-steps li>span{display:grid;place-items:center;width:26px;height:26px;border:2px solid var(--line-2);border-radius:50%;font-size:12px;font-weight:800}
.journey-steps li.current{border-color:var(--signal);color:var(--text)}
.journey-steps li.current>span{border-color:var(--text);background:var(--signal)}
.journey-steps li.done>span{border-color:var(--text);background:var(--mint)}
.watch-layout{display:grid;grid-template-columns:minmax(0,1fr) 180px;align-items:start;gap:20px}
@media(max-width:700px){.watch-layout{grid-template-columns:1fr}}
.video-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);background:#000;overflow:hidden}
.video-frame.portrait-video{width:auto;max-width:100%;height:min(70dvh,640px);aspect-ratio:9/16;margin-inline:auto}
.campaign-video{display:block;width:100%;height:100%;object-fit:contain}
.video-play-prompt{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;border:0;background:#16100b80;color:#fff8ec}
.video-play-prompt span{display:grid;place-items:center;width:66px;height:66px;padding-left:4px;border:3px solid #fff8ec;border-radius:50%;background:var(--signal);color:#2b1d12}
.video-play-prompt span svg{width:22px;height:22px;fill:currentColor}
.video-play-prompt strong{font-size:14px}
.video-progress{height:8px;margin:12px 0 8px;border-radius:99px;background:var(--s3);overflow:hidden}
.video-progress>div{height:100%;width:0;background:var(--signal);transition:width .3s}
.video-timing{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;font-weight:600}
.video-encouragement{min-height:24px;margin-top:10px;font-size:14px;font-weight:600}
.journey-reward{display:grid;gap:4px;padding:16px;border:2px solid var(--text);border-radius:var(--r-lg);background:var(--sun);text-align:center}
.journey-reward span{color:var(--ink-2);font-size:12px;font-weight:800}
.journey-reward strong{font-family:var(--display);font-size:30px;font-weight:800}
.journey-reward small{color:var(--ink-2);font-size:12px}
.quiz-progress{margin-top:4px}
.quiz-progress-top{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;font-weight:600}
.quiz-reward{color:var(--money)}
.quiz-progress-track{height:8px;margin-top:8px;border-radius:99px;background:var(--s3);overflow:hidden}
.quiz-progress-track span{display:block;height:100%;background:var(--signal)}
.question{margin-top:20px}
.question>strong{display:block;margin-bottom:12px;font-family:var(--display);font-size:clamp(19px,3vw,26px);font-weight:700;letter-spacing:-.02em}
.choice{display:flex;align-items:center;gap:10px;min-height:56px;margin:8px 0;padding:12px 14px;border:2px solid var(--line-2);border-radius:16px;background:var(--s1);font-weight:600;cursor:pointer}
.choice:has(input:checked){border-color:var(--text);background:var(--sun)}
.choice input{accent-color:var(--signal)}
.answer-feedback{margin-top:10px;color:var(--muted);font-size:13px}
.reward-celebration{padding:clamp(40px,10vh,110px) 0 24px;text-align:center}
.reward-seal{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 18px;border:3px solid var(--text);border-radius:50%;background:var(--mint);font-size:30px;font-weight:800}
.earned-amount,.result-title{margin:10px 0;font-size:clamp(32px,7vw,60px)}
.reward-status{display:inline-flex;gap:6px;margin:6px 0 12px;padding:5px 12px;border:2px solid var(--text);border-radius:99px;background:var(--mint);font-size:13px;font-weight:800}
.reward-celebration p{color:var(--muted)}

/* ---------- Discover spotlight: the first thing people see ----------
   Stage colour lives in --stage (trial: pale sky #e4f3ff, calm so the video and info lead; the yellow version used var(--sun) with a sky sun-icon circle
   and sky 'for you' chip / front drop card). Same weight as the vault: ink border, hard orange shadow. Things that are yellow
   elsewhere get their own candy colour on it, so nothing vanishes and the stage stays playful.
   The featured video loops silently; the gold coin is the reward. Motion only in the first moments after load. */
.spotlight{--stage:#e4f3ff;position:relative;margin:0 0 30px;padding:20px 18px 22px;border:2px solid var(--text);border-radius:var(--r-lg);background:var(--stage);box-shadow:6px 6px 0 var(--signal)}
.spotlight .outline{--fill:var(--stage)}
.spotlight .hello:not(.is-night):not(.is-afternoon) .hello-icon{background:var(--sky)}
.spotlight .hello:not(.is-night):not(.is-afternoon) .hello-icon circle{fill:var(--sun)}
/* Main buttons on the pale stage: sun yellow with the vault's orange edge (orange buttons elsewhere). */
.spotlight .primary-btn{background:var(--sun);box-shadow:3px 3px 0 var(--signal)}
.spotlight .primary-btn:hover{background:#ffe066;box-shadow:4px 4px 0 var(--signal)}
.spotlight .primary-btn:active{box-shadow:0 0 0 var(--signal)}
.spotlight .sticker-streak{--c:var(--apricot)}
.spotlight-top{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.spotlight-body{position:relative;z-index:1;display:grid;grid-template-areas:"head" "media" "info";gap:18px;margin-top:18px}
.spotlight h1{grid-area:head;font-size:clamp(32px,8.6vw,62px);line-height:1}
.spotlight-media{grid-area:media;position:relative;aspect-ratio:16/9;border:2px solid var(--text);border-radius:var(--r);background:var(--art,var(--s3));box-shadow:4px 4px 0 var(--text);cursor:pointer}
.spotlight-media.coral{--art:var(--apricot)}.spotlight-media.blue{--art:var(--sky)}.spotlight-media.yellow{--art:var(--s1)}.spotlight-media.green{--art:var(--mint)}.spotlight-media.lilac,.spotlight-media.purple{--art:var(--lilac)}
.spotlight-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r) - 2px);pointer-events:none}
.spotlight-media:hover .card-play{background:var(--signal);transform:translate(-50%,-50%) scale(1.08)}
.spotlight-media:has(.art-label) .card-play{display:none}
.spotlight-coin{position:absolute;z-index:3;right:-10px;bottom:-22px;display:grid;place-items:center;align-content:center;width:82px;height:82px;border:2px solid var(--text);border-radius:50%;background:var(--sun);color:var(--text);box-shadow:3px 3px 0 var(--text);font-family:var(--display);font-size:21px;font-weight:800;line-height:1;transform:rotate(-8deg);animation:coin-bob 4s ease-in-out infinite}
.spotlight-coin::before{content:"";position:absolute;inset:6px;border:2px dashed #2b1d1250;border-radius:50%}
.spotlight-coin small{margin-bottom:3px;font-family:var(--font);font-size:11px;font-weight:800}
@keyframes coin-bob{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-5px)}}
.spotlight-info{grid-area:info;display:grid;gap:12px;align-content:start;padding-top:6px}
.spotlight-brand{margin:0;color:var(--ink-2);font-size:15px;line-height:1.4}
.spotlight-brand b{color:var(--text)}
.spotlight-meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--ink-2);font-size:13.5px;font-weight:600}
.spotlight-meta span{display:inline-flex;align-items:center;gap:6px}
.spotlight-meta .ui-icon{width:16px;height:16px}
.spotlight-cta{justify-self:stretch;min-height:54px;font-size:16px}
.spotlight-steps{position:relative;z-index:1;display:grid;gap:8px;margin-top:26px}
.spotlight-steps .onboarding-dismiss{justify-self:end;color:var(--ink-2)}
.spotlight-copy{position:relative;z-index:1;display:grid;gap:14px;justify-items:start;margin-top:18px}
.spotlight-copy p{max-width:34em;margin:0;color:var(--ink-2);font-size:16px}
.doodles-spot{inset:0}
.doodles-spot .d-coin{right:-12px;bottom:-26px;width:50px}
.doodles-spot .d-star{bottom:-16px;left:20px;width:32px}
@media(min-width:560px){.spotlight-cta{justify-self:start}}
@media(min-width:860px){
  .spotlight{padding:28px 30px 30px}
  .spotlight-body{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"head media" "info media";column-gap:34px;row-gap:20px;align-items:start}
  .spotlight-info{align-self:end;padding-top:0}
  .spotlight-coin{width:96px;height:96px;font-size:24px;right:-16px;bottom:-26px}
}
/* Resting stage (nothing to feature): a "next drop" stack of tilted cards stands in for the video. */
/* Same pairing as the vault and streak card: a bold display line, then a small semi-bold note. */
.spotlight-lede{max-width:32em;margin:0;color:var(--ink-2);font-size:15px;font-weight:600;line-height:1.45}
.lede-main{display:block;color:var(--text);font-family:var(--display);font-size:clamp(18px,5vw,22px);font-weight:800;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.lede-sub{display:block;margin-top:6px;font-size:14px}
.lede-main .w{display:inline-block}
.lede-dots{display:inline-flex;gap:.12em;margin-left:.1em}
.lede-dots i{width:.2em;height:.2em;border-radius:50%;background:var(--signal);box-shadow:0 0 0 1.5px var(--text);animation:dot-hop 1.3s ease-in-out infinite}
.lede-dots i:nth-child(2){animation-delay:.16s}.lede-dots i:nth-child(3){animation-delay:.32s}
@keyframes dot-hop{0%,55%,100%{transform:none}25%{transform:translateY(-.32em)}}
.lede-squiggle{padding-bottom:5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' viewBox='0 0 24 6'%3E%3Cpath d='M0 3c3-3 6-3 9 0s6 3 9 0 4.5-2 6-1.5' fill='none' stroke='%23ff7a1a' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") left bottom/100% 6px repeat-x}
.spotlight.is-entering .lede-main .w{animation:word-in .55s var(--spring) backwards;animation-delay:calc(.5s + var(--w) * .08s)}
.spotlight.is-entering .lede-squiggle{background-size:0 6px;animation:word-in .55s var(--spring) .82s backwards,squiggle-in .8s var(--ease) 1.25s forwards}
.spotlight.is-entering .lede-sub{animation:rise .5s var(--ease) 1.1s backwards}
@keyframes word-in{from{opacity:0;transform:translateY(.45em) rotate(5deg)}}
@media(prefers-reduced-motion:reduce){.spotlight.is-entering .lede-squiggle{background-size:100% 6px}}
.spot-drop{grid-area:media;position:relative;min-height:168px;margin:0 8px}
.spot-drop-card{position:absolute;left:50%;top:50%;display:grid;align-content:end;gap:7px;width:min(64%,250px);aspect-ratio:16/10;padding:14px;border:2px solid var(--text);border-radius:var(--r);background:var(--c);box-shadow:4px 4px 0 var(--text);animation:float 6s ease-in-out infinite}
.spot-drop-card b{display:block;height:8px;border-radius:99px;background:#2b1d1226}
.spot-drop-card b+b{width:60%}
.spot-drop-card i{position:absolute;left:50%;top:40%;display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--text);border-radius:50%;background:var(--s1);transform:translate(-50%,-50%)}
.spot-drop-card i .ui-icon{width:16px;height:16px;margin-left:2px;fill:currentColor}
.spot-drop-card.c1{--c:var(--lilac);translate:-78% -58%;rotate:-9deg;animation-delay:-2s}
.spot-drop-card.c2{--c:var(--mint);translate:-22% -42%;rotate:8deg;animation-delay:-4s}
.spot-drop-card.c3{--c:var(--sun);translate:-50% -50%;rotate:-2deg}
.spot-drop-card.c1 i,.spot-drop-card.c2 i{display:none}
button.spot-drop{display:block;width:auto;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.spot-drop-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r) - 2px);pointer-events:none}
.spot-drop-card.has-thumb{background:var(--s1)}
.spot-drop-card.has-thumb i{z-index:1;top:50%;background:var(--signal)}
.spot-drop-card.has-thumb i .ui-icon{margin:0;fill:none}
.spot-drop.is-share:hover .spot-drop-card.c3{box-shadow:6px 6px 0 var(--text)}
.spot-drop.is-share:hover .spot-drop-card.c3 i{transform:translate(-50%,-50%) scale(1.08)}
.spot-drop.is-share:focus-visible{outline:3px solid var(--text);outline-offset:4px;border-radius:var(--r)}
.spot-drop-sticker{position:absolute;z-index:2;right:4%;top:2%;--c:var(--signal);--tilt:6deg}
.spot-earn{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.spot-earn li{display:inline-flex;align-items:baseline;gap:6px;padding:7px 12px;border:2px solid var(--text);border-radius:var(--r);background:var(--c);box-shadow:2px 2px 0 var(--text);font-size:13.5px;font-weight:700;line-height:1.25}
.spot-earn b{font-family:var(--display);font-size:16px;font-weight:800}
.spot-earn .for-friend{--c:var(--mint)}.spot-earn .for-you{--c:var(--sun)}
.spot-recap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.spot-recap div{padding:10px 12px;border:2px solid var(--text);border-radius:var(--r);background:var(--c,var(--s1));box-shadow:3px 3px 0 var(--text)}
.spot-recap dt{color:var(--ink-2);font-size:12px;font-weight:700}
.spot-recap dd{margin:4px 0 0;font-family:var(--display);font-size:clamp(17px,4.6vw,22px);font-weight:800;line-height:1}
.spot-actions{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:559px){.spot-actions>*{flex:1 1 100%}}
@media(min-width:860px){.spot-drop{min-height:240px}}
.spotlight.is-resting .spotlight-body{gap:14px}
@media(min-width:860px){
  .spotlight.is-resting .spotlight-body{grid-template-rows:1fr auto auto 1fr;grid-template-areas:". media" "head media" "info media" ". media";row-gap:16px}
  .spotlight.is-resting .spotlight-info{align-self:start}
}
.spotlight.is-entering .spot-drop{animation:rise .6s var(--ease) .2s backwards}

/* Entrance: the stage pops in, the headline and video rise, the coin drops with a spin, cards follow one by one. */
.spotlight.is-entering{animation:spot-in .6s var(--spring) both}
.spotlight.is-entering h1{animation:rise .6s var(--ease) .1s backwards}
.spotlight.is-entering .spotlight-media{animation:rise .6s var(--ease) .2s backwards}
.spotlight.is-entering .spotlight-info{animation:rise .6s var(--ease) .3s backwards}
.spotlight.is-entering .spotlight-coin{animation:coin-drop .9s var(--spring) .55s backwards,coin-bob 4s ease-in-out 1.5s infinite}
.campaign-card.is-entering{animation:rise .5s var(--ease) backwards;animation-delay:calc(.5s + var(--i,0) * .08s)}
@keyframes spot-in{from{opacity:0;transform:translateY(18px) scale(.97)}}
@keyframes coin-drop{from{opacity:0;transform:translateY(-70px) rotate(-220deg) scale(.5)}}

/* Live strip: a slim ink band of totals that drifts sideways. Two identical copies make the loop seamless. */
.live-strip{position:relative;margin:0 0 20px;border:2px solid var(--text);border-radius:var(--r);background:var(--text);color:var(--bg);overflow:hidden;box-shadow:3px 3px 0 var(--sun)}
.live-strip-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
/* Mouse: pause while hovering. Touch: pause only while pressed (a tapped :hover would stick and freeze it). */
@media(hover:hover) and (pointer:fine){.live-strip:hover .live-strip-track{animation-play-state:paused}}
.live-strip:active .live-strip-track{animation-play-state:paused}
.live-strip-track>div{display:flex;align-items:center;gap:18px;padding:11px 9px;white-space:nowrap;font-size:14px;font-weight:700}
.live-strip-track span:first-child{color:var(--sun)}
.live-sep{flex:none;width:8px;height:8px;background:var(--sun);transform:rotate(45deg)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.live-strip-track{width:auto}.live-strip-track>div{flex-wrap:wrap;white-space:normal}.live-strip-track>div+div{display:none}}

/* Inside the stage the strip is its header: flush with the top edge, a fixed Live tag on the left. */
.spotlight>.live-strip{z-index:1;margin:-20px -18px 18px;border:0;border-bottom:2px solid var(--text);border-radius:calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px) 0 0;box-shadow:none}
.live-tag{position:absolute;z-index:2;top:0;bottom:0;left:0;display:flex;align-items:center;gap:7px;padding:0 14px 0 16px;border-right:2px solid var(--sun);background:var(--text);color:var(--sun);font-size:13px;font-weight:800}
.live-tag i{width:8px;height:8px;border-radius:50%;background:var(--sun);animation:dot-pulse 1.6s ease-out infinite}
.live-tag.is-soon i{animation:none;opacity:.6}
@media(min-width:860px){.spotlight>.live-strip{margin:-28px -30px 22px}}

/* Shown in the grid when the featured video is the only one. */
.campaign-card.is-placeholder{display:grid;place-items:center;min-height:220px;border-style:dashed;border-color:var(--line-2);background:transparent}
.campaign-card.is-placeholder:hover{transform:none;box-shadow:none}
.placeholder-body{display:grid;justify-items:center;gap:8px;padding:24px;color:var(--muted);text-align:center}
.placeholder-body .ui-icon{width:30px;height:30px;color:var(--ink-2)}
.placeholder-body strong{color:var(--text);font-family:var(--display);font-size:17px}

/* ---------- Utility & motion ---------- */
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.upi-flag{color:var(--warn);font-weight:700}
#upiForm .modal-actions{margin-top:10px}

/* ---------- Discover ---------- */
.balance-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:2px solid var(--text);border-radius:99px;background:var(--sun);color:var(--text);font-size:13px;font-weight:800;white-space:nowrap;box-shadow:3px 3px 0 var(--signal);transition:transform .2s var(--spring),box-shadow .2s var(--spring)}
.balance-chip:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--signal)}
.balance-chip .ui-icon{width:14px;height:14px;stroke-width:2.4}
.balance-chip:active{transform:translate(2px,2px);box-shadow:none}
.campaign-section{margin-top:30px;scroll-margin-top:20px}
.how-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 0 0;padding:0;list-style:none}
.how-steps li{display:flex;flex-direction:column;gap:8px;padding:12px;border:2px solid var(--text);border-radius:var(--r);background:var(--s1);box-shadow:3px 3px 0 var(--text)}
.how-steps li:nth-child(2) .first-run-number{background:var(--sky)}
.how-steps li:nth-child(3) .first-run-number{background:var(--mint)}
.how-steps strong{display:block;font-size:14px;line-height:1.2}
.how-steps div span{display:block;margin-top:2px;color:var(--muted);font-size:12px;line-height:1.3}
@media(min-width:640px){.how-steps li{flex-direction:row;align-items:center;gap:12px;padding:14px}.how-steps strong{font-size:15px}.how-steps div span{font-size:13px}}
.first-run-guide .hello{margin-bottom:14px}
.first-run-footer a.primary-btn{text-decoration:none}

/* ---------- Activities: streak hero ---------- */
.streak-card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px 16px;margin:0 0 30px;padding:20px;border:2px solid var(--text);border-radius:var(--r-lg);background:var(--s1);box-shadow:5px 5px 0 var(--text)}
.streak-card.is-lit{background:var(--sun)}
.streak-flame{display:grid;place-items:center;width:58px;height:58px;border:2px solid var(--text);border-radius:50%;background:var(--sun)}
.streak-flame .ui-icon{width:30px;height:30px;color:var(--signal-ink);fill:var(--signal)}
.streak-card.is-lit .streak-flame .ui-icon{animation:flicker 1.6s ease-in-out infinite}
.streak-copy strong{display:block;font-family:var(--display);font-size:clamp(24px,7vw,34px);font-weight:800;line-height:1.05;letter-spacing:-.03em}
.streak-copy span{display:block;margin-top:4px;color:var(--ink-2);font-size:14px;font-weight:600}
.streak-week{grid-column:1/-1;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:0;padding:0;list-style:none}
.streak-week li{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink-2);font-size:12px;font-weight:700}
.streak-week i{display:grid;place-items:center;width:32px;height:32px;border:2px dashed var(--line-2);border-radius:50%;background:var(--s1);font-style:normal;font-weight:900}
.streak-week li.on i{border:2px solid var(--text);background:var(--mint)}
.streak-week li.today span{color:var(--text);font-weight:900}
.streak-week li.today i{box-shadow:0 0 0 2px var(--s1),0 0 0 4px var(--text)}
.streak-week li.future{opacity:.45}
.streak-week li.future i{border-style:solid;border-color:var(--line)}

/* ---------- Account page ---------- */
.account-page{max-width:560px}
.account-section{margin-bottom:28px}
.account-title{margin-bottom:12px;font-size:18px}
.account-actions{justify-content:flex-start;padding-top:20px;border-top:1.5px solid var(--line)}
.phone-field{display:flex;align-items:stretch}
.phone-field>span{display:grid;place-items:center;padding:0 12px;border:2px solid var(--line-2);border-right:0;border-radius:var(--r) 0 0 var(--r);background:var(--s2);font-weight:800}
.phone-field .text-field{flex:1;min-width:0;border-radius:0 var(--r) var(--r) 0}

/* ---------- Emoji reactions after the ad ---------- */
.cx-react{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;animation:cx-in .35s var(--ease) both}
.cx-react-label{color:var(--muted);font-size:13px;font-weight:700}
.cx-react-row{display:flex;gap:6px}
.cx-emoji{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1.5px solid var(--line-2);border-radius:50%;background:var(--s2);font-size:22px;line-height:1;transition:transform .2s var(--spring)}
.cx-emoji:hover{transform:scale(1.12)}
.cx-emoji.is-picked{border-color:var(--sun);background:var(--s3);box-shadow:0 0 0 2px var(--sun)}
.cx-emoji.is-pop{animation:cx-emoji-pop .4s var(--spring)}
@keyframes cx-emoji-pop{40%{transform:scale(1.35)}}
.cx-burst{position:absolute;inset:0;z-index:20;overflow:hidden;pointer-events:none}
.cx-float{position:absolute;font-size:30px;line-height:1;opacity:0;transform:translate(-50%,0);animation:cx-float-up 1.6s cubic-bezier(.2,.7,.3,1) both;will-change:transform,opacity}
@keyframes cx-float-up{
  0%{opacity:0;transform:translate(-50%,0) scale(.4)}
  12%{opacity:1;transform:translate(calc(-50% + var(--dx) * .15),-30px) scale(var(--s))}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),var(--rise)) rotate(var(--rot)) scale(var(--s))}
}
@media(prefers-reduced-motion:reduce){.cx-float{opacity:1;transform:translate(-50%,-40px)}}

/* ---------- Personal invites ---------- */
.shared-ribbon{margin-top:10px;padding:8px 12px;border:2px solid var(--text);border-radius:99px;background:var(--lilac);font-size:13px;font-weight:600;text-align:center}
.shared-ribbon b{font-weight:800}
.cx-shared-by{margin:-8px 0 16px;padding:4px 12px;border-radius:99px;background:var(--lilac);font-size:13px;font-weight:600}
.invite-card{display:grid;gap:16px}
.invite-from{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:clamp(20px,2.6vw,26px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.invite-from b{font-weight:900}
.invite-avatar{flex:none;display:grid;place-items:center;width:52px;height:52px;border:2px solid var(--text);border-radius:50%;background:var(--lilac);box-shadow:3px 3px 0 var(--text);font-size:22px}
.invite-campaign{position:relative;display:grid;gap:4px;padding:16px 92px 16px 16px;border:2px solid var(--text);border-radius:var(--r-lg);background:var(--s1);box-shadow:4px 4px 0 var(--text)}
.invite-brand{color:var(--muted);font-size:13px;font-weight:700}
.invite-campaign strong{font-size:17px;line-height:1.25}
.invite-reward{position:absolute;top:50%;right:14px;transform:translateY(-50%) rotate(-4deg);padding:6px 10px;border:2px solid var(--text);border-radius:12px;background:var(--gold);box-shadow:2px 2px 0 var(--text);font-family:var(--display);font-size:22px;font-weight:900}
.invite-earn{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:14px;color:var(--ink-2)}
.invite-earn li{display:flex;gap:8px}
.invite-earn li::before{content:"✓";flex:none;display:grid;place-items:center;width:20px;height:20px;border:2px solid var(--text);border-radius:50%;background:var(--mint);font-size:11px;font-weight:900;color:var(--text)}
.invite-earn b{color:var(--text)}
.invite-cta{font-weight:700;color:var(--text)}