/* =====================================================================
   glass.css  -  site background + BLACK see-through glass boxes + layout fixes
   Loaded LAST (after refresh.css) so it wins over the older layers.

   1. Page background  : the black GIF, fixed behind everything, full screen
   2. Colour tokens    : every panel / card / input reads from these, so the
                         whole site is smoked-black glass with light text
   3. Glass surfaces   : header, nav, cards, tabs, inputs, popups, dock windows
   4. Leaderboard      : edge-to-edge rows on phone, full width on PC
   5. Chat (phone)     : fills right down to the nav bar, input always visible
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. DEFAULT PICTURES  (themes.js overrides --tm-bg-site / -noti / -creator / -admin)
   --------------------------------------------------------------------- */
:root{
  /* Drawn in CSS, so it is there instantly and can never fail to load. It sits UNDER the picture:
     it is what you see on first start, while the picture loads, or if the picture host is down
     (it used to fall back to plain black). */
  --tm-def-fallback:
    radial-gradient(60% 50% at 12% 0%,rgba(34,211,238,.20),transparent 62%),
    radial-gradient(50% 45% at 92% 12%,rgba(99,102,241,.16),transparent 62%),
    radial-gradient(70% 55% at 55% 112%,rgba(46,230,107,.14),transparent 62%),
    linear-gradient(180deg,#08171d 0%,#06101a 55%,#040a10 100%);
  --tm-def-site:    url(https://i.postimg.cc/MHbybkyj/1b0424cf9e26fd7acaf437f063265074.gif);
  --tm-def-noti:    none;   /* the creator banner is clean glass until a picture is chosen in Themes */
  --tm-def-banner:  none;   /* profile banner: drawn from the theme colours until an admin picks a picture */
  --tm-def-creator: url("https://i.postimg.cc/LXjf2dQ0/photo-2026-10-29-14-45-13-(2).jpg");   /* PC */
  --tm-def-creator-m:url("https://i.postimg.cc/7YH78W3V/photo-2026-10-29-14-45-14.jpg");      /* phone */
}

/* ---------------------------------------------------------------------
   1. BACKGROUND
   --------------------------------------------------------------------- */
html{background:#000!important}
body,body::before{background:transparent!important}
html::before{display:none!important}
/* The picture layer is always the FULL screen: 100lvh = the tallest the phone's browser bar
   allows, so there is never a gap under the bar and the picture doesn't jump when the bar
   slides away. How the picture sits inside it (fill / whole / stretch, where, zoom) comes from
   the "Size & position" editor in the Themes panel - one setting for phones, one for computers.
   Nothing chosen = fill the screen, centred (the old look). */
html::after{
  content:"";position:fixed;left:0;top:0;width:100%;height:100%;height:100lvh;z-index:-1;pointer-events:none;
  background-color:#050b10;
  /* top layer = the "Dim the picture" slider (clear by default); under it the picture;
     under that the built-in glow (--tm-def-fallback), which always fills the screen */
  background-image:linear-gradient(rgba(0,0,0,var(--tm-dim,0)),rgba(0,0,0,var(--tm-dim,0))),var(--tm-bg-site,var(--tm-def-site)),var(--tm-def-fallback);
  background-repeat:no-repeat;
  background-size:var(--tm-sz-d,cover),var(--tm-sz-d,cover),cover;
  background-position:var(--tm-ps-d,center),var(--tm-ps-d,center),center;
  transform-origin:var(--tm-ps-d,50% 50%);
  transform:translateZ(0) scale(var(--tm-zm-d,1));
}
@media(max-width:700px),(max-aspect-ratio:1/1){
  html::after{
    /* phones: their own picture if one was chosen, otherwise the main one */
    background-image:linear-gradient(rgba(0,0,0,var(--tm-dim,0)),rgba(0,0,0,var(--tm-dim,0))),var(--tm-bg-site_m,var(--tm-bg-site,var(--tm-def-site))),var(--tm-def-fallback);
    background-size:var(--tm-sz-m,cover),var(--tm-sz-m,cover),cover;
    background-position:var(--tm-ps-m,center),var(--tm-ps-m,center),center;
    transform-origin:var(--tm-ps-m,50% 50%);
    transform:translateZ(0) scale(var(--tm-zm-m,1));
  }
}

/* ---------------------------------------------------------------------
   2. COLOUR TOKENS  (smoked black glass, light text)
   --------------------------------------------------------------------- */
:root{
  /* theme.js sets --tm-glass / --tm-glass-2 / --tm-glass-bar / --tm-glass-pop (r,g,b) and --tm-hi.
     The numbers after them are the see-through amounts - unchanged from the original look. */
  /* The see-through amounts below are the defaults. The Themes panel ("Opacity & look") overrides them with
     --tm-a-box / --tm-a-bar / --tm-a-pop (0-1), --tm-blur and --tm-dim. */
  --gl-fill:   rgba(var(--tm-glass,8,8,10),var(--tm-a-box,.55));                      /* standard box  - see-through */
  --gl-fill-2: rgba(var(--tm-glass-2,30,30,34),calc(var(--tm-a-box,.55) + .05));      /* raised / hover */
  --gl-bar:    rgba(var(--tm-glass-bar,0,0,0),var(--tm-a-bar,.50));                   /* header + nav + side bar */
  --gl-edge:   rgba(var(--tm-hi,255,255,255),.14);   /* hairline */
  --gl-edge-2: rgba(var(--tm-hi,255,255,255),.08);
  --gl-blur:   blur(var(--tm-blur,0px)) saturate(1.05);
  --gl-blur-bar: blur(var(--tm-blur,0px)) saturate(1.05);
  --gl-shadow: 0 6px 22px -14px rgba(0,0,0,.9);
  --gl-pop:    rgba(var(--tm-glass-pop,10,10,12),var(--tm-a-pop,.78));  /* pop-ups / windows need a little more body */

  --bg:transparent; --bg-2:transparent;
  --panel:var(--gl-fill);
  --raised:var(--gl-fill-2);
  --line:rgba(var(--tm-hi,255,255,255),.09);
  --line-2:rgba(var(--tm-hi,255,255,255),.05);

  /* light ink on black glass */
  --txt:#f3f3f5;
  --txt-1:#e6e6ea;
  --txt-2:#a6a6b0;
  --txt-3:#74747f;
  --faint:#74747f;

  --up:#19d46a; --down:#ff5a3c; --up-soft:rgba(25,212,106,.14); --down-soft:rgba(255,90,60,.14);
}


/* ---------------------------------------------------------------------
   3. GLASS SURFACES
   --------------------------------------------------------------------- */

/* shared glass recipe for every "box" on the site */
.f,.item,.pos,.tool,.cp-card,.wl-card,.pf-hero,.pf-pos,.holderbox,.curvebox,.commentbox,.pressure,.creator,
.grid6,.promo,.bigwin-card,.lb-row,.lb-me,.sb-none,.none,.w-note,
.ch-voice,.ch-staff,.ch-main,.ch-search,.hotchip,.stf,.dmr,.dmb,.dm-quick button,
.gsearch input,.qin,.sn-r,.sn-ranges,.cp-chip,
.tk-side .sect,.sect-box,.sc-sheet,.w-list,
#s-prof .pf-card,#s-prof .box,#s-wallet .box,#s-wallet .wl-card{
  background-color:var(--gl-fill)!important;
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border-color:var(--gl-edge-2)!important;
}
/* gradients the old dark theme laid on top: keep as a faint sheen only */
.f,.item,.pos,.tool,.cp-card,.wl-card,.pf-hero,.pf-pos,.lb-row,.lb-me{
  background-image:linear-gradient(180deg,rgba(var(--tm-hi,255,255,255),.07),rgba(var(--tm-hi,255,255,255),0) 60%)!important;
  box-shadow:inset 0 0 0 1px var(--gl-edge-2),var(--gl-shadow)!important;
}
.gcell{background:rgba(var(--tm-hi,255,255,255),.05)!important}

/* header + nav */
.hd,.tk-hd{
  background:var(--gl-bar)!important;
  -webkit-backdrop-filter:var(--gl-blur-bar);backdrop-filter:var(--gl-blur-bar);
  border-bottom:1px solid var(--gl-edge-2)!important;
}
.screen:not(#s-token):not(#s-prof)>.hd>.hd-row{background:var(--gl-bar)!important;
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur)}
#s-feed .chipbar,#s-calls .hd>.seg,.chipbar .seg,.seg{
  background:var(--gl-bar)!important;
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
}
.chipbar::after{display:none!important}
.bar{
  background:var(--gl-bar)!important;
  -webkit-backdrop-filter:var(--gl-blur-bar);backdrop-filter:var(--gl-blur-bar);
  border-color:var(--gl-edge)!important;
  box-shadow:0 10px 30px -16px rgba(0,0,0,.35)!important;
}
@media(min-width:1024px){
  .bar{background:var(--gl-bar)!important;border-right:1px solid var(--gl-edge)!important;box-shadow:none!important}
}

