/* Tipped2Win Console theme - core design system.
   Redesign 2026-08-13: "Vault" (dark) / "Paper" (light) - a calmer, warmer
   evolution of the original neon console look, per the concept Leon
   approved (Redesign Concept artifact, same day). Token NAMES are
   unchanged from the original system on purpose so every template/page
   that already references var(--gold), [data-accent], etc. re-skins for
   free with zero markup changes - only the token VALUES and a handful of
   component rules (buttons, nav, tab bar) changed. */

:root[data-theme="dark"]{
  --ink:#17130D; --panel:#221B12; --panel-alt:#2B2317; --deep-purple:#352C1B;
  --text:#F4EDDC; --muted:#B9AC8D;
  --gold:#DBA84B; --pink:#E26B92; --green:#43B279; --violet:#8E7EDC; --red:#DB5A4E;
  --glow-gold:0 0 16px rgba(219,168,75,.30); --glow-pink:0 0 16px rgba(226,107,146,.28);
  --glow-green:0 0 14px rgba(67,178,121,.28); --glow-violet:0 0 14px rgba(142,126,220,.28);
  --glow-red:0 0 14px rgba(219,90,78,.26);
  --border:rgba(219,168,75,.20); --border-soft:rgba(185,172,141,.14);
  --shadow-soft:0 30px 60px rgba(0,0,0,.45);
  --btn-ink:#1A1305;
}
:root[data-theme="light"]{
  --ink:#F3F5F8; --panel:#FFFFFF; --panel-alt:#ECEEF2; --deep-purple:#F1EEE4;
  --text:#181B21; --muted:#68707C;
  --gold:#A0721D; --pink:#C7466F; --green:#1D8B54; --violet:#6A59C7; --red:#C13A2F;
  --glow-gold:0 0 12px rgba(160,114,29,.20); --glow-pink:0 0 12px rgba(199,70,111,.18);
  --glow-green:0 0 12px rgba(29,139,84,.18); --glow-violet:0 0 12px rgba(106,89,199,.18);
  --glow-red:0 0 12px rgba(193,58,47,.16);
  --border:rgba(160,114,29,.26); --border-soft:rgba(104,112,124,.16);
  --shadow-soft:0 20px 40px rgba(20,20,30,.08);
  --btn-ink:#FFF8E8;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.mono{font-family:ui-monospace,"Cascadia Code","SF Mono",Consolas,"Roboto Mono",monospace;font-variant-numeric:tabular-nums}
a{color:inherit}
h1,h2,h3{margin:0 0 10px;text-wrap:balance}
h1{font-weight:900;letter-spacing:-.02em;font-size:clamp(30px,4.4vw,48px)}
.eyebrow{font:800 11.5px ui-sans-serif,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.scroller{overflow-x:auto;padding-bottom:2px}
.scroller::-webkit-scrollbar{height:6px}
.scroller::-webkit-scrollbar-thumb{background:var(--panel-alt);border-radius:6px}

.online-bar{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--panel-alt);color:var(--text);font:700 12.5px ui-sans-serif,sans-serif;padding:7px 12px;text-align:center;border-bottom:1px solid var(--border-soft)}
.online-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:var(--glow-green);flex-shrink:0}

.toolbar{position:sticky;top:0;z-index:20;background:var(--panel);border-bottom:1px solid var(--border-soft);padding:14px 0}
.toolbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font:800 15px ui-sans-serif,sans-serif;text-decoration:none;color:inherit}
.brand-mark{width:30px;height:30px;flex-shrink:0}
.brand-2{color:var(--gold)}
.toggle{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--border-soft);border-radius:999px;padding:8px 18px;cursor:pointer;color:var(--muted);font:700 13px ui-sans-serif,sans-serif;transition:border-color .2s,color .2s}
.toggle:hover{border-color:var(--gold);color:var(--text)}

