/* GemSpin — theme layer.
   Every page is tokenised with --gs-* variables (see tools/theme-pages.mjs),
   so the three skins below re-colour the whole app coherently.

   Skins:  midnight (navy + gold + violet)   default
           aurora   (deep teal + cyan + indigo)
           pearl    (light lilac + indigo + copper)
*/

/* ============================ base tokens ============================ */
:root{
  --gs-bg:#050810;
  --gs-bg-grad:radial-gradient(circle at 50% 12%,rgba(88,64,160,.45) 0%,transparent 60%),radial-gradient(circle at 50% 92%,rgba(10,16,32,.95) 0%,transparent 100%);
  --gs-fg:#ffffff;--gs-fg-2:#aab4c6;--gs-fg-3:#6c7890;
  --gs-card:rgba(30,41,59,.62);--gs-card-2:rgba(30,41,59,.86);--gs-elev:rgba(13,18,32,.94);--gs-nav:rgba(14,17,30,.86);
  --gs-line:rgba(255,255,255,.085);--gs-line-2:rgba(255,255,255,.14);--gs-line-3:rgba(255,255,255,.24);
  --gs-tint:#ffffff;--gs-shadow:#000000;--gs-track:rgba(255,255,255,.12);
  --gs-on-accent:#ffffff;
  --gs-primary:#fcd34d;--gs-primary-2:#fbbf24;--gs-primary-deep:#b45309;
  --gs-secondary:#a855f7;--gs-secondary-2:#c084fc;--gs-secondary-deep:#6d28d9;
  --gs-tertiary:#38bdf8;--gs-tertiary-deep:#0369a1;
  --gs-blue:#3b82f6;--gs-blue-deep:#1d4ed8;
  --gs-success:#4ade80;--gs-success-deep:#15803d;--gs-danger:#f87171;
  --gs-grad-1:#fff1b8;--gs-grad-2:#f5b82e;--gs-grad-3:#a56a0c;--gs-grad-edge:#7a4a06;--gs-grad-fg:#2a1500;
  --gs-glow:rgba(252,211,77,.55);
  --gs-cat-ads:#38bdf8;--gs-cat-video:#f472b6;--gs-cat-ptc:#a855f7;--gs-cat-shortlink:#fbbf24;--gs-cat-video-deep:#9d174d;
  --gs-podium-silver:#e2e8f0;--gs-podium-silver-deep:#64748b;
  --gs-podium-bronze:#fdba74;--gs-podium-bronze-deep:#b45309;
  --gs-rim:#f0b64a;--gs-rim-dark:#8a5208;--gs-rim-stroke:rgba(60,30,0,.55);
  --gs-bulb-on:#fff3a8;--gs-bulb-off:#d9b46a;--gs-pointer-dot:#7a1d3a;--gs-hero-fg:#ede9fe;
  --app-height:100dvh;--tg-viewport-height:100dvh;--tg-viewport-stable-height:100dvh;
}

/* ============================== AURORA ============================== */
html[data-skin="aurora"]{
  --gs-bg:#03121a;
  --gs-bg-grad:radial-gradient(circle at 50% 10%,rgba(14,116,144,.42) 0%,transparent 62%),radial-gradient(circle at 50% 94%,rgba(3,18,26,.95) 0%,transparent 100%);
  --gs-fg:#e8f7fb;--gs-fg-2:#9dbcc7;--gs-fg-3:#5f7d89;
  --gs-card:rgba(14,44,54,.60);--gs-card-2:rgba(14,44,54,.84);--gs-elev:rgba(4,24,32,.94);--gs-nav:rgba(4,22,30,.86);
  --gs-line:rgba(125,211,252,.13);--gs-line-2:rgba(125,211,252,.20);--gs-line-3:rgba(125,211,252,.32);
  --gs-tint:#d6f3fb;--gs-shadow:#000308;--gs-track:rgba(125,211,252,.14);
  --gs-on-accent:#ffffff;
  --gs-primary:#22d3ee;--gs-primary-2:#67e8f9;--gs-primary-deep:#0e7490;
  --gs-secondary:#6366f1;--gs-secondary-2:#a5b4fc;--gs-secondary-deep:#4338ca;
  --gs-tertiary:#2dd4bf;--gs-tertiary-deep:#0f766e;
  --gs-blue:#38bdf8;--gs-blue-deep:#075985;
  --gs-success:#4ade80;--gs-success-deep:#15803d;--gs-danger:#fb7185;
  --gs-grad-1:#c7f5f8;--gs-grad-2:#22d3ee;--gs-grad-3:#0b5f75;--gs-grad-edge:#084e61;--gs-grad-fg:#04252c;
  --gs-glow:rgba(34,211,238,.50);
  --gs-cat-ads:#38bdf8;--gs-cat-video:#f0abfc;--gs-cat-ptc:#818cf8;--gs-cat-shortlink:#2dd4bf;--gs-cat-video-deep:#a21caf;
  --gs-podium-silver:#e2e8f0;--gs-podium-silver-deep:#64748b;
  --gs-podium-bronze:#fdba74;--gs-podium-bronze-deep:#b45309;
  --gs-rim:#2bb8d4;--gs-rim-dark:#075d70;--gs-rim-stroke:rgba(0,40,50,.55);
  --gs-bulb-on:#c7f5f8;--gs-bulb-off:#4a8fa0;--gs-pointer-dot:#0b3a47;--gs-hero-fg:#cffafe;
}

