/* ==========================================================================
   EarnTrump — Page layouts (landing + dashboard)
   ========================================================================== */

/* ================================================================ LANDING = */
.hero { position: relative; padding: 56px 0 44px; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; top: -240px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 560px; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at center, var(--accent-soft), transparent 68%);
}

.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  font-size: 11.5px; font-weight: 700; color: var(--accent);
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(34px, 5.4vw, 56px);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.06;
  margin-bottom: 18px;
}
.hero h1 .grad {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-lead { font-size: 15.5px; color: var(--text-2); max-width: 520px; margin-bottom: 30px; }

.hero-stats { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-stat {
  flex: 1 1 130px; padding: 15px 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.hero-stat:hover { transform: translateY(-3px); border-color: var(--accent-line); }
.hero-stat b { display: flex; align-items: center; gap: 7px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.hero-stat b i { color: var(--accent); font-size: 14px; }
.hero-stat span { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; color: var(--muted); margin-top: 4px; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Login card */
.login-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  padding: 28px; position: relative; overflow: hidden;
}
.login-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent-grad);
}
.login-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.login-head .ico {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 18px;
  background: var(--accent-soft); color: var(--accent);
}
.login-head h2 { font-size: 18px; }
.login-head small { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }

.login-note { text-align: center; font-size: 12.5px; color: var(--muted); }
.login-note a { color: var(--accent); font-weight: 700; }

/* Steps */
.section { padding: 52px 0; }
.section-head { text-align: center; max-width: 560px; margin: 0 auto 36px; }
.section-head h2 { font-size: clamp(24px, 3.6vw, 34px); letter-spacing: -.03em; margin-bottom: 10px; }
.section-head p { font-size: 14.5px; color: var(--text-2); }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.step {
  position: relative; padding: 26px 22px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step-n {
  position: absolute; top: 18px; right: 22px;
  font-family: var(--mono); font-size: 34px; font-weight: 800;
  color: var(--text); opacity: .06; line-height: 1;
}
.step .ico {
  width: 44px; height: 44px; border-radius: 13px; margin-bottom: 16px;
  display: grid; place-items: center; font-size: 17px;
  background: var(--accent-soft); color: var(--accent);
}
.step h3 { font-size: 15.5px; margin-bottom: 7px; }
.step p  { font-size: 13px; color: var(--text-2); }

/* Trust strip */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.trust-item {
  display: flex; align-items: center; gap: 13px; padding: 17px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.trust-item .ico {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 14px;
  background: var(--success-soft); color: var(--success);
}
.trust-item b { display: block; font-size: 13.5px; }
.trust-item span { font-size: 11.5px; color: var(--muted); }

/* Ticker */
.ticker { border-block: 1px solid var(--border); background: var(--surface); padding: 13px 0; overflow: hidden; }
.ticker-track { display: flex; gap: 42px; width: max-content; animation: ticker 30s linear infinite; }
.ticker-track span {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--muted);
}
.ticker-track i { color: var(--accent); font-size: 9px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ============================================================== DASHBOARD = */
.dash { padding: 28px 0 20px; }
.dash-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.dash-head h1 { font-size: clamp(21px, 3vw, 27px); letter-spacing: -.03em; }
.dash-head p  { font-size: 13px; color: var(--muted); margin-top: 3px; }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 18px;
  align-items: start;
}
.span-2 { grid-column: span 2; }

/* Claim card emphasis */
.claim-card { border-color: var(--accent-line); box-shadow: var(--shadow); }
.claim-status {
  padding: 12px 22px 20px; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.card-foot {
  display: flex; align-items: center; justify-content: space-around; gap: 10px;
  padding: 13px 22px; border-top: 1px solid var(--border); background: var(--surface-2);
  font-size: 11.5px; font-weight: 600; color: var(--muted);
}
.card-foot span { display: inline-flex; align-items: center; gap: 7px; }
.card-foot i { color: var(--accent); }

/* Verify (antibot + captcha) */
.verify { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s var(--ease), opacity .4s var(--ease), margin .4s var(--ease); }
.verify.open { max-height: 1400px; opacity: 1; }
.verify-inner { padding: 0 22px 22px; border-top: 1px solid var(--border); padding-top: 20px; }

.step-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em;
  color: var(--muted); margin-bottom: 11px;
}
.step-label button { font-size: 10.5px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .1em; }

.ab-target {
  padding: 14px; margin-bottom: 12px; text-align: center;
  background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--r);
  font-family: var(--mono); font-size: 15px; font-weight: 800;
  letter-spacing: .35em; text-transform: uppercase; color: var(--accent);
}
.ab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.ab-node {
  position: relative; height: 52px; border-radius: var(--r);
  background: var(--surface-2); border: 1.5px solid var(--border);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; color: var(--text);
  display: grid; place-items: center;
  transition: all .2s var(--ease);
}
.ab-node:hover { border-color: var(--accent-line); }
.ab-node.selected { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: scale(.95); }
.ab-badge {
  position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font-size: 10px; font-weight: 800;
  display: grid; place-items: center;
  border: 2px solid var(--surface);
  opacity: 0; transform: scale(.4);
  transition: all .25s var(--ease-out);
}
.ab-badge.show { opacity: 1; transform: scale(1); }

/* reCAPTCHA-style consent box: square tick on the left, label, brand on the
   right. Familiar shape on purpose — users already know what to do with it. */
.verify-box {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.verify-box:hover { border-color: var(--accent-line); box-shadow: var(--shadow); }
.verify-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.verify-box .box {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 3px;
  border: 2px solid var(--border-strong);
  background: var(--surface);
  display: grid;
  place-items: center;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.verify-box:hover .box { border-color: var(--accent); }
.verify-box .box i { font-size: 13px; }
.verify-box .box #boxSpinner,
.verify-box .box .fa-circle-notch { color: var(--accent); font-size: 14px; }

/* Loading: the border reads as active while the request is in flight. */
.verify-box.is-loading .box { border-color: var(--accent); }

/* Verified: filled tick, matching reCAPTCHA's completed state. */
.verify-box.is-checked .box {
  border-color: var(--success);
  background: var(--success);
}
.verify-box.is-checked .box .fa-check { color: #fff; }
.verify-box.is-checked .box .fa-check:not(.hide) { animation: vbTick .3s var(--ease-out) both; }
@keyframes vbTick { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.verify-box .txt {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* Help trigger, where the brand block sits on a real reCAPTCHA. */
.cap-help {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--r);
  background: none;
  cursor: pointer;
  color: var(--muted);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.cap-help:hover { background: var(--surface-3); color: var(--accent); }
.cap-help:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cap-help i { font-size: 19px; color: var(--accent); }
.cap-help span {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

@media (max-width: 420px) {
  .verify-box { gap: 10px; padding: 12px; }
  .verify-box .txt { font-size: 13px; }
  .cap-help i { font-size: 17px; }
}
.captcha-host {
  display: flex; justify-content: center; padding: 18px;
  background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--r);
}

/* --------------------------------------------------- verify <-> captcha --
   One container holds both states. During the swap it is pinned to a height
   and both children are stacked, so the page never collapses and re-expands
   (the old blink / up-down jump).
   ------------------------------------------------------------------------ */
.cap-swap {
  position: relative;
  transition: height .38s var(--ease-out);
}

/* Clip only while the height is animating — afterwards the captcha owns the
   box and must be free to overflow (badges, error text). */
.cap-swap.is-swapping { overflow: hidden; }

.cap-swap > .verify-box,
.cap-swap > .captcha-host {
  transition: opacity .26s var(--ease);
}

/* Stack them only while swapping; otherwise normal flow keeps auto height. */
.cap-swap.is-swapping > .verify-box,
.cap-swap.is-swapping > .captcha-host {
  position: absolute;
  inset: 0 0 auto 0;
}

/* The inactive side stays in the layout but is invisible and unclickable. */
.captcha-host.is-out,
.verify-box.is-out {
  opacity: 0;
  pointer-events: none;
}

/* Not swapping and faded out means fully retired — take it out of flow. */
.cap-swap:not(.is-swapping) > .captcha-host.is-out {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .cap-swap,
  .cap-swap > .verify-box,
  .cap-swap > .captcha-host { transition: none; }
}

/* ================================================================== WHEEL = */
.wheel-wrap { display: grid; place-items: center; padding: 24px 22px 8px; gap: 18px; }
.wheel-stage { position: relative; width: min(260px, 72vw); aspect-ratio: 1; }
.wheel-pointer {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; z-index: 3;
  border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-top: 20px solid var(--accent);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.wheel {
  display: block;
  width: 100%; height: 100%; border-radius: 50%;
  border: 6px solid var(--surface);
  box-shadow: 0 0 0 3px var(--accent), var(--shadow-lg);
  /* Rotation is driven frame-by-frame on the canvas, not by a CSS
     transition — the labels are painted into the same transform as their
     wedge, so text and colours can never drift apart. */
}
.wheel-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; z-index: 2;
  background: var(--surface); border: 3px solid var(--accent);
  display: grid; place-items: center;
  font-size: 17px; color: var(--accent);
  box-shadow: var(--shadow);
}

/* ================================================================= LEVELS = */
.level-head { display: flex; align-items: center; gap: 14px; padding: 20px 22px 14px; }
.level-badge {
  width: 54px; height: 54px; border-radius: 16px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 21px; color: var(--on-accent);
  background: var(--accent-grad); box-shadow: var(--shadow-accent);
}
.level-head h3 { font-size: 17px; }
.level-head p { font-size: 12px; color: var(--muted); margin-top: 2px; }

.xp-bar { height: 9px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; margin: 0 22px; }
.xp-fill { height: 100%; border-radius: inherit; background: var(--accent-grad); transition: width .9s var(--ease-out); }
.xp-meta { display: flex; justify-content: space-between; padding: 9px 22px 18px; font-size: 11px; font-weight: 700; color: var(--muted); }
.xp-meta b { color: var(--accent); }

.perks { display: grid; gap: 8px; padding: 0 22px 20px; }
.perk { display: flex; align-items: center; gap: 11px; font-size: 12.5px; color: var(--text-2); }
.perk i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 10px; background: var(--success-soft); color: var(--success); flex-shrink: 0; }
.perk.locked { opacity: .45; }
.perk.locked i { background: var(--surface-3); color: var(--faint); }

/* =============================================================== RESPONSIVE */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero { padding: 36px 0 30px; }
  .span-2 { grid-column: span 1; }
}
@media (max-width: 620px) {
  .dash-grid { grid-template-columns: 1fr; }
  .card-head, .amount-block, .stat-grid, .feed, .verify-inner { padding-inline: 16px; }
  .login-card { padding: 22px; }
  .section { padding: 38px 0; }
}

/* ==========================================================================
   Dashboard sub-navigation + multi-page components
   ========================================================================== */

.page-narrow { max-width: 640px; margin-inline: auto; display: grid; gap: 18px; }

/* ------------------------------------------------------------ DASHTABS -- */
.dashtabs {
  display: flex; gap: 6px; margin-bottom: 22px; padding-bottom: 4px;
  overflow-x: auto; scrollbar-width: none;
}
.dashtabs::-webkit-scrollbar { display: none; }
.dashtab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text-2);
  white-space: nowrap; flex-shrink: 0;
  transition: all .2s var(--ease);
}
.dashtab:hover { color: var(--text); border-color: var(--border-strong); }
.dashtab.active {
  background: var(--accent-soft); border-color: var(--accent-line);
  color: var(--accent); font-weight: 700;
}
.dashtab i { font-size: 12.5px; }

.hero-balance { border-color: var(--accent-line); box-shadow: var(--shadow); margin-bottom: 18px; }

/* ------------------------------------------------------- QUICK ACTIONS -- */
.quick-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.quick {
  padding: 18px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), border-color .22s var(--ease);
}
.quick:hover { transform: translateY(-3px); border-color: var(--accent-line); }
.quick .ico {
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 12px;
  display: grid; place-items: center; font-size: 15px;
  background: var(--surface-3); color: var(--text-2);
}
.quick.is-accent .ico { background: var(--accent-grad); color: var(--on-accent); box-shadow: var(--shadow-accent); }
.quick b { display: block; font-size: 14px; margin-bottom: 3px; }
.quick span:last-child { font-size: 11.5px; color: var(--muted); }

/* ------------------------------------------------------------- PRIZES --- */
.prize-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 9px; padding: 20px 22px 8px;
}
.prize {
  padding: 14px 10px; border-radius: var(--r); text-align: center;
  background: var(--surface-2); border: 1px solid var(--border);
}
.prize.is-jackpot { background: var(--accent-soft); border-color: var(--accent-line); }
.prize b { display: block; font-family: var(--mono); font-size: 17px; font-weight: 800; }
.prize.is-jackpot b { color: var(--accent); }
.prize span { font-size: 10px; color: var(--muted); font-weight: 600; }

.wheel-label {
  position: absolute; top: 50%; left: 50%;
  transform-origin: 0 0;
  font-family: var(--mono); font-size: 11px; font-weight: 800;
  color: #2a1a00; pointer-events: none;
  padding-left: 58px; margin-top: -6px;
}

/* -------------------------------------------------------------- TIERS --- */
.tier-list { display: grid; gap: 8px; padding: 18px 22px 22px; }
.tier {
  display: flex; align-items: center; gap: 13px;
  padding: 14px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--border);
  opacity: .55;
}
.tier.reached { opacity: 1; }
.tier.current { border-color: var(--accent); background: var(--accent-soft); }
.tier-ico {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 15px;
  background: var(--surface-3); color: var(--muted);
}
.tier.reached .tier-ico { background: var(--accent-grad); color: var(--on-accent); }
.tier b { display: block; font-size: 13.5px; }
.tier span { font-size: 11px; color: var(--muted); }

