/* ============ AppSharer design system — high-contrast gaming (red/green/blue/orange) ============ */
:root{
  --bg:#0b1020; --bg-2:#121a33; --card:#141b36; --card-2:#1b2447;
  --border:rgba(148,163,255,.16); --border-strong:rgba(148,163,255,.34);
  --text:#f4f7ff; --muted:#adb6da; --dim:#6a74a0;
  --primary:#3b82f6; --green:#22c55e; --cyan:#22d3ee; --teal:#2dd4bf;
  --gold:#fb923c; --red:#ff3b5c; --violet:#8b7cf8; --pink:#f472b6;
  --grad:linear-gradient(135deg,#2563eb 0%,#3b82f6 48%,#06b6d4 100%);
  --grad-blue:linear-gradient(180deg,#3b82f6 0%,#2563eb 50%,#1e3a8a 100%);
  --grad-green:linear-gradient(180deg,#3ecf7a 0%,#16a34a 50%,#0e512f 100%);
  --grad-pink:linear-gradient(180deg,#ec4899 0%,#be185d 48%,#831843 100%);
  --grad-gold:linear-gradient(135deg,#2563eb,#3b82f6);
  --grad-orange:linear-gradient(180deg,#f97316 0%,#ea580c 48%,#92350c 100%);
  --grad-red:linear-gradient(180deg,#f87171 0%,#dc2626 55%,#7f1d1d 100%);
  --rambo:linear-gradient(90deg,#ef4444,#f97316,#22c55e,#3b82f6);
  --rad:10px; --rad-sm:10px;
  --shadow:0 14px 40px rgba(4,8,24,.62);
  --glow:0 0 0 1px rgba(59,130,246,.32),0 18px 60px rgba(37,99,235,.24);
  --font:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  --mono:ui-monospace,'SFMono-Regular','Cascadia Code',Consolas,monospace;
  --dock-w:280px;
  --side-w:236px;
}
@media(min-width:1200px){:root{--dock-w:300px}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:#0a0f20}
::-webkit-scrollbar-thumb{background:var(--grad-blue);border-radius:10px;border:3px solid #0a0f20}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#3b82f6 0%,#2563eb 55%,#1e3a8a 100%)}
::-webkit-scrollbar-corner{background:#0a0f20}
@supports (scrollbar-color: red blue){html{scrollbar-color:#3b82f6 #0a0f20;scrollbar-width:thin}}
body{font-family:var(--font);background-color:var(--bg);background-image:linear-gradient(150deg,rgba(11,18,40,.7) 0%,rgba(13,25,56,.66) 42%,rgba(56,15,52,.62) 100%),url('../img/bg-gaming.svg');background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat;color:var(--text);line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
  radial-gradient(1000px 540px at 88% -8%,rgba(59,130,246,.22),transparent 60%),
  radial-gradient(800px 460px at 0% 30%,rgba(37,99,235,.10),transparent 55%),
  radial-gradient(900px 520px at 62% 118%,rgba(190,24,93,.18),transparent 60%),
  radial-gradient(620px 400px at 10% -10%,rgba(96,165,250,.08),transparent 55%)}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
::selection{background:rgba(99,102,241,.4)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#1d2a45;border-radius:10px}
::-webkit-scrollbar-track{background:transparent}

/* ============ layout ============ */
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.page-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.section{padding:76px 0}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.hidden{display:none!important}
.mt{margin-top:14px}.mb{margin-bottom:14px}
.mt-2{margin-top:26px}.mb-2{margin-bottom:26px}
.center{text-align:center}
.flex{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.grow{flex:1}
.wrap-2{max-width:940px;margin:0 auto;padding:0 20px}

/* ============ typography ============ */
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(30px,4.6vw,52px);font-weight:800}
h2{font-size:clamp(24px,3vw,34px);font-weight:800}
h3{font-size:19px;font-weight:700}
h4{font-size:16px;font-weight:700}
.lead{font-size:17px;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:13px}
.grad-text{background:linear-gradient(120deg,#fff 20%,var(--cyan) 60%,var(--primary));-webkit-background-clip:text;background-clip:text;color:transparent}
.gold-text{background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.25);padding:6px 14px;border-radius:10px;margin-bottom:18px}

/* ============ buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:14.5px;padding:14px 22px;border-radius:10px;border:none;transition:.2s;white-space:nowrap;position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.10) 48%,rgba(255,255,255,0) 100%);border-radius:inherit;pointer-events:none}
.btn-primary{background:var(--grad-blue);color:#fff;font-weight:800;box-shadow:0 8px 26px rgba(59,130,246,.42)}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-gold{background:var(--grad-blue);color:#fff;box-shadow:0 8px 26px rgba(59,130,246,.42)}
.btn-green{background:var(--grad-green);color:#fff;box-shadow:0 8px 26px rgba(22,163,74,.35)}
.btn-orange{background:linear-gradient(180deg,#f97316 0%,#ea580c 48%,#92350c 100%);color:#fff;font-weight:800;box-shadow:0 8px 26px rgba(249,115,22,.35)}
.btn-pink{background:var(--grad-pink);color:#fff;box-shadow:0 8px 26px rgba(236,72,153,.35)}
.btn-red{background:var(--grad-red);color:#fff;box-shadow:0 8px 26px rgba(239,68,68,.35)}
.btn-violet{background:linear-gradient(180deg,#a78bfa 0%,#7c3aed 48%,#4c1d95 100%);color:#fff;font-weight:800;box-shadow:0 8px 26px rgba(139,124,248,.35)}
.btn-cyan{background:linear-gradient(180deg,#22d3ee 0%,#0891b2 48%,#155e75 100%);color:#fff;font-weight:800;box-shadow:0 8px 26px rgba(34,211,238,.35)}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-danger{background:rgba(255,59,92,.12);color:var(--red)}
.btn-outline{color:var(--muted);background:transparent}
.btn-outline::after{display:none}
.btn-sm{padding:10px 14px;font-size:13px;border-radius:10px}
.btn-lg{padding:15px 30px;font-size:16px;border-radius:10px}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none!important}

/* ============ uploaded image previews (admin review) ============ */
.img-prev{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));margin-top:8px}
.img-prev figure{margin:0;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;padding:9px}
.img-prev img{display:block;width:100%;height:170px;object-fit:contain;border-radius:9px;background:rgba(3,7,20,.55)}
.img-prev figcaption{font-size:12px;color:var(--muted);margin-top:7px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.img-thumb{width:40px;height:40px;border-radius:9px;object-fit:cover;background:rgba(3,7,20,.5);display:block}

/* ============ navbar ============ */
.nav{position:sticky;top:var(--top-strip-h,0px);z-index:120;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid transparent;box-shadow:none;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease}.nav.scrolled{background:linear-gradient(180deg,rgba(9,15,34,.92) 0%,rgba(11,21,48,.86) 100%);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid transparent;box-shadow:none}
.nav-in{display:flex;align-items:center;gap:18px;height:66px;flex-wrap:nowrap}
.nav.site-nav .wrap{max-width:none;padding:0 8px 0 10px;overflow:visible}
.nav-in .brand{margin-left:0;border-right:1px solid rgba(148,163,255,.18);margin-right:10px;padding-right:20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:30px;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.brand .logo{width:46px;height:46px;border-radius:10px;background:var(--grad);display:grid;place-items:center;position:relative;overflow:hidden;color:#fff;box-shadow:0 6px 18px rgba(37,99,235,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.brand .logo::after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(255,255,255,.4),transparent 45%)}
.nav-links{display:flex;align-items:center;gap:8px;margin-left:10px;min-width:0;flex:0 1 auto;overflow:visible}
.nav-links a{position:relative;display:inline-flex;flex:none;align-items:center;gap:7px;white-space:nowrap;padding:8px 13px;border-radius:10px;font-weight:600;font-size:13.5px;color:rgba(255,255,255,.72);transition:.16s} 
.nav-links a i{margin-right:0;font-size:.95em}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.08);transform:translateY(-1px)}
.nav-links a:hover i{color:#a5b4fc}
  .nav-links a.active{color:#fff;background:linear-gradient(135deg,rgba(59,130,246,.22),rgba(37,99,235,.22));box-shadow:0 4px 14px -7px rgba(37,99,235,.6),0 1px 10px -3px rgba(37,99,235,.35)}
.nav-links a.active::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:10px;background:var(--grad)}
.nav-right .btn i{margin-right:7px;font-size:.92em}
.nav .chip{background:rgba(255,255,255,.05);border-color:rgba(148,163,255,.22);color:#fff}
.nav .chip-balance{background:linear-gradient(135deg,rgba(59,130,246,.16),rgba(37,99,235,.1));border-color:rgba(59,130,246,.4)}
.nav .chip-balance i{color:var(--primary);font-size:13px}
.nav .chip .muted{color:rgba(240,244,255,.9)}
  .nav-right .btn-ghost{border-color:transparent;box-shadow:0 4px 14px -7px rgba(37,99,235,.6),0 1px 10px -3px rgba(37,99,235,.3)}
.nav-right .btn-ghost:hover{background:rgba(255,255,255,.12)}
.nav-right .chip{border-color:transparent;box-shadow:0 4px 14px -7px rgba(59,130,246,.55),0 1px 10px -3px rgba(37,99,235,.28)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
/* Bell / envelope / account menu. In the DOM they sit right after the brand so
   that on phones they can sit on row one beside the site name; on desktop the
   order below parks them at the far right, exactly where they used to live. */
.nav-user-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;order:2;margin-left:-8px}
/* Sign in / Join free are locked to one line on every screen size */
.nav-auth{display:flex;align-items:center;gap:10px;flex:0 0 auto;flex-wrap:nowrap}
.burger{display:none;background:rgba(255,255,255,.06);border:1px solid rgba(148,163,255,.2);color:var(--text);font-size:20px;padding:8px 10px;border-radius:10px;transition:.15s}
.burger:hover{background:rgba(255,255,255,.12)}
.avatar{position:relative;border-radius:10px;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;flex:none;color:#fff;font-weight:700;font-size:15px;box-shadow:0 0 0 2px rgba(148,163,184,.15)}
.badge-mini{background:var(--grad-blue);color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:10px}
.badge-muted{background:rgba(148,163,184,.12);color:var(--muted);font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px}
.badge-mod{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:5px;letter-spacing:.03em}
.badge-admin{background:var(--grad-blue);color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:5px;letter-spacing:.03em}
.badge-staff{background:linear-gradient(135deg,#f472b6,#db2777);color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:5px;letter-spacing:.03em}

/* user menu */
.usermenu{position:relative}
.usermenu .drop{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;max-height:calc(100vh - 96px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:thin;background:rgba(15,21,44,.92);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border:1px solid var(--border-strong);border-radius:10px;padding:8px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;z-index:120}
.usermenu .drop::-webkit-scrollbar{width:8px}
.usermenu .drop::-webkit-scrollbar-thumb{background:rgba(148,163,184,.35);border-radius:8px}
.usermenu.open .drop{opacity:1;visibility:visible;transform:none}
.usermenu .drop a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--text)}
.usermenu .drop a:hover{background:rgba(255,255,255,.06)}
.usermenu .drop .sep{border-top:1px solid var(--border);margin:6px 4px}
.usermenu .drop .mhead{padding:8px 12px 4px}
.usermenu .drop .mhead .n{font-weight:700;font-size:14px}
.usermenu .drop .mhead .e{font-size:12px;color:var(--dim)}

/* ============ top live feed ============ */
.top-live{position:sticky;top:0;z-index:91;background:linear-gradient(180deg,#3b82f6 0%,#2563eb 55%,#1e3a8a 100%);box-shadow:0 6px 22px rgba(37,99,235,.3);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
.top-live-in{position:relative;margin:0;padding:9px 20px;display:flex;align-items:center;gap:10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.top-live-in::-webkit-scrollbar{display:none}
.top-live-title{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;padding-right:12px;margin-right:4px;border-right:1px solid rgba(255,255,255,.3);white-space:nowrap}
.top-live-title i{font-size:.95em}
.top-live-tab{flex:1 1 0;display:inline-flex;align-items:center;gap:8px;border:none;color:#fff;border-radius:10px;padding:6px 10px;white-space:nowrap;box-shadow:none;min-width:0;max-width:none}
.top-live-tab .avatar{width:26px;height:26px;font-size:12px;background:rgba(0,0,0,.28);box-shadow:none;border:none;color:#fff}
.top-live-tab .avatar,.livetoast .avatar,.feed-item .avatar{overflow:hidden;flex:none}
.liveav{width:100%;height:100%;object-fit:cover;display:block}
.liveav.avp-head{object-position:50% 15%}
.liveav.avp-upper{object-position:50% 28%}
.liveav.avp-wide{object-position:50% 50%}
.feed-item .avatar{width:24px;height:24px;border-radius:8px;font-size:11px;display:inline-flex;align-items:center;justify-content:center}
.top-live-tab .tl-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1 1 auto}
.top-live-tab .tl-user{font-weight:700;font-size:13px;color:#fff;overflow:hidden;text-overflow:ellipsis}
.top-live-tab .tl-offer{font-size:11.5px;color:rgba(255,255,255,.88);overflow:hidden;text-overflow:ellipsis;max-width:none}
.top-live-tab .tl-amt{font-weight:800;font-size:13.5px;color:#fff;margin-left:2px;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.top-live-tab.g-ghost{position:absolute;pointer-events:none;z-index:2}
.top-live-tab.tl-green{background:var(--grad-green)}
.top-live-tab.tl-blue{background:var(--grad-blue)}
.top-live-tab.tl-pink{background:var(--grad-pink)}
.top-live-tab.tl-orange{background:linear-gradient(180deg,#f97316 0%,#ea580c 50%,#92350c 100%)}
/* a ticker entry backed by a real completion opens its details on click */
.top-live-tab.tl-clickable{cursor:pointer;transition:transform .15s ease,filter .15s ease}
.top-live-tab.tl-clickable:hover{transform:translateY(-1px);filter:brightness(1.08)}
.top-live-tab.tl-clickable:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* the ticker shows credited completions only */
.top-live-tab{position:relative}
@media(max-width:768px){
  .top-live-in{padding:9px 14px;gap:8px;scroll-snap-type:x proximity}
  .top-live-title{display:none}
  .top-live-tab{flex:0 0 auto;width:auto;min-width:190px;max-width:240px;scroll-snap-align:start}
  .top-live-tab .tl-txt{flex:1 1 auto}
}

/* ============ hero ============ */
.hero{position:relative;padding:50px 0 36px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;position:relative;z-index:1}
/* Grid items default to min-width:auto, so the wide hero illustration (94vw)
   stretched the single mobile column past the page width and clipped the
   sign-up card on the right. Letting the columns shrink keeps everything
   inside the page; the illustration's overflow is clipped by .hero. */
.hero .wrap>*{min-width:0}
.hero .div-fade.in{position:relative}
.hero-anime{position:absolute;inset:0;top:38px;z-index:0;display:flex;align-items:flex-start;justify-content:flex-start;pointer-events:none}
/* Fade every edge of the illustration into the page background, not just the
   bottom. Two linear gradients (one per axis) are intersected with
   mask-composite so the shape keeps the original soft bottom while the top and
   both sides fade out too. */
.hero-anime img{width:720px;height:auto;object-fit:contain;object-position:left top;mask-image:linear-gradient(to bottom,transparent 0%,#000 11%,#000 26%,rgba(0,0,0,.55) 48%,rgba(0,0,0,.22) 66%,transparent 84%),linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 11%,#000 26%,rgba(0,0,0,.55) 48%,rgba(0,0,0,.22) 66%,transparent 84%),linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);mask-composite:intersect;-webkit-mask-composite:source-in}
/* When the admin uploads a real photo, give it a fixed frame and cover-fit it so
   any image fills the slot cleanly without distortion. The bundled SVG keeps the
   default "contain" behaviour. */
.hero-anime.has-photo img{aspect-ratio:4/3;height:auto;object-fit:cover;object-position:left top}
.hero .hero-cta{margin-top:140px}
.hero .div-fade.in>*:not(.hero-anime){position:relative;z-index:1}
@media(max-width:980px){
  .hero-anime{position:static;width:100%;display:flex;justify-content:center;align-items:flex-start;pointer-events:none;margin-bottom:6px}
  .hero-anime img{width:min(88vw,460px);max-width:none;height:auto;object-position:center top;transform:translateX(-7%)}
  .hero-anime.has-photo img,.hero-anime.has-photo-m img{width:min(94vw,520px);max-width:none;aspect-ratio:1/1;object-fit:cover;object-position:center top;transform:none}
}
/* The hero becomes a single stacked column at max-width:1080px (.hero .wrap),
   so the headline-to-CTA spacing follows that same breakpoint. Previously the
   gap was only tightened at <=980px, leaving 981-1080px with the 140px desktop
   margin - a large empty space under the rotating headline on tablets. */
@media(max-width:1080px){
  .hero .hero-cta{margin-top:16px}
}
/* Home page, mobile: tighten the space above the signed-out action line
   (top nav -> "Join App Owners") and below it (last action -> hero
   illustration). Scoped to .page-home so every other page keeps its spacing. */
@media(max-width:980px){
  .page-home .site-main{padding-top:0 !important}
  .page-home .site-main > .wrap{padding-top:6px !important}
  .page-home .hero{padding-top:14px !important}
}
.hero h1{max-width:620px;text-shadow:0 2px 26px rgba(5,12,35,.85),0 1px 4px rgba(5,12,35,.7)}
.hero p.lead{max-width:540px;margin:20px 0 28px}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap}
.hero-stats{display:flex;gap:28px;margin-top:40px;flex-wrap:wrap}
.hstat .v{font-size:26px;font-weight:800}
.hstat .v small{font-size:14px;color:var(--green);font-weight:700}
.hstat .l{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.hero-art{position:relative;margin-top:-36px}
.hero-card{border-radius:10px;padding:26px;color:#fff}
.hero-card.box-blue-pink{background:linear-gradient(180deg,#1d4ed8 0%,#172554 100%);overflow:visible}
.hero-card>*{position:relative;z-index:1}
.hero-card .row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.hero-card .ticker{color:rgba(240,244,255,.95)}
.hero-card .feed-item .muted,.hero-card .feed-item small{color:rgba(240,244,255,.92)}
.hero-card #heroFeed{max-height:220px;overflow:hidden}
.hero-card .feed-item .famt{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.hero-card .feed-item b{color:#fff}
.hero-win{position:relative;background:rgba(10,16,34,.62);border:1px solid rgba(255,255,255,.32);border-radius:10px;padding:16px;margin-top:12px;overflow:hidden}
.hero-win::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%);transform:translateX(-100%);animation:shine 3.6s infinite}
@keyframes shine{to{transform:translateX(100%)}}
.hero-signup-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hero-signup-form .span2{grid-column:1 / -1}
.hero-field{position:relative}
.hero-field>i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.65);font-size:13px;pointer-events:none;z-index:1}
.hero-input{width:100%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;padding:11px 12px 11px 36px;border-radius:10px;font-size:14px;outline:none;transition:.18s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-input::placeholder{color:rgba(255,255,255,.55)}
.hero-input:focus{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.6);box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.hero-select{width:100%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;padding:11px 12px 11px 36px;border-radius:10px;font-size:13px;outline:none;cursor:pointer;transition:.18s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-select select:focus{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.6)}
.hero-select option{background:#1b2440;color:#fff}
.hero-check{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:rgba(240,244,255,.92);line-height:1.4}
.hero-check input{accent-color:#ec4899;width:15px;height:15px;cursor:pointer;margin-top:1px}
.hero-check a{color:#93c5fd;font-weight:700}
.hero-check a:hover{text-decoration:underline}

/* modern custom select */
.cs{position:relative;z-index:999}
.hero-card .cs{z-index:999}
.hero-signup-form{position:relative;z-index:999}
.cs-control{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);font-size:14px;text-align:left;cursor:pointer;transition:border-color .15s;line-height:1.3}
.cs-control:hover{border-color:var(--border-strong)}
.cs.cs-open .cs-control{border-color:var(--cyan)}
.cs-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-caret{flex:none;color:var(--muted);font-size:12px;transition:transform .18s}
.cs.cs-open .cs-caret{transform:rotate(180deg)}
.cs-menu{display:none;flex-direction:column;position:fixed;left:0;top:0;z-index:10000;max-height:280px;overflow:hidden;background:var(--card-2);border:1px solid var(--border-strong);border-radius:10px;box-shadow:var(--shadow)}
.cs-search{padding:8px;border-bottom:1px solid var(--border);flex:none}
.cs-search-input{width:100%;height:34px;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:0 10px;color:var(--text);font-size:13px;outline:none}
.cs-search-input:focus{border-color:var(--cyan)}
.cs-list{list-style:none;margin:0;padding:4px;overflow-y:auto;flex:1;outline:none;overscroll-behavior:contain}
.cs-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--text)}
.cs-item:hover,.cs-item.hl{background:var(--border-soft)}
.cs-check{flex:none;width:16px;height:16px;border-radius:5px;border:1px solid var(--border-strong);display:grid;place-items:center;color:transparent;font-size:10px}
.cs-item.is-selected .cs-check{background:var(--cyan);border-color:var(--cyan);color:#fff}
.cs-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* optgroup headings inside the themed menu (e.g. app categories) */
.cs-group{padding:9px 10px 4px;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);cursor:default}
.cs-group:not(:first-child){margin-top:5px;border-top:1px solid var(--border-soft)}
/* country flag emoji: sized so the row height does not jump, and kept on its own
   baseline so the flag does not stretch the line box */
.cs-flag{flex:none;font-size:16px;line-height:1;margin-right:7px;display:inline-block;vertical-align:-2px;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.cs-label-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cs-value .cs-flag{font-size:15px;margin-right:6px}
/* admin: member country flag cell */
.flag-cell{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.flag-cell .cflag{font-size:16px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.hero-field .cs-control .cs-flag{font-size:15px}
.hero-field .cs-control{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff;padding:11px 12px 11px 36px;font-size:13px}
.hero-field .cs-control:hover{border-color:rgba(255,255,255,.45)}
.hero-field .cs-caret{color:rgba(255,255,255,.6)}
.cs-menu.cs-theme-hero{background:#141b36;border-color:rgba(148,163,255,.35);box-shadow:0 12px 30px rgba(3,6,20,.55)}
.cs-menu.cs-theme-hero .cs-search-input{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.cs-menu.cs-theme-hero .cs-search-input::placeholder{color:rgba(255,255,255,.55)}
.cs-menu.cs-theme-hero .cs-item{color:#eef2ff}
.cs-menu.cs-theme-hero .cs-item:hover,.cs-menu.cs-theme-hero .cs-item.hl{background:rgba(255,255,255,.12)}
.cs-menu.cs-theme-hero .cs-check{border-color:rgba(148,163,255,.4)}
.cs-menu.cs-theme-hero .cs-group{color:rgba(255,255,255,.62);border-top-color:rgba(255,255,255,.12)}

/* password strength meter */
.pw-meter{display:flex;align-items:center;gap:10px;padding:0 2px}
.pw-bar{flex:1;height:6px;border-radius:10px;background:rgba(0,0,0,.18)}
.pw-bar i{display:block;height:100%;width:0%;border-radius:10px;background:#f87171;transition:width .25s ease,background .25s ease}
.pw-label{flex:none;font-size:12px;color:var(--muted);min-width:88px;text-align:right}
.form-section .pw-meter{background:rgba(0,0,0,.06);border:1px solid var(--border-soft);border-radius:10px;padding:11px 12px;margin:2px 0 16px}
.hero-signup-form .pw-meter .pw-bar{background:rgba(255,255,255,.18)}
.hero-signup-form .pw-label{color:rgba(240,244,255,.75)}
@media(max-width:420px){.hero-signup-form{grid-template-columns:1fr}.form-card{width:calc(100% - 28px) !important;max-width:calc(100% - 28px) !important;min-width:calc(100% - 28px) !important;margin:0 14px 20px;padding:22px}}
.hero-signup-perks{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.hero-signup-perks span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.25);padding:4px 9px;border-radius:10px}
.hero-signup-perks i{color:var(--gold,#fcd34d)}
.hero-signup-alt{margin-top:14px;margin-bottom:0;text-align:center;font-size:13px;color:rgba(240,244,255,.85)}
.hero-signup-alt a{color:#93c5fd;font-weight:700}
.hero-signup-alt a:hover{text-decoration:underline}
.hero-card .hero-win{margin-top:16px}
/* Mobile sign-up form: a 16px field font stops iOS Safari from zooming the
   page when a field is focused (it zooms for anything below 16px), and the
   card padding is trimmed so full-width fields keep their breathing room. */
@media(max-width:1080px){
  .hero-input{font-size:16px}
  .hero-select{font-size:16px}
  .hero-field .cs-control{font-size:16px}
}
/* Phones: stack the form to one full-width column (two columns only leave
   ~170px per field here) and let the card header wrap instead of squeezing. */
@media(max-width:560px){
  .hero-signup-form{grid-template-columns:1fr}
  .hero-card{padding:20px 16px}
  .hero-card .row{flex-wrap:wrap;gap:8px}
  /* Narrow the sign-up card on phones so the whole form is visible instead of
     being clipped at the viewport edge (cap ~300px, centred). */
  .hero-art{max-width:300px;width:100%;margin-left:auto;margin-right:auto}
}
.live-dot{width:9px;height:9px;background:var(--green);border-radius:10px;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.float-slow{animation:floaty 6s ease-in-out infinite}
.float-slower{animation:floaty 8s ease-in-out infinite reverse}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.ticker{display:flex;gap:12px;align-items:center;font-size:13.5px;color:var(--muted);margin-top:18px;overflow:hidden;white-space:nowrap}

/* ============ cards / panels ============ */
.card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:none;border-radius:var(--rad);padding:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.card::after{content:"";position:absolute;inset:0;z-index:0;background-image:url('../img/bck/bck-mesh.svg');background-size:cover;background-position:center;mix-blend-mode:screen;opacity:.35;pointer-events:none;border-radius:inherit}
.card>*{position:relative;z-index:1}
.card-hover{transition:.25s}
.card-hover:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--shadow)}

/* ============ colorful glossy boxes (red/green/orange/blue/purple) ============ */
:where(.grid-3,.grid-4):has(> .card) > .card{position:relative;overflow:hidden;border:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 34px rgba(4,8,24,.45)}
:where(.grid-3,.grid-4):has(> .card) > .card::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(130% 120% at 18% -12%,rgba(255,255,255,.18),transparent 46%),
  radial-gradient(160% 140% at 102% 118%,rgba(0,0,0,.25),transparent 58%)}
:where(.grid-3,.grid-4):has(> .card) > .card > *{position:relative;z-index:1}
:where(.grid-3,.grid-4):has(> .card) > .card:nth-child(5n+1){background:linear-gradient(145deg,#e0516e 0%,#b91c48 50%,#6e1033 100%)}
:where(.grid-3,.grid-4):has(> .card) > .card:nth-child(5n+2){background:linear-gradient(145deg,#3ecf7a 0%,#16a34a 50%,#0e512f 100%)}
:where(.grid-3,.grid-4):has(> .card) > .card:nth-child(5n+3){background:linear-gradient(145deg,#f97316 0%,#ea580c 48%,#92350c 100%)}
:where(.grid-3,.grid-4):has(> .card) > .card:nth-child(5n+4){background:linear-gradient(145deg,#3b82f6 0%,#2563eb 50%,#1e3a8a 100%)}
:where(.grid-3,.grid-4):has(> .card) > .card:nth-child(5n){background:linear-gradient(145deg,#60a5fa 0%,#3b82f6 50%,#1e3a8a 100%)}
:where(.grid-3,.grid-4):has(> .card) > .card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:.5;background-size:cover;background-position:center}
:where(.grid-3,.grid-4):has(> .card) > .card:not(.stat):nth-child(5n+1)::after{background-image:url('../img/bck/bck-circuit-pink.svg')}
:where(.grid-3,.grid-4):has(> .card) > .card:not(.stat):nth-child(5n+2)::after{background-image:url('../img/bck/bck-circuit-emerald.svg')}
:where(.grid-3,.grid-4):has(> .card) > .card:not(.stat):nth-child(5n+3)::after{background-image:url('../img/bck/bck-circuit-gold.svg')}
:where(.grid-3,.grid-4):has(> .card) > .card:not(.stat):nth-child(5n+4)::after{background-image:url('../img/bck/bck-circuit-blue.svg')}
:where(.grid-3,.grid-4):has(> .card) > .card:not(.stat):nth-child(5n)::after{background-image:url('../img/bck/bck-circuit-violet.svg')}
:where(.grid-3,.grid-4):has(> .card) > .card h3,
:where(.grid-3,.grid-4):has(> .card) > .card h4,
:where(.grid-3,.grid-4):has(> .card) > .card .payout,
:where(.grid-3,.grid-4):has(> .card) > .card .val,
:where(.grid-3,.grid-4):has(> .card) > .card .stat-value,
:where(.grid-3,.grid-4):has(> .card) > .card b{color:#fff !important;text-shadow:0 1px 2px rgba(0,0,0,.22)}
:where(.grid-3,.grid-4):has(> .card) > .card .muted,
:where(.grid-3,.grid-4):has(> .card) > .card .sub,
:where(.grid-3,.grid-4):has(> .card) > .card .label,
:where(.grid-3,.grid-4):has(> .card) > .card .stat-label,
:where(.grid-3,.grid-4):has(> .card) > .card .offer-meta,
:where(.grid-3,.grid-4):has(> .card) > .card .payout small{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
:where(.grid-3,.grid-4):has(> .card) > .card .tag{background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.38);color:#fff}
:where(.grid-3,.grid-4):has(> .card) > .card .ui,
:where(.grid-3,.grid-4):has(> .card) > .card .ico{background:rgba(255,255,255,.2);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 4px 12px rgba(0,0,0,.22)}
:where(.grid-3,.grid-4):has(> .card) > .card .coin{box-shadow:0 4px 12px rgba(0,0,0,.28)}

/* single colorful boxes */
.box{position:relative;overflow:hidden;border:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 34px rgba(4,8,24,.45)}
.box::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(130% 120% at 18% -12%,rgba(255,255,255,.18),transparent 46%),
  radial-gradient(160% 140% at 102% 118%,rgba(0,0,0,.25),transparent 58%)}
.box>*{position:relative;z-index:1}
.box-red{background:linear-gradient(145deg,#e0516e 0%,#b91c48 50%,#6e1033 100%)}
.box-green{background:linear-gradient(145deg,#3ecf7a 0%,#16a34a 50%,#0e512f 100%)}
.box-orange{background:linear-gradient(145deg,#f97316 0%,#ea580c 48%,#92350c 100%)}
.box-blue{background:linear-gradient(145deg,#3b82f6 0%,#2563eb 50%,#1e3a8a 100%)}
.box-purple{background:linear-gradient(145deg,#60a5fa 0%,#3b82f6 50%,#1e3a8a 100%)}
.box-blue-pink{background:linear-gradient(145deg,#2563eb 0%,#1e3a8a 50%,#0f1f5c 100%)}
.box-pink{background:linear-gradient(145deg,#ec4899 0%,#be185d 48%,#831843 100%)}
.box h2,.box h3,.box h4,.box .payout,.box b{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.22)}
.box .lead,.box .muted,.box .small,.box p{color:rgba(240,244,255,.92)}
.box .eyebrow{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(0,0,0,.2)}
.box .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.box::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:.45;background-repeat:no-repeat;background-position:center left}
.box-red::after{background-image:url('../img/bck/bck-circuit-pink.svg');background-size:cover}
.box-green::after{background-image:url('../img/bck/bck-circuit-emerald.svg');background-size:cover}
.box-orange::after{background-image:url('../img/bck/bck-circuit-gold.svg');background-size:cover}
.box-blue::after{background-image:url('../img/bck/bck-circuit-blue.svg');background-size:cover}
.box-purple::after{background-image:url('../img/bck/bck-circuit-violet.svg');background-size:cover}
.box-pink::after{background-image:url('../img/bck/bck-circuit-pink.svg');background-size:cover}
.stat{display:flex;flex-direction:column;gap:4px;padding:20px;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;inset:0;z-index:0;background-image:url('../img/bck/bck-emerald.svg');background-size:cover;background-position:center;mix-blend-mode:screen;opacity:.5;pointer-events:none}
.stat:nth-child(4n+2)::after{background-image:url('../img/bck/bck-cyan.svg')}
.stat:nth-child(4n+3)::after{background-image:url('../img/bck/bck-gold.svg')}
.stat:nth-child(4n)::after{background-image:url('../img/bck/bck-violet.svg')}
.stat>*{position:relative;z-index:1}
.stat .label{font-size:13px;color:var(--muted)}
.stat .val{font-size:25px;font-weight:800;letter-spacing:-.02em}
.stat .sub{font-size:12px;color:var(--dim)}
.ico{width:54px;height:54px;border-radius:10px;display:grid;place-items:center;font-size:25px;margin-bottom:14px}
.center .ico,.stat.center .ico{margin-inline:auto}
.bar{height:6px;border-radius:10px;background:rgba(148,163,184,.12);overflow:hidden}
.bar i{display:block;height:100%;background:var(--grad);border-radius:10px;transition:.6s}
.rt-editor{background:var(--card);color:var(--text);border-radius:10px;min-height:200px}
.rt-editor .ql-editor{min-height:200px;font-size:14px;line-height:1.6}
.rt-editor .ql-editor a{color:var(--primary)}
.rt-editor .ql-editor img{max-width:100%;height:auto;border-radius:8px;margin:6px 0}
/* blog post editor: square corners and a canvas three times taller */
.rt-editor--blog,.rt-editor--blog .ql-editor{min-height:600px}
html .rt-editor--blog.ql-container.ql-snow,html .rt-editor--blog .ql-container{border-radius:0}
/* Quill snow theme recoloured via theme variables so it follows dark/light.
   The CDN quill.snow.css loads after this file, so every override carries an
   `html` prefix to win on specificity rather than source order. */
html .ql-toolbar.ql-snow{background:var(--card-2);border:1px solid var(--border-strong);border-bottom:0;border-radius:0}
html .ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}
html .rt-editor.ql-container.ql-snow,html .rt-editor .ql-container{border-color:var(--border-strong);background:var(--card);color:var(--text)}
html .ql-snow .ql-stroke{stroke:var(--text)}
html .ql-snow .ql-stroke-miter{stroke:var(--text)}
html .ql-snow .ql-fill,html .ql-snow .ql-stroke.ql-fill{fill:var(--text)}
html .ql-snow .ql-picker{color:var(--text)}
html .ql-snow .ql-picker-options{background:var(--card-2);border-color:var(--border-strong)}
html .ql-snow .ql-picker.ql-expanded .ql-picker-label,html .ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:var(--border-strong)}
html .rt-editor .ql-editor.ql-blank::before{color:var(--dim);font-style:normal}
html .ql-snow .ql-editor blockquote{border-left-color:var(--border-strong);color:var(--muted)}
/* the header picker's default "Normal" entry is shown as Paragraph */
html .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=""]::before,
html .ql-snow .ql-picker.ql-header .ql-picker-label:not([data-value])::before,
html .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=""]::before{content:'Paragraph'}
html .ql-snow .ql-picker-label:hover,html .ql-snow .ql-picker-item:hover,html .ql-snow .ql-picker-item.ql-selected{color:var(--primary)}
/* link tooltip (the "make a link" popup) — dark, and pushed well in from the left edge */
html .ql-snow .ql-tooltip{background:var(--card-2);border:1px solid var(--border-strong);color:var(--text);border-radius:0;box-shadow:var(--shadow);margin-left:180px;max-width:calc(100% - 190px);white-space:normal}
html .ql-snow .ql-tooltip::before{color:var(--muted)}
html .ql-snow .ql-tooltip input[type=text]{background:var(--bg);border:1px solid var(--border-strong);color:var(--text);border-radius:0}
html .ql-snow .ql-tooltip a{color:var(--primary)}
html .ql-snow .ql-tooltip a.ql-action::after{border-right-color:var(--border-strong)}
/* "open in new tab" checkbox shown only while naming a link */
html .ql-snow .rt-link-newtab{display:none;align-items:center;gap:5px;color:var(--muted);font-size:12px;white-space:nowrap;margin-left:8px;vertical-align:middle;cursor:pointer;user-select:none}
html .ql-snow .ql-tooltip.ql-editing[data-mode="link"] .rt-link-newtab{display:inline-flex}
html .ql-snow .rt-link-newtab input{width:auto;margin:0;accent-color:var(--primary);cursor:pointer}
/* image dialog */
.rt-img-dialog{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:rgba(4,8,24,.6);padding:20px}
.rt-img-dialog[hidden]{display:none}
.rt-img-box{width:100%;max-width:420px;background:var(--card);border:1px solid var(--border-strong);border-radius:12px;padding:20px;box-shadow:var(--shadow)}
.rt-img-box h4{font-size:16px;margin-bottom:14px}
.rt-img-box label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
.rt-img-box .input{margin-bottom:12px}
.rt-img-or{text-align:center;font-size:12px;color:var(--dim);margin:4px 0 12px}
.rt-img-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.rt-img-err{color:var(--red);font-size:12.5px;margin-top:10px}

/* ============ happy earners band ============ */
.earners{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
.earner-card{position:relative;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.22);box-shadow:0 14px 34px rgba(4,8,24,.45);aspect-ratio:4/4.4;background:linear-gradient(145deg,#1b2447,#121a33)}
.earner-card img{width:100%;height:100%;object-fit:cover;display:block}
.earner-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,12,28,.05) 55%,rgba(9,12,28,.78) 100%);pointer-events:none;mix-blend-mode:normal;opacity:1}
.earner-cap{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:8px}
.earner-cap b{font-size:13.5px;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.earner-cap span{color:var(--green);font-weight:800;font-size:12.5px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.2);padding:2px 9px;border-radius:10px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
@media(max-width:640px){.earners{grid-template-columns:repeat(2,1fr);gap:12px}.earner-cap{left:9px;right:9px;bottom:9px}}

/* ============ offer cards ============ */
.offer-card{padding:20px;display:flex;flex-direction:column;gap:12px;position:relative;container-type:inline-size;min-width:0;overflow:hidden}
.offer-card .top{display:flex;align-items:flex-start;gap:13px;flex-wrap:wrap}
.offer-card .ui{width:56px;height:56px;border-radius:10px;display:grid;place-items:center;font-size:26px;flex:none;background:rgba(59,130,246,.14)}
.offer-card h4{font-size:15px;line-height:1.35}
.offer-card .payout{font-size:21px;font-weight:800;letter-spacing:-.02em;flex:0 0 auto;margin-left:auto}
.offer-card .payout small{font-size:12px;color:var(--muted);font-weight:600}
.offer-card .btn{margin-top:auto}
.offer-card.has-img{overflow:hidden;border-radius:0 0 var(--rad) var(--rad)}
.offer-card.has-img .offer-img{display:block;width:calc(100% + 40px);max-width:none;height:130px;margin:-20px -20px 0 -20px;object-fit:cover;object-position:center;border-radius:var(--rad) var(--rad) 0 0;flex:none}

/* narrow offer cards (e.g. 6-across dashboard grid) stack into a tidy column */
@container (max-width:225px){
  .offer-card{padding:14px;gap:10px}
  .offer-card .top{flex-direction:column;align-items:stretch;gap:9px;flex-wrap:nowrap}
  .offer-card .ui{width:44px;height:44px;font-size:20px;border-radius:9px}
  .offer-card h4{font-size:14px;min-height:0}
  .offer-card .payout{font-size:17px;margin-left:0}
  .offer-card .payout small{display:block}
}

/* dashboard offer/task grids — always 5 per row */
.dash-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:640px){.dash-5{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* dashboard offer cards — always stacked, no truncation (declared last so it always wins) */
.offer-c{padding:14px;gap:10px}
.offer-c .payout,.offer-card .payout:is(.pay-blue,.pay-green,.pay-orange,.pay-pink,.pay-gold,.pay-red){display:inline-flex;align-items:center;gap:3px;background:var(--grad-green);color:#fff;font-size:17px;font-weight:800;padding:4px 12px;border-radius:8px;box-shadow:0 4px 12px rgba(22,163,74,.4);white-space:nowrap;align-self:flex-start}
.offer-card .payout.pay-blue{background:var(--grad-blue);box-shadow:0 4px 12px rgba(59,130,246,.4)}
.offer-card .payout.pay-green{background:var(--grad-green);box-shadow:0 4px 12px rgba(22,163,74,.4)}
.offer-card .payout.pay-orange{background:linear-gradient(180deg,#f97316 0%,#ea580c 48%,#92350c 100%);box-shadow:0 4px 12px rgba(249,115,22,.4)}
.offer-card .payout.pay-pink{background:var(--grad-pink);box-shadow:0 4px 12px rgba(236,72,153,.4)}
.offer-card .payout.pay-gold{background:var(--grad-blue);box-shadow:0 4px 12px rgba(59,130,246,.4)}
.offer-card .payout.pay-red{background:var(--grad-red);box-shadow:0 4px 12px rgba(239,68,68,.4)}
.offer-c .payout small{font-size:11px;color:rgba(255,255,255,.88);font-weight:700}
.offer-c h4{font-size:15px;line-height:1.35;min-height:21px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%}
.offer-c .meta{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;min-width:0}
.offer-c .tag{flex:0 1 auto;font-size:9px;padding:2px 6px;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.offer-c .wall{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--muted);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.offer-c.has-img .offer-img{margin:-14px -14px 0 -14px;width:calc(100% + 28px)}

/* ============ offerwall tiles (dashboard) ============ */
/* Compact blue card: the network name on top and a big logo under it. The whole
   tile is one anchor; the dashboard click handler ([data-wall-inline]) loads the
   wall in the content column (between the sidebar and the chat drawer) with no
   page reload. */
.wall-tiles{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.wall-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:180px;padding:16px 14px;border-radius:18px;overflow:hidden;background:linear-gradient(145deg,#3b82f6 0%,#2563eb 50%,#1e3a8a 100%);color:#fff;text-decoration:none;transition:transform .22s cubic-bezier(.25,.46,.45,.94),box-shadow .22s}
.wall-tile:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(37,99,235,.45)}
.wall-tile .wt-name{font-weight:800;font-size:15px;line-height:1.2;text-align:center;color:#fff;margin-bottom:8px;max-width:100%}
.wall-tile .wt-logo{width:132px;height:132px;border-radius:26px;display:grid;place-items:center;background:var(--bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);flex:none}
.wall-tile .wt-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.wall-tile.is-locked{opacity:.96}
.wall-inline-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.wall-inline-bar b{font-size:16px}
.wall-inline iframe{width:100%;height:min(80vh,1000px);min-height:600px;border:1px solid var(--border);border-radius:16px;background:#0b1120;display:block}
@media(max-width:640px){.wall-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.wall-tile{min-height:152px;padding:12px;border-radius:16px}.wall-tile .wt-logo{width:108px;height:108px;border-radius:20px}}

.tag{font-size:11px;font-weight:700;padding:3px 10px;border-radius:10px;letter-spacing:.04em}
.tag-task{background:rgba(34,211,238,.12);color:var(--cyan);border:1px solid rgba(34,211,238,.3)}
.tag-cpa{background:rgba(139,92,246,.14);color:var(--violet);border:1px solid rgba(139,92,246,.32)}
.tag-survey{background:rgba(52,211,153,.12);color:var(--green);border:1px solid rgba(52,211,153,.3)}
.tag-app{background:rgba(251,146,60,.12);color:var(--gold);border:1px solid rgba(251,146,60,.3)}
.tag-other{background:rgba(148,163,184,.12);color:var(--muted);border:1px solid rgba(148,163,184,.3)}
.offer-meta{display:flex;gap:14px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.offer-meta b{color:var(--text)}

/* filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.pill{padding:8px 16px;border-radius:10px;border:1px solid var(--border-strong);background:rgba(255,255,255,.03);color:var(--muted);font-weight:600;font-size:13px;transition:.15s}
.pill:hover{color:var(--text);border-color:var(--border-strong)}
.pill.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(37,99,235,.4)}
.search{flex:1;min-width:200px;display:flex;align-items:center;gap:10px;background:rgba(14,21,43,.85);border:1px solid var(--border-strong);border-radius:10px;padding:10px 18px}
.search input{background:none;border:none;outline:none;color:var(--text);width:100%;font-size:14px}
.search input::placeholder{color:var(--dim)}

/* ============ forms ============ */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:7px}
.input{width:100%;background:rgba(14,21,43,.72);border:1px solid var(--border-strong);border-radius:10px;padding:11px 14px;color:var(--text);font-size:14.5px;transition:.15s;outline:none}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.24)}
textarea.input{min-height:110px;resize:vertical}
select.input{cursor:pointer}
.check{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--muted);cursor:pointer}
.check input{margin-top:4px;accent-color:var(--primary);width:16px;height:16px}
.hint{font-size:12px;color:var(--dim);margin-top:5px}
.form-section{padding:10px 0 24px;display:flex;justify-content:center;align-items:flex-start;width:100%;max-width:100%;box-sizing:border-box;margin:0 auto}
.form-card{width:380px !important;max-width:380px !important;min-width:380px !important;margin:0 auto 20px;padding:30px;box-sizing:border-box;flex-shrink:0;display:block}
.auth-head{text-align:center;margin-bottom:24px}
.auth-head h1{font-size:26px}
.auth-head p{color:var(--muted);font-size:14px;margin-top:6px}
/* Admin sign-in door: the card wears the site's blue gradient and the icon and
   button the pink gradient. Because the card keeps a blue gradient in BOTH
   themes, the heading and field labels are pinned to near-white so they stay
   legible regardless of the active theme. */
.form-card.auth-admin{background:linear-gradient(180deg,#1d4ed8 0%,#172554 100%)!important;box-shadow:0 24px 60px rgba(2,6,23,.55),0 8px 24px rgba(2,6,23,.42),inset 0 1px 0 rgba(255,255,255,.16)!important}
.form-card.auth-admin::after{background:transparent!important;background-image:none!important;opacity:0!important}
.form-card.auth-admin .auth-head h1{font-size:26px;color:#f2f6ff}
.form-card.auth-admin .auth-head p{color:#dbe6ff}
.form-card.auth-admin .field label{color:#eaf1ff!important}
.form-card.auth-admin .center a{color:#e0ecff!important}
/* Wider card with related fields side by side (admin sign-in, member sign-in
   and sign-up all share the same 620px width). */
.form-card.auth-admin,
.form-card.form-wide{width:620px!important;max-width:620px!important;min-width:620px!important}
.auth-two{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}
@media(max-width:680px){
  .form-card.auth-admin,
  .form-card.form-wide{width:calc(100% - 28px)!important;max-width:calc(100% - 28px)!important;min-width:calc(100% - 28px)!important}
  .auth-two{grid-template-columns:1fr}
}
.divider{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:12px;margin:20px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border)}

/* ============ tables ============ */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:12px 14px;border-bottom:1px solid var(--border-strong)}
.table td{padding:13px 14px;border-bottom:1px solid var(--border)}
.table tr:hover td{background:rgba(255,255,255,.02)}
/* denser rows for long admin listings where each entry carries its own controls */
.table-compact th{padding:8px 10px}
.table-compact td{padding:6px 10px}
.user-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.user-actions form{display:flex;align-items:center;gap:4px}
.admin-back{white-space:nowrap}
@media(max-width:520px){.admin-back{font-size:0;padding:6px 9px}.admin-back i{font-size:13px;margin:0}}
.pill-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 11px;border-radius:10px}
.st-active,.st-credited,.st-approved,.st-active-p{background:rgba(52,211,153,.12);color:var(--green)}
.st-pending{background:rgba(251,146,60,.12);color:var(--gold)}
.st-disabled,.st-paused,.st-rejected,.st-expired,.st-banned{background:rgba(244,63,94,.1);color:var(--red)}
.st-hidden{background:rgba(148,163,184,.12);color:var(--muted)}

/* ============ badges / misc ============ */
.chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:7px 15px;font-size:13px;color:var(--muted)}
.coin{width:34px;height:34px;border-radius:10px;background:var(--grad-blue);display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;flex:none}

/* ============ toast ============ */
.toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:9px;width:min(94vw,420px)}
.toast{display:flex;align-items:center;gap:12px;background:var(--card-2);border:1px solid var(--border-strong);border-left:3px solid var(--cyan);border-radius:12px;padding:12px 12px 12px 14px;font-size:14px;box-shadow:var(--shadow);animation:slideUp .3s ease}
.toast-ico{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:rgba(34,211,238,.14);color:var(--cyan)}
.toast-msg{flex:1;min-width:0;line-height:1.4;color:var(--text)}
.toast-x{flex:none;border:none;background:transparent;color:var(--muted);width:26px;height:26px;border-radius:8px;cursor:pointer;display:grid;place-items:center;font-size:13px;padding:0;transition:.15s}
.toast-x:hover{background:rgba(255,255,255,.08);color:var(--text)}
.toast.toast-ok{border-left-color:var(--green)}
.toast.toast-ok .toast-ico{background:rgba(62,207,122,.16);color:var(--green)}
.toast.toast-error{border-left-color:var(--red)}
.toast.toast-error .toast-ico{background:rgba(255,59,92,.16);color:var(--red)}
.toast.toast-mention{border-left-color:#a855f7;box-shadow:var(--shadow),0 0 0 1px rgba(168,85,247,.25)}
.toast.toast-mention .toast-ico{background:rgba(168,85,247,.16);color:#c084fc}
.toast.toast-warning{border-left-color:var(--gold)}
.toast.toast-warning .toast-ico{background:rgba(245,158,11,.16);color:var(--gold)}
.toast.out{opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ============ modal ============ */
.modal-back{position:fixed;inset:0;z-index:150;background:rgba(4,7,14,.72);backdrop-filter:blur(5px);display:grid;place-items:center;padding:18px;animation:fade .2s}
.modal{width:100%;max-width:520px;background:var(--card);border-radius:10px;padding:24px;box-shadow:var(--shadow);animation:pop .22s}
  .modal.full{max-width:min(880px,93vw);height:min(84vh,700px);padding:0;overflow:hidden;display:flex;flex-direction:column}
  .modal.full .mh{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border)}
.modal.full iframe{flex:1;border:none;width:100%;background:#0b1120;display:block}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{transform:scale(.96);opacity:0}}
/* ---- live earning details modal ---- */
#earningModalBack .modal{position:relative;max-width:460px}
.modal-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--border-soft);color:var(--text);cursor:pointer;display:grid;place-items:center;padding:0;z-index:2}
.modal-x:hover{background:var(--border);color:var(--text)}
.earn-head{display:flex;align-items:center;gap:12px;padding-right:38px}
.earn-head .avatar{flex:none}
.earn-head>div:nth-child(2){min-width:0;flex:1}
.earn-user{font-weight:800;font-size:16px;color:var(--text);overflow:hidden;text-overflow:ellipsis}
.earn-amt{font-weight:900;font-size:20px;color:var(--green);white-space:nowrap}
.earn-rows{margin-top:16px;border-top:1px solid var(--border);padding-top:6px}
.earn-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--border)}
.earn-row:last-child{border-bottom:none}
.earn-row>span{flex:none;color:var(--muted);font-size:13px}
.earn-row>b{font-weight:700;text-align:right;word-break:break-word;min-width:0}
.earn-note{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 12px;border-radius:9px;background:var(--border-soft);color:var(--muted);font-size:13px}
.earn-note i{color:var(--green)}

/* ---- themed confirm dialog ---- */
.confirm-modal{max-width:400px;text-align:center}
.confirm-ico{width:58px;height:58px;margin:0 auto 14px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:rgba(59,130,246,.14);color:var(--primary)}
.confirm-ico.danger{background:rgba(255,59,92,.14);color:var(--red)}
.confirm-title{margin:0 0 6px;font-size:18px;font-weight:800;color:var(--text)}
.confirm-msg{margin:0 0 20px;color:var(--muted);font-size:14px;line-height:1.5}
.confirm-actions{display:flex;gap:10px;justify-content:center}
.confirm-actions .btn{flex:1;max-width:165px;justify-content:center}

/* ============ feed ============ */
.feed{display:flex;flex-direction:column}
.feed-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;transition:.15s}
.feed-item:hover{background:rgba(255,255,255,.03)}
.feed-item .famt{font-weight:800;color:var(--green);font-size:14.5px;margin-left:auto;white-space:nowrap}
.feed-item .r{width:7px;height:7px;border-radius:10px;background:var(--green);flex:none;animation:pulse 1.8s infinite}
.feed-item .r.blue{background:var(--cyan)}
.livetoast{position:fixed;bottom:22px;left:22px;z-index:120;display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,#101b33,#0b1426);border:1px solid rgba(34,211,238,.28);border-radius:10px;padding:12px 16px;box-shadow:var(--glow);animation:lide .4s;max-width:320px}
@keyframes lide{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.livetoast .amt{color:var(--green);font-weight:800}

/* ============ chat ============ */
.chat-wrap{display:grid;grid-template-columns:250px 1fr;gap:0;height:calc(100vh - 66px - 70px)}
.chat-side{border-right:1px solid var(--border);padding:18px 14px;overflow-y:auto;background:rgba(10,15,28,.5)}
.chat-main{display:flex;flex-direction:column;position:relative;max-width:900px;margin:0 auto;width:100%}
.chat-msgs{flex:1;overflow-y:auto;padding:14px 0 14px 18px;display:flex;flex-direction:column;gap:8px}
.msg{display:flex;flex-direction:column;width:100%;max-width:100%}
.msg .bubble{display:flex;align-items:flex-start;gap:9px;background:rgba(21,28,56,.55);border:none;border-radius:5px;padding:5px 9px;min-width:0;width:100%;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 6px 20px rgba(3,6,20,.4),0 2px 6px rgba(3,6,20,.2)}
.msg.mine .bubble{background:rgba(21,28,56,.55)}
.msg.admin .bubble{background:rgba(21,28,56,.55);border-left:3px solid #3b82f6}
.msg.mod .bubble{background:rgba(21,28,56,.55);border-left:3px solid #22c55e}
.msg.staff .bubble{background:rgba(21,28,56,.55);border-left:3px solid #f472b6}
.msg .msg-body{min-width:0;flex:1 1 auto}
.msg .bubble .meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
.msg .bubble .meta .meta-left{display:flex;align-items:center;gap:6px;min-width:0}
.msg .bubble .meta .who{font-weight:400;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.msg .bubble .meta .when{font-size:10px;color:var(--dim);flex:none;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.msg-ava{width:32px;height:32px;font-size:12px;border-radius:5px;display:inline-grid;place-items:center;overflow:hidden;color:#fff;font-weight:700;flex:none;margin-top:1px;background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);box-shadow:0 0 0 1.5px rgba(59,130,246,.9),0 0 6px rgba(59,130,246,.45),0 0 0 4px rgba(10,16,34,.9)}
.msg-ava img{width:100%;height:100%;object-fit:cover;display:block}
.msg.mine .msg-ava{background:linear-gradient(135deg,#2563eb 0%,#ec4899 60%,#fb923c 100%)}
.msg .bubble-text{font-size:12.5px;line-height:1.45;word-break:break-word}
.msg .bubble.deleted{opacity:.42;font-style:italic}
.msg .meta .mention-btn{border:none;background:rgba(99,102,241,.16);color:#a5b4fc;width:21px;height:21px;border-radius:10px;display:inline-grid;place-items:center;font-size:11px;cursor:pointer;padding:0;opacity:.6;transition:.15s;flex:none}
.msg .meta .mention-btn:hover{background:var(--grad);color:#fff;opacity:1;transform:translateY(-1px)}
.msg .bubble .mention{color:#fb923c;font-weight:700;background:rgba(249,115,22,.14);border-radius:10px;padding:0 3px}
.msg .bubble .mention-me{color:#fde68a;background:rgba(251,191,36,.16)}
.msg-actions{display:flex;gap:5px;opacity:0;transition:opacity .2s;margin-top:5px;height:24px;align-items:center;justify-content:flex-end;visibility:hidden}
.msg:hover .msg-actions,.msg-actions:focus-within{opacity:1;visibility:visible;margin-top:5px}
.msg-actions .icon-btn{border:none;background:rgba(255,255,255,.07);color:var(--muted);height:24px;min-width:24px;padding:0 6px;border-radius:10px;display:inline-grid;place-items:center;font-size:11px;font-weight:700;cursor:pointer;transition:.15s;line-height:1}
.msg-actions .icon-btn:hover{background:rgba(255,59,92,.16);color:var(--red)}
.msg-actions .icon-btn.mod:hover{background:rgba(59,130,246,.18);color:#93c5fd}
.chat-input{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--border);background:rgba(10,15,28,.7)}
.chat-input input{flex:1}
.chat-online .o{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:10px;font-size:13.5px}
.chat-online .o:hover{background:rgba(255,255,255,.04)}
.odot{width:8px;height:8px;border-radius:10px;background:var(--green);flex:none}

/* ============ community chat drawer (native right-dock) ============ */
.chat-tab{position:fixed;top:52%;right:calc(var(--chat-w,0px) + 2px);transform:translateY(-50%);z-index:110;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 9px;border:none;border-radius:10px 0 0 10px;background:var(--grad-blue);color:#fff;font-size:16px;cursor:pointer;box-shadow:0 10px 26px rgba(4,8,24,.5),inset 0 1px 0 rgba(255,255,255,.28);transition:.22s}
.chat-tab:hover{background:linear-gradient(180deg,#3b82f6,#2563eb);padding-right:14px}
.chat-tab .chat-tab-label{writing-mode:vertical-rl;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.chat-tab .live-dot{width:9px;height:9px;border:2px solid #0b1020}
.chat-tab .chat-unread{position:absolute;top:8px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--red);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;box-shadow:0 4px 12px rgba(244,63,94,.5);border:2px solid #0b1020}

/* ============ left sidebar toggle tab (left edge, mirrors chat-tab) ============ */
.side-tab{position:fixed;top:52%;left:calc(var(--side-w,200px) + 2px);transform:translateY(-50%);z-index:110;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 9px;border:none;border-radius:0 10px 10px 0;background:var(--grad-blue);color:#fff;font-size:16px;cursor:pointer;box-shadow:0 10px 26px rgba(4,8,24,.5),inset 0 1px 0 rgba(255,255,255,.28);transition:.22s}
.side-tab:hover{background:linear-gradient(180deg,#3b82f6,#2563eb);padding-left:14px}
.side-tab .side-tab-label{writing-mode:vertical-rl;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.chat-drawer{position:sticky;top:calc(66px + var(--top-strip-h,0px));align-self:start;height:calc(100vh - 66px - var(--top-strip-h,0px));min-width:0;overflow:hidden;background:linear-gradient(180deg,rgba(22,28,58,.5) 0%,rgba(11,17,36,.45) 100%);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);border-left:1px solid rgba(148,163,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);display:flex;flex-direction:column}
body.chat-open .chat-drawer{border-left:1px solid rgba(148,163,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),-24px 0 60px rgba(4,8,24,.55)}
.chat-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;background:linear-gradient(150deg,rgba(18,28,56,.55) 0%,rgba(16,30,64,.5) 48%,rgba(62,20,58,.48) 100%);border-bottom:1px solid rgba(148,163,255,.14)}
.chat-drawer-title{display:flex;align-items:center;gap:11px}
.chat-drawer-title .logo{background:var(--grad);display:grid;place-items:center;color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.45);flex:none}
.chat-drawer-title b{font-size:15.5px}
.chat-drawer-status{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--green);font-weight:700;margin-top:2px}
.chat-drawer-status .live-dot{width:7px;height:7px}
.chat-drawer-rules{display:flex;align-items:center;gap:9px;padding:9px 16px;font-size:12px;color:var(--muted);background:rgba(10,15,28,.35);border-bottom:1px solid var(--border)}
.chat-drawer-rules .rules-toggle{border:none;background:rgba(255,255,255,.08);color:var(--muted);width:20px;height:20px;border-radius:10px;display:grid;place-items:center;font-size:11px;cursor:pointer;margin-left:auto;transition:.15s;flex:none}
.chat-drawer-rules .rules-toggle:hover{background:rgba(255,59,92,.16);color:var(--red)}
.rules-reopen{display:flex;align-items:center;gap:7px;border:none;background:rgba(10,15,28,.4);color:var(--muted);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:6px 12px;margin:0 16px 0 auto;border-bottom:1px solid var(--border);cursor:pointer;width:fit-content;border-radius:0 0 10px 10px;transition:.15s}
.rules-reopen:hover{color:#fff;background:rgba(34,197,94,.14)}
.chat-drawer-msgs{flex:1;overflow-y:auto;padding:10px 0 10px 10px;scrollbar-gutter:stable}
.chat-drawer-msgs::-webkit-scrollbar{width:6px}
.chat-drawer-msgs::-webkit-scrollbar-thumb{background:rgba(148,163,255,.25);border-radius:10px;border:none}
.chat-drawer-msgs::-webkit-scrollbar-track{background:transparent}
.chat-drawer-input{display:flex;gap:8px;padding:11px 12px 12px;border-top:1px solid rgba(148,163,255,.14);background:rgba(10,15,28,.4)}

/* ---------- chat activity blocks (online / joiners / live earnings) ---------- */
/* ---------- combined chat feed rows (new members + live earnings) ----------
   These share the message list container, so they sit inline with the bubbles. */
.chat-act-earn{margin:6px 0;padding:8px 10px;border-radius:11px;background:rgba(148,163,255,.06);border:1px solid rgba(148,163,255,.12);cursor:pointer;transition:.15s}
.chat-act-earn:hover{background:rgba(148,163,255,.11);border-color:rgba(148,163,255,.22)}
.chat-act-earn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.chat-act-earn-top{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.chat-act-bolt{font-size:10px;color:var(--green);flex:none}
.chat-act-who{font-size:12px;font-weight:700;color:#e7ecff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-act-earned{margin-left:auto;font-size:11px;font-weight:800;color:var(--green);white-space:nowrap;flex:none}
.chat-act-earn-bot{font-size:11px;color:#b9c3e8;line-height:1.45}
.chat-act-kind{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:1px 5px;border-radius:5px;margin-right:5px;background:rgba(124,58,237,.2);color:#c4b5fd}
.chat-act-kind.advertiser{background:rgba(34,197,94,.18);color:#86efac}
.chat-act-age{font-size:9px;color:var(--dim);margin-top:3px}
.chat-act-join{display:flex;align-items:center;gap:7px;margin:6px 0;padding:7px 10px;border-radius:11px;background:rgba(34,197,94,.07);border:1px solid rgba(34,197,94,.16);font-size:11px;color:#cfe9d6}
.chat-act-join b{color:#eafff1;font-weight:700}
.chat-act-joinicon{font-size:10px;color:var(--green);flex:none}
.chat-act-flag{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Segoe UI Symbol",sans-serif;font-size:12px;line-height:1;flex:none}
.chat-act-join .chat-act-age{margin:0 0 0 auto;flex:none}
.chat-act-empty{font-size:11px;color:var(--dim);font-style:italic;padding:14px 4px;text-align:center}
.chat-drawer-input .input{flex:1;min-width:0;height:38px;border-radius:10px}
.chat-drawer-input .btn{height:38px;padding:0 14px;border-radius:10px;flex:none}
.chat-drawer-input{position:relative}
/* @mention autocomplete */
.chat-mention-box{position:absolute;left:12px;right:12px;bottom:64px;z-index:6;background:var(--card-2);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow);padding:5px;max-height:210px;overflow-y:auto}
.chat-mention-item{display:flex;align-items:center;gap:9px;width:100%;border:none;background:transparent;color:var(--text);padding:7px 9px;border-radius:9px;cursor:pointer;font-size:13.5px;text-align:left;transition:.12s}
.chat-mention-item:hover,.chat-mention-item.hl{background:rgba(59,130,246,.18)}
.chat-mention-item img,.chat-mention-item .cmi-ava{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--grad-blue);color:#fff}
.chat-mention-item .cmi-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.chat-mention-item i{color:var(--muted);font-size:12px}
/* emoji picker */
.chat-emoji-btn{flex:none;width:38px;height:38px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.05);color:var(--muted);font-size:17px;cursor:pointer;display:grid;place-items:center;transition:.15s}
.chat-emoji-btn:hover,.chat-emoji-btn[aria-expanded="true"]{color:var(--gold);background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.4)}
.chat-emoji-panel{position:absolute;left:12px;right:12px;bottom:64px;z-index:6;background:var(--card-2);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow);padding:8px 6px;max-height:264px;overflow-y:auto}
.chat-emoji-head{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:7px 8px 4px;display:flex;align-items:center;gap:7px}
.chat-emoji-head i{color:var(--gold)}
.chat-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.chat-emoji-item{border:none;background:transparent;font-size:21px;line-height:1;padding:5px 0;border-radius:9px;cursor:pointer;transition:.12s}
.chat-emoji-item:hover{background:rgba(59,130,246,.18);transform:scale(1.15)}

/* minimized chat rail: avatars of chat participants (mirrors left sidebar rail) */
body.has-chat .chat-drawer{border-left:1px solid rgba(148,163,255,.18)}
.chat-mini{display:none;flex-direction:column;align-items:center;gap:9px;height:100%;padding:12px 0;overflow-y:auto;scrollbar-width:none}
.chat-mini::-webkit-scrollbar{display:none}
.chat-mini-open{width:38px;height:38px;border:none;border-radius:10px;background:var(--grad);color:#fff;font-size:15px;display:grid;place-items:center;cursor:pointer;flex:none;box-shadow:0 6px 16px rgba(37,99,235,.45);transition:.15s}
.chat-mini-open:hover{transform:translateY(-2px)}
.chat-mini-count{font-size:11px;font-weight:800;color:var(--green);letter-spacing:.04em;flex:none}
.chat-mini-list{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%}
.chat-mini-list .avatar{width:38px;height:38px;font-size:14px;cursor:pointer;transition:.15s}
.chat-mini-list .avatar:hover{transform:translateY(-2px)}
.chat-mini-list .avatar.online{box-shadow:0 0 0 2px var(--green)}
.chat-mini-empty{font-size:10px;color:var(--dim);writing-mode:vertical-rl;letter-spacing:.1em;text-transform:uppercase;padding:6px 0}
body:not(.chat-open) .chat-drawer .chat-drawer-head,
body:not(.chat-open) .chat-drawer .chat-drawer-rules,
body:not(.chat-open) .chat-drawer .chat-drawer-msgs,
body:not(.chat-open) .chat-drawer .chat-drawer-input{display:none}
body.has-chat:not(.chat-open) .chat-drawer .chat-mini{display:flex}
@media(max-width:640px){
  .chat-drawer .chat-msgs{padding:12px 0 12px 12px}
}
@media(min-width:1081px) and (max-width:1599px){
  body.chat-open .hero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px}
}
@media(min-width:1081px) and (max-width:1350px){
  body.chat-open .hero h1{font-size:clamp(26px,3.2vw,44px)}
  body.chat-open .hero-cta{flex-wrap:nowrap;gap:9px}
  body.chat-open .hero-cta .btn-lg{font-size:14px;padding:13px 20px;border-radius:10px}
}
@media(min-width:1081px){
  body.chat-open .hero .hero-cta,
  body:not(.side-collapsed) .hero .hero-cta{margin-top:96px}
}
@media(prefers-reduced-motion:reduce){
  .chat-drawer{transition:none}
}

/* ============ dashboard / admin layout ============ */
.shell{display:grid;grid-template-columns:var(--side-w,200px) minmax(0,1fr);gap:0;min-height:calc(100vh - 66px);align-items:start}
.sidebar{background:rgba(10,15,28,.55);border-right:1px solid var(--border);padding:20px 14px}
.sidebar a{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:10px;font-weight:600;font-size:14px;color:var(--muted);margin-bottom:3px;transition:.15s}
.sidebar a:hover{color:var(--text);background:rgba(59,130,246,.10)}
.sidebar a.active{color:#fff;background:rgba(59,130,246,.24);box-shadow:0 4px 14px -7px rgba(59,130,246,.6),0 1px 10px -3px rgba(37,99,235,.35)}
/* red unread/pending count pill on sidebar links (member + admin) */
.nav-badge{margin-left:auto;flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#ff3b5c;color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 3px 10px -2px rgba(255,59,92,.65)}
.sidebar a.active .nav-badge{background:#fff;color:#ff3b5c}
.sidebar .sec{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);padding:16px 13px 6px;font-weight:700}
.content{padding:28px 26px 60px;max-width:1180px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}

/* ============ site-wide left sidebar ============ */
.site-shell{grid-template-columns:var(--side-w,200px) minmax(0,1fr) var(--chat-w,0px);transition:grid-template-columns .28s cubic-bezier(.2,.8,.25,1);align-items:start;overflow:visible}
.site-sidebar{position:sticky;top:calc(66px + var(--top-strip-h,0px));align-self:start;height:calc(100vh - 66px - var(--top-strip-h,0px));overflow-y:auto;scrollbar-width:thin;transition:padding .25s ease}
.site-sidebar a{font-size:14px}
.site-main{max-width:none;padding:0;min-width:0;display:flex;flex-direction:column;align-items:stretch;width:100%;box-sizing:border-box;overflow:visible}
body.has-chat{--chat-w:64px}
body.has-chat.chat-open{--chat-w:var(--dock-w)}
body.side-collapsed{--side-w:64px}
body.side-collapsed .site-sidebar{padding:18px 0 26px}
body.side-collapsed .site-sidebar .sec{display:none}
body.side-collapsed .site-sidebar a{justify-content:center;padding:11px 0}
body.side-collapsed .site-sidebar a span{display:none}
body.side-collapsed .shell .sidebar{padding:18px 0 26px}
body.side-collapsed .shell .sidebar .sec{display:none}
body.side-collapsed .shell .sidebar a{justify-content:center;padding:11px 0}
body.side-collapsed .shell .sidebar a span{display:none}
.nav.admin-nav{background:linear-gradient(180deg,#3b82f6 0%,#2563eb 55%,#1e3a8a 100%);border-bottom:none;padding-top:1.5px;padding-bottom:1.5px}
.nav.admin-nav.scrolled{background:linear-gradient(180deg,#3b82f6 0%,#2563eb 55%,#1e3a8a 100%);border-bottom:none;box-shadow:0 10px 30px rgba(37,99,235,.35)}
.nav.admin-nav .brand{transform:translateY(-2px)}
.admin-date{display:inline-flex;align-items:center;gap:8px;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:8px 14px;border-radius:10px;font-size:12.5px;font-weight:700;white-space:nowrap;box-shadow:0 6px 16px rgba(15,23,42,.25)}
@media(max-width:420px){.admin-date span{display:none}}
@media(max-width:1100px){
   .nav.site-nav .wrap{padding-left:10px}
  .site-shell{grid-template-columns:minmax(0,1fr)}
  .site-sidebar{display:none}
  .side-tab{display:none}
  body.has-chat{--chat-w:0px}
  .form-section{max-width:100% !important}

  .chat-drawer{position:fixed;right:0;top:0;bottom:0;height:auto;max-height:none;z-index:199;width:min(var(--dock-w),100vw);transform:translateX(105%);transition:transform .28s cubic-bezier(.2,.8,.25,1);visibility:hidden}
  .chat-drawer.open{transform:none;visibility:visible}
  body.chat-open .chat-drawer{border-left:1px solid rgba(148,163,255,.18);box-shadow:-24px 0 60px rgba(4,8,24,.55)}
  body.has-chat:not(.chat-open) .chat-drawer .chat-mini{display:none}
  body.has-chat .chat-tab{right:2px}
}
.page-head h1{font-size:26px}
.crumb{font-size:13px;color:var(--dim);margin-top:4px}

/* ============ steps / features ============ */
.step{position:relative}
.step .num{width:40px;height:40px;border-radius:10px;background:var(--grad);color:#fff;font-weight:800;display:grid;place-items:center;margin-bottom:14px;box-shadow:0 8px 20px rgba(37,99,235,.45)}
.feature{padding:26px}
.feature .ico{background:rgba(59,130,246,.14)}

/* ============ accordion ============ */
.acc{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden}
.acc summary{cursor:pointer;padding:16px 18px;font-weight:600;font-size:15px;list-style:none;display:flex;align-items:center;justify-content:space-between}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--cyan);font-size:20px;transition:.2s}
.acc[open] summary::after{transform:rotate(45deg)}
.acc .body{padding:0 18px 18px;color:var(--muted);font-size:14.5px}

/* ============ footer ============ */
.footer{border-top:1px solid var(--border);padding:56px 0 30px;background:rgba(8,12,22,.6)}
.footer .grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
.footer h4{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:14px}
.footer a{display:block;color:var(--muted);font-size:14px;padding:4px 0;transition:.15s}
.footer a:hover{color:var(--text)}
.footer .brand{display:flex;align-items:center;gap:12px;font-size:24px;color:#fff;padding:0;white-space:nowrap}
.footer .brand .logo{width:40px;height:40px}
.footer .base{border-top:1px solid var(--border);margin-top:38px;padding-top:20px;display:flex;justify-content:space-between;gap:12px;color:var(--dim);font-size:13px;flex-wrap:wrap}

/* ============ misc components ============ */
.banner{display:flex;gap:12px;align-items:center;padding:13px 16px;border-radius:10px;font-size:14px;margin-bottom:20px}
.ann-rainbow{background:linear-gradient(90deg,#ef4444 0%,#f97316 25%,#22c55e 50%,#3b82f6 75%,#ef4444 100%);background-size:300% 100%;animation:annslide 12s linear infinite}
@keyframes annslide{to{background-position:300% 0}}
.banner-info{background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.25);color:var(--cyan)}
.banner-error{background:rgba(244,63,94,.08);border:1px solid rgba(244,63,94,.3);color:var(--red)}
.banner-success{background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.3);color:var(--green)}
.banner-warn{background:rgba(251,146,60,.08);border:1px solid rgba(251,146,60,.3);color:var(--gold)}
.empty{text-align:center;padding:60px 20px;color:var(--dim)}
.empty .eico{font-size:42px;margin-bottom:12px}
.ring{display:inline-grid;place-items:center;width:66px;height:66px;border-radius:10px;background:conic-gradient(var(--green) var(--p),rgba(148,163,184,.15) 0)}
/* Scroll-reveal only hides content when JavaScript is actually running
   (`html.js` is set by app.js). Without JS the class stays `no-js`, this rule
   never applies, and every section renders visible instead of blank. */
.js .div-fade{opacity:0;transform:translateY(22px);transition:.7s ease}
.js .div-fade.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .div-fade{opacity:1;transform:none;transition:none}
}

/* progress list */
.plist{display:flex;flex-direction:column;gap:14px}
.pitem{display:flex;align-items:center;gap:14px}
.pitem .pinfo{flex:1}
.pitem .ptitle{font-weight:600;font-size:14.5px}
.pitem .psub{font-size:12.5px;color:var(--dim)}

/* table of contents in admin */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--border);padding-bottom:0}
.tabs a{padding:10px 16px;font-weight:600;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--cyan);border-bottom-color:var(--cyan)}

/* ============ responsive ============ */
@media(max-width:1080px){
  .nav-links{display:none}
  .burger{display:block}
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .hero-art{margin-top:0}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer .grid{grid-template-columns:1fr 1fr}
  .form-section{max-width:100%}
}
@media(max-width:560px){
  .nav-in{gap:8px}
  .brand{font-size:21px}
  .brand .logo{width:40px;height:40px}
  .nav-right{gap:7px}
  .nav-auth{gap:7px}
}
@media(max-width:1580px){
  /* Signed-in nav already carries dashboard, balance, alerts and the account
     menu, so the app-sharing buttons drop to icons before they can collide. */
  .nav-right.nav-signed .btn{padding:9px 11px}
  .nav-right.nav-signed .nav-btn-txt{display:none}
  .nav-right.nav-signed .btn i{margin-right:0}
  .nav-right.nav-signed{gap:8px}
}
@media(max-width:1400px){
  /* Same for signed-out visitors, who get the two extra buttons in the same row. */
  .nav-right .nav-share{padding:9px 11px}
  .nav-right .nav-share .nav-btn-txt{display:none}
  .nav-right .nav-share i{margin-right:0}
}
@media(max-width:1320px){
  /* Not enough room left for the centre menu, so hand it to the burger.
     Measured: the signed-in centre links need ~1290px of viewport once the
     brand and the right-hand buttons are placed, so collapsing any later
     than this clips the last link ("My Campaigns") instead of hiding it. */
  .site-nav.nav-signed .nav-links{display:none}
  .site-nav.nav-signed .burger{display:block}
}
@media(max-width:480px){
  .nav-right .btn{padding:9px 11px}
}
/* Phones / small tablets: the centre links are gone (see the 1080 rule above),
   so instead of letting the signed-in actions — Dashboard, balance,
   Marketplace, the bell, the envelope and the account menu — overflow off the
   right edge, lay the header out as two rows. Row one is the brand and the
   burger; row two is the whole action set, which wraps so nothing is lost. */
@media(max-width:1080px){
  .nav-in{flex-wrap:wrap;height:auto;gap:8px}
  /* .nav-in IS .wrap here, and ".nav.site-nav .wrap{padding:0 20px 0 27px}"
     outranks the old ".nav-in{padding-top/bottom}" (0,3,0 vs 0,1,0), which
     silently zeroed the header's vertical padding on phones. Set it on the
     same selector so it actually applies. */
  .nav.site-nav .wrap{padding-top:14px;padding-bottom:16px}
  .nav-in .brand{border-right:none;margin-right:0;padding-right:0;flex:0 1 auto;min-width:0;overflow:hidden;font-size:clamp(14px,3.7vw,28px);gap:clamp(6px,1.6vw,10px)}
  /* Keep the wordmark, but let the logo shrink further on small screens. */
  .nav-in .brand .logo{width:clamp(26px,8vw,42px);height:clamp(26px,8vw,42px);flex:none}
  .burger{display:block;align-self:center;order:2}
  /* Signed-in: the bell / envelope / account menu sit on row one, tucked up
     against the burger so they stay between the site name and the burger.
     (Desktop uses them at the far right — see the base .nav-user-actions rule.) */
  .nav-user-actions{order:1;margin-left:auto;margin-right:2px}
  /* Signed-in: keep the two-row header so the drop-downs have room to open. */
  .nav-right.nav-signed{order:3;width:100%;flex-basis:100%;margin-left:0;flex-shrink:1;flex-wrap:wrap;justify-content:flex-start;gap:8px}
  /* Signed-out visitors get a single row: the logo on the left, then the
     compact action set, then the burger — all on one line. */
  .nav-in:has(.nav-right:not(.nav-signed)){flex-wrap:nowrap}
  .nav-in:has(.nav-right:not(.nav-signed))>.nav-right:not(.nav-signed){order:1;width:auto;flex:0 1 auto;min-width:0;margin-left:auto;flex-wrap:nowrap;justify-content:flex-end;gap:6px}
  .nav-in:has(.nav-right:not(.nav-signed))>.burger{order:2;margin-left:0;flex:none}
  .nav-auth{gap:6px}
  /* Signed-out visitors: share CTAs first, then Sign in / Join free (so the
     sign-up button lines up with "I want to share apps"), theme toggle last. */
  .nav-right:not(.nav-signed)>.nav-share{order:1}
  .nav-right:not(.nav-signed)>.nav-auth{order:2}
  .nav-right:not(.nav-signed)>.theme-toggle{order:3}
  /* Collapse both Sign in and Join free to icon-only buttons so the whole bar
     fits on one line. */
  .nav-auth .nav-auth-txt{display:none}
  .nav-auth .btn{padding:8px 11px;gap:0}
  .nav-auth .btn i{margin-right:0;font-size:13px}
  .nav-right.nav-signed .btn{padding:8px 12px}
  .nav-right.nav-signed .btn i{margin-right:7px}
  /* the signed-in action labels were hidden further up to stop them colliding
     in the old single row; here the action row wraps, so bring them back.
     The signed-out share CTAs ("I want to share apps" / "I have an app") stay
     icon-only, exactly like the desktop header, so Sign in / Join free sit
     neatly beside them. */
  .nav-right.nav-signed .btn .nav-btn-txt{display:inline}
  .nav-right .chip-balance b{display:inline}
}
@media(max-width:768px){
  .section{padding:52px 0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .shell{grid-template-columns:1fr}
  .sidebar{display:none}
  .chat-wrap{grid-template-columns:1fr;height:calc(100vh - 66px - 90px)}
  .chat-side{display:none}
  .hstat .v{font-size:20px}
  .hero-stats{gap:16px;margin-top:28px;justify-content:space-between}
  .hstat .l{font-size:11px}
  .content{padding:20px 16px 50px}
  .footer .grid{grid-template-columns:1fr}
  .footer{text-align:center}
  .footer .brand{justify-content:center;font-size:22px}
  .footer .brand .logo{width:36px;height:36px}
.footer .grid>div:first-child p{margin-left:auto;margin-right:auto}
.footer .grid>div:first-child>div{justify-content:center}
.footer .grid>div:first-child .ft-social,.footer .grid>div:first-child .ft-social-label{text-align:center}
.footer .grid>div:first-child .follow-row{justify-content:center}
  .footer .base{justify-content:center;text-align:center}
}
@media(max-width:420px){
  .wrap{padding:0 14px}
  .hero{padding:36px 0 28px}
.form-card{width:calc(100% - 28px) !important;max-width:calc(100% - 28px) !important;min-width:calc(100% - 28px) !important;margin:0 14px 20px;padding:22px}
}
@media(max-width:568px){
  .modal-back{padding:0}
  .modal.full{width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:100dvh;border-radius:0;border:none}
  .embed-wrap .btn-lg{width:100%;max-width:360px;white-space:normal;text-align:center;margin-inline:auto;padding-inline:16px}
  .embed-wrap .card{padding:clamp(22px,5vw,40px)}
}

/* ============ missing utilities (admin + pages) ============ */
.select{width:100%;background:rgba(14,21,43,.72);border:1px solid var(--border-strong);border-radius:10px;padding:10px 12px;color:var(--text);font-size:14px;outline:none;cursor:pointer}
.select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.24)}
.textarea{width:100%;background:rgba(14,21,43,.72);border:1px solid var(--border-strong);border-radius:10px;padding:12px 14px;color:var(--text);font-size:14.5px;outline:none;resize:vertical;min-height:120px}
.textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.24)}
.label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:7px}
.form-group{margin-bottom:18px}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.pb-0{padding-bottom:0!important}
.mt-1{margin-top:16px}
.gap-1{gap:8px}
.align-center{align-items:center}
.text-right{text-align:right}
.justify-end{justify-content:flex-end}
.inline{display:inline}
.link{color:var(--cyan)}
.link:hover{text-decoration:underline}
.code{font-family:var(--mono);font-size:12px;color:var(--cyan);background:rgba(34,211,238,.08);padding:2px 6px;border-radius:10px}
.card .err,.card.err{border-color:rgba(244,63,94,.4);background:rgba(244,63,94,.05)}
.row-muted{opacity:.5}

/* generic tag colors used across admin pages */
.tag-green{background:rgba(52,211,153,.12);color:var(--green);border:1px solid rgba(52,211,153,.3)}
.tag-red{background:rgba(244,63,94,.12);color:var(--red);border:1px solid rgba(244,63,94,.3)}
.tag-gold{background:rgba(251,146,60,.12);color:var(--gold);border:1px solid rgba(251,146,60,.3)}
.tag-blue{background:rgba(34,211,238,.12);color:var(--cyan);border:1px solid rgba(34,211,238,.3)}
.tag-muted{background:rgba(148,163,184,.12);color:var(--muted);border:1px solid rgba(148,163,184,.3)}
.tag-warn{background:rgba(251,146,60,.12);color:var(--gold);border:1px solid rgba(251,146,60,.3)}
.tag-pink{background:rgba(244,114,182,.14);color:var(--pink);border:1px solid rgba(244,114,182,.35)}
.tag-violet{background:rgba(139,92,246,.13);color:var(--violet);border:1px solid rgba(139,92,246,.3)}
.tag-brand{background:rgba(99,102,241,.13);color:#a5b4fc;border:1px solid rgba(99,102,241,.3)}
.tag-advert{background:rgba(251,146,60,.12);color:var(--gold);border:1px solid rgba(251,146,60,.3)}

/* stat label/value used on admin overview */
.stat-label{font-size:13px;color:var(--muted)}
.stat-value{font-size:25px;font-weight:800;letter-spacing:-.02em}

/* up/down pair used to reorder offerwalls in the admin table.
   Stacked so the two targets stay large enough to hit on touch screens. */
.order-move{display:flex;flex-direction:column;gap:3px;align-items:center}
.order-move form{display:flex;margin:0}
.order-move .btn{display:flex;align-items:center;justify-content:center;padding:0;width:30px;height:24px;font-size:12px}
.order-move .btn:disabled{opacity:.25;cursor:not-allowed}

/* Networks table.

   The global rules further up force .table-responsive to overflow-x:auto with a
   640px min-width, which is right for the wide admin tables but produces a
   horizontal scrollbar here. table-fit switches to a fixed layout so the columns
   are sized from the card instead of from their content, which means the table
   cannot outgrow its container; the cells that hold free text clamp to one line
   with an ellipsis and keep the full value in the title attribute. */
.table-responsive.table-fit{overflow-x:visible !important}
/* written as .table-responsive.table-fit .table rather than .table-fit .table so
   it outranks the global `.table-responsive .table{min-width:640px!important}`
   on specificity. Source order alone is not enough here: those !important rules
   are declared later in this file. */
.table-responsive.table-fit .table{table-layout:fixed;width:100%;min-width:0 !important}
.table-fit th,.table-fit td{overflow:hidden}
@media(max-width:768px){.table-responsive.table-fit .table{min-width:0 !important}}

.ellip{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* position number + arrows, sharing one column */
.order-cell{display:flex;align-items:center;gap:9px}
.order-pos{font-weight:800;font-size:14px;color:var(--muted);min-width:16px;text-align:center}
/* logo + name + slug + type tag, sharing one column */
.net-cell{display:flex;align-items:center;gap:9px;min-width:0}
.net-ico{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none;background:rgba(59,130,246,.14);overflow:hidden}
.net-txt{min-width:0;flex:1 1 auto}
/* status tag over access tag, sharing one column */
.cell-stack{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
/* row buttons wrap inside the cell rather than widening the table */
.row-actions{display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap}
.row-actions form{margin:0}

/* clickable stat tiles (admin overview).
   `.stat` is already display:flex and anchors already inherit colour with no
   underline, so only the interactive affordances are needed here.
   `.stat .stat-go` uses two classes to outrank `.stat>*{position:relative}`,
   which would otherwise force the arrow into normal flow. */
a.card.stat{display:block;cursor:pointer}
a.card.stat:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
a.card.stat .stat-go{position:absolute;top:18px;right:18px;font-size:13px;opacity:0;transform:translateX(-5px);transition:.25s}
a.card.stat:hover .stat-go,a.card.stat:focus-visible .stat-go{opacity:.85;transform:translateX(0)}
/* arrow is decoration only; drop it entirely once motion is reduced */
@media(prefers-reduced-motion:reduce){a.card.stat .stat-go{transition:none}}

/* mobile navigation drop-down */
.mobile-nav{display:none;background:linear-gradient(180deg,rgba(13,19,42,.97),rgba(9,13,28,.98));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--border);padding:10px 14px 16px}
.mobile-nav a{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:10px;font-weight:600;font-size:14.5px;color:var(--muted)}
.mobile-nav a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.mobile-nav .sep{border-top:1px solid var(--border);margin:8px 6px}
@media(max-width:1080px){
  .mobile-nav:not([hidden]){display:block}
}
@media(max-width:1599px){
  body.chat-open .mobile-nav:not([hidden]){display:block}
}

/* ============ icon sizing (Font Awesome) ============ */
.ico i{font-size:.88em;line-height:1}
.brand .logo i{font-size:22px}
.btn i{font-size:.96em}
.nav-links a i, .sidebar a i, .mobile-nav a i, .usermenu .drop a i{width:18px;text-align:center;opacity:.92}
.sidebar a i{width:24px;font-size:20px}
/* ============ support tickets ============ */
.tk-thread{display:flex;flex-direction:column;gap:10px;max-height:none}
.tk-thread .msg .bubble-text{white-space:pre-wrap;line-height:1.6;font-size:13.5px}
.tk-thread .msg .bubble{border:1px solid var(--border)}
.tk-thread .msg.admin .bubble{border-color:rgba(251,191,36,.35)}
.tk-thread .msg.mod .bubble{border-color:rgba(34,211,238,.35)}
.tk-thread .msg.staff .bubble{border-color:rgba(244,114,182,.4)}
.tk-thread .msg.mine .bubble{background:rgba(99,102,241,.10)}
.tk-row{display:flex;align-items:center;gap:12px;padding:13px 6px;border-bottom:1px solid var(--border);color:inherit;text-decoration:none;transition:.15s;border-radius:8px}
.tk-row:last-child{border-bottom:none}
.tk-row:hover{background:rgba(255,255,255,.03);transform:translateX(2px)}
.tk-subject{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-row .psub{font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-row .tag{flex:none}
textarea.textarea{font-family:inherit;line-height:1.6}

/* ---------- header notification bell + message box ---------- */
.ico-link{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;border:1px solid transparent;background:rgba(255,255,255,.04);color:inherit;text-decoration:none;font-size:15px;transition:.15s}
.ico-link:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.ico-badge{position:absolute;top:-5px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;line-height:19px;text-align:center;box-shadow:0 4px 12px rgba(244,63,94,.55);font-family:inherit;pointer-events:none}
.ico-badge.pulse{animation:icoPulse 1.6s ease-in-out infinite}
@keyframes icoPulse{0%,100%{box-shadow:0 4px 12px rgba(244,63,94,.55),0 0 0 0 rgba(244,63,94,.45)}50%{box-shadow:0 4px 12px rgba(244,63,94,.55),0 0 0 6px rgba(244,63,94,0)}}

/* ---------- unread badge glow ----------
   Stays on for as long as the count is above zero, so it only stops once the
   member has actually opened everything.

   Turned back up from the halved pass, sitting between that and the 5x pass
   so the depth reads clearly without returning to the near-opaque version:
     - spread:  ring travel 16px -> 24px, halo peak 22px -> 34px
     - layers:  two -> three stacked shadows, light bleeds further
     - opacity: peak .8 -> .92, troughs lifted so the swell stays visible
     - breath:  +30% overshoot up to +45%
   Radius alone reads as blurry rather than intense, so spread and opacity
   move together; the icon glyph is kept legible by holding the peak below
   full opacity. */
.ico-link.unread{
  background:rgba(244,63,94,.15);
  border-color:rgba(244,63,94,.5);
  box-shadow:0 0 14px rgba(244,63,94,.38),0 0 32px rgba(244,63,94,.24),inset 0 0 11px rgba(244,63,94,.2)
}
.ico-link.unread>i{animation:icoGlow 1.6s ease-in-out infinite}
/* the unread badge gets its own ring, so a waiting badge is unmistakable
   from a fresh one */
.ico-link.unread .ico-badge{animation:icoPulseDeep 1.6s ease-in-out infinite,icoBreath 1.6s ease-in-out infinite}
@keyframes icoPulseDeep{
  0%,100%{box-shadow:0 4px 12px rgba(244,63,94,.65),0 0 9px rgba(244,63,94,.5),0 0 0 0 rgba(244,63,94,.62)}
  50%{box-shadow:0 4px 12px rgba(244,63,94,.65),0 0 34px rgba(244,63,94,.8),0 0 0 24px rgba(244,63,94,0)}
}
@keyframes icoGlow{
  0%,100%{filter:drop-shadow(0 0 4px rgba(244,63,94,.5)) drop-shadow(0 0 10px rgba(244,63,94,.3))}
  50%{filter:drop-shadow(0 0 13px rgba(244,63,94,.92)) drop-shadow(0 0 24px rgba(244,63,94,.66)) drop-shadow(0 0 34px rgba(244,63,94,.36))}
}
@keyframes icoBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.45)}}
/* a still halo carries the same meaning when animation is switched off */
@media(prefers-reduced-motion:reduce){
.ico-link.unread>i{animation:none;filter:drop-shadow(0 0 11px rgba(244,63,94,.85)) drop-shadow(0 0 20px rgba(244,63,94,.55))}
.ico-link.unread .ico-badge{animation:none;box-shadow:0 4px 12px rgba(244,63,94,.55),0 0 0 4px rgba(244,63,94,.4),0 0 16px rgba(244,63,94,.6)}
}
@media(max-width:640px){.ico-link{width:34px;height:34px;font-size:14px}}

/* inbox dropdown hanging off the bell / envelope */
.inbox{position:relative}
.inbox-drop{position:absolute;right:0;top:calc(100% + 10px);width:352px;max-width:calc(100vw - 24px);background:rgba(15,21,44,.94);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border:1px solid var(--border-strong);border-radius:14px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:.18s;z-index:130;overflow:hidden}
.inbox.open .inbox-drop{opacity:1;visibility:visible;transform:none}
.inbox-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);font-size:14px}
.inbox-list{max-height:min(60vh,420px);overflow-y:auto;scrollbar-width:thin}
.inbox-row{display:flex;align-items:flex-start;gap:11px;padding:11px 14px;border-bottom:1px solid var(--border);color:inherit;text-decoration:none;transition:.14s}
.inbox-row:last-child{border-bottom:none}
.inbox-row:hover{background:rgba(255,255,255,.05)}
.inbox-row.unread{background:rgba(59,130,246,.07)}
.inbox-row.unread:hover{background:rgba(59,130,246,.13)}
.inbox-ico{flex:none;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(148,163,184,.12);color:var(--dim);font-size:13px}
.inbox-row.unread .inbox-ico{background:rgba(34,197,94,.16);color:var(--green)}
.inbox-txt{flex:1;min-width:0;display:block}
.inbox-t{display:block;font-size:13.5px;font-weight:700;color:var(--text);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-p{display:block;font-size:12.5px;color:var(--muted);line-height:1.35;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-m{display:block;font-size:11.5px;color:var(--dim);margin-top:3px}
.inbox-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--blue,#3b82f6);margin-top:6px;box-shadow:0 0 0 3px rgba(59,130,246,.18)}
.inbox-empty{padding:26px 16px;text-align:center;color:var(--dim);font-size:13px}
.inbox-empty i{display:block;font-size:22px;margin-bottom:9px;opacity:.65}
.inbox-all{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-top:1px solid var(--border);font-size:13px;font-weight:700;color:var(--cyan);text-decoration:none;background:rgba(255,255,255,.03)}
.inbox-all:hover{background:rgba(34,211,238,.10)}
.notif-open{background:rgba(34,211,238,.07);outline:1px solid rgba(34,211,238,.25)}
@media(max-width:1080px){.inbox-drop{position:fixed;right:10px;left:10px;width:auto;top:120px;max-height:70vh;overflow-y:auto;transform-origin:top center}}
.msg-row{display:flex;gap:14px;padding:16px 6px;border-bottom:1px solid var(--border);color:inherit;text-decoration:none;transition:.15s}
.msg-row:last-child{border-bottom:none}
.msg-row:hover{background:rgba(255,255,255,.03)}
.msg-row.unread{background:rgba(99,102,241,.07)}
.msg-row .msubject{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.msg-row.unread .msubject{color:#fff}
.msg-row .mpreview{font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.msg-full{white-space:pre-wrap;line-height:1.7;font-size:14px;color:#dfe6f5}

/* table responsive */
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-responsive .table{min-width:720px;}
@media(max-width:720px){.table-responsive .table{min-width:600px;}}

/* admin table fixes */
.content{max-width:100%;width:100%;overflow-x:hidden;}
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.table-responsive .table{min-width:auto;}
@media(max-width:768px){.content{padding:16px 12px;}}
@media(max-width:1080px){.content{padding:20px 16px;}}

.grid.grid-2.gap-1{grid-template-columns:1fr 1fr;}
@media(max-width:1024px){.grid.grid-2.gap-1{grid-template-columns:1fr;}}

.card{max-width:100%;overflow:hidden;}
.card .table-responsive{border-radius:10px;}
.toolbar{flex-wrap:wrap;gap:12px;}


/* ensure admin content doesn't overflow */
.shell main.content{min-width:0;overflow-x:hidden;}
.card{max-width:100%;overflow-x:auto;}


/* fix for admin main content overflow */
main.content, .content{max-width:100%;overflow-x:visible;width:100%;box-sizing:border-box;justify-self:stretch;min-width:0}
.card{overflow-x:visible;}
.table-responsive{max-width:100%;}


@media(max-width:1200px){.grid.grid-2{grid-template-columns:1fr;}}

/* extra responsive for admin grids */
@media(max-width:1300px){.grid.grid-2.gap-1{grid-template-columns:1fr;}}
@media(max-width:600px){.toolbar{flex-direction:column;align-items:flex-start;}}


@media(max-width:1200px){.grid.grid-2{grid-template-columns:1fr !important;}}


/* Strong admin overflow fixes */
main.content, .shell main.content, .site-main{max-width:100% !important;width:100% !important;min-width:0 !important;overflow-x:hidden !important;box-sizing:border-box;}
.card:not(.form-card){max-width:100% !important;width:100% !important;overflow-x:hidden !important;box-sizing:border-box;}
.card .card:not(.form-card){max-width:100% !important;width:100% !important;}
.grid{min-width:0 !important;}
.grid > *{min-width:0 !important;}
.table-responsive{display:block !important;width:100% !important;max-width:100% !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch !important;}
.table-responsive .table{min-width:640px !important;}
@media(max-width:1400px){.grid.grid-2.gap-1{grid-template-columns:1fr !important;}}
@media(max-width:768px){.content, main.content{padding:16px 10px !important;}.card{padding:16px !important;}.table-responsive .table{min-width:580px !important;}}

/* ---------- public member profile ---------- */
.profile-wrap{max-width:1000px;margin:0 auto}
.profile-hero{padding:22px}
.profile-hero h1{letter-spacing:-.02em}
.profile-field{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--border)}
.profile-field:last-child{border-bottom:none}
.pf-label{flex:1;min-width:0;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px}
.pf-label i{width:16px;text-align:center;color:var(--dim);font-size:12.5px}
.pf-value{flex:none;text-align:right;font-size:14px;color:var(--text);max-width:62%;overflow:hidden;text-overflow:ellipsis}
.pf-value b{color:#fff}
.pf-value .tag{margin:1px 0}
.pf-toggle{flex:none}
.pf-toggle .btn{padding:4px 7px;line-height:1}
.profile-field.is-hidden{opacity:.6}
.profile-field.is-hidden .pf-value{color:var(--dim)}
.profile-field.is-hidden .pf-value::after{content:"hidden";margin-left:8px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--gold);background:rgba(251,191,36,.14);border:1px solid rgba(251,191,36,.3);border-radius:20px;padding:1px 7px}
@media(max-width:640px){.pf-value{max-width:55%}}

/* privacy switches (Profile Settings) */
.privacy-head{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:16px 0 8px;display:flex;align-items:center;gap:8px}
.privacy-head:first-child{margin-top:0}
.privacy-toggle{position:relative;display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px;cursor:pointer;transition:.14s;user-select:none}
.privacy-toggle:hover{background:rgba(255,255,255,.04)}
.privacy-toggle input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pt-track{position:relative;flex:none;width:40px;height:22px;border-radius:20px;background:rgba(148,163,184,.28);border:1px solid var(--border-strong);transition:.18s}
.pt-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.privacy-toggle input:checked + .pt-track{background:var(--cyan);border-color:transparent}
.privacy-toggle input:checked + .pt-track .pt-knob{transform:translateX(18px)}
.privacy-toggle input:focus-visible + .pt-track{outline:2px solid var(--cyan);outline-offset:2px}
.pt-label{font-size:13.5px;color:var(--text);display:flex;align-items:center;gap:8px}
.pt-state{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--gold);background:rgba(251,191,36,.14);border:1px solid rgba(251,191,36,.3);border-radius:20px;padding:1px 7px}

/* payment methods (admin + front end) */
.pm-badge{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:rgba(56,189,248,.10);border:1px solid var(--border-strong);color:var(--cyan)}
.pm-badge img{display:block}
.pm-ico{display:inline-block;vertical-align:middle;border-radius:50%}
.pill .pm-ico,.method-pill .pm-ico{margin-right:6px}
.pill i.fa-coins,.pill i.fa-credit-card,.pill i.fa-wallet{margin-right:6px;color:var(--cyan)}

/* =============================================================
   LIGHT THEME  (html[data-theme="light"])
   Dark is the default. The layout header sets data-theme on <html>
   before this stylesheet loads (nothing set = dark). The user toggle
   is #themeToggle in the nav. Keep new DARK-THEME rules ABOVE this
   block so light overrides always win.
   ============================================================= */
:root[data-theme="light"]{
  --bg:#f3f6fb;--bg-2:#e8eef7;--card:#ffffff;--card-2:#f5f8fd;
  --border:rgba(21,48,106,.13);--border-strong:rgba(21,48,106,.28);
  --text:#16223d;--muted:#5a6b8c;--dim:#93a0ba;
  --primary:#2563eb;--green:#15803d;--cyan:#0e7490;--teal:#0f766e;
  --gold:#ea580c;--red:#e11d48;--violet:#6d28d9;--pink:#db2777;
  --shadow:0 14px 40px rgba(30,50,100,.14);
  --glow:0 0 0 1px rgba(37,99,235,.20),0 18px 60px rgba(37,99,235,.10);
}
html[data-theme="light"] body{
  background-color:var(--bg);
  background-image:linear-gradient(150deg,rgba(244,248,255,.6) 0%,rgba(240,246,255,.55) 42%,rgba(255,244,250,.55) 100%),url('../img/bg-gaming-light.svg');
  color:var(--text);
}
html[data-theme="light"] body::before{opacity:.55;
  background:
    radial-gradient(900px 480px at 88% -8%,rgba(59,130,246,.12),transparent 60%),
    radial-gradient(700px 420px at 0% 30%,rgba(37,99,235,.06),transparent 55%),
    radial-gradient(800px 460px at 62% 118%,rgba(190,24,93,.06),transparent 60%);}
html[data-theme="light"] ::selection{background:rgba(37,99,235,.22)}
html[data-theme="light"] ::-webkit-scrollbar-track{background:#e8eef7}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#93c5fd,#60a5fa);border-color:#e8eef7}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#60a5fa,#3b82f6)}

/* ---- theme toggle button ---- */
.theme-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.05);color:#fff;font-size:14px;cursor:pointer;transition:.15s;flex:none}
.theme-toggle:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.theme-toggle .ti-on,.theme-toggle .ti-off{display:inline-flex}
html[data-theme="light"] .site-nav .theme-toggle{background:rgba(21,48,106,.06);color:var(--text);border-color:transparent}
html[data-theme="light"] .site-nav .theme-toggle:hover{background:rgba(21,48,106,.14)}

/* ---- nav bar ---- */
html[data-theme="light"] .nav .brand{color:var(--text)}
html[data-theme="light"] .nav.admin-nav .brand{color:#fff}
html[data-theme="light"] .nav.admin-nav .admin-back,html[data-theme="light"] .nav.admin-nav .admin-back i{color:#fff}
html[data-theme="light"] .nav.scrolled{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--border)}
html[data-theme="light"] .nav.admin-nav,html[data-theme="light"] .nav.admin-nav.scrolled{background:linear-gradient(180deg,#3b82f6 0%,#2563eb 55%,#1e3a8a 100%);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:none;box-shadow:0 10px 30px rgba(37,99,235,.35)}
html[data-theme="light"] .nav-links a{color:rgba(22,34,61,.78)}
html[data-theme="light"] .nav-links a:hover{color:var(--text);background:rgba(21,48,106,.06)}
html[data-theme="light"] .nav-links a:hover i{color:var(--primary)}
html[data-theme="light"] .nav-links a.active{color:var(--primary);background:rgba(37,99,235,.10)}
html[data-theme="light"] .nav-links a.active::after{background:var(--grad)}
html[data-theme="light"] .nav .chip{color:var(--text);background:rgba(255,255,255,.6);border-color:rgba(21,48,106,.18)}
html[data-theme="light"] .nav .chip .muted{color:var(--muted)}
html[data-theme="light"] .nav .chip-balance{color:var(--text)}
html[data-theme="light"] .nav .chip-balance b{color:var(--text)!important}
html[data-theme="light"] .nav-right .btn-ghost{background:rgba(21,48,106,.06);color:var(--text)}
html[data-theme="light"] .nav-right .btn-ghost:hover{background:rgba(21,48,106,.12)}
html[data-theme="light"] .burger{background:rgba(21,48,106,.06);border-color:var(--border);color:var(--text)}
html[data-theme="light"] .burger:hover{background:rgba(21,48,106,.12)}
html[data-theme="light"] .ico-link{background:rgba(21,48,106,.05);color:var(--text)}
html[data-theme="light"] .ico-link:hover{background:rgba(21,48,106,.12)}

/* ---- mobile nav / dropdowns ---- */
html[data-theme="light"] .mobile-nav{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
html[data-theme="light"] .mobile-nav a{color:var(--text)}
html[data-theme="light"] .mobile-nav a:hover{background:rgba(21,48,106,.06)}
html[data-theme="light"] .mobile-nav .brand{color:var(--text)}
html[data-theme="light"] .usermenu .drop{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
html[data-theme="light"] .usermenu .drop a:hover{background:rgba(21,48,106,.06)}
html[data-theme="light"] .inbox-drop{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
html[data-theme="light"] .inbox-row:hover{background:rgba(21,48,106,.04)}
html[data-theme="light"] .inbox-all{background:rgba(21,48,106,.03)}
html[data-theme="light"] .inbox-all:hover{background:rgba(34,211,238,.1)}
html[data-theme="light"] .msg-row.unread .msubject{color:var(--text)}
html[data-theme="light"] .msg-row:hover{background:rgba(21,48,106,.03)}
html[data-theme="light"] .msg-row.unread{background:rgba(99,102,241,.08)}
html[data-theme="light"] .msg-full{color:#3a4663}
html[data-theme="light"] .msg-full .msubject{color:var(--text)}

/* ---- hero (left column, sits on the page background) ---- */
html[data-theme="light"] .hero h1{color:#16223d!important;text-shadow:0 2px 24px rgba(255,255,255,.55)}
html[data-theme="light"] .hero p.lead{color:var(--muted)}
html[data-theme="light"] .grad-text{background:linear-gradient(120deg,#16223d 20%,var(--cyan) 62%,var(--primary));-webkit-background-clip:text;background-clip:text}
html[data-theme="light"] .box .grad-text{background:linear-gradient(110deg,#ffffff 15%,#dbeafe 45%,#ede9fe 75%);-webkit-background-clip:text;background-clip:text}
html[data-theme="light"] .hstat{border-color:var(--border)}
html[data-theme="light"] .hstat .v b{color:var(--text)}
html[data-theme="light"] .hstat .l{color:var(--muted)}
html[data-theme="light"] .hero-login .or{color:var(--muted)}
html[data-theme="light"] .hero-login .or::before,html[data-theme="light"] .hero-login .or::after{background:rgba(21,48,106,.18)}

/* ---- cards ---- */
html[data-theme="light"] .card:not(.box){background:linear-gradient(180deg,#ffffff,#f7faff);box-shadow:0 10px 28px rgba(30,50,100,.10)}
html[data-theme="light"] .card::after{opacity:.12}
html[data-theme="light"] .card-hover:hover{box-shadow:0 16px 40px rgba(30,50,100,.16)}
/* keep the colourful in-grid cards dark (they carry white text by design) */
html[data-theme="light"] :where(.grid-3,.grid-4):has(> .card) > .card:nth-child(5n+1){background:linear-gradient(145deg,#e0516e 0%,#b91c48 50%,#6e1033 100%)}
html[data-theme="light"] :where(.grid-3,.grid-4):has(> .card) > .card:nth-child(5n+2){background:linear-gradient(145deg,#3aa76d 0%,#168560 45%,#0c523d 100%)}
html[data-theme="light"] :where(.grid-3,.grid-4):has(> .card) > .card:nth-child(5n+3){background:linear-gradient(145deg,#f6b665 0%,#ef7d3a 55%,#a83c24 100%)}
html[data-theme="light"] :where(.grid-3,.grid-4):has(> .card) > .card:nth-child(5n+4){background:linear-gradient(145deg,#5dd0fe 0%,#3b82f6 55%,#2634a8 100%)}
html[data-theme="light"] :where(.grid-3,.grid-4):has(> .card) > .card:nth-child(5n){background:linear-gradient(145deg,#93c5fd 0%,#3b82f6 55%,#1e3a8a 100%)}
/* the right-hand hero panel stays dark in light mode */
html[data-theme="light"] .hero-card{background:linear-gradient(180deg,#1d4ed8 0%,#172554 100%)}

/* ---- inputs ---- */
html[data-theme="light"] .input,html[data-theme="light"] .select,html[data-theme="light"] .textarea{background:#fff;border-color:var(--border-strong);color:var(--text)}
html[data-theme="light"] .input::placeholder,html[data-theme="light"] .textarea::placeholder{color:var(--dim)}
html[data-theme="light"] .input:focus,html[data-theme="light"] .select:focus,html[data-theme="light"] .textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.16)}
html[data-theme="light"] .select option{background:#fff;color:var(--text)}
html[data-theme="light"] .search{background:rgba(21,48,106,.04);color:var(--text)}

/* ---- pills / tags ---- */
html[data-theme="light"] .pill{background:rgba(255,255,255,.75);border-color:var(--border-strong);color:var(--muted)}
html[data-theme="light"] .pill:hover{color:var(--text);border-color:var(--border-strong)}
html[data-theme="light"] .tag{background:rgba(21,48,106,.05)}
html[data-theme="light"] .tag-brand{color:#4f46e5}

/* ---- tables ---- */
html[data-theme="light"] .table th{color:var(--muted)}
html[data-theme="light"] .table tr:hover td{background:rgba(21,48,106,.03)}
html[data-theme="light"] .mono{color:var(--text)}

/* ---- accordion ---- */
html[data-theme="light"] .acc{background:rgba(255,255,255,.85);border-color:var(--border);box-shadow:0 4px 14px rgba(30,50,100,.06)}

/* ---- sidebar ---- */
html[data-theme="light"] .sidebar{background:rgba(255,255,255,.6);border-color:var(--border);box-shadow:none}
html[data-theme="light"] .sidebar a{color:var(--muted)}
html[data-theme="light"] .sidebar a:hover{color:var(--text);background:rgba(37,99,235,.08)}
html[data-theme="light"] .sidebar a.active{color:var(--primary);background:rgba(37,99,235,.14);box-shadow:none}
html[data-theme="light"] .sidebar .sec{color:var(--dim)}

/* ---- chat ---- */
html[data-theme="light"] .chat-wrap,html[data-theme="light"] .chat-side{background:rgba(240,244,255,.85)}
html[data-theme="light"] .chat-drawer{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(240,246,255,.94));border-left-color:rgba(21,48,106,.15)}
html[data-theme="light"] .chat-drawer-head{background:linear-gradient(150deg,#eef2fb,#f4f6fb);border-bottom-color:var(--border)}
html[data-theme="light"] .chat-drawer-rules{background:rgba(21,48,106,.04)}
html[data-theme="light"] .chat-drawer-rules .rules-toggle{background:rgba(21,48,106,.08);color:var(--muted)}
html[data-theme="light"] .rules-reopen{background:rgba(21,48,106,.06);color:var(--muted)}
html[data-theme="light"] .rules-reopen:hover{color:var(--green);background:rgba(34,197,94,.1)}
html[data-theme="light"] .chat-drawer-input{background:rgba(255,255,255,.95);border-top-color:rgba(21,48,106,.12)}
html[data-theme="light"] .msg .bubble{background:#ffffff;border:1px solid var(--border);box-shadow:0 6px 18px rgba(30,50,100,.06)}
html[data-theme="light"] .msg.mine .bubble{background:#eaf1ff;border-color:rgba(37,99,235,.22)}
html[data-theme="light"] .msg.admin .bubble{background:#fdf4ff;border-color:rgba(217,70,239,.25)}
html[data-theme="light"] .msg.mod .bubble{background:#eef7ff;border-color:rgba(34,211,238,.3)}
html[data-theme="light"] .msg.staff .bubble{background:#fdf2f8;border-color:rgba(244,114,182,.35)}
html[data-theme="light"] .msg .meta a{color:var(--muted)}
html[data-theme="light"] .msg .meta a:hover{color:var(--green)}
html[data-theme="light"] .msg .meta .mention-btn{background:rgba(99,102,241,.14);color:#4f46e5}
html[data-theme="light"] .msg .bubble .mention{color:#9a3412;background:rgba(249,115,22,.12)}
html[data-theme="light"] .msg .bubble .mention-me{color:#92400e;background:rgba(251,191,36,.2)}
html[data-theme="light"] .msg-actions .icon-btn{background:rgba(21,48,106,.06);color:var(--muted)}
html[data-theme="light"] .msg-actions .icon-btn:hover{background:rgba(225,29,72,.12);color:var(--red)}
html[data-theme="light"] .msg-actions .icon-btn.mod:hover{background:rgba(37,99,235,.14);color:#2563eb}
html[data-theme="light"] .chat-input{background:rgba(255,255,255,.92);border-color:var(--border)}
html[data-theme="light"] .chat-online .o:hover{background:rgba(21,48,106,.04)}
html[data-theme="light"] .chat-act-earn{background:rgba(37,99,235,.06);border-color:rgba(37,99,235,.16)}
html[data-theme="light"] .chat-act-earn:hover{background:rgba(37,99,235,.1);border-color:rgba(37,99,235,.26)}
html[data-theme="light"] .chat-act-who{color:var(--text)}
html[data-theme="light"] .chat-act-earn-bot{color:var(--muted)}
html[data-theme="light"] .chat-act-kind{background:rgba(109,40,217,.12);color:var(--violet)}
html[data-theme="light"] .chat-act-kind.advertiser{background:rgba(21,128,61,.12);color:var(--green)}
html[data-theme="light"] .chat-act-join{background:rgba(255,255,255,.5);border-color:rgba(21,128,61,.2);color:var(--muted)}
html[data-theme="light"] .chat-act-join b{color:var(--green)}

/* ---- toasts / modal ---- */
html[data-theme="light"] .toast,html[data-theme="light"] .livetoast{background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(244,248,255,.97));color:var(--text);box-shadow:var(--shadow)}
html[data-theme="light"] .toast b,html[data-theme="light"] .livetoast b{color:var(--green)}
html[data-theme="light"] .modal-back{background:rgba(30,50,100,.45)}
html[data-theme="light"] .modal .full iframe{background:#fff}

/* ---- footer ---- */
html[data-theme="light"] .footer{background:rgba(21,48,106,.04)}
html[data-theme="light"] .footer .brand{color:var(--text)}
html[data-theme="light"] .footer a{color:var(--muted)}
html[data-theme="light"] .footer a:hover{color:var(--green)}
html[data-theme="light"] .footer .base{color:var(--dim)}
html[data-theme="light"] .follow-icon.follow-icon-sm{background:rgba(21,48,106,.05);border-color:rgba(21,48,106,.16);color:#fff}
html[data-theme="light"] .follow-icon.follow-icon-sm i{color:var(--follow,#4f46e5)}
html[data-theme="light"] .follow-icon.follow-icon-sm:hover{color:#fff}
html[data-theme="light"] .follow-icon.follow-icon-sm:hover i{color:#fff}

/* ---- misc fills that were hard-coded for the dark theme ---- */
html[data-theme="light"] .pf-value b{color:var(--text)}
html[data-theme="light"] .privacy-toggle:hover{background:rgba(21,48,106,.05)}
html[data-theme="light"] .method-pill15{background:#fff;border-color:var(--border-strong)}

/* ---- admin presence: online dots + the Online tab colouring ---- */
.presence-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#8b95a7;vertical-align:middle;flex:0 0 auto}
.presence-dot.online{background:var(--green);box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 1.6s infinite}
.presence-dot.away{background:#8b95a7}
.presence-dot.off{display:none}
.presence-state{font-weight:700}
.presence-state.online,tr.is-online .presence-state{color:var(--green)}
.presence-state.away,tr.is-away .presence-state{color:var(--muted)}
a.presence-name.online{color:var(--green) !important;font-weight:700}
a.presence-name.away{color:var(--muted) !important}

/* ---- social: follow icons, share grid, OAuth buttons ---- */
.social-badge{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--grad-blue);color:#fff;font-size:15px;flex:0 0 auto}
.ft-social{margin-top:24px}
.ft-social-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--dim);margin-bottom:12px}
.follow-row{display:flex;flex-wrap:wrap;gap:10px}
.follow-icon{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);font-weight:600;font-size:13px;transition:.15s}
.follow-icon i{color:var(--follow,var(--cyan));font-size:15px}
.follow-icon:hover{transform:translateY(-2px);border-color:var(--follow,var(--cyan));box-shadow:0 8px 20px rgba(0,0,0,.25)}
.follow-icon.follow-icon-sm{display:grid;place-items:center;padding:0;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.05);border-color:rgba(148,163,255,.16);color:var(--muted);line-height:1}
.follow-icon.follow-icon-sm i{font-size:17px;color:var(--follow,#aab9ff);width:auto}
.follow-icon.follow-icon-sm:hover{transform:translateY(-3px);border-color:transparent;color:#fff;background:var(--follow,var(--primary));box-shadow:0 10px 22px -10px var(--follow,var(--primary)),inset 0 1px 0 rgba(255,255,255,.25)}
.follow-icon.follow-icon-sm:hover i{color:#fff}
.share-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.share-btn{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:13px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);font-weight:700;font-size:14px;cursor:pointer;text-align:left;font-family:inherit;transition:.15s}
.share-btn i{font-size:19px;color:var(--share,var(--cyan));width:24px;text-align:center}
.share-btn:hover{transform:translateY(-2px);border-color:var(--share,var(--cyan));box-shadow:0 10px 24px rgba(0,0,0,.28);background:var(--panel)}
.social-auth{display:grid;grid-template-columns:1fr;gap:10px;margin-top:4px}
.btn-social{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--panel-2);border:1px solid var(--border);color:var(--text);font-weight:600}
.btn-social:hover{border-color:var(--cyan);color:var(--text);transform:translateY(-1px)}
.btn-social i{font-size:16px}
@media(min-width:520px){.social-auth{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}

/* ================== MOBILE RESPONSIVENESS HARDENING ================== */

/* .table-wrap used across dashboard/transactions/withdraw/deposit had no definition,
   so wide tables overflowed their cards. Give it the same scroll logic as
   .table-responsive while letting simple tables fill the container. */
.table-wrap{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Collapse any *inline* fr-based grid on tablets/phones so side-by-side areas
   (e.g. dashboard aside columns, app page split) stack instead of squashing.
   auto-fill / auto-fit grids already adapt and are explicitly left alone.
   Two-column link rows are given a softer 2-col wrap further down. */
@media(max-width:900px){
  [style*="grid-template-columns"]:not([style*="auto-fill"]):not([style*="auto-fit"]){grid-template-columns:1fr !important}
}
@media(max-width:720px){
  [style*="grid-template-columns:170px"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  [style*="grid-template-columns:1fr 1fr 110px 110px"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

/* Stat rows: stay on two columns down to small phones, single column only when
   truly narrow. (Overrides the generic .grid-4 1-column rule at 768px.) */
@media(max-width:768px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media(max-width:460px){.grid-4{grid-template-columns:1fr !important}}

/* Compact, fully-visible tables inside cards on small screens */
@media(max-width:640px){
  .table-wrap .table{font-size:13px}
  .table-wrap .table th,.table-wrap .table td{padding:9px 9px}
  .search input{min-width:0}
}
/* Dashboard "Recent transactions": drop the Date column on phones so the
   remaining rows fit the screen with no horizontal scroll. */
@media(max-width:560px){
  .txn-table th:nth-child(3),.txn-table td:nth-child(3){display:none}
}

/* Allow the chat drawer and popups to never exceed the viewport */
@media(max-width:600px){
  .chat-drawer{max-width:100%}
}

/* Admin panel: sidebar is hidden on small screens, so surface a jump-to select
   at the top of the content so every page stays reachable on mobile. */
.admin-mobile-nav{display:none}
@media(max-width:768px){
  .admin-mobile-nav{display:block;width:100%;margin:0 0 18px;font-size:13.5px;font-weight:600;color:var(--text);background:var(--card);border:1px solid var(--brd);border-radius:10px;padding:9px 10px}
}

/* ---------- v21: global notification (broadcast) bar ---------- */
.gnt-bar{display:flex;align-items:center;gap:10px;justify-content:center;text-align:left;padding:11px 48px 11px 16px;font-size:14px;font-weight:600;line-height:1.45;position:relative;box-shadow:0 6px 22px rgba(0,0,0,.22);z-index:5}
.gnt-bar .gnt-icon{flex-shrink:0;font-size:16px}
.gnt-bar .gnt-msg{padding:0}
.gnt-bar .gnt-close{position:absolute;top:50%;right:10px;transform:translateY(-50%);background:rgba(255,255,255,.18);border:0;color:inherit;width:30px;height:30px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s}
.gnt-bar .gnt-close:hover{background:rgba(255,255,255,.34)}
.gnt-bar.gnt-hide{opacity:0;transform:translateY(-10px)}
.gnt-hide{transition:opacity .4s ease,transform .4s ease}
@media(max-width:560px){.gnt-bar{font-size:13px;padding:10px 42px 10px 12px}}

/* ---------- v21: cookie consent bar ---------- */
/* Blue gradient background — dark at the bottom, matching the other blue
   panels on the site. To reverse, restore the previous value:
   background:var(--card); color:var(--text); border-top:1px solid var(--brd) */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:1260;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:center;background:linear-gradient(180deg,#3b82f6 0%,#2563eb 52%,#1e3a8a 100%);color:#fff;border-top:1px solid #3b82f6;box-shadow:0 -10px 34px rgba(0,0,0,.28);padding:13px 16px;font-size:13.5px;line-height:1.5}
.cookie-bar-in{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;max-width:860px}
.cookie-more{font-weight:700;color:#bfdbfe;text-decoration:underline;white-space:nowrap}
.cookie-actions{display:flex;gap:8px;flex-shrink:0}
.cookie-set .cookie-bar{display:none !important}
@media(max-width:520px){.cookie-bar{font-size:12.5px;padding:11px 12px}.cookie-actions{width:100%}.cookie-actions .btn{flex:1}}

/* ---------- v21: admin overview country maps ---------- */
.geo-map-wrap{height:290px;margin:14px 0 4px;border-radius:14px;background:radial-gradient(120% 120% at 20% 0%,rgba(59,130,246,.12) 0%,transparent 55%),var(--card);overflow:hidden}
.geo-map-wrap .jvm-container{width:100%;height:100%}
.geo-map-wrap .jvm-container svg{width:100%;height:100%}
.geo-map-wrap .jvm-zoom-btn{background:var(--card);color:var(--text);border:1px solid var(--brd);border-radius:8px;width:26px;height:26px;line-height:24px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.geo-map-wrap .jvm-zoom-btn:hover{background:var(--bg)}
.jvm-tooltip{background:#0b1020;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:8px 12px;font-family:inherit;font-size:13px;font-weight:600;box-shadow:0 8px 26px rgba(0,0,0,.4)}
.geo-list{list-style:none;margin:12px 0 0;padding:0}
.geo-list li{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--brd)}
.geo-list li:first-child{border-top:0;padding-top:0}
.geo-rank{width:26px;height:26px;border-radius:8px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff}
.geo-flag{font-size:18px;width:28px;text-align:center;flex-shrink:0}
.geo-name{flex:1;min-width:0;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.geo-label{flex:1;min-width:0}
.geo-label .t{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.geo-label .m{display:block;font-size:11.5px;font-weight:500;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.geo-val{font-weight:800;font-size:13px;color:var(--green)}
.geo-val small{font-weight:500;opacity:.6;color:var(--text)}
.geo-empty{padding:26px 0;text-align:center;color:var(--muted);font-size:13.5px}
.geo-legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--brd);font-size:11.5px;color:var(--muted)}
.geo-legend .sw{width:14px;height:14px;border-radius:4px;flex-shrink:0}

/* ============ App Directory (v28) ============ */
.applist{list-style:none;margin:0;padding:0}
.applist-row{display:flex;gap:14px;align-items:flex-start;padding:16px;border-bottom:1px solid var(--brd)}
.applist-row:last-child{border-bottom:0}
.applist-row:hover{background:rgba(255,255,255,.025)}
.applist-thumb{width:64px;height:64px;flex-shrink:0;border-radius:14px;background:var(--grad-blue) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;text-decoration:none}
.applist-main{flex:1;min-width:0}
.applist-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:800;font-size:16px}
.applist-title a{color:var(--text);text-decoration:none}
.applist-title a:hover{color:var(--primary)}
.applist-tag{margin:4px 0 0;font-size:13.5px;font-weight:600}
.applist-desc{margin:4px 0 6px}
.applist-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;font-size:12.5px}
.applist-meta i{opacity:.7;margin-right:3px}
.applist-cta{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex-shrink:0}
.applist-thumb i{font-size:26px;opacity:.9}
@media (max-width:620px){
  .applist-row{flex-wrap:wrap}
  .applist-cta{width:100%;flex-direction:row;justify-content:flex-end}
  .applist-thumb{width:52px;height:52px}
}

/* Phones: shrink the header controls — theme toggle, the collapsed Sign in /
   Join free icons and the menu button — so they stay compact on one line. */
@media(max-width:768px){
  .nav .theme-toggle{width:34px;height:34px;border-radius:10px;font-size:13px}
  .nav-auth .btn{padding:7px 10px}
  .nav-auth .btn i{font-size:12px}
  .burger{padding:7px 9px;font-size:18px;border-radius:9px}
}
@media(max-width:420px){
  .nav .theme-toggle{width:30px;height:30px;border-radius:9px;font-size:12px}
  .nav-auth .btn{padding:6px 9px}
  .nav-auth .btn i{font-size:11px}
  .burger{padding:6px 8px;font-size:16px;border-radius:8px}
}

/* ============ Blog (v29) ============ */
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start;margin-top:18px}
.blog-main{min-width:0}
.blog-side{display:flex;flex-direction:column;gap:16px}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.blog-card{overflow:hidden;display:flex;flex-direction:column;padding:0}
.blog-card-media{display:flex;align-items:center;justify-content:center;height:170px;background-color:var(--bg-2);background-size:cover;background-position:center;color:var(--muted);font-size:30px;text-decoration:none}
.blog-card-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.blog-card-body h3{margin:0;font-size:17px;line-height:1.3}
.blog-card-body h3 a{color:var(--text)}
.blog-card-body h3 a:hover{color:var(--primary)}
.blog-card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.blog-card-foot{display:flex;gap:14px;margin-top:auto}
.blog-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0;overflow:hidden;padding:0;margin-bottom:18px}
.blog-feature:hover{transform:translateY(-2px)}
.blog-feature-media{min-height:230px;background-color:var(--bg-2);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:38px}
.blog-feature-body{padding:24px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.blog-feature-body h2{margin:2px 0 0;font-size:24px;line-height:1.25}
.blog-widget h4{margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.blog-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.blog-list a{color:var(--text);font-size:14px;display:block;padding:3px 0}
.blog-list a:hover{color:var(--primary)}
.blog-list a.active{color:var(--primary);font-weight:700}
.blog-tags{display:flex;flex-wrap:wrap;gap:6px}
.blog-body{color:var(--text);line-height:1.75;font-size:16px}
.blog-body p{margin:0 0 16px}
.blog-body h2,.blog-body h3,.blog-body h4{color:var(--text);margin:26px 0 10px;line-height:1.3}
.blog-body ul,.blog-body ol{margin:0 0 16px;padding-left:22px}
.blog-body li{margin:5px 0}
.blog-body img{max-width:100%;height:auto;border-radius:12px}
.blog-body a{color:var(--primary)}
.blog-body blockquote{margin:0 0 16px;padding:10px 18px;border-left:3px solid var(--primary);background:var(--bg-2);border-radius:0 12px 12px 0;color:var(--muted)}
.blog-post-head{margin:8px 0 0}
.blog-post-hero{margin:20px 0;border-radius:16px;overflow:hidden}
.blog-post-hero img{width:100%;display:block}
.blog-postnav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px;border-top:1px solid var(--brd);padding-top:18px}
.blog-postnav-item{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--brd);border-radius:12px;background:var(--card);color:var(--text)}
.blog-postnav-item:hover{border-color:var(--primary)}
.blog-postnav-item.next{text-align:right}
.blog-comments{margin-top:34px;border-top:1px solid var(--brd);padding-top:22px}
.blog-comment-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.blog-comment{display:flex;gap:12px}
.blog-comment-avatar{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--grad-blue,linear-gradient(135deg,#3b82f6,#2563eb));color:#fff;font-weight:800}
.blog-comment-body{flex:1;min-width:0;border-bottom:1px solid var(--brd);padding-bottom:12px}
.blog-comment-body p{color:var(--text)}
.blog-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.blog-share{margin-top:22px;border-top:1px solid var(--brd);padding-top:16px}
.blog-share-label{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin-bottom:10px}
.blog-share-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.blog-share .share-btn{padding:10px 12px;font-size:13.5px}
.blog-share .share-btn i{font-size:17px;width:20px}

/* Index: grid/list toggle */
.blog-view{display:flex;gap:4px;background:var(--card);border:1px solid var(--brd);border-radius:11px;padding:4px;flex:none}
.blog-view-btn{width:38px;height:32px;border:0;background:none;color:var(--muted);border-radius:8px;cursor:pointer;font-size:14px;font-family:inherit;transition:.15s}
.blog-view-btn:hover{color:var(--text)}
.blog-view-btn.active{background:var(--panel-2);color:var(--primary)}
.blog-grid--list{grid-template-columns:1fr}
.blog-grid--list .blog-card{flex-direction:row}
.blog-grid--list .blog-card-media{width:250px;height:auto;min-height:160px;flex:none}
.blog-grid--list .blog-card-body{gap:6px}

/* Index: per-card share bar */
.blog-card-share{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px;border-top:1px solid var(--brd)}
.blog-card-foot{margin-top:0}
.blog-share-ico{width:30px;height:30px;padding:0;border-radius:8px;border:1px solid var(--brd);background:var(--bg-2);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;text-decoration:none;transition:.15s}
.blog-share-ico:hover{color:#fff;background:var(--share,var(--primary));border-color:var(--share,var(--primary));transform:translateY(-1px)}

/* Sidebar: recent-post thumbnails */
.blog-mini-list{display:flex;flex-direction:column;gap:12px}
.blog-mini{display:flex;gap:10px;align-items:center;color:var(--text);text-decoration:none}
.blog-mini:hover b{color:var(--primary)}
.blog-mini-thumb{width:52px;height:52px;flex:none;border-radius:10px;background:var(--bg-2) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:16px}
.blog-mini-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.blog-mini-body b{font-size:13.5px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-mini-body small{font-size:11.5px}
@media(max-width:900px){
  .blog-layout{grid-template-columns:1fr}
  .blog-feature{grid-template-columns:1fr}
}
@media(max-width:560px){
  .blog-postnav{grid-template-columns:1fr}
  .blog-grid--list .blog-card{flex-direction:column}
  .blog-grid--list .blog-card-media{width:100%;height:170px;min-height:0}
}

/* Light theme: the dark scrollbar-color set on html is inherited by the sidebar
   (and every other scroller). Override it here so the track matches the theme,
   not just the WebKit pseudo-elements. */
html[data-theme="light"]{scrollbar-color:#60a5fa #e8eef7}
html[data-theme="light"] .sidebar,html[data-theme="light"] .site-sidebar{scrollbar-color:#60a5fa #e8eef7}

/* ---------- Advertising ----------
   .ad-slot is the rendered banner (from ad_render). It is a relative box so the
   "Ad" badge can sit in the corner; the image scales to the container. Sidebar
   slots live in an .ad-widget card, in-content slots in an .ad-inline block. */
.ad-slot{position:relative;display:block;border-radius:14px;overflow:hidden;line-height:0;background:rgba(255,255,255,.03);border:1px solid var(--line);transition:transform .15s ease,border-color .15s ease}
.ad-slot img{display:block;width:100%;height:auto;max-width:100%;object-fit:cover}
.ad-slot:hover{border-color:var(--cyan);transform:translateY(-1px)}
.ad-badge{position:absolute;top:8px;right:8px;line-height:1;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);padding:3px 7px;border-radius:999px;backdrop-filter:blur(4px)}
.ad-widget{padding:14px}
.ad-widget .ad-slot{margin:0}
.ad-inline{max-width:100%}
.ad-inline .ad-slot{max-width:728px;margin:0 auto}
.ad-inline .ad-slot img{max-height:180px;object-fit:cover}

/* Advertise page: the selectable package cards hold a radio + details. */
.ad-pkg{display:flex;gap:12px;align-items:flex-start;padding:16px;margin:0;border:1px solid var(--line);transition:border-color .15s ease,background .15s ease}
.ad-pkg:hover{border-color:var(--muted)}
.ad-pkg:has(input:checked){border-color:var(--cyan);background:rgba(34,211,238,.06)}
.ad-pkg input[type=radio]{margin-top:3px;accent-color:var(--cyan)}
.filters .pill:has(input[type=radio]){position:relative}
.filters .pill input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.filters .pill:has(input:checked){background:var(--cyan);color:#03131a;border-color:var(--cyan)}

/* ---------- Home "Download app" / PWA section ---------- */
.dl-card{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:center;padding:34px;overflow:hidden;
  border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,rgba(59,130,246,.10),rgba(37,99,235,.08) 55%,rgba(6,182,212,.08))}
@media(max-width:840px){.dl-card{grid-template-columns:1fr;text-align:center;padding:28px 22px}}
.dl-card h2{margin:6px 0 10px}
.dl-card .lead{max-width:520px}
@media(max-width:840px){.dl-card .lead{margin-left:auto;margin-right:auto}}
.dl-buttons{display:flex;flex-wrap:nowrap !important;gap:12px;margin-top:20px;white-space:nowrap}
@media(max-width:840px){.dl-buttons{justify-content:center;gap:10px;flex-wrap:nowrap !important}}
/* Keep the two store buttons on one line on phones and desktop: they share the row
   and shrink instead of wrapping to a second line. Prevents wrapping even when
   the left sidebar is open or the container is narrower. */
.dl-buttons,
.dl-buttons *{min-width:0 !important}
.dl-buttons .dl-btn{flex:1 1 0 !important;min-width:0 !important;white-space:nowrap !important}
@media(max-width:840px){
  .dl-buttons .dl-btn{flex:1 1 0 !important;min-width:0 !important;justify-content:center;padding:10px 12px;gap:8px}
  .dl-buttons .dl-btn i,.dl-buttons .dl-btn .dl-play-ico{font-size:22px;width:22px;height:22px}
  .dl-buttons .dl-btn b{font-size:14px}
  .dl-buttons .dl-btn b,.dl-buttons .dl-btn small{white-space:nowrap !important}
}
@media(max-width:400px){
  .dl-buttons{gap:8px}
  .dl-buttons .dl-btn{padding:9px 8px;gap:6px}
  .dl-buttons .dl-btn i,.dl-buttons .dl-btn .dl-play-ico{font-size:18px;width:18px;height:18px}
  .dl-buttons .dl-btn b{font-size:12.5px}
  .dl-buttons .dl-btn small{font-size:8px;letter-spacing:0}
}
.dl-btn{display:inline-flex;align-items:center;gap:12px;padding:11px 20px 11px 18px;border-radius:14px;cursor:pointer;
  background:#0b1220;border:1px solid rgba(148,163,255,.30);color:#fff;font-weight:700;text-decoration:none;transition:.18s ease;line-height:1.05}
.dl-btn i{font-size:26px}
.dl-btn small{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#9aa6cc;font-weight:800}
.dl-btn b{display:block;font-size:16px}
.dl-btn:hover{transform:translateY(-2px);border-color:rgba(148,163,255,.6)}
.dl-btn:active{transform:translateY(0)}
.dl-art{display:flex;justify-content:center}
@media(max-width:840px){.dl-art{order:-1}}
.dl-device{width:180px;height:300px;border-radius:26px;padding:10px;position:relative;
  background:linear-gradient(180deg,#141b36,#0b1020);border:1px solid rgba(148,163,255,.28);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9), inset 0 0 0 2px rgba(255,255,255,.04)}
.dl-device::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:54px;height:5px;border-radius:10px;background:rgba(255,255,255,.18)}
.dl-screen{margin-top:14px;height:calc(100% - 20px);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(59,130,246,.35),transparent 60%),#0d1428;padding:16px;text-align:center}
.dl-screen img{width:64px;height:64px;border-radius:16px}
.dl-screen b{font-size:14px}
.dl-screen span{font-size:11px;color:var(--muted)}
.dl-screen .dl-pill{margin-top:6px;font-size:10.5px;font-weight:800;color:#bfe9ff;background:rgba(34,211,238,.14);border:1px solid rgba(34,211,238,.3);padding:4px 10px;border-radius:20px}
.dl-hint{margin-top:14px}
/* Hero badge row: the "Available on web & mobile" pill with the store buttons
   sitting beside it. */
.hero-badge-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px}
.hero-badge-row .eyebrow{margin-bottom:0}
/* Compact store buttons for the hero — same markup as .dl-btn, smaller. */
.dl-btn-sm{padding:7px 13px 7px 11px;gap:9px;border-radius:11px}
.dl-btn-sm i{font-size:18px}
.dl-btn-sm small{font-size:8.5px;letter-spacing:.05em}
.dl-btn-sm b{font-size:13px}

/* Colored Google Play logo inside the download buttons. */
.dl-btn .dl-play-ico{width:26px;height:26px;flex:none;display:block}
.dl-btn-sm .dl-play-ico{width:18px;height:18px}

/* Brand-colored store buttons (hero badge row and download section). */
.dl-btn-play{background:linear-gradient(135deg,#00a0ff 0%,#00c853 100%);border-color:transparent;box-shadow:0 12px 28px -14px rgba(0,200,83,.85)}
.dl-btn-apple{background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 100%);border-color:transparent;box-shadow:0 12px 28px -14px rgba(37,99,235,.85)}
.dl-btn-android{background:linear-gradient(135deg,#3ddc84 0%,#0f9d58 100%);border-color:transparent;box-shadow:0 12px 28px -14px rgba(15,157,88,.85)}
.dl-btn-play small,.dl-btn-apple small,.dl-btn-android small{color:rgba(255,255,255,.8)}
.dl-btn-play:hover,.dl-btn-apple:hover,.dl-btn-android:hover{border-color:transparent;filter:brightness(1.07)}

/* Mobile nav: collapse Dashboard/Marketplace/Advertise to icons */
@media(max-width:768px){
  .nav-right.nav-signed .btn .nav-btn-txt{display:none !important}
  .nav-right.nav-signed .btn{padding:9px 11px}
  .nav-right.nav-signed .btn i{margin-right:0}
}

/* ---------- Guide page (HTML user guide) ---------- */
.guide-wrap{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:start;padding:28px 0 60px}
@media(max-width:960px){.guide-wrap{grid-template-columns:1fr}}
.guide-toc{position:sticky;top:84px;max-height:calc(100vh - 110px);overflow:auto;border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--card)}
@media(max-width:960px){.guide-toc{display:none}}
.guide-toc > b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.guide-toc nav{display:flex;flex-direction:column;gap:2px}
.guide-toc a{display:block;padding:7px 10px;border-radius:9px;font-size:13.5px;color:var(--muted);font-weight:600;transition:.14s}
.guide-toc a:hover{background:rgba(148,163,255,.10);color:var(--text)}
.guide-toc a.active{background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(37,99,235,.18));color:#fff}
.guide-toc .btn{width:100%;margin-bottom:12px}
.guide-main{min-width:0}
.guide-cover{border:1px solid var(--line);border-radius:18px;padding:28px;background:linear-gradient(135deg,rgba(59,130,246,.10),rgba(37,99,235,.08))}
.guide-cover h1{margin:8px 0}
.guide-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.guide-section{margin-top:22px;scroll-margin-top:90px;border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--card)}
.guide-section h2{margin:0 0 6px}
.guide-section h3{margin:22px 0 8px;font-size:16.5px}
.guide-section p{line-height:1.7}
.guide-section ul,.guide-section ol{padding-left:22px;line-height:1.7}
.guide-section li{margin:4px 0}
.guide-note{margin:14px 0;padding:12px 14px;border-left:3px solid var(--cyan);border-radius:0 10px 10px 0;background:rgba(34,211,238,.08);font-size:14.5px}
.guide-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:14px}
.guide-table th,.guide-table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.guide-table th{color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
.guide-steps{counter-reset:g;list-style:none;padding:0;margin:10px 0}
.guide-steps > li{counter-increment:g;position:relative;padding:6px 0 6px 42px;margin-bottom:4px}
.guide-steps > li::before{content:counter(g);position:absolute;left:0;top:5px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;background:var(--grad-blue)}
.guide-mobile-toc{display:none}
@media(max-width:960px){.guide-mobile-toc{display:block;margin-bottom:18px}}
@media print{
  .nav,.footer,.top-live,.cookie-bar,.side-tab,.chat-tab,.top-strip,.guide-toc,.guide-mobile-toc,.guide-actions{display:none!important}
  body{background:#fff!important;color:#0b1020!important}
  .guide-wrap{display:block;padding:0}
  .guide-cover,.guide-section{border:0;background:#fff!important;padding:0;margin:16px 0;break-inside:avoid}
  .guide-section h2{break-after:avoid}
  .guide-note{background:#f4f7ff!important;color:#0b1020!important;border-left-color:#2563eb!important}
  .guide-section a{color:#0b1020!important;text-decoration:underline}
}