.member-nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.member-nav a{font:700 13px ui-sans-serif,sans-serif;color:var(--muted);text-decoration:none;padding:9px 13px;border-radius:10px;position:relative;transition:color .2s}
.member-nav a:hover{color:var(--text)}
.member-nav a.is-active{color:var(--text)}
.member-nav a.is-active::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:var(--gold);border-radius:2px}

.hero{position:relative;padding:64px 0 72px;overflow:hidden}
.hero-glow{position:absolute;inset:-20% -10% auto -10%;height:520px;background:radial-gradient(55% 55% at 30% 20%,rgba(219,168,75,.14),transparent 72%);filter:blur(10px);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
.hero-copy .eyebrow{margin-bottom:14px;display:block}
.hero-copy p.lede{margin-top:14px;color:var(--muted);font-size:16px;line-height:1.65;max-width:46ch}
.trust-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px}
.trust-row a{font:700 12.5px ui-sans-serif,sans-serif;color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--border)}
.trust-row a:hover{color:var(--gold)}

.console{background:var(--panel);border:1px solid var(--border-soft);border-radius:20px;padding:8px;box-shadow:var(--shadow-soft)}
.console-tabs{display:flex;gap:6px;padding:8px}
.console-tab{flex:1;padding:12px;border-radius:12px;border:none;background:transparent;color:var(--muted);font:800 13px ui-sans-serif,sans-serif;cursor:pointer;transition:background .2s,color .2s;text-align:center;text-decoration:none;display:block}
.console-tab.active{background:var(--panel-alt);color:var(--text);box-shadow:inset 0 0 0 1px var(--border-soft)}
.console-body{padding:22px 22px 26px}
.field{margin-bottom:14px}
.field label{display:block;font:700 12px ui-sans-serif,sans-serif;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid var(--border-soft);background:var(--panel-alt);color:var(--text);font:500 14px ui-sans-serif,sans-serif}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.field-hint{font-size:12px;color:var(--muted);margin-top:6px}

/* ---------- Buttons: solid, confident, rounded-rect (not pill) - action
   language, distinct from the pill shape reserved for status/tab chips
   below. Default is gold/primary since almost every button on this site
   already is the primary action in its context. ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:12px;border:none;background:var(--gold);color:var(--btn-ink);font:800 14px ui-sans-serif,sans-serif;cursor:pointer;transition:filter .15s ease,transform .06s ease;text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:not-allowed;filter:none;transform:none}
.btn.wide{width:100%;margin-top:6px}
.btn.pink{background:var(--pink);color:var(--btn-ink)}
.btn.green{background:var(--green);color:var(--btn-ink)}
.btn.violet{background:var(--violet);color:var(--btn-ink)}
.btn.ghost{background:transparent;border:1.5px solid var(--border-soft);color:var(--text)}
.btn.ghost:hover{border-color:var(--gold);filter:none}

.form-note{margin-top:12px;font:700 12.5px ui-sans-serif,sans-serif;min-height:16px}
.form-note.error{color:var(--red)}
.form-note.success{color:var(--green)}

.panel-card{background:var(--panel);border:1px solid var(--border-soft);border-radius:16px;padding:24px;max-width:520px}

.section-head{display:flex;flex-direction:column;gap:6px;margin-bottom:22px}
.section-head h1,.section-head h2{margin:0}
.note{color:var(--muted);font-size:14.5px;max-width:60ch;line-height:1.6}

/* ---------- Accent system: colour is always a state, reused across
   stat cards, ledger cells and task cards. Gold=reward/promo, green=
   confirmed money, violet=held/pending, pink=referral/competition,
   red=locked/error. ---------- */
[data-accent="gold"]{--accent:var(--gold);--accent-glow:var(--glow-gold)}
[data-accent="green"]{--accent:var(--green);--accent-glow:var(--glow-green)}
[data-accent="violet"]{--accent:var(--violet);--accent-glow:var(--glow-violet)}
[data-accent="pink"]{--accent:var(--pink);--accent-glow:var(--glow-pink)}
[data-accent="red"]{--accent:var(--red);--accent-glow:var(--glow-red)}

