/* ═══════════════════════════════════════════════════════════════════════════
   5MTBot console — skin (2026-09-12)

   Pure presentation, loaded after app.html's own token block. Roll back by
   deleting the <link> just above </head>.

   · Plex Sans carries names, buttons and sentences; Plex Mono carries every
     figure, label and machine line. (The old body font, JetBrains Mono, was
     never loaded, so the console rendered in whatever mono the OS had.)
   · Panels lose their raised header strips and neon glows: structure comes
     from hairlines, emphasis from type weight, colour only means direction.
   · Tabs are an underline, not a pill; the brand mark stops being gradient.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;
  src:url(/fonts/ibm-plex-sans-var.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/ibm-plex-mono-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/ibm-plex-mono-500.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/ibm-plex-mono-600.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --f-sans:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  /* reading face — mono, matching the site-wide typewriter rule (see below) */
  --f-body:var(--f-mono);

  --bg-1:#080b11;
  --surf-1:#0c1019;
  --surf-2:#0f141e;
  --surf-3:#161d2b;
  --line:rgba(148,167,196,.11);
  --line-mid:rgba(148,167,196,.19);
}

/* ─── Base ─── */
/* tw.css ends with a site-wide "typewriter font" rule (Courier New, !important, on *).
   Kept as the brand voice, set in self-hosted IBM Plex Mono. Same selectors + same
   !important, later in the cascade, so this wins. */
*, ::before, ::after,
input, textarea, select, button, .btn, .input, .badge, .stat-value, .stat-title, .stat-desc{font-family:var(--f-body)!important}
body{font-family:var(--f-body)!important;font-size:13px!important;letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  background:
    radial-gradient(900px 520px at -4% -12%,rgba(255,145,56,.055),transparent 60%),
    radial-gradient(820px 540px at 104% 110%,rgba(76,194,255,.045),transparent 60%),
    #080b11!important}
::selection{background:rgba(255,145,56,.32);color:#fff}

/* everything that is a figure, a label or machine output */
#tickerTape,.panel-header,.kpi-cell > div:first-child,#kBankroll,#kPnl,#kTradesToday,#kWinRate,#kBtcFilter,#kResolve,#kBankrollCalc,
#psPnl,#psTrades,#psWins,#psLosses,#psWinRate,#btcpx,#btcch,#selSym,#selPx,#selLab,
#depth,#positions,#activityLog,#logsModalBody,#logFilters,#obsym,
.asset-row .text-right,#appLeft .text-\[10px\],#appLeft .text-\[9px\],
[role=tablist] a,#appHeader > div:last-child > span,body > footer,#appHeader .m-hide-sm{font-family:var(--f-mono)!important}

/* ─── Ticker tape ─── */
#tickerTape{font-size:11px}
#tickerTape > span{margin:0!important;padding:0 18px;gap:7px!important;position:relative}
#tickerTape > span::after{content:"";position:absolute;right:0;top:50%;width:1px;height:11px;margin-top:-5.5px;background:var(--line-mid)}
#tickerTape img{width:14px!important;height:14px!important}
#tickerTape .font-bold{font-weight:500;color:var(--tx-hi)}
#tickerTape > span > span:nth-child(3){color:var(--tx-mid)}

/* ─── Header ─── */
#appHeader{min-height:52px!important;background:#0a0e15!important;box-shadow:0 1px 0 rgba(0,0,0,.45)!important}
#appHeader > div:first-child > a{gap:9px}
#appHeader > div:first-child > a svg{width:22px;height:22px}
#appHeader .gradient-text{background:none!important;-webkit-text-fill-color:currentColor;color:var(--tx-hi);
  font-family:var(--f-sans);font-size:14px;font-weight:600;letter-spacing:.02em}
#appHeader > div:first-child > span{font-family:var(--f-mono);font-size:10px!important;letter-spacing:.02em;
  padding:1px 6px!important;border-radius:4px!important;background:transparent!important;color:var(--tx-low)!important;border-color:var(--line-mid)!important}

