/* grey.css - one grey/black look. Loaded last.
   1. default background (no theme picked) is neutral grey-black instead of teal
   2. leaderboard "Real traders" / "Demo traders" headings: normal size, no glowing green dot
   3. profile REAL / DEMO chip: small grey pill, no green glow or pulse
   4. leaderboard accents (tab underline, "your rank", your row) are white/grey, not green
   Profit and loss colours are left alone on purpose. */

/* 1. default background. Only used until a theme or picture is chosen in Themes. */
:root{
  --tm-def-fallback:
    radial-gradient(60% 50% at 12% 0%,rgba(77,163,255,.22),transparent 62%),
    radial-gradient(50% 45% at 92% 12%,rgba(99,102,241,.16),transparent 62%),
    linear-gradient(180deg,#0b1a33 0%,#08142a 55%,#050c1c 100%);
}
html::after{background-color:#06101f}

/* header Plans button: same size as its neighbours, plain grey */
.plans-btn{color:var(--txt-1)}

/* 2. leaderboard + copy lists: section headings */
#s-calls .sb-sec,#s-copy .sb-sec{
  margin:24px 4px 10px!important;gap:4px 8px;
  font:650 14px/1.2 var(--ui,inherit)!important;letter-spacing:0!important;color:var(--txt-1)!important;text-shadow:none!important}
#s-calls .sb-sec::before,#s-copy .sb-sec::before,
#s-calls .sb-sec.is-real::before,#s-copy .sb-sec.is-real::before{
  width:6px;height:6px;background:#7d828f!important;box-shadow:none!important}
#s-calls .sb-sec em,#s-copy .sb-sec em{font:500 12px/1 var(--ui,inherit);color:var(--txt-3)}

/* 3. profile REAL / DEMO */
.pmode,.pmode.r,.pmode.d,
.pchips .pmode,.pchips .pmode.r,.pchips .pmode.d,
.sb-sec i.r,.sb-sec i.d{
  background:rgba(255,255,255,.07)!important;color:var(--txt-2)!important;
  border:1px solid rgba(255,255,255,.10)!important;box-shadow:none!important;
  font-size:10.5px!important;font-weight:700!important;letter-spacing:.06em}
.pchips .pmode{padding:4px 10px 4px 8px;gap:6px}
.pmode .ld,.pmode.r .ld{box-shadow:none!important;animation:none!important;opacity:.7}

/* 4. leaderboard accents */
#s-calls .seg button[aria-selected="true"]{box-shadow:inset 0 -2px 0 rgba(255,255,255,.85)!important}
#s-calls .lb-me b{color:var(--txt)!important}
#s-calls .lb-row.me,#s-copy .lb-row.me{background:rgba(255,255,255,.05)!important}
#s-calls .lb-row.me::before,#s-copy .lb-row.me::before{background:rgba(255,255,255,.55)!important;box-shadow:none!important}

/* 5. Content Creator: blue picture page */
/* (creator picture default now comes from glass.css again: the blue one) */

/* 6. Content Creator name: round, chunky, blue, soft glow. Used wherever the name shows (chat, board, profile). */
.rank-name.creator-name,.rk-name.rk-creator{
  font-family:'Fredoka','Nunito','Varela Round',ui-rounded,'SF Pro Rounded',var(--ui)!important;
  font-weight:700!important;letter-spacing:.02em;color:#5eb0ff!important;
  text-shadow:0 0 10px rgba(77,163,255,.55),0 1px 0 rgba(8,40,100,.75);
  -webkit-font-smoothing:antialiased}
.pid-name .creator-name{text-shadow:0 0 16px rgba(77,163,255,.65),0 2px 0 rgba(8,40,100,.7)}
.rankpill.crrole span{font-weight:700!important}

/* 7. Auto-buy sheet */
.as-box{padding:20px 16px 0;max-height:90vh;display:flex;flex-direction:column;gap:0}
.as-top{display:flex;align-items:center;gap:12px;padding-right:38px}
.as-ico{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:var(--txt);
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--line)}
.as-top .as-hd{flex:1;min-width:0;padding-right:0}
.as-hd b{font-size:18px;font-weight:750;letter-spacing:-.02em}
.as-state{flex:none;padding:4px 10px;border-radius:99px;font-size:11.5px;font-weight:750;letter-spacing:.04em;
  color:var(--txt-3);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line)}