.member-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;margin-top:32px}

.streak-pill{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border-soft);border-radius:999px;padding:8px 18px;font-size:14px}

.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px;max-width:420px}
.stat{background:var(--panel);border:1px solid var(--border-soft);border-radius:14px;padding:18px;transition:box-shadow .25s,border-color .25s}
.stat[data-accent]:hover{border-color:var(--accent);box-shadow:var(--accent-glow)}
.stat .eyebrow{color:var(--muted);display:block;margin-bottom:8px}
.stat .amount{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.stat[data-accent] .amount{color:var(--accent)}

.ref-link{width:100%;padding:11px 14px;border-radius:10px;border:1.5px solid var(--border-soft);background:var(--panel-alt);color:var(--text);font-family:ui-monospace,monospace;font-size:13px;margin-bottom:8px;transition:border-color .2s}
.ref-link:focus{border-color:var(--pink);outline:none}

/* ---------- Task wall - left accent bar instead of full-border glow,
   quieter at rest, still colour-coded by state via [data-accent]. ---------- */
.task-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:24px}
.task-card{background:var(--panel);border:1px solid var(--border-soft);border-radius:16px;padding:20px 20px 20px 22px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;transition:border-color .2s}
.task-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--border-soft)}
.task-card[data-accent]::before{background:var(--accent)}
.task-card[data-accent]:hover{border-color:var(--border)}
.task-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.task-reward{font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.task-card[data-accent] .task-reward{color:var(--accent)}
.task-card p{color:var(--muted);font-size:13.5px;line-height:1.55}
.task-meta{font-size:12px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.task-action{margin-top:auto}
.task-details{background:var(--panel-alt);border:1px solid var(--border-soft);border-radius:10px;padding:10px 14px;margin-bottom:4px}
.task-details summary{cursor:pointer;font:700 12.5px ui-sans-serif,sans-serif;color:var(--gold);list-style:none}
.task-details summary::-webkit-details-marker{display:none}
.task-details summary::before{content:'+ ';font-weight:900}
.task-details[open] summary::before{content:'- '}
.task-details ol{margin:10px 0 6px;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.6}
.task-details ol li{margin-bottom:4px}
.completed-tag{display:inline-flex;align-items:center;gap:8px;font:800 12.5px ui-sans-serif,sans-serif;color:var(--green);margin:0}
.completed-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.completed-tag.pending{color:var(--violet)}
.completed-tag.pending .dot{background:var(--violet)}

/* ---------- Offerwall ---------- */
.t2w-offerwall{width:100%;min-height:600px;height:80vh;max-height:1400px;border:1px solid var(--border-soft);border-radius:18px;margin-top:20px;display:block;background:var(--panel)}

/* ---------- Watch and answer ---------- */
.t2w-video{width:100%;border-radius:12px;display:block;margin-bottom:10px;background:#000}
.t2w-answer-block.hidden{display:none}
.hidden{display:none}
.t2w-watch-hint{margin-top:4px}

/* ---------- Pills (compact state labels) - kept full-pill on purpose,
   the shape that reads "status/info" vs the button's rounded-rect
   "action" shape. ---------- */
.pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;font:800 12px ui-sans-serif,sans-serif;border:1px solid transparent;padding:6px 13px}
.pill .dot{width:7px;height:7px;border-radius:50%}
.pill.gold{background:rgba(219,168,75,.12);color:var(--gold);border-color:rgba(219,168,75,.35)}
.pill.gold .dot{background:var(--gold)}
.pill.green{background:rgba(67,178,121,.12);color:var(--green);border-color:rgba(67,178,121,.35)}
.pill.green .dot{background:var(--green)}
.pill.violet{background:rgba(142,126,220,.12);color:var(--violet);border-color:rgba(142,126,220,.35)}
.pill.violet .dot{background:var(--violet)}
.pill.pink{background:rgba(226,107,146,.12);color:var(--pink);border-color:rgba(226,107,146,.35)}
.pill.pink .dot{background:var(--pink)}
.pill.red{background:rgba(219,90,78,.12);color:var(--red);border-color:rgba(219,90,78,.35)}
.pill.red .dot{background:var(--red)}
.pill.muted{background:transparent;color:var(--muted);border-color:var(--border-soft)}
.pill.muted .dot{background:var(--muted)}

/* ---------- Tab bar (Earn / Draw / Leaderboard section tabs) ---------- */
.tabbar{display:inline-flex;gap:4px;background:var(--panel);border:1px solid var(--border-soft);padding:5px;border-radius:999px;max-width:100%}
.tabbar a{padding:9px 16px;border-radius:999px;font:800 12.5px ui-sans-serif,sans-serif;color:var(--muted);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:color .15s,background .15s}
.tabbar a:hover{color:var(--text)}
.tabbar a.is-active{background:var(--gold);color:var(--btn-ink)}
.tabbar a .soon-dot{width:5px;height:5px;border-radius:50%;background:var(--muted)}

/* ---------- Badges ---------- */
.badge-row{display:flex;gap:10px;flex-wrap:wrap}
.badge{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--panel-alt);border:1.5px solid var(--border-soft)}
.badge.locked{opacity:.35;filter:grayscale(1)}

/* ---------- Front page: how it works + payout methods ---------- */
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:24px}
.how-step{background:var(--panel);border:1px solid var(--border-soft);border-radius:16px;padding:20px}
.how-num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--panel-alt);border:1px solid var(--border);color:var(--gold);font:800 14px ui-sans-serif,sans-serif;margin-bottom:12px}
.how-step strong{display:block;font-size:16px;margin-bottom:6px}