/* -------------------------------------------------------------- SHARE --- */
.share-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.share {
  flex: 1 1 100px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12.5px; font-weight: 700; color: var(--text-2);
  transition: all .2s var(--ease);
}
.share:hover { color: #fff; border-color: transparent; }
.share.tg:hover { background: #229ED9; }
.share.tw:hover { background: #000; }
.share.wa:hover { background: #25D366; }

/* --------------------------------------------------------------- TABS --- */
.tabs { display: flex; gap: 8px; }
.tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text-2);
  transition: all .2s var(--ease);
}
.tab.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 700; }

/* ----------------------------------------------------------- MISC BITS -- */
.fp-note {
  padding: 13px 15px; margin-bottom: 18px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--r);
}
.fp-note-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--accent);
}
.kv-list { display: grid; gap: 7px; margin-bottom: 20px; font-size: 12px; }
.kv-list .grow { color: var(--muted); }

.tip-row { display: grid; gap: 10px; }
.tip {
  display: flex; align-items: center; gap: 13px;
  padding: 16px 18px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13px; color: var(--text-2);
  transition: border-color .2s var(--ease);
}
.tip:hover { border-color: var(--accent-line); }
.tip > i:first-child { color: var(--accent); font-size: 17px; }
.tip > span { flex: 1; }
.tip > i:last-child { color: var(--faint); font-size: 12px; }

.scroll-x { overflow-x: auto; }

/* -------------------------------------------------------- LEADERBOARD --- */
.rank {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; font-weight: 800;
  background: var(--surface-3); color: var(--muted);
}
.rank.top-1 { background: var(--accent-grad);                     color: var(--on-accent); box-shadow: var(--shadow-accent); }
.rank.top-2 { background: linear-gradient(135deg,#d4d9e2,#9aa4b2); color: #23282f; }
.rank.top-3 { background: linear-gradient(135deg,#e0a878,#b9743d); color: #2b1a0c; }

.feed-item.is-me {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.feed-item .feed-who { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* ------------------------------------------------------------- COUPON --- */
.input.is-code {
  text-align: center;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.input.is-code::placeholder { letter-spacing: .12em; font-weight: 600; }

/* ==========================================================================
   DASHBOARD SHELL
   Desktop gets a fixed sidebar; mobile gets a bottom tab bar with Claim as
   the centre action. Only ever one of the two is visible.
   ========================================================================== */

.dashside { display: none; }
.tabbar   { display: none; }

/* -------------------------------------------------- desktop: sidebar ---- */
@media (min-width: 1024px) {
  .dashside {
    display: block;
    position: fixed;
    top: var(--nav-h);
    bottom: 0;
    left: 0;
    width: 252px;
    z-index: 40;
    padding: 20px 14px 24px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .dashside-in { display: flex; flex-direction: column; gap: 4px; min-height: 100%; }

  .dashside-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .dashside-link i { width: 18px; text-align: center; font-size: 14px; }
  .dashside-link:hover { background: var(--surface-2); color: var(--text); }
  .dashside-link.active {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text);
    font-weight: 700;
  }
  .dashside-link.active i { color: var(--accent); }

  .dashside-foot {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .dashside-lvl { display: flex; align-items: center; gap: 11px; }
  .dashside-lvl > i { font-size: 19px; color: var(--accent); }
  .dashside-lvl b { display: block; font-size: 13px; }
  .dashside-lvl span { font-size: 11.5px; color: var(--muted); }

  /* Shift the page clear of the sidebar. */
  body.is-dash .dash,
  body.is-dash .footer { padding-left: 252px; }

  /* The sidebar carries the sections now — no need to repeat them up top. */
  body.is-dash .nav-links { display: none; }
}

.dashside-cap {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 4px 8px;
}

/* ------------------------------------------------ mobile: bottom bar ---- */
@media (max-width: 1023px) {
  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    height: calc(62px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .07);
  }

  .tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 62px;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--muted);
    font-family: inherit;
  }
  .tabbar-item i { font-size: 16px; }
  .tabbar-item.active { color: var(--accent); }

  /* Claim sits proud of the bar — the action users repeat all day. */
  .tabbar-fab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    height: 62px;
    font-size: 9.5px;
    font-weight: 800;
    color: var(--muted);
  }
  .tabbar-fab .fab-ring {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-top: -20px;
    border-radius: 50%;
    background: var(--accent-grad);
    color: var(--on-accent);
    font-size: 18px;
    border: 4px solid var(--bg);
    box-shadow: 0 6px 18px rgba(212, 175, 55, .4);
  }
  .tabbar-fab.active { color: var(--accent); }

  /* Clear the bar so nothing hides behind it. */
  body.is-dash .dash { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.is-dash .footer { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------ more sheet ------ */
.sheet { position: fixed; inset: 0; z-index: 90; display: none; }
.sheet.open { display: block; }

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 20, .55);
  backdrop-filter: blur(2px);
}

.sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--border);
  animation: sheetUp .22s ease;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.sheet-grip {
  width: 40px;
  height: 4px;
  margin: 2px auto 12px;
  border-radius: 999px;
  background: var(--border-strong);
}

.sheet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.sheet-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 13px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 13px;
  color: var(--text);
}
.sheet-link .ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 13px;
}
.sheet-link.active { border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .sheet-panel { animation: none; }
}

/* ==========================================================================
   OVERVIEW LAYOUT
   Single column on mobile; the desktop sidebar leaves room for a second
   column, so secondary cards move out of the main scroll path.
   ========================================================================== */

.ov-grid { display: grid; gap: 18px; align-items: start; }
.ov-main, .ov-side { display: grid; gap: 18px; align-content: start; }

@media (min-width: 1180px) {
  .ov-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}

/* Next-claim strip */
.ov-claim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 20px;
}
.ov-claim-l { display: flex; align-items: center; gap: 13px; }
.ov-claim h3 { font-size: 14.5px; letter-spacing: -.01em; }
.ov-claim p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ov-claim .btn { flex-shrink: 0; }

.ov-count {
  font-size: 19px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .02em;
}

/* Key/value rows used by the rate breakdown. */
.kv-list .kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border);
}
.kv-list .kv:last-child { border-bottom: 0; }
.kv-list .kv span { color: var(--muted); }
.kv-list .kv b { font-size: 12.5px; }

.card .kv-list { padding: 4px 20px 6px; margin-bottom: 0; }

/* -------------------------------------------------- cashout: locked ----- */
.cash-lock { padding: 0 22px 22px; display: grid; gap: 12px; }
.cash-lock p { font-size: 12.5px; color: var(--muted); text-align: center; }
.cash-lock p b { color: var(--accent); font-family: var(--mono); }

/* ==========================================================================
   7-DAY ACTIVITY CHART
   Pure CSS bars — no chart library, no external request, themes for free.
   ========================================================================== */

.chart7 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  align-items: end;
  padding: 22px 18px 16px;
}

.c7-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.c7-val {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  height: 14px;
  line-height: 14px;
}

/* The track keeps every column the same height so bars share a baseline. */
.c7-track {
  position: relative;
  width: 100%;
  height: 108px;
  display: flex;
  align-items: flex-end;
  border-radius: 8px;
  background: var(--surface-2);
  overflow: hidden;
}

.c7-bar {
  width: 100%;
  min-height: 0;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--accent) 55%, transparent),
              color-mix(in srgb, var(--accent) 22%, transparent));
  transition: height .5s var(--ease-out);
}

.c7-lab {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .02em;
  white-space: nowrap;
}

/* Today reads as the active column. */
.c7-col.is-today .c7-bar { background: var(--accent-grad); }
.c7-col.is-today .c7-val,
.c7-col.is-today .c7-lab { color: var(--accent); }
.c7-col.is-today .c7-track { box-shadow: inset 0 0 0 1px var(--accent-line); }