/* =============================== PEARL =============================== */
html[data-skin="pearl"]{
  --gs-bg:#f5f4fb;
  --gs-bg-grad:radial-gradient(circle at 50% 8%,rgba(199,210,254,.55) 0%,transparent 62%),radial-gradient(circle at 50% 95%,rgba(224,231,255,.55) 0%,transparent 100%);
  --gs-fg:#161233;--gs-fg-2:#565178;--gs-fg-3:#8a86a8;
  --gs-card:rgba(255,255,255,.88);--gs-card-2:rgba(255,255,255,.96);--gs-elev:#ffffff;--gs-nav:rgba(255,255,255,.92);
  --gs-line:rgba(28,25,64,.10);--gs-line-2:rgba(28,25,64,.16);--gs-line-3:rgba(28,25,64,.28);
  --gs-tint:#1b1740;--gs-shadow:#2a2350;--gs-track:rgba(28,25,64,.10);
  --gs-on-accent:#ffffff;
  --gs-primary:#4f46e5;--gs-primary-2:#6366f1;--gs-primary-deep:#3730a3;
  --gs-secondary:#7c3aed;--gs-secondary-2:#a78bfa;--gs-secondary-deep:#5b21b6;
  --gs-tertiary:#0e9488;--gs-tertiary-deep:#115e59;
  --gs-blue:#2563eb;--gs-blue-deep:#1e40af;
  --gs-success:#16a34a;--gs-success-deep:#15803d;--gs-danger:#dc2626;
  --gs-grad-1:#e0e7ff;--gs-grad-2:#6366f1;--gs-grad-3:#312e81;--gs-grad-edge:#1e1b4b;--gs-grad-fg:#1e1b4b;
  --gs-glow:rgba(79,70,229,.28);
  --gs-cat-ads:#2563eb;--gs-cat-video:#db2777;--gs-cat-ptc:#7c3aed;--gs-cat-shortlink:#d97706;--gs-cat-video-deep:#9d174d;
  --gs-podium-silver:#cbd5e1;--gs-podium-silver-deep:#64748b;
  --gs-podium-bronze:#d97706;--gs-podium-bronze-deep:#92400e;
  --gs-rim:#818cf8;--gs-rim-dark:#3730a3;--gs-rim-stroke:rgba(30,27,75,.35);
  --gs-bulb-on:#e0e7ff;--gs-bulb-off:#a5b4fc;--gs-pointer-dot:#312e81;--gs-hero-fg:#eef2ff;
}

/* ====================== structural / shared rules ====================== */
body{
  background-color:var(--gs-bg)!important;
  background-image:var(--gs-bg-grad)!important;
  color:var(--gs-fg)!important;
  min-height:var(--app-height)!important;
}
.app,.app-container{color:var(--gs-fg)}
.page-title{color:var(--gs-primary)!important;text-shadow:0 2px 10px var(--gs-glow)!important}
.reset,.sub,.lbl,.next,.gs-sub{color:var(--gs-fg-2)!important}
.reset b{color:var(--gs-fg)!important}

