:root{
    --bg:#0a0f1e;
    --surface:#111a33;
    --surface-2:#16203d;
    --border:rgba(255,255,255,0.07);
    --text:#eaf2ff;
    --text-dim:rgba(234,242,255,0.55);
    --neon:#00e5cc;
    --neon-soft:rgba(0,229,204,0.14);
    --magenta:#ff2b6a;
    --magenta-soft:rgba(255,43,106,0.14);
    --gold:#ffc107;
    --radius:20px;
    --sp:18px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
  body{
    font-family:'Vazirmatn', system-ui, -apple-system, sans-serif;
    font-feature-settings:"ss01";
    font-variant-ligatures:common-ligatures;
    letter-spacing:-0.015em;
    line-height:1.6;
    background:var(--bg);
    color:var(--text);
    display:flex;
    justify-content:center;
    min-height:100vh;
  }
  h1,h2,h3{ letter-spacing:-0.03em; line-height:1.35; }
  .app{
    width:100%;
    max-width:430px;
    min-height:100vh;
    position:relative;
    padding-bottom:110px;
    background:
      radial-gradient(600px circle at 90% -5%, rgba(0,229,204,0.10), transparent 45%),
      radial-gradient(500px circle at -10% 30%, rgba(255,43,106,0.08), transparent 40%),
      var(--bg);
  }
  /* subtle noise */
  .app::before{
    content:'';
    position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  }
  .app>*{position:relative;z-index:1;}

  /* ---- header glass capsule ---- */
  header{ padding:18px var(--sp) 0; }
  .brand-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:rgba(255,255,255,0.04);
    backdrop-filter:blur(14px);
    border:1px solid var(--border);
    border-radius:100px;
    padding:8px 12px 8px 8px;
    box-shadow:0 8px 28px rgba(0,0,0,0.35);
  }
  .profile-block{ display:flex; align-items:center; gap:10px; cursor:pointer; }
  .profile-avatar-wrap{ position:relative; width:46px; height:46px; }
  /* level ring */
  .profile-avatar-wrap::before{
    content:''; position:absolute; inset:-3px; border-radius:50%;
    background:conic-gradient(var(--neon) 0 var(--level-progress,0%), rgba(255,255,255,0.10) var(--level-progress,0%) 100%);
    box-shadow:0 0 12px rgba(0,229,204,0.35);
  }
  .profile-avatar{
    position:absolute; inset:0; border-radius:50%;
    background:linear-gradient(135deg,#ff2b6a,#ff7a4a);
    border:2.5px solid var(--bg);
  }
  .profile-avatar.has-photo,.pf-avatar.has-photo{
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
  }
  .online-ring{
    position:absolute; bottom:0; left:0;
    width:13px; height:13px; border-radius:50%;
    background:var(--neon); border:2px solid var(--bg);
    z-index:2;
  }
  .profile-name{ font-weight:800; font-size:14px; letter-spacing:-0.2px; display:flex; align-items:center; gap:6px; }
  .profile-name .lvl{
    font-size:9.5px; font-weight:700;
    background:var(--neon-soft); color:var(--neon);
    padding:2px 7px; border-radius:100px;
  }
  .profile-sub{ font-size:10.5px; color:var(--text-dim); margin-top:1px; }
  .header-actions{ display:flex; align-items:center; gap:6px; }
  .user-chip{
    display:flex; align-items:center; gap:6px;
    background:rgba(0,0,0,0.28);
    border:1px solid rgba(255,193,7,0.25);
    padding:6px 12px;
    border-radius:100px;
  }
  .user-chip .coin{
    font-size:12.5px; font-weight:700; color:var(--gold);
    display:flex; align-items:center; gap:5px;
    font-variant-numeric:tabular-nums;
  }
  .icon-btn-round{
    width:36px; height:36px;
    border-radius:50%;
    background:rgba(0,0,0,0.28);
    border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    position:relative;
  }
  .icon-btn-round .noti-dot{
    position:absolute; top:8px; left:9px;
    width:6px; height:6px; border-radius:50%;
    background:var(--magenta); box-shadow:0 0 6px var(--magenta);
  }

  /* ---- platel card ---- */
  .platel-card{
    margin:14px var(--sp) 0;
    background:linear-gradient(135deg, rgba(0,229,204,0.08), rgba(255,43,106,0.06));
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:16px var(--sp);
    box-shadow:0 10px 30px rgba(0,0,0,0.28);
  }
  .platel-row{ display:flex; align-items:center; justify-content:space-between; }
  .platel-left{ display:flex; align-items:center; gap:12px; }
  .platel-badge{
    width:42px; height:42px;
    border-radius:12px;
    background:var(--neon-soft);
    display:flex; align-items:center; justify-content:center;
  }
  .platel-title{ font-size:13.5px; font-weight:800; letter-spacing:-0.2px; }
  .platel-sub{ font-size:11px; color:var(--text-dim); margin-top:2px; line-height:1.6; }

  .home-progress{margin:12px var(--sp) 0;padding:13px 14px;border:1px solid rgba(33,209,159,.28);border-radius:18px;background:linear-gradient(135deg,rgba(33,209,159,.12),rgba(90,167,255,.1));box-shadow:0 10px 26px rgba(0,0,0,.2)}
  .home-progress[hidden]{display:none}.home-progress-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.home-progress-head b{display:block;font-size:14px}.home-progress-head button{border:0;background:transparent;color:var(--primary);font-size:11px;font-weight:800;min-height:36px}.home-progress-row{display:flex;margin-top:10px}.home-progress-copy{display:grid;gap:3px;width:100%}.home-progress-copy b{font-size:12px}.home-progress-copy span{font-size:11px;color:var(--text-dim)}.home-progress-copy small{font-size:10px;color:var(--text-dim)}.home-progress-track{height:6px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;margin-top:5px}.home-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--mint));transition:width .25s ease}

  .resume-card{
    position:sticky;
    top:10px;
    z-index:12;
    margin:14px var(--sp) 0;
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    background:linear-gradient(135deg,rgba(154,140,255,0.22),rgba(0,229,204,0.12));
    border:1px solid rgba(154,140,255,0.4);
    border-radius:18px;
    padding:12px;
    box-shadow:0 12px 30px rgba(0,0,0,0.32);
  }
  .resume-card[hidden]{display:none;}
  .resume-card b{display:block;font-size:13px;}
  .resume-card span{display:block;font-size:10.5px;color:var(--text-dim);margin-top:2px;}
  .resume-actions{display:flex;gap:6px;flex-shrink:0;}
  .resume-actions button{
    border:0;
    border-radius:12px;
    padding:8px 10px;
    font-family:inherit;
    font-size:11px;
    font-weight:800;
    color:#06211f;
    background:var(--neon);
  }
  .resume-actions .danger{background:rgba(255,43,106,0.18);color:#ffd7e1;border:1px solid rgba(255,43,106,0.35);}

  /* ---- tabs with sliding pill ---- */
  .tabs{
    position:relative;
    display:flex; gap:0;
    margin:16px var(--sp) 0;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:100px;
    padding:4px;
  }
  .tab-pill{
    position:absolute; top:4px; bottom:4px;
    width:calc(50% - 4px);
    border-radius:100px;
    background:linear-gradient(135deg,#00e5cc,#00b3a3);
    box-shadow:0 4px 16px rgba(0,229,204,0.35);
    transition:left .28s cubic-bezier(.4,0,.2,1);
  }
  .tab{
    flex:1; text-align:center; padding:9px 6px;
    border-radius:100px; font-size:13px; font-weight:600;
    color:var(--text-dim);
    cursor:pointer;
    transition:color .2s ease;
    position:relative; z-index:1;
  }
  .tab.active{ color:#04201c; font-weight:800; }

  section.games{ padding:16px var(--sp) 6px; }
  .section-label{ font-size:12.5px; color:var(--text-dim); margin-bottom:10px; }
  .grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

  /* ---- game cards ---- */
  .card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:16px 14px 14px;
    position:relative;
    cursor:pointer;
    transition:transform .15s ease, border-color .2s ease, box-shadow .2s ease;
    overflow:hidden;
  }
  .card:active{ transform:scale(0.97); }
  .card::before{
    content:''; position:absolute; inset:0;
    background:var(--glow);
    opacity:0; transition:opacity .25s ease;
    pointer-events:none;
  }
  .card:hover{ border-color:var(--glow-bd); }
  .card:hover::before{ opacity:1; }
  .card:hover{
    box-shadow:0 12px 32px var(--glow-sh), 0 2px 8px rgba(0,0,0,0.3);
  }
  .card>*{position:relative;z-index:1;}
  .card .icon-wrap{
    width:46px; height:46px;
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:10px;
  }
  .card .icon-wrap svg{ width:24px; height:24px; }
  .league-chess-glyph{font-family:Georgia,serif;font-size:30px;line-height:1;color:#ff2b6a;}
  /* per-game gradients */
  .icon-wrap.c-nard{ background:linear-gradient(135deg,rgba(0,229,204,0.22),rgba(0,229,204,0.06)); }
  .icon-wrap.c-chess{ background:linear-gradient(135deg,rgba(255,43,106,0.22),rgba(255,43,106,0.06)); }
  .icon-wrap.c-dooz{ background:linear-gradient(135deg,rgba(154,140,255,0.22),rgba(154,140,255,0.06)); }
  .icon-wrap.c-monch{ background:linear-gradient(135deg,rgba(255,193,7,0.22),rgba(255,193,7,0.06)); }
  .icon-wrap.c-nogh{ background:linear-gradient(135deg,rgba(0,180,255,0.22),rgba(0,180,255,0.06)); }
  .icon-wrap.c-hokm{ background:linear-gradient(135deg,rgba(255,43,106,0.22),rgba(255,43,106,0.06)); }
  .icon-wrap.c-21{ background:linear-gradient(135deg,rgba(0,229,204,0.22),rgba(0,229,204,0.06)); }
  .icon-wrap.c-11{ background:linear-gradient(135deg,rgba(154,140,255,0.22),rgba(154,140,255,0.06)); }
  .card h3{ font-size:14.5px; font-weight:700; margin-bottom:4px; }
  .card .meta{
    font-size:11px; color:var(--text-dim);
    display:flex; align-items:center; gap:5px;
    font-variant-numeric:tabular-nums;
  }
  .dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--neon); box-shadow:0 0 6px var(--neon);
    animation:pulse 1.8s ease infinite;
  }
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
  .badge-soon{
    position:absolute; top:10px; left:10px;
    background:rgba(255,255,255,0.06);
    border:1px solid var(--border);
    color:var(--text-dim);
    font-size:10px; padding:3px 8px; border-radius:100px;
  }
  .card.disabled{ opacity:0.5; cursor:default; }
  .card.disabled:active{ transform:none; }
  @keyframes shake{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-4px)}
    40%{transform:translateX(4px)}
    60%{transform:translateX(-3px)}
    80%{transform:translateX(3px)}
  }
  .card.shake{ animation:shake .3s ease; }

  /* skeleton */
  .card.skel .skel-bone{
    background:linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 75%);
    background-size:200% 100%;
    animation:shimmer 1.1s infinite;
    border-radius:8px;
  }
  @keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

  /* ---- sheet ---- */
  .overlay{
    position:fixed; inset:0;
    background:rgba(4,6,14,0.65);
    backdrop-filter:blur(3px);
    display:none;
    align-items:flex-end;
    z-index:20;
  }
  .overlay.open{ display:flex; }
  .sheet{
    width:100%;
    max-width:430px;
    max-height:calc(100dvh - env(safe-area-inset-top) - 8px);
    overflow-y:auto;
    overscroll-behavior:contain;
    background:var(--surface);
    border-top:1px solid var(--border);
    border-radius:24px 24px 0 0;
    padding:16px var(--sp) calc(26px + env(safe-area-inset-bottom));
    animation:slideup .22s ease;
  }
  @keyframes slideup{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }
  .sheet-handle{ width:38px; height:4px; background:rgba(255,255,255,0.14); border-radius:10px; margin:0 auto 14px; }
  .sheet-title{ font-size:16px; font-weight:800; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
  .modes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .mode-availability{grid-column:1/-1;margin:0;padding:10px 12px;border:1px solid rgba(224,190,112,.28);border-radius:12px;background:rgba(224,190,112,.08);color:var(--text-dim);font-size:12px;}
  .mode-btn{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:16px;
    padding:14px 10px;
    text-align:right;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .mode-btn:hover{ border-color:var(--neon); background:#1a2547; }
  .mode-btn svg{ width:20px; height:20px; margin-bottom:8px; }
  .mode-btn .t{ font-size:13px; font-weight:700; margin-bottom:2px; }
  .mode-btn .d{ font-size:11px; color:var(--text-dim); }
  .count-options,.difficulty-options{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .difficulty-options{grid-template-columns:1fr;}
  .difficulty-btn{min-height:64px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:12px;text-align:right;color:var(--text);cursor:pointer;}
  .difficulty-btn:hover{border-color:var(--neon);background:#1a2547;}
  .difficulty-btn b{display:block;font-size:14px;margin-bottom:3px;}.difficulty-btn span{font-size:11px;color:var(--text-dim);}
  .count-btn{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:16px;
    padding:16px 10px;
    text-align:center;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .count-btn:hover{ border-color:var(--neon); background:#1a2547; }
  .count-btn svg{ margin-bottom:8px; }
  .count-btn .t{ font-size:13.5px; font-weight:700; margin-bottom:2px; }
  .count-btn .d{ font-size:11px; color:var(--text-dim); }
  .back-link{
    text-align:center; margin-top:14px; font-size:12px;
    color:var(--text-dim); text-decoration:underline dotted; cursor:pointer;
  }

  /* ---- floating nav ---- */
  nav.bottom{
    position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
    width:calc(100% - 32px); max-width:398px;
    background:rgba(17,26,51,0.88);
    backdrop-filter:blur(14px);
    border:1px solid var(--border);
    border-radius:24px;
    display:flex;
    padding:8px 10px;
    box-shadow:0 14px 40px rgba(0,0,0,0.5);
    z-index:15;
  }
  .nav-item{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    color:var(--text-dim); font-size:10px; cursor:pointer;
    padding:6px 4px; border-radius:16px;
    transition:background .2s ease, color .2s ease;
  }
  .nav-item svg{ width:21px; height:21px; }
  .nav-item.active{
    color:var(--neon);
    background:var(--neon-soft);
    box-shadow:inset 0 0 0 1px rgba(0,229,204,0.25);
  }
  .toast{
    position:fixed; bottom:96px; left:50%;
    transform:translateX(-50%) translateY(20px);
    background:var(--surface-2);
    border:1px solid var(--border);
    color:var(--text);
    padding:9px 18px; border-radius:100px; font-size:12.5px;
    opacity:0; transition:all .25s ease; pointer-events:none; white-space:nowrap; z-index:30;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ---- intro splash ---- */
  .intro{
    position:fixed; inset:0; z-index:100;
    background:radial-gradient(700px circle at 50% 28%, rgba(0,229,204,0.14), transparent 55%), #070b16;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    overflow:hidden;
    transition:opacity .5s ease, visibility .5s;
  }
  .intro.done{ opacity:0; visibility:hidden; pointer-events:none; }
  .intro-sheen{
    position:absolute; inset:0;
    background:linear-gradient(110deg,transparent 40%,rgba(0,229,204,0.12) 50%,transparent 60%);
    transform:translateX(-120%);
  }
  .intro.go .intro-sheen{ animation:sheen 1.3s .35s ease forwards; }
  @keyframes sheen{ to{ transform:translateX(120%);} }
  .intro-pip{
    position:absolute; border-radius:50%; opacity:.45; filter:blur(0.5px);
    animation:floaty 3.2s ease-in-out infinite;
  }
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
  .intro-pip.p1{ width:14px; height:14px; background:var(--neon); top:22%; right:20%; box-shadow:0 0 14px var(--neon); }
  .intro-pip.p2{ width:9px; height:9px; background:var(--magenta); top:30%; left:24%; box-shadow:0 0 12px var(--magenta); animation-delay:.5s; }
  .intro-pip.p3{ width:11px; height:11px; background:#9a8cff; bottom:26%; right:28%; box-shadow:0 0 12px #9a8cff; animation-delay:1s; }
  .intro-pip.p4{ width:7px; height:7px; background:var(--gold); bottom:32%; left:18%; box-shadow:0 0 10px var(--gold); animation-delay:1.5s; }
  .intro-logo{ font-size:42px; font-weight:900; letter-spacing:normal; opacity:0; transform:translateY(14px) scale(.96); }
  .intro.go .intro-logo{ animation:introIn .65s cubic-bezier(.2,.8,.2,1) forwards; }
  @keyframes introIn{ to{ opacity:1; transform:none; } }
  .intro-logo .n1{ color:var(--neon); text-shadow:0 0 26px rgba(0,229,204,.55); }
  .intro-logo .n2{ color:var(--magenta); text-shadow:0 0 26px rgba(255,43,106,.55); }
  .intro-tag{ font-size:12.5px; color:var(--text-dim); opacity:0; }
  .intro.go .intro-tag{ animation:introIn .6s .3s ease forwards; }
  .intro-bar{ width:130px; height:3px; border-radius:100px; background:rgba(255,255,255,0.08); overflow:hidden; opacity:0; }
  .intro.go .intro-bar{ opacity:1; transition:opacity .3s .5s; }
  .intro-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--neon),var(--magenta)); border-radius:100px; }
  .intro.go .intro-bar i{ animation:loadbar 1.45s .35s ease forwards; }
  @keyframes loadbar{ to{ width:100%; } }
  .intro-skip{
    position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
    font-size:11.5px; color:var(--text-dim);
    border:1px solid var(--border); background:rgba(255,255,255,0.03);
    padding:7px 18px; border-radius:100px; cursor:pointer;
  }
  .intro{
    background:
      radial-gradient(circle at 50% 44%,rgba(56,248,223,.18),transparent 18%),
      radial-gradient(circle at 14% 18%,rgba(139,124,255,.24),transparent 30%),
      radial-gradient(circle at 88% 80%,rgba(255,79,139,.2),transparent 30%),
      #070b18;
  }
  .intro::before{
    content:'';position:absolute;inset:0;opacity:.3;
    background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
    background-size:28px 28px;mask-image:radial-gradient(circle at center,#000,transparent 74%);
  }
  .intro-orbit{position:absolute;border:1px solid rgba(84,231,255,.2);border-radius:50%;pointer-events:none;}
  .orbit-a{width:290px;height:290px;animation:orbitSpin 5s linear infinite;}
  .orbit-b{width:420px;height:420px;border-color:rgba(255,79,139,.14);animation:orbitSpin 8s linear reverse infinite;}
  @keyframes orbitSpin{to{transform:rotate(360deg)}}
  .intro-mark{position:relative;width:72px;height:72px;border-radius:22px;display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:12px;background:linear-gradient(135deg,rgba(56,248,223,.24),rgba(139,124,255,.28));border:1px solid rgba(255,255,255,.3);box-shadow:0 0 0 8px rgba(56,248,223,.05),0 22px 55px rgba(0,0,0,.35);animation:markIn .55s cubic-bezier(.2,.9,.2,1) both;}
  .intro-mark i{border-radius:5px;background:linear-gradient(135deg,#f4ffff,var(--neon));box-shadow:0 0 16px rgba(56,248,223,.65);}
  .intro-mark i:nth-child(2),.intro-mark i:nth-child(3){background:linear-gradient(135deg,#ffd7e5,var(--magenta));box-shadow:0 0 16px rgba(255,79,139,.55);}
  @keyframes markIn{from{opacity:0;transform:scale(.45) rotate(-18deg)}to{opacity:1;transform:scale(1) rotate(0)}}
  .intro-logo{font-size:48px;line-height:1.6;padding:.1em .15em;font-weight:900;letter-spacing:normal;background:linear-gradient(135deg,#f4ffff 25%,var(--neon) 58%,#8b7cff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;animation:introIn .55s .23s cubic-bezier(.2,.8,.2,1) forwards!important;}
  .intro-tag{font-size:13px;font-weight:650;color:rgba(238,246,255,.76);animation:introIn .5s .52s ease forwards!important;}
  .intro-bar{width:170px;height:4px;margin-top:2px;background:rgba(255,255,255,.1);animation:introIn .4s .7s ease forwards;}
  .intro-bar i{background:linear-gradient(90deg,var(--neon),#8b7cff,var(--magenta));animation:loadbar 2.15s .75s linear forwards!important;}
  .intro-skip{bottom:28px;border-color:rgba(255,255,255,.16);background:rgba(8,13,29,.6);backdrop-filter:blur(10px);}
  @media (prefers-reduced-motion: reduce){
    .intro-pip,.intro-orbit,.intro-sheen{animation:none!important;}
    .intro-logo,.intro-tag,.intro-bar{opacity:1;transform:none;animation:none!important;}
    .intro-bar i{width:100%;animation:none!important;}
  }

  /* ---- profile view ---- */
  #viewProfile{ padding:18px var(--sp) 6px; }
  .pf-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; }
  .pf-head > div:nth-child(2){ flex:1; min-width:0; }
  .pf-avatar-wrap{ position:relative; width:74px; height:74px; flex:none; }
  .pf-avatar-wrap::before{
    content:''; position:absolute; inset:-4px; border-radius:50%;
    background:conic-gradient(var(--neon) 0 var(--level-progress,0%), rgba(255,255,255,0.10) var(--level-progress,0%) 100%);
    box-shadow:0 0 18px rgba(0,229,204,0.35);
  }
  .pf-avatar{ position:absolute; inset:0; border-radius:50%; background:linear-gradient(135deg,#ff2b6a,#ff7a4a); border:3px solid var(--bg); }
  .pf-lvl-badge{
    position:absolute; bottom:-5px; left:50%; transform:translateX(-50%);
    font-size:9px; font-weight:800; background:var(--bg);
    border:1px solid var(--border); color:var(--neon);
    padding:1px 8px; border-radius:100px; z-index:2; white-space:nowrap;
  }
  .pf-name{ font-size:16.5px; font-weight:800; }
  .pf-sub{ font-size:11px; color:var(--text-dim); margin-top:1px; }
  .pf-xp{ display:flex; align-items:center; gap:8px; margin-top:8px; }
  .pf-xp-bar{ width:112px; height:6px; border-radius:100px; background:rgba(255,255,255,0.07); overflow:hidden; }
  .pf-xp-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--neon),#00b3a3); border-radius:100px; }
  .pf-xp-txt{ font-size:10px; color:var(--text-dim); font-variant-numeric:tabular-nums; }
  .pf-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:12px 0 0; }
  .pf-stat{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:12px 6px; text-align:center; }
  .pf-stat .v{ font-size:16.5px; font-weight:800; font-variant-numeric:tabular-nums; }
  .pf-stat .l{ font-size:10px; color:var(--text-dim); margin-top:2px; }
  .pf-section{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px var(--sp); margin-bottom:14px; }
  .pf-section h4{ font-size:13px; font-weight:800; margin-bottom:12px; }
  .pg-row{ display:flex; align-items:center; gap:10px; }
  .pg-row + .pg-row{ margin-top:11px; }
  .pg-row .name{ font-size:11.5px; width:72px; flex:none; }
  .pg-bar{ flex:1; height:8px; background:rgba(255,255,255,0.06); border-radius:100px; overflow:hidden; }
  .pg-bar i{ display:block; height:100%; width:0; border-radius:100px; background:linear-gradient(90deg,var(--neon),var(--magenta)); transition:width .9s cubic-bezier(.3,.8,.3,1); }
  .pg-pct{ font-size:11px; font-weight:700; width:32px; text-align:left; color:var(--neon); font-variant-numeric:tabular-nums; }
  .pg-count{ font-size:10px; color:var(--text-dim); width:50px; text-align:center; font-variant-numeric:tabular-nums; }
  .badges{ display:flex; gap:8px; flex-wrap:wrap; }
  .badge-chip{ background:var(--surface-2); border:1px solid var(--border); border-radius:100px; padding:6px 12px; font-size:11px; font-weight:600; }
  .history-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 0; border-bottom:1px dashed rgba(255,255,255,0.07); font-size:12px; }
  .history-row:last-child{ border-bottom:none; padding-bottom:2px; }
  .h-meta{ display:block; font-size:10px; color:var(--text-dim); margin-top:1px; }
  .h-res{ font-weight:800; font-size:10.5px; padding:3px 9px; border-radius:100px; white-space:nowrap; }
  .h-win{ color:var(--neon); background:var(--neon-soft); }
  .h-loss{ color:var(--magenta); background:var(--magenta-soft); }
  .online-history-row{align-items:flex-start;}
  .online-history-row .h-meta{white-space:nowrap;}

  /* ---- premium visual refresh ---- */
  :root{
    --bg:#070b18;
    --surface:rgba(18,27,52,0.82);
    --surface-2:rgba(25,38,72,0.9);
    --border:rgba(151,171,230,0.16);
    --text:#f2f7ff;
    --text-dim:rgba(224,234,255,0.66);
    --neon:#38f8df;
    --neon-soft:rgba(56,248,223,0.16);
    --magenta:#ff4f8b;
    --magenta-soft:rgba(255,79,139,0.16);
    --gold:#ffd166;
    --violet:#8b7cff;
  }
  body{
    background:
      radial-gradient(900px circle at 50% -20%,rgba(56,248,223,.16),transparent 52%),
      radial-gradient(700px circle at -20% 35%,rgba(255,79,139,.12),transparent 46%),
      linear-gradient(180deg,#070b18 0%,#0c1225 48%,#070b18 100%);
  }
  .app{
    background:
      linear-gradient(180deg,rgba(255,255,255,.045),transparent 170px),
      radial-gradient(560px circle at 88% 4%,rgba(56,248,223,.14),transparent 42%),
      radial-gradient(520px circle at 10% 38%,rgba(139,124,255,.13),transparent 44%),
      var(--bg);
  }
  .brand-row,.platel-card,.tabs,.card,.pf-section,.pf-stat,.sheet,nav.bottom{
    box-shadow:0 20px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .brand-row{
    background:linear-gradient(135deg,rgba(255,255,255,.115),rgba(255,255,255,.035));
    border-color:rgba(255,255,255,.14);
  }
  .profile-avatar,.pf-avatar{
    background:linear-gradient(135deg,#ff4f8b 0%,#ff9b54 48%,#38f8df 100%);
  }
  .user-chip{
    background:linear-gradient(135deg,rgba(255,209,102,.14),rgba(255,255,255,.035));
    border-color:rgba(255,209,102,.35);
  }
  .platel-card{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,rgba(56,248,223,.16),rgba(139,124,255,.12) 52%,rgba(255,79,139,.12));
    border-color:rgba(255,255,255,.15);
  }
  .platel-card::after{
    content:'';
    position:absolute; inset:auto -30px -70px auto;
    width:170px; height:170px; border-radius:50%;
    background:radial-gradient(circle,rgba(56,248,223,.18),transparent 68%);
  }
  .platel-title{font-size:15px;}
  .platel-sub a,.platel-card a{color:var(--neon);text-decoration:none;font-weight:800;}
  .tabs{background:rgba(8,13,29,.72);border-color:rgba(255,255,255,.13);}
  .tab-pill{background:linear-gradient(135deg,var(--neon),#68e1ff);box-shadow:0 10px 26px rgba(56,248,223,.32);}
  .card{
    min-height:132px;
    background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025));
    border-color:rgba(255,255,255,.12);
  }
  .card::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(145deg,rgba(255,255,255,.12),transparent 34%);
    opacity:.55; pointer-events:none;
  }
  .card:hover{transform:translateY(-3px);}
  .card .icon-wrap{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 26px rgba(0,0,0,.22);}
  .card h3{font-size:15.5px;font-weight:850;}
  .card .meta::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon);}
  .sheet{
    background:linear-gradient(180deg,rgba(28,40,75,.98),rgba(12,18,38,.98));
    border-color:rgba(255,255,255,.16);
  }
  .mode-btn,.count-btn,.difficulty-btn,.badge-chip{
    background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
    border-color:rgba(255,255,255,.12);
  }
  .mode-btn:hover,.count-btn:hover,.difficulty-btn:hover{
    border-color:rgba(56,248,223,.58);
    background:linear-gradient(180deg,rgba(56,248,223,.13),rgba(255,255,255,.03));
  }
  nav.bottom{
    bottom:14px;
    background:linear-gradient(180deg,rgba(17,26,51,.86),rgba(9,14,30,.94));
    border-color:rgba(255,255,255,.18);
    border-radius:28px;
    padding:9px 10px;
  }
  nav.bottom::before{
    content:'';
    position:absolute; inset:-1px;
    border-radius:inherit;
    background:linear-gradient(135deg,rgba(56,248,223,.24),rgba(255,79,139,.18),rgba(255,209,102,.14));
    z-index:-1; opacity:.55; filter:blur(8px);
  }
  .nav-item{font-weight:750;letter-spacing:-.02em;}
  .nav-item svg{transition:transform .2s ease;}
  .nav-item.active{
    color:#061416;
    background:linear-gradient(135deg,var(--neon),#68e1ff);
    box-shadow:0 12px 24px rgba(56,248,223,.25),inset 0 1px 0 rgba(255,255,255,.34);
  }
  .nav-item.active svg{transform:translateY(-1px) scale(1.04);}

  /* optimized bottom navigation */
  nav.bottom{isolation:isolate;gap:4px;padding:8px 7px max(8px,env(safe-area-inset-bottom));}
  .nav-item{min-width:0;min-height:54px;justify-content:center;gap:4px;padding:7px 3px;color:rgba(226,220,247,.7);font-size:10px;line-height:1.25;white-space:nowrap;}
  .nav-item svg{width:20px;height:20px;flex:none;}
  .nav-item.active{position:relative;}
  .nav-item.active::after{content:'';position:absolute;top:4px;right:50%;width:4px;height:4px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;transform:translateX(50%);}
  .nav-item:focus-visible{outline:2px solid var(--neon)!important;outline-offset:-2px;}
  @media(max-width:370px){
    nav.bottom{width:calc(100% - 20px);padding-inline:4px;}
    .nav-item{font-size:9px;}
    .nav-item svg{width:19px;height:19px;}
  }

  /* ---- profile view ---- */
  .pf-head{padding:16px;
    background:linear-gradient(135deg,rgba(56,248,223,.12),rgba(139,124,255,.1));
    border:1px solid rgba(255,255,255,.12);
    border-radius:24px;
    box-shadow:0 18px 42px rgba(0,0,0,.26);
  }
  .pf-section,.pf-stat{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border-color:rgba(255,255,255,.12);}
  .board-size-options{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
  .board-size-btn{min-height:82px;padding:10px 6px;color:var(--text);text-align:center;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));}
  .board-size-btn b,.board-size-btn span{display:block;}
  .board-size-btn b{font-size:13px;margin-bottom:4px;}
  .board-size-btn span{font-size:11px;color:var(--text-dim);}
  .board-size-btn.featured{border-color:rgba(56,248,223,.5);box-shadow:inset 0 0 0 1px rgba(56,248,223,.12),0 8px 22px rgba(56,248,223,.1);}
  .board-size-btn:hover{background:linear-gradient(180deg,rgba(56,248,223,.16),rgba(255,255,255,.03));border-color:var(--neon);}

  /* ---- electric arena theme ---- */
  :root{--bg:#090812;--surface:#151329;--surface-2:#1d1938;--border:rgba(191,180,255,.17);--text:#f7f4ff;--text-dim:rgba(226,220,247,.65);--neon:#b7ff3c;--neon-soft:rgba(183,255,60,.13);--magenta:#ff754c;--magenta-soft:rgba(255,117,76,.14);--gold:#ffd76a;--violet:#8b5cf6;}
  body{background:radial-gradient(850px circle at 70% -20%,rgba(139,92,246,.26),transparent 52%),radial-gradient(650px circle at -20% 70%,rgba(183,255,60,.08),transparent 48%),#090812;}
  .app{background:radial-gradient(550px circle at 88% 6%,rgba(139,92,246,.2),transparent 45%),linear-gradient(180deg,rgba(255,255,255,.025),transparent 180px),var(--bg);}
  .brand-row{border-radius:20px;background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(255,255,255,.045));border-color:rgba(184,160,255,.25);box-shadow:0 16px 44px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.08);}
  .profile-avatar,.pf-avatar{background:linear-gradient(145deg,#8b5cf6,#ff754c);}
  .profile-avatar-wrap::before,.pf-avatar-wrap::before{background:conic-gradient(var(--neon) 0 var(--level-progress,0%),rgba(255,255,255,.1) var(--level-progress,0%) 100%);box-shadow:0 0 18px rgba(183,255,60,.28);}
  .platel-card{background:linear-gradient(125deg,rgba(139,92,246,.25),rgba(24,20,48,.94) 62%,rgba(183,255,60,.1));border-color:rgba(185,163,255,.27);}
  .platel-badge{background:rgba(183,255,60,.1);box-shadow:inset 0 0 0 1px rgba(183,255,60,.2);}
  .tabs{background:#111020;border-color:rgba(189,177,255,.16);}
  .tab-pill{background:linear-gradient(135deg,#9d74ff,#7041e8);box-shadow:0 10px 28px rgba(139,92,246,.4);}
  .tab.active{color:#fff;}
  .card{background:linear-gradient(155deg,rgba(139,92,246,.12),rgba(21,19,41,.96) 55%);border-color:rgba(191,180,255,.16);box-shadow:0 16px 34px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.06);}
  .card:hover{border-color:rgba(183,255,60,.42);box-shadow:0 18px 38px rgba(0,0,0,.35),0 0 24px rgba(139,92,246,.16);}
  .card .meta::before{background:var(--neon);box-shadow:0 0 10px rgba(183,255,60,.75);}
  .sheet{background:linear-gradient(180deg,#211b42,#0e0c1b);border-color:rgba(191,180,255,.24);}
  nav.bottom{background:rgba(15,13,28,.94);border-color:rgba(190,178,255,.24);border-radius:22px;box-shadow:0 22px 55px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.07);}
  nav.bottom::before{background:linear-gradient(100deg,rgba(139,92,246,.38),rgba(183,255,60,.18));filter:blur(12px);}
  .nav-item.active{color:#110d22;background:linear-gradient(135deg,var(--neon),#e4ff9a);box-shadow:0 10px 24px rgba(183,255,60,.25);}
  .pf-head{background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(22,19,43,.96));border-color:rgba(190,170,255,.27);}
  .pf-rank-line{display:flex;align-items:center;gap:7px;margin-top:7px;}
  .pf-rank-line span{padding:3px 9px;border-radius:100px;background:var(--neon);color:#10131a;font-size:10px;font-weight:900;}
  .pf-rank-line b{font-size:11px;color:#d9ceff;}
  .pf-stats{grid-template-columns:repeat(2,1fr);}
  .pf-stat{background:linear-gradient(150deg,rgba(139,92,246,.12),rgba(255,255,255,.025));border-color:rgba(191,180,255,.15);}
  .pf-stat.accent{border-color:rgba(183,255,60,.3);box-shadow:inset 0 0 24px rgba(183,255,60,.04);}
  .pf-xp-bar i,.pg-bar i{background:linear-gradient(90deg,#8b5cf6,var(--neon));}
  .difficulty-btn:hover,.mode-btn:hover,.count-btn:hover,.board-size-btn:hover{border-color:rgba(183,255,60,.55);background:rgba(183,255,60,.07);}

  /* کلاسیک لوکس */
  :root{--bg:#11151d;--surface:#1b2029;--surface-2:#252b35;--border:rgba(224,190,112,.2);--text:#f5eddb;--text-dim:rgba(235,223,194,.68);--neon:#c6a15b;--neon-soft:rgba(198,161,91,.16);--magenta:#9b5b45;--magenta-soft:rgba(155,91,69,.16);--gold:#e0be70;--violet:#53655b;}
  body{background:radial-gradient(800px circle at 78% -18%,rgba(198,161,91,.13),transparent 52%),radial-gradient(600px circle at -12% 70%,rgba(83,101,91,.13),transparent 48%),#11151d;color:var(--text);}
  .app{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 170px),radial-gradient(580px circle at 90% 0,rgba(198,161,91,.1),transparent 46%),var(--bg);}
  .brand-row,.platel-card,.tabs,.card,.pf-section,.pf-stat,.sheet,nav.bottom{box-shadow:0 18px 44px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,244,210,.06);}
  .brand-row{background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.018));border-color:rgba(224,190,112,.25);}
  .profile-avatar,.pf-avatar{background:linear-gradient(145deg,#c6a15b,#795d39);}
  .profile-avatar-wrap::before,.pf-avatar-wrap::before{background:conic-gradient(var(--neon) 0 var(--level-progress,0%),rgba(255,255,255,.1) var(--level-progress,0%) 100%);box-shadow:0 0 15px rgba(198,161,91,.25);}
  .user-chip{background:linear-gradient(135deg,rgba(224,190,112,.13),rgba(255,255,255,.025));border-color:rgba(224,190,112,.34);}
  .platel-card{background:linear-gradient(125deg,rgba(198,161,91,.16),rgba(27,32,41,.96) 62%,rgba(83,101,91,.14));border-color:rgba(224,190,112,.28);}
  .platel-badge{background:rgba(198,161,91,.14);box-shadow:inset 0 0 0 1px rgba(224,190,112,.25);}
  .tabs{background:#171c24;border-color:rgba(224,190,112,.2);}
  .tab-pill{background:linear-gradient(135deg,#c6a15b,#9b773e);box-shadow:0 10px 26px rgba(198,161,91,.25);}
  .tab.active{color:#17130c;}
  .card{background:linear-gradient(155deg,rgba(198,161,91,.1),rgba(27,32,41,.97) 55%);border-color:rgba(224,190,112,.18);}
  .card:hover{border-color:rgba(224,190,112,.52);box-shadow:0 18px 38px rgba(0,0,0,.36),0 0 22px rgba(198,161,91,.1);}
  .card .meta::before{background:var(--neon);box-shadow:0 0 8px rgba(198,161,91,.65);}
  .sheet{background:linear-gradient(180deg,#2a2d32,#14181f);border-color:rgba(224,190,112,.28);}
  .mode-btn,.count-btn,.difficulty-btn,.pf-btn,.badge-chip{background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.018));border-color:rgba(224,190,112,.18);}
  .mode-btn:hover,.count-btn:hover,.difficulty-btn:hover,.board-size-btn:hover{border-color:rgba(224,190,112,.58);background:linear-gradient(180deg,rgba(198,161,91,.14),rgba(255,255,255,.025));}
  nav.bottom{background:linear-gradient(180deg,rgba(31,35,41,.94),rgba(15,19,25,.98));border-color:rgba(224,190,112,.28);border-radius:22px;}
  nav.bottom::before{background:linear-gradient(100deg,rgba(198,161,91,.3),rgba(83,101,91,.2));filter:blur(12px);}
  .nav-item.active{color:#1d170d;background:linear-gradient(135deg,#e0be70,#b28a4d);box-shadow:0 10px 24px rgba(198,161,91,.22);}
  .nav-item:focus-visible{outline-color:#e0be70!important;}
  .pf-head{background:linear-gradient(135deg,rgba(198,161,91,.16),rgba(27,32,41,.96));border-color:rgba(224,190,112,.28);}
  .pf-xp-bar i,.pg-bar i{background:linear-gradient(90deg,#9b773e,#e0be70);}
  .pf-rank-line span{background:#c6a15b;color:#17130c;}
  .difficulty-btn:hover,.mode-btn:hover,.count-btn:hover,.board-size-btn:hover{border-color:rgba(224,190,112,.58);background:rgba(198,161,91,.1);}
  .intro{background:radial-gradient(circle at 50% 42%,rgba(198,161,91,.16),transparent 20%),radial-gradient(circle at 14% 18%,rgba(83,101,91,.2),transparent 32%),#0c1016;}

  /* ---- profile progression ---- */
  .pf-title-card{display:flex;align-items:center;gap:11px;margin:-4px 0 14px;padding:12px 14px;border:1px solid rgba(224,190,112,.3);border-radius:18px;background:linear-gradient(110deg,rgba(198,161,91,.18),rgba(83,101,91,.14));}
  .title-emblem,.mission-icon,.badge-icon{display:grid;place-items:center;flex:none;color:var(--gold);}
  .title-emblem{width:37px;height:37px;border-radius:12px;background:rgba(224,190,112,.14);}
  .title-emblem svg{width:21px;height:21px;}
  .pf-title-card>div{display:grid;gap:1px;min-width:0;}
  .pf-title-card span,.pf-eyebrow{font-size:10px;color:var(--text-dim);font-weight:650;}
  .pf-title-card b{font-size:14px;color:#fff4d5;}
  .pf-title-card small{margin-right:auto;color:var(--text-dim);font-size:10px;white-space:nowrap;}
  .pf-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
  .pf-section-heading h4{margin:2px 0 0;}
  .mission-count{padding:3px 8px;border-radius:999px;background:rgba(224,190,112,.12);color:var(--gold);font-size:10px;font-weight:800;white-space:nowrap;}
  .mission-list{display:grid;gap:10px;}
  .mission-row{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid rgba(224,190,112,.14);border-radius:14px;background:rgba(0,0,0,.12);}
  .mission-row.complete{border-color:rgba(198,161,91,.45);background:linear-gradient(100deg,rgba(198,161,91,.14),rgba(83,101,91,.08));}
  .mission-icon{width:31px;height:31px;border-radius:10px;background:rgba(198,161,91,.13);}
  .mission-icon svg{width:17px;height:17px;}
  .mission-body{min-width:0;flex:1;display:grid;gap:4px;}
  .mission-top,.mission-meta{display:flex;justify-content:space-between;gap:8px;align-items:center;}
  .mission-top b{font-size:12px;}.mission-body>span{font-size:10px;color:var(--text-dim);}
  .mission-done{padding:2px 7px;border-radius:999px;background:rgba(198,161,91,.18);color:#fff0c6;font-size:9px;font-weight:800;white-space:nowrap;}
  .mission-progress,.badge-progress{height:5px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.09);}
  .mission-progress i,.badge-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9b773e,#e0be70);}
  .mission-meta{font-size:9px;color:var(--text-dim);}.mission-reward{color:var(--gold);font-weight:700;}
  .permanent-missions{padding:0;overflow:hidden;}.permanent-missions summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--sp);cursor:pointer;list-style:none;}.permanent-missions summary::-webkit-details-marker{display:none;}.permanent-missions summary b{display:block;margin-top:2px;font-size:13px;}.summary-hint{font-size:10px;color:var(--gold);}.permanent-missions[open] summary{border-bottom:1px solid var(--border);}.permanent-missions .mission-list{padding:12px var(--sp) 14px;}
  .pg-row .name small{display:block;margin-top:2px;color:var(--gold);font-size:8.5px;white-space:nowrap;}
  .badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}.badge-card{display:flex;gap:8px;min-width:0;padding:10px;border:1px solid rgba(224,190,112,.2);border-radius:15px;background:rgba(0,0,0,.12);}.badge-card.locked{filter:saturate(.3);opacity:.68;}.badge-card.unlocked{border-color:rgba(224,190,112,.48);background:linear-gradient(145deg,rgba(198,161,91,.16),rgba(83,101,91,.12));}.badge-icon{width:30px;height:30px;border-radius:10px;background:rgba(224,190,112,.14);}.badge-icon svg{width:17px;height:17px;}.badge-copy{min-width:0;flex:1;}.badge-copy>div{display:flex;gap:4px;align-items:center;justify-content:space-between;}.badge-copy b{font-size:10px;line-height:1.3;}.badge-tier{font-size:8px;color:var(--gold);}.badge-copy p{min-height:26px;margin:3px 0 5px;font-size:8.5px;line-height:1.5;color:var(--text-dim);}.badge-copy small{display:block;margin-top:4px;font-size:8px;color:var(--text-dim);}
  @media(max-width:370px){.badges{grid-template-columns:1fr;}.pf-title-card small{display:none;}.pg-row{gap:6px;}.pg-row .name{width:61px;}.pg-count{width:42px;}}
  @media(prefers-reduced-motion:reduce){.pg-bar i{transition:none;}}
  .social-section{background:linear-gradient(135deg,rgba(83,101,91,.2),rgba(27,32,41,.96));}.friend-list,.friend-requests{display:grid;gap:8px}.friend-requests{margin-bottom:10px}.friend-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed rgba(224,190,112,.16)}.friend-row:last-child{border-bottom:0}.friend-row span{display:grid;gap:2px;min-width:0}.friend-row b{font-size:12px}.friend-row small{color:var(--text-dim);font-size:9px}.friend-row button,.friend-add{border:1px solid rgba(224,190,112,.34);border-radius:9px;padding:6px 9px;background:rgba(198,161,91,.12);color:#f5eddb;font:inherit;font-size:10px;font-weight:800;cursor:pointer}.friend-row button:disabled,.friend-add:disabled{opacity:.55}.online-history-row{flex-wrap:wrap}.online-history-row .friend-add{margin-right:auto}

  .intro-pip.p1,.intro-pip.p4{background:#e0be70;box-shadow:0 0 12px rgba(224,190,112,.55);}
  .intro-pip.p2,.intro-pip.p3{background:#8b9a68;box-shadow:0 0 12px rgba(139,154,104,.4);}
  .intro-mark{background:linear-gradient(135deg,rgba(198,161,91,.24),rgba(83,101,91,.24));box-shadow:0 0 0 8px rgba(198,161,91,.05),0 22px 55px rgba(0,0,0,.35);}
  .intro-mark i,.intro-mark i:nth-child(2),.intro-mark i:nth-child(3){background:linear-gradient(135deg,#f5eddb,#c6a15b);box-shadow:0 0 14px rgba(224,190,112,.45);}
  .intro-logo{background:linear-gradient(135deg,#f5eddb 25%,#e0be70 62%,#9b773e);-webkit-background-clip:text;background-clip:text;}
  .intro-bar i{background:linear-gradient(90deg,#9b773e,#e0be70,#8b9a68);}

  /* ---- premium fixed footer dock ---- */
  :root{--footer-clearance:138px;}
  .app{padding-bottom:calc(var(--footer-clearance) + env(safe-area-inset-bottom));}
  #viewHomeWrap,#viewProfile{padding-bottom:calc(28px + env(safe-area-inset-bottom));}
  section.games:last-of-type{padding-bottom:calc(var(--footer-clearance) + env(safe-area-inset-bottom));}
  nav.bottom{
    left:50%;right:auto;bottom:calc(12px + env(safe-area-inset-bottom));
    width:min(402px,calc(100% - 24px));max-width:402px;
    min-height:76px;padding:8px;gap:4px;
    align-items:center;justify-content:space-between;
    border-radius:26px;
    background:linear-gradient(180deg,rgba(38,42,48,.88),rgba(14,17,23,.96));
    border:1px solid rgba(224,190,112,.28);
    box-shadow:0 22px 56px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,244,210,.08);
    backdrop-filter:blur(22px) saturate(135%);
  }
  nav.bottom::before{inset:-10px 10px -8px;border-radius:32px;background:radial-gradient(80% 100% at 50% 0,rgba(224,190,112,.24),transparent 72%);filter:blur(18px);opacity:.78;}
  nav.bottom::after{content:'';position:absolute;inset:7px;border-radius:21px;border:1px solid rgba(255,244,210,.06);pointer-events:none;}
  .nav-item{
    flex:1;min-width:0;min-height:60px;padding:7px 2px 6px;
    border-radius:18px;gap:5px;
    color:rgba(245,237,219,.64);font-size:10px;font-weight:800;line-height:1.1;
    transform:translateZ(0);
    transition:color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease;
  }
  .nav-item svg{width:21px;height:21px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.22));transition:transform .2s ease,filter .2s ease;}
  .nav-item:active{transform:scale(.96);}
  .nav-item.active{
    color:#1b1408;
    background:linear-gradient(145deg,#f2cf83,#b68d4e);
    box-shadow:0 12px 24px rgba(198,161,91,.28),inset 0 1px 0 rgba(255,255,255,.32);
  }
  .nav-item.active::after{top:auto;bottom:6px;width:18px;height:3px;border-radius:999px;background:rgba(29,23,13,.42);box-shadow:none;}
  .nav-item.active svg{transform:translateY(-2px) scale(1.06);filter:drop-shadow(0 7px 11px rgba(0,0,0,.18));}
  .nav-item:focus-visible{outline:2px solid #e0be70!important;outline-offset:2px;}
  @media(max-width:370px){
    :root{--footer-clearance:132px;}
    nav.bottom{width:calc(100% - 16px);padding:7px 5px;gap:2px;}
    .nav-item{font-size:9px;min-height:58px;}
    .nav-item svg{width:20px;height:20px;}
  }

  /* ---- mobile typography and footer fit overrides ---- */
  @font-face{font-family:Vazirmatn;src:url('vazirmatn-var-4e3fa217.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap;}
  html,body,button,input,select,textarea{font-family:Vazirmatn,system-ui,-apple-system,sans-serif!important;font-feature-settings:"ss01","cv01";}
  .intro-logo,.hero-copy h1{font-family:Vazirmatn,system-ui,sans-serif;font-synthesis:none;}
  .card h3{font-size:14px!important;font-weight:750!important;line-height:1.45!important;letter-spacing:-.025em!important;}
  .card .meta{font-size:11px!important;line-height:1.35!important;}
  .tab{font-size:12.2px!important;font-weight:760!important;}
  .section-label{font-size:11.5px!important;line-height:1.6!important;}
  .app{padding-bottom:calc(150px + env(safe-area-inset-bottom))!important;}
  section.games:last-of-type{padding-bottom:calc(160px + env(safe-area-inset-bottom))!important;}
  nav.bottom{bottom:calc(10px + env(safe-area-inset-bottom))!important;width:min(390px,calc(100% - 22px))!important;max-width:390px!important;min-height:70px!important;padding:7px!important;gap:4px!important;overflow:hidden!important;}
  .nav-item{min-height:56px!important;padding:6px 1px 7px!important;gap:4px!important;font-family:Vazirmatn,system-ui,-apple-system,sans-serif!important;font-size:8.8px!important;font-weight:760!important;line-height:1.22!important;letter-spacing:-.055em!important;text-align:center!important;white-space:normal!important;word-break:keep-all!important;overflow:hidden!important;}
  .nav-item svg{width:19px!important;height:19px!important;margin-bottom:1px!important;}
  .nav-item.active{border-radius:17px!important;}
  .nav-item.active::after{bottom:5px!important;width:16px!important;height:2px!important;}
  @media(max-width:390px){
    nav.bottom{width:calc(100% - 16px)!important;padding:6px 5px!important;gap:3px!important;}
    .nav-item{font-size:8.2px!important;min-height:54px!important;padding-inline:0!important;}
    .nav-item svg{width:18px!important;height:18px!important;}
  }

  /* ---- home visual redesign ---- */
  :root{--ink:#0f1117;--cream:#fff7e6;--wood:#7c5a34;--emerald:#7d927d;}
  #viewHomeWrap{padding-top:2px;}
  .home-hero{
    min-height:248px;
    padding:18px 18px 14px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:8px;
    align-items:center;
    border-radius:30px;
    background:
      radial-gradient(170px circle at 76% 28%,rgba(224,190,112,.26),transparent 66%),
      radial-gradient(220px circle at 15% 0,rgba(125,146,125,.18),transparent 62%),
      linear-gradient(145deg,rgba(46,40,32,.94),rgba(22,26,33,.98) 58%,rgba(14,18,25,.98));
    border:1px solid rgba(224,190,112,.34);
    box-shadow:0 26px 70px rgba(0,0,0,.48),inset 0 1px rgba(255,244,210,.11);
  }
  .home-hero::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 34%);pointer-events:none;}
  .home-hero::after{content:'';position:absolute;left:-38px;bottom:-48px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(224,190,112,.16),transparent 68%);pointer-events:none;}
  .mission-hero-button{position:absolute;left:16px;bottom:16px;z-index:4;width:142px;padding:10px 11px;border:1px solid rgba(33,209,159,.42);border-radius:14px;background:linear-gradient(145deg,rgba(33,209,159,.18),rgba(90,167,255,.12));color:var(--text);text-align:right;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.24);transition:transform .15s ease,border-color .15s ease,background .15s ease}.mission-hero-button:hover,.mission-hero-button:focus-visible{transform:translateY(-2px);border-color:var(--mint);background:linear-gradient(145deg,rgba(33,209,159,.28),rgba(90,167,255,.18));outline:none}.mission-hero-label,.mission-hero-name{display:block}.mission-hero-label{color:var(--mint);font-size:10px;font-weight:800}.mission-hero-name{overflow:hidden;margin-top:4px;font-size:12px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}.mission-hero-progress{display:block;height:4px;margin-top:9px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.12)}.mission-hero-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--mint));transition:width .25s ease}
  .eyebrow{display:inline-flex;margin-bottom:8px;padding:4px 10px;border-radius:999px;background:rgba(224,190,112,.13);border:1px solid rgba(224,190,112,.28);color:#f3d99d;font-size:10px;font-weight:900;letter-spacing:-.02em;}
  .hero-copy h1{font-size:42px;line-height:1.6;padding:.1em .15em;margin-bottom:10px;font-weight:900;letter-spacing:normal;background:linear-gradient(135deg,#fff7e6 12%,#e0be70 60%,#9e7940);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .hero-copy p{max-width:185px;color:rgba(245,237,219,.77);font-size:12px;font-weight:620;line-height:1.85;}
  .hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
  .hero-primary,.hero-secondary{min-height:38px;border-radius:999px;padding:9px 13px;font-size:11.5px;font-weight:900;border:1px solid rgba(224,190,112,.28);}
  .hero-primary{color:#1f170b;background:linear-gradient(135deg,#f3d486,#b68d4e);box-shadow:0 12px 24px rgba(198,161,91,.24);}
  .hero-secondary{color:#f5eddb;background:rgba(255,255,255,.055);}
  .hero-art{position:relative;z-index:1;height:190px;align-self:stretch;}
  .hero-piece{position:absolute;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 22px 26px rgba(0,0,0,.5));}
  .hero-king{width:118px;left:34px;top:6px;transform:rotate(-7deg);}
  .hero-queen{width:105px;left:-6px;top:52px;opacity:.86;transform:rotate(10deg);}
  .hero-board{position:absolute;left:6px;right:4px;bottom:16px;height:72px;border-radius:18px;transform:perspective(240px) rotateX(58deg) rotateZ(-6deg);background:linear-gradient(135deg,rgba(224,190,112,.38),rgba(255,255,255,.05));border:1px solid rgba(224,190,112,.28);box-shadow:0 26px 40px rgba(0,0,0,.38);overflow:hidden;}
  .hero-board i{position:absolute;width:25%;height:50%;background:rgba(255,247,230,.16);}
  .hero-board i:nth-child(1){right:0;top:0}.hero-board i:nth-child(2){right:50%;top:0}.hero-board i:nth-child(3){right:25%;bottom:0}.hero-board i:nth-child(4){right:75%;bottom:0}
  .hero-stats{position:relative;z-index:3;grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:2px;}
  .hero-stats div{padding:9px 8px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,244,210,.1);text-align:center;}
  .hero-stats b{display:block;color:#f1ce7e;font-size:15px;font-weight:800;line-height:1.1;}
  .hero-stats span{display:block;color:rgba(245,237,219,.58);font-size:9.5px;font-weight:750;margin-top:3px;}
  .section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
  .section-head b{display:block;font-size:15px;font-weight:850;color:var(--text);letter-spacing:-.04em;}
  .section-head span{display:block;margin-top:2px;font-size:11px;color:var(--text-dim);line-height:1.7;}
  .section-head em{font-style:normal;flex:none;padding:5px 10px;border-radius:999px;background:rgba(198,161,91,.14);border:1px solid rgba(224,190,112,.22);color:#e0be70;font-size:10px;font-weight:900;}
  .grid{gap:13px;}
  .premium-card{min-height:152px;padding:14px 13px 13px;border-radius:24px;background:linear-gradient(160deg,rgba(255,247,230,.095),rgba(28,32,40,.98) 58%);}
  .featured-game{grid-column:span 2;min-height:132px;display:grid;grid-template-columns:auto 1fr;column-gap:13px;align-items:center;background:radial-gradient(190px circle at 18% 50%,rgba(154,140,255,.24),transparent 58%),linear-gradient(135deg,rgba(198,161,91,.16),rgba(27,32,41,.98));}
  .featured-game .icon-wrap{grid-row:1/4;margin-bottom:0;width:58px;height:58px;border-radius:20px;}
  .featured-game .icon-wrap svg{width:31px;height:31px;}
  .featured-game h3{font-size:18px!important;}
  .chess-showcase::before{background-image:linear-gradient(135deg,rgba(224,190,112,.14),transparent),url('assets/pieces-sheet-e1722755.jpg');background-size:cover;background-position:center;opacity:.13!important;filter:saturate(.8);}
  .game-tag{position:absolute;top:10px;left:10px;z-index:2;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,244,210,.11);color:rgba(245,237,219,.74);font-size:9.5px;font-weight:900;}
  .game-tag.live{color:#15110a;background:linear-gradient(135deg,#b7ff3c,#e5ff9c);border-color:rgba(183,255,60,.45);box-shadow:0 0 18px rgba(183,255,60,.18);}
  .card .meta{max-width:128px;color:rgba(235,223,194,.7)!important;}
  .featured-game .meta{max-width:none;}
  .card .meta::before{flex:none;}
  .card .icon-wrap{margin-top:7px;}
  .featured-game .icon-wrap{margin-top:0;}
  .tabs{margin-top:18px;border-radius:20px;padding:5px;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.018));}
  .tab-pill{border-radius:16px;}
  .tab{border-radius:16px!important;padding:10px 4px!important;font-size:11.4px!important;}
  header{padding-top:max(14px,env(safe-area-inset-top));}
  .brand-row{border-radius:24px;padding:9px 12px;}
  .profile-sub{color:#d6bf8a;font-weight:750;}
  nav.bottom{border-radius:30px!important;}
  .nav-item.active{background:linear-gradient(145deg,#f5d98e,#b9873c)!important;}
  @media(max-width:390px){
    .home-hero{grid-template-columns:1fr .82fr;min-height:238px;padding:16px 15px 13px;}
    .hero-copy h1{font-size:36px;}
    .hero-copy p{font-size:11.2px;max-width:166px;}
    .hero-actions{gap:6px;}
    .hero-primary,.hero-secondary{font-size:10.6px;padding-inline:10px;}
    .hero-art{height:174px;}
    .hero-king{width:104px;left:24px;}
    .hero-queen{width:92px;left:-8px;top:58px;}
    .hero-stats div{padding:8px 5px;}
    .premium-card{min-height:146px;}
  }

  /* ---- Telegram mobile stability patch ---- */
  .app{max-width:430px!important;padding-top:76px!important;padding-bottom:calc(118px + env(safe-area-inset-bottom))!important;}
  header{padding-top:0!important;}
  .brand-row{min-height:62px!important;border-radius:22px!important;}
  .profile-name{max-width:185px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;display:block!important;direction:ltr!important;text-align:right!important;}
  .profile-name .lvl{display:none!important;}
  .home-hero{min-height:auto!important;grid-template-columns:1fr!important;padding:18px!important;margin-top:12px!important;}
  .hero-copy h1{font-size:34px!important;margin-bottom:8px!important;}
  .hero-copy p{max-width:none!important;font-size:12px!important;line-height:1.8!important;}
  .hero-actions{margin-top:12px!important;}
  .hero-primary,.hero-secondary{min-height:36px!important;font-size:11px!important;padding:8px 12px!important;}
  .hero-art{display:none!important;}
  .hero-stats{margin-top:14px!important;}
  .hero-stats div{padding:8px 6px!important;border-radius:14px!important;}
  .tabs{margin-top:14px!important;border-radius:20px!important;}
  .tabs{background:rgba(8,10,14,.96)!important;border:1px solid rgba(224,190,112,.52)!important;box-shadow:0 12px 26px rgba(0,0,0,.38),inset 0 1px rgba(255,244,210,.08)!important;}
  .tab-pill{background:linear-gradient(145deg,#f1cc78,#a97b35)!important;box-shadow:0 8px 22px rgba(198,161,91,.36),inset 0 1px rgba(255,255,255,.28)!important;}
  .tab{color:#fff4d8!important;font-size:12.8px!important;font-weight:950!important;text-shadow:0 2px 3px rgba(0,0,0,.65)!important;}
  .tab.active{color:#171006!important;text-shadow:0 1px 0 rgba(255,244,210,.3)!important;}
  section.games{padding-top:14px!important;}
  .section-head{align-items:flex-start!important;margin-bottom:10px!important;}
  .section-head b{font-size:14px!important;}
  .section-head span{font-size:10.5px!important;}
  .premium-card,.card{aspect-ratio:1/1!important;min-height:0!important;border-radius:22px!important;padding:13px 12px!important;}
  .featured-game{grid-column:auto!important;aspect-ratio:1/1!important;min-height:0!important;display:block!important;}
  .card .icon-wrap,.featured-game .icon-wrap{width:50px!important;height:50px!important;margin-bottom:8px!important;}
  .card h3,.featured-game h3{font-size:13.5px!important;}
  .card .meta{font-size:10.2px!important;line-height:1.7!important;max-width:120px!important;}
  .featured-game .meta{max-width:120px!important;}
  .game-tag{font-size:9px!important;padding:3px 7px!important;}
  nav.bottom{min-height:70px!important;width:calc(100% - 8px)!important;max-width:430px!important;padding:7px!important;border-radius:24px!important;}
  .nav-item{min-height:56px!important;font-size:9.4px!important;font-weight:900!important;gap:4px!important;border-radius:16px!important;letter-spacing:-.035em!important;}
  .nav-item svg{width:20px!important;height:20px!important;}
  section.games:last-of-type{padding-bottom:calc(142px + env(safe-area-inset-bottom))!important;}
  @media(max-width:390px){
    .app{padding-top:76px!important;}
    .home-hero{padding:16px!important;}
    .hero-copy h1{font-size:32px!important;}
    .grid{gap:10px!important;}
    .premium-card,.card,.featured-game{aspect-ratio:1/1!important;min-height:0!important;}
    .card .icon-wrap,.featured-game .icon-wrap{width:47px!important;height:47px!important;}
    nav.bottom{width:calc(100% - 8px)!important;min-height:70px!important;}
    .nav-item{font-size:9.2px!important;min-height:56px!important;font-weight:900!important;}
  }

  /* ---- Royal Blue / Emerald theme ---- */
  :root{--bg:#06111f;--surface:#0d1b2f;--surface-2:#132843;--border:rgba(122,199,255,.22);--text:#eef7ff;--text-dim:rgba(218,235,255,.72);--neon:#21d19f;--neon-soft:rgba(33,209,159,.16);--magenta:#5aa7ff;--magenta-soft:rgba(90,167,255,.16);--gold:#7cc7ff;--violet:#3155d4;}
  body{background:radial-gradient(780px circle at 76% -18%,rgba(49,85,212,.38),transparent 54%),radial-gradient(640px circle at -18% 68%,rgba(33,209,159,.18),transparent 48%),#06111f!important;color:var(--text)!important;}
  .app{background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 170px),radial-gradient(560px circle at 92% 0,rgba(90,167,255,.20),transparent 48%),var(--bg)!important;}
  .brand-row,.home-hero,.tabs,.card,.pf-section,.pf-stat,.sheet,nav.bottom{border-color:rgba(122,199,255,.24)!important;box-shadow:0 18px 48px rgba(0,0,0,.38),inset 0 1px rgba(232,247,255,.08)!important;}
  .brand-row{background:linear-gradient(135deg,rgba(90,167,255,.16),rgba(7,18,34,.92))!important;}
  .profile-avatar,.pf-avatar{background:linear-gradient(145deg,#3155d4,#21d19f)!important;}
  .profile-avatar-wrap::before,.pf-avatar-wrap::before{background:conic-gradient(#21d19f 0 var(--level-progress,0%),rgba(255,255,255,.12) var(--level-progress,0%) 100%)!important;box-shadow:0 0 18px rgba(33,209,159,.32)!important;}
  .user-chip{background:linear-gradient(135deg,rgba(33,209,159,.15),rgba(90,167,255,.08))!important;border-color:rgba(33,209,159,.38)!important;}
  .home-hero{background:radial-gradient(190px circle at 82% 24%,rgba(33,209,159,.20),transparent 66%),linear-gradient(145deg,rgba(16,42,74,.96),rgba(7,18,34,.98) 60%,rgba(4,12,24,.98))!important;border-color:rgba(122,199,255,.30)!important;}
  .eyebrow{background:rgba(33,209,159,.13)!important;border-color:rgba(33,209,159,.36)!important;color:#8ff3d0!important;}
  .hero-copy h1{background:linear-gradient(135deg,#f2fbff 12%,#7cc7ff 54%,#21d19f)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;}
  .hero-copy p,.profile-sub{color:rgba(218,235,255,.76)!important;}
  #tabsBar.tabs{background:linear-gradient(180deg,#07101d,#0b1c31)!important;border:1px solid rgba(124,199,255,.58)!important;padding:6px!important;box-shadow:0 14px 30px rgba(0,0,0,.42),inset 0 1px 0 rgba(238,247,255,.10)!important;}
  #tabsBar .tab-pill{background:linear-gradient(145deg,#eaf7ff,#8ad8ff 48%,#21d19f)!important;box-shadow:0 10px 24px rgba(33,209,159,.30),0 0 0 1px rgba(255,255,255,.20) inset!important;}
  #tabsBar .tab{color:#d9ecff!important;font-size:13px!important;font-weight:950!important;text-shadow:0 2px 5px rgba(0,0,0,.85)!important;}
  #tabsBar .tab.active{color:#041525!important;text-shadow:0 1px 0 rgba(255,255,255,.22)!important;}
  .section-head em,.game-tag{background:rgba(90,167,255,.14)!important;border-color:rgba(122,199,255,.25)!important;color:#9fd3ff!important;}
  .game-tag.live{background:linear-gradient(135deg,#21d19f,#8ff3d0)!important;color:#021a14!important;border-color:rgba(33,209,159,.55)!important;box-shadow:0 0 18px rgba(33,209,159,.20)!important;}
  .welcome-card{display:flex;align-items:flex-start;gap:12px;margin:14px 0;padding:16px;border:1px solid rgba(33,209,159,.42);border-radius:18px;background:linear-gradient(135deg,rgba(33,209,159,.14),rgba(90,167,255,.09));box-shadow:0 12px 28px rgba(0,0,0,.2)}.welcome-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;background:rgba(33,209,159,.2);color:#8ff3d0;font-size:20px}.welcome-card b{font-size:1rem}.welcome-card p{margin:4px 0 12px;color:var(--text-dim);font-size:.84rem;line-height:1.8}.welcome-actions{display:flex;gap:8px;flex-wrap:wrap}.welcome-actions button{min-height:42px;padding:8px 14px;border:1px solid rgba(122,199,255,.28);border-radius:11px;background:rgba(13,27,47,.8);color:var(--text);font-weight:700}.welcome-actions .primary{background:linear-gradient(135deg,#21d19f,#7cc7ff);color:#031b20;border-color:transparent}.pf-online-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0;padding:12px;border:1px solid rgba(122,199,255,.24);border-radius:16px;background:rgba(13,27,47,.78)}.pf-online-overview .online-metric{min-width:0;text-align:center}.pf-online-overview b{display:block;color:#8ff3d0;font-size:1.1rem}.pf-online-overview span{display:block;color:var(--text-dim);font-size:.72rem;margin-top:2px}@media(max-width:360px){.welcome-card{padding:13px}.welcome-card p{font-size:.78rem}.pf-online-overview{gap:4px;padding:9px}.pf-online-overview b{font-size:.95rem}.pf-online-overview span{font-size:.65rem}}
  .card{background:linear-gradient(155deg,rgba(90,167,255,.12),rgba(8,22,40,.97) 58%)!important;border-color:rgba(122,199,255,.20)!important;}
  .card:hover{border-color:rgba(33,209,159,.46)!important;box-shadow:0 18px 38px rgba(0,0,0,.36),0 0 24px rgba(33,209,159,.12)!important;}
  .card .meta{color:rgba(218,235,255,.70)!important;}
  .card .meta::before{background:#21d19f!important;box-shadow:0 0 10px rgba(33,209,159,.75)!important;}
  .nav-item{color:rgba(218,235,255,.74)!important;}
  .nav-item.active{color:#031325!important;background:linear-gradient(145deg,#21d19f,#7cc7ff)!important;box-shadow:0 10px 26px rgba(33,209,159,.24)!important;}
  nav.bottom{background:linear-gradient(180deg,rgba(13,27,47,.94),rgba(5,13,25,.98))!important;border-color:rgba(122,199,255,.28)!important;}
  nav.bottom::before{background:linear-gradient(100deg,rgba(90,167,255,.34),rgba(33,209,159,.20))!important;}

  /* ---- polished category segmented control ---- */
  #tabsBar.tabs{
    min-height:56px!important;
    border-radius:24px!important;
    padding:5px!important;
    gap:5px!important;
    background:linear-gradient(180deg,#06111f,#0a1a2e)!important;
    border:1px solid rgba(90,167,255,.42)!important;
    box-shadow:0 12px 26px rgba(0,0,0,.38),inset 0 1px 0 rgba(238,247,255,.08)!important;
    overflow:hidden!important;
  }
  #tabsBar .tab-pill{display:none!important;}
  #tabsBar .tab{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:44px!important;
    border-radius:19px!important;
    line-height:1.25!important;
    letter-spacing:-.04em!important;
    color:#d8edff!important;
    background:rgba(90,167,255,.10)!important;
    border:1px solid rgba(122,199,255,.18)!important;
    text-shadow:none!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
  }
  #tabsBar .tab.active{
    color:#031a22!important;
    background:linear-gradient(145deg,#27e0ad,#8ad8ff)!important;
    border-color:rgba(180,245,255,.56)!important;
    font-weight:1000!important;
    box-shadow:0 8px 20px rgba(33,209,159,.24),inset 0 1px 0 rgba(255,255,255,.32)!important;
  }
  @media(max-width:390px){#tabsBar .tab{font-size:12.3px!important;min-height:42px!important;}}

  /* ---- hero typography and mission separation ---- */
  .intro-logo{
    overflow:visible;
    background:none!important;
    -webkit-background-clip:border-box!important;
    background-clip:border-box!important;
    color:#e0be70!important;
    text-shadow:0 0 26px rgba(224,190,112,.42);
  }
  .hero-copy h1{
    overflow:visible;
    background:none!important;
    -webkit-background-clip:border-box!important;
    background-clip:border-box!important;
    color:#7cc7ff!important;
    text-shadow:0 0 24px rgba(33,209,159,.28);
  }
  .mission-hero-button{color:#eef7ff!important;}
  @media (max-height:760px){
    .sheet{padding-top:12px;padding-bottom:calc(16px + env(safe-area-inset-bottom));}
    .sheet-handle{margin-bottom:10px;}
    .sheet-title{margin-bottom:10px;}
    .modes{gap:8px;}
    .mode-btn{padding:10px 9px;border-radius:14px;}
    .mode-btn svg{width:18px;height:18px;margin-bottom:5px;}
    .mode-btn .t{font-size:12.5px;}
    .mode-btn .d{font-size:10.5px;}
  }

  @media(max-width:600px){
    .home-hero{
      min-height:250px!important;
      padding:18px 16px 18px!important;
    }
    .hero-copy{
      position:relative;
      z-index:3;
      min-width:0;
      padding-left:150px;
    }
    .hero-copy p{
      max-width:100%!important;
      overflow-wrap:normal;
    }
    .mission-hero-button{
      left:14px;
      bottom:14px;
      width:136px;
      padding:10px!important;
    }
  }