@media (max-width: 420px) {
  .chart7 { gap: 5px; padding-inline: 12px; }
  .c7-track { height: 88px; }
  .c7-lab { font-size: 9.5px; }
  .c7-val { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .c7-bar { transition: none; }
}

/* ==========================================================================
   OVERVIEW HERO — balance beside a cashout progress ring
   ========================================================================== */

.dash-head h1 .grad {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ov-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 22px;
  background: linear-gradient(180deg, var(--surface-2), transparent);
}

.ov-hero-amt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ov-hero-amt .label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; color: var(--muted);
}
.ov-hero-amt .value { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ov-hero-amt .value .num {
  font-family: var(--mono);
  font-size: clamp(24px, 5.2vw, 34px);
  font-weight: 800;
  letter-spacing: -.03em;
}
.ov-hero-amt .value .cur { font-size: 13px; font-weight: 700; color: var(--accent); }
.ov-hero-amt .usd-tag { align-self: flex-start; }
.ov-hero-amt .sub { font-size: 11.5px; color: var(--muted); }
.ov-hero-amt .sub b { font-family: var(--mono); color: var(--accent); }
.ov-hero-amt .sub.is-ready { color: var(--success); font-weight: 700; }

/* Progress ring */
.ov-ring { position: relative; width: 118px; height: 118px; flex-shrink: 0; }
.ov-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ov-ring circle { fill: none; stroke-width: 9; }
.ov-ring .ring-bg { stroke: var(--surface-3, var(--surface-2)); }
.ov-ring .ring-fg {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset .9s var(--ease-out);
}

.ring-mid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.ring-mid b {
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
}
.ring-mid b small { font-size: 11px; font-weight: 700; color: var(--muted); }
.ring-mid span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 460px) {
  .ov-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ov-ring { align-self: center; width: 104px; height: 104px; }
}

/* --------------------------------------------------------- today strip -- */
.today-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.today {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 15px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), transform .2s var(--ease-out);
}
a.today:hover { border-color: var(--accent); transform: translateY(-2px); }

.today .ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 11px;
  font-size: 14px;
  background: var(--accent-soft);
  color: var(--accent);
}
.today .ico.is-green { background: var(--success-soft); color: var(--success); }
.today .ico.is-blue  { background: var(--info-soft);    color: var(--info); }
.today .ico.is-fire  { background: var(--danger-soft);  color: var(--danger); }

.today b {
  display: block;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  word-break: break-all;
}
.today span { font-size: 10.5px; color: var(--muted); font-weight: 600; }

/* ------------------------------------------------------- wheel extras --- */
/* The old .wheel-label elements are gone — labels are painted on the canvas. */
.wheel-label { display: none; }

.wheel-hub.is-spinning i { animation: hubSpin 1.1s linear infinite; }
@keyframes hubSpin { to { transform: rotate(360deg); } }

/* Win flash when the wheel settles. */
.wheel-stage.is-won .wheel { animation: wheelWin 1.2s var(--ease-out); }
@keyframes wheelWin {
  0%   { box-shadow: 0 0 0 3px var(--accent), var(--shadow-lg); }
  30%  { box-shadow: 0 0 0 9px rgba(212,175,55,.35), 0 0 42px rgba(212,175,55,.55); }
  100% { box-shadow: 0 0 0 3px var(--accent), var(--shadow-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .wheel-hub.is-spinning i,
  .wheel-stage.is-won .wheel { animation: none; }
}

/* ==========================================================================
   OVERVIEW v2 — single column, one idea per card
   ========================================================================== */

.ov2 { display: grid; gap: 14px; max-width: 620px; margin: 0 auto; }

/* ------------------------------------------------------------ balance --- */
.ov2-bal {
  padding: 26px 22px 22px;
  text-align: center;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.ov2-bal .label {
  display: block;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; color: var(--muted);
}
.ov2-bal .value {
  display: flex; align-items: baseline; justify-content: center;
  gap: 8px; flex-wrap: wrap; margin: 10px 0 4px;
}
.ov2-bal .value .num {
  font-family: var(--mono);
  font-size: clamp(26px, 7vw, 38px);
  font-weight: 800; letter-spacing: -.03em;
}
.ov2-bal .value .cur { font-size: 13px; font-weight: 700; color: var(--accent); }

.ov2-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.ov2-actions .btn { width: 100%; }

.ov2-min {
  margin-top: 11px;
  font-size: 11.5px;
  color: var(--muted);
}

/* ---------------------------------------------------- today vs prior --- */
.ov2-today {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
}
.t2 { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.t2.is-end { text-align: right; }
.t2 .k {
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.t2 .v {
  font-family: var(--mono); font-size: 26px; font-weight: 800;
  letter-spacing: -.03em; line-height: 1.1;
}
.t2 .v.is-muted { color: var(--muted); font-size: 21px; }
.t2 .u { font-size: 10.5px; color: var(--muted); }

.t2-delta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 800; white-space: nowrap;
  background: var(--surface-3); color: var(--muted);
  border: 1px solid var(--border);
}
.t2-delta.is-up {
  background: var(--success-soft); color: var(--success); border-color: transparent;
}
.t2-delta.is-down {
  background: var(--danger-soft); color: var(--danger); border-color: transparent;
}
.t2-delta.is-new {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line);
}

/* -------------------------------------------------------------- level --- */
.ov2-lvl { padding: 18px 20px 20px; }
.ov2-lvl-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ov2-lvl-top .badge {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 13px; display: grid; place-items: center;
  font-size: 17px; color: var(--on-accent);
  background: var(--accent-grad); box-shadow: var(--shadow-accent);
}
.ov2-lvl-top b { display: block; font-size: 14.5px; }
.ov2-lvl-top span { font-size: 11.5px; color: var(--muted); }
.ov2-lvl .xp-meta { margin-top: 9px; }

/* ---------------------------------------------------- activity icons --- */
.act-ico {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 10px; display: grid; place-items: center;
  font-size: 12.5px;
  background: var(--accent-soft); color: var(--accent);
}
.act-ico.is-wheel  { background: var(--info-soft);    color: var(--info); }
.act-ico.is-coupon { background: var(--success-soft); color: var(--success); }

/* ------------------------------------------------ chart: average line --- */
.chart7 { position: relative; }

.c7-avg {
  position: absolute;
  left: 18px; right: 18px;
  border-top: 1px dashed var(--border-strong);
  pointer-events: none;
  z-index: 1;
}
.c7-avg span {
  position: absolute; right: 0; top: -8px;
  padding: 1px 6px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--border);
  font-size: 9px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}

/* Best day of the week gets a subtle crown of its own. */
.c7-col.is-best .c7-bar {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--accent) 85%, transparent),
              color-mix(in srgb, var(--accent) 45%, transparent));
}
.c7-col.is-best .c7-val { color: var(--accent); }

/* ==========================================================================
   ACCOUNT HOLD / LOCK PAGE
   ========================================================================== */

.lock-wrap { max-width: 500px; margin: 0 auto; display: grid; gap: 14px; }

.lock-card { padding: 32px 24px 24px; text-align: center; }
.lock-card.is-banned { border-color: var(--danger); }

.lock-top { display: grid; justify-items: center; gap: 12px; margin-bottom: 24px; }

.lock-ico {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 22px;
  font-size: 26px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
}
.lock-card.is-banned .lock-ico {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: transparent;
}

.lock-card h1 { font-size: clamp(20px, 4.5vw, 25px); letter-spacing: -.03em; }
.lock-lead { font-size: 13px; color: var(--text-2); max-width: 380px; line-height: 1.6; }

/* --------------------------------------------------------- countdown --- */
.lock-timer {
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-bottom: 18px;
}
.lock-label {
  display: block;
  font-size: 10px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.lock-clock {
  font-size: clamp(36px, 11vw, 50px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.1;
  color: var(--accent);
  margin: 6px 0 14px;
  font-variant-numeric: tabular-nums;
}
.lock-track {
  height: 7px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.lock-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent-grad);
  transition: width 1s linear;
}
.lock-note { font-size: 11.5px; color: var(--muted); margin-top: 12px; }

/* ----------------------------------------------------------- details --- */
.lock-kv { text-align: left; padding: 0 2px; margin-bottom: 16px; }
.lock-kv .kv b.is-warn { color: var(--danger); }

.lock-warn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 13px 15px;
  margin-bottom: 18px;
  border-radius: var(--r);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.lock-warn i { margin-top: 2px; flex-shrink: 0; }

.lock-actions { display: grid; gap: 12px; justify-items: center; }
.lock-actions .btn { width: 100%; }
.lock-out { font-size: 12px; font-weight: 700; color: var(--muted); }
.lock-out:hover { color: var(--danger); }

/* -------------------------------------------------------------- tips --- */
.lock-tips { display: grid; gap: 8px; }
.lock-tip {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}
.lock-tip i { color: var(--accent); margin-top: 2px; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .lock-fill { transition: none; }
}

/* ==========================================================================
   LANDING PAGE
   ========================================================================== */

/* Trust row under the hero CTAs. */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 22px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust i { color: var(--success); font-size: 11px; }

/* Login card reassurance list. */
.login-perks { display: grid; gap: 8px; margin-top: 18px; }
.login-perks li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.45;
}
.login-perks i { color: var(--success); font-size: 11px; margin-top: 3px; flex-shrink: 0; }

/* ---------------------------------------------------------- earn grid --- */
.earn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.earn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 24px 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.earn:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent-line); }
.earn.is-primary { border-color: var(--accent-line); background: linear-gradient(160deg, var(--accent-soft), var(--surface) 60%); }

.earn .ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 17px;
  background: var(--accent-soft);
  color: var(--accent);
}
.earn .ico.is-blue  { background: var(--info-soft);    color: var(--info); }
.earn .ico.is-green { background: var(--success-soft); color: var(--success); }

.earn b { font-size: 15.5px; letter-spacing: -.01em; }
.earn p { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }

.earn .tag {
  margin-top: auto;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--text-2);
}

/* --------------------------------------------------------- tier rail --- */
.tier-rail {
  display: flex;
  gap: 10px;
  padding: 4px 2px 14px;
  scroll-snap-type: x mandatory;
}
.tier-rail::-webkit-scrollbar { height: 6px; }
.tier-rail::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }

.tier-chip {
  flex: 0 0 auto;
  width: 128px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 18px 12px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
}
.tier-chip .ico { font-size: 19px; color: var(--muted); }
.tier-chip b { font-size: 13px; }
.tier-chip .xp { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.tier-chip .bonus {
  margin-top: 3px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  font-size: 11px;
  font-weight: 800;
  color: var(--text-2);
}

.tier-chip.is-start .ico { color: var(--text-2); }
.tier-chip.is-top {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-soft), var(--surface));
}
.tier-chip.is-top .ico    { color: var(--accent); }
.tier-chip.is-top .bonus  { background: var(--accent-grad); color: var(--on-accent); }

.rail-note {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-size: 12px;
  color: var(--muted);
}
.rail-note i { color: var(--accent); }

/* ------------------------------------------------------ payout layout --- */
.payout-grid {
  display: grid;
  gap: 18px;
  align-items: start;
  max-width: 620px;
  margin-inline: auto;
}
@media (min-width: 900px) {
  .payout-grid { grid-template-columns: 1fr 320px; max-width: 980px; }
}

/* ----------------------------------------------------------------- faq --- */
.faq-list { display: grid; gap: 10px; max-width: 720px; margin-inline: auto; }