.avatar-btn img{border-color:var(--gs-secondary)!important}
.online-dot{border-color:var(--gs-bg)!important}
.balance-pill{background:var(--gs-card-2)!important;color:var(--gs-fg)!important;border:1px solid var(--gs-line)}
.spins-badge{background:var(--gs-card-2)!important;border-color:var(--gs-line)!important;color:var(--gs-fg-2)!important}

.card,.t,.row,.prize,.stat,.day,.q{background:var(--gs-card)!important;border-color:var(--gs-line)!important;color:var(--gs-fg)}
.neon{border-color:color-mix(in srgb,var(--gs-secondary) 55%,transparent)!important;
      box-shadow:0 0 22px color-mix(in srgb,var(--gs-secondary) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.08)!important;
      background:linear-gradient(160deg,color-mix(in srgb,var(--gs-secondary-deep) 70%,transparent),var(--gs-card))!important}
.t.ready{background:linear-gradient(160deg,color-mix(in srgb,var(--gs-primary) 12%,transparent),var(--gs-card))!important;
          border-color:color-mix(in srgb,var(--gs-primary) 50%,transparent)!important}
.tab.active{background:linear-gradient(135deg,var(--gs-secondary),var(--gs-secondary-deep))!important;
            box-shadow:0 0 14px color-mix(in srgb,var(--gs-secondary) 50%,transparent)!important}
.track,.bar,.rail{background:var(--gs-track)!important}
.code{background:var(--gs-elev)!important;border-color:color-mix(in srgb,var(--gs-primary) 45%,transparent)!important;color:var(--gs-primary)!important}
.dot{background:var(--gs-elev)!important;border-color:var(--gs-line-2)!important;color:var(--gs-fg-3)!important}

.nav-bar{background:var(--gs-nav)!important;border-color:var(--gs-line)!important;
        box-shadow:0 20px 40px color-mix(in srgb,var(--gs-shadow) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.07)!important}
.nav-item{color:var(--gs-fg-3)!important}
.nav-item:hover{color:var(--gs-fg-2)!important}
.nav-item.active{color:var(--gs-secondary-2)!important}
.tabs{background:var(--gs-card-2)!important;border-color:var(--gs-line)!important}
.tab{color:var(--gs-fg-2)!important}
.tab.active{color:var(--gs-on-accent)!important}
.chip{background:var(--gs-card-2)!important;border-color:var(--gs-line-2)!important;color:var(--gs-fg-2)!important}
.chip.active{color:var(--gs-on-accent)!important;
  background:linear-gradient(135deg,var(--gs-secondary),var(--gs-secondary-deep))!important;
  box-shadow:0 0 14px color-mix(in srgb,var(--gs-secondary) 50%,transparent)!important}
.btn.go,.go{background:var(--gs-card-2)!important;border:1px solid var(--gs-line-2)!important;color:var(--gs-fg)!important}

.nm,.pod .nm,.row .info p,.q .top,.t .nm{color:var(--gs-fg)!important}
.t .no,.row .rk,.row .info small,.q .pc,.node small{color:var(--gs-fg-2)!important}
.ms-h,.lbl{color:var(--gs-fg)!important}
.you{background:var(--gs-elev)!important;border-color:var(--gs-secondary)!important;
     box-shadow:0 0 22px color-mix(in srgb,var(--gs-secondary) 35%,transparent),0 10px 24px color-mix(in srgb,var(--gs-shadow) 50%,transparent)!important}
.you .info p{color:var(--gs-fg)!important}
.you .info small{color:var(--gs-fg-2)!important}
.prize{color:var(--gs-fg-2)!important}
.fr{border-color:var(--gs-line)!important}
.fr b{color:var(--gs-primary)!important}
.day.ok{color:var(--gs-primary)!important;border-color:color-mix(in srgb,var(--gs-primary) 50%,transparent)!important}
.day.today{color:var(--gs-fg)!important}
.empty{color:var(--gs-fg-3)!important}
.idb{color:var(--gs-fg-2)!important}
.ver{color:var(--gs-fg-3)!important}
.menu .it{background:var(--gs-card)!important;border-color:var(--gs-line)!important;color:var(--gs-fg)!important}
.menu .it .t{color:var(--gs-fg)!important}
.chev{color:var(--gs-fg-3)!important}
.out{background:var(--gs-card)!important;border-color:var(--gs-line)!important;color:var(--gs-danger)!important}
.stat b,.pod .gm{color:var(--gs-primary)!important}
.stat em,.b em{color:var(--gs-success)!important}
.b{background:var(--gs-card)!important;border-color:var(--gs-line)!important}
.b small{color:var(--gs-fg-2)!important}
.b strong{color:var(--gs-fg)!important}
.lv .r span{color:var(--gs-fg-2)!important}
.lv .r b{color:var(--gs-fg)!important}
.lvl{background:color-mix(in srgb,var(--gs-secondary) 18%,transparent)!important;
     border-color:color-mix(in srgb,var(--gs-secondary) 45%,transparent)!important;color:var(--gs-secondary-2)!important}