/* inputs sit a touch lighter than the box they're in */
.gsearch input,.qin,.ch-search,.ch-compose textarea,.au-f input,input[type=text],input[type=search],input[type=number],textarea{
  background-color:rgba(var(--tm-hi,255,255,255),.07)!important;color:var(--txt)!important;
}

/* section headings that sit straight on the picture */
.sb-sec,.cp-sec,.sect>.cap,.sect .cap{
  display:inline-flex!important;width:auto;align-self:flex-start;padding:7px 13px!important;border-radius:999px;
  background:var(--gl-bar);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  color:var(--txt)!important;box-shadow:inset 0 0 0 1px var(--gl-edge-2);
}

/* nav labels were tuned for black - brighter on glass */
.bar button{color:#b4b4be!important}
.bar button:hover{color:#f3f3f5!important}
.bar [aria-selected="true"]{color:#f3f3f5!important;background:rgba(var(--tm-hi,255,255,255),.10)!important}

/* leaderboard / copy rows: the old theme paints them with an id-scoped
   `background:` shorthand, so they need id-scoped glass too */
#s-calls .lb-row,#s-copy .lb-row,#s-calls .lb-row.me,#s-copy .lb-row.me,
#s-calls .lb-row.t1,#s-calls .lb-row.t2,#s-calls .lb-row.t3,
#s-copy .lb-row.t1,#s-copy .lb-row.t2,#s-copy .lb-row.t3,
#s-calls .item,#s-copy .cp-card,#s-copy .item{
  background-color:var(--gl-fill)!important;
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
}
#s-calls .lb-row .mid b,#s-copy .lb-row .mid b{color:var(--txt)!important}
#s-calls .lb-row .mid small,#s-copy .lb-row .mid small{color:var(--txt-2)!important}
#s-calls .lb-row .n,#s-copy .lb-row .n{color:var(--txt)}
#s-calls .lb-row .fg b.up,#s-calls .lb-row .pill.up{background:rgba(11,154,69,.16)!important;color:#2ee07f!important}
#s-calls .lb-row .fg b.down,#s-calls .lb-row .pill.down{background:rgba(220,58,30,.14)!important;color:#ff7a5c!important}


/* ---------------------------------------------------------------------
   4. LEADERBOARD  -  rows reach the sides, on phone AND on PC
   --------------------------------------------------------------------- */
#s-calls{--lb-gut:10px}
#s-calls .searchbox{margin:8px var(--lb-gut) 10px!important}
#s-calls .hd>.seg{margin-left:0!important;margin-right:0!important;padding-left:var(--lb-gut);padding-right:var(--lb-gut)}
#s-calls .sb-sec{margin-left:var(--lb-gut)!important;margin-right:var(--lb-gut)!important}
#s-calls .lb-me{margin:12px var(--lb-gut) 0!important}
#s-calls .sb-none{margin:10px var(--lb-gut) 0!important}
#s-calls #l-list{max-width:none!important;width:100%;padding:0}
#s-calls .lb-list,#s-calls .sb .lb-list{padding:12px var(--lb-gut) 4px!important}
#s-calls [data-wk="bw"] .bigwin-card{margin:14px var(--lb-gut) 90px!important}
#s-calls #l-list .item{margin-left:var(--lb-gut)!important;margin-right:var(--lb-gut)!important}
#s-calls .lb-row{width:100%}
/* give the pill room so a long amount never squeezes the name */
#s-calls .lb-row .fg{flex:none}

@media(min-width:900px){
  #s-calls{--lb-gut:24px}
  #s-calls.on{max-width:none!important}
  #s-calls .lb-list,#s-calls .sb .lb-list{
    grid-template-columns:repeat(auto-fill,minmax(420px,1fr))!important;gap:12px!important}
  #s-calls #l-list{display:block}
}


/* ---------------------------------------------------------------------
   5. CHAT on phones  -  fill all the way down to the nav, input always shown
   (replaces the 100dvh-118px guess that left a dead black strip above the nav)
   --------------------------------------------------------------------- */
@media(max-width:1023px){
  /* pinned between the top and the floating nav (nav = 68px tall + 8px gap + safe area) */
  #s-chat.on{
    position:fixed!important;top:0;left:0;right:0;
    bottom:calc(84px + env(safe-area-inset-bottom));
    height:auto!important;min-height:0!important;
    display:flex;flex-direction:column;overflow:hidden;
  }
  body.on-chat{padding-bottom:0!important}

  #s-chat .ch-body{flex:1 1 auto;min-height:0;overflow:hidden!important;display:flex;flex-direction:column}
  /* the tools on top can scroll if the screen is short - they never push the input away */
  #s-chat .ch-side{flex:0 1 auto;max-height:38%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
  #s-chat .ch-side::-webkit-scrollbar{display:none}
  #s-chat .ch-main{flex:1 1 0!important;min-height:0!important;margin:0 12px 2px!important;padding:6px 10px 6px!important;
    border-radius:18px}
  #s-chat .ch-logwrap{flex:1 1 0;min-height:0!important}
  #s-chat .ch-main .ch-logwrap{min-height:0!important}
  #s-chat .ch-compose{flex:none;padding:6px 0 0!important}

  /* DMs: same - thread fills down to the nav */
  #s-chat .ch-dmp{flex:1 1 auto;min-height:0;padding-bottom:6px}
}