.payout-grid{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px}
.payout-badge{background:var(--panel);border:1px solid var(--border-soft);border-radius:999px;padding:12px 24px;font:800 14px ui-sans-serif,sans-serif;color:var(--text)}

/* ---------- Ready-to-withdraw hero (dashboard + wallet) ---------- */
.ready-card{background:var(--panel);border:1px solid var(--border-soft);border-radius:20px;padding:26px 28px;margin-top:24px;max-width:480px;box-shadow:var(--shadow-soft)}
.ready-amount{font-size:clamp(32px,5vw,44px);font-weight:900;color:var(--accent, var(--gold));margin:6px 0 12px;font-variant-numeric:tabular-nums}
.ready-progress{height:8px;border-radius:999px;background:var(--panel-alt);border:1px solid var(--border-soft);overflow:hidden;margin:10px 0 16px}
.ready-progress-bar{height:100%;background:var(--accent, var(--gold))}
.ready-breakdown{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--border-soft);font-size:13px;color:var(--muted)}
.ready-breakdown strong{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.ready-breakdown a{margin-left:auto;font-weight:800;color:var(--gold);text-decoration:none}
.ready-breakdown a:hover{text-decoration:underline}

/* ---------- Earn next (dashboard) ---------- */
.earn-next-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:16px}
.earn-next-card{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--border-soft);border-radius:14px;padding:16px;text-decoration:none;color:var(--text);transition:border-color .2s}
.earn-next-card:hover{border-color:var(--gold)}
.earn-next-card .task-reward{color:var(--gold);font-size:15px}

