/* ═══════════════════════════════════════════════════════════════════════════ 5MinuteBot settings — skin (2026-09-12), the same system as app-skin.css Written for THIS page's markup, which is older than 5mtbot's settings page (no token block, colour-coded pill tabs, an aurora backdrop, inline-styled wallet button and banners). Pure presentation: no JS, ids or form markup touched. Linked just above ; the component styles the page declares INSIDE (.cfg-tab*, .asset-card, .mode-card, .hour-cell, .hlp) are beaten with #setBody-prefixed selectors. 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} :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 below */ --f-body:var(--f-mono); --bg:#0a0b13; --s1:#10111c; --s2:#13141f; --s3:#1a1b29; --chrome:#0c0d16; --line:rgba(160,165,210,.11); --line-2:rgba(160,165,210,.19); --ink-0:#f1f2fa; --ink-1:#cfd2e6; --ink-2:#9ea3bd; --ink-3:#767c98; --ink-4:#5b607a; --violet:#7c5cff; --violet-hi:#a78bfa; --cyan:#22d3ee; --pos:#22e39a; } /* settings.css ends with a site-wide "typewriter font" rule (Courier New, !important). Kept as the brand voice, set in self-hosted Plex Mono; same selectors, later. */ *, ::before, ::after, input, textarea, select, button, .btn, .input, .badge, .stat-value, .stat-title, .stat-desc{font-family:var(--f-body)!important} body{background: radial-gradient(900px 520px at -4% -12%,rgba(124,92,255,.07),transparent 60%), radial-gradient(820px 540px at 104% 110%,rgba(34,211,238,.045),transparent 60%), var(--bg)!important; color:var(--ink-1)!important;letter-spacing:-.003em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} ::selection{background:rgba(124,92,255,.34);color:#fff} /* the aurora blobs + star specks become a faint engineering grid */ .grid-bg{background-color:transparent!important; background-image:linear-gradient(to right,rgba(160,165,210,.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(160,165,210,.03) 1px,transparent 1px)!important; background-size:48px 48px!important;background-repeat:repeat!important} .grid-bg::before{opacity:0!important} /* ─── Header — the same bar as /app ─── */ #setHeader{min-height:52px!important;background:var(--chrome)!important;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} #setHeader > div:first-child > span{padding:1px 6px!important;border-radius:4px!important;background:transparent!important; border:1px solid var(--line-2);color:var(--ink-3)!important;font-size:10px!important;letter-spacing:.02em} #setHeader [role=tablist]{gap:2px!important} #setHeader [role=tablist] a{position:relative;padding:17px 12px 16px!important;border-radius:0!important;background:transparent!important; box-shadow:none!important;font-size:11px;font-weight:500!important;letter-spacing:.09em;color:var(--ink-3)!important} #setHeader [role=tablist] a:hover{color:var(--ink-0)!important} #setHeader [role=tablist] a:nth-child(2){color:var(--ink-0)!important} #setHeader [role=tablist] a:nth-child(2)::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--violet)} #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-2{flex:none;width:6px!important;height:6px!important;box-shadow:0 0 0 3px rgba(34,227,154,.14)} /* ─── Columns + panels ─── */ #setLeft,#setRight{padding:24px!important;gap:18px!important} #setLeft{border-right-color:var(--line)!important} #setBody .panel{background:var(--s1)!important;border:1px solid var(--line)!important;border-radius:12px!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 24px 50px -40px #000!important} #setBody .panel.glow{border-color:var(--line-2)!important} #setBody .panel-header{display:flex;min-height:46px;padding:0 18px!important;background:transparent!important;border-radius:12px 12px 0 0!important; border-bottom:1px solid var(--line)!important;font-size:10.5px!important;font-weight:500!important;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #setBody .panel-header svg{width:15px;height:15px;stroke:var(--ink-3)!important} #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(160,165,210,.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)!important} #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 b,#setBody .text-purple-300{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:#0b0c15!important;border:1px solid var(--line-2)!important;color:var(--ink-0)!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(160,165,210,.3)!important} #setBody .input-styled:focus,#setBody .input-styled:focus-visible{outline:none;background:#0e0f1a!important; border-color:var(--violet)!important;box-shadow:0 0 0 3px rgba(124,92,255,.18)!important} #setBody .input-styled::placeholder{color:var(--ink-4)} #setBody .checkbox{border-radius:5px} /* ─── Primary actions: the wallet button and every "use strategy" button ─── */ #wbtn,#setBody button[onclick^="save"]{height:44px;min-height:44px;border:0!important;border-radius:9px!important; font-size:12.5px!important;font-weight:600!important;letter-spacing:.08em!important;color:#fff!important; background:linear-gradient(180deg,#9377ff,#7352ff)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.18),0 10px 24px -14px rgba(124,92,255,.95)!important} #wbtn:hover,#setBody button[onclick^="save"]:hover{filter:none;background:linear-gradient(180deg,#a08aff,#7e60ff)!important} #walletInfo > div{border-radius:8px!important} /* ─── Fees + stats ─── */ #setBody .fee-card{padding:15px 16px;border:1px solid var(--line)!important;border-radius:10px;background:var(--s2);box-shadow:none;transition:background .16s,border-color .16s} #setBody .fee-card:hover{background:var(--s3);border-color:var(--line-2)!important} #setBody .fee-card.active{border-color:rgba(124,92,255,.45)!important;box-shadow:inset 2px 0 0 var(--violet); background:linear-gradient(90deg,rgba(124,92,255,.11),rgba(124,92,255,.02) 70%)} #setBody .fee-card .font-bold{font-size:14px!important;font-weight:600;color:var(--ink-0)} #setBody [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;animation:none!important} #statTrades{background:none!important;-webkit-text-fill-color:currentColor;color:var(--ink-0)!important} #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: colour-coded pills become one underline tab row ─── */ #cfgTabBar{gap:2px!important;padding:6px 12px 0!important;border-bottom-color:var(--line)!important} #setBody .cfg-tab,#setBody .cfg-tab:hover,#setBody .cfg-tab.active{position:relative;padding:12px 14px 13px;border:0!important;border-radius:0!important; background:transparent!important;box-shadow:none!important;font-size:11px;font-weight:500;letter-spacing:.09em} #setBody .cfg-tab{color:var(--ink-3)} #setBody .cfg-tab:hover{color:var(--ink-0)} #setBody .cfg-tab.active{color:var(--ink-0)} #setBody .cfg-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px 2px 0 0;background:var(--violet)} #tabConstBtn > span:not(:first-child){margin-left:4px} #tabConstBtn span[class*="rounded"]{padding:2px 5px!important;border-radius:4px!important;background:transparent!important; border:1px solid var(--line-2)!important;color:var(--ink-3)!important;font-size:8.5px!important;font-weight:500!important;letter-spacing:.08em} #runningStrategyBanner{margin:16px 20px 0!important;padding:9px 12px!important;gap:10px!important;border-radius:8px!important; font-size:11.5px!important;color:var(--ink-2);background:rgba(160,165,210,.04)!important;border:1px solid var(--line)!important} #runningStrategyBanner > span:first-child{font-size:10px!important;color:var(--pos)} #runningStrategyName{color:var(--ink-0);font-weight:600} /* the Constellation intro box: inline cyan border + gradient, and its p-4 is not in settings.css (so it had no padding) */ #cfgConstellation > .rounded-xl.mb-4{margin-bottom:18px!important;padding:18px 20px!important;border-radius:10px!important; border:1px solid var(--line)!important;border-left:2px solid var(--cyan)!important; background:linear-gradient(90deg,rgba(34,211,238,.07),rgba(34,211,238,0) 60%),var(--s2)!important} #cfgConstellation > .rounded-xl.mb-4 .text-lg{font-size:20px!important;font-weight:600!important;letter-spacing:-.02em;color:var(--ink-0)!important} #cfgConstellation > .rounded-xl.mb-4 p{margin-top:8px!important;font-size:12.5px!important;line-height:1.72!important;color:var(--ink-1)!important} #cfgConstellation > .rounded-xl.mb-4 p b{color:#fff!important;font-weight:600} #constActive{border-radius:4px!important;font-weight:500!important;letter-spacing:.06em} /* choice cards: market / mode / DCA / strictness */ #setBody .asset-card,#setBody .mode-card{justify-content:center;min-height:58px;padding:11px 8px;gap:4px;border-radius:9px; background:var(--s2);border:1px solid var(--line);box-shadow:none;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:rgba(124,92,255,.45);box-shadow:none; background:linear-gradient(180deg,rgba(124,92,255,.14),rgba(124,92,255,.03))} #setBody .asset-card.active span,#setBody .mode-card.active span{color:var(--violet-hi)} /* 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(160,165,210,.1);font-size:10.5px;font-weight:500} #setBody .hour-cell:hover{transform:none;border-color:rgba(124,92,255,.5)} /* inset groups + tiles in the right column (trade direction, streak reversal, API rows, engine readouts) */ #setRight .p-3.rounded-lg{padding:14px 16px!important;border-radius:10px!important;background:var(--s2)!important;border:1px solid var(--line)!important} #setRight .p-3.rounded-lg .text-xs.font-bold{font-size:12.5px!important;font-weight:600;color:var(--ink-0)} #setRight .p-3.rounded-lg span.rounded{padding:3px 7px!important;border-radius:4px!important;font-size:9.5px!important;font-weight:500!important;letter-spacing:.08em} #setBody label.cursor-pointer .text-\[11px\]{font-size:12px!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)} #setBody .uppercase > .hlp{margin-right:7px} body #hlpTip{border-radius:8px;background:#141525;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:#0a0b13!important; 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(34,227,154,.14)} ::-webkit-scrollbar-thumb{background:rgba(160,165,210,.2)!important} /* ─── Tablet + phone ─── */ @media (max-width:900px){ #setHeader{padding:0 12px!important;row-gap:0!important} #setHeader [role=tablist] a{padding:15px 9px 14px!important} #setHeader [role=tablist] a:nth-child(2)::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} #setLeft{border-bottom-color:var(--line)!important} #setBody .input-styled.input-xs{height:40px} #cfgTabBar .cfg-tab{border-radius:0!important} } @media (max-width:460px){ #setBody .cfg-const{grid-template-columns:1fr!important} #setHeader [role=tablist] a{padding:15px 7px 14px!important;font-size:10.5px;letter-spacing:.06em} #runningStrategyBanner{margin:14px 14px 0!important} }