.faq {
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { color: var(--muted); font-size: 12px; transition: transform .25s var(--ease); }
.faq[open] summary i { transform: rotate(180deg); }
.faq[open] { border-color: var(--accent-line); }
.faq p {
  padding: 0 18px 17px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.65;
}

/* ----------------------------------------------------------- cta band --- */
.cta-band {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding: 46px 26px;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--accent-soft), var(--surface) 65%);
  border: 1px solid var(--accent-line);
}
.cta-band h2 { font-size: clamp(22px, 3.6vw, 32px); letter-spacing: -.03em; }
.cta-band p  { font-size: 14px; color: var(--text-2); }
.cta-band .btn { margin-top: 6px; }
.cta-sub { font-size: 11.5px; color: var(--muted); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .earn:hover { transform: none; }
  .faq summary i { transition: none; }
}

/* ==========================================================================
   LEGAL / HELP PAGES (terms, privacy, faq)
   ========================================================================== */

.legal { max-width: 760px; margin: 0 auto; }

.legal-head { text-align: center; margin-bottom: 26px; display: grid; justify-items: center; gap: 10px; }
.legal-ico {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 20px;
  font-size: 24px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
}
.legal-head h1 { font-size: clamp(24px, 5vw, 34px); letter-spacing: -.03em; }
.legal-head p  { font-size: 14px; color: var(--text-2); max-width: 460px; }
.legal-date {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Jump links */
.legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin-bottom: 22px;
}
.legal-toc a {
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-2);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.legal-toc a:hover { color: var(--accent); border-color: var(--accent-line); }

/* Document body */
.legal-body { padding: 30px 30px 34px; }

.legal-body h2 {
  font-size: 17px;
  letter-spacing: -.02em;
  margin: 30px 0 12px;
  padding-top: 4px;
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.legal-body h2:first-child { margin-top: 0; }

.legal-body p {
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--text-2);
  margin-bottom: 12px;
}
.legal-body b { color: var(--text); }

.legal-body ul { display: grid; gap: 9px; margin: 0 0 14px; padding: 0; list-style: none; }
.legal-body li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-2);
}
.legal-body li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Collected-data cards on the privacy page */
.legal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 16px 0 20px;
}
.legal-item {
  padding: 16px 16px 18px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.legal-item .ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  margin-bottom: 10px;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent);
}
.legal-item b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.legal-item p { font-size: 12px; margin: 0; line-height: 1.55; }

/* Footer CTA */
.legal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
  padding: 18px 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

/* ------------------------------------------------------------ faq page --- */
.faq-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 28px;
}
.faq-facts .fact {
  padding: 14px 15px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
}
.faq-facts .k {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.faq-facts b { font-size: 15px; letter-spacing: -.02em; }

.faq-group {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 26px 0 12px;
}
.faq-group:first-of-type { margin-top: 0; }

@media (max-width: 560px) {
  .legal-body { padding: 24px 20px 26px; }
}

/* ==========================================================================
   LANDING PAGE v2
   Cold ad traffic lands here, so the page has to read as a product rather
   than a utility: one obvious action, real numbers, proof it pays out.
   ========================================================================== */

.lp { overflow-x: clip; }

/* ------------------------------------------------------------------ hero -- */
/* Black in both themes — the coin artwork's rim is black, so any lighter
   backdrop would reveal the cutout edge. Tokens are re-declared locally
   rather than themed, because this band is deliberately theme-independent. */
.lp-hero {
  position: relative;
  padding: 46px 0 54px;
  background: #000;
  color: #fff;
  overflow: hidden;
  text-align: center;
}

.lp-hero-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 420px at 50% 42%, rgba(227, 192, 92, .16), transparent 68%),
    radial-gradient(420px 260px at 12% 8%,  rgba(227, 192, 92, .08), transparent 70%);
}

.lp-hero-inner { position: relative; }

.lp-hero .lp-badge {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  color: #d8d4c9;
  box-shadow: none;
}
.lp-hero .lp-badge b { color: #fff; }

.lp-h1 {
  margin: 20px auto 0;
  max-width: 15ch;
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 800;
  color: #fff;
}
.lp-grad {
  background: linear-gradient(135deg, #F5E1A3 0%, #E3C05C 48%, #C9A227 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-h1-sub { display: block; }

/* ------------------------------------------------------------ coin stage -- */
.lp-coins {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(-40px, -3vw, 0px);
  margin: 6px auto 4px;
  max-width: 760px;
  perspective: 1400px;
  perspective-origin: 50% 45%;
}

.lp-coin {
  display: block;
  flex: 0 0 auto;
  transform-style: preserve-3d;
  /* Flips out of the screen toward the viewer, then settles. */
  animation: coinIn 1s var(--ease-out) both;
}
.lp-coin img { display: block; width: 100%; height: auto; }

/* The three sizes echo the source artwork's arrangement. */
.lp-coin.is-sm { width: clamp(84px, 15vw, 168px);  margin-right: -5%; z-index: 1; animation-delay: .05s; }
.lp-coin.is-lg { width: clamp(150px, 27vw, 300px); z-index: 3; animation-delay: .18s; }
.lp-coin.is-md { width: clamp(96px, 17vw, 190px);  margin-left: -5%;  z-index: 2; animation-delay: .31s; }

/* Idle drift, applied to the inner image so it composes with the entrance
   transform on the parent instead of fighting it. */
.lp-coin.is-sm img { animation: coinFloat 7s ease-in-out infinite; }
.lp-coin.is-lg img { animation: coinFloat 8s ease-in-out -1.5s infinite; }
.lp-coin.is-md img { animation: coinFloat 6.4s ease-in-out -3s infinite; }

@keyframes coinIn {
  from {
    opacity: 0;
    transform: translateZ(-620px) rotateY(-118deg) rotate(-16deg) scale(.55);
  }
  60%  { opacity: 1; }
  to {
    opacity: 1;
    transform: translateZ(0) rotateY(0) rotate(0) scale(1);
  }
}

@keyframes coinFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-11px) rotate(2.2deg); }
}

.lp-lead {
  margin: 14px auto 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  color: #c8c4ba;
}

/* Reward pill — the single most important number on the page. */
.lp-reward {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 20px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: rgba(227, 192, 92, .1);
  border: 1px solid rgba(227, 192, 92, .3);
}
.lp-reward b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: #E3C05C; }
.lp-reward span { font-size: 11.5px; font-weight: 600; color: #a9a498; }

/* --------------------------------------------------------- inline signup -- */
.lp-join { margin: 26px auto 0; max-width: 560px; }
.lp-join-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 7px 7px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.lp-join-row:focus-within {
  border-color: rgba(227, 192, 92, .6);
  background: rgba(255, 255, 255, .1);
}
.lp-join-ico { color: #8E8A80; font-size: 14px; }
.lp-join-row input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: #fff;
  font-size: 15px;
}
.lp-join-row input::placeholder { color: #837f75; }
.lp-join-row .btn { flex: 0 0 auto; }

.lp-perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin: 18px auto 0;
  max-width: 720px;
}
.lp-perks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #b3aea3;
}
.lp-perks i { color: #E3C05C; font-size: 11px; }
.lp-perks b { color: #fff; }

.lp-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 44px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.lp-stat b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: #fff;
}
.lp-stat span {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #8E8A80;
}

.lp-fp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-size: 11.5px;
  font-weight: 600;
  color: #837f75;
}
.lp-fp img { opacity: .75; }

/* ---------------------------------------------------------- trust strip -- */
.lp-trust { border-block: 1px solid var(--border); background: var(--surface); }
.lp-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 28px;
  padding: 15px 0;
}
.lp-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
}
.lp-trust-row i { color: var(--accent); font-size: 12px; }

/* --------------------------------------------------------- live activity -- */
.lp-live-sec { padding: 34px 0 0; }
.lp-live {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.lp-live-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.lp-live-track {
  display: flex;
  gap: 30px;
  width: max-content;
  padding: 13px 0;
  animation: lpMarquee 46s linear infinite;
}
.lp-live:hover .lp-live-track { animation-play-state: paused; }
@keyframes lpMarquee { to { transform: translateX(-50%); } }

.lp-live-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--text-2);
}
.lp-live-item i { color: var(--success); font-size: 11px; }
.lp-live-item b  { color: var(--text); font-weight: 700; }
.lp-live-item em { font-style: normal; font-weight: 800; color: var(--accent); }

/* ----------------------------------------------------------- proof panels -- */
/* Shared shell for the map, chart and contest board. Deliberately not the
   generic .card — these are display surfaces, not content boxes. */
.lp-proof { padding-top: 40px; }

.lp-panel {
  position: relative;
  padding: 26px 26px 24px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* The map panel stays dark in both themes so the dot field keeps its contrast. */
.lp-panel.is-dark {
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(227, 192, 92, .12), transparent 70%),
    #08090C;
  border-color: rgba(255, 255, 255, .1);
  color: #fff;
}
.lp-panel.is-dark .lp-panel-head h2 { color: #fff; }

.lp-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.lp-panel-head h2 { font-size: clamp(21px, 3vw, 28px); letter-spacing: -.03em; }
.lp-panel-head h3 { font-size: 19px; letter-spacing: -.025em; }

.lp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--accent);
}
.lp-panel.is-dark .lp-kicker { color: #E3C05C; }

.lp-panel-figs { display: flex; gap: 26px; text-align: right; }
.lp-panel-figs b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.lp-panel-figs span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #8E8A80;
}

/* ---------------------------------------------------------------- map ----- */
.lp-map-wrap { position: relative; }
.lp-map { display: block; width: 100%; height: 200px; }

.lp-map-tip {
  position: absolute;
  transform: translate(-50%, -160%);
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: #fff;
  color: #14120C;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

.lp-countries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 8px 26px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.lp-country { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.lp-country .flag { font-size: 15px; line-height: 1; }
.lp-country .nm {
  flex: 0 0 auto;
  width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #C8C4BA;
}
.lp-country .bar {
  flex: 1 1 auto;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.lp-country .bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #C9A227, #E3C05C);
}
.lp-country .n { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- duo grid -- */
.lp-duo { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: stretch; }

/* --------------------------------------------------------------- chart ---- */
.lp-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 190px;
  padding-top: 20px;
}
.lp-bar {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  height: 100%;
}
.lp-bar i {
  display: block;
  width: 100%;
  height: var(--h);
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-2));
  transition: filter .2s var(--ease);
  animation: barGrow .7s var(--ease-out) both;
  transform-origin: 50% 100%;
}
.lp-bar:hover i { filter: brightness(1.12); }
.lp-bar.is-empty i { background: var(--surface-3); }
.lp-bar .v {
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.lp-bar .d {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
}
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Stagger so the week reads left to right. */
.lp-bar:nth-child(1) i { animation-delay: .00s; }
.lp-bar:nth-child(2) i { animation-delay: .06s; }
.lp-bar:nth-child(3) i { animation-delay: .12s; }
.lp-bar:nth-child(4) i { animation-delay: .18s; }
.lp-bar:nth-child(5) i { animation-delay: .24s; }
.lp-bar:nth-child(6) i { animation-delay: .30s; }
.lp-bar:nth-child(7) i { animation-delay: .36s; }

/* ------------------------------------------------------- contest board ---- */
.lp-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lp-rank {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.lp-rank .pos {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-3);
  font-size: 12px;
  font-weight: 800;
  color: var(--text-2);
}
.lp-rank .who {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}
.lp-rank .cl { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); }
.lp-rank .pz { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--accent); }

