/* =========================================================================
   RETRO 3.0 — "MONOCHROME GLOW"
   Pure black · everything SQUARE · ALL TEXT WHITE (glowing) · zero green text.
   Colour appears ONLY in: solid fills, dots, hairlines and progress bars.
   Sidebar is permanently open on desktop.
   ========================================================================= */
:root{
  --bg:#000;
  --line:rgba(255,255,255,.11);
  --line2:rgba(255,255,255,.24);
  --line3:rgba(255,255,255,.45);
  --txt:#ffffff;
  --sub:rgba(255,255,255,.62);
  --mut:rgba(255,255,255,.34);
  --acc:#2bff9b;          /* fills / dots / bars only — NEVER text */
  --red:#ff3b4e;
  --amb:#ffb454;
  --gold:#ffd166;
  --glow:0 0 22px rgba(255,255,255,.20);
  --glow-s:0 0 12px rgba(255,255,255,.16);
  --rail:232px;
  --pad:clamp(16px,3.2vw,44px);
  --ff:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fd:'Unbounded',var(--ff);
  --fm:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--ff);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 120% 80% at 50% 0%,#000 0%,transparent 76%);
          mask-image:radial-gradient(ellipse 120% 80% at 50% 0%,#000 0%,transparent 76%)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
img{display:block;max-width:100%}
::selection{background:#fff;color:#000}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}

/* ---------- sidebar — ALWAYS OPEN ---------- */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:70;
  background:linear-gradient(180deg,#0a0a0c,#000 55%);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:20px 0 14px;overflow-y:auto;overflow-x:hidden}
.rail .rlogo{display:flex;align-items:center;gap:12px;width:100%;padding:0 20px;height:40px;margin-bottom:26px;flex:0 0 auto}
.rail .rlogo img{width:30px;height:30px;object-fit:contain;flex:0 0 auto;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.28))}
.rail .rlogo .wm{font-family:var(--fd);font-weight:700;font-size:15px;letter-spacing:.03em;white-space:nowrap;
  text-shadow:var(--glow-s)}
.rail .wm b{font-weight:700;opacity:.55}
.rnav{display:flex;flex-direction:column;gap:1px;width:100%;padding:0 12px}
.rnav.bot{margin-top:auto}
.rnav .lbl{font-family:var(--fm);font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.26);padding:16px 10px 8px}
.ri{position:relative;display:flex;align-items:center;gap:14px;height:42px;padding:0 12px;
  color:rgba(255,255,255,.5);transition:color .18s,background .18s;white-space:nowrap}
.ri svg{width:17px;height:17px;flex:0 0 auto;stroke-width:1.7}
.ri .t{font-size:11.5px;font-weight:500}
.ri:hover{color:#fff;background:rgba(255,255,255,.06)}
.ri:hover svg{filter:drop-shadow(0 0 8px rgba(255,255,255,.5))}
.ri.on{color:#fff;background:rgba(255,255,255,.09)}
.ri.on .t{text-shadow:var(--glow-s)}
.ri.on::before{content:'';position:absolute;left:-12px;top:9px;bottom:9px;width:2px;background:#fff;
  box-shadow:0 0 12px rgba(255,255,255,.9)}
.rsep{height:1px;background:var(--line);margin:12px 12px}
.rbd{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:65;opacity:0;pointer-events:none;transition:.25s}
.rbd.show{opacity:1;pointer-events:auto}

/* ---------- shell ---------- */
.shell{margin-left:var(--rail);position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
.cwrap{width:100%;max-width:1580px;margin:0 auto;padding:0 var(--pad)}

/* ---------- topbar ---------- */
.tbar{position:sticky;top:0;z-index:60;height:64px;display:flex;align-items:center;gap:12px;
  padding:0 var(--pad);border-bottom:1px solid transparent;transition:.3s}
.tbar.stuck{background:rgba(0,0,0,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom-color:var(--line)}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--line2)}
.burger svg{width:19px;height:19px;stroke-width:1.9}
.mlogo{display:none;height:22px}
.tspace{flex:1}
.clock{display:flex;align-items:center;gap:9px;font-family:var(--fm);font-size:11.5px;color:var(--sub);
  letter-spacing:.08em;padding:8px 13px;border:1px solid var(--line)}
.clock i{width:5px;height:5px;background:var(--acc);box-shadow:0 0 9px var(--acc);animation:bl 2.4s infinite}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.25}}
/* Redux wallet chip — took the clock's place in the topbar */
.rdx{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 13px;
  border:1px solid var(--line2);font-family:var(--fm);color:#fff;transition:.2s}
.rdx img{width:17px;height:17px;flex:0 0 auto;object-fit:contain;
  filter:drop-shadow(0 0 7px rgba(2,248,141,.55))}
.rdx b{font-weight:700;font-size:12.5px;letter-spacing:.02em}
.rdx span{color:var(--mut);letter-spacing:.22em;font-size:8.5px}
.rdx:hover{border-color:var(--line3);box-shadow:var(--glow-s)}
.rdx:hover img{filter:drop-shadow(0 0 12px rgba(2,248,141,.95))}
.rdx.off b{color:var(--mut)}
.tic{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);
  color:var(--sub);transition:.2s}
