/* Funzo Stage 1 — layout adopted from the reference mockup's STRUCTURE only:
   dark green shell, bright green CTAs, white rounded cards, bottom nav.
   Brand is Funzo. No mockup names, balances or winner lists are used. */
*{box-sizing:border-box} body{margin:0;background:#06281a;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#12211a}
a{color:#0a7a3d} .app{max-width:440px;margin:0 auto;background:#f3f6f3;min-height:100vh;display:flex;flex-direction:column;position:relative;box-shadow:0 0 0 1px #0003}
.app-header{background:#0a3d22;color:#fff;padding:14px 16px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.app-header a{color:#fff;text-decoration:none} .brand{display:flex;gap:10px;align-items:center}
.brand img{width:36px;height:36px} .brand b{font-size:20px;letter-spacing:.2px} .brand small{display:block;font-size:11px;color:#bfe8cd}
.iconbtn{width:44px;height:44px;border-radius:50%;background:#ffffff22;border:0;color:#fff;font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.avatar{width:44px;height:44px;border-radius:50%;background:#22c55e;color:#06281a;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
main{padding:16px;flex:1;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.card{background:#fff;border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:0 2px 10px #00000010}
.card h2,.card h3{margin:0 0 8px} .muted{color:#5b6b61;font-size:14px;line-height:1.5}
.btn{display:block;width:100%;text-align:center;background:#22c55e;color:#06281a;font-weight:800;border:0;border-radius:999px;padding:14px;font-size:16px;cursor:pointer;text-decoration:none}
.btn.secondary{background:#e8f5ec;color:#0a3d22;border:1px solid #bfe8cd} .btn:disabled,.btn.disabled{opacity:.55;cursor:not-allowed}
.btnrow{display:flex;gap:10px} .btnrow .btn{flex:1}
input,select,textarea{width:100%;padding:13px 14px;border:1px solid #d5ddd6;border-radius:12px;font-size:15px;margin:6px 0 12px;background:#fff}
label{font-size:13px;font-weight:700;color:#33463a} .field-note{font-size:12px;color:#6b7d71;margin-top:-8px;margin-bottom:10px}
.banner{background:#fff7d6;border:1px solid #f0d77a;border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.5;margin-bottom:14px}
.banner.green{background:#e8f5ec;border-color:#bfe8cd} .banner.red{background:#fdecec;border-color:#f3b8b8}
.error{background:#fdecec;border:1px solid #f3b8b8;border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:14px}
.empty{border:1px dashed #c3cec6;border-radius:14px;padding:18px;text-align:center;color:#5b6b61;font-size:14px;line-height:1.5}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center}
.quick{ background:#fff;border-radius:16px;padding:12px 6px;text-decoration:none;color:#12211a;font-size:12px;font-weight:700;box-shadow:0 2px 8px #0000000d}
.quick span{font-size:22px;display:block;margin-bottom:4px}
.balance{background:linear-gradient(135deg,#0a3d22,#15803d);color:#fff;border-radius:20px;padding:18px;margin-bottom:14px}
.balance small{color:#bfe8cd} .balance .amt{font-size:32px;font-weight:900;margin:4px 0}
.splash{background:linear-gradient(180deg,#06281a,#0a3d22 60%,#15803d);color:#fff;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 24px}
.splash img{width:96px;height:96px} .splash h1{font-size:42px;margin:12px 0 4px} .splash p{color:#bfe8cd;line-height:1.6}
.bottomnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:440px;background:#fff;border-top:1px solid #dde5df;display:grid;grid-template-columns:repeat(5,1fr);padding:8px 4px calc(8px + env(safe-area-inset-bottom));z-index:20}
.bottomnav a{text-align:center;text-decoration:none;color:#4a5a50;font-size:13px;font-weight:700;padding:10px 0;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.bottomnav a.active{color:#0a7a3d}.bottomnav a.active::after{content:'';width:22px;height:4px;border-radius:99px;background:#22c55e;margin-top:3px} .bottomnav span{font-size:20px;display:block}
.topnav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px} .topnav a{background:#fff;border:1px solid #d5ddd6;border-radius:999px;padding:12px 14px;font-size:13px;text-decoration:none;color:#33463a;min-height:44px;display:inline-flex;align-items:center}
.listrow{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #eef2ee} .listrow:last-child{border-bottom:0}
.listrow a{font-weight:700;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 6px}
.wheel{width:250px;height:250px;border-radius:50%;margin:10px auto;position:relative;background:conic-gradient(#facc15 0 60deg,#22c55e 60deg 120deg,#ef4444 120deg 180deg,#f97316 180deg 240deg,#3b82f6 240deg 300deg,#a855f7 300deg 360deg);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #00000022}
.wheel:after{content:"SPIN";position:absolute;width:84px;height:84px;border-radius:50%;background:#06281a;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900}
.wheel-labels{font-size:12px;text-align:center;color:#5b6b61}
table{width:100%;border-collapse:collapse;font-size:14px} th,td{padding:9px 6px;border-bottom:1px solid #eef2ee;text-align:left}
.adslot{border:1px dashed #c3cec6;border-radius:12px;padding:10px;text-align:center;color:#4a5a50;font-size:13px;margin:12px 0}
.footer{font-size:13px;color:#4a5a50;text-align:center;line-height:1.6;padding:10px}
.footer a{display:inline-block;padding:12px 4px;min-height:44px}
.tabs{display:flex;gap:8px;margin-bottom:12px} .tabs a{flex:1;text-align:center;background:#fff;border-radius:999px;padding:12px 10px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#33463a;font-weight:700} .tabs a.active{background:#0a3d22;color:#fff}
[dir="rtl"] .app-header,.rtl{text-align:right}

/* ===== FIX Team A — design tokens, accessibility, responsive layout ===== */
/* ===== POLISH Team M — design tokens (expanded; views must use these
   classes instead of per-page inline styles — see polish/team-m-mobile.md
   for the migration map; other polish teams own the view edits) ===== */
:root{
  --green:#0a3d22;--green-dark:#06281a;--green2:#0a7a3d;--bright:#22c55e;
  --ink:#12211a;--muted:#4a5a50;--muted-light:#5b6b61;--bg:#f3f6f3;--card:#fff;
  --border:#d5ddd6;--border-light:#eef2ee;
  --radius-sm:12px;--radius:18px;--radius-lg:20px;--radius-pill:999px;
  --shadow-sm:0 2px 8px #0000000d;--shadow-md:0 2px 10px #00000010;--shadow-lg:0 8px 24px #00000022;
  --gap:12px;--space-xs:6px;--space-sm:10px;--space-md:14px;--space-lg:16px;
  --text-xs:12px;--text-sm:13px;--text-md:14px;--text-lg:16px;
  --tap:44px;
  --font:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
/* Token utility classes (for view migration; do not invent new colours) */
.radius-sm{border-radius:var(--radius-sm)}.radius-card{border-radius:var(--radius)}
.radius-lg{border-radius:var(--radius-lg)}.radius-pill{border-radius:var(--radius-pill)}
.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}
.p-16{padding:16px}.mb-14{margin-bottom:14px}.gap-12{gap:12px}
.text-muted{color:var(--muted)}.text-sm{font-size:var(--text-sm)}
.header-actions{display:flex;gap:8px;align-items:center}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #22c55e;outline-offset:2px}
.skip-link{position:absolute;left:-9999px;top:8px;background:#06281a;color:#fff;padding:10px 14px;border-radius:12px;z-index:100}
.skip-link:focus{left:8px}
.text-center{text-align:center}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-14{margin-top:14px}
.note-sm{font-size:12px}.btn-auto{width:auto}.btn-brand-google{background:#fff;color:#1f2937;border:1px solid #d5ddd6}
.btn-brand-facebook{background:#1877f2;color:#fff}.btn-brand-apple{background:#111;color:#fff}
.lang-switch{display:flex;gap:6px;align-items:center}.lang-switch a{color:#fff!important;font-size:13px;font-weight:700;padding:8px 10px;border-radius:99px;min-height:44px;display:inline-flex;align-items:center}
.lang-switch a.active-lang{background:#22c55e;color:#06281a!important}
.bell-wrap{position:relative}.bell-badge{position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;font-size:11px;font-weight:800;min-width:20px;height:20px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.hero-art{display:flex;gap:10px;justify-content:center;margin:14px 0 4px}.hero-art span{font-size:30px;background:#e8f5ec;border-radius:16px;padding:10px 12px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.tablewrap::after{content:'Scroll sideways to see all columns →';display:block;font-size:12px;color:#4a5a50;padding:6px 0 2px}
.tablewrap table{min-width:560px}
.result-badge{display:inline-block;background:#22c55e;color:#06281a;font-weight:900;border-radius:99px;padding:8px 16px;margin:8px 0}
.avatar-lg{width:64px;height:64px;font-size:28px;margin:0 auto}
button.btn-loading{opacity:.6;pointer-events:none}
/* RTL: mirror tables, grids and balance cards (header was already flipped) */
[dir="rtl"] table th,[dir="rtl"] table td{text-align:right}
[dir="rtl"] .grid2,[dir="rtl"] .grid4{direction:rtl}
[dir="rtl"] .balance,[dir="rtl"] .card{text-align:right}
[dir="rtl"] .tablewrap::after{content:'← تمام کالم دیکھنے کے لیے سائیڈ اسکرول کریں'}
/* ---- ≥768px: two-column dashboard, light page background ---- */
/* POLISH Team M: bottom nav was fixed at max-width 440px while .app is
   860px wide — the bar floated narrower than the shell. Widen it to the
   shell width until the ≥1100px rail takes over. */
@media (min-width:768px){
  body{background:#e9f1e9}
  .app{max-width:860px;box-shadow:0 8px 40px #00000022}
  .bottomnav{max-width:860px}
  main{padding:24px}
  .grid2{grid-template-columns:1fr 1fr}
  .dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .dash-grid .card{margin-bottom:0}
  .topnav a{font-size:14px}
  .tablewrap table{min-width:640px}
}
/* ---- ≤480px: stacked-card tables (rows use data-label) ---- */
/* POLISH Team M: .tablewrap table had min-width 560px, which forced even
   stacked cards to scroll horizontally. Stacked tables must be fluid. */
@media (max-width:480px){
  .tablewrap table{min-width:0}
  .tablewrap::after{display:none}
  table.stacked,table.stacked tbody,table.stacked tr,table.stacked td{display:block;width:100%}
  table.stacked tr{border:1px solid #eef2ee;border-radius:14px;margin-bottom:10px;padding:4px 10px;background:#fff}
  table.stacked tr:first-child{display:none}
  table.stacked td{display:flex;justify-content:space-between;gap:10px;border-bottom:0;text-align:right;padding:7px 0}
  table.stacked td::before{content:attr(data-label);font-weight:700;text-align:left;color:#33463a}
  table.stacked td:last-child{justify-content:flex-end}
  .quick{font-size:13px}
}
/* ---- ≤400px: keep the mockup's 4-in-a-row quick tiles, just tighten them
   so 4 tiles fit a 360px phone (tile ≈74px: 22px icon + 12px label) ---- */
@media (max-width:400px){
  .grid4{gap:6px}
  .quick{padding:10px 2px;font-size:11px}
  .quick span{font-size:20px}
}
/* ---- ≥1100px: centred ~1100px layout, bottom nav becomes a left rail ---- */
@media (min-width:1100px){
  .app{max-width:1100px;display:grid;grid-template-columns:230px 1fr;grid-template-rows:auto 1fr}
  .app-header{grid-column:1 / -1;position:sticky;top:0}
  main{grid-column:2;max-width:780px;width:100%;margin:0 auto;padding-bottom:24px}
  .bottomnav{position:sticky;top:76px;left:auto;transform:none;width:230px;max-width:230px;height:fit-content;display:flex;flex-direction:column;border-top:0;border-right:1px solid #dde5df;padding:16px 10px;grid-column:1;grid-row:2}
  .bottomnav a{flex-direction:row;justify-content:flex-start;gap:10px;padding:12px 10px;font-size:14px}
  .bottomnav a span{font-size:20px}
  .bottomnav a.active::after{display:none}
  .bottomnav a.active{background:#e8f5ec;border-radius:12px}
  .footer{grid-column:2}
}

.flex-between{display:flex;justify-content:space-between;font-size:13px;align-items:center}

/* ===== POLISH Team S — mockup-level visual polish (appended only; no existing rules changed) ===== */
.hero-illustration{width:100%;max-width:320px;height:auto;display:block;margin:6px auto 10px;border-radius:16px}
.icon-tile{width:48px;height:48px;border-radius:14px;background:#e8f5ec;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.icon-tile img{width:32px;height:32px}
.row-icon{width:34px;height:34px;vertical-align:middle;margin-right:8px}
.step-tile{display:inline-flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:700}
.step-tile img{width:40px;height:40px}
.remember-row{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#33463a;cursor:pointer}
.remember-row input{width:auto!important;flex:0 0 auto;margin:0}
.start-btn{white-space:nowrap;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:10px 14px;background:#e8f5ec;border-radius:999px;font-weight:700;text-decoration:none;color:#0a7a3d}
.method-head{display:flex;align-items:center;gap:12px}
.method-head img{width:40px;height:40px;flex:0 0 auto}
.method-badge{font-size:12px;font-weight:800;color:#0a7a3d;background:#e8f5ec;border-radius:99px;padding:4px 10px}
.rank-1{background:#f59e0b;color:#fff;box-shadow:0 0 0 2px #facc15}
.rank-2{background:#94a3b8;color:#fff;box-shadow:0 0 0 2px #cbd5e1}
.rank-3{background:#b45309;color:#fff;box-shadow:0 0 0 2px #fbbf24}
.profile-avatar{width:84px;height:84px;font-size:34px;background:linear-gradient(135deg,#0a3d22,#22c55e);color:#fff;border:3px solid #bfe8cd;margin:0 auto}
.stat-card b{font-size:22px;display:block}
.stat-card img{width:32px;height:32px;margin:0 auto 6px;display:block}
.pillar-card{text-align:center}
.pillar-card img{width:44px;height:44px;margin:0 auto 8px;display:block}
.celebrate{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,#f0fdf4)}
.celebrate::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 18%,#facc15 0 5px,transparent 6px),radial-gradient(circle at 88% 22%,#22c55e 0 5px,transparent 6px),radial-gradient(circle at 78% 78%,#f97316 0 4px,transparent 5px),radial-gradient(circle at 18% 82%,#3b82f6 0 4px,transparent 5px);opacity:.55}
.celebrate>*{position:relative}
.faq-section h3{margin:16px 0 4px}
.faq-section h3:first-child{margin-top:0}
[dir="rtl"] .row-icon{margin-right:0;margin-left:8px}
[dir="rtl"] .method-head{flex-direction:row-reverse}

/* Fidelity pass: input icons, method cards, wheel labels, avatars, flags */
.input-row{display:flex;align-items:center;gap:8px}.input-row input{flex:1}.input-icon{font-size:18px;flex:0 0 auto}
.method-card{display:block;border:2px solid #dbe5dc;border-radius:14px;padding:12px;margin:8px 0;cursor:pointer;background:#fff}
.method-card:has(input:checked){border-color:#22c55e;background:#eefaf1}
.wheel-label{position:absolute;left:50%;top:50%;margin-left:-24px;margin-top:-9px;width:48px;text-align:center;font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 3px #000}
.avatar-sm{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#0a3d22;color:#fff;font-weight:800;font-size:13px;margin-right:6px}
.flag{font-size:18px}
.invite-banner{border:2px solid #22c55e}
.splash-card{background:linear-gradient(180deg,#0a3d22,#06281a);color:#fff}.splash-card .muted{color:#bfe8cd}

/* ---- Team R: referral hub only (no other page restyled) ---- */
.ref-hub .card{margin-bottom:14px}
.ref-hero{background:linear-gradient(180deg,#0a3d22,#06281a);color:#fff;display:flex;gap:12px;align-items:center}
.ref-hero h1{color:#fff;margin:0 0 6px}
.ref-hero-sub{color:#bfe8cd}
.ref-eyebrow{color:#22c55e;font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:13px;margin:0 0 6px}
.ref-hero-art{flex:0 0 auto}
.ref-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.ref-stat{text-align:center;border-top:5px solid #22c55e;padding:16px 10px}
.ref-stat-approved{border-top-color:#0a7a3d}.ref-stat-pending{border-top-color:#f0b429}.ref-stat-rejected{border-top-color:#d64545}
.ref-stat-num{display:block;font-size:28px;font-weight:900;line-height:1.1}
.ref-stat-label{display:block;color:#5b6b61;font-size:13px;margin-top:4px}
.ref-linkcard input{width:100%;box-sizing:border-box}
.ref-share-label{margin:14px 0 8px;font-weight:700}
.ref-share{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.share-btn{width:48px;height:48px;min-width:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;padding:0;background:#e8f5ec}
.share-btn img{width:30px;height:30px;display:block}
.share-btn-off{opacity:.45;cursor:default}
.share-btn-more{background:#06281a;color:#fff;font-weight:900;font-size:18px;letter-spacing:1px}
.ref-step{display:flex;gap:12px;align-items:flex-start;margin:12px 0}
.ref-step-num{flex:0 0 auto;width:36px;height:36px;min-width:36px;border-radius:50%;background:#22c55e;color:#06281a;font-weight:900;display:inline-flex;align-items:center;justify-content:center}
.ref-step p{margin:0}
.ref-earn{background:linear-gradient(180deg,#0a3d22,#06281a);color:#fff}
.ref-earn h2{color:#fff}
.ref-earn-amount{font-size:30px;font-weight:900;margin:6px 0}
.ref-earn .muted,.ref-earn .note-sm{color:#bfe8cd}
.ref-earn .btn{margin-top:10px}
@media (min-width:768px){.ref-stats{grid-template-columns:repeat(4,1fr)}}
[dir="rtl"] .ref-stats{direction:rtl}
[dir="rtl"] .ref-step{text-align:right}

/* ===== POLISH Merge — conflict resolutions, tap targets, 320px header,
   and token classes for the inline-style migration (no colours invented;
   palette is Team M's tokens) ===== */
.tagline{font-size:18px;color:#22c55e;font-weight:800;margin:0}
.splash-steps{display:flex;gap:20px;justify-content:center;margin:16px 0;font-size:13px}
.splash-steps-welcome{display:flex;gap:28px;margin:22px 0;font-size:13px}
.text-white{color:#fff}.text-mint{color:#bfe8cd}
.m-0{margin:0}.mt-6{margin-top:6px}.mt-16{margin-top:16px}
.fs-14{font-size:14px}.w-auto{width:auto}.uppercase{text-transform:uppercase}
.form-inline{display:inline}
.result-icon{width:56px;height:56px;margin:4px auto;display:block}
.letterspaced{letter-spacing:6px}
.score-big{font-size:28px;font-weight:900}
/* Method cards: the <label> is the tap target (icon row alone is 64px+ tall);
   make the floor explicit and give the radio a real thumb-sized box. */
.method-card{min-height:44px;box-sizing:border-box}
.method-card input[type=radio]{width:20px;height:20px;flex:0 0 auto;accent-color:#0a7a3d}
/* 320px header: tighten paddings/gaps only — 44px targets are NOT shrunk. */
@media (max-width:360px){
  .app-header{padding:12px 10px}
  .brand{gap:6px}.brand img{width:32px;height:32px}
  .header-actions{gap:4px}
  .lang-switch{gap:4px}.lang-switch a{padding:8px 6px}
}

/* ===== FIX Round 1 (2026-10-26) — defensive image caps + icon sizes =====
   Why this section exists: the 2026-10-26 rendered check saw hero, challenge
   and share images at full-column width and the login checkbox wrapped below
   its label — symptoms consistent with the browser rendering NEW HTML against
   a STALE cached stylesheet (server sends CSS with max-age=3600, and the
   polish deploy landed minutes before the check; every one of those classes
   was new in that deploy). The caps below therefore live LAST in this file
   (they win the cascade), use !important where a generic rule could fight
   them, and are backed by width/height attributes on the <img> tags
   themselves, so icons stay sized even if a stylesheet is stale or missing.
   Nothing here hides content or changes a layout value — every cap equals
   the size the class already claimed. */
main img{max-width:100%;height:auto}
.hero-illustration{max-width:320px!important}
.step-tile img{width:40px!important;height:40px!important}
.row-icon{width:34px!important;height:34px!important}
.icon-tile img{width:32px!important;height:32px!important}
.method-head img{width:40px!important;height:40px!important}
.stat-card img{width:32px!important;height:32px!important}
.pillar-card img{width:44px!important;height:44px!important}
.result-icon{width:56px!important;height:56px!important}
.share-btn img{width:30px!important;height:30px!important}
.ref-hero-art svg{width:120px!important;height:80px!important}
.bottomnav a span img{width:24px!important;height:24px!important;display:block}
.iconbtn img{width:24px!important;height:24px!important;display:block}
.input-icon img{width:20px!important;height:20px!important;display:block}
.input-icon{display:inline-flex;align-items:center}
/* Referral stats are a real grid in both states (re-declared here so no
   earlier rule can collapse them back to stacked bars). */
.ref-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:768px){.ref-stats{grid-template-columns:repeat(4,1fr)}}
.ref-step .icon-tile{flex:0 0 auto}
/* Remember-me: fixed 18px checkbox box (not width:auto, which lost to the
   global input{width:100%} rule in the stale stylesheet) + no wrapping. */
.remember-row{flex-wrap:nowrap!important}
.remember-row input{width:18px!important;height:18px!important;flex:0 0 auto!important;margin:0!important}

/* ===== FIX Round 2 (2026-10-26) — re-check defects, last in file =====
   Appended last so these rules win the cascade. Nothing here hides
   content, changes a route/value, or activates any campaign/payment. */
/* 5. Sticky-header anchor offset: anchor jumps (#how-it-works etc.) must
   not land under the sticky header (~76-80px tall). */
html{scroll-padding-top:92px}
main [id]{scroll-margin-top:92px}
/* 4. Spin wheel: seed has FIVE prizes (PKR 0/50/100/200/500) but the old
   gradient drew SIX 60-degree wedges, so labels sat across wedge
   boundaries. Gradient is now five 72-degree wedges matching the label
   angles (i*360/5). Wheel enlarged 250->300px; labels get a dark pill
   background so white text stays legible on every wedge colour. */
.wheel{width:300px!important;height:300px!important;background:conic-gradient(#facc15 0 72deg,#22c55e 72deg 144deg,#ef4444 144deg 216deg,#f97316 216deg 288deg,#3b82f6 288deg 360deg)!important}
.wheel:after{width:96px!important;height:96px!important}
.wheel-label{width:72px!important;margin-left:-36px!important;margin-top:-11px!important;font-size:13px!important;font-weight:800!important;color:#fff!important;background:rgba(6,40,26,.88)!important;padding:3px 6px!important;border-radius:99px!important;text-shadow:none!important;white-space:nowrap!important}
/* 3. Country code badges replace flag emoji; search icon sits in the
   input row (input keeps id="countrySearch" for the existing filter). */
.country-badge{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:24px;padding:0 6px;border-radius:8px;background:#e8f5ec;color:#0a7a3d;font-size:12px;font-weight:800;letter-spacing:.02em;vertical-align:middle}
.listrow .country-badge{margin-right:2px}
/* 2. Homepage Games rows: same 34px row icons as /games, aligned with
   the row title (the img sits inline before the <b> title). */
.listrow span .row-icon{vertical-align:middle!important;margin-right:8px!important}
/* 6. Social buttons: brand icons beside the label, but the buttons stay
   unmistakably disabled (disabled attribute + muted opacity + not-allowed
   cursor). They do NOTHING — no social login is wired. */
.btn-brand-google img,.btn-brand-facebook img,.btn-brand-apple img{width:20px!important;height:20px!important;vertical-align:middle!important;margin-right:8px!important}
.btn-brand-google:disabled,.btn-brand-facebook:disabled,.btn-brand-apple:disabled{opacity:.55!important;cursor:not-allowed!important}
/* 7. Referral hero motif: breathing room so the 120x80 artwork renders
   fully inside its card instead of looking cramped/clipped; on narrow
   screens the artwork drops below the text rather than squeezing. */
.ref-hero-art{padding:10px!important;background:rgba(255,255,255,.10)!important;border-radius:16px!important;flex:0 0 auto!important}
.ref-hero-art svg{display:block!important;width:120px!important;height:80px!important}
@media (max-width:520px){.ref-hero{flex-wrap:wrap!important}.ref-hero-art{align-self:flex-start!important}}
/* SCREEN-03-HOME — logged-in dashboard home only (Team 03). No other team's section edited. */
.dash-banner{background:linear-gradient(135deg,#06281a,#0a7a3d)!important;color:#fff;display:flex;gap:12px;align-items:center}
.dash-banner h2{color:#fff;margin:0 0 6px}
.dash-banner p{color:#bfe8cd;margin:0 0 10px}
.dash-banner input{background:#fff}
.dash-banner-art{flex:0 0 auto;background:rgba(255,255,255,.12);border-radius:16px;padding:8px}
.dash-balance-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.dash-withdraw{width:auto!important;flex:0 0 auto;padding:12px 24px!important;white-space:nowrap}
.dash-tiles .icon-tile{width:56px;height:56px;border-radius:18px}
.dash-tiles .quick:nth-child(1) .icon-tile{background:#dcfce7}
.dash-tiles .quick:nth-child(2) .icon-tile{background:#ede9fe}
.dash-tiles .quick:nth-child(3) .icon-tile{background:#dbeafe}
.dash-tiles .quick:nth-child(4) .icon-tile{background:#ffedd5}
.dash-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.dash-head h2{margin:0}
.dash-viewall{color:#0a7a3d;font-weight:800;text-decoration:none;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.dash-chal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dash-chal-card{background:#f6fbf7;border:1px solid #e2ede4;border-radius:16px;padding:12px;text-align:center;display:flex;flex-direction:column;gap:6px}
.dash-chal-icon{margin:0 auto}
.dash-chal-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dash-chal-note{font-size:12px}
.dash-start{display:block;background:#22c55e;color:#06281a;font-weight:800;border-radius:999px;padding:12px;text-decoration:none;margin-top:auto}
.dash-earner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dash-earner-card{text-align:center;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:4px}
.dash-avatar{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#0a3d22;color:#fff;font-weight:800;font-size:16px}
[dir="rtl"] .dash-banner,[dir="rtl"] .dash-head{direction:rtl}
/* SCREEN-13-SETTINGS — settings page layout matching reference 13 (heading with back link, menu rows with icons + value labels + chevrons, distinct red Log Out). Layout/styling only; no behaviour change. */
.set-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.set-head h1{margin:0;font-size:22px}
.set-back{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:28px;font-weight:700;color:#0a3d22;text-decoration:none;flex:0 0 auto}
.set-menu{padding:4px 16px}
.set-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 0;border-bottom:1px solid #eef2ee;text-decoration:none;color:#12211a}
.set-row:last-child{border-bottom:0}
.set-row-label{font-weight:700}
.set-row-value{margin-left:auto;font-size:14px}
.set-chevron{font-size:24px;color:#5b6b61;line-height:1}
.set-row-value + .set-chevron{margin-left:8px}
.set-field{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #eef2ee}
.set-field:last-of-type{border-bottom:0}
.set-label{display:inline-flex;align-items:center;gap:12px;font-weight:700;flex:0 0 auto;white-space:nowrap}
.set-field input,.set-field select{flex:1;min-width:0}
.set-logout{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 0;background:none;border:0;cursor:pointer;font:inherit;font-weight:800;color:#dc2626;text-align:left}
.set-logout svg{flex:0 0 auto}
[dir="rtl"] .set-chevron{transform:scaleX(-1)}
[dir="rtl"] .set-row-value{margin-left:0;margin-right:auto}
[dir="rtl"] .set-row-value + .set-chevron{margin-left:0;margin-right:8px}
@media (max-width:400px){.set-label{white-space:normal}}
/* SCREEN-04-REGISTRATION — registration page only: field boxes modelled on
   reference screen 04 (icon + stacked label/placeholder inside one bordered
   box), centred heading + green subheading, country box, pill Sign Up,
   OR divider, rectangular disabled social rows. Behaviour, fields,
   validation, copy and disabled social state are unchanged. */
.reg-card{max-width:440px;margin:0 auto}
.reg-title{text-align:center;font-size:28px;line-height:1.2;margin:4px 0 6px;color:#12211a}
.reg-sub{text-align:center;color:#0a7a3d;font-style:italic;font-size:15px;line-height:1.5;margin:0 0 18px}
.reg-field{display:flex;align-items:center;gap:10px;border:1px solid #d5ddd6;border-radius:14px;padding:11px 13px;background:#fff;margin-bottom:12px}
.reg-field:focus-within{border-color:#0a7a3d;box-shadow:0 0 0 3px #22c55e22}
.reg-field .input-icon{flex:0 0 auto;display:inline-flex;align-items:center}
.reg-field .input-icon img,.reg-field .input-icon svg{width:22px;height:22px;display:block}
.reg-field-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.reg-field-text label{font-size:13px;font-weight:700;color:#1a2e22}
.reg-field-text input{border:0;padding:0;margin:0;background:transparent;width:100%;font-size:15px;min-width:0}
.reg-field-text input::placeholder{color:#9aa89f}
.reg-field select{border:0;padding:0;margin:0;background:transparent;width:100%;flex:1;min-width:0;font-size:15px}
.reg-show{padding:8px 12px!important;font-size:13px!important;flex:0 0 auto}
.reg-country-head{font-size:17px;font-weight:800;color:#12211a;margin:6px 0 8px}
.reg-note{font-size:13px;line-height:1.5;color:#0a7a3d;margin:2px 0 14px}
.reg-signup{margin-top:4px}
.reg-terms{text-align:center;font-size:13px;line-height:1.5;color:#5b6b61;margin:14px 0 4px}
.reg-terms a{color:#0a7a3d;font-weight:700}
.reg-or{display:flex;align-items:center;gap:12px;margin:18px 0 6px}
.reg-or span{flex:1;height:1px;background:#d5ddd6}
.reg-or b{font-size:14px;color:#5b6b61}
.reg-social{width:100%;padding:14px!important;border-radius:12px!important;font-size:15px!important;margin-top:12px!important}
/* SCREEN-11-LEADERBOARD — Top Earners ranked rows (reference: pill tabs + rank/avatar/name/country/referrals/earnings). Real rows only; empty state unchanged. */
.lb-card h1{margin:0 0 12px}
.lb-tabs a{border:1px solid #dfe7e1}
.lb-tabs a.active{background:#22c55e!important;color:#fff!important}
.lb-country-link{margin:-4px 0 12px;font-size:13px}
.lb-head,.lb-row{display:grid;grid-template-columns:24px minmax(0,1fr) 40px 52px 84px;gap:8px;align-items:center}
.lb-head{padding:8px 4px;color:#5b6b61;font-size:12px;font-weight:800;border-bottom:1px solid #e3ebe5}
.lb-head span:nth-child(4),.lb-head span:nth-child(5){text-align:right}
.lb-row{padding:10px 4px;border-bottom:1px solid #eef3ef}
.lb-row:last-child{border-bottom:0}
.lb-rank{font-weight:800;color:#33463a;font-size:14px}
.lb-rank-first{color:#0a7a3d}
.lb-user{display:flex;align-items:center;gap:8px;min-width:0}
.lb-row .avatar-sm{width:32px;height:32px;font-size:14px;margin-right:0;flex:0 0 auto}
.lb-name{font-weight:700;font-size:14px;color:#0a3d22;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-cc{display:inline-flex;justify-content:center;background:#e8f5ec;color:#0a3d22;border-radius:6px;padding:3px 4px;font-size:12px;font-weight:800;letter-spacing:.02em}
.lb-ref{text-align:right;font-weight:700;font-size:14px;color:#33463a;font-variant-numeric:tabular-nums}
.lb-earn{text-align:right;font-weight:800;font-size:14px;color:#0a3d22;font-variant-numeric:tabular-nums}
.lb-list.lb-points .lb-head,.lb-list.lb-points .lb-row{grid-template-columns:24px minmax(0,1fr) 90px}
.lb-list.lb-points .lb-head span:nth-child(3){text-align:right}
[dir="rtl"] .lb-earn,[dir="rtl"] .lb-ref{text-align:left}
[dir="rtl"] .lb-head span:nth-child(4),[dir="rtl"] .lb-head span:nth-child(5){text-align:left}
@media (max-width:400px){.lb-head,.lb-row{grid-template-columns:20px minmax(0,1fr) 36px 44px 72px;gap:6px}.lb-list.lb-points .lb-head,.lb-list.lb-points .lb-row{grid-template-columns:20px minmax(0,1fr) 76px}.lb-name,.lb-ref,.lb-earn{font-size:13px}}
/* SCREEN-01-SPLASH — dark-green full splash matching reference 01-splash (Team 01 only) */
.splash-screen-01{background:linear-gradient(180deg,#06281a,#0a3d22 55%,#052e1c)!important;color:#fff!important;padding:32px 20px 24px!important;text-align:center}
.splash-screen-01 .splash-brand{font-size:44px;line-height:1.1;margin:14px 0 4px;color:#fff}
.splash-screen-01 .splash-tagline{color:#22c55e;font-size:20px;font-weight:800;margin:0 0 10px}
.splash-screen-01 .splash-subtitle{color:#fff;font-size:22px;font-weight:700;line-height:1.3;margin:0 0 6px}
.splash-screen-01 .splash-map{width:100%;max-width:360px;height:auto;display:block;margin:10px auto 14px}
.splash-screen-01 .splash-steps-01{display:flex;gap:0;margin:18px 0 20px}
.splash-screen-01 .splash-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;line-height:1.3;color:#fff;border-left:1px solid rgba(255,255,255,.25);padding:0 4px}
.splash-screen-01 .splash-step:first-child{border-left:none}
.splash-screen-01 .splash-step img{width:36px;height:36px;flex:0 0 auto}
.splash-screen-01 .splash-cta{display:block;width:100%;background:#22c55e!important;color:#fff!important;border-radius:999px!important;padding:16px!important;font-size:19px;font-weight:800;text-align:center}
.splash-screen-01 .splash-countries-caption{color:#7ed492;font-size:14px;margin:18px 0 10px}
.splash-screen-01 .splash-countries{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.splash-screen-01 .splash-country{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:30px;padding:0 8px;border-radius:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:13px;font-weight:800;letter-spacing:.5px}
.splash-screen-01 .splash-login a{color:#bfe8cd}
.splash-screen-01 .muted{color:#bfe8cd}
@media (max-width:400px){.splash-screen-01 .splash-brand{font-size:38px}.splash-screen-01 .splash-subtitle{font-size:19px}.splash-screen-01 .splash-step{font-size:12px}}
/* SCREEN-05-COUNTRIES */
.ctry-back{display:inline-block;font-weight:700;color:#0a7a3d;text-decoration:none;min-height:44px;line-height:44px}
.ctry-title{text-align:center;margin:4px 0 6px}
.ctry-sub{text-align:center;margin:0 0 16px}
.ctry-search{border-radius:999px;background:#f1f5f2;padding:8px 14px}
.ctry-search input{background:transparent;border:0;outline:0}
.country-row{align-items:center;gap:12px}
.country-row .ctry-badge{min-width:44px;width:44px;height:44px;border-radius:50%;padding:0;font-size:13px;margin-right:0}
.ctry-main{flex:1;min-width:0}
.ctry-main b{font-size:16px}
.ctry-meta{font-size:12px}
.ctry-chevron{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:44px;font-size:28px;line-height:1;color:#94a39a;text-decoration:none}
.country-row.is-selected{background:#e8f5ec;border-radius:12px}
.ctry-confirm{display:block;width:100%;text-align:center;margin-top:16px}
/* SCREEN-14-ABOUT */
.about-pillars .pillar-card b{display:block;font-size:15px;line-height:1.3}
.about-sub{display:block;font-size:12px;line-height:1.3;color:#5a6b60;margin-top:2px}
.about-note{margin-top:12px;font-size:13px}
.about-follow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.about-follow-icons{display:flex;gap:10px;align-items:center}
.about-follow-icons img{width:28px;height:28px;opacity:.45;filter:grayscale(1)}
@media (max-width:480px){.about-pillars{gap:6px}.about-pillars .pillar-card img{width:36px;height:36px}.about-pillars .pillar-card b{font-size:13px}.about-sub{font-size:11px}}

/* SCREEN-09-WITHDRAW — withdraw page layout matching reference 09 (balance card, method cards, amount, full-width submit). Real Funzo limits only; no mockup money rules. */
.wd-card h1{margin-bottom:4px}
.wd-sub{color:#5a6b5e;font-size:14px;margin:0 0 14px}
.wd-balance{display:flex;gap:14px;align-items:center;background:#f4faf5;border:1px solid #dbe5dc;border-radius:16px;padding:14px 16px;margin:0 0 14px}
.wd-coin{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#0a7a3d,#22c55e);color:#fff;font-weight:800;font-size:18px}
.wd-balance-text small{display:block;color:#5a6b5e}
.wd-amt{font-size:26px;font-weight:800;color:#0a3d22;line-height:1.2}
.wd-manual-note{margin:0 0 12px}
.wd-section-title{font-size:18px;margin:14px 0 8px}
.wd-method{display:flex!important;gap:12px;align-items:flex-start;min-height:64px;box-sizing:border-box}
.wd-method input[type=radio]{margin-top:14px}
.wd-badge{flex:0 0 auto;width:48px;height:48px;border-radius:50%}
.wd-method-body{flex:1;min-width:0}
.wd-method-line{display:inline-block;font-size:13px;margin-top:2px}
.wd-amount-label{display:block;font-weight:700;margin:14px 0 6px}
.wd-amount{width:100%;min-height:48px;box-sizing:border-box}
.wd-submit{display:block;width:100%;min-height:52px;margin-top:14px;font-size:17px}
.wd-foot{text-align:center;font-size:13px;margin:14px 0 0}
@media (max-width:480px){.wd-amt{font-size:23px}.wd-coin{width:48px;height:48px;font-size:16px}}

/* SCREEN-08-REFERRAL — referral page matching reference 08 (title card, stats grid, link+Copy row, brand share row, steps, earn banner, white earnings card). Real data only; Rs 300 appears only as a labelled paused example. */
.ref-hero-art{overflow:visible!important}
.ref-hero-art svg{max-width:100%!important;height:auto!important}
.ref-stat-num{font-size:32px!important}
.s08-linkrow{display:flex;gap:10px;align-items:stretch;margin:0 0 10px}
.s08-linkrow input{flex:1;min-width:0}
.s08-linkrow .btn{flex:0 0 auto;width:auto;white-space:nowrap;padding:12px 20px}
.ref-share{gap:10px!important}
.ref-share .share-btn{background:transparent!important;width:44px!important;height:44px!important;min-width:44px!important;border-radius:12px!important;padding:0!important}
.ref-share .share-btn img{width:44px!important;height:44px!important;display:block!important}
.ref-share .share-btn-off{opacity:.45!important}
.ref-step{align-items:center!important}
.s08-earn-banner{display:flex!important;gap:14px!important;align-items:center!important;background:linear-gradient(135deg,#0a7a3d,#22c55e)!important;color:#fff!important}
.s08-earn-banner img{flex:0 0 auto!important}
.s08-earn-banner b{display:block;font-size:19px;line-height:1.25}
.s08-banner-note{display:block;font-size:13px;color:#d8f3e0;margin-top:4px}
.ref-earn{background:#fff!important;color:#06281a!important}
.ref-earn h2{color:#06281a!important}
.ref-earn .muted,.ref-earn .note-sm{color:#5b6b61!important}
.ref-earn-amount{display:flex;align-items:center;gap:10px;color:#06281a!important}
.s08-earn-row{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.s08-earn-left{flex:1;min-width:220px}
.s08-earn-row .btn{flex:0 0 auto;width:auto;white-space:nowrap;margin-top:0!important}
@media (max-width:520px){.ref-hero-art{margin:8px auto 0!important}.s08-earn-row .btn{width:100%!important}}
/* SCREEN-02-LOGIN — login screen only (reference: phone login, "Welcome Back!") */
.login-card h1{font-size:26px;margin:10px 0 4px}
.login-field{display:flex;align-items:center;gap:10px;border:1px solid #d5ddd6;border-radius:12px;padding:10px 12px;margin-bottom:12px;background:#fff}
.login-field:focus-within{border-color:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,.2)}
.login-field .input-icon{display:flex;flex:0 0 auto}
.login-field-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;text-align:left}
.login-field-label{font-size:12px;font-weight:700;color:#5b6b61;text-align:left}
.login-field input{border:0!important;padding:0!important;margin:0!important;width:100%;font-size:15px}
.login-field input:focus{outline:none}
.login-field .btn-auto{flex:0 0 auto;padding:8px 12px;font-size:13px}
.login-card form .btn{padding:16px;font-size:17px}
.login-card .remember-row a,.login-card .flex-between a{color:#0a7a3d;font-weight:700}
.login-or{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:#5b6b61;font-size:13px;font-weight:700}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:#d5ddd6}
.login-card .btn-brand-google,.login-card .btn-brand-facebook,.login-card .btn-brand-apple{background:#fff!important;color:#1f2937!important;border:1px solid #d5ddd6!important;text-align:left!important}
.login-card .btn-brand-google:disabled,.login-card .btn-brand-facebook:disabled,.login-card .btn-brand-apple:disabled{opacity:.55!important;cursor:not-allowed!important}
.login-card .text-center a{color:#0a7a3d;font-weight:800}

/* SCREEN-12-PROFILE */
.prof-head{display:flex;align-items:center;gap:14px;text-align:left}
.prof-head .profile-avatar{margin:0;flex:0 0 auto}
.prof-head-text{min-width:0;flex:1 1 auto}
.prof-name{margin:0;font-size:20px;text-align:start}
.prof-sub{margin:4px 0 0;color:#5b6b60;font-size:13px;text-align:start}
.prof-edit{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:999px;background:#22c55e;color:#06281a;font-weight:800;text-decoration:none}
.prof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0}
.prof-stat{text-align:center;padding:14px 6px}
.prof-stat img{width:32px;height:32px;margin:0 auto 6px;display:block}
.prof-stat b{font-size:18px;display:block;overflow-wrap:anywhere}
.prof-stat span{font-size:13px;color:#5b6b60}
.prof-logout{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;border-top:1px solid #e5e7eb;padding:12px 0;color:#dc2626;font-size:16px;font-weight:700;cursor:pointer;text-align:left;min-height:44px}
.prof-logout svg{flex:0 0 auto}
.prof-logout .chev{margin-left:auto;color:#dc2626}
[dir="rtl"] .prof-head{text-align:right}
[dir="rtl"] .prof-edit{margin-left:0;margin-right:auto}
[dir="rtl"] .prof-logout .chev{margin-left:0;margin-right:auto}

/* SCREEN-15-RESULT — result page only (Team 15). Dark celebratory panel
   with CSS confetti dots, generic avatar circle, overlapping badge pill,
   score pill, bright-green Share button, outlined Try button. Badge text
   and score come from the real game score only; no mockup score is used. */
.res15-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#0a3d22,#06281a);border-radius:16px;padding:22px 16px 40px;margin:12px 0 0}
.res15-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 10% 20%,#facc15 0 4px,transparent 5px),radial-gradient(circle at 90% 16%,#22c55e 0 4px,transparent 5px),radial-gradient(circle at 82% 82%,#f97316 0 3px,transparent 4px),radial-gradient(circle at 16% 84%,#3b82f6 0 3px,transparent 4px),radial-gradient(circle at 55% 8%,#e9d5ff 0 3px,transparent 4px);opacity:.8}
.res15-avatar{position:relative;width:112px;height:112px;margin:0 auto;border-radius:50%;background:#e8f5ec;border:4px solid #22c55e;box-shadow:0 4px 16px #00000040;display:flex;align-items:center;justify-content:center;overflow:hidden}
.res15-avatar img{width:96px!important;height:96px!important;display:block}
.res15-badge{position:relative;z-index:2;display:inline-block;margin-top:-26px;background:#e9d5ff;color:#5b21b6;font-weight:900;font-size:20px;border-radius:99px;padding:10px 24px;box-shadow:0 2px 10px #00000020}
.res15-message{font-size:17px;font-weight:700;color:#5b21b6;line-height:1.5;margin:12px 0 4px}
.res15-score{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#f0fdf4;border-radius:99px;padding:12px 18px;margin:14px 0}
.res15-score span{color:#5b6b61;font-size:14px}
.res15-score b{color:#0a7a3d;font-size:22px;font-weight:900}
.res15-note{margin:0 0 4px}
.btn.res15-share{margin-top:14px}
.btn.res15-try{margin-top:12px;background:#fff!important;color:#0a7a3d!important;border:2px solid #bfe8cd!important}

/* SCREEN-10-WALLET — wallet page layout matching reference screen 10 (append-only; do not edit other sections) */
.wal-balance{padding:20px!important}
.wal-balance-row{display:flex!important;align-items:center!important;gap:14px!important}
.wal-icon-box{flex:0 0 auto!important;width:56px!important;height:56px!important;border-radius:14px!important;background:rgba(255,255,255,.16)!important;display:flex!important;align-items:center!important;justify-content:center!important}
.wal-icon-box img{width:40px!important;height:40px!important;display:block!important}
.wal-balance-text{flex:1 1 auto!important;min-width:0!important}
.wal-balance-text small{color:#bfe8cd!important;font-size:13px!important}
.wal-balance-text .amt{font-size:30px!important;margin:2px 0 0!important}
.wal-withdraw{flex:0 0 auto!important;background:#fff!important;color:#0a7a3d!important;font-weight:800!important;text-decoration:none!important;border-radius:999px!important;padding:11px 20px!important;font-size:15px!important;white-space:nowrap!important}
.wal-balance-meta{margin-top:14px!important;color:#bfe8cd!important;font-size:13px!important}
.wal-meta{margin:0 0 14px!important}
.wal-tiles{margin-bottom:14px!important}
.wal-tile{display:flex!important;align-items:center!important;gap:12px!important;text-align:left!important}
.wal-tile-icon{flex:0 0 auto!important;width:40px!important;height:40px!important}
.wal-tile-text{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important}
.wal-tile-label{font-size:13px!important}
.wal-tile-text b{font-size:20px!important}
.wal-history{padding:18px!important}
.wal-history-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-bottom:6px!important}
.wal-history-head h2{margin:0!important;font-size:20px!important}
.wal-viewall{color:#0a7a3d!important;font-weight:800!important;text-decoration:none!important;white-space:nowrap!important}
.wal-list{display:flex!important;flex-direction:column!important}
.wal-row{display:flex!important;align-items:center!important;gap:12px!important;padding:14px 0!important;border-bottom:1px solid #e6ede9!important}
.wal-row:last-child{border-bottom:0!important;padding-bottom:2px!important}
.wal-txn-icon{flex:0 0 auto!important;width:40px!important;height:40px!important;border-radius:50%!important;background:#e8f5ec!important;padding:6px!important;box-sizing:border-box!important}
.wal-txn-main{flex:1 1 auto!important;min-width:0!important}
.wal-txn-main b{font-size:15px!important}
.wal-txn-amt{color:#0a7a3d!important;font-weight:700!important;font-size:14px!important}
.wal-txn-side{flex:0 0 auto!important;text-align:right!important;font-size:13px!important}
.wal-pending{display:inline-block!important;background:#fef3c7!important;color:#b45309!important;font-weight:800!important;font-size:12px!important;padding:3px 10px!important;border-radius:999px!important}
[dir="rtl"] .wal-tile{text-align:right!important}
[dir="rtl"] .wal-txn-side{text-align:left!important}

/* SCREEN-06-CHALLENGES — challenges page only: reference layout (heading, filter pills, circular-icon rows, star reward line, solid Start pill, Spin & Win row). Icons capped at 56px (48px narrow) so the giant-illustration defect cannot return. */
.ch06-card h1{font-size:26px;margin:0 0 4px}
.ch06-sub{color:#5b6b61;margin:0 0 14px;font-size:14px}
.ch06-tabs{flex-wrap:wrap}
.ch06-tabs a{flex:1 1 auto;border:1px solid #e2e8e4}
.ch06-tabs a.active{border-color:transparent}
.ch06-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #eef2ee}
.ch06-ico{flex:0 0 auto;width:56px;height:56px;border-radius:50%;overflow:hidden;background:#e8f5ec;display:flex;align-items:center;justify-content:center}
.ch06-ico img{width:56px!important;height:56px!important;display:block}
.ch06-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.ch06-body b{font-size:16px}
.ch06-body .muted{font-size:13px;line-height:1.4}
.ch06-reward{font-size:14px;font-weight:800;color:#0a7a3d}
.ch06-reward .muted{font-weight:400;color:#5b6b61}
.ch06-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ch06-side .start-btn{background:#22c55e!important;color:#fff!important;padding:10px 18px}
.ch06-status{font-size:12px;font-weight:700;color:#33463a}
.ch06-spin{text-decoration:none;color:inherit;border-bottom:0}
.ch06-badge{flex:0 0 auto;background:#0a3d22;color:#fff;font-size:12px;font-weight:800;padding:8px 12px;border-radius:999px;white-space:nowrap}
.ch06-note{margin:14px 0 0;font-size:13px;line-height:1.5}
@media (max-width:400px){.ch06-ico{width:48px;height:48px}.ch06-ico img{width:48px!important;height:48px!important}.ch06-body b{font-size:15px}.ch06-row{gap:10px}}
[dir="rtl"] .ch06-side{align-items:flex-start}

/* SCREEN-07-SPIN — Daily Spin page only. Wheel sized to the phone column,
   segment labels CENTRED in their segments (gradient starts at -36deg so
   each 72deg segment is centred on its label angle), jackpot (PKR 500)
   on top, descending clockwise. Paused hub: centre reads PAUSED, the
   SPIN button below stays disabled. No fake prizes, no mockup values. */
.spin07-head h1{margin-bottom:4px}
.spin07-wheel-wrap{position:relative;width:fit-content;max-width:100%;margin:14px auto 6px}
.spin07-wheel-wrap .wheel{width:min(340px,92vw)!important;height:min(340px,92vw)!important;background:conic-gradient(from -36deg,#facc15 0 72deg,#a855f7 72deg 144deg,#3b82f6 144deg 216deg,#22c55e 216deg 288deg,#ef4444 288deg 360deg)!important;border:4px solid #06281a}
.spin07-wheel-wrap .wheel:after{content:"PAUSED";font-size:14px;letter-spacing:.06em;text-align:center}
.spin07-pointer{position:absolute;top:-4px;left:50%;margin-left:-14px;width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:24px solid #facc15;z-index:2;filter:drop-shadow(0 2px 2px #00000033)}
.spin07-label{position:absolute;left:50%;top:50%;margin-left:-44px;margin-top:-13px;width:88px;text-align:center;font-size:14px;line-height:1.25;font-weight:800;color:#fff;background:rgba(6,40,26,.88);padding:4px 6px;border-radius:99px;white-space:nowrap}
.spin07-label small{display:block;font-size:10px;font-weight:700;opacity:.9}
.spin07-spin-btn{margin-top:10px}
.spin07-next{margin-top:16px;background:#06281a;color:#fff;border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.spin07-next-label{font-size:12px;font-weight:700;opacity:.75;text-transform:uppercase;letter-spacing:.06em}
.spin07-next b{color:#facc15}
.spin07-win b:last-child{white-space:nowrap}
@media (max-width:400px){.spin07-wheel-wrap .wheel{width:92vw!important;height:92vw!important}.spin07-label{font-size:13px}}
[dir="rtl"] .spin07-pointer{margin-left:-14px}

/* MERGE — shared-chrome reconciliation (merge coordinator only). Logged-out
   home hides header + bottom nav (see home.ejs includes), so the splash
   panel bleeds to the column edges instead of sitting in the 16px main
   gutter; /welcome is unaffected (standalone fragment, no main wrapper).
   No screen team's section was edited. */
main > .splash-screen-01{margin:-16px -16px 14px;border-top-left-radius:0;border-top-right-radius:0}
@media (min-width:768px){main > .splash-screen-01{margin:-24px -24px 14px}}