/* ═══════════════════════════════════════════════════════════════════════════ 5MTBot settings — skin (2026-09-12), the same system as app-skin.css Pure presentation. Linked just above , after the page's token block. The page also declares component styles INSIDE (.cfg-tab, .asset-card, .mode-card, .hlp), which sit later in the cascade — every rule for those is prefixed with #setBody so the ID wins instead. No JS, ids or form markup are touched. Roll back by deleting the . ═══════════════════════════════════════════════════════════════════════════ */ @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} @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} /* ─── Tokens: retone the page's graphite onto the console's cold ink ─── */ :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). Point at var(--f-sans) to swap the page to a sans. */ --f-body:var(--f-mono); --font-ui:var(--f-body); --font-mono:var(--f-mono); --fallback-b1:#080b11; --fallback-b2:#0c1019; --fallback-b3:#0f141e; --fallback-bc:#c9d3e3; --fallback-p:#ff9138; --bg:#080b11; --s1:#0c1019; --s2:#0f141e; --s3:#161d2b; --chrome:#0a0e15; --line:rgba(148,167,196,.11); --line-2:rgba(148,167,196,.19); --ink-0:#eef2f9; --ink-1:#c9d3e3; --ink-2:#94a3bb; --ink-3:#78879f; --ink-4:#5d6b81; --accent:#ff9138; --accent-2:#ffb765; --accent-wash:rgba(255,145,56,.10); --accent-line:rgba(255,145,56,.42); --pos:#00e58f; --warn:#ffc043; --neg:#ff4f70; --info:#4cc2ff; } /* settings.css ends with a site-wide "typewriter font" rule (Courier New, !important, on *). Kept as the brand voice, set in self-hosted 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} html,body{background:var(--bg)} body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.003em} ::selection{background:rgba(255,145,56,.32);color:#fff} .grid-bg{background-image: linear-gradient(to right,rgba(148,167,196,.03) 1px,transparent 1px), linear-gradient(to bottom,rgba(148,167,196,.03) 1px,transparent 1px)} .grid-bg::before{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%)} /* ─── Header — the same bar as /app ─── */ #setHeader{min-height:52px!important;background:var(--chrome)!important;-webkit-backdrop-filter:none;backdrop-filter:none; border-bottom-color:var(--line)!important;box-shadow:0 1px 0 rgba(0,0,0,.45)} #setHeader > div:first-child > a{gap:9px} #setHeader > div:first-child > a svg{width:22px;height:22px} #setHeader .gradient-text{background:none;-webkit-text-fill-color:currentColor;color:var(--ink-0);font-size:14px;font-weight:600;letter-spacing:.02em} .nav-ver{font-size:10px;font-weight:400;letter-spacing:.02em;padding:1px 6px;border-radius:4px;color:var(--ink-3);border-color:var(--line-2)} .nav-seg{gap:2px;padding:0;border:0;border-radius:0;background:transparent} .nav-tab{position:relative;padding:17px 12px 16px;border-radius:0;background:transparent!important;box-shadow:none!important; font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)} .nav-tab:hover{color:var(--ink-0)} .nav-tab.is-on{color:var(--ink-0)} .nav-tab.is-on::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--accent)} #setHeader > div:last-child{gap:9px!important;font-size:10.5px!important;letter-spacing:.06em;color:var(--ink-3)!important} #setHeader > div:last-child > span.w-1\.5{flex:none;width:6px;height:6px;box-shadow:0 0 0 3px rgba(0,229,143,.14)} /* ─── Columns + panels ─── */ #setLeft,#setRight{padding:24px!important;gap:18px!important} #setLeft{border-right-color:var(--line)!important} #setBody .panel{border-radius:12px;background:var(--s1);border-color:var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 24px 50px -40px #000} #setLeft > .panel.glow{border-color:var(--line-2)} #setBody .panel-header{min-height:46px;padding:0 18px;border-radius:12px 12px 0 0;border-bottom-color:var(--line); font-size:10.5px!important;font-weight:500!important;letter-spacing:.1em;color:var(--ink-2)} #setBody .panel-header svg{width:15px;height:15px;opacity:1;stroke:var(--ink-3)} #setLeft > .panel.glow .panel-header{color:var(--ink-0)} #setBody .panel-header .text-purple-400{padding:5px 9px;border:1px solid var(--line-2);border-radius:6px; font-size:10px!important;font-weight:500;letter-spacing:.08em;color:var(--ink-2)!important} #setBody .panel-header .text-purple-400:hover{color:var(--ink-0)!important;border-color:rgba(148,167,196,.34)} #setBody .p-5{padding:20px!important} #setBody .p-5.pt-4{padding-top:18px!important} /* micro labels, notes */ #setBody .text-\[10px\].uppercase,#setBody .text-\[9px\].uppercase{font-size:10px!important;font-weight:500;letter-spacing:.09em!important;color:var(--ink-3)} #setBody .uppercase.text-gray-300{color:var(--ink-1)!important} #setBody .normal-case{font-size:10.5px;letter-spacing:0!important;color:var(--ink-4)!important} #setBody p.text-\[10px\]{font-size:11.5px!important;line-height:1.65!important;color:var(--ink-3)!important} #setBody p.text-\[10px\] b{color:var(--ink-1)!important;font-weight:600} /* ─── Inputs ─── */ #setBody .input-styled{height:36px;min-height:36px;padding:0 12px;border-radius:8px!important; background:#0a0e15!important;border-color:var(--line-2)!important;font-size:12.5px!important} #setBody .input-styled.input-xs{height:30px;min-height:30px;padding:0 9px} #setBody .input-styled:hover{border-color:rgba(148,167,196,.3)!important} #setBody .input-styled:focus,#setBody .input-styled:focus-visible{background:#0d121b!important;border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(255,145,56,.16)!important} #setBody .input-styled::placeholder{color:var(--ink-4)} #setBody .checkbox{border-radius:5px} /* ─── Primary action ─── */ #setBody .btn-accent-solid{height:44px;min-height:44px;border-radius:9px;font-size:12.5px;font-weight:600;letter-spacing:.08em; background:linear-gradient(180deg,#ffa050,#ff8a2e)!important;color:#170b02!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.14),0 10px 24px -14px rgba(255,145,56,.9)} #setBody .btn-accent-solid:hover{filter:none;background:linear-gradient(180deg,#ffb068,#ff953f)!important} /* ─── Wallet / fees / stats ─── */ #walletInfo > div{border-radius:8px!important} #setBody .fee-card{padding:15px 16px;border-radius:10px;background:var(--s2);border-color:var(--line)} #setBody .fee-card:hover{background:var(--s3);border-color:var(--line-2)} #setBody .fee-card .font-bold{font-size:14px!important;font-weight:600;color:var(--ink-0)} #setBody .fee-card.active{border-color:var(--accent-line);box-shadow:inset 2px 0 0 var(--accent); background:linear-gradient(90deg,rgba(255,145,56,.10),rgba(255,145,56,.02) 70%)} #setBody .fee-card [id^=feeBadge]{padding:2px 7px!important;border-radius:4px!important;font-size:9.5px!important;font-weight:500!important;letter-spacing:.08em} #statTrades,#statEarned{font-size:26px!important;font-weight:500!important;letter-spacing:-.035em;line-height:1.15} #statBots,#setLeft .panel .text-xl{font-size:20px!important;font-weight:500!important;letter-spacing:-.025em} #setLeft .panel .grid.grid-cols-2{row-gap:22px} #setLeft .panel .text-\[9px\]{font-size:10.5px!important;color:var(--ink-4)!important} /* ─── Strategy picker ─── */ #cfgTabBar{gap:2px!important;padding:6px 12px 0!important} #setBody .cfg-tab{padding:12px 14px 13px;border:0;border-radius:0;background:transparent!important; font-size:11px;font-weight:500;letter-spacing:.09em} #setBody .cfg-tab:hover{color:var(--ink-0)} #setBody .cfg-tab.active{color:var(--ink-0)} #setBody .cfg-tab.active::after{height:2px;border-radius:2px 2px 0 0;background:var(--accent)} #setBody .cfg-tab::before{width:6px;height:6px;box-shadow:none!important} #setBody .tag{padding:3px 6px;font-size:9px;font-weight:500;letter-spacing:.06em} #runningStrategyBanner{margin:16px 20px 0!important;padding:9px 12px!important;gap:10px!important;border-radius:8px!important; font-size:11.5px!important;background:rgba(148,167,196,.04)!important} #setBody .const-hero{padding:18px 20px;border-radius:10px;border-color:var(--line);border-left:2px solid var(--accent); background:linear-gradient(90deg,rgba(255,145,56,.07),rgba(255,145,56,0) 60%),var(--s2)} #setBody .const-title{font-size:20px;font-weight:600;letter-spacing:-.02em} #setBody .const-hero p{font-size:12.5px!important;line-height:1.72!important;color:var(--ink-1)!important} #constActive{border-radius:4px!important;font-weight:500!important;letter-spacing:.06em} /* choice cards: market / mode / DCA / strictness */ #setBody .asset-card,#setBody .mode-card{min-height:58px;padding:11px 8px;gap:4px;border-radius:9px; background:var(--s2);border-color:var(--line);font-size:11.5px;font-weight:600;letter-spacing:.07em;color:var(--ink-2)} #setBody .asset-card span,#setBody .mode-card span{font-size:10px;font-weight:400;letter-spacing:0;color:var(--ink-3)} #setBody .asset-card:hover,#setBody .mode-card:hover{background:var(--s3);border-color:var(--line-2);color:var(--ink-0)} #setBody .asset-card.active,#setBody .mode-card.active{color:var(--ink-0);border-color:var(--accent-line); background:linear-gradient(180deg,rgba(255,145,56,.13),rgba(255,145,56,.03))} #setBody .asset-card.active span,#setBody .mode-card.active span{color:var(--accent-2)} /* numeric field grids */ #setBody .cfg,#setBody .cfg-const{column-gap:28px!important;row-gap:10px!important} #setBody .cfg label,#setBody .cfg-const label{min-height:32px;font-size:12px;color:var(--ink-2)!important} #setBody .p-5 .flex.items-center.gap-2.text-\[11px\]{flex-wrap:wrap;font-size:12px!important;color:var(--ink-2)} /* trading-hours heatmap */ #setBody [id^=hourGrid]{gap:4px!important} #setBody .hour-cell{height:30px;border-radius:5px;border-color:rgba(148,167,196,.1);font-size:10.5px;font-weight:500} /* inset groups (trade direction, streak reversal) */ #setBody .p-3.rounded-lg{padding:14px 16px!important;border-radius:10px!important} #setBody label.cursor-pointer .text-\[11px\]{font-size:12px!important} /* ─── API connections + engine readouts ─── */ #setBody .tile{border-radius:9px!important;background:var(--s2)!important;border-color:var(--line)} #setBody .tile .text-xs.font-bold{font-size:12.5px!important;font-weight:600;color:var(--ink-0)} #setBody .tile .text-\[9px\]:not(.uppercase){font-size:10.5px!important;color:var(--ink-3)} #setBody .tile > span.rounded{padding:3px 7px!important;border-radius:4px;font-size:9.5px!important;font-weight:500!important;letter-spacing:.08em} #engLatency,#engUptime,#engOps,#engGas,#engBlock,#setRight .tile .font-bold.text-purple-400{font-size:15px;font-weight:500!important;letter-spacing:-.01em} #setRight .tile .font-bold.text-purple-400{color:var(--ink-0)!important} #engLog{font-size:11px!important;line-height:1.75} /* help "?" + tooltip */ #setBody .hlp{width:14px;height:14px;font-size:9px;font-weight:500;background:transparent;border-color:var(--line-2);color:var(--ink-3)} /* the script inserts "?" straight after a heading's first text node, so the "(averaging down…)" / "· UTC" tail that follows needs its own gap */ #setBody .uppercase > .hlp{margin-right:7px} body #hlpTip{border-radius:8px;background:#111723;border-color:var(--line-2);font-size:12px;line-height:1.55} /* ─── Status bar ─── */ body > footer{height:30px!important;font-size:10px!important;letter-spacing:.06em;background:#080b11!important; -webkit-backdrop-filter:none;backdrop-filter:none;border-top-color:var(--line)!important;color:var(--ink-4)!important} body > footer > span.w-1\.5{flex:none;width:6px;height:6px;box-shadow:0 0 0 3px rgba(0,229,143,.14)} /* ─── Tablet + phone ─── */ @media (max-width:900px){ #setHeader{padding:0 12px!important;row-gap:0!important} .nav-tab{padding:15px 9px 14px} .nav-tab.is-on::after{left:9px;right:9px} #setHeader > div:last-child{width:100%;padding:8px 0 10px;border-top:1px solid var(--line)} #setLeft,#setRight{padding:14px!important;gap:14px!important} #setBody .input-styled.input-xs{height:40px} } @media (max-width:460px){ #setBody .cfg-const{grid-template-columns:1fr!important} .nav-tab{padding:15px 7px 14px;font-size:10.5px;letter-spacing:.06em} #runningStrategyBanner{margin:14px 14px 0!important} body > footer > span:not(:first-child):not(.ml-auto){display:none} }