@font-face{font-family:"IRANSansX";src:url("../fonts/IRANSansX-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;}
    @font-face{font-family:"IRANSansX";src:url("../fonts/IRANSansX-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
    @font-face{font-family:"IRANSansX";src:url("../fonts/IRANSansX-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

    :root{
      --bg:#1b1a24; --text:#ece9f5; --muted:#a298df;
      --accent:#6f52d4; --accent2:#2472ef;
      --ok:#2ee59d;
      --gold: #FFD700;
      --border:rgba(236,233,245,.12);
      --shadow:0 12px 40px rgba(0,0,0,.55);
      --radius:18px;
    }
    *{box-sizing:border-box}
    .grecaptcha-badge{display:none!important}
    body{
      margin:0;
      font-family:"IRANSansX",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial;
      background:
        radial-gradient(1200px 700px at 85% -10%, rgba(36,114,239,.22), transparent 60%),
        radial-gradient(900px 600px at 10% 10%, rgba(111,82,212,.22), transparent 55%),
        radial-gradient(900px 600px at 60% 40%, rgba(61,38,166,.16), transparent 60%),
        var(--bg);
      color:var(--text);
      line-height:1.75;
    }
    a{color:inherit;text-decoration:none}
    .wrap{max-width:980px;margin:0 auto;padding:18px 16px 92px}

    .topbar{
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(11,18,32,.92), rgba(11,18,32,.75));
      box-shadow:var(--shadow);
      position:sticky;top:10px;z-index:10;backdrop-filter: blur(10px);
    }
    .brand{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    .dot{width:12px;height:12px;border-radius:99px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 18px rgba(36,114,239,.25);}
    .brand b{font-size:14px;font-weight:700}
    .pill{
      font-size:12px;color:var(--muted);
      border:1px solid var(--border);padding:7px 10px;border-radius:999px;
      background:rgba(255,255,255,.03);white-space:nowrap;font-weight:400;
    }

    .btn{
      border:1px solid var(--border);
      padding:12px 14px;border-radius:14px;cursor:pointer;
      background:rgba(255,255,255,.04);color:var(--text);
      display:inline-flex;align-items:center;justify-content:center;
      font-weight:700;font-size:14px;
      transition:.18s all ease;
      user-select:none;
      min-height:44px;
    }
    .btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18)}
    .btnPrimary{
      background:linear-gradient(135deg,var(--accent),var(--accent2));
      border-color:transparent;
      box-shadow:0 14px 40px rgba(36,114,239,.12);
    }
    .btnGhost{background:rgba(255,255,255,.03)}
    .btnGold{
      background:linear-gradient(135deg,#FFD700,#FFA500);
      border-color:transparent;color:#1a1200;font-weight:700;
      box-shadow:0 8px 24px rgba(255,215,0,.18);
    }
    .btnGold:hover{box-shadow:0 12px 32px rgba(255,215,0,.28);transform:translateY(-1px)}
    .mini{padding:10px 12px;border-radius:12px;font-size:13px;min-height:40px}

    .topBanner{
      margin-top:12px;border:1px solid var(--border);
      border-radius:calc(var(--radius) + 6px);
      overflow:hidden;background:rgba(255,255,255,.02);box-shadow:var(--shadow);
    }
    .topBanner img{display:block;width:100%;height:auto}

    .hero{
      margin-top:12px;border:1px solid var(--border);
      border-radius:calc(var(--radius) + 6px);
      background:linear-gradient(180deg, rgba(46,40,83,.30), rgba(11,18,32,.75));
      box-shadow:var(--shadow);overflow:hidden;padding:18px;
    }
    .h1{font-size:28px;line-height:1.25;margin:0 0 10px;font-weight:700}
    .sub{margin:0 0 12px;color:var(--muted);font-size:14px;font-weight:300}
    .ctaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

    .countWrap{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
    .countBox{
      border:1px solid rgba(236,233,245,.12);background:rgba(255,255,255,.03);
      border-radius:14px;padding:10px 12px;display:flex;align-items:baseline;gap:10px;min-width:190px;
    }
    .countNum{font-size:22px;font-weight:700;letter-spacing:.5px}
    .countLbl{font-size:12px;color:var(--muted);font-weight:300}
    .countNote{font-size:12px;color:rgba(255,255,255,.92);font-weight:300}

    .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
    @media (max-width:768px){.grid2{grid-template-columns:1fr;gap:10px}}

    .card{
      border:1px solid var(--border);border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(11,18,32,.9), rgba(11,18,32,.72));
      box-shadow:var(--shadow);padding:16px;
    }
    .card h2{margin:0 0 10px;font-size:16px;font-weight:700}
    .muted{color:var(--muted);font-size:13px;font-weight:300}

    .rules{margin:0;padding:0;list-style:none;display:grid;gap:10px}
    .rule{
      padding:12px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.03);display:flex;gap:10px;font-weight:300;
    }
    .tick{
      width:22px;height:22px;border-radius:7px;background:rgba(46,229,157,.15);
      border:1px solid rgba(46,229,157,.30);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:1px;
    }
    .tick::before{content:"✓";color:var(--ok);font-weight:700}

    .badge{
      font-size:12px;padding:6px 10px;border-radius:999px;
      border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
      color:rgba(255,255,255,.92);white-space:nowrap;font-weight:400;
    }
    
    .historySection {
        margin-top: 12px;
        border: 1px solid rgba(255,255,255,0.1);
        background: rgba(255,255,255,0.02);
    }
    .historyTitle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ok); margin-bottom: 8px; }

    .alert{
      padding:12px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
      background:rgba(255,77,109,.10);color:rgba(255,255,255,.95);
      font-size:13px;font-weight:300;
    }
    .ok{background:rgba(46,229,157,.10);border-color:rgba(46,229,157,.25)}
    .info{background:rgba(111,82,212,.12);border-color:rgba(111,82,212,.28)}

    .inputRow{display:flex;gap:10px;flex-wrap:wrap}
    .input, .select{
      flex:1 1 260px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.03);padding:12px 12px;color:var(--text);
      outline:none;font-size:14px;font-weight:300;
      min-height:44px;
    }
    .select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a298df' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: left 12px center; background-size: 16px; padding-left: 36px; }
    .select option { background: var(--bg); color: var(--text); }
    
    .input:focus, .select:focus{border-color:rgba(36,114,239,.45);box-shadow:0 0 0 4px rgba(36,114,239,.10)}
    .help{
      font-size:12px;color:var(--muted);background:rgba(255,255,255,.02);
      border:1px dashed rgba(255,255,255,.14);padding:10px 12px;border-radius:14px;font-weight:300;
    }

    /* Leaderboard List */
    .lbList{display:grid;gap:0;margin-top:14px}
    .lbRow{
      position:relative;
      display:flex;
      align-items:center;
      gap:14px;
      padding:12px 16px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:16px;
      margin-bottom:8px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .lbRow:hover{
      transform:translateY(-1px);
      box-shadow:0 8px 32px rgba(0,0,0,.3);
    }

    /* Rank badge */
    .lbRank{
      width:42px;height:42px;
      border-radius:12px;
      display:flex;align-items:center;justify-content:center;flex-direction:column;
      font-weight:700;font-size:15px;
      background:rgba(36,114,239,.12);
      border:1px solid rgba(36,114,239,.25);
      color:var(--accent2);
      flex-shrink:0;
    }
    .lbRank .medal{font-size:18px;line-height:1}
    .lbRank .rankNum{font-size:10px;opacity:.7;margin-top:1px}

    /* Username + site column */
    .lbNameCol{
      display:flex;flex-direction:column;gap:3px;
      min-width:120px;max-width:180px;
      flex-shrink:0;
    }
    .lbUser{
      font-weight:700;font-size:13px;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .lbSitePill{
      display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;
      border:1px solid rgba(111,82,212,.35);background:rgba(111,82,212,.12);
      font-size:10px;font-weight:600;color:rgba(200,180,255,.95);line-height:1.2;
      width:fit-content;
    }

    /* Middle details - single column */
    .lbMid{
      flex:1;
      display:flex;flex-direction:column;gap:2px;
      align-items:center;
      min-width:0;
    }
    .lbStat{
      font-size:11px;color:var(--muted);font-weight:300;
      display:inline-flex;align-items:center;gap:3px;
      white-space:nowrap;
    }
    .lbStat b{font-weight:600;color:var(--text)}

    /* Search result card */
    .searchResultCard{
      border:1px solid rgba(46,229,157,.30);
      border-radius:16px;
      background:
        radial-gradient(600px 200px at 80% -20%, rgba(46,229,157,.12), transparent 60%),
        linear-gradient(135deg, rgba(46,229,157,.06), rgba(36,114,239,.04));
      padding:16px;
      box-shadow:0 8px 32px rgba(0,0,0,.2);
    }
    .srcHeader{
      display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    }
    .srcRank{
      text-align:center;
      padding:8px 14px;border-radius:12px;
      background:rgba(46,229,157,.12);
      border:1px solid rgba(46,229,157,.30);
      flex-shrink:0;
    }
    .srcRankNum{font-weight:700;font-size:22px;color:var(--ok);line-height:1}
    .srcRankLbl{font-size:10px;color:var(--muted);margin-top:2px}
    .srcUser{display:flex;flex-direction:column;gap:4px;min-width:0}
    .srcStats{
      display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
      margin-top:12px;
    }
    .srcStatItem{
      padding:10px;border-radius:12px;
      background:rgba(0,0,0,.15);
      border:1px solid rgba(255,255,255,.06);
      display:flex;flex-direction:column;gap:2px;
      text-align:center;
    }
    .srcStatLbl{font-size:10px;color:var(--muted);font-weight:300}
    .srcStatVal{font-size:13px;font-weight:700}

    /* Score column */
    .lbScore{
      text-align:center;min-width:80px;
      padding:8px 14px;border-radius:12px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      flex-shrink:0;margin-inline-start:auto;
    }
    .lbScoreNum{font-weight:700;font-size:15px;letter-spacing:.3px}
    .lbScoreLbl{font-size:10px;color:var(--muted);font-weight:300;margin-top:1px}

    /* Top 1-3 styles */
    .lbRow.top1{
      border-color:rgba(255,215,0,.55);
      background:
        radial-gradient(600px 200px at 80% -30%, rgba(255,215,0,.18), transparent 60%),
        radial-gradient(400px 160px at 10% 20%, rgba(255,170,0,.12), transparent 55%),
        linear-gradient(135deg, rgba(255,215,0,.10), rgba(92,67,0,.20));
      box-shadow:0 0 30px rgba(255,215,0,.08);
    }
    .lbRow.top1 .lbRank{
      background:linear-gradient(135deg,#ffe87a,#ffb703);
      color:#281b00;border-color:rgba(255,236,153,.98);
      box-shadow:0 4px 16px rgba(255,215,0,.3);
    }
    .lbRow.top1 .lbScore{
      background:rgba(255,215,0,.12);border-color:rgba(255,215,0,.35);
    }
    .lbRow.top1 .lbScoreNum{color:#ffe87a}

    .lbRow.top2{
      border-color:rgba(192,210,235,.45);
      background:
        linear-gradient(135deg, rgba(192,210,235,.10), rgba(120,140,170,.08));
      box-shadow:0 0 20px rgba(192,210,235,.05);
    }
    .lbRow.top2 .lbRank{
      background:linear-gradient(135deg,#d9e1ef,#9aa8bf);
      color:#1e2530;border-color:rgba(224,234,248,.88);
      box-shadow:0 4px 16px rgba(192,210,235,.2);
    }
    .lbRow.top2 .lbScore{
      background:rgba(192,210,235,.08);border-color:rgba(192,210,235,.25);
    }
    .lbRow.top2 .lbScoreNum{color:#d9e1ef}

    .lbRow.top3{
      border-color:rgba(214,140,89,.45);
      background:
        linear-gradient(135deg, rgba(214,140,89,.10), rgba(160,100,60,.08));
      box-shadow:0 0 20px rgba(214,140,89,.05);
    }
    .lbRow.top3 .lbRank{
      background:linear-gradient(135deg,#d89b72,#a95f3b);
      color:#29150c;border-color:rgba(232,177,143,.88);
      box-shadow:0 4px 16px rgba(214,140,89,.2);
    }
    .lbRow.top3 .lbScore{
      background:rgba(214,140,89,.08);border-color:rgba(214,140,89,.25);
    }
    .lbRow.top3 .lbScoreNum{color:#d89b72}

    /* Search highlight */
    .lbRow.meRow{
      border-color:rgba(46,229,157,.45);
      background:
        linear-gradient(135deg, rgba(46,229,157,.08), rgba(36,114,239,.05));
      box-shadow:0 0 24px rgba(46,229,157,.08);
    }

    /* Leaderboard section as prize-like card */
    #leaderboard.lbPrize{
      position:relative;
      border:1px solid rgba(111,82,212,.28);
      background:
        radial-gradient(900px 350px at 80% -15%, rgba(111,82,212,.18), transparent 60%),
        radial-gradient(600px 280px at 10% 25%, rgba(36,114,239,.12), transparent 55%),
        linear-gradient(180deg, rgba(30,20,60,.85), rgba(11,18,32,.78));
      box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 40px rgba(111,82,212,.06);
    }
    #leaderboard.lbPrize::before{
      content:""; position:absolute; inset:-1px; border-radius: var(--radius); padding:1px;
      background: linear-gradient(135deg, rgba(111,82,212,.50), rgba(36,114,239,.22), rgba(46,229,157,.12));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
    }

    /* ===== RESPONSIVE ===== */

    /* Tablet */
    @media (max-width:860px){
      .wrap{padding:14px 12px 100px}
      .h1{font-size:22px}
      .sub{font-size:13px}
      .countBox{min-width:160px;padding:8px 10px}
      .countNum{font-size:18px}
      .srcStats{grid-template-columns:1fr 1fr}
    }

    /* Mobile */
    @media (max-width:700px){
      .wrap{padding:10px 8px 100px}

      /* Topbar */
      .topbar{
        flex-direction:column;gap:8px;padding:10px 12px;
        position:sticky;top:0;border-radius:0 0 var(--radius) var(--radius);
      }
      .brand{justify-content:center;text-align:center}
      .brand b{font-size:13px}
      .pill{font-size:11px;padding:5px 8px}
      .hideOnMobile{display:none}

      /* Hero */
      .hero{padding:14px 12px}
      .h1{font-size:19px;line-height:1.35}
      .sub{font-size:12px}
      .ctaRow{flex-direction:column;gap:8px}
      .ctaRow .btn{width:100%;text-align:center}

      /* Countdown */
      .countWrap{flex-direction:column;align-items:stretch}
      .countBox{justify-content:center;gap:6px;min-width:0;padding:10px}
      .countNum{font-size:20px}
      .countLbl{font-size:11px}
      .countNote{font-size:11px;text-align:center}

      /* Cards */
      .card{padding:14px 12px;border-radius:14px}
      .card h2{font-size:15px}

      /* Rules */
      .rule{padding:10px;gap:8px;font-size:13px}
      .tick{width:20px;height:20px;border-radius:6px}

      /* Prize card */
      .prizeCard h2{font-size:14px;line-height:1.4}

      /* Signup form */
      .inputRow{flex-direction:column;gap:8px}
      .inputRow > div{flex-direction:column !important}
      .input, .select{flex:1 1 auto;width:100%;font-size:13px;padding:11px 12px}
      .select{padding-left:32px}

      /* Leaderboard rows — grid: row1=[Rank Name Score] row2=[Stats] */
      .lbRow{
        display:grid;
        grid-template-columns:34px 1fr auto;
        grid-template-rows:auto auto;
        gap:4px 10px;
        padding:9px 10px;
        border-radius:12px;margin-bottom:6px;
        align-items:center;
      }
      .lbRank{
        grid-column:1;grid-row:1;
        width:34px;height:34px;border-radius:9px;font-size:13px;
      }
      .lbRank .medal{font-size:14px}
      .lbRank .rankNum{font-size:9px}
      .lbNameCol{
        grid-column:2;grid-row:1;
        min-width:0;max-width:none;overflow:hidden;
      }
      .lbUser{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
      .lbSitePill{font-size:9px;padding:2px 6px}
      .lbScore{
        grid-column:3;grid-row:1;
        padding:5px 8px;min-width:56px;border-radius:9px;margin-inline-start:0;
      }
      .lbScoreNum{font-size:12px}
      .lbScoreLbl{font-size:9px}
      .lbMid{
        grid-column:1 / -1;grid-row:2;
        flex-direction:row;gap:10px;
        align-items:center;justify-content:center;
      }
      .lbStat{font-size:10px}

      /* Search result */
      .searchResultCard{padding:12px}
      .srcHeader{gap:10px}
      .srcRank{padding:6px 10px}
      .srcRankNum{font-size:18px}
      .srcStats{grid-template-columns:1fr 1fr;gap:6px}
      .srcStatItem{padding:8px}
      .srcStatVal{font-size:12px}
      .srcStatLbl{font-size:9px}

      /* FAQ */
      .faqItem{padding:8px 10px}
      .faqItem summary{font-size:13px}
      .faqItem p{font-size:12px}

      /* Sticky CTA */
      .stickyCTA{padding:8px 10px}
      .stickyText{font-size:11px}
      .stickyBtns .btn{font-size:12px;padding:8px 12px;min-height:38px}

      /* History section */
      .historySection{padding:12px 10px}
      .historyTitle{font-size:13px}

      /* Alerts */
      .alert{font-size:12px;padding:10px}
      .help{font-size:11px;padding:8px 10px}
      .badge{font-size:11px;padding:5px 8px}
    }

    /* Very small screens */
    @media (max-width:400px){
      .wrap{padding:8px 6px 96px}
      .h1{font-size:17px}
      .topbar{padding:8px 10px}
      .brand b{font-size:12px}
      .lbRow{padding:7px 8px;gap:3px 8px;grid-template-columns:30px 1fr auto}
      .lbRank{width:30px;height:30px;font-size:11px;border-radius:8px}
      .lbRank .medal{font-size:13px}
      .lbUser{font-size:11px}
      .lbScoreNum{font-size:11px}
      .lbScore{min-width:50px;padding:4px 6px}
      .countNum{font-size:18px}
      .prizeCard .rule{flex-direction:column;align-items:flex-start;gap:6px}
      .srcStats{grid-template-columns:1fr}
    }

    /* Signup Section */
    #signup.signupPurple{
      border-color: rgba(111,82,212,.38);
      background:
        radial-gradient(900px 360px at 90% -10%, rgba(111,82,212,.34), transparent 60%),
        radial-gradient(700px 320px at 10% 30%, rgba(36,114,239,.16), transparent 60%),
        linear-gradient(180deg, rgba(30,20,60,.92), rgba(11,18,32,.72));
      box-shadow: 0 18px 70px rgba(0,0,0,.55), 0 0 40px rgba(111,82,212,.10);
    }
    #signup.signupPurple .badge{ background: rgba(111,82,212,.12); color: rgba(236,233,245,.95); border-color: rgba(111,82,212,.35); }
    #signup.signupPurple .input, #signup.signupPurple .select { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
    #signup.signupPurple .help{ background: rgba(111,82,212,.08); border-color: rgba(111,82,212,.22); color: rgba(236,233,245,.92); }

    /* Prize Card */
    .prizeCard{
      position: relative;
      border: 1px solid rgba(255,215,0,.28);
      background:
        radial-gradient(800px 300px at 80% -20%, rgba(255,215,0,.18), transparent 60%),
        radial-gradient(600px 240px at 10% 20%, rgba(255,170,0,.16), transparent 55%),
        linear-gradient(180deg, rgba(46,40,83,.30), rgba(11,18,32,.78));
      box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 40px rgba(255,215,0,.08);
    }
    .prizeCard::before{
      content:""; position:absolute; inset:-1px; border-radius: var(--radius); padding:1px;
      background: linear-gradient(135deg, rgba(255,215,0,.65), rgba(255,170,0,.22), rgba(36,114,239,.12));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
    }
    .prizeCard .badge{ background: rgba(255,215,0,.10); color: rgba(255,235,180,.95); border-color: rgba(255,215,0,.35); }

    /* FAQ */
    .faqList{display:grid;gap:10px;margin-top:10px}
    details.faqItem{ border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); border-radius:14px; padding:10px 12px; }
    details.faqItem summary{ cursor:pointer; font-weight:700; list-style:none; }
    details.faqItem summary::-webkit-details-marker{display:none}
    details.faqItem p{margin:8px 0 0}

    .stickyCTA{
      position:fixed;left:0;right:0;bottom:0;padding:10px 12px;
      background:rgba(27,26,36,.72);border-top:1px solid rgba(236,233,245,.10);
      backdrop-filter:blur(10px);z-index:20;
    }
    .stickyInner{max-width:980px;margin:0 auto;display:flex;gap:10px;align-items:center;justify-content:space-between;}
    .stickyText{font-size:12px;color:rgba(255,255,255,.90);font-weight:300}
    .stickyBtns{display:flex;gap:10px;flex-wrap:wrap}

    /* =========================================================
       ADDED COMPONENTS (nav, footer, content pages, winners…)
       Built on the same design tokens — does not alter leaderboard.
       ========================================================= */

    /* Primary site navigation inside topbar */
    .navMenu{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
    .navMenu a{
      font-size:13px;font-weight:400;color:var(--muted);
      padding:7px 10px;border-radius:10px;white-space:nowrap;
      border:1px solid transparent;transition:.16s all ease;
    }
    .navMenu a:hover{color:var(--text);background:rgba(255,255,255,.05);border-color:var(--border)}
    .navMenu a.active{color:var(--text);background:rgba(111,82,212,.16);border-color:rgba(111,82,212,.35)}

    /* Mobile nav toggle */
    .navToggle{display:none;background:rgba(255,255,255,.04);border:1px solid var(--border);
      border-radius:12px;min-height:40px;min-width:44px;cursor:pointer;color:var(--text);font-size:18px}

    /* Breadcrumb */
    .crumb{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--muted)}
    .crumb a:hover{color:var(--text)}
    .crumb span{opacity:.5}

    /* Long-form prose for content pages */
    .prose{font-weight:300;color:rgba(236,233,245,.92)}
    .prose h2{font-size:18px;font-weight:700;margin:18px 0 8px;color:var(--text)}
    .prose h3{font-size:15px;font-weight:700;margin:16px 0 6px;color:var(--text)}
    .prose p{margin:0 0 10px}
    .prose ul,.prose ol{margin:0 0 12px;padding-inline-start:22px;display:grid;gap:6px}
    .prose li{font-weight:300}
    .prose a{color:var(--accent2);text-decoration:underline;text-underline-offset:3px}
    .prose strong,.prose b{font-weight:700;color:var(--text)}
    .lead{font-size:15px;color:var(--muted);font-weight:300;margin:0 0 12px}

    /* Numbered how-to steps */
    .steps{display:grid;gap:10px;margin-top:12px;counter-reset:step}
    .step{
      display:flex;gap:12px;align-items:flex-start;
      padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.03);
    }
    .stepNum{
      counter-increment:step;flex:0 0 auto;
      width:34px;height:34px;border-radius:10px;
      display:flex;align-items:center;justify-content:center;font-weight:700;
      background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
    }
    .stepNum::before{content:counter(step)}
    .stepBody h3{margin:2px 0 4px;font-size:14px;font-weight:700}
    .stepBody p{margin:0;font-size:13px;color:var(--muted);font-weight:300}

    /* Video player */
    .videoWrap{
      position:relative;margin-top:12px;border-radius:16px;overflow:hidden;
      border:1px solid var(--border);background:#000;
      box-shadow:var(--shadow);aspect-ratio:16/9;
    }
    .videoWrap video,.videoWrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
    .videoCaption{font-size:12px;color:var(--muted);margin-top:8px;text-align:center;font-weight:300}

    /* Screenshot gallery */
    .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
    @media (max-width:700px){.shots{grid-template-columns:1fr 1fr;gap:8px}}
    .shot{
      border-radius:14px;overflow:hidden;border:1px solid var(--border);
      background:rgba(255,255,255,.03);box-shadow:var(--shadow);
    }
    .shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
    .shot figcaption{font-size:11px;color:var(--muted);padding:8px 10px;font-weight:300;text-align:center}

    /* Winners showcase */
    .winnerGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
    @media (max-width:700px){.winnerGrid{grid-template-columns:1fr}}
    .winnerCard{
      position:relative;border:1px solid rgba(255,215,0,.22);border-radius:16px;padding:14px;
      background:
        radial-gradient(500px 200px at 85% -25%, rgba(255,215,0,.12), transparent 60%),
        linear-gradient(180deg, rgba(46,40,83,.30), rgba(11,18,32,.78));
      box-shadow:var(--shadow);
    }
    .winnerHead{display:flex;align-items:center;gap:12px}
    .winnerAvatar{
      width:48px;height:48px;border-radius:14px;flex:0 0 auto;
      display:flex;align-items:center;justify-content:center;font-size:22px;
      background:linear-gradient(135deg,#ffe87a,#ffb703);color:#281b00;font-weight:700;
    }
    .winnerName{font-weight:700;font-size:15px}
    .winnerMeta{font-size:12px;color:var(--muted);font-weight:300}
    .winnerPrize{
      margin-inline-start:auto;text-align:center;padding:6px 12px;border-radius:12px;
      background:rgba(255,215,0,.12);border:1px solid rgba(255,215,0,.30);
    }
    .winnerPrizeNum{font-weight:700;color:#ffe87a;font-size:14px;white-space:nowrap}
    .winnerPrizeLbl{font-size:10px;color:var(--muted)}
    .winnerQuote{margin:10px 0 0;font-size:13px;color:rgba(236,233,245,.92);font-weight:300;line-height:1.7}
    .winnerCard audio{width:100%;margin-top:10px;border-radius:10px}
    .voiceTag{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ok);margin-top:8px;font-weight:400}

    /* Footer */
    .siteFooter{
      margin-top:18px;border:1px solid var(--border);border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(11,18,32,.9), rgba(11,18,32,.72));
      box-shadow:var(--shadow);padding:18px 16px;
    }
    .footGrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px}
    @media (max-width:700px){.footGrid{grid-template-columns:1fr;gap:14px}}
    .footCol h4{margin:0 0 10px;font-size:13px;font-weight:700;color:var(--text)}
    .footCol a{display:block;font-size:13px;color:var(--muted);padding:4px 0;font-weight:300}
    .footCol a:hover{color:var(--text)}
    .footAbout{font-size:13px;color:var(--muted);font-weight:300;line-height:1.7}
    .footBottom{
      margin-top:16px;padding-top:14px;border-top:1px solid var(--border);
      display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
      font-size:12px;color:var(--muted);font-weight:300;
    }

    /* Contact methods */
    .contactGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
    @media (max-width:700px){.contactGrid{grid-template-columns:1fr}}
    .contactItem{
      display:flex;gap:12px;align-items:center;padding:14px;border-radius:14px;
      border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);
    }
    .contactIcon{font-size:22px;flex:0 0 auto}
    .contactItem b{display:block;font-size:14px}
    .contactItem span{font-size:12px;color:var(--muted);font-weight:300}

    /* Responsive nav: collapse on mobile */
    @media (max-width:860px){
      .navToggle{display:inline-flex;align-items:center;justify-content:center}
      .navMenu{
        display:none;width:100%;flex-direction:column;align-items:stretch;
        margin-top:8px;gap:4px;
      }
      .navMenu.open{display:flex}
      .navMenu a{padding:11px 12px;font-size:14px;text-align:center}
      .topbar{flex-wrap:wrap}
    }