.tic:hover{color:#fff;border-color:var(--line3);box-shadow:var(--glow-s)}
.tic svg{width:18px;height:18px}
.tic.discord{position:relative}
.tic.discord.linked{color:#fff;border-color:var(--line3)}
.tic.discord .ok{display:none;position:absolute;right:-4px;top:-4px;width:14px;height:14px;background:var(--acc);
  color:#000;font-size:9px;font-weight:800;align-items:center;justify-content:center;border:2px solid #000}
.tic.discord.linked .ok{display:flex}
/* once Discord is linked the button widens and shows the account name */
.tic.discord .dcn{display:none}
.tic.discord.named{width:auto;gap:9px;padding:0 13px;color:#fff;border-color:var(--line2)}
.tic.discord.named .dcn{display:block;font-family:var(--fm);font-size:11.5px;letter-spacing:.02em;
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tic.discord.named .ok{right:-3px;top:-3px}
.tic.steam{color:#fff;border-color:var(--line2)}
.mechip{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 4px;border:1px solid var(--line);
  font-size:13px;font-weight:600;transition:.2s;max-width:200px}
.mechip:hover{border-color:var(--line3);box-shadow:var(--glow-s)}
.mechip img{width:32px;height:32px;object-fit:cover}
.mechip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- page header ---------- */
.phead{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;padding:44px 0 26px}
.phead .lhs{flex:1;min-width:230px}
.phead .eb{font-family:var(--fm);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mut);
  margin-bottom:15px;display:flex;align-items:center;gap:12px}
.phead .eb .ln{width:30px;height:1px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8)}
.phead h1{font-family:var(--fd);font-weight:700;font-size:clamp(28px,3.2vw,42px);letter-spacing:-.025em;line-height:1;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;text-shadow:var(--glow)}
.phead h1 .cnt{font-family:var(--fm);font-size:12px;font-weight:500;color:var(--sub);letter-spacing:.04em;
  border:1px solid var(--line);padding:7px 13px;display:inline-flex;align-items:center;gap:8px;text-shadow:none}
.phead h1 .cnt b{color:#fff;font-weight:700}
.tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---------- section heading ---------- */
.sec{margin-bottom:30px}
.sec-h{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.sec-h .bar{width:2px;height:18px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.85)}
.sec-h h2{font-family:var(--fd);font-weight:700;font-size:17px;letter-spacing:-.01em;text-shadow:var(--glow-s)}
.sec-h .cnt{font-family:var(--fm);font-size:11px;color:var(--mut);margin-left:auto}

/* ---------- primitives ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:46px;padding:0 22px;font-size:13.5px;font-weight:700;letter-spacing:.03em;transition:.22s;white-space:nowrap}
.btn svg{width:16px;height:16px}
/* primary = white on black, glowing */
.btn.p{background:#fff;color:#000;box-shadow:0 0 26px rgba(255,255,255,.24)}
.btn.p::after{content:"";position:absolute;top:-20%;bottom:-20%;width:38%;left:-55%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(0,0,0,.22),transparent);transform:skewX(-18deg);
  transition:left .62s cubic-bezier(.2,.7,.2,1)}
.btn.p:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(255,255,255,.42)}
.btn.p:hover::after{left:125%}
.btn.p:active{transform:translateY(0)}
.btn.s{border:1px solid var(--line2);color:#fff}
.btn.s:hover{border-color:var(--line3);box-shadow:var(--glow-s);transform:translateY(-2px);
  background:rgba(255,255,255,.06)}
.btn.s:active{transform:translateY(0)}
.btn.d{border:1px solid rgba(255,59,78,.55);color:#fff;background:rgba(255,59,78,.16)}
.btn.d:hover{background:rgba(255,59,78,.3);border-color:var(--red);transform:translateY(-2px);
  box-shadow:0 0 24px rgba(255,59,78,.35)}

.seg{display:flex;border:1px solid var(--line);height:44px}
.seg button{padding:0 17px;font-size:12.5px;font-weight:600;color:var(--sub);display:flex;align-items:center;gap:8px;
  transition:.2s}
.seg button+button{border-left:1px solid var(--line)}
.seg button:hover{color:#fff;background:rgba(255,255,255,.06)}
.seg button.on{color:#000;background:#fff;box-shadow:0 0 22px rgba(255,255,255,.28)}
.seg button .d{width:6px;height:6px;background:currentColor}
.seg button[data-f="live"] .d,.seg button[data-s="active"] .d{background:var(--red);box-shadow:0 0 8px var(--red)}
.seg button.on .d{background:#000;box-shadow:none}

.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:13px;width:15px;height:15px;color:var(--mut);pointer-events:none;stroke-width:1.9}
.search input{height:44px;width:240px;background:transparent;border:1px solid var(--line);color:#fff;
  padding:0 14px 0 36px;font-family:var(--fm);font-size:12.5px;outline:none;transition:.22s}
.search input::placeholder{color:var(--mut)}
.search input:focus{border-color:var(--line3);box-shadow:var(--glow-s);width:290px}

/* pills — white text, colour only in the dot / hairline */
.pill{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;font-family:var(--fm);font-size:10px;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;border:1px solid var(--line2);color:#fff;
  white-space:nowrap;background:rgba(0,0,0,.55)}
.pill i{width:6px;height:6px;background:currentColor}
.p-live,.p-active{border-color:rgba(255,59,78,.6);background:rgba(255,59,78,.2)}
.p-live i,.p-active i{background:var(--red);box-shadow:0 0 9px var(--red);animation:pls 1.4s infinite}
@keyframes pls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.65)}}
.p-warm{border-color:rgba(255,180,84,.5);background:rgba(255,180,84,.16)}
.p-warm i{background:var(--amb);box-shadow:0 0 8px var(--amb)}
.p-on,.p-ok{border-color:rgba(43,255,155,.42);background:rgba(43,255,155,.13)}
.p-on i,.p-ok i{background:var(--acc);box-shadow:0 0 8px var(--acc)}
.p-off,.p-gray{border-color:var(--line);background:rgba(255,255,255,.05);color:var(--sub)}
.p-off i,.p-gray i{background:currentColor}
.p-gold{border-color:rgba(255,209,102,.5);background:rgba(255,209,102,.16)}
.p-gold i{background:var(--gold);box-shadow:0 0 8px var(--gold)}

.tile{border:1px solid var(--line);padding:18px 20px;transition:border-color .25s,box-shadow .25s}
.tile:hover{border-color:var(--line2);box-shadow:var(--glow-s)}
.tile .n{font-family:var(--fm);font-weight:700;font-size:clamp(23px,2.3vw,31px);line-height:1;letter-spacing:-.02em;
  text-shadow:var(--glow-s)}
.tile .l{margin-top:10px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);font-weight:500}

.empty{padding:74px 20px;text-align:center;color:var(--mut);font-family:var(--fm);font-size:13px;
  border:1px dashed var(--line)}
.skl{background:linear-gradient(100deg,#070709 30%,#131318 50%,#070709 70%) 0 0/300% 100%;animation:shim 1.5s infinite;
  border:1px solid var(--line)}
@keyframes shim{to{background-position:-300% 0}}

/* ---------- footer ---------- */
.foot{margin-top:auto;border-top:1px solid var(--line)}
.fin{max-width:1580px;margin:0 auto;padding:36px var(--pad);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.fin img{height:26px;opacity:.75}
.fin .cp{flex:1;min-width:200px;font-size:12.5px;color:var(--mut)}
.fin .cp b{color:var(--sub);font-weight:600}
/* Instagram mark sitting right after the developer credit */
.fin .cp .cpig{display:inline-flex;align-items:center;vertical-align:-3px;margin-left:7px;
  color:var(--mut);transition:color .18s,filter .18s}
.fin .cp .cpig svg{width:15px;height:15px}
.fin .cp .cpig:hover{color:#fff;filter:drop-shadow(0 0 9px rgba(255,255,255,.55))}
.fsoc{display:flex;gap:9px}
.fsoc a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);
  color:var(--mut);transition:.2s}
.fsoc a:hover{color:#fff;border-color:var(--line3);box-shadow:var(--glow-s)}
.fsoc svg{width:17px;height:17px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:120;display:none}
.modal.show{display:block}
.mbd{position:absolute;inset:0;background:rgba(0,0,0,.9);backdrop-filter:blur(8px);animation:fi .25s}
@keyframes fi{from{opacity:0}to{opacity:1}}
.mc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(900px,94vw);max-height:92vh;
  overflow:auto;animation:mup .32s cubic-bezier(.2,.7,.2,1)}
@keyframes mup{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.mx{background:#000;border:1px solid var(--line2);box-shadow:0 0 60px rgba(255,255,255,.07)}
.mx-btn{position:absolute;top:14px;width:36px;height:36px;z-index:9;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);background:rgba(0,0,0,.7);backdrop-filter:blur(8px);color:#fff;transition:.2s}
.mx-btn:hover{background:rgba(255,255,255,.16);box-shadow:var(--glow-s)}
.mx-btn svg{width:16px;height:16px}
.mx-cl{right:14px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,26px);z-index:200;opacity:0;pointer-events:none;
  padding:13px 22px;background:#000;border:1px solid var(--line2);font-family:var(--fm);font-size:12.5px;color:#fff;
  transition:.28s cubic-bezier(.2,.7,.2,1);box-shadow:0 0 40px rgba(255,255,255,.1)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{border-color:rgba(255,59,78,.7)}
.toast.ok{border-color:rgba(43,255,155,.6)}

/* ---------- rank medal ---------- */
.rk{display:inline-flex;align-items:center;gap:10px;min-width:0}
.rk img{height:26px;width:auto;flex:0 0 auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.8))}
.rk .rn{font-size:12px;color:var(--sub);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk.lg img{height:46px}
.rk.sm img{height:21px}

/* ---------- numbered pagination ---------- */
.pg{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;padding:32px 0 70px}
.pg button,.pg .gap{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);font-family:var(--fm);font-size:12.5px;font-weight:600;color:var(--sub);
  transition:.18s;padding:0 12px}
.pg button:hover:not(:disabled){color:#fff;border-color:var(--line3);box-shadow:var(--glow-s)}
.pg button.on{background:#fff;border-color:#fff;color:#000;font-weight:700;box-shadow:0 0 22px rgba(255,255,255,.3)}
.pg button:disabled{opacity:.22;cursor:default}
.pg .gap{border-color:transparent;color:var(--mut);min-width:22px;padding:0}
.pg .nav svg{width:15px;height:15px}
.pg .info{margin-left:14px;font-family:var(--fm);font-size:11px;color:var(--mut);letter-spacing:.04em}
@media(max-width:620px){.pg .info{width:100%;text-align:center;margin:8px 0 0}}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  :root{--rail:0px}
  .rail{width:250px;transform:translateX(-100%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .rail.open{transform:none}
  .shell{margin-left:0}
  .burger{display:flex}
  .mlogo{display:block}
  .clock{display:none}
  .rdx span{display:none}
  .rdx{padding:0 11px}
  .search input,.search input:focus{width:100%}
  .search{flex:1}
}

/* ---------- collapsible sidebar group ---------- */
.ri.rgrp{width:100%;font:inherit;text-align:left}
.ri .chev{width:15px;height:15px;margin-left:auto;opacity:.55;transition:transform .28s;stroke-width:2}
.ri.rgrp.open .chev{transform:rotate(180deg);opacity:.9}
/* the chevron on a LINK head is its own hit area so the row can still navigate */
.chevbtn{display:flex;align-items:center;justify-content:center;margin-left:auto;
  width:26px;height:26px;flex:0 0 auto;cursor:pointer;transition:background .18s}
.chevbtn:hover{background:rgba(255,255,255,.1)}
.chevbtn .chev{margin-left:0}
.rsub{overflow:hidden;max-height:0;transition:max-height .32s cubic-bezier(.2,.7,.2,1)}
.rsub.open{max-height:360px}
.rsub .ri{padding-left:28px;height:38px}
.rsub .ri .t{font-size:10.5px;letter-spacing:.07em}
.rsub .ri svg{width:16px;height:16px}
.ri .t{letter-spacing:.06em;font-weight:600}
.rnav .lbl{font-size:8.5px;letter-spacing:.3em}

/* ---- Mongolian tugrik price: symbol first, deliberately oversized ---- */
.mnt{display:inline-flex;align-items:baseline;gap:.06em;white-space:nowrap;font-variant-numeric:tabular-nums}
.mnt i{font-style:normal;font-weight:800;font-size:1.26em;line-height:1;letter-spacing:0;
  text-shadow:0 0 18px rgba(255,255,255,.34)}
.mnt.sm i{font-size:1.14em;text-shadow:0 0 12px rgba(255,255,255,.22)}

/* =========================================================================
   STORE / REDUX BUTTON
   A dark plate that fills with a muted RETRO green from the left. The fill and
   the shine live at z-index -1 (inside an isolated stacking context) so they
   pass UNDER the label — a positive z-index would paint over the text and the
   button would look empty on hover.
   ========================================================================= */
.gbtn .btn.p,.rdlg .btn.p{position:relative;isolation:isolate;overflow:hidden;background:transparent;color:#fff;
  border:1px solid rgba(2,248,141,.5);font-family:var(--fm);font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  transition:border-color .25s,box-shadow .25s,text-shadow .25s}
.gbtn .btn.p::before,.rdlg .btn.p::before{content:'';position:absolute;inset:0;z-index:-1;transform:scaleX(0);
  transform-origin:left;background:linear-gradient(100deg,#0b8f57,#076b40);
  transition:transform .34s cubic-bezier(.2,.7,.2,1)}
.gbtn .btn.p::after,.rdlg .btn.p::after{content:'';position:absolute;top:0;bottom:0;left:-45%;width:34%;z-index:-1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
  transition:left .5s cubic-bezier(.2,.7,.2,1)}
.gbtn .btn.p:hover:not(:disabled),.rdlg .btn.p:hover:not(:disabled){border-color:rgba(2,248,141,.85);color:#fff;
  text-shadow:0 0 14px rgba(255,255,255,.55);box-shadow:0 0 26px rgba(2,248,141,.28)}
.gbtn .btn.p:hover:not(:disabled)::before,.rdlg .btn.p:hover:not(:disabled)::before{transform:scaleX(1)}
.gbtn .btn.p:hover:not(:disabled)::after,.rdlg .btn.p:hover:not(:disabled)::after{left:115%}
.gbtn .btn.p:active:not(:disabled),.rdlg .btn.p:active:not(:disabled){transform:translateY(1px)}
.gbtn .btn.p:disabled,.rdlg .btn.p:disabled{opacity:1;cursor:not-allowed;color:#fff;
  border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.03)}
.gbtn .btn.p:disabled::before,.gbtn .btn.p:disabled::after,.rdlg .btn.p:disabled::before,.rdlg .btn.p:disabled::after{display:none}
/* the secondary button follows along so a card never mixes the two looks */
.gbtn .btn.s,.rdlg .btn.s{border-color:rgba(255,255,255,.22);color:#fff}
.gbtn .btn.s:hover,.rdlg .btn.s:hover{border-color:rgba(2,248,141,.6);box-shadow:0 0 20px rgba(2,248,141,.18)}

/* =========================================================================
   PHONE SHELL
   One rule above all: the page scrolls DOWN, never sideways.
   ========================================================================= */
html{overflow-x:hidden}
/* min-width:0 is what stops a wide topbar from stretching the whole shell.
   NOTE: never put max-width:100% on .cwrap — it would beat its own
   max-width:1580px and every page would run edge to edge. */
.shell,.tbar{min-width:0;max-width:100%}
.cwrap{min-width:0}
img,video,svg,canvas{max-width:100%}

/* account button + drop panel (phone only) */
.acct{position:relative;display:none;flex:0 0 auto}
.acct-btn{display:flex;align-items:center;gap:6px;height:40px;padding:0 8px 0 4px;
  border:1px solid var(--line2);background:rgba(255,255,255,.03)}
.acct-btn img{width:30px;height:30px;object-fit:cover;flex:0 0 auto}
.acct-cv{width:14px;height:14px;opacity:.6;transition:transform .24s}
.acct.open .acct-cv{transform:rotate(180deg);opacity:1}
.acct-menu{position:absolute;right:0;top:calc(100% + 9px);width:min(82vw,290px);z-index:90;
  border:1px solid var(--line2);background:#08080b;box-shadow:0 26px 60px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s,transform .24s cubic-bezier(.2,.7,.2,1),visibility .24s}
.acct.open .acct-menu{opacity:1;visibility:visible;transform:none}
.acct-row{display:flex;align-items:center;gap:12px;padding:14px 16px;color:#fff;font-size:13.5px;
  border-bottom:1px solid rgba(255,255,255,.07);transition:background .18s}
.acct-row:last-child{border-bottom:0}
.acct-row:hover,.acct-row:active{background:rgba(255,255,255,.07)}
.acct-row img{width:19px;height:19px;object-fit:contain;flex:0 0 auto}
.acct-row .ic{width:19px;height:19px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.acct-row .ic svg{width:17px;height:17px}
.acct-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-row b{margin-left:auto;font-family:var(--fm);font-size:13px;font-weight:700}
.acct-row i{margin-left:auto;width:8px;height:8px;background:rgba(255,255,255,.2)}
.acct-row i.on{background:var(--acc);box-shadow:0 0 10px var(--acc)}
.acct-row .dcname{margin-left:auto;font-family:var(--fm);font-size:11.5px;color:var(--sub);
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-row.linked .dcname{color:#fff}
.acct-row.out span{color:#fff}

@media(max-width:760px){
  /* the desktop chips step aside for the single account button */
  .tbar .rdx,.tbar .tic,.tbar .mechip,.tbar #meBox{display:none!important}
  .acct{display:flex}
  .tbar{gap:10px}
  .mlogo{height:20px}
  .phead{flex-wrap:wrap;gap:12px}
  .btn{min-height:44px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   3.1 GREEN PASS (2026-09-09, эзний хүсэлт) — бүх хуудсанд ногоон дүр нэмэх
   давхарга. Хар/цагаан хэт олноороо байсныг ногоон ACCENT-ээр амилуулна.
   ⚠️ Ногоон нь ЖИЖИГ хэмжээнд: зураас, шошго, хүрээ, гэрэлтэлт. Үндсэн текст
      цагаан хэвээр (том гарчгийн градиент бол хуудас бүр өөрөө шийднэ).
   ═══════════════════════════════════════════════════════════════════════════ */
::selection{background:rgba(43,255,155,.3);color:#fff}
::-webkit-scrollbar-thumb{background:#123526}
::-webkit-scrollbar-thumb:hover{background:#1c5a3f}

/* Хуудасны толгой: eyebrow ногоон, гарчгийн доор ногоон зураас */
.phead .eb{color:var(--acc)}
.phead .eb .ln{background:var(--acc);box-shadow:0 0 10px rgba(43,255,155,.7)}
.phead h1{position:relative}
.phead h1::after{content:'';position:absolute;left:2px;bottom:-11px;width:46px;height:3px;
  background:var(--acc);box-shadow:0 0 16px rgba(43,255,155,.5)}

/* Хажуугийн цэсний ангиллын шошго */
.rnav .lbl{color:rgba(43,255,155,.55)}

/* Топбарын дүрс товчнууд hover дээр ногоон */
.tic:hover{border-color:rgba(43,255,155,.5);color:var(--acc)}

/* Хайлт/оролтын focus — цагаанаас ногоон болгоно */
.search:focus-within{border-color:rgba(43,255,155,.55)!important;
  box-shadow:0 0 0 2px rgba(43,255,155,.10),0 0 18px rgba(43,255,155,.10)}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(43,255,155,.5)}

/* Хүснэгт/картын hover-т ногоон хүрээ — түгээмэл ангиуд */
.tile:hover,.card:hover{border-color:rgba(43,255,155,.35)}

/* Footer-ийн лого орчмын амьсгал */
.foot .fin img{filter:drop-shadow(0 0 12px rgba(43,255,155,.25))}