/* Podium: gold, silver, bronze. */
.lp-rank.is-1 { border-color: var(--accent-line); background: linear-gradient(100deg, var(--accent-soft), var(--surface-2) 62%); }
.lp-rank.is-1 .pos { background: var(--accent-grad); color: var(--on-accent); }
.lp-rank.is-2 .pos { background: #C8CCD2; color: #22262B; }
.lp-rank.is-3 .pos { background: #D2A579; color: #2B1D10; }

.lp-board-foot {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--muted);
}
.lp-board-foot i { color: var(--accent); margin-right: 5px; }

/* ------------------------------------------------------- sticky mobile CTA */
.lp-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px -12px rgba(0, 0, 0, .35);
  transform: translateY(110%);
  transition: transform .32s var(--ease-out);
}
.lp-sticky.is-on { transform: translateY(0); }
.lp-sticky b    { display: block; font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.lp-sticky span { display: block; font-size: 11px; color: var(--muted); }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 900px) {
  .lp-lead { max-width: none; }
  .lp-duo  { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .lp-sticky { display: flex; }
  .lp-trust-row { justify-content: flex-start; }
}

@media (max-width: 620px) {
  /* Stack the field above the button — a side-by-side input plus button
     squeezes both below usable width on a phone. */
  .lp-join-row {
    flex-wrap: wrap;
    border-radius: var(--r-lg);
    padding: 12px;
    gap: 10px;
  }
  .lp-join-ico { display: none; }
  .lp-join-row input { flex: 1 0 100%; padding: 4px 4px 0; }
  .lp-join-row .btn { flex: 1 0 100%; }
}

@media (max-width: 620px) {
  .lp-panel { padding: 20px 18px 18px; }
  .lp-panel-head { flex-direction: column; gap: 12px; }
  .lp-panel-figs { text-align: left; }
  .lp-chart { height: 160px; gap: 6px; }
  .lp-rank .cl { display: none; }
}

@media (max-width: 560px) {
  .lp-hero { padding: 30px 0 36px; }
  .lp-stats { gap: 18px 26px; }
  .lp-stat b { font-size: 21px; }
  .lp-country .nm { width: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-live-track { animation: none; }
  .lp-badge .pulse { animation: none; }
  .lp-sticky { transition: none; }
  /* Coins still appear, they just do not fly in or drift. */
  .lp-coin,
  .lp-coin img,
  .lp-bar i { animation: none; }
}

/* Map empty state — shown until sign-ins have produced country data. */
.lp-map-empty {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  text-align: center;
  font-size: 12.5px;
  color: #8E8A80;
}
.lp-map-empty i { color: #E3C05C; margin-right: 7px; }

/* ==========================================================================
   DASHBOARD OVERVIEW v3
   Same language as the landing page: a black headline panel carrying the coin,
   then light surfaces for the working data. Previous version: overview_o3.php.
   ========================================================================== */

.ov3 { display: grid; gap: 16px; }

/* ------------------------------------------------------- balance panel ---- */
.ov3-bal {
  position: relative;
  border-radius: var(--r-xl);
  background:
    radial-gradient(720px 340px at 18% -20%, rgba(227, 192, 92, .16), transparent 68%),
    #08090C;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: #fff;
}
.ov3-bal-fx {
  position: absolute;
  inset: auto -10% -60% auto;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 192, 92, .13), transparent 62%);
  pointer-events: none;
}
.ov3-bal-in { position: relative; padding: 30px 30px 28px; max-width: 620px; }

/* The coin bleeds off the right edge — decorative, and it must never steal
   a tap from the buttons underneath. */
.ov3-coin {
  position: absolute;
  right: -54px;
  top: 50%;
  width: 300px;
  height: auto;
  transform: translateY(-50%);
  opacity: .96;
  pointer-events: none;
  animation: ov3Coin 9s ease-in-out infinite;
  filter: drop-shadow(0 22px 42px rgba(0, 0, 0, .6));
}
@keyframes ov3Coin {
  0%, 100% { transform: translateY(-50%) rotate(0deg); }
  50%      { transform: translateY(calc(-50% - 14px)) rotate(3deg); }
}

.ov3-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #8E8A80;
}
.ov3-value { display: flex; align-items: baseline; gap: 9px; margin-top: 10px; }
.ov3-value .num {
  font-size: clamp(28px, 5.4vw, 44px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  color: #fff;
}
.ov3-value .cur { font-size: 14px; font-weight: 700; color: #E3C05C; }

.ov3-usd {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  font-size: 11.5px;
  font-weight: 600;
  color: #C8C4BA;
}

.ov3-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Glass button, for use on the dark panel only. */
.btn-glass {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
}
.btn-glass:hover:not(.is-disabled) { background: rgba(255, 255, 255, .16); }

.ov3-toMin { margin-top: 20px; max-width: 380px; }
.ov3-toMin .track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.ov3-toMin .track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #C9A227, #E3C05C);
  animation: ov3Fill 1s var(--ease-out) both;
  transform-origin: 0 50%;
}
.ov3-toMin span { display: block; margin-top: 8px; font-size: 11.5px; color: #8E8A80; }
.ov3-toMin b { color: #E3C05C; }
@keyframes ov3Fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------------- figures ---- */
.ov3-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.ov3-fig {
  padding: 16px 18px 14px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.ov3-fig.is-accent { border-color: var(--accent-line); background: linear-gradient(150deg, var(--accent-soft), var(--surface) 62%); }
.ov3-fig .k {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
}
.ov3-fig .k i { color: var(--accent); font-size: 11px; }
.ov3-fig b {
  display: block;
  margin-top: 9px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  word-break: break-all;
}
.ov3-fig .u {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--muted);
}

.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 800;
  font-style: normal;
  background: var(--surface-3);
  color: var(--muted);
}
.delta i { font-size: 8px; }
.delta.is-up   { background: var(--success-soft); color: var(--success); }
.delta.is-down { background: var(--danger-soft);  color: var(--danger); }
.delta.is-new  { background: var(--accent-soft);  color: var(--accent); }

/* --------------------------------------------------------------- cards ---- */
.ov3-duo { display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; }

.ov3-card {
  padding: 22px 22px 20px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.ov3-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.ov3-card-head h3 { font-size: 18px; letter-spacing: -.025em; }
.ov3-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--accent);
}
.ov3-sum { font-size: 12px; font-weight: 700; color: var(--muted); }

/* --------------------------------------------------------------- chart ---- */
.ov3-chart { display: flex; align-items: flex-end; gap: 8px; height: 180px; }
.ov3-bar {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  height: 100%;
}
.ov3-bar i {
  display: block;
  width: 100%;
  height: var(--h);
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-2));
  transform-origin: 50% 100%;
  animation: barGrow .7s var(--ease-out) both;
}
.ov3-bar.is-empty i { background: var(--surface-3); }
.ov3-bar.is-today i { box-shadow: 0 0 0 2px var(--accent-line); }
.ov3-bar.is-best i  { filter: brightness(1.1); }
.ov3-bar .v { font-size: 11px; font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ov3-bar .d {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.ov3-bar.is-today .d { color: var(--accent); }

.ov3-bar:nth-child(1) i { animation-delay: .00s; }
.ov3-bar:nth-child(2) i { animation-delay: .06s; }
.ov3-bar:nth-child(3) i { animation-delay: .12s; }
.ov3-bar:nth-child(4) i { animation-delay: .18s; }
.ov3-bar:nth-child(5) i { animation-delay: .24s; }
.ov3-bar:nth-child(6) i { animation-delay: .30s; }
.ov3-bar:nth-child(7) i { animation-delay: .36s; }

/* --------------------------------------------------------------- level ---- */
.ov3-lvl-body { display: flex; align-items: center; gap: 16px; }
.ov3-badge {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  font-size: 21px;
  background: var(--accent-grad);
  color: var(--on-accent);
  box-shadow: var(--shadow-accent);
}
.ov3-xp-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--muted);
}
.ov3-xp-top b { font-size: 15px; color: var(--accent); }
.ov3-xp {
  height: 8px;
  margin: 8px 0 9px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.ov3-xp i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 999px;
  background: var(--accent-grad);
  transform-origin: 0 50%;
  animation: ov3Fill 1.1s var(--ease-out) both;
}
.ov3-xp-note { font-size: 11.5px; color: var(--muted); }
.ov3-xp-note b { color: var(--text-2); }

.ov3-lvl-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--muted);
}
.ov3-lvl-foot i { color: var(--success); margin-right: 6px; }
.ov3-lvl-foot b { color: var(--accent); }

/* ---------------------------------------------------------- responsive ---- */
@media (max-width: 900px) {
  .ov3-duo { grid-template-columns: 1fr; }
  .ov3-coin { width: 230px; right: -76px; opacity: .5; }
}

@media (max-width: 620px) {
  .ov3-bal-in { padding: 24px 20px 22px; padding-right: 96px; }
  /* Kept on phones, scaled down and tucked into the corner. */
  .ov3-coin {
    width: 118px;
    right: -22px;
    top: 18px;
    transform: none;
    opacity: .9;
    animation-name: ov3CoinSm;
  }
  .ov3-actions .btn { flex: 1 1 100%; }
  .ov3-chart { height: 150px; gap: 5px; }
  .ov3-card { padding: 18px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ov3-coin,
  .ov3-bar i,
  .ov3-xp i,
  .ov3-toMin .track i { animation: none; }
}

/* ==========================================================================
   FAUCET CLAIM PAGE
   The claim stage carries the coin and the reward; the verify panel is a
   separate surface below it, so opening it never resizes the stage.
   ========================================================================== */

.fc-stage {
  position: relative;
  border-radius: var(--r-xl);
  background:
    radial-gradient(680px 320px at 20% -25%, rgba(227, 192, 92, .18), transparent 66%),
    #08090C;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: #fff;
}
.fc-stage-fx {
  position: absolute;
  inset: auto -20% -70% auto;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 192, 92, .14), transparent 62%);
  pointer-events: none;
}
.fc-stage-in {
  position: relative;
  padding: 30px 28px 24px;
  max-width: 460px;
}

/* Decorative and never interactive — the claim button sits beneath it. */
.fc-coin {
  position: absolute;
  right: -64px;
  top: 50%;
  width: 290px;
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
  filter: drop-shadow(0 24px 46px rgba(0, 0, 0, .62));
  animation: fcCoin 8s ease-in-out infinite;
}
@keyframes fcCoin {
  0%, 100% { transform: translateY(-50%) rotate(0deg)   scale(1); }
  50%      { transform: translateY(calc(-50% - 16px)) rotate(4deg) scale(1.03); }
}

/* Claimed: the coin spins away as the reward flies to the header balance. */
.fc-coin.is-won { animation: fcCoinWin .9s var(--ease-out) both; }
@keyframes fcCoinWin {
  0%   { transform: translateY(-50%) rotateY(0deg)   scale(1); }
  55%  { transform: translateY(-58%) rotateY(180deg) scale(1.1); }
  100% { transform: translateY(-50%) rotateY(360deg) scale(1); }
}