/* header: one glass layer, not two stacked (stacking made it near-black on PC) */
@media(min-width:1024px){
  .screen:not(#s-token):not(#s-prof)>.hd>.hd-row{background:transparent!important;backdrop-filter:none;-webkit-backdrop-filter:none}
  #s-calls .searchbox{background:transparent!important}
}
/* empty-state boxes: proper floating cards, not full-bleed slabs */
.none,.sb-none{margin:12px 10px!important;border-radius:18px!important;padding:26px 18px!important}
@media(min-width:900px){.none,.sb-none{margin:12px 24px!important}}
.none b,.sb-none b{color:var(--txt)}

/* translucent-purple controls need a glass base, or they wash out on the light picture */
.ch-tabs button{background:var(--gl-fill)!important;-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);border-color:var(--gl-edge-2)!important}
.ch-tabs button[aria-pressed="true"]{background:rgba(var(--tm-hi,255,255,255),.16)!important;color:#fff!important;border-color:rgba(var(--tm-hi,255,255,255),.07)!important}

/* header tab bar on PC sits inside the (already glass) header - don't stack */
@media(min-width:1024px){
  #s-calls .hd>.seg,#s-feed .chipbar{background:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* sniper */
.sn-card,.sn-title,.sn-empty,.sn-auto,.sn-stats{
  background-color:var(--gl-fill)!important;
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border-color:var(--gl-edge-2)!important;
}
.sn-card{box-shadow:inset 0 0 0 1px var(--gl-edge-2),var(--gl-shadow)!important}
.sn-title{padding:11px 14px;border-radius:14px;margin:6px 0}
.sn-empty{border-radius:18px;margin:12px 0}
.sn-ranges{background:var(--gl-bar)!important}
.sn-r{color:var(--txt-1)!important}

/* pop-ups, dock + floating windows, sign-in, toast: same glass, a little denser */
.win,.win-bar,#dock,.fab-item,.au-card,.sn-pop-box,.sc-sheet,.rk-sheet,#toast,.cropper .box{
  background-color:var(--gl-pop)!important;color:var(--txt);
  -webkit-backdrop-filter:blur(4px) saturate(1.05);backdrop-filter:blur(4px) saturate(1.05);
  border-color:var(--gl-edge)!important;
}
.win{box-shadow:0 18px 44px -18px rgba(0,0,0,.4),inset 0 0 0 1px var(--gl-edge-2)!important}
#auth,.sn-pop{background:rgba(0,0,0,.55)!important;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
::placeholder{color:var(--txt-3)!important;opacity:1}


/* ---------------------------------------------------------------------
   Token page + profile: group the loose text into glass boxes
   --------------------------------------------------------------------- */
.hero,.ppnl,.pchips,.pbio,.pranks,.wchip,.pseg,.cap.note{
  background-color:var(--gl-fill)!important;
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  box-shadow:inset 0 0 0 1px var(--gl-edge-2),var(--gl-shadow);
}
/* token hero = price + chart + timeframes as one card */
#s-token .hero{margin:10px 10px 0;padding:16px 16px 10px;border-radius:20px;overflow:hidden}
#s-token .chartwrap{background:transparent!important;border:0!important}
#s-token .tfrow button{color:var(--txt-1)}
#s-token .tfrow button[aria-selected="true"]{background:rgba(var(--tm-hi,255,255,255),.05)}
#s-token .chart-help{color:var(--txt-2)}
#s-token .sect{margin:10px 10px 0;padding-left:0;padding-right:0}
#s-token #d-stats .grid6{margin:0}
@media(min-width:1024px){
  #s-token .hero{margin:14px 0 0}
  #s-token .sect{margin:10px 0 0}
}
/* profile */
.ppnl{margin:12px 10px 0;padding:20px 16px 14px;border-radius:20px}
.pchips{margin:12px 10px 0;padding:12px 16px;border-radius:16px}
.phead .pbio{margin:10px 10px 0;padding:12px 16px;border-radius:16px}
.pranks{margin:12px 10px 0;padding:12px 14px;border-radius:16px}
.wchip{margin-left:10px;margin-right:10px}
.cap.note{display:inline-flex;padding:8px 14px;border-radius:999px}
#s-prof .sect{margin:12px 10px 0;padding-left:0;padding-right:0}
#s-prof .sect .holderbox{margin:0}
.pbtn.soft,.pbtn.on{background-color:var(--gl-fill)!important;-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur)}
.ptf button,.ptf{color:var(--txt-1)}