/* ---------- Wallet ---------- */
.ledger-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.ledger-cell{background:var(--panel);border:1px solid var(--border-soft);border-radius:12px;padding:14px 12px;text-align:left;transition:border-color .2s}
.ledger-cell[data-accent]:hover{border-color:var(--accent)}
.ledger-cell .label{font:800 10.5px ui-sans-serif,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.ledger-cell .val{font-family:ui-monospace,monospace;font-weight:800;font-size:16px}
.ledger-cell[data-accent] .val{color:var(--accent)}

.tx-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.tx-filter{background:var(--panel);border:1px solid var(--border-soft);border-radius:999px;padding:8px 16px;font:700 12.5px ui-sans-serif,sans-serif;color:var(--muted);cursor:pointer;transition:border-color .2s,color .2s}
.tx-filter:hover{color:var(--text)}
.tx-filter.active{border-color:var(--gold);color:var(--gold)}

.queue{background:var(--panel);border:1px solid var(--border-soft);border-radius:16px;overflow:hidden;margin-top:16px}
.queue-row{display:grid;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border-soft)}
.queue-row:last-child{border-bottom:none}
.queue-row.head{background:var(--panel-alt);font:800 11px ui-sans-serif,sans-serif;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.amt-pos{color:var(--green);font-variant-numeric:tabular-nums}
.amt-neg{color:var(--red);font-variant-numeric:tabular-nums}

/* ---------- Ad slots ---------- */
.ad-slot{margin-top:32px;padding:16px;border:1px solid var(--border-soft);border-radius:12px;background:var(--panel);text-align:center;overflow-x:auto;max-width:100%}
.ad-label{display:block;font:800 10px ui-sans-serif,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.ad-banner-frame{width:728px;max-width:100%;margin:0 auto;min-height:90px}

/* ---------- Mobile bottom nav ---------- */
.mobile-nav{display:none}
.mobile-more-sheet{display:none}

@media (max-width:900px){.ledger-strip{grid-template-columns:repeat(2,1fr)}.queue-row{grid-template-columns:1fr !important}.ready-breakdown a{margin-left:0}}

@media (max-width:767px){
	.member-nav{display:none}
	body{padding-bottom:64px}
	.mobile-nav{
		display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;
		background:var(--panel);border-top:1px solid var(--border-soft);box-shadow:0 -8px 24px rgba(0,0,0,.18);
	}
	.mobile-nav a,.mobile-nav button{
		flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
		padding:8px 4px 10px;color:var(--muted);text-decoration:none;background:none;border:none;
		font:700 10.5px ui-sans-serif,sans-serif;cursor:pointer;
	}
	.mobile-nav a span,.mobile-nav button span{font-size:19px}
	.mobile-nav a.is-active{color:var(--gold)}
	.mobile-more-sheet.hidden{display:none}
	.mobile-more-sheet:not(.hidden){
		display:flex;flex-direction:column;position:fixed;left:12px;right:12px;bottom:76px;z-index:31;
		background:var(--panel);border:1px solid var(--border-soft);border-radius:16px;box-shadow:var(--shadow-soft);overflow:hidden;
	}
	.mobile-more-sheet a{padding:14px 18px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--border-soft);font:700 14px ui-sans-serif,sans-serif}
	.mobile-more-sheet a:last-child{border-bottom:none}
}

footer.site-footer{padding:36px 0;text-align:center;color:var(--muted);font-size:12.5px}
.footer-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.footer-links a{color:var(--muted);text-decoration:none;font-weight:700}
.footer-links a:hover{color:var(--gold)}
.footer-copy{opacity:.75}

@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* ---------- Welcome-back popup ---------- */
.t2w-welcome-overlay{position:fixed;inset:0;z-index:100;background:rgba(10,8,4,.66);display:flex;align-items:center;justify-content:center;padding:20px}
.t2w-welcome-modal{background:var(--panel);border:1px solid var(--border-soft);border-radius:20px;padding:28px;max-width:420px;width:100%;box-shadow:var(--shadow-soft);text-align:center}
.t2w-welcome-modal h2{margin:0 0 6px;font-size:22px}
.t2w-welcome-offer{display:block;text-decoration:none;color:inherit;background:var(--panel-alt);border:1px solid var(--border-soft);border-radius:14px;padding:16px;margin:16px 0;text-align:left;transition:border-color .2s}
.t2w-welcome-offer:hover{border-color:var(--gold)}
.t2w-welcome-offer strong{display:block;margin:2px 0}