.fc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(227, 192, 92, .12);
  border: 1px solid rgba(227, 192, 92, .28);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #E3C05C;
}
.fc-kicker .pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E3C05C;
  box-shadow: 0 0 0 0 rgba(227, 192, 92, .6);
  animation: lpPulse 2s infinite;
}

.fc-amount { display: flex; align-items: baseline; gap: 9px; margin-top: 16px; }
.fc-amount .num {
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  color: #fff;
}
.fc-amount .cur { font-size: 15px; font-weight: 700; color: #E3C05C; }

.fc-usd {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  font-size: 11.5px;
  font-weight: 600;
  color: #C8C4BA;
}

.fc-bonus { margin-top: 14px; font-size: 12.5px; color: #B3AEA3; }
.fc-bonus i { color: #E3C05C; margin-right: 6px; }
.fc-bonus b { color: #E3C05C; }
.fc-bonus a { color: #E3C05C; font-weight: 700; text-decoration: underline; }

.fc-btn { margin-top: 22px; }
.fc-stage .claim-status { color: #8E8A80; }

/* ------------------------------------------------- ready / cooldown ------ */
/* Replaces the old gate button. The stage now reports state and points down
   the page; the only button left is the one that actually pays out. */
.fc-ready { margin-top: 20px; display: grid; gap: 10px; }

.fc-ready-state {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.fc-ready-state i { color: #E3C05C; font-size: 14px; }
.fc-ready-state b { color: #E3C05C; font-variant-numeric: tabular-nums; }

/* Only meaningful mid-cooldown; at zero it simply sits full and quiet. */
.fc-bar {
  display: block;
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.fc-bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #B99433, #E3C05C);
}

.fc-ready-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #8E8A80;
}
.fc-ready-cue i { color: #E3C05C; animation: fcCue 1.9s ease-in-out infinite; }
@keyframes fcCue {
  0%, 100% { transform: translateY(0);   opacity: .55; }
  50%      { transform: translateY(3px); opacity: 1; }
}

/* ---------------------------------------------------- countdown clock --- */
/* Tabular figures and a reserved width: hundredths change every frame, and
   proportional digits would resize the label sixty times a second, which reads
   as a glitch rather than a timer. */
.fc-clock {
  display: inline-block;
  min-width: 6.2ch;
  text-align: left;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 800;
}

/* Counting down: locked, but not greyed into the furniture. The default
   disabled treatment (45% opacity, grayscale) is what makes the wait feel
   dead — a button that is visibly working reads as a shorter wait than a
   button that looks broken. */
.btn.is-counting:disabled {
  opacity: 1;
  filter: none;
  cursor: default;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
  box-shadow: none;
}
.btn.is-counting:disabled .btn-progress { background: var(--accent-line); }

/* --------------------------------------------------------- lead banner --- */
/* Sits between the two .page-narrow columns so a 728 unit gets its own width
   instead of being clipped by the 640px reading column. */
.ad-lead {
  max-width: 760px;
  margin: 18px auto;
}

/* ------------------------------------------------------- verify panel ---- */
/* Now a standalone surface rather than a card interior. */
.verify.open { margin-top: 14px; }

/* Permanently expanded. The collapsing variant above is kept for any other
   page still using it; here the panel is part of the page, so max-height must
   be released or a tall captcha (or an error line under it) gets clipped. */
.verify.is-static {
  max-height: none;
  overflow: visible;
  opacity: 1;
}

.vfy-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.vfy-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}
.vfy-step i { color: var(--accent); font-size: 12px; }
.vfy-hint { font-size: 11.5px; font-weight: 600; color: var(--text-3, var(--text-2)); }

.verify-inner .claim-status {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
}

/* Spent: the captcha and puzzle are used up and the page is waiting on the
   timer to reload. Dimmed and inert, but still occupying its space so the
   ad beneath it does not jump off screen. */
.verify.is-spent .cap-swap,
.verify.is-spent .ab-grid { opacity: .45; pointer-events: none; }
.verify-inner {
  padding: 22px;
  padding-top: 22px;
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------- meta strip --- */
.fc-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 20px;
  margin: 14px 0;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.fc-meta span { display: inline-flex; align-items: center; gap: 7px; }
.fc-meta i { color: var(--accent); font-size: 11px; }

/* ---------------------------------------------------------- responsive --- */
@media (max-width: 860px) {
  .fc-stage-in { max-width: none; padding-right: 150px; }
  .fc-coin { width: 210px; right: -52px; }
}

/* The coin stays visible on phones — just smaller, tucked to the corner and
   behind the content, rather than removed. */
@media (max-width: 620px) {
  .fc-stage-in { padding: 24px 20px 20px; }
  /* Separate animation name: redefining @keyframes inside a media query can
     leak to the desktop rule in some engines. */
  .fc-coin {
    width: 132px;
    right: -26px;
    top: 22px;
    transform: none;
    opacity: .9;
    animation-name: fcCoinSm;
  }
  .fc-amount .num { font-size: 30px; }
  .fc-meta { justify-content: flex-start; }
  .verify-inner { padding: 18px 16px; }
}

@media (max-width: 400px) {
  .fc-coin { width: 104px; right: -20px; top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-coin { animation: none; }
  .fc-kicker .pulse { animation: none; }
}

/* Phone-sized coin drift — paired with .fc-coin under 620px. */
@keyframes fcCoinSm {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(4deg); }
}

/* Phone-sized coin drift — paired with .ov3-coin under 620px. */
@keyframes ov3CoinSm {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(3deg); }
}

/* Contest standing, in the faucet header slot where the balance used to sit.
   The balance is already in the nav wallet chip; rank is new information and
   gives the claim loop something to climb. */
.fc-rank {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 8px 14px 8px 9px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.fc-rank:hover { border-color: var(--accent-line); transform: translateY(-1px); }

.fc-rank .pos {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-2);
}
.fc-rank .txt { display: flex; flex-direction: column; line-height: 1.25; }
.fc-rank .txt b {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
}
.fc-rank .txt em { font-style: normal; font-size: 12.5px; font-weight: 700; }
.fc-rank .pz {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--success-soft);
  font-size: 11px;
  font-weight: 800;
  color: var(--success);
}

/* In the prize places — worth making unmistakable. */
.fc-rank.is-paid { border-color: var(--accent-line); background: linear-gradient(110deg, var(--accent-soft), var(--surface) 60%); }
.fc-rank.is-paid .pos { background: var(--accent-grad); color: var(--on-accent); box-shadow: var(--shadow-accent); }

.fc-rank.is-out .pos { background: var(--surface-3); color: var(--muted); font-size: 12px; }
.fc-rank.is-out .txt em { color: var(--muted); font-weight: 600; }

@media (max-width: 560px) {
  /* Full width under the title rather than crushed beside it. */
  .fc-rank { width: 100%; justify-content: flex-start; }
}

/* ==========================================================================
   DAILY CONTEST
   Prize pool as the headline, a real podium for the top three, then the rest
   as a scannable list. Previous version: leaderboard_o1.php.
   ========================================================================== */

.ct-clock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-size: 12.5px;
}
.ct-clock i { color: var(--accent); }
.ct-clock b { font-weight: 800; font-variant-numeric: tabular-nums; }
.ct-clock em { font-style: normal; color: var(--muted); }

/* ----------------------------------------------------------- prize pool -- */
.ct-hero {
  position: relative;
  margin-bottom: 14px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(620px 300px at 22% -25%, rgba(227, 192, 92, .18), transparent 66%),
    #08090C;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: #fff;
}
.ct-hero-fx {
  position: absolute;
  inset: auto -15% -70% auto;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 192, 92, .13), transparent 62%);
  pointer-events: none;
}
.ct-hero-in { position: relative; padding: 26px 26px 24px; max-width: 440px; }

.ct-coin {
  position: absolute;
  right: -34px;
  top: 50%;
  width: 210px;
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .6));
  animation: fcCoin 8s ease-in-out infinite;
}

.ct-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(227, 192, 92, .12);
  border: 1px solid rgba(227, 192, 92, .28);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #E3C05C;
}
.ct-kicker .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #E3C05C;
  box-shadow: 0 0 0 0 rgba(227, 192, 92, .6);
  animation: lpPulse 2s infinite;
}