[role=tablist]{gap:2px!important}
[role=tablist] a{position:relative;padding:17px 12px 16px!important;border-radius:0!important;border:0!important;
  background:transparent!important;box-shadow:none!important;font-size:11px;font-weight:500!important;letter-spacing:.09em;color:var(--tx-low)!important}
[role=tablist] a:hover{color:var(--tx-hi)!important}
[role=tablist] a:first-child{color:var(--tx-hi)!important}
[role=tablist] a:first-child::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--amber)}

#appHeader > div:last-child{gap:12px!important}
#appHeader > div:last-child > span{font-size:10.5px;letter-spacing:.06em;color:var(--tx-low)}
#appHeader > div:last-child > span.w-2{width:6px!important;height:6px!important;box-shadow:0 0 0 3px rgba(0,229,143,.14)}
#appHeader > div:last-child > a{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0!important;border-radius:8px!important;background:transparent!important;border-color:var(--line-mid)!important}
#appHeader > div:last-child > a:hover{background:var(--surf-3)!important}

.btn-conn,.btn-bot{height:32px;padding:0 13px;border-radius:8px;font-family:var(--f-sans);font-size:12.5px;font-weight:600;letter-spacing:-.005em}
.btn-conn{color:#170b02;background:linear-gradient(180deg,#ffa050,#ff8a2e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.14),0 6px 16px -8px rgba(255,145,56,.75)}
.btn-conn:hover{filter:none;background:linear-gradient(180deg,#ffb068,#ff953f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,0,0,.12),0 10px 22px -10px rgba(255,145,56,.9)}
.btn-conn.connected{font-family:var(--f-mono);font-weight:500;font-size:12px}
.btn-bot{color:#00261a;background:linear-gradient(180deg,#3cf0ab,#00d884);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.14),0 6px 16px -8px rgba(0,229,143,.7)}

/* ─── Panels ─── */
.panel-bg{background:var(--surf-1)!important}
.panel-header{min-height:40px;padding:0 14px!important;background:transparent!important;box-shadow:none!important;
  border-bottom:1px solid var(--line)!important;font-size:10.5px!important;font-weight:500;letter-spacing:.1em!important;color:var(--tx-mid)!important}
#appLeft .panel-header ~ .panel-header,#appRight .panel-header ~ .panel-header{border-top:1px solid var(--line)}
.panel-header svg{stroke:var(--tx-low)!important;color:var(--tx-low)!important;opacity:1!important}
.panel-header .rounded-full.text-\[9px\]{font-size:9.5px!important;font-weight:500!important;letter-spacing:.06em;border-radius:4px!important;padding:1px 6px!important}
.panel-header .text-purple-400{font-size:10px!important;letter-spacing:.08em}

/* watchlist */
.asset-row{padding:11px 14px 11px 12px!important;border-left:2px solid transparent;border-bottom-color:var(--line)!important}
.asset-row::before{display:none!important}
.asset-row:hover{transform:none!important;background:rgba(148,167,196,.04)!important}
.asset-row.active{border-left:2px solid var(--amber)!important;background:linear-gradient(90deg,rgba(255,145,56,.085),rgba(255,145,56,0) 75%)!important}
.asset-row img{width:26px!important;height:26px!important}
.asset-row .font-bold{font-weight:600;font-size:13.5px!important;letter-spacing:-.005em;color:var(--tx-hi)}
.asset-row .uppercase{text-transform:none;font-size:11.5px!important;color:var(--tx-low)}
.asset-row .text-right .font-semibold{font-weight:500;font-size:12.5px!important;color:var(--tx-hi)}
.asset-row .text-right > div:last-child{font-size:11px!important;margin-top:1px}

/* left column readouts */
#appLeft .p-3{padding:14px!important}
#appLeft .text-\[10px\].uppercase,#appLeft .text-\[9px\].uppercase{font-size:10px!important;letter-spacing:.08em!important;color:var(--tx-low)!important}
#appLeft p.text-\[10px\]{font-family:var(--f-body)!important;font-size:12px!important;line-height:1.6!important;color:var(--tx-low)!important;margin-top:12px!important}
#btcpx,#btcch{font-weight:500!important}
#appLeft .text-lg{font-size:20px!important;font-weight:500!important;letter-spacing:-.02em}
#appLeft .h-1\.5{height:4px!important}
#appLeft > a.flex{font-family:var(--f-sans);font-size:12.5px!important;padding:13px 14px!important}

/* KPI strip */
#appMain > .grid.grid-cols-3{background:var(--surf-1)!important}
.kpi-cell{padding:14px 16px 15px!important;border-color:var(--line)!important}
.kpi-cell::before{height:1px!important}
.kpi-cell > div:first-child{font-size:10px!important;font-weight:500;letter-spacing:.1em!important;color:var(--tx-low)!important}
.kpi-cell > div:nth-child(2){margin-top:7px!important;font-size:21px!important;font-weight:500!important;line-height:1.1;letter-spacing:-.03em}
.kpi-cell > div.text-sm:nth-child(2){font-size:16px!important}
#kBankrollCalc{margin-top:5px!important;font-size:10px!important;line-height:1.4!important;color:var(--tx-dim)!important}

/* chart */
.grid-bg{background-image:
  radial-gradient(ellipse 75% 70% at 50% 45%,transparent 35%,#080b11 100%),
  linear-gradient(rgba(148,167,196,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(148,167,196,.04) 1px,transparent 1px)!important;
  background-size:100% 100%,48px 48px,48px 48px!important}
#singleChartView > .absolute.top-4.left-5{top:20px;left:24px}
#selSym{font-size:12px!important;font-weight:500!important;letter-spacing:.1em!important;color:var(--tx-mid)!important}
#selPx{margin-top:4px;font-size:36px!important;font-weight:500!important;letter-spacing:-.04em!important;line-height:1.05;text-shadow:none!important}
#selLab{margin-top:8px!important;font-size:10px!important;letter-spacing:.12em!important;color:var(--tx-dim)!important}
#chartToggleBtn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px!important;background:rgba(12,16,25,.8)!important;border-color:var(--line-mid)!important}
#vbars .b{border-radius:1px 1px 0 0;box-shadow:none;background:linear-gradient(180deg,rgba(76,194,255,.62),rgba(76,194,255,.12))}
#multiChartView > div{border-radius:10px!important;border-color:var(--line)!important}
#multiChartView .font-bold{font-weight:600}

/* right column */
.drow{padding:5px 14px!important;font-size:11.5px!important;border-bottom-color:rgba(148,167,196,.06)!important}
.drow .font-semibold{font-weight:500}
#positions > div{padding:12px 14px!important;border-bottom-color:var(--line)!important}
#positions .text-gray-500{font-family:var(--f-sans)}
#activityLog{font-size:10.5px!important}

/* logs: flat category chips instead of neon badges */
body .log-ico{width:18px;height:18px;border-radius:4px;border-color:transparent;background:color-mix(in srgb,currentColor 13%,transparent)}
body .log-ico::after{display:none}
body .log-row{padding:5px 14px;border-bottom-color:rgba(148,167,196,.055)}
body .log-filter{font-family:var(--f-mono);font-weight:500;border-radius:5px}
#logsModal > div{border-radius:14px!important}
#logsModal .text-sm.font-bold{font-weight:600;font-size:14px}

/* banners + overlay read as sentences */
#restrictBanner,#walletWarn,#botOverlay{font-family:var(--f-sans)}
#botOverlay > div{border-radius:14px!important}

/* status bar */
body > footer{height:30px!important;font-size:10px!important;letter-spacing:.06em;background:#080b11!important;color:var(--tx-dim)!important}
body > footer .w-1\.5{box-shadow:0 0 0 3px rgba(0,229,143,.14)}

@media (max-width:1023px){
  [role=tablist] a{padding:12px 10px 11px!important}
  .kpi-cell > div:nth-child(2){font-size:18px!important}
  #selPx{font-size:30px!important}
}