.back{color:var(--gs-fg-2)!important}

.toast,.gs-t{background:var(--gs-elev)!important;border-color:var(--gs-primary)!important;color:var(--gs-primary)!important;
             box-shadow:0 10px 30px color-mix(in srgb,var(--gs-shadow) 60%,transparent)!important}
.modal-overlay{background:color-mix(in srgb,var(--gs-shadow) 70%,transparent)}
.modal-card{background:var(--gs-elev)!important;border-color:var(--gs-line-2)!important;color:var(--gs-fg)}
.modal-card h3{color:var(--gs-primary)!important}
.modal-card p{color:var(--gs-fg-2)!important}
/* ====================== bottom sheets (modals) ====================== */
.gs-ov{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;justify-content:center;
  background:color-mix(in srgb,var(--gs-shadow) 72%,transparent);backdrop-filter:blur(6px);
  animation:gs-fade .2s ease}
@keyframes gs-fade{from{opacity:0}}
@keyframes gs-up{from{transform:translateY(46px);opacity:.6}}
.gs-card{position:relative;width:100%;max-width:430px;max-height:92vh;overflow:auto;
  background:var(--gs-elev);border:1px solid color-mix(in srgb,var(--gs-secondary) 45%,transparent);
  border-radius:28px 28px 0 0;padding:24px 18px calc(22px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -12px 44px color-mix(in srgb,var(--gs-shadow) 70%,transparent);
  animation:gs-up .32s cubic-bezier(.34,1.4,.64,1);color:var(--gs-fg)}
.gs-card::-webkit-scrollbar{width:0}
.gs-card h3{font-size:19px;font-weight:800;color:var(--gs-primary);margin:0 0 4px;letter-spacing:.2px}
.gs-sub{font-size:12px;color:var(--gs-fg-2);margin:0 0 14px;line-height:1.55}
.gs-sub b{color:var(--gs-primary)}
.gs-card label{display:block;font-size:11px;font-weight:700;color:var(--gs-fg-2);margin:14px 0 6px}
.gs-card input,.gs-card select{width:100%;padding:13px 14px;border-radius:14px;
  background:var(--gs-card-2);border:1px solid var(--gs-line-2);color:var(--gs-fg);font-size:15px;outline:0;
  transition:border-color .18s ease,box-shadow .18s ease}
.gs-card input::placeholder{color:var(--gs-fg-3)}
.gs-card input:focus,.gs-card select:focus{border-color:var(--gs-secondary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gs-secondary) 20%,transparent)}
.gs-card select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gs-fg-3) 50%),linear-gradient(135deg,var(--gs-fg-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.gs-hint{font-size:11.5px;color:var(--gs-success);margin-top:6px}
.gs-err{color:var(--gs-danger)}
.gs-btn{width:100%;border:0;border-radius:14px;padding:14px;font-size:14.5px;font-weight:800;cursor:pointer;
  margin-top:16px;transition:transform .1s ease,opacity .18s ease}
.gs-btn:disabled{opacity:.4;cursor:default}
.gs-btn:active:not(:disabled){transform:scale(.97)}
.gs-pri{color:var(--gs-on-accent);background:linear-gradient(135deg,var(--gs-secondary),var(--gs-secondary-deep));
  box-shadow:0 8px 20px color-mix(in srgb,var(--gs-secondary) 38%,transparent)}
.gs-gold{color:var(--gs-grad-fg);background:linear-gradient(180deg,var(--gs-grad-1),var(--gs-grad-2) 55%,var(--gs-grad-3));
  box-shadow:0 4px 0 var(--gs-grad-edge)}
.gs-ghost-btn{background:var(--gs-card);border:1px solid var(--gs-line-2);color:var(--gs-fg);box-shadow:none}
.gs-x{position:absolute;top:14px;inset-inline-end:14px;width:34px;height:34px;border-radius:50%;
  background:var(--gs-card);border:1px solid var(--gs-line);color:var(--gs-fg-2);font-size:20px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;padding:0;
  transition:background .18s ease,color .18s ease}
.gs-x:hover{background:var(--gs-card-2);color:var(--gs-fg)}
.gs-pk{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;margin-top:9px;border-radius:16px;
  background:var(--gs-card);border:1px solid var(--gs-line);color:var(--gs-fg);cursor:pointer;text-align:start;
  transition:transform .12s ease,border-color .18s ease}
.gs-pk:active{transform:scale(.97)}
.gs-pk:hover{border-color:color-mix(in srgb,var(--gs-secondary) 45%,transparent)}
.gs-pk b{flex:1;font-size:16px;font-weight:800;color:var(--gs-fg)}
.gs-pk em{font-style:normal;font-size:9px;font-weight:900;color:#2a1500;background:var(--gs-primary);
  padding:3px 8px;border-radius:99px;margin-inline-start:8px;letter-spacing:.4px}
.gs-pk span{font-weight:800;color:var(--gs-primary);white-space:nowrap}
.gs-h{font-size:11.5px;color:var(--gs-fg-2);margin-top:18px;border-top:1px solid var(--gs-line);padding-top:12px}
.gs-h div{display:flex;justify-content:space-between;padding:4px 0;gap:10px}
.gs-h i{font-style:normal;color:var(--gs-primary);font-weight:700}

/* --------------------- edit profile sheet --------------------- */
.gs-edit-head{padding-inline-end:46px;margin-bottom:20px}
.gs-edit-head p{font-size:12.5px;color:var(--gs-fg-2);margin:4px 0 0;line-height:1.55}
.gs-av{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 0 22px}
.gs-av-btn{position:relative;width:108px;height:108px;border-radius:50%;padding:0;border:0;background:none;
  cursor:pointer;display:block;line-height:0}
.gs-av-btn img{width:108px;height:108px;border-radius:50%;object-fit:cover;display:block;
  border:3px solid var(--gs-secondary);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--gs-secondary) 18%,transparent),
             0 10px 24px color-mix(in srgb,var(--gs-shadow) 45%,transparent);
  transition:transform .2s cubic-bezier(.34,1.4,.64,1)}