.ct-pool { display: flex; align-items: baseline; gap: 9px; margin-top: 15px; }
.ct-pool .num {
  font-size: clamp(28px, 5.6vw, 42px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
}
.ct-pool .cur { font-size: 14px; font-weight: 700; color: #E3C05C; }
.ct-pool-usd { display: inline-block; margin-top: 8px; font-size: 12px; color: #8E8A80; }

.ct-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: 12px; color: #B3AEA3; }
.ct-hero-meta i { color: #E3C05C; margin-right: 6px; }

/* Growth note under the raffle pool. max-width keeps it off the coin art on
   desktop; the hero is dark in both themes, so colours are literal like the
   rest of .ct-*. */
.ct-pool-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 420px;
  margin: 16px 0 0;
  padding: 9px 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #B3AEA3;
  background: rgba(227, 192, 92, .06);
  border: 1px solid rgba(227, 192, 92, .16);
  border-radius: 10px;
}
.ct-pool-note i { flex: none; margin-top: 2px; font-size: 11px; color: #E3C05C; }

@media (max-width: 560px) {
  .ct-pool-note { max-width: none; }
}

/* -------------------------------------------------------------- my rank -- */
.ct-me {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.ct-me.is-paid { border-color: var(--accent-line); background: linear-gradient(110deg, var(--accent-soft), var(--surface) 58%); }
.ct-me .pos {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 48px;
  height: 48px;
  padding: 0 10px;
  border-radius: 16px;
  background: var(--surface-3);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.03em;
}
.ct-me.is-paid .pos { background: var(--accent-grad); color: var(--on-accent); box-shadow: var(--shadow-accent); }
.ct-me.is-out .pos { color: var(--faint); }
.ct-me b { display: block; font-size: 15px; letter-spacing: -.02em; }
.ct-me .grow > span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.ct-me .grow b.mono { display: inline; color: var(--accent); }
.ct-me .gap { flex: 0 0 auto; text-align: right; }
.ct-me .gap b { font-size: 16px; color: var(--accent); }
.ct-me .gap em { font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ct-me .gap.is-lead b { color: #E3C05C; }

/* -------------------------------------------------------------- podium --- */
.ct-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}
.ct-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 16px 10px 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: 0;
  text-align: center;
  animation: ctRise .6s var(--ease-out) both;
  transform-origin: 50% 100%;
}
.ct-step.is-1 { animation-delay: .05s; }
.ct-step.is-2 { animation-delay: .16s; }
.ct-step.is-3 { animation-delay: .26s; }
@keyframes ctRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.ct-step .crown { font-size: 20px; color: var(--faint); }
.ct-step.is-1 .crown { color: #E3C05C; font-size: 26px; }
.ct-step.is-2 .crown { color: #B9BEC6; }
.ct-step.is-3 .crown { color: #C89A6B; }

.ct-step .who {
  font-size: 12.5px;
  font-weight: 800;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ct-step .who.is-me { color: var(--accent); }
.ct-step .score { font-size: 11px; color: var(--muted); }
.ct-step .prize {
  margin-top: 2px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--success-soft);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--success);
}

/* The plinth height is what makes it read as a podium. */
.ct-step .plinth {
  display: grid;
  place-items: center;
  width: 100%;
  margin-top: 12px;
  border-radius: var(--r) var(--r) 0 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--on-accent);
}
.ct-step.is-1 .plinth { height: 78px; background: var(--accent-grad); }
.ct-step.is-2 .plinth { height: 56px; background: linear-gradient(180deg, #DDE1E6, #B9BEC6); color: #22262B; }
.ct-step.is-3 .plinth { height: 42px; background: linear-gradient(180deg, #E0B587, #C89A6B); color: #2B1D10; }

.ct-step.is-empty { opacity: .5; }
.ct-step.is-empty .plinth { background: var(--surface-3); color: var(--muted); }

/* --------------------------------------------------------------- cards --- */
.ct-card {
  margin-bottom: 14px;
  padding: 20px 20px 18px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.ct-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.ct-card-head h3 { font-size: 17px; letter-spacing: -.025em; }
.ct-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--accent);
}

/* ----------------------------------------------------------- standings --- */
.ct-rows { display: grid; gap: 6px; max-height: 460px; }
.ct-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid transparent;
}
.ct-row.is-me { border-color: var(--accent-line); background: var(--accent-soft); }
.ct-row .n {
  flex: 0 0 auto;
  width: 26px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ct-row .who { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.ct-row .you {
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--accent-grad);
  color: var(--on-accent);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ct-row .meta { margin-top: 2px; font-size: 11px; color: var(--muted); }
.ct-row .pz { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--success); }

/* -------------------------------------------------------------- prizes --- */
.ct-prizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 8px; }
.ct-prize {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.ct-prize.is-top { border-color: var(--accent-line); }
.ct-prize.is-mine { background: linear-gradient(150deg, var(--accent-soft), var(--surface-2) 62%); border-color: var(--accent); }
.ct-prize .pl {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.ct-prize .amt { font-size: 14px; font-weight: 800; letter-spacing: -.02em; word-break: break-all; }
.ct-prize .usd { font-size: 10.5px; color: var(--faint); }
.ct-prize .tag {
  align-self: flex-start;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--accent-grad);
  color: var(--on-accent);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.ct-note { margin-top: 14px; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
.ct-note i { color: var(--accent); margin-right: 6px; }

/* ---------------------------------------------------------- responsive --- */
@media (max-width: 620px) {
  .ct-hero-in { padding: 22px 18px 20px; padding-right: 110px; }
  .ct-coin { width: 132px; right: -24px; top: 16px; transform: none; animation-name: fcCoinSm; }
  .ct-me { flex-wrap: wrap; }
  .ct-me .gap, .ct-me .btn { width: 100%; text-align: left; }
  .ct-podium { gap: 6px; }
  .ct-step { padding: 12px 6px 0; }
  .ct-step .who { font-size: 11px; }
  .ct-step .score { font-size: 10px; }
  .ct-step.is-1 .plinth { height: 58px; }
  .ct-step.is-2 .plinth { height: 42px; }
  .ct-step.is-3 .plinth { height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-step { animation: none; }
  .ct-coin { animation: none; }
  .ct-kicker .pulse { animation: none; }
}

/* Contest payout history — status is the point of the row, so it is the one
   thing that carries colour. */
.ct-hist { display: grid; gap: 6px; }
.ct-hist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.ct-hist-row .pos {
  flex: 0 0 auto;
  min-width: 34px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.ct-hist-row b { display: block; font-size: 13px; }
.ct-hist-row .grow > span { display: block; font-size: 11px; color: var(--muted); }
.ct-hist-row .amt { flex: 0 0 auto; font-size: 13px; font-weight: 800; }
.ct-hist-row .st {
  flex: 0 0 auto;
  min-width: 92px;
  text-align: right;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

.ct-hist-row.is-paid    .amt { color: var(--success); }
.ct-hist-row.is-paid    .st  { color: var(--success); }
.ct-hist-row.is-pending { border-color: var(--accent-line); background: var(--accent-soft); }
.ct-hist-row.is-pending .amt,
.ct-hist-row.is-pending .st { color: var(--accent); }
.ct-hist-row.is-rejected .amt { color: var(--faint); text-decoration: line-through; }
.ct-hist-row.is-rejected .st  { color: var(--danger); }

.ct-hist-note {
  margin: -2px 0 4px 46px;
  font-size: 11px;
  color: var(--muted);
}
.ct-hist-note i { color: var(--danger); margin-right: 5px; }

/* ==========================================================================
   ADVERTISER
   ========================================================================== */

.ad-flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding: 13px 16px;
  border-radius: var(--r);
  font-size: 13px;
  line-height: 1.5;
}
.ad-flash.is-ok  { background: var(--success-soft); border: 1px solid var(--success); color: var(--success); }
.ad-flash.is-bad { background: var(--danger-soft);  border: 1px solid var(--danger);  color: var(--danger); }
.ad-flash i { margin-top: 2px; }

/* ---------------------------------------------------------- credit panel -- */
.adv-wallet {
  position: relative;
  margin-bottom: 14px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(620px 300px at 20% -25%, rgba(227, 192, 92, .16), transparent 66%),
    #08090C;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: #fff;
}
.adv-wallet-fx {
  position: absolute;
  inset: auto -15% -70% auto;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 192, 92, .13), transparent 62%);
  pointer-events: none;
}
.adv-wallet-in { position: relative; padding: 26px 26px 24px; max-width: 440px; }
.adv-coin {
  position: absolute;
  right: -34px; top: 50%;
  width: 200px; height: auto;
  transform: translateY(-50%);
  pointer-events: none;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .6));
  animation: fcCoin 8s ease-in-out infinite;
}

.adv-label {
  display: block;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: #8E8A80;
}
.adv-bal { display: flex; align-items: baseline; gap: 9px; margin-top: 10px; }
.adv-bal .num { font-size: clamp(28px, 5.4vw, 42px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.adv-bal .cur { font-size: 14px; font-weight: 700; color: #E3C05C; }
.adv-note { margin-top: 10px; font-size: 12px; color: #8E8A80; }

.adv-figs { display: flex; gap: 30px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.adv-figs b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.adv-figs span {
  display: block; margin-top: 2px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: #8E8A80;
}

/* --------------------------------------------------------------- forms ---- */
.adv-dep-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.adv-dep label,
.adv-form label { display: block; }
.adv-dep label > span,
.adv-form label > span {
  display: block; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 700;
  color: var(--text-2);
}
.adv-form label > span em { font-style: normal; font-weight: 500; color: var(--muted); }
.adv-form { display: grid; gap: 16px; }
.adv-form textarea.input { resize: vertical; min-height: 78px; }

.adv-hint { margin-top: 12px; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
.adv-hint i { color: var(--accent); margin-right: 5px; }

.adv-terms {
  margin-bottom: 16px;
  font-size: 12px; line-height: 1.6;
  color: var(--muted);
}
.adv-terms i { color: var(--accent); margin-right: 6px; }

/* --------------------------------------------------------------- plans ---- */
.adv-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.adv-plan { cursor: pointer; }
.adv-plan input { position: absolute; opacity: 0; pointer-events: none; }
.adv-plan .body {
  display: block;
  padding: 16px 16px 14px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 2px solid var(--border);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.adv-plan:hover .body { border-color: var(--accent-line); }
.adv-plan input:checked + .body {
  border-color: var(--accent);
  background: linear-gradient(150deg, var(--accent-soft), var(--surface-2) 62%);
}
.adv-plan input:focus-visible + .body { outline: 2px solid var(--accent); outline-offset: 2px; }
.adv-plan b { display: block; font-size: 15px; }
.adv-plan .price { display: block; margin-top: 4px; font-size: 20px; font-weight: 800; color: var(--accent); }
.adv-plan em { display: block; margin-top: 3px; font-style: normal; font-size: 11px; color: var(--muted); }
.adv-plan.is-short em { color: var(--danger); }

/* ------------------------------------------------------------- listings --- */
.adv-item {
  margin-bottom: 12px;
  padding: 18px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.adv-item.is-live { border-color: var(--success); }
.adv-item.is-wait { border-color: var(--accent-line); }
.adv-item.is-bad  { opacity: .78; }

.adv-item-head { display: flex; align-items: flex-start; gap: 14px; }
.adv-item-head .ico {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--border);
}
.adv-item-head .ico.is-blank {
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  border: 0;
}
.adv-item-head b { display: block; font-size: 15px; }
.adv-item-head p { margin-top: 3px; font-size: 12.5px; color: var(--text-2); }
.adv-item-head .url {
  display: inline-block; margin-top: 5px;
  font-family: var(--mono); font-size: 11px;
  color: var(--muted);
  word-break: break-all;
}
.adv-item-head .state {
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-2);
}
.adv-item.is-live .state { background: var(--success-soft); color: var(--success); }
.adv-item.is-wait .state { background: var(--accent-soft);  color: var(--accent); }
.adv-item.is-bad  .state { background: var(--danger-soft);  color: var(--danger); }

.adv-item-note { margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.adv-item-note i { color: var(--danger); margin-right: 5px; }

.adv-item-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.adv-item-stats b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.adv-item-stats span {
  display: block; margin-top: 2px;
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted);
}

.adv-extend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted);
}
.adv-extend .input { width: auto; flex: 1 1 150px; }

/* ------------------------------------------------- public sponsored rail -- */
.spon-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.spon-tag {
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted);
}
.spon-head a { font-size: 11.5px; font-weight: 700; color: var(--accent); }
.spon-head a i { font-size: 9px; margin-left: 3px; }

.spon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.spon {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.spon:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.spon img, .spon .ico {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 11px;
  object-fit: cover;
}
.spon .ico { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.spon .txt { min-width: 0; }
.spon b {
  display: block; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spon em {
  display: block; margin-top: 2px;
  font-style: normal; font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 620px) {
  .adv-wallet-in { padding: 22px 18px 20px; padding-right: 110px; }
  .adv-coin { width: 130px; right: -24px; top: 16px; transform: none; animation-name: fcCoinSm; }
  .adv-dep-row { grid-template-columns: 1fr; }
  .adv-item-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .adv-coin { animation: none; }
}

/* ------------------------------------------------- sponsored top bar ----- */
/* The whole bar is the link. Deliberately quieter than a primary button: it
   sits beside the claim CTA and must not compete with it. */
.sbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
  padding: 11px 14px;
  overflow: hidden;
  border-left: 4px solid var(--accent);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: inherit;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.sbar:hover {
  border-color: var(--accent-line);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.sbar:active { transform: none; }
.sbar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sbar.is-empty { background: var(--surface-2); border-color: var(--border); border-left-color: var(--accent-2); border-left-style: dashed; }

.sbar-ico {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 11px;
  object-fit: cover;
  border: 1px solid var(--border);
}
.sbar-ico.is-blank {
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  border: 0; font-size: 15px;
}

.sbar-txt { flex: 1 1 auto; min-width: 0; }
.sbar-top { display: flex; align-items: center; gap: 8px; }
.sbar-top b {
  font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Disclosure as a kicker above the title.
   The earlier vertical ribbon needed 55px of height for the word "Sponsored"
   but a one-line bar on mobile only offers 54px — with overflow:hidden it
   clipped. Horizontal text cannot clip, and it still leaves the title and
   description the full width, which was the point of moving it off the title
   row in the first place. */
.sbar-kick {
  display: block;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  line-height: 1.2;
}
.sbar.is-empty .sbar-kick { color: var(--accent-2); }
.sbar-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  overflow: hidden;
}

/* Affordance instead of a button — signals "tap me" without shouting. */
.sbar-go {
  display: grid; place-items: center;
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11px;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.sbar:hover .sbar-go {
  background: var(--accent-grad);
  color: var(--on-accent);
  transform: translateX(2px);
}

/* Phones: stays one row. The text truncates rather than the bar growing a
   second row for a full-width button. */
@media (max-width: 620px) {
  .sbar { gap: 11px; padding: 10px 12px; }
  .sbar-ico { width: 34px; height: 34px; }
  .sbar-top b { font-size: 13px; white-space: normal; }
  .sbar-desc { font-size: 11.5px; }
}

@media (max-width: 380px) {
  .sbar-desc { font-size: 11px; }
  .sbar-go { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .sbar, .sbar-go { transition: none; }
  .sbar:hover { transform: none; }
  .sbar:hover .sbar-go { transform: none; }
}

/* ==========================================================================
   DAILY GOAL + STREAK
   ========================================================================== */

.goal {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--accent-line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.goal.is-done { border-color: var(--success); }
.goal.is-risk { border-color: var(--danger); }

.goal-main { flex: 1 1 auto; min-width: 0; padding: 18px 20px; }
.goal-head { margin-bottom: 12px; }
.goal-kick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--accent);
}
.goal.is-done .goal-kick { color: var(--success); }
.goal-head b { display: block; margin-top: 6px; font-size: 15px; letter-spacing: -.02em; }
.goal-head b .mono { color: var(--accent); }

.goal-bar {
  height: 9px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.goal-bar i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 999px;
  background: var(--accent-grad);
  transform-origin: 0 50%;
  animation: ov3Fill 1s var(--ease-out) both;
  transition: width .5s var(--ease-out);
}
.goal.is-done .goal-bar i { background: linear-gradient(90deg, #16843F, #2FBF63); }

.goal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  font-size: 11.5px;
  color: var(--muted);
}
.goal-meta a { font-weight: 700; color: var(--accent); }
.goal-meta a i { font-size: 9px; margin-left: 3px; }

/* Streak column — the number people come back for. */
.goal-streak {
  flex: 0 0 auto;
  width: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 16px 12px;
  background: var(--surface-2);
  border-left: 1px solid var(--border);
  text-align: center;
}
.goal-streak .flame { font-size: 19px; color: var(--faint); }
.goal-streak .flame.is-on { color: var(--accent); animation: flameLick 2.4s ease-in-out infinite; }
@keyframes flameLick {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}
.goal-streak b { font-size: 27px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.goal-streak .lbl {
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted);
}
.goal-streak .mult {
  margin-top: 5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  font-size: 10px; font-weight: 800;
  color: var(--accent);
}

.goal-warn {
  margin-top: -6px;
  padding: 10px 14px;
  border-radius: var(--r);
  background: var(--danger-soft);
  font-size: 12px;
  color: var(--danger);
}
.goal-warn i { margin-right: 6px; }

/* ------------------------------------------------ compact strip (faucet) -- */
.goal-strip {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
  padding: 12px 15px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--accent-line);
  box-shadow: var(--shadow-sm);
  transition: border-color .3s var(--ease);
}
.goal-strip.is-done, .goal-strip.is-hit { border-color: var(--success); }
.goal-strip .ico {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
}
.goal-strip.is-done .ico, .goal-strip.is-hit .ico { background: var(--success-soft); color: var(--success); }
.goal-strip b { display: block; font-size: 13px; }
.goal-strip b .mono { color: var(--accent); }
.goal-strip .sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.goal-strip .bar {
  height: 6px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.goal-strip .bar i {
  display: block; height: 100%; width: var(--w);
  border-radius: 999px;
  background: var(--accent-grad);
  transition: width .5s var(--ease-out);
}
.goal-strip .streak {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  font-size: 12px; font-weight: 800;
  color: var(--muted);
}
.goal-strip .streak.is-on, .goal-strip .streak i { color: var(--accent); }

@media (max-width: 620px) {
  .goal { flex-direction: column; }
  .goal-streak {
    width: auto;
    flex-direction: row;
    gap: 10px;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .goal-streak b { font-size: 20px; }
  .goal-streak .mult { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .goal-streak .flame.is-on { animation: none; }
  .goal-bar i { animation: none; }
}

/* ==========================================================================
   DAILY RAFFLE
   ========================================================================== */

.raffle {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* Filled vs empty tickets read as progress without needing a number. */
.raffle-tix { display: flex; gap: 5px; flex: 0 0 auto; }
.raffle-tix .tix {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--surface-3);
  color: var(--faint);
  font-size: 12px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.raffle-tix .tix.is-on {
  background: var(--accent-grad);
  color: var(--on-accent);
  box-shadow: var(--shadow-accent);
}

.raffle b { display: block; font-size: 14px; letter-spacing: -.02em; }
.raffle .grow > span { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.raffle .grow .mono { color: var(--accent); }

.raffle-prize { flex: 0 0 auto; text-align: right; }
.raffle-prize b { font-size: 15px; color: var(--accent); }
.raffle-prize em {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
}

/* ----------------------------------------------------- faucet tix strip -- */
.tix-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-2);
}
.tix-strip > i { color: var(--accent); }
.tix-strip b { color: var(--accent); font-weight: 800; }
.tix-strip.is-max { border-color: var(--success); }
.tix-strip.is-max > i, .tix-strip.is-max b { color: var(--success); }

/* --------------------------------------------------------- winners list -- */
.rf-winners { display: flex; flex-wrap: wrap; gap: 7px; }
.rf-win {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12px;
}
.rf-win i { color: var(--accent); font-size: 10px; }
.rf-win b { color: var(--success); font-size: 11.5px; }
.rf-win.is-me { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }

@media (max-width: 620px) {
  .raffle { flex-wrap: wrap; }
  .raffle .grow { flex: 1 1 100%; order: 3; }
  .raffle-prize { margin-left: auto; }
}

/* ==========================================================================
   RAFFLE PAGE
   ========================================================================== */

.rfp-you {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding: 18px 20px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--accent-line);
  box-shadow: var(--shadow-sm);
}
.rfp-you.is-max { border-color: var(--success); }
.rfp-you.is-out { border-color: var(--border); }

.rfp-tix { display: flex; gap: 6px; flex: 0 0 auto; }
.rfp-tix .tix {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--faint);
  font-size: 13px;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.rfp-tix .tix.is-on {
  background: var(--accent-grad);
  color: var(--on-accent);
  box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}
.rfp-you.is-max .tix.is-on { background: linear-gradient(135deg, #2FBF63, #16843F); color: #fff; }

.rfp-you b { display: block; font-size: 15px; letter-spacing: -.02em; }
.rfp-you .grow > span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.rfp-you .grow > span b { display: inline; color: var(--accent); }

.rfp-odds { flex: 0 0 auto; text-align: right; }
.rfp-odds b { font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--accent); }
.rfp-odds em {
  display: block;
  font-style: normal;
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted);
}

/* --------------------------------------------------------------- steps --- */
.rfp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.rfp-step { display: flex; align-items: flex-start; gap: 12px; }
.rfp-step .n {
  display: grid; place-items: center;
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px; font-weight: 800;
}
.rfp-step b { display: block; font-size: 13.5px; }
.rfp-step span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--muted); }

@media (max-width: 620px) {
  .rfp-you { flex-wrap: wrap; }
  .rfp-you .grow { flex: 1 1 100%; order: 3; }
  .rfp-odds { margin-left: auto; }
  .rfp-tix .tix { width: 30px; height: 30px; }
}

/* --------------------------------------------------- advertiser sub-nav -- */
/* Wallet / New listing / My listings. The dashboard nav has one "Advertise"
   entry, so without this the three advertiser pages cannot reach each other. */
.advnav {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  padding: 5px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.advnav::-webkit-scrollbar { display: none; }

.advnav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.advnav-item:hover { background: var(--surface-3); }
.advnav-item.active {
  background: var(--accent-grad);
  color: var(--on-accent);
  box-shadow: var(--shadow-accent);
}
.advnav-item i { font-size: 12px; }

.advnav-item .n {
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-2);
}
.advnav-item.active .n { background: rgba(0, 0, 0, .18); color: inherit; }

/* Something is waiting on review. */
.advnav-item .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 0 rgba(220, 38, 38, .5);
  animation: lpPulse 2s infinite;
}

@media (max-width: 480px) {
  .advnav-item { padding: 9px 12px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .advnav-item .dot { animation: none; }
}

/* ==========================================================================
   RESTORED / MISSING RULES
   .capg* was collateral from a CSS block cut (same one that took .advnav).
   .lp-raffle* and .ct-sum were referenced in markup but never had rules.
   ========================================================================== */

/* ---------------------------------------------------- captcha guide ------ */
.capg { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 18px; }
.capg[hidden] { display: none; }

.capg-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(2px);
}

.capg-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  animation: capgIn .28s var(--ease-out) both;
}
@keyframes capgIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.capg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.capg-head h3 { font-size: 18px; letter-spacing: -.025em; }
.capg-x {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-2);
  cursor: pointer;
}
.capg-x:hover { background: var(--border); }

/* Holds 16:9 before the player is injected, so the panel does not jump. */
.capg-video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 18px;
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
}
.capg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.capg-steps { margin: 0; padding-left: 20px; display: grid; gap: 9px; }
.capg-steps li { font-size: 13px; line-height: 1.55; color: var(--text-2); }
.capg-steps b { color: var(--text); }

.capg-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}
.capg-note i { color: var(--accent); margin-right: 6px; }

@media (max-width: 480px) {
  .capg-panel { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .capg-panel { animation: none; }
}

/* -------------------------------------------- landing raffle figures ----- */
.lp-raffle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}
.lp-raffle-fig {
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-align: center;
}
.lp-raffle-fig b {
  display: block;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--accent);
  word-break: break-all;
}
.lp-raffle-fig span {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
}

/* ------------------------------------------------- card-head total ------- */
.ct-sum { font-size: 12.5px; font-weight: 800; color: var(--success); white-space: nowrap; }

/* Antibot node label — inherits the node's colour, just needs sizing. */
.ab-text { font-size: 12px; font-weight: 700; }