.as-state.on{color:var(--txt);background:rgba(255,255,255,.14)}
.as-note{margin:14px 0 12px;font-size:12.5px;line-height:1.5;color:var(--txt-2)}
.as-alert,.as-why{margin:0 0 12px;padding:10px 12px;border-radius:12px;font-size:12.5px;line-height:1.45;color:var(--txt-2);
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line)}
.as-alert{color:var(--txt-1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.as-alert b,.as-why b{display:block;margin-bottom:2px;font-size:11.5px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-1)}
.as-why i{font-style:normal;opacity:.55}
.as-seg{border-radius:12px}
.as-seg button{padding:11px 6px;border-radius:9px;cursor:pointer}
.as-sec{margin-top:16px}
.as-lbl{margin:0 2px 8px;font-size:11.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.as-sub{margin:12px 2px 6px;font-size:12.5px;font-weight:600;color:var(--txt-2)}
.as-grid{margin:0;gap:8px}
.as-grid.as-g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:360px){.as-grid.as-g3{grid-template-columns:1fr 1fr}}
.as-f input{padding:11px 10px;font-size:16px;border-radius:11px;background:rgba(255,255,255,.05)}
.as-f input:focus{border-color:rgba(255,255,255,.4);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.as-f span{font-size:12px}
.as-ack{margin:16px 2px 0}
.as-ack input{accent-color:#8a8f9d}
/* Best / Save stay in view while the sheet scrolls */
.as-foot{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:1fr 1.2fr;gap:8px;margin:16px -16px 0;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(10,10,12,0),rgba(10,10,12,.94) 28%);}
.as-foot .as-best,.as-foot .as-save{margin:0;width:auto;padding:13px 10px;font-size:14px;cursor:pointer}
.as-foot .as-save{color:#0a0a0c;background:var(--tm-btn,#f3f3f5);box-shadow:none}
.as-bestnote{margin:0 0 6px;text-align:center}
.as-lbl-log{margin-top:10px}
.as-log{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}


/* =====================================================================
   8. ADMIN PANEL - cleaner grey layout (colours still follow Themes)
   ===================================================================== */
.adm{--a-r:18px;--a-surf:rgba(var(--tm-hi,255,255,255),.055);--a-edge:rgba(var(--tm-hi,255,255,255),.10)}
.adm-dots{display:none!important}

/* top bar */
.adm .adm-top{padding:calc(13px + env(safe-area-inset-top,0px)) 24px 13px!important;gap:12px!important;
  background:rgba(0,0,0,.42)!important;border-bottom:1px solid var(--a-edge)!important}
.adm .adm-top h1{font-size:18px!important;font-weight:780!important;letter-spacing:-.03em!important}
.adm .adm-top h1 em{display:none}
.adm .adm-top h1 i{font-size:10.5px!important;font-weight:700!important;letter-spacing:.07em!important;
  padding:4px 9px!important;border-radius:99px!important;border:0!important}
.adm .adm-x{padding:8px 16px!important;border-radius:99px!important;font-size:13px!important;font-weight:650!important;
  border:1px solid var(--a-edge)!important}

/* side nav */
.adm .adm-nav{width:216px!important;padding:16px 12px!important;gap:3px!important;
  background:rgba(0,0,0,.30)!important;border-right:1px solid var(--a-edge)!important}
.adm .adm-nav button{position:relative;padding:11px 13px!important;border-radius:13px!important;font-size:14px!important;font-weight:620!important;
  transition:background .12s,color .12s}
.adm .adm-nav button svg{opacity:.7}
.adm .adm-nav button.sel svg{opacity:1}
.adm .adm-nav .adm-ix{margin-left:auto;order:5;font:600 10.5px var(--num,inherit);color:var(--txt-3)!important;opacity:.7}
.adm .adm-nav button.sel{background:rgba(var(--tm-hi,255,255,255),.12)!important;
  box-shadow:inset 0 0 0 1px rgba(var(--tm-hi,255,255,255),.12)!important}
.adm .adm-nav button.sel::before{content:"";position:absolute;left:-12px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:#e9e9ec}

/* page area */
.adm .adm-main{padding:32px 36px calc(80px + env(safe-area-inset-bottom,0px))!important}
.adm .adm-h{margin-bottom:24px!important}
.adm .adm-h h2{font-size:27px!important;font-weight:800!important;letter-spacing:-.04em!important}
.adm .adm-h p{margin-top:6px!important;font-size:14px!important;color:var(--txt-2)!important}

/* cards + stats */
.adm .adm-card{padding:20px!important;border-radius:var(--a-r)!important;border:0!important;
  background:linear-gradient(180deg,rgba(var(--tm-hi,255,255,255),.075),rgba(var(--tm-hi,255,255,255),.035))!important;
  box-shadow:inset 0 0 0 1px var(--a-edge)!important}
.adm .adm-card h3{margin-bottom:16px!important;font-size:14px!important;font-weight:720!important}
.adm .adm-grid{gap:14px!important}
.adm .adm-stat small{margin-bottom:11px!important;font-size:11px!important;letter-spacing:.08em!important;color:var(--txt-2)!important}
.adm .adm-stat b{font-size:29px!important;font-weight:760!important;letter-spacing:-.03em!important}
.adm .adm-stat span{margin-top:10px!important;font-size:12.5px!important;color:var(--txt-3)!important}
.adm .adm-mini div{border-radius:14px!important;border:0!important;box-shadow:inset 0 0 0 1px var(--a-edge)}
.adm .adm-note{border-radius:16px!important;border-color:rgba(var(--tm-hi,255,255,255),.14)!important;
  background:rgba(var(--tm-hi,255,255,255),.06)!important}
.adm .adm-note b{color:var(--txt)!important}

/* search, chips, buttons */
.adm .adm-q{border-radius:13px!important;padding:11px 15px!important;background:rgba(0,0,0,.28)!important;border:1px solid var(--a-edge)!important}
.adm .adm-chips button{border-radius:99px!important;padding:8px 14px!important;font-weight:620!important;border-color:var(--a-edge)!important}
.adm .adm-btn{border-radius:12px!important;padding:9px 15px!important;font-weight:650!important}

/* user rows */
.adm .adm-urow{padding:14px 16px!important;border-radius:16px!important;border:0!important;
  background:rgba(var(--tm-hi,255,255,255),.055)!important;box-shadow:inset 0 0 0 1px var(--a-edge)}
.adm .adm-av{width:40px!important;height:40px!important}
.adm .adm-chip{border-radius:99px!important;padding:3px 9px!important}

/* tables */
.adm .adm-tblw{border:0!important;border-radius:var(--a-r)!important;box-shadow:inset 0 0 0 1px var(--a-edge);
  background:rgba(var(--tm-hi,255,255,255),.04)!important}
.adm .adm-tbl th{padding:13px 16px!important;font-size:10.5px!important;letter-spacing:.08em!important}
.adm .adm-tbl td{padding:13px 16px!important;border-bottom-color:rgba(var(--tm-hi,255,255,255),.06)!important}
.adm .adm-logs{border-radius:var(--a-r);box-shadow:inset 0 0 0 1px var(--a-edge)}

/* drawer */
.adm .adm-drawer{border-left:1px solid var(--a-edge)!important;padding-left:26px!important;padding-right:26px!important}
.adm .adm-dh h3{font-size:21px!important;font-weight:780!important}
.adm .adm-dx{border-radius:50%!important}
.adm .adm-sec>h4{margin-bottom:13px!important}

/* command bar + status bar */
.adm .adm-cmd{background:rgba(0,0,0,.42)!important;border-top:1px solid var(--a-edge)!important}
.adm .adm-cmdline label{color:var(--txt-2)!important;font-weight:600!important}
.adm .adm-status{display:flex;align-items:center;gap:12px;padding:7px 16px calc(7px + env(safe-area-inset-bottom,0px));
  font-size:11.5px;font-weight:600;background:rgba(0,0,0,.5)!important;border-top:1px solid var(--a-edge)!important}
.adm .adm-s-mode{padding:3px 9px;border-radius:99px;font-size:10px;font-weight:750;letter-spacing:.07em}
.adm .adm-s-sp{flex:1}
.adm #adm-s-clock{font-family:var(--num,inherit);color:var(--txt-3)}

@media(max-width:860px){
  .adm .adm-top{padding:calc(11px + env(safe-area-inset-top,0px)) 14px 11px!important}
  .adm .adm-nav{width:auto!important;padding:10px 12px!important;border-right:0!important;border-bottom:1px solid var(--a-edge)}
  .adm .adm-nav button{padding:9px 15px!important;border-radius:99px!important}
  .adm .adm-nav .adm-ix{display:none}
  .adm .adm-nav button.sel::before{display:none}
  .adm .adm-nav button.sel{box-shadow:inset 0 0 0 1px rgba(var(--tm-hi,255,255,255),.2)!important}
  .adm .adm-main{padding:20px 14px calc(84px + env(safe-area-inset-bottom,0px))!important}
  .adm .adm-h h2{font-size:23px!important}
  .adm .adm-stat b{font-size:23px!important}
  .adm .adm-card{padding:16px!important}
  .adm .adm-drawer{padding-left:18px!important;padding-right:18px!important}
}

/* starter look: no picture behind the site until a theme or picture is chosen in Themes.
   The default picture is a blue/teal animation that tints every transparent row and card; without it the
   grey-black glow above shows instead. Picking a theme still replaces this as before. */
:root{--tm-def-site:var(--tm-def-creator)}
@media(max-width:700px),(max-aspect-ratio:1/1){:root{--tm-def-site:var(--tm-def-creator-m)}}
html::after{background-color:#06101f}