.gs-av-btn:active img{transform:scale(.95)}
.gs-av-badge{position:absolute;right:-2px;bottom:-2px;width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--gs-primary-2),var(--gs-primary-deep));
  border:3px solid var(--gs-elev);display:flex;align-items:center;justify-content:center;font-size:16px;
  box-shadow:0 4px 10px color-mix(in srgb,var(--gs-shadow) 50%,transparent)}
.gs-av-hint{font-size:11.5px;font-weight:600;color:var(--gs-fg-3)}
.gs-field{margin:0}
.gs-field>label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gs-fg-3);margin:0 0 8px}
.gs-field-wrap{position:relative}
.gs-field input{padding:15px 54px 15px 15px;font-size:16px;font-weight:600}
html[dir="rtl"] .gs-field input{padding:15px 15px 15px 54px}
.gs-field input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--gs-secondary) 22%,transparent)}
.gs-count{position:absolute;inset-inline-end:13px;top:50%;transform:translateY(-50%);
  font:700 11px ui-monospace,Menlo,monospace;color:var(--gs-fg-3);pointer-events:none;
  font-variant-numeric:tabular-nums}
.gs-count.warn{color:var(--gs-danger)}
.gs-actions{display:flex;gap:10px;margin-top:20px}
.gs-actions .gs-btn{margin-top:0;flex:1}

/* profile card pencil button */
.gs-edit{position:absolute;top:12px;inset-inline-end:12px;width:34px;height:34px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--gs-secondary) 60%,transparent);
  background:color-mix(in srgb,var(--gs-secondary) 22%,transparent);color:var(--gs-fg);cursor:pointer;
  font-size:14px;display:flex;align-items:center;justify-content:center;padding:0;
  transition:transform .12s ease,background .18s ease}