.seg{background:rgba(var(--tm-hi,255,255,255),.06)!important}
@media(min-width:1024px){.chipbar .seg{background:rgba(var(--tm-hi,255,255,255),.06)!important}}

/* loading / mode-picker screen */
#gate{background:rgba(0,0,0,.55)!important;-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
.g-card,.g-addr,.au-tabs{
  background-color:var(--gl-fill)!important;-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border-color:var(--gl-edge)!important}

/* small fixes from the readability sweep */
.gcell i{color:var(--txt-2)!important}
#s-feed .tbl-head{background-color:var(--gl-bar)!important;-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  color:var(--txt-2);border-radius:14px!important;box-shadow:inset 0 0 0 1px var(--gl-edge-2)}
#s-feed .tbl-head span{color:var(--txt-2)}
.ch-hotcap{display:inline-flex;padding:6px 12px;border-radius:999px;background:var(--gl-bar);color:var(--txt-1)!important;
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur)}
:root{--down:#ff6a4d}
.seg{background:rgba(var(--tm-hi,255,255,255),.06)!important}
@media(min-width:1024px){.chipbar .seg{background:rgba(var(--tm-hi,255,255,255),.06)!important}}


/* ---------------------------------------------------------------------
   6. INK FIXES  -  text that was white for the old dark theme and now
      sits straight on light glass (buttons / pills keep their white text)
   --------------------------------------------------------------------- */
.pid-name,.pid-stats b,.ranks-sheet-head,.promo-tx b,.g-h,.g-hero,.g-pick .g-t,.tl-tx b,.xp-who b,
.as-hd b,.as-row b,.lb-me b,#s-calls .lb-me b,.pl-word,.cp-chip .cav{color:var(--txt)!important;text-shadow:none!important}
.promo-tx span,.rank-btn{color:var(--txt-2)!important}
.as-f input{color:var(--txt)!important}
.sb-sec i.r,.pmode.r,.pchips .pmode.r{color:#2ee07f!important}
.w-verdict.ok{color:#2ee07f!important}
.w-verdict.mid{color:#f2b84b!important}
.adm-chip.warn,.adm-stat.warn b,.adm-log.warn p{color:#f2b84b!important}
.cm .ctx a{color:#6aa9ff!important}
.risk p{color:#ff8f78!important}
.lb-row.t1 .n,.cp-card:nth-child(1) .cp-rk{color:#f0b82a!important}
.lb-row.t2 .n,.cp-card:nth-child(2) .cp-rk{color:#8a8a96!important}

/* big surfaces that were solid near-black: same glass as everything else */
.ranks-sheet,.invite-sheet,.pedit,.ctoggle,.qres,.chartwrap,.tl-card,.g-addr,.tc-canvas-wrap,.ptop .back,.ptop-btn,
.vp .vst,#vc-pill,.cm-mod button,.dk::after,.fab-lock-badge{
  background-color:var(--gl-fill)!important;color:var(--txt);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border-color:var(--gl-edge-2)!important;
}
.ranks-sheet,.invite-sheet{background-color:var(--gl-pop)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.f:hover,.tk-hd{background-color:var(--gl-fill-2)!important}
.tbl-head,#s-feed .tbl-head{background:var(--gl-bar)!important;-webkit-backdrop-filter:var(--gl-blur-bar);backdrop-filter:var(--gl-blur-bar)}

/* every solid button that used to be purple is now charcoal glass with white text */
.ctoggle.on,.pbtn,.rankpill,.qcall,.followbtn,.crop-go,.promo-btn,.tc-actions button.primary,.commentbox button{color:#fff}

/* scrollbars + selection in grey */
::selection{background:rgba(70,74,88,.30)}


/* ---------------------------------------------------------------------
   7. WELCOME / SIGN-IN SCREEN  -  was a black photo, now the same picture + glass
   --------------------------------------------------------------------- */
#gate{background:rgba(0,0,0,.45)!important;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.g-hero{background:linear-gradient(180deg,#f3f3f5 30%,#8a8a96)!important;-webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important}
.g-pick .g-card,.g-pick .g-card.real{
  background:var(--gl-fill)!important;border:1px solid var(--gl-edge)!important;
  box-shadow:var(--gl-shadow)!important;-webkit-backdrop-filter:var(--gl-blur)!important;backdrop-filter:var(--gl-blur)!important}
.g-pick .g-card.real{background:var(--gl-fill-2)!important}
.g-pick .g-card::before{display:none}
.g-pick .g-card:hover,.g-pick .g-card.real:hover,.g-pick .g-card.sel{background:var(--gl-fill-2)!important;border-color:rgba(var(--tm-hi,255,255,255),.18)!important}
.g-ico{color:var(--txt)!important;background:rgba(var(--tm-hi,255,255,255),.10)!important;box-shadow:inset 0 0 0 1px var(--gl-edge)!important}
.g-pick .g-fees{background:rgba(var(--tm-hi,255,255,255),.07)!important;box-shadow:inset 0 0 0 1px var(--gl-edge-2)!important}
.g-pick .g-card.real .g-fees b:first-of-type,.g-pick .g-card:hover .g-go{color:var(--txt)!important}
.g-tag{background:rgba(var(--tm-hi,255,255,255),.10)!important;color:var(--txt-2)!important;box-shadow:inset 0 0 0 1px var(--gl-edge)!important}
.g-tag.live{background:rgba(var(--tm-hi,255,255,255),.10)!important;color:var(--txt)!important}
.g-chips span{background:rgba(var(--tm-hi,255,255,255),.10)!important;color:var(--txt-2)!important;box-shadow:inset 0 0 0 1px var(--gl-edge)!important}
.g-btn{background:rgba(var(--tm-hi,255,255,255),.10);color:var(--txt-1);box-shadow:inset 0 0 0 1px var(--gl-edge)}
.g-btn.copied{background:rgba(var(--tm-hi,255,255,255),.10);color:var(--txt)}
.g-addr{background:rgba(var(--tm-hi,255,255,255),.10)!important;color:var(--txt)}
#gate .g-err{color:#ff7a5c}
.g-bar{background:rgba(var(--tm-hi,255,255,255),.06)}
.au-card{box-shadow:0 24px 60px -24px rgba(0,0,0,.45),inset 0 0 0 1px var(--gl-edge)!important}
.au-f input,.au-pw input{background:rgba(var(--tm-hi,255,255,255),.10)!important;border-color:var(--gl-edge-2)!important;color:var(--txt)!important}
.au-oauth,.au-guest{background:rgba(var(--tm-hi,255,255,255),.07)!important;border-color:var(--gl-edge-2)!important;color:var(--txt)!important}
.au-tabs{background:rgba(var(--tm-hi,255,255,255),.07)!important}
.au-x:hover{color:var(--txt)}


/* ---------------------------------------------------------------------
   8. SELECTED TABS  -  "All-Time", Trending / New / ..., sniper + popup tabs
      (selected = frosted white pill, dark bold text, thin ring - never invisible)
   --------------------------------------------------------------------- */
.seg button[aria-selected="true"],.chipbar .seg button[aria-selected="true"],
#s-calls .seg button[aria-selected="true"],#s-feed .chipbar .seg button[aria-selected="true"],
.sn-r[aria-pressed="true"],.sn-pop-tabs button[aria-pressed="true"],.as-seg button[aria-pressed="true"]{
  color:#f3f3f5!important;font-weight:750!important;background:rgba(var(--tm-hi,255,255,255),.13)!important;
  box-shadow:inset 0 0 0 1px rgba(var(--tm-hi,255,255,255),.17)!important;border-radius:999px}
.seg button,.chipbar .seg button,.sn-r,.sn-pop-tabs button,.as-seg button{color:#b4b4be}
.seg button::after{display:none!important}

/* ---------------------------------------------------------------------
   9. BUY / SELL / EDIT BUTTONS  -  clear colour, readable text
   --------------------------------------------------------------------- */
.qb.buy,.qtrade.qbuy,.tk-trade .qbuy{background:#0b9a45!important;color:#fff!important}
.qb.sell{background:rgba(220,58,30,.16)!important;color:#ff7a5c!important;box-shadow:inset 0 0 0 1px rgba(220,58,30,.4)}
.qtrade.qsell{background:#d03418!important;color:#fff!important}
.ladder .key.lk.b{background:rgba(11,154,69,.30)!important;border:1px solid rgba(11,154,69,.7)!important}
.ladder .key.lk.b b{color:#7dffb0!important}
.ladder .key.lk.b small{color:#5fe39a!important}
.ladder .key.lk.s{background:rgba(220,58,30,.26)!important;border:1px solid rgba(220,58,30,.65)!important}
.ladder .key.lk.s b{color:#ffb4a3!important}
.ladder .key.lk.s b span{color:#ff8a70!important}
.ladder .key.lk.custom{background:rgba(var(--tm-hi,255,255,255),.07)!important;border:1px solid rgba(var(--tm-hi,255,255,255),.14)!important}
.ladder .key.lk.custom b,.ladder .key.lk.custom svg{color:var(--txt-2)!important}
.ladder .key.lk.b:active b,.ladder .key.lk.b:active small{color:#fff!important}
.ladder .key.lk.s:active b,.ladder .key.lk.s:active b span{color:#fff!important}
/* "Edit" pills next to Buy / Sell */
.cap-edit{color:var(--txt-1)!important;background:rgba(var(--tm-hi,255,255,255),.10)!important;border:1px solid rgba(var(--tm-hi,255,255,255),.14)!important;
  box-shadow:none!important;font-weight:700}
.cap-edit:hover{background:rgba(var(--tm-hi,255,255,255),.13)!important;color:var(--txt)!important}
.cap-edit.on{color:#fff!important;background:rgba(var(--tm-hi,255,255,255),.18)!important;border-color:rgba(var(--tm-hi,255,255,255),.3)!important}
/* little profile-picture edit badge */
.pedit{background:rgba(var(--tm-hi,255,255,255),.16)!important;color:#f3f3f5!important;border:2px solid rgba(var(--tm-hi,255,255,255),.18)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.35)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ---------------------------------------------------------------------
   10. ADMIN PANEL  -  admin.png background, white / grey glass, dark text
   --------------------------------------------------------------------- */
.adm{
  --a-bg:transparent;--a-panel:rgba(var(--tm-hi,255,255,255),.07);--a-bar:rgba(var(--tm-hi,255,255,255),.10);
  --a-line:rgba(var(--tm-hi,255,255,255),.12);--a-line2:rgba(var(--tm-hi,255,255,255),.06);
  --a-acc:#e6e6ea;--a-acc2:#cfcfd6;--a-dim:#a6a6b0;
  --txt:#f3f3f5;--txt-1:#e6e6ea;--txt-2:#b4b4be;--txt-3:#8a8a96;--faint:#8a8a96;
  --raised:rgba(var(--tm-hi,255,255,255),.10);--panel:var(--a-panel);--up:#19d46a;--down:#ff5a3c;
  background:#000 var(--tm-bg-admin,var(--tm-bg-site,var(--tm-def-site))) var(--tm-ps-d,center)/var(--tm-sz-d,cover) no-repeat!important;
  color:var(--txt);
}
@media(max-width:700px),(max-aspect-ratio:1/1){
  .adm{background:#000 var(--tm-bg-admin,var(--tm-bg-site_m,var(--tm-bg-site,var(--tm-def-site)))) var(--tm-ps-m,center)/var(--tm-sz-m,cover) no-repeat!important}
}
.adm .adm-top{background:rgba(var(--tm-hi,255,255,255),.07)!important;border-bottom:1px solid var(--a-line)!important}
.adm .adm-nav{background:rgba(var(--tm-hi,255,255,255),.05)!important}
.adm .adm-dots i{background:rgba(var(--tm-hi,255,255,255),.16)}.adm .adm-dots i:first-child{background:#cfcfd6}
.adm .adm-top h1 i{background:rgba(var(--tm-hi,255,255,255),.10)!important;color:var(--txt-1)!important}
.adm .adm-x{background:rgba(var(--tm-hi,255,255,255),.10)!important;color:var(--txt)!important}
.adm .adm-x:hover{background:rgba(var(--tm-hi,255,255,255),.16)!important;color:var(--txt)!important}
.adm .adm-nav .adm-ix{color:#85858f}
.adm .adm-nav button{color:var(--txt-2)}
.adm .adm-nav button:hover{background:rgba(var(--tm-hi,255,255,255),.10)!important;color:var(--txt)!important}
.adm .adm-nav button.sel{background:rgba(var(--tm-hi,255,255,255),.13)!important;color:var(--txt)!important;box-shadow:inset 0 2px 0 rgba(var(--tm-hi,255,255,255),.7)!important}
.adm .adm-nav button.sel::after{background:transparent!important}
.adm .adm-nav button.sel .adm-ix{color:#fff}
.adm .adm-stat b{color:var(--txt)!important}
.adm .adm-stat.warn b,.adm .adm-chip.warn,.adm .adm-log.warn p{color:#f2b84b!important}
/* typing areas / command boxes: white-grey */
.adm input,.adm textarea,.adm select,.adm .adm-q{
  background:rgba(var(--tm-hi,255,255,255),.13)!important;color:var(--txt)!important;border:1px solid rgba(var(--tm-hi,255,255,255),.14)!important}
.adm .adm-q::placeholder,.adm input::placeholder,.adm textarea::placeholder{color:#85858f!important}
.adm .adm-q:focus,.adm input:focus,.adm textarea:focus,.adm select:focus{border-color:rgba(var(--tm-hi,255,255,255),.4)!important;box-shadow:0 0 0 3px rgba(var(--tm-hi,255,255,255),.08)!important}
.adm .adm-chips button{color:var(--txt-2)!important;background:rgba(var(--tm-hi,255,255,255),.07)}
.adm .adm-chips button.sel{background:rgba(var(--tm-hi,255,255,255),.13)!important;color:var(--txt)!important;border-color:rgba(var(--tm-hi,255,255,255),.35)!important}
.adm .adm-btn{background:rgba(var(--tm-hi,255,255,255),.10)!important;color:var(--txt)!important;border-color:rgba(var(--tm-hi,255,255,255),.14)!important}
.adm .adm-btn:hover{background:rgba(var(--tm-hi,255,255,255),.16)!important}
.adm .adm-btn.pri{background:var(--tm-btn,#f3f3f5)!important;color:var(--tm-btn-ink,#0a0a0c)!important;border-color:var(--tm-btn,#f3f3f5)!important}
.adm .adm-btn.danger{background:rgba(208,52,24,.12)!important;color:#ff7a5c!important;border-color:rgba(208,52,24,.5)!important}
.adm .adm-logs{background:rgba(var(--tm-hi,255,255,255),.10)!important}
.adm .adm-log time{color:#85858f}
.adm .adm-tbl th{background:rgba(var(--tm-hi,255,255,255),.10)!important;color:var(--txt-2)!important}
.adm .adm-tbl tbody tr:hover td,.adm .adm-log:hover{background:rgba(var(--tm-hi,255,255,255),.10)!important}
.adm .adm-urow:hover{background:rgba(var(--tm-hi,255,255,255),.08)!important;border-color:rgba(var(--tm-hi,255,255,255),.3)!important}
.adm .adm-av{background:rgba(var(--tm-hi,255,255,255),.13)!important;color:var(--txt)!important}
.adm .adm-chip{background:rgba(var(--tm-hi,255,255,255),.10)!important;color:var(--txt-1)!important}
.adm .adm-chip.staff{background:rgba(31,95,168,.14)!important;color:#6aa9ff!important}
.adm .adm-chip.ok{background:rgba(11,154,69,.15)!important;color:#2ee07f!important}
.adm .adm-chip.bad{background:rgba(208,52,24,.14)!important;color:#ff7a5c!important}
.adm .adm-t-adm{color:#6aa9ff!important}.adm .adm-t-sign{color:#b79cff!important}.adm .adm-t-trade{color:#2ee07f!important}.adm .adm-t-fail{color:#ff7a5c!important}
.adm .adm-drawer{background:rgba(10,10,12,.94)!important;border-left:1px solid var(--a-line)!important}
.adm .adm-drawer-bg{background:rgba(0,0,0,.60)!important}
.adm .adm-mini div,.adm .adm-addr{background:rgba(var(--tm-hi,255,255,255),.10)!important}
.adm-status{background:rgba(var(--tm-hi,255,255,255),.10)!important;border-top:1px solid var(--a-line)!important;color:var(--txt-2)!important}
.adm-s-mode{background:rgba(var(--tm-hi,255,255,255),.14)!important;color:#fff!important}
.adm *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ---------------------------------------------------------------------
   11. PHONE SPEED  -  a blur on every row of a long list is what made it lag.
       At 1.5px it is invisible anyway, so rows go flat on phones/tablets and only
       the header + nav keep their blur.
   --------------------------------------------------------------------- */
@media(max-width:1023px){
  .f,.item,.pos,.tool,.cp-card,.wl-card,.pf-hero,.pf-pos,.holderbox,.curvebox,.commentbox,.pressure,.creator,.grid6,.promo,
  .bigwin-card,.lb-row,.lb-me,.sb-none,.none,.w-note,.ch-voice,.ch-staff,.ch-main,.ch-search,.hotchip,.stf,.dmr,.dmb,
  .dm-quick button,.gsearch input,.qin,.sn-r,.sn-ranges,.cp-chip,.tk-side .sect,.sect-box,.w-list,.ch-tabs button,
  .sn-card,.sn-title,.sn-empty,.sn-auto,.sn-stats,.tl-card,.g-pick .g-card,.g-pick .g-card.real,.cr-in,.cr-card,.cr-stat,
  .sb-sec,.cp-sec,.sect>.cap,.sect .cap,.chipbar,.seg,.tbl-head,.ranks-sheet,.invite-sheet,.pedit,.ctoggle,.qres,.chartwrap,
  .g-addr,.ptop .back,.ptop-btn,.vp .vst,#vc-pill,.cm-mod button,.dk::after,.fab-lock-badge,.win,.win-bar,#dock,.fab-item,
  .au-card,.sn-pop-box,.sc-sheet,.rk-sheet,#toast,.cr-top,#cr-promo .crp-main,#auth,.sn-pop,#gate{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  /* cheaper shadows on long lists */
  .f,.item,.pos,.cp-card,.lb-row,.lb-me,.sn-card,.tl-card{box-shadow:inset 0 0 0 1px var(--gl-edge-2)!important}
  /* the sweeping shine on the creator notification repaints every frame */
  .crp-main::after{animation:none!important;display:none}
  /* keep the one full-screen picture on its own GPU layer */
  html::after{transform:translateZ(0) scale(var(--tm-zm-m,1));will-change:transform}
  /* zoomed in: let the browser redraw the picture at the zoomed size so it stays sharp */
  html.tm-zoomed::after{will-change:auto}
}
@media(max-aspect-ratio:17/20){html::before{display:none!important}}


/* ---------------------------------------------------------------------
   12. ADMIN COMMAND LINE  (white / grey terminal at the bottom of admin)
   --------------------------------------------------------------------- */
.adm-cmd{flex:none;border-top:1px solid var(--a-line);background:rgba(var(--tm-hi,255,255,255),.10);cursor:text}
.adm-out{max-height:132px;min-height:0;overflow-y:auto;padding:8px 16px 2px;font:500 12.5px/1.6 var(--a-mono);color:var(--txt-1);
  scrollbar-width:thin;overscroll-behavior:contain}
.adm-out:empty{display:none}
.adm-ol{white-space:pre-wrap;word-break:break-word}
.adm-ol.me{color:var(--txt);font-weight:700}
.adm-ol.ok{color:#2ee07f}
.adm-ol.err{color:#ff7a5c}
.adm-ol.dim{color:var(--txt-3)}
.adm-cmdline{display:flex;align-items:center;gap:10px;padding:9px 16px calc(9px + 0px)}
.adm-cmdline label{flex:none;font:700 13px var(--a-mono);color:var(--txt);white-space:nowrap}
.adm-cmdline input{flex:1;min-width:0;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;
  font:600 14px var(--a-mono)!important;color:var(--txt)!important;padding:4px 0!important;caret-color:#fff}
.adm-cmdline input::placeholder{color:#85858f!important;font-weight:500}
.adm .adm-cmd .adm-cmdline input{background:transparent!important;border:0!important}
@media(max-width:700px){.adm-cmdline label{font-size:12px}.adm-out{padding:8px 12px 2px;font-size:12px}.adm-cmdline{padding:8px 12px}}

/* ---------------------------------------------------------------------
   13. PROFILE PAGE  -  light glass cards, readable tabs, clean rank chips
   --------------------------------------------------------------------- */
:root{--down:#d9381b}

/* top round buttons */
.ptop .back,.ptop-btn{background:rgba(var(--tm-hi,255,255,255),.13)!important;border:1px solid rgba(var(--tm-hi,255,255,255),.18)!important;color:var(--txt)!important;
  box-shadow:0 4px 14px -8px rgba(0,0,0,.45)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.ptop .back svg,.ptop-btn svg{color:var(--txt)}
.ptop-btn.adm-btn{color:var(--txt)!important;border-color:rgba(var(--tm-hi,255,255,255),.18)!important}
.ptop-btn.rank-btn{border-color:rgba(var(--tm-hi,255,255,255),.18)!important}

/* header card: soft glass instead of a black slab */
.pbanner{min-height:172px;margin:8px 10px 0;border-radius:24px;padding:58px 12px 12px;
  background:linear-gradient(135deg,rgba(var(--tm-hi,255,255,255),.07),rgba(var(--tm-hi,255,255,255),.02))!important;
  border:1px solid rgba(var(--tm-hi,255,255,255),.16);box-shadow:var(--gl-shadow)}
.pbanner::after{background:linear-gradient(180deg,rgba(0,0,0,0) 25%,rgba(0,0,0,.65) 100%)!important}
@media(min-width:1024px){.pbanner{margin:12px 0 0}}
.pid{padding:10px 12px;border-radius:18px;background:rgba(0,0,0,.45);border:1px solid rgba(var(--tm-hi,255,255,255),.16)}
.pid-name{color:var(--txt)!important}
.pid-handle{color:var(--txt-2)!important}
.pid-stats{color:var(--txt-2)!important}
.pid-stats b{color:var(--txt)!important}
.pav{border:0!important;box-shadow:none!important}   /* no ring around the profile picture */
.px-pill{background:rgba(var(--tm-hi,255,255,255),.13)!important;color:var(--txt-1)!important;box-shadow:inset 0 0 0 1px rgba(var(--tm-hi,255,255,255),.10)}
.pedit{border:2px solid rgba(var(--tm-hi,255,255,255),.18)!important}

/* follow / copy */
.pbtn{background:var(--tm-btn,#f3f3f5)!important;color:var(--tm-btn-ink,#0a0a0c)!important;box-shadow:0 8px 18px -10px rgba(0,0,0,.9)}
.pbtn.soft,.pbtn.on{background:rgba(var(--tm-hi,255,255,255),.10)!important;color:var(--txt)!important;
  box-shadow:inset 0 0 0 1px rgba(var(--tm-hi,255,255,255),.14)!important}
.pbtn.copy.on{background:#0b9a45!important;color:#fff!important;box-shadow:none!important}

/* chip row: Demo/Real switch + stats as small pills, no big box around them */
.pchips{background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  padding:12px 2px 0!important;margin:10px 10px 0!important;gap:8px!important;align-items:center}
.pchips>span:not(.pmode){background:rgba(var(--tm-hi,255,255,255),.10);padding:7px 12px;border-radius:99px;
  box-shadow:inset 0 0 0 1px rgba(var(--tm-hi,255,255,255),.16);color:var(--txt-1)}
.pseg{background:rgba(var(--tm-hi,255,255,255),.10)!important;box-shadow:inset 0 0 0 1px rgba(var(--tm-hi,255,255,255),.13)!important}
.pseg button{color:var(--txt-2)!important}
.pseg button[aria-selected="true"]{background:rgba(var(--tm-hi,255,255,255),.16)!important;color:#fff!important}
.pchips .pmode.d{background:rgba(var(--tm-hi,255,255,255),.10)!important;color:#f2b84b!important;border-color:rgba(138,90,0,.35)!important}
.pchips .pmode.r{background:rgba(11,154,69,.14)!important;color:#2ee07f!important;border-color:rgba(11,154,69,.45)!important}

/* rank chips: light glass with a coloured rim per tier (no black plates) */
.pranks{background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:12px 2px 4px!important}
.rankpill{--rc:#c98550;--rc2:#8a4a1c;--rg:rgba(201,133,80,.28);
  background:rgba(var(--tm-hi,255,255,255),.10)!important;color:var(--txt)!important;height:48px;border-radius:16px;
  box-shadow:0 8px 18px -12px rgba(0,0,0,.55)!important}
.rankpill.gold{--rc:#f0b82a;--rc2:#a8700c;--rg:rgba(240,184,42,.30)}
.rankpill.platinum{--rc:#9aa2b8;--rc2:#4a5163;--rg:rgba(120,130,160,.30)}
.rankpill.crrole{--rc:#6fb4ff;--rc2:#2f7be0;--rg:rgba(77,163,255,.34)}
.rankpill.crrole span{-webkit-text-fill-color:#4da3ff!important;color:#4da3ff!important;
  font-family:'Fredoka','Nunito','Varela Round',ui-rounded,'SF Pro Rounded',var(--ui);font-weight:600;font-size:16.5px;letter-spacing:.025em;
  text-shadow:0 0 14px rgba(77,163,255,.55),0 1px 0 rgba(8,40,90,.6);-webkit-font-smoothing:antialiased}
.rankpill.owner{--rc:#4a4e5d;--rc2:var(--tm-btn,#f3f3f5);--rg:rgba(var(--tm-hi,255,255,255),.14)}
.rankpill span{background:none!important;-webkit-text-fill-color:var(--txt)!important;color:var(--txt)!important}
.rankpill.owner::before{background:conic-gradient(from var(--rp-a),#cfcfd6 0%,#ffffff 13%,#cfcfd6 30%,rgba(43,46,56,.25) 50%,#cfcfd6 70%,#ffffff 87%,#cfcfd6 100%)}
.rp-code{color:rgba(var(--tm-hi,255,255,255),.14)!important}
.rankpill.ghost{background:rgba(var(--tm-hi,255,255,255),.07)!important;color:var(--txt-2)!important;border:1px dashed rgba(var(--tm-hi,255,255,255),.16)!important}

/* profit & loss card */
.ppnl{padding:18px 16px 14px!important}
.ppnl-amt{font-size:42px}
.ptf button{color:var(--txt-2)!important}
.ptf button[aria-selected="true"]{background:rgba(var(--tm-hi,255,255,255),.13)!important;color:var(--txt)!important;box-shadow:inset 0 0 0 1px rgba(var(--tm-hi,255,255,255),.14)}

/* stats: six little tiles */
#s-prof .grid6{grid-template-columns:repeat(3,1fr)!important;gap:8px!important;background:none!important;border-radius:0!important;
  box-shadow:none!important;border:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;overflow:visible}
#s-prof .gcell{background:var(--gl-fill)!important;border:1px solid rgba(var(--tm-hi,255,255,255),.16)!important;border-radius:16px!important;
  padding:12px 14px!important;box-shadow:var(--gl-shadow)}
#s-prof .gcell i{font-size:10.5px!important;letter-spacing:.07em!important}
#s-prof .gcell b{font-size:19px!important;font-weight:750!important;margin-top:5px!important}
#s-prof .gcell b.up{color:#2ee07f}
#s-prof .gcell b.down{color:#ff7a5c}

/* positions + history rows */
#s-prof .hrow{border-bottom:1px solid rgba(var(--tm-hi,255,255,255),.05)}
#s-prof .hrow:last-child{border-bottom:0}
#s-prof .holderbox{border:1px solid rgba(var(--tm-hi,255,255,255),.16)}
.wchip{color:var(--txt-1)}

/* the fancy rank animations repaint every frame - off on phones */
@media(max-width:1023px){
  .rankpill.owner::before{animation:none!important}
  .rankpill.owner::after,.rankpill.gold::after{display:none!important}
  .rp-code b{animation:none!important}
  .rank-name.sparkle,.rank-name.sparkle .rank-badge-btn,.rank-name.sparkle-gold .rank-badge-btn,.rank-name.glow-gold .rank-badge-btn{animation:none!important}
  .rank-name.sparkle .owner-code,.pspark{display:none!important}
}