.gs-edit:active{transform:scale(.92)}
.gs-edit:hover{background:color-mix(in srgb,var(--gs-secondary) 34%,transparent)}


/* task category accents (skin aware) */
[data-cat="ADS"]{--c:var(--gs-cat-ads);--cbg:color-mix(in srgb,var(--gs-cat-ads) 16%,transparent);--cbd:color-mix(in srgb,var(--gs-cat-ads) 42%,transparent)}
[data-cat="VIDEO"]{--c:var(--gs-cat-video);--cbg:color-mix(in srgb,var(--gs-cat-video) 16%,transparent);--cbd:color-mix(in srgb,var(--gs-cat-video) 42%,transparent)}
[data-cat="PTC"]{--c:var(--gs-cat-ptc);--cbg:color-mix(in srgb,var(--gs-cat-ptc) 18%,transparent);--cbd:color-mix(in srgb,var(--gs-cat-ptc) 45%,transparent)}
[data-cat="SHORTLINK"]{--c:var(--gs-cat-shortlink);--cbg:color-mix(in srgb,var(--gs-cat-shortlink) 16%,transparent);--cbd:color-mix(in srgb,var(--gs-cat-shortlink) 42%,transparent)}
[data-cat="OTHER"]{--c:var(--gs-fg-3);--cbg:color-mix(in srgb,var(--gs-fg-3) 16%,transparent);--cbd:color-mix(in srgb,var(--gs-fg-3) 42%,transparent)}

/* admin panel */
:root{--bg:var(--gs-bg);--pn:var(--gs-card);--bd:var(--gs-line);--mu:var(--gs-fg-2);--pu:var(--gs-secondary);--go:var(--gs-primary)}
.admin-body body,.admin-body{background:var(--gs-bg)!important}

/* ============================ skin switcher ============================ */
.gs-skin-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--gs-line-2);background:var(--gs-card-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex-shrink:0;
  transition:transform .12s ease,border-color .2s ease}
.gs-skin-btn:active{transform:scale(.9)}
.gs-skin-float{position:fixed;top:12px;right:12px;z-index:400;box-shadow:0 6px 18px color-mix(in srgb,var(--gs-shadow) 45%,transparent)}
.gs-skin-btn svg{width:16px;height:16px;fill:none;stroke:var(--gs-primary);stroke-width:1.6;stroke-linecap:round}
.gs-skin-panel{position:fixed;z-index:600;min-width:210px;padding:8px;border-radius:18px;
  background:var(--gs-elev);border:1px solid var(--gs-line-2);
  box-shadow:0 20px 44px color-mix(in srgb,var(--gs-shadow) 60%,transparent);
  display:none;flex-direction:column;gap:6px;backdrop-filter:blur(18px)}
.gs-skin-panel.open{display:flex}
.gs-skin-title{font:700 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gs-fg-3);padding:4px 8px 6px}
.gs-skin-opt{display:flex;align-items:center;gap:10px;width:100%;border:1px solid transparent;background:none;
  border-radius:13px;padding:8px 10px;cursor:pointer;text-align:start;color:var(--gs-fg);font:600 13px/1.2 inherit}
.gs-skin-opt:hover{background:var(--gs-card)}
.gs-skin-opt.on{border-color:var(--gs-secondary);background:color-mix(in srgb,var(--gs-secondary) 12%,transparent)}
.gs-swatches{display:flex;gap:3px;flex-shrink:0}
.gs-swatches i{width:13px;height:13px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.15)}
.gs-skin-opt b{font-weight:700}
.gs-skin-opt small{display:block;font-size:10px;color:var(--gs-fg-3);font-weight:500;margin-top:2px}
.gs-skin-check{margin-inline-start:auto;font-size:12px;color:var(--gs-secondary-2);opacity:0}
.gs-skin-opt.on .gs-skin-check{opacity:1}

/* ====================== legacy: no color-mix fallback ====================== */
@supports not (color:color-mix(in srgb,red 50%,transparent)){
  :root{
    --gs-line:rgba(255,255,255,.09);--gs-line-2:rgba(255,255,255,.15);--gs-line-3:rgba(255,255,255,.25);
    --gs-tint:#fff;--gs-shadow:#000;
  }
  .card,.t,.row,.prize,.stat,.day,.q{background:rgba(30,41,59,.62)!important;border-color:rgba(255,255,255,.09)!important}
  .nav-bar{background:rgba(14,17,30,.86)!important;border-color:rgba(255,255,255,.09)!important}
  .chip,.tabs,.balance-pill{background:rgba(30,41,59,.86)!important}
  .toast,.gs-t,.gs-card,.modal-card,.you,.code,.dot{background:rgba(13,18,32,.94)!important}
  .neon{border-color:rgba(168,85,247,.55)!important}
}

/* ========================== shared components ========================== */
.tg-btn{border:0;border-radius:12px;padding:12px 18px;font-size:14px;font-weight:800;cursor:pointer;transition:transform .1s ease}
.tg-btn:active{transform:scale(.97)}
.tg-btn.pri{background:linear-gradient(135deg,var(--gs-secondary),var(--gs-secondary-deep));color:var(--gs-on-accent);box-shadow:0 8px 20px color-mix(in srgb,var(--gs-secondary) 35%,transparent)}
.tg-btn.ghost{background:var(--gs-card-2);border:1px solid var(--gs-line-2);color:var(--gs-fg)}
.tg-pop-wrap{position:fixed;inset:0;z-index:500;background:color-mix(in srgb,var(--gs-shadow) 60%,transparent);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}
.tg-pop{width:100%;max-width:320px;background:var(--gs-elev);border:1px solid var(--gs-line-2);border-radius:18px;padding:20px;color:var(--gs-fg);box-shadow:0 20px 40px color-mix(in srgb,var(--gs-shadow) 60%,transparent)}
.tg-pop h3{font-size:16px;margin-bottom:12px;color:var(--gs-primary)}
.tg-pop input{width:100%;padding:12px;border-radius:12px;background:var(--gs-card-2);border:1px solid var(--gs-line-2);color:var(--gs-fg);font-size:15px;outline:0}
.tg-pop-btns{display:flex;gap:8px;margin-top:14px}
.tg-pop-btns .tg-btn{flex:1}

/* open-from-bot gate */
/* ---------- the landing page (outside Telegram) ---------- */
.tg-gate{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;color:var(--gs-fg);overflow:auto;
  background:
    radial-gradient(90% 60% at 50% -10%,color-mix(in srgb,var(--gs-secondary) 26%,transparent),transparent 70%),
    radial-gradient(70% 50% at 10% 100%,color-mix(in srgb,var(--gs-primary) 14%,transparent),transparent 70%),
    var(--gs-bg);background-image:none}
.tg-gate::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--gs-fg) 12%,transparent) 1px,transparent 0);
  background-size:26px 26px;opacity:.5;mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent)}
.tg-gate-card{position:relative;z-index:1;width:100%;max-width:420px;padding:34px 30px 28px;border-radius:26px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gs-elev) 92%,transparent),color-mix(in srgb,var(--gs-card) 88%,transparent));
  border:1px solid var(--gs-line-2);backdrop-filter:blur(18px);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.55),0 2px 0 0 color-mix(in srgb,var(--gs-fg) 6%,transparent) inset}
.tg-gate-mark{width:78px;height:78px;margin:0 auto 18px;border-radius:24px;display:grid;place-items:center;font-size:38px;
  background:linear-gradient(140deg,var(--gs-grad-1),var(--gs-grad-2) 55%,var(--gs-grad-3));
  box-shadow:0 14px 34px -10px color-mix(in srgb,var(--gs-primary) 55%,transparent),0 0 0 1px color-mix(in srgb,var(--gs-fg) 10%,transparent) inset}
.tg-gate-title{margin:0 0 6px;font-size:30px;font-weight:800;letter-spacing:.16em;
  background:linear-gradient(100deg,var(--gs-primary),var(--gs-secondary-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.tg-gate-tag{margin:0 0 22px;font-size:13.5px;line-height:1.6;color:var(--gs-fg-2);letter-spacing:.02em}
.tg-gate-cta{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:15px 20px;border:0;
  border-radius:16px;cursor:pointer;font:800 15px/1 inherit;color:var(--gs-on-accent);
  background:linear-gradient(135deg,var(--gs-grad-1),var(--gs-grad-2) 60%,var(--gs-grad-3));
  box-shadow:0 14px 30px -12px color-mix(in srgb,var(--gs-primary) 70%,transparent);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.tg-gate-cta:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 20px 38px -12px color-mix(in srgb,var(--gs-primary) 80%,transparent)}
.tg-gate-cta:active{transform:translateY(0) scale(.985)}
.tg-gate-cta svg{width:19px;height:19px;fill:currentColor;flex-shrink:0}
.tg-gate-note{margin:11px 0 0;font-size:12px;color:var(--gs-fg-3)}
.tg-gate-feats{list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--gs-line);display:grid;gap:11px;text-align:start}
.tg-gate-feats li{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--gs-fg-2);line-height:1.45}
.tg-gate-feats i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:14px;flex-shrink:0;
  background:color-mix(in srgb,var(--gs-secondary) 16%,transparent);border:1px solid color-mix(in srgb,var(--gs-secondary) 26%,transparent)}
.tg-gate-bot{display:inline-block;margin-top:20px;font:700 12px/1 ui-monospace,Menlo,monospace;color:var(--gs-fg-3);
  text-decoration:none;padding:9px 14px;border-radius:99px;border:1px solid var(--gs-line-2);
  background:color-mix(in srgb,var(--gs-fg) 4%,transparent);transition:color .16s ease,border-color .16s ease}
.tg-gate-bot:hover{color:var(--gs-primary);border-color:color-mix(in srgb,var(--gs-primary) 45%,transparent)}
.tg-gate-dev{width:100%;margin-top:14px}

/* the banner that appears when the server refuses the Telegram signature */
.gs-auth-err{position:fixed;inset-inline:12px;top:12px;z-index:950;display:flex;flex-direction:column;gap:6px;
  padding:14px 16px;border-radius:16px;max-width:520px;margin-inline:auto;
  background:color-mix(in srgb,var(--gs-danger) 14%,var(--gs-card));border:1px solid color-mix(in srgb,var(--gs-danger) 45%,transparent);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.5);backdrop-filter:blur(14px)}
.gs-auth-err b{font-size:13.5px;font-weight:800;color:var(--gs-danger)}
.gs-auth-err span{font-size:12.5px;line-height:1.55;color:var(--gs-fg-2)}
.gs-auth-err a{align-self:flex-start;margin-top:4px;padding:9px 14px;border-radius:11px;text-decoration:none;
  font:800 12.5px/1 inherit;color:var(--gs-on-accent);
  background:linear-gradient(135deg,var(--gs-grad-1),var(--gs-grad-2) 60%,var(--gs-grad-3))}

/* legal pages */
.gs-doc,.doc{width:100%;max-width:640px;margin:0 auto;padding:20px 16px 40px;color:var(--gs-fg);font-size:15px;line-height:1.75}
.gs-doc h1,.doc h1{font-size:24px;margin-bottom:6px;color:var(--gs-primary)}
.gs-doc h2,.doc h2{font-size:17px;margin:22px 0 8px;color:var(--gs-secondary-2)}
.gs-doc p,.doc p{margin-bottom:12px;color:var(--gs-fg-2)}
.gs-doc ul,.doc ul{margin:0 0 12px 20px;color:var(--gs-fg-2)}
.gs-doc li,.doc li{margin-bottom:6px}
.gs-doc a,.doc a{color:var(--gs-blue)}
.gs-doc .updated,.doc .updated{font-size:12px;color:var(--gs-fg-3);margin-bottom:18px}
.note{background:color-mix(in srgb,var(--gs-secondary) 12%,transparent)!important;border:1px solid color-mix(in srgb,var(--gs-secondary) 40%,transparent)!important;color:var(--gs-fg-2)!important}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- AdsGram task component (native channel tasks) ---------- */
.gs-adsgram-task{display:block;margin:8px 0}
.gs-adsgram-task::part(button){background:linear-gradient(135deg,var(--gs-secondary),var(--gs-secondary-deep));color:var(--gs-on-accent);border-radius:12px;font-weight:800}
.gs-adsgram-task::part(reward){color:var(--gs-primary);font-weight:800}
.gs-adsgram-task::part(icon){border-radius:10px}