/* TradeBot — dark theme */
:root {
  color-scheme: dark;
  --bg: #06080c; --bg2: #0a0d13; --panel: #10141c; --panel2: #161b25; --panel3: #1d2330;
  --ink: #eef1f7; --mute: #8a93a6; --line: #232a37;
  --blue: #4f8cff; --violet: #a66bff; --cyan: #22d3ee; --green: #22e58b; --red: #ff4d6d;
  --amber: #ffb020; --pink: #ff5fa2;
  --accent: var(--blue); --good: var(--green); --bad: var(--red); --warn: var(--amber);
  --good-bg: rgba(34, 229, 139, .12); --bad-bg: rgba(255, 77, 109, .13); --warn-bg: rgba(255, 176, 32, .13);
  --grad: linear-gradient(135deg, #4f8cff 0%, #a66bff 55%, #ff5fa2 100%);
}
* { box-sizing: border-box; }
html, body { margin: 0; color: var(--ink); font: 14px/1.5 Inter, system-ui, sans-serif; }
body {
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(79, 140, 255, .14), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(166, 107, 255, .12), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(34, 211, 238, .07), transparent 60%),
    var(--bg);
  background-attachment: fixed; min-height: 100vh;
}
.hidden { display: none !important; }
a { color: var(--cyan); }
button { font: inherit; cursor: pointer; border: 0; border-radius: 10px; padding: 9px 16px; background: var(--grad); color: #fff; font-weight: 600; transition: transform .1s, filter .15s; }
button:hover { filter: brightness(1.12); }
button:active { transform: translateY(1px); }
button.ghost { background: transparent; color: var(--mute); border: 1px solid var(--line); }
button.ghost:hover { color: var(--ink); border-color: var(--mute); }
button.warn { background: linear-gradient(135deg, #ffb020, #ff7a1a); color: #1a1000; }
button.ok { background: linear-gradient(135deg, #22e58b, #16b8a6); color: #00140a; }
button.danger { background: linear-gradient(135deg, #ff4d6d, #d6246e); }
button.small { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
button:disabled { opacity: .45; cursor: default; }
input, select { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); outline: none; }
input:focus, select:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(166, 107, 255, .2); }
.num, .mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.good { color: var(--good); } .bad { color: var(--bad); } .muted { color: var(--mute); }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 380px; background: rgba(16, 20, 28, .85); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 18px; padding: 32px 28px; display: grid; gap: 16px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.login-card::before { content: ""; position: absolute; inset: -1px; border-radius: 18px; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.login-card h1 { margin: 0; font-size: 22px; }
.login-card label { display: grid; gap: 6px; color: var(--mute); font-size: 13px; }
.err { color: var(--bad); min-height: 1.2em; margin: 0; }

/* shell */
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.brand-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 2px var(--green); opacity: .7; } }
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 12px 18px; background: rgba(6, 8, 12, .8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
#tabs { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
#tabs a { padding: 7px 14px; border-radius: 10px; color: var(--mute); text-decoration: none; white-space: nowrap; font-weight: 600; }
#tabs a:hover { color: var(--ink); background: var(--panel); }
#tabs a.on { color: #fff; background: var(--panel2); box-shadow: inset 0 -2px 0 var(--violet); }
.who { display: flex; align-items: center; gap: 10px; color: var(--mute); font-size: 13px; }
main { max-width: 1280px; margin: 0 auto; padding: 22px 16px 40px; }
.foot { text-align: center; color: var(--mute); font-size: 12px; padding: 0 16px 24px; }
h2 { font-size: 16px; margin: 28px 0 12px; letter-spacing: .01em; display: flex; align-items: center; gap: 10px; }
h2::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--grad); }
h2:first-child { margin-top: 0; }

/* hero */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 8px; }
.hero .kpi .v { font-size: 26px; }

/* cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.card { background: linear-gradient(180deg, var(--panel) 0%, var(--bg2) 100%); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.acct { cursor: pointer; position: relative; overflow: hidden; transition: transform .15s, border-color .15s, box-shadow .15s; border-top: 3px solid var(--c, var(--blue)); }
.acct::after { content: ""; position: absolute; right: -60px; top: -60px; width: 160px; height: 160px; border-radius: 50%; background: var(--c, var(--blue)); opacity: .09; filter: blur(10px); }
.acct:hover { transform: translateY(-2px); border-color: var(--c); box-shadow: 0 10px 30px -10px var(--c); }
.acct-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.acct-name { font-weight: 800; font-size: 17px; color: var(--c, var(--ink)); }
.big { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.rows { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; margin-top: 12px; font-size: 13px; }
.rows span:nth-child(odd) { color: var(--mute); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.p-RUNNING { background: var(--good-bg); color: var(--good); }
.p-PAUSED, .p-LOSS_PAUSE { background: var(--warn-bg); color: var(--warn); }
.p-EMERGENCY_STOP, .p-DOWN { background: var(--bad-bg); color: var(--bad); }
.mode { font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 3px 8px; border-radius: 6px; background: rgba(34, 211, 238, .12); color: var(--cyan); }
.mode.testnet { background: rgba(166, 107, 255, .15); color: var(--violet); }
.mode.live { background: var(--red); color: #fff; }
.ddbar { height: 6px; background: var(--panel3); border-radius: 3px; margin-top: 14px; overflow: hidden; }
.ddbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--red)); border-radius: 3px; }
.ddlabel { display: flex; justify-content: space-between; font-size: 11px; color: var(--mute); margin-top: 4px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--k, var(--blue)); box-shadow: 0 0 14px var(--k, var(--blue)); }
.kpi .l { color: var(--mute); font-size: 12px; font-weight: 500; }
.kpi .v { font-size: 21px; font-weight: 700; margin-top: 2px; }

/* tables */
.tw { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--mute); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; background: var(--panel2); }
td.r, th.r { text-align: right; }
tbody tr:hover td, table tr:hover td { background: rgba(79, 140, 255, .04); }
tr:last-child td { border-bottom: 0; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }

/* charts */
.chart { width: 100%; height: 260px; display: block; }
.chart text { fill: var(--mute); font: 11px Inter, sans-serif; }
.chart .grid-l { stroke: var(--line); }
.chart .up { fill: var(--green); } .chart .down { fill: var(--red); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--mute); margin-top: 8px; }
.legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 820px) { .two { grid-template-columns: 1fr; } .big { font-size: 26px; } }
.controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.banner { padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; font-weight: 600; border: 1px solid; }
.banner.bad { background: var(--bad-bg); color: var(--bad); border-color: rgba(255, 77, 109, .35); }
.banner.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(255, 176, 32, .35); }
.log { font: 12px/1.6 "JetBrains Mono", monospace; background: #05070a; border: 1px solid var(--line); border-radius: 12px; padding: 14px; max-height: 340px; overflow: auto; white-space: pre-wrap; word-break: break-all; color: #b8c2d6; }
.empty { color: var(--mute); padding: 20px; text-align: center; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--panel3); color: var(--ink); border: 1px solid var(--violet); box-shadow: 0 10px 40px rgba(166, 107, 255, .3); padding: 12px 18px; border-radius: 12px; z-index: 20; max-width: 90vw; }
.back { color: var(--cyan); text-decoration: none; font-weight: 600; }

/* forms */
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.form label { display: grid; gap: 6px; font-size: 12px; color: var(--mute); font-weight: 600; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); color: var(--ink); font-weight: 500; cursor: pointer; }
.hint { color: var(--mute); font-size: 12px; margin: 8px 0 0; }
.role-admin { color: var(--violet); font-weight: 700; } .role-viewer { color: var(--cyan); font-weight: 700; }

/* scrollbars + small screens */
#tabs { scrollbar-width: none; }
#tabs::-webkit-scrollbar { display: none; }
* { scrollbar-width: thin; scrollbar-color: var(--panel3) transparent; }
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: var(--panel3); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 720px) {
  .top { gap: 10px; }
  #tabs { order: 3; flex-basis: 100%; }
  .who { margin-left: auto; }
}

/* alerts */
.bell { position: relative; background: var(--panel2); border: 1px solid var(--line); padding: 7px 11px; font-size: 16px; line-height: 1; }
.bell:hover { border-color: var(--violet); }
.bell.ring { animation: ring .6s ease-in-out 3; }
@keyframes ring { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.badge { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff; font: 700 11px/19px Inter, sans-serif; box-shadow: 0 0 10px var(--red); }
.feed { display: grid; gap: 8px; }
.al { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: start; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--c, var(--blue)); border-radius: 12px; padding: 12px 14px; }
.al.new { box-shadow: 0 0 0 1px var(--violet), 0 6px 24px -8px rgba(166, 107, 255, .5); }
.al.lv-alert { background: linear-gradient(90deg, rgba(255, 77, 109, .14), var(--panel) 45%); border-color: rgba(255, 77, 109, .45); border-left-color: var(--red); }
.al .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; background: var(--panel2); }
.al .ttl { font-weight: 700; }
.al .acc { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--c); margin-right: 8px; text-transform: uppercase; }
.al .txt { color: var(--mute); font-size: 13px; white-space: pre-wrap; margin-top: 4px; word-break: break-word; }
.al .when { color: var(--mute); font-size: 12px; text-align: right; white-space: nowrap; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.chip { background: var(--panel2); color: var(--mute); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.chip.on { background: var(--grad); color: #fff; border-color: transparent; }
.emerg { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: linear-gradient(90deg, rgba(255, 77, 109, .25), rgba(255, 77, 109, .08)); border: 1px solid rgba(255, 77, 109, .5); color: #ffd5dc; padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-weight: 600; }
@media (max-width: 600px) { .al { grid-template-columns: 30px 1fr; } .al .when { grid-column: 2; text-align: left; } }

/* my demo */
.profiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.prof { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); cursor: pointer; color: var(--ink) !important; font-weight: 500 !important; }
.prof:has(input:checked) { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(166, 107, 255, .18); }
.prof input { margin-top: 3px; accent-color: #a66bff; }
.form .prof { display: flex; grid-template-columns: none; gap: 10px; font-size: 13px; }

/* live panel */
.livedot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 1.6s infinite; margin-right: 6px; vertical-align: middle; }
.live .now { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.clocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.clocks > div { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; font-size: 12px; }
.clocks b { font-size: 18px; color: var(--ink); }
.flags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.near { height: 6px; background: var(--panel3); border-radius: 3px; overflow: hidden; margin-bottom: 3px; }
.near i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.wc-ready .state { color: var(--cyan); font-weight: 600; white-space: normal; }
.wc-trade .state { color: var(--green); font-weight: 700; white-space: normal; }
.wc-weak .state, .wc-none .state, .wc-skip .state { color: var(--mute); white-space: normal; }
.wc-trade td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.events { display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.ev { font-size: 13px; }
.ev .mono { margin-right: 8px; }
.nowline { margin-top: 12px; font-size: 12px; line-height: 1.5; padding: 8px 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; }
.wtop td { border-bottom: 0; padding-bottom: 4px; }
.wsub td { padding-top: 0; font-size: 12px; white-space: normal; }
.mode.spot { background: rgba(34, 229, 139, .14); color: var(--green); }
.mode.fut { background: rgba(255, 176, 32, .14); color: var(--amber); }

/* live profit per bot */
.tabpnl { font-size: 11px; font-family: "JetBrains Mono", monospace; margin-left: 4px; color: var(--mute); }
.tabpnl.good { color: var(--green); } .tabpnl.bad { color: var(--red); }
.livepnl { margin: 8px 0 2px; padding: 8px 10px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); font-size: 13px; }
.livepnl b { font-size: 16px; margin: 0 4px; }
.livepnl.good { border-color: rgba(34, 229, 139, .45); background: rgba(34, 229, 139, .08); }
.livepnl.bad { border-color: rgba(255, 77, 109, .45); background: rgba(255, 77, 109, .08); }
.livepnl.good b, .livepnl.good .num { color: var(--green); }
.livepnl.bad b, .livepnl.bad .num { color: var(--red); }
.big-pnl { font-size: 15px; padding: 12px 16px; margin-bottom: 14px; }
.big-pnl b { font-size: 24px; }
.gold { color: #ffcf40; font-weight: 800; font-size: 11px; text-shadow: 0 0 8px rgba(255, 207, 64, .6); }
tr.aplus td { background: linear-gradient(90deg, rgba(255, 207, 64, .14), transparent 60%); }
tr.aplus td:first-child { box-shadow: inset 4px 0 0 #ffcf40; }

/* daily profit calendar */
.calgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.calday { border-radius: 8px; padding: 6px 6px 5px; min-height: 48px; display: grid; align-content: space-between; font-size: 11px; border: 1px solid rgba(255,255,255,.06); }
.calday span { color: rgba(255,255,255,.75); font-size: 10px; }
.calday b { font-family: "JetBrains Mono", monospace; font-size: 11px; color: #fff; }

/* hybrid bots: always shown in red (fast, experimental, high-fee strategies) */
.card.acct.hyb { border-color: rgba(255, 46, 77, .75); background: linear-gradient(180deg, rgba(255, 46, 77, .16), rgba(255, 46, 77, .04)); box-shadow: 0 0 0 1px rgba(255, 46, 77, .35), 0 0 18px rgba(255, 46, 77, .18); }
.card.acct.hyb .acct-name { color: #ff5c73; }
.hybtag { color: #ff2e4d; }

/* admin: users on the side */
.shell { display: block; }
body.has-side .shell { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 0; max-width: 1480px; margin: 0 auto; }
body.has-side main { max-width: none; margin: 0; min-width: 0; }
#side { position: sticky; top: 64px; align-self: start; padding: 22px 0 22px 16px; display: grid; gap: 6px; }
.side-title { color: var(--mute); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 4px 6px; }
.side-user { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; color: var(--ink); padding: 8px 10px; border-radius: 12px; cursor: pointer; font: inherit; }
.side-user:hover { background: var(--panel); }
.side-user.on { background: var(--panel2); border-color: var(--violet); }
.side-user .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--panel3); font-weight: 800; font-size: 13px; flex: none; }
.side-user.on .av { background: var(--violet); color: #fff; }
.side-user .nm { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user .ct { color: var(--mute); font-size: 12px; background: var(--panel3); border-radius: 999px; padding: 1px 8px; }
@media (max-width: 820px) {
  body.has-side .shell { display: block; }
  #side { position: static; display: flex; gap: 6px; overflow-x: auto; padding: 12px 16px 0; scrollbar-width: none; }
  #side::-webkit-scrollbar { display: none; }
  .side-title { display: none; }
  .side-user { width: auto; flex: none; padding: 6px 10px; }
}

/* admin: bot settings form */
.setgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
label.set { display: grid; gap: 4px; font-size: 13px; }
label.set span { font-weight: 600; }
label.set small { color: var(--mute); font-size: 11px; }
label.set input, label.set select { width: 100%; }

/* pulse: top-of-page panel */
.pstrip { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 13px; margin: 12px 0 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.pgrid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr) minmax(0, 1.15fr); gap: 12px; margin-bottom: 14px; align-items: start; }
@media (max-width: 1100px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }
.pcard { padding: 12px 14px; }
.ph { font-weight: 700; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.pcount { font-size: 11px; background: var(--line); border-radius: 10px; padding: 1px 8px; }
.prow { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.psm { font-size: 12px; line-height: 1.6; }
.pempty { font-size: 13px; padding: 10px 0; color: var(--mute); }
.ptrade { padding: 10px 12px; margin-top: 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.015); }
.ptrade.pwin { border-color: rgba(34,229,139,.35); animation: pglowG 3s ease-in-out infinite; }
.ptrade.ploss { border-color: rgba(255,77,109,.35); animation: pglowR 3s ease-in-out infinite; }
.ptitle { font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.pside { font-size: 12px; font-weight: 700; }
.ppnl { font-size: 20px; font-weight: 800; text-align: right; line-height: 1.1; }
.ppnl small { display: block; font-size: 11px; font-weight: 600; opacity: .85; }
.pspark { width: 100%; height: 74px; display: block; margin: 8px 0 2px; }
.pdot { animation: pblinkA 1.4s ease-in-out infinite; }
.plegend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--mute); }
.plegend i { display: inline-block; width: 10px; height: 2px; margin-right: 4px; vertical-align: middle; }
.pfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px 12px; margin: 8px 0; font-size: 12px; }
.pfacts div { display: flex; flex-direction: column; } .pfacts b { font-size: 13px; } .pfacts small { font-weight: 500; color: var(--mute); }
.ptime { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; border-top: 1px solid var(--line); padding-top: 8px; }
.pring { display: flex; align-items: center; gap: 8px; }
.pring svg { width: 48px; height: 48px; transform: rotate(-90deg); }
.pring .rbg { fill: none; stroke: var(--line); stroke-width: 6; }
.pring .rfg { fill: none; stroke: var(--cyan); stroke-width: 6; stroke-linecap: round; transition: stroke-dasharray .6s; }
.pbar { height: 6px; background: var(--line); border-radius: 3px; margin: 5px 0 3px; overflow: hidden; }
.pbar.thin { height: 4px; margin: 3px 0 0; }
.pbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); border-radius: 3px; transition: width 1s linear; }
.pbot { padding: 6px 8px; margin: 0 -8px; border-radius: 8px; }
.pbot.soon { background: rgba(34,211,238,.10); animation: pblinkA 1s ease-in-out infinite; }
.sdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.sdot.good { background: var(--green); box-shadow: 0 0 8px var(--green); animation: pblinkA 2s ease-in-out infinite; }
.sdot.bad { background: var(--red); } .sdot.muted { background: var(--mute); }
[data-soon].soon b, b.soon { color: var(--cyan); }
.pgauge { display: inline-flex; align-items: center; gap: 8px; }
.pgname { min-width: 92px; }
.pgtrack { position: relative; width: 110px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,77,109,.45), rgba(255,255,255,.08) 50%, rgba(34,229,139,.45)); }
.pgmid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--mute); }
.pgmark { position: absolute; top: -3px; width: 4px; height: 14px; margin-left: -2px; border-radius: 2px; background: #fff; }
.pgmark.up { box-shadow: 0 0 8px var(--green); } .pgmark.dn { box-shadow: 0 0 8px var(--red); }
.pnews { font-size: 12.5px; line-height: 1.45; padding: 6px 0; border-top: 1px solid var(--line); }
.pnews:first-of-type { border-top: 0; }
.pnews.pbn { border-left: 3px solid var(--red); padding-left: 8px; border-radius: 0; animation: pglowR 3s ease-in-out infinite; }
.pnews a { color: inherit; text-decoration: none; } .pnews a:hover { text-decoration: underline; color: var(--cyan); }
.ptag { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 0 6px; margin-right: 4px; border-radius: 6px; background: rgba(79,140,255,.18); color: var(--blue); }
.ptag.pt-bn { background: rgba(255,77,109,.18); color: var(--red); }
.pnew { display: inline-block; font-size: 10px; font-weight: 800; padding: 0 5px; margin-right: 4px; border-radius: 5px; background: var(--amber); color: #1a1200; animation: pblinkA 1.2s ease-in-out infinite; }
.pblink { animation: pblinkA 1s ease-in-out infinite; }
.pblink-soft { animation: pblinkA 2.4s ease-in-out infinite; }
@keyframes pblinkA { 50% { opacity: .35; } }
@keyframes pglowG { 50% { box-shadow: 0 0 18px rgba(34,229,139,.22); } }
@keyframes pglowR { 50% { box-shadow: 0 0 18px rgba(255,77,109,.22); } }
.pgrid2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; margin-bottom: 14px; align-items: start; }
@media (max-width: 1100px) { .pgrid2 { grid-template-columns: minmax(0, 1fr); } }
.pscore { margin-bottom: 12px; }
.tw.pnoscroll { max-height: none; overflow-y: visible; }
.ptable tr.pacct:hover td { background: rgba(79,140,255,.06); }
.ptable { font-size: 12.5px; } .ptable td, .ptable th { padding: 6px 8px; } .ptable small { font-weight: 500; opacity: .8; }
.pret { display: flex; align-items: center; gap: 8px; }
.pretbar { position: relative; width: 70px; height: 8px; border-radius: 4px; background: var(--line); flex: none; }
.pretbar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.pretbar i.up { background: var(--green); box-shadow: 0 0 8px rgba(34,229,139,.5); } .pretbar i.dn { background: var(--red); }
.pretmid { left: 50%; width: 1px !important; background: var(--mute); }
.pbar i.warnbar { background: linear-gradient(90deg, var(--amber), var(--red)); }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.padx { display: inline-block; position: relative; width: 70px; height: 6px; border-radius: 3px; background: var(--line); vertical-align: middle; }
.padx i:first-child { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--mute); }
.padx i.ok { background: var(--amber) !important; box-shadow: 0 0 8px rgba(255,190,60,.5); }
.padxmark { position: absolute; left: 60%; top: -3px; bottom: -3px; width: 1px; background: #fff; opacity: .6; }
.prange { display: block; position: relative; height: 8px; border-radius: 4px; margin: 3px 0 2px; background: linear-gradient(90deg, rgba(255,77,109,.5), rgba(255,255,255,.06) 30%, rgba(255,255,255,.06) 70%, rgba(34,229,139,.5)); }
.prpos { position: absolute; top: -3px; width: 4px; height: 14px; margin-left: -2px; border-radius: 2px; background: #fff; }
.prpos.up { box-shadow: 0 0 8px var(--green); } .prpos.dn { box-shadow: 0 0 8px var(--red); }
tr.phot td { background: rgba(255,190,60,.06); }
.pev { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; padding: 5px 0; border-top: 1px solid var(--line); }
.pev:first-of-type { border-top: 0; }
.pevi { font-size: 14px; line-height: 1.4; }
.ptape { margin: 12px 0 0; }
.tkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.tk { border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; background: var(--panel); font-size: 12px; }
.tk.tkopen { border-color: rgba(34,229,139,.45); }
.tkpx { font-size: 14px; font-weight: 700; margin: 1px 0 3px; }
.tkrng { position: relative; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(255,77,109,.5), rgba(34,229,139,.5)); }
.tkrng i { position: absolute; top: -2px; width: 3px; height: 7px; margin-left: -1px; background: #fff; border-radius: 1px; }
.tk.fup { animation: pflashG 1.6s ease-out; } .tk.fdn { animation: pflashR 1.6s ease-out; }
@keyframes pflashG { 0% { background: rgba(34,229,139,.28); } 100% { background: var(--panel); } }
@keyframes pflashR { 0% { background: rgba(255,77,109,.28); } 100% { background: var(--panel); } }
.pfng { display: inline-flex; align-items: center; gap: 8px; }
.pfngbar { position: relative; width: 90px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--red), var(--amber), #888, var(--green), var(--cyan)); opacity: .85; }
.pfngbar i { position: absolute; top: -3px; width: 4px; height: 14px; margin-left: -2px; border-radius: 2px; box-shadow: 0 0 6px rgba(255,255,255,.6); background: #fff; }
.pfngsp { width: 60px; height: 24px; }
.sl { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 7px; white-space: nowrap; }
.sl.ok { background: rgba(34,229,139,.12); color: var(--green); } .sl.bad { background: rgba(255,77,109,.16); color: var(--red); animation: pblinkA 1.2s ease-in-out infinite; }
.sl.na { background: var(--line); color: var(--mute); }
.sbar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 4px; }
.sbar i { display: block; height: 100%; background: var(--green); } .sbar i.warnbar { background: linear-gradient(90deg, var(--amber), var(--red)); }
@media (prefers-reduced-motion: reduce) { .ptrade, .pdot, .pbot.soon, .sdot.good, .pnews.pbn, .pnew, .pblink, .pblink-soft, .tk, .sl.bad { animation: none !important; } }

/* Refined account layout — performance first, with clear demo and safety context. */
:root { --bg:#080d17; --bg2:#0c1422; --panel:#101b2b; --panel2:#162338; --line:#26374d; --mute:#a0aec3; --grad:linear-gradient(130deg,#4f8cff,#8979ff); }
body { background:radial-gradient(ellipse at 12% 0%,rgba(79,140,255,.12),transparent 45%),radial-gradient(ellipse at 100% 30%,rgba(34,211,238,.05),transparent 45%),var(--bg); }
.top { background:rgba(8,13,23,.94); padding:14px 22px; gap:18px; }
.shell { align-items:start; }
main { width:100%; min-width:0; padding:28px 24px 48px; }
.card,.tw,.pbox,.ptrade { border-color:var(--line); box-shadow:0 8px 28px rgba(0,0,0,.12); }
h2 { font-size:17px; font-weight:700; letter-spacing:-.02em; margin-top:30px; }
button:focus-visible,a:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
.account-hero { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); margin:18px 0; border:1px solid #344c71; border-radius:22px; background:linear-gradient(125deg,rgba(36,61,105,.55),rgba(16,27,43,.95) 65%); box-shadow:0 16px 46px rgba(0,0,0,.24); overflow:hidden; }
.hero-main { padding:28px 30px; }
.eyebrow { display:flex; align-items:center; gap:8px; color:#b5c9e6; font-size:10px; font-weight:750; letter-spacing:.15em; }
.hero-label { margin-top:23px; color:#b4c0d3; font-size:13px; }
.hero-value { font-size:clamp(30px,3.5vw,48px); line-height:1.3; font-weight:750; letter-spacing:-.06em; margin:5px 0; overflow-wrap:anywhere; }
.hero-value>span { font-size:12px; letter-spacing:.04em; color:var(--mute); }
.hero-return { font-size:15px; font-weight:650; }
.hero-return>span { display:block; font-size:11px; font-weight:400; color:var(--mute); margin-top:4px; }
.hero-balance { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-top:22px; margin-top:22px; border-top:1px solid rgba(150,180,225,.17); }
.hero-balance span,.hero-status-grid span { display:block; font-size:11px; color:var(--mute); margin-bottom:7px; }
.hero-balance b { display:block; font-size:17px; }
.hero-balance small { font:10px Inter,system-ui,sans-serif; color:var(--mute); }
.hero-status { background:rgba(4,11,23,.2); border-left:1px solid rgba(150,180,225,.15); padding:28px; display:flex; flex-direction:column; justify-content:center; }
.hero-health { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:17px 0 8px; font-size:11px; }
.hero-status p { font-size:13px; line-height:1.7; color:#dce5f3; margin:7px 0 20px; }
.hero-status-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.hero-status-grid b { font-size:22px; }
.hero-foot { border-top:1px solid var(--line); margin-top:20px; padding-top:12px; font-size:10px; line-height:1.7; color:var(--mute); }
.kpis { gap:10px; }
.kpi { border-radius:14px; background:linear-gradient(145deg,var(--panel2),var(--panel)); }
.kpi .label { color:#afbdd0; }
.tk { padding:9px 10px; border-radius:12px; background:rgba(16,27,43,.8); }
.tkpx { margin:4px 0 6px; }
.tw { border-radius:14px; }
th { background:#142138; color:#b8c9df; letter-spacing:.03em; font-size:11px; }
td { border-color:rgba(70,94,126,.28); }
tr:hover td { background:rgba(79,140,255,.035); }
.feed { gap:10px; }
.log { max-height:240px; font-size:11px; line-height:1.8; border-radius:12px; }
.controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.controls .muted { flex-basis:100%; font-size:11px; padding-top:6px; }
@media(max-width:900px) { .account-hero { grid-template-columns:1fr; } .hero-status { border-left:0; border-top:1px solid var(--line); } .hero-value { font-size:38px; } main { padding:22px 16px 40px; } }
@media(max-width:600px) { .top { padding:10px 12px; } .hero-main,.hero-status { padding:22px 20px; } .hero-value { font-size:34px; } .hero-balance { gap:12px; } .hero-balance b { font-size:15px; } main { padding:18px 12px 36px; } .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .kpi { min-width:0; overflow-wrap:anywhere; } .account-hero { border-radius:17px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Color-led detail view */
:root { --cyan:#38d9ef; --violet:#b695ff; --blue:#71a6ff; --green:#45e5ac; --amber:#ffd080; --red:#ff7895; --line:#293d59; --grad:linear-gradient(120deg,#52d8f2,#8c91ff 55%,#d08eff); }
body { background:radial-gradient(ellipse at 5% 8%,rgba(101,102,240,.16),transparent 45%),radial-gradient(ellipse at 92% 24%,rgba(28,203,198,.09),transparent 42%),#080f1e; }
.top { box-shadow:0 6px 30px rgba(0,0,0,.18); }
.brand-text { font-weight:850; letter-spacing:-.035em; }
#tabs a.on { background:linear-gradient(135deg,rgba(113,166,255,.18),rgba(182,149,255,.15)); box-shadow:inset 0 -2px 0 #91caff; }
.account-hero { position:relative; border-color:#405779; background:linear-gradient(120deg,rgba(46,55,103,.85),rgba(19,58,68,.54) 55%,rgba(17,27,49,.98)); }
.account-hero::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,#9b8aff,#57cfff,#45e5ac); }
.hero-value.good { color:#69f2c6; text-shadow:0 0 35px rgba(69,229,172,.16); }
.hero-value.bad { color:#ff91ab; }
.hero-balance>div:last-child b { color:#bcd5ff; }
.hero-status { background:linear-gradient(140deg,rgba(18,27,51,.22),rgba(8,26,41,.55)); }
.hero-status-grid>div { background:rgba(6,18,35,.28); border:1px solid rgba(144,179,228,.15); border-radius:12px; padding:12px; }
.detail-nav { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0; }
.detail-nav a { display:flex; align-items:center; gap:6px; padding:9px 13px; border:1px solid #334a6a; border-radius:10px; background:rgba(20,35,57,.8); text-decoration:none; color:#c8d7ef; font-size:11px; font-weight:650; }
.detail-nav a:nth-child(2) { color:#9adfff; }.detail-nav a:nth-child(3) { color:#abedda; }.detail-nav a:nth-child(5) { color:#d0b9ff; }
.detail-nav a:hover { border-color:var(--cyan); background:#1c3551; }
.insight-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 18px; }
.insight { --tone:#b695ff; padding:19px 18px; border-radius:16px; border:1px solid #3b385d; background:linear-gradient(140deg,rgba(71,49,114,.32),rgba(16,25,44,.96)); position:relative; overflow:hidden; }
.insight.open { --tone:#66d8ff; border-color:#284e68; background:linear-gradient(140deg,rgba(19,92,120,.27),rgba(16,25,44,.96)); }
.insight.protection { --tone:#60e5c1; border-color:#2a554f; background:linear-gradient(140deg,rgba(20,101,84,.24),rgba(16,25,44,.96)); }
.insight-top { display:flex; align-items:center; gap:7px; color:var(--tone); font-size:9px; font-weight:800; letter-spacing:.08em; flex-wrap:wrap; }
.insight-icon { display:grid; place-items:center; width:27px; height:27px; border-radius:8px; background:color-mix(in srgb,var(--tone) 13%,transparent); font-size:15px; }
.micro-tag { margin-left:auto; font-size:8px; padding:3px 6px; border:1px solid color-mix(in srgb,var(--tone) 30%,transparent); border-radius:5px; letter-spacing:0; }
.insight-value { display:block; margin:17px 0 8px; font-size:23px; line-height:1.3; letter-spacing:-.04em; overflow-wrap:anywhere; }
.insight-value small { font:9px Inter,system-ui,sans-serif; color:var(--mute); letter-spacing:.05em; }
.insight p { font-size:10px; line-height:1.7; color:#bac8dc; margin:0; }
.insight-note { border-top:1px solid rgba(144,179,228,.15); margin-top:13px; padding-top:10px; color:#91a3bc; font-size:9px; line-height:1.65; }
.kpi { background:linear-gradient(130deg,color-mix(in srgb,var(--k,#71a6ff) 9%,#142034),#111d30); border-color:color-mix(in srgb,var(--k,#71a6ff) 23%,#26374d); }
.kpi .l { color:#b8c7de; }.kpi .v { font-size:20px; }
.section-caption { font-size:10px; font-weight:450; letter-spacing:0; color:var(--mute); margin-left:auto; }
h2[id],.insight-grid[id] { scroll-margin-top:95px; }
.ptrade { background:linear-gradient(125deg,rgba(26,91,78,.22),#102133); border-color:#326357; }
.pbox { background:linear-gradient(130deg,#14233a,#101d30); }
.chips .pill { padding:5px 10px; }.pill { border:1px solid rgba(190,213,245,.08); }
.tw table tbody tr:nth-child(even) td { background:rgba(141,174,224,.025); }
.chart { background:linear-gradient(180deg,rgba(68,111,170,.06),transparent); border-radius:10px; }
.feed .card { border-left:3px solid #748cf7; }
@media(max-width:1050px) { .insight-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.insight.protection { grid-column:1/-1; }.hero-value { font-size:40px; } }
@media(max-width:600px) { .insight-grid { grid-template-columns:1fr; }.insight.protection { grid-column:auto; }.insight-value { font-size:27px; }.section-caption { display:none; }.detail-nav { gap:6px; }.detail-nav a { padding:8px 10px; font-size:10px; }.hero-value { font-size:35px; } }

/* Calm ocean palette: restrained contrast, steady surfaces and minimal motion. */
:root { --bg:#111d29;--bg2:#152431;--panel:#1a2b3a;--panel2:#203342;--panel3:#283f4e;--ink:#e8f0f2;--mute:#acbdc7;--line:#344c5b;--cyan:#8acbd4;--blue:#a3bbde;--violet:#bcb3d9;--green:#91d4b7;--red:#efadb8;--amber:#dcc699;--pink:#d4b5c5;--grad:linear-gradient(120deg,#8dc7cc,#a4b8d6,#bcb3d9);--good:var(--green);--bad:var(--red); }
body { background:radial-gradient(ellipse at 10% 0%,rgba(151,183,205,.08),transparent 52%),radial-gradient(ellipse at 90% 35%,rgba(126,190,178,.06),transparent 52%),linear-gradient(160deg,#142332,#11212a 62%,#14252e);background-attachment:fixed; }
.top { background:rgba(17,29,41,.96);border-bottom-color:#334957;box-shadow:0 3px 18px rgba(0,0,0,.1); }
.brand-text { background:none;color:#c0dadd; }
.dot,.livedot,.pdot { box-shadow:none;animation:none!important; }
#tabs a.on { background:#293e4e;box-shadow:inset 0 -2px 0 #9fcbd0; }
.side-user.on { background:#253b4a;border-color:#7f9eae; }.side-user.on .av { background:#668393; }
.account-hero { background:linear-gradient(125deg,#2a3e50,#233d45 57%,#203442);border-color:#4a6371;box-shadow:0 10px 30px rgba(0,0,0,.12); }
.account-hero::before { background:linear-gradient(90deg,#b0b4cf,#9bc2d0,#9ccab9);height:2px; }
.hero-status { background:rgba(15,32,40,.16); }.hero-value.good { color:#a4e0c5;text-shadow:none; }.hero-value.bad { color:#efb2bd; }.hero-balance>div:last-child b { color:#d1e0e9; }
.hero-status-grid>div { background:rgba(20,40,49,.25);border-color:#425b66; }
.eyebrow { color:#b9ced7;letter-spacing:.11em; }.hero-status p { color:#d9e5e9; }
.kpi { background:linear-gradient(140deg,#233746,#1c2e3d);border-color:#3b5361;box-shadow:none; }.kpi::before { box-shadow:none;opacity:.7; }
.insight { background:linear-gradient(140deg,#303b50,#223241);border-color:#4b536a;--tone:#c3bbdc; }
.insight.open { background:linear-gradient(140deg,#244352,#21333f);border-color:#446674;--tone:#add1de; }
.insight.protection { background:linear-gradient(140deg,#28493f,#233a3e);border-color:#4b6b61;--tone:#afd8c6; }
.insight-note { color:#adbdc8; }.insight p { color:#c1ced6; }
.detail-nav a { background:#203542;border-color:#3e5867;color:#c5d7df; }.detail-nav a:hover { background:#2c4553;border-color:#91b9bf; }
.pbox,.card,.tw { background:#1b2e3c;border-color:#385160;box-shadow:0 5px 17px rgba(0,0,0,.07); }.ptrade { background:linear-gradient(130deg,#22453f,#203643);border-color:#4b7166; }
.tk { background:#203440;border-color:#3a5260; }.tk.fup,.tk.fdn,.ptrade,.pnews.pbn,.pblink,.pblink-soft,.sdot.good,.sl.bad { animation:none!important; }
th { background:#263e4e;color:#cadbe4; }.chart { background:rgba(160,192,207,.025); }.pill.p-RUNNING,.sl.ok { background:rgba(145,212,183,.12);color:#b0dfc8; }
.calm-detail { margin:18px 0;padding:22px;border:1px solid #496270;border-radius:17px;background:linear-gradient(130deg,#263c49,#203540);box-shadow:0 8px 22px rgba(0,0,0,.08); }
.calm-heading { display:flex;align-items:center;justify-content:space-between;gap:12px; }.calm-heading h3 { margin:5px 0 0;font-size:17px;font-weight:650;letter-spacing:-.02em; }.calm-tag { font-size:10px;color:#c3d6db;padding:5px 9px;border:1px solid #57727c;border-radius:7px; }
.calm-metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:22px; }.calm-metrics>div { min-width:0;border-right:1px solid #405964;padding-right:12px; }.calm-metrics>div:last-child { border:0; }.calm-metrics span { display:block;color:#bfced5;font-size:11px;margin-bottom:8px; }.calm-metrics b { display:block;font-size:18px;font-weight:650;color:#dbe8e9;overflow-wrap:anywhere; }.calm-metrics small { display:block;color:#a7bdc8;font-size:9px;line-height:1.6;margin-top:6px; }
.calm-rules { display:flex;align-items:center;flex-wrap:wrap;gap:7px;border-top:1px solid #405964;padding-top:15px;margin-top:20px;font-size:10px; }.calm-rules>span { color:#afc2cd;margin-right:4px; }.calm-rules b { color:#c7d8df;font-weight:500;background:rgba(126,167,179,.09);border:1px solid #435e6b;padding:5px 8px;border-radius:6px; }
@media(max-width:1050px) { .calm-metrics { grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px; }.calm-metrics>div:nth-child(2) { border:0; } }
@media(max-width:600px) { .calm-detail { padding:18px; }.calm-heading { align-items:flex-start; }.calm-heading h3 { font-size:15px; }.calm-metrics { gap:18px 12px; }.calm-metrics b { font-size:16px; }.calm-tag { font-size:9px; } }

.wallet-panel { margin:18px 0;padding:23px;border:1px solid #517067;border-radius:18px;background:linear-gradient(120deg,#29483f,#253e44 55%,#243a48);box-shadow:0 8px 22px rgba(0,0,0,.08);scroll-margin-top:90px; }
.wallet-head { display:flex;justify-content:space-between;align-items:center;gap:12px; }.wallet-head h3 { font-size:18px;margin:5px 0 0;font-weight:650;letter-spacing:-.02em; }
.wallet-grid { display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:20px;margin-top:23px; }.wallet-grid>div { min-width:0; }.wallet-grid span { display:block;color:#c3d6d7;font-size:11px;margin-bottom:10px; }.wallet-grid b { display:block;font-size:24px;color:#d9ece3;line-height:1.4;overflow-wrap:anywhere; }.wallet-main b { font-size:30px; }.wallet-grid b.good { color:var(--green); }.wallet-grid b.bad { color:var(--red); }.wallet-grid small { font:9px Inter,system-ui,sans-serif;color:#b8cbce; }.wallet-grid p { font-size:10px;color:#b4c9cd;line-height:1.7;margin:8px 0 0; }.wallet-stat { padding-left:20px;border-left:1px solid #47645f; }
.wallet-footer { display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid #47645f;color:#c5d7d8;font-size:11px; }.wallet-footer b { margin-left:8px; }.wallet-footer>span:last-child { color:#a8c1c6; }.wallet-note { margin-top:14px;font-size:10px;line-height:1.7;color:#afc5cb; }
@media(max-width:1000px) { .wallet-grid { grid-template-columns:1fr 1fr; }.wallet-main { grid-column:1/-1; }.wallet-stat { border-left:0;border-top:1px solid #47645f;padding:15px 0 0; }.wallet-grid b { font-size:22px; } }
@media(max-width:600px) { .wallet-panel { padding:18px; }.wallet-head { align-items:flex-start; }.wallet-head h3 { font-size:16px; }.wallet-grid { gap:15px; }.wallet-grid b { font-size:18px; }.wallet-main b { font-size:28px; }.wallet-grid span { font-size:10px; } }

/* Clear night sky: slow, subtle stars outside readable navy panels. */
:root { --bg:#070f22;--bg2:#0c1730;--panel:#101e39;--panel2:#152746;--panel3:#203354;--ink:#edf3ff;--mute:#acbbd5;--line:#2a4165;--cyan:#9bcbff;--blue:#a5bcff;--violet:#c4b6ed;--green:#a1dcc9;--red:#f0adb9;--amber:#e8cf9e;--grad:linear-gradient(120deg,#8fc6ff,#b5bfff,#d0bef0); }
body { isolation:isolate;background:radial-gradient(ellipse at 50% -15%,#1a315d 0%,transparent 55%),linear-gradient(175deg,#0b1835,#070f22 65%,#0b1730);background-attachment:fixed; }
body::before,body::after { content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-repeat:repeat; }
body::before { background-image:radial-gradient(circle at 18px 35px,rgba(222,235,255,.9) 0 1px,transparent 1.7px),radial-gradient(circle at 127px 148px,rgba(209,226,255,.7) 0 .8px,transparent 1.5px),radial-gradient(circle at 245px 58px,rgba(240,244,255,.85) 0 1.1px,transparent 1.8px),radial-gradient(circle at 65px 222px,rgba(166,201,255,.7) 0 .7px,transparent 1.5px);background-size:307px 269px;animation:sky-twinkle-a 8s ease-in-out infinite; }
body::after { background-image:radial-gradient(circle at 82px 74px,rgba(227,239,255,.8) 0 1px,transparent 1.9px),radial-gradient(circle at 232px 212px,rgba(179,209,255,.7) 0 .7px,transparent 1.5px),radial-gradient(circle at 340px 116px,rgba(248,246,255,.75) 0 1.2px,transparent 2px);background-size:397px 311px;animation:sky-twinkle-b 11s ease-in-out infinite; }
@keyframes sky-twinkle-a { 0%,100% { opacity:.35; } 50% { opacity:.85; } }
@keyframes sky-twinkle-b { 0%,100% { opacity:.75; } 50% { opacity:.25; } }
.top { background:rgba(8,17,36,.95);border-color:#283e60; }.brand-text { color:#c8dcff; }
.side-user.on { background:#1c3152;border-color:#88a3d0; }.side-user.on .av { background:#6f84ad; }#tabs a.on { background:#203759;box-shadow:inset 0 -2px 0 #accaff; }
.account-hero { background:linear-gradient(125deg,#1c3157,#1a2d4d 55%,#152744);border-color:#4a638c;box-shadow:0 10px 32px rgba(0,0,0,.17); }.account-hero::before { background:linear-gradient(90deg,#b9beef,#a4cfff,#b5d7e9); }.hero-status { background:rgba(6,16,35,.15); }.hero-status-grid>div { background:#182b48;border-color:#354e74; }.hero-value.good { color:#afe3d2; }.eyebrow { color:#bbcee9; }
.wallet-panel { background:linear-gradient(125deg,#1e3556,#1b304a 60%,#192d4c);border-color:#45658a; }.wallet-stat,.wallet-footer { border-color:#3c5678; }.wallet-grid b { color:#e0ecff; }.wallet-grid b.good { color:var(--green); }.wallet-grid b.bad { color:var(--red); }
.calm-detail { background:linear-gradient(125deg,#1b304e,#172943);border-color:#3b557a; }.calm-metrics>div,.calm-rules { border-color:#354e70; }.calm-rules b { background:#203553;border-color:#3b567a; }
.kpi,.card,.pbox,.tw { background:#132541;border-color:#2d466b; }.kpi { background:linear-gradient(140deg,#1b3052,#142641); }
.insight { background:linear-gradient(135deg,#2a3053,#192843);border-color:#4c5279; }.insight.open { background:linear-gradient(135deg,#203956,#182b45);border-color:#3e6082; }.insight.protection { background:linear-gradient(135deg,#243d4f,#1a2c46);border-color:#466577; }
.detail-nav a { background:#182c49;border-color:#37547b;color:#d1dfff; }.detail-nav a:hover { background:#263e61;border-color:#99b9e8; }.ptrade { background:linear-gradient(125deg,#213e4b,#172a45);border-color:#496a79; }.tk { background:#172b47;border-color:#30496d; }th { background:#203858;color:#d6e3f7; }
@media(prefers-reduced-motion:reduce) { body::before,body::after { animation:none!important;opacity:.5; } }

/* Compact operations dashboard: retain calm sky, bring related details closer. */
main { max-width:1480px;padding:14px 16px 28px; }
h2 { margin:16px 0 8px; }
.grid,.two,.kpis,.hero,.insight-grid { gap:8px; }
.card { padding:12px; }
.account-hero { margin-bottom:10px; }
.hero-main,.hero-status { padding:18px; }
.hero-value { font-size:36px;line-height:1.15;margin:8px 0; }
.hero-balance { margin-top:12px;gap:16px; }
.hero-status-grid { gap:8px; }.hero-status-grid>div { padding:8px; }
.wallet-panel,.calm-detail { margin:10px 0;padding:14px; }
.wallet-head h3,.calm-heading h3 { margin:4px 0; }
.wallet-grid { gap:12px; }.wallet-grid b { font-size:23px; }
.wallet-footer { margin-top:10px;padding-top:10px; }.wallet-note { margin-top:8px; }
.calm-metrics { gap:8px;margin:10px 0; }.calm-metrics>div { padding:8px; }
.detail-nav { margin:10px 0;gap:6px; }.detail-nav a { padding:7px 10px; }
.insight-grid { margin-bottom:10px; }.insight { padding:12px; }
.insight-value { margin:8px 0 5px;font-size:22px; }.insight-note { margin-top:8px;padding-top:7px; }
.kpi { padding:10px 12px; }.kpi .v { font-size:20px; }
th,td { padding:7px 10px; }.wsub .state { font-size:11px;padding-top:2px;padding-bottom:7px; }
.quote-age { display:block;font-size:10px;font-family:Inter,system-ui,sans-serif;line-height:1.4; }
.market-source { padding:8px 10px;font-size:11px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px; }
.operations-strip { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 0 10px; }
.operations-strip>div { background:#172b47;border:1px solid #354e70;border-radius:10px;padding:10px;min-width:0; }
.operations-strip span,.operations-strip small { display:block;color:var(--mute);font-size:10px;line-height:1.5; }
.operations-strip b { display:block;font-size:16px;margin:4px 0;overflow-wrap:anywhere; }
@media(max-width:900px) { main { padding:12px; }.operations-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }.hero-main,.hero-status { padding:14px; } }
@media(max-width:600px) { main { padding:10px; }.insight-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.insight.protection { grid-column:1/-1; }.insight-value { font-size:20px; }.wallet-panel,.calm-detail { padding:12px; }.hero-value { font-size:30px; }.operations-strip b { font-size:14px; } }

/* Two-column command centre, with motion only on received price changes. */
.command-grid { display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px;align-items:stretch; }
.command-grid>.account-hero,.command-grid>.wallet-panel { margin:0;min-width:0;border-radius:12px; }
.command-grid .account-hero { grid-template-columns:1fr; }
.command-grid .hero-main { padding:14px; }.command-grid .hero-status { padding:10px 14px;border-left:0;border-top:1px solid var(--line); }
.command-grid .hero-label { font-size:12px; }.command-grid .hero-value { font-size:32px; }
.command-grid .hero-status p { margin:6px 0;font-size:12px;line-height:1.5; }
.command-grid .wallet-grid { grid-template-columns:1fr 1fr;gap:10px;margin-top:12px; }
.command-grid .wallet-main { grid-column:1/-1; }.command-grid .wallet-stat { padding:8px 0 0;border-left:0;border-top:1px solid var(--line); }
.command-grid .wallet-grid span { margin-bottom:4px; }.command-grid .wallet-grid p { margin-top:4px;line-height:1.5; }
.command-grid .wallet-note { line-height:1.5; }.command-grid .wallet-main b { font-size:28px; }
.calm-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }.calm-rules { margin-top:8px;padding:8px; }
.operations-strip { position:relative; }.operations-strip>div { border-top:2px solid #7996bd; }
.tw { border-radius:10px; }.wsub td { color:#b9cbe5; }.tick-up { animation:quote-rise 1.4s ease-out; }.tick-down { animation:quote-fall 1.4s ease-out; }
@keyframes quote-rise { from { background:rgba(87,205,161,.32);color:#c6ffdf; } to { background:transparent; } }
@keyframes quote-fall { from { background:rgba(234,112,137,.30);color:#ffd1dc; } to { background:transparent; } }
@media(max-width:1050px) { .command-grid { grid-template-columns:1fr; }.calm-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { .tick-up,.tick-down { animation:none; } }

/* Focused live workspace: calm navy, mint outcomes, amber holds. */
:root{--bg:#091321;--panel:#122338;--panel2:#192f48;--ink:#eef5fc;--mute:#a6b8cd;--line:#304660;--green:#72d9b1;--red:#ff99a5;--amber:#efce88;--cyan:#8dc8fa}
body{background:radial-gradient(ellipse at 75% 0%,#1c344b 0,transparent 55%),#091321}body::before,body::after{opacity:.18;animation:none}
.focus-account{max-width:1480px;margin:auto}.focus-account>.back{font-size:11px}.focus-account>h2{margin:7px 0 10px!important;font-size:20px}
.focus-summary{border:1px solid #41617c;border-radius:14px;background:linear-gradient(125deg,#19344a,#12263c);padding:14px;margin:8px 0 10px}
.focus-status{display:flex;justify-content:space-between;align-items:center;gap:12px}.focus-status h3{font-size:14px;margin:3px 0 7px}.focus-status .chips{justify-content:flex-end}
.focus-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:8px}.focus-metric{padding:10px;background:#102337;border:1px solid #304b65;border-radius:9px;min-width:0;border-top:2px solid #88b6e2}.focus-metric span,.focus-metric small{display:block;font-size:10px;color:var(--mute)}.focus-metric b{display:block;font-size:23px;line-height:1.35;margin:5px 0;overflow-wrap:anywhere}.focus-metric b span{font-size:23px;color:inherit}.focus-metric em{font-size:10px;font-style:normal;color:var(--mute)}.focus-metric.good{border-top-color:var(--green)}.focus-metric.bad{border-top-color:var(--red)}
.focus-note{font-size:12px;line-height:1.5;margin-top:10px;color:#d3e6ee}.focus-note>span{font-size:10px;color:var(--mute)}
.focus-details{border:1px solid var(--line);background:#102135;border-radius:10px;margin:8px 0;padding:0 12px}.focus-details>summary{cursor:pointer;padding:11px 0;font-size:12px;font-weight:650;color:#c6dded}.focus-details>h2{font-size:15px;margin:6px 0}.focus-details:focus-within{border-color:#7fafd0}.focus-details[open]{padding-bottom:12px}.focus-details .command-grid{margin-top:8px}.focus-details .log{max-height:230px;overflow:auto}
.focus-charts{gap:10px;margin:8px 0}.focus-charts h2,.focus-positions h2{font-size:14px;margin:5px 0}.focus-charts .card{padding:9px}.focus-charts .chart{height:180px;min-height:0}.focus-positions .tw{max-height:220px;overflow:auto}.focus-positions .empty{padding:12px}
.focus-account .detail-nav{position:sticky;top:65px;z-index:8;background:rgba(9,19,33,.97);padding:6px;border:1px solid var(--line);border-radius:9px}.focus-account .tkgrid{display:flex;overflow-x:auto;gap:7px;padding-bottom:4px}.focus-account .tk{flex:0 0 120px;padding:8px}.focus-account .tkpx{font-size:17px}.focus-account .ptape{margin:8px 0}.focus-account .pstrip{padding:8px;gap:12px}.focus-account .pfng{font-size:11px}.focus-account>.kpis{gap:8px}
.chart .grid-l{stroke:#30475b;stroke-dasharray:3 5}.chart text{fill:#b5c9db;font-size:10px}.chart .up{fill:#72d9b1}.chart .down{fill:#ff99a5}
@media(max-width:1100px){.focus-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.focus-metric b{font-size:21px}}
@media(max-width:650px){.focus-status{display:block}.focus-status .chips{justify-content:flex-start}.focus-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.focus-summary{padding:10px}.focus-charts{grid-template-columns:1fr}.focus-account .detail-nav{top:0;overflow-x:auto;flex-wrap:nowrap}.focus-account .detail-nav a{white-space:nowrap}.focus-metric b,.focus-metric b span{font-size:19px}.focus-account .pstrip{flex-wrap:wrap}}

.focus-overview .hero{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:10px}.focus-overview .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.focus-overview .acct .rows,.focus-overview .acct .ddbar,.focus-overview .acct .ddlabel{display:none}.focus-overview .acct .big{font-size:24px}.focus-overview .acct .nowline{font-size:11px}.focus-overview .acct{padding:12px}.focus-overview .tkgrid{display:flex;overflow-x:auto;gap:7px}.focus-overview .tk{flex:0 0 120px}.focus-overview .hero .v{font-size:22px}.focus-overview .acct-head{flex-wrap:wrap}.focus-overview .acct-name{font-size:13px}
@media(max-width:1000px){.focus-overview .hero{grid-template-columns:repeat(3,minmax(0,1fr))}.focus-overview .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.focus-overview .hero{grid-template-columns:repeat(2,minmax(0,1fr))}.focus-overview .grid{grid-template-columns:1fr}}

.focus-overview .acct .nowline{max-height:48px;overflow:hidden;margin-top:7px;padding:6px;line-height:1.5}.focus-overview .acct .livepnl{padding:7px;margin-top:6px;font-size:11px}.focus-overview .acct .big{line-height:1.3;margin:3px 0}.focus-overview .acct-head{margin-bottom:6px}.focus-overview .focus-positions>.kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin:6px 0}.focus-overview .focus-positions .tw{max-height:200px}

.focus-trade-live{margin:10px 0;padding:12px;border:1px solid #3d6470;border-radius:12px;background:linear-gradient(120deg,#173346,#11263b)}.focus-trade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.focus-trade-grid>.ptrade:only-child{grid-column:1/-1}.focus-trade-grid .pspark{height:90px}.focus-trade-grid .ptime{margin-top:8px}.focus-trade-grid .ptrade{padding:12px}.focus-trade-live .ph{margin-bottom:8px}.focus-account>#pulse{margin-top:18px;border-top:1px solid var(--line);padding-top:10px}
@media(max-width:700px){.focus-trade-grid{grid-template-columns:1fr}.focus-trade-grid .pfacts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Pearl workspace: soft daylight, clear financial semantics. */
:root{color-scheme:light;--bg:#eef3f6;--bg2:#f7fafb;--panel:#ffffff;--panel2:#f1f6fa;--panel3:#e8f0f6;--ink:#193348;--mute:#5d7184;--line:#d4e0e8;--cyan:#146d95;--blue:#2458a3;--violet:#6651a1;--green:#13765a;--red:#ba3950;--amber:#95660c;--pink:#a94c70;--good:#13765a;--bad:#ba3950;--warn:#95660c;--grad:linear-gradient(120deg,#286399,#208b87)}
body{background:radial-gradient(ellipse at 80% 0%,#dceff0 0,transparent 50%),linear-gradient(135deg,#f4f7fb,#edf3f4);color:var(--ink)}body::before,body::after{display:none}
.top{background:rgba(250,253,255,.97);border-color:#d2dfe8;box-shadow:0 3px 16px #193b5510}.brand-text,.brand{color:#183d57}#tabs a{color:#50687c}#tabs a.on{background:#e0edf6;color:#194e76;box-shadow:inset 0 -2px #268783}.who{color:#3d5a6f}.ghost{background:#f7fafc;color:#294e68;border:1px solid #cbdbe6}.side-user{color:#52687a}.side-user.on{background:#dfeef3;border-color:#a0c6d0;color:#1e5265}.side-user.on .av{background:#347e88;color:#fff}.side-user .av{background:#e0e8ee;color:#3d5c72}
.card,.kpi,.pbox,.tw,.acct,.focus-details,.focus-metric,.calm-detail,.wallet-panel,.insight,.insight.open,.insight.protection,.account-hero,.hero-status-grid>div,.tk,.ptrade{background:#fff;border-color:#d2e0e9;color:var(--ink);box-shadow:0 4px 16px #244b6210}
.kpi{background:linear-gradient(125deg,#fff,#f3f8fa)}.focus-summary{background:linear-gradient(120deg,#fff,#eaf5f5);border-color:#b6d5d8;box-shadow:0 7px 24px #244b6212}.focus-metric{background:#fff;border-top-color:#6f9dbb}.focus-metric.good{border-top-color:var(--green)}.focus-metric.bad{border-top-color:var(--red)}.focus-note{color:#24485c}.focus-note>span,.eyebrow{color:#52778d}.focus-details>summary{color:#284e65}.focus-details[open]{background:#f8fbfd}.focus-trade-live{background:linear-gradient(120deg,#eff9f5,#edf5fb);border-color:#b6d9d0}.ptrade{background:linear-gradient(135deg,#fff,#f0f8f5);border-color:#bddccf}.focus-account .detail-nav{background:rgba(246,250,252,.98);border-color:#c8dbe6}.detail-nav a{background:#fff;color:#275570;border-color:#bed5e2}.detail-nav a:hover{background:#e5f1f5;color:#174461}
.hero-status{background:#eef5f8}.hero-value,.wallet-grid b,.calm-metrics b,.hero-balance b{color:#193d56}.wallet-grid b.good,.hero-value.good{color:var(--green)}.wallet-grid b.bad,.hero-value.bad{color:var(--red)}.wallet-grid span,.wallet-grid p,.wallet-note,.wallet-footer,.calm-metrics span,.calm-metrics small,.hero-label,.hero-foot{color:#5c7384}.calm-rules b,.calm-tag{background:#eaf3f7;color:#315b73;border-color:#bdd3e0}.operations-strip>div{background:#f2f7fb;border-color:#d3e0e8}.operations-strip span,.operations-strip small{color:#5e7385}
th{background:#e7f0f5;color:#32556e}td{border-color:#e1e9ee}.wsub td,.wsub .state{color:#5d7385}.chart{background:#f5f9fc}.chart text{fill:#4e6b80}.chart .grid-l{stroke:#d1e0e8}.chart .up{fill:#248d70}.chart .down{fill:#d56878}.chart path[stroke]{filter:none}.chart .rfg{stroke:#238877}
.pill.p-RUNNING,.sl.ok{background:#e1f3ea;color:#16664d}.pill.p-PAUSED,.sl.na{background:#edf1f6;color:#5c7084}.pill.p-EMERGENCY_STOP,.sl.bad{background:#fbe9ec;color:#aa3249}.pill,.mode{border-color:#cddde7}.mode.paper{background:#e2f0fa;color:#28678f}.mode.testnet{background:#ece8fa;color:#6650a0}.mode.live{background:#dff2e7;color:#176c4b}.good{color:var(--green)}.bad{color:var(--red)}.warn,.gold{color:var(--amber)}.muted{color:var(--mute)}
.banner.bad{background:#fcecef;color:#9d3047;border-color:#efb6c2}.banner.warn{background:#fff6e0;color:#885d10;border-color:#e5cea0}.livepnl,.nowline{background:#edf6f7;border-color:#c7e0e4;color:#315365}.livepnl.good{color:var(--green)}.livepnl.bad{color:var(--red)}.pstrip{background:#edf6f8;border-color:#cddfe6}.pnews.pbn{background:#fff7e8;border-color:#e4cfaa}.pempty,.pfacts,.ptime,.pbot{border-color:#d2e1e8}.ph,.ptitle{color:#254d65}.ppnl.good{color:var(--green)}.ppnl.bad{color:var(--red)}.tk{background:#fff;color:#264a63}.tkpx{color:#254862}.tkrng,.pbar,.sbar{background:#dbe8ec}.pbar i,.sbar i{background:#4a9c94}.sl{box-shadow:none}.calm-heading h3,.wallet-head h3{color:#284c64}
.log{background:#edf3f7;color:#35566e;border-color:#d0dfe8}input,select,textarea{background:#fff;color:#24465c;border-color:#bccfdd}.hint,.foot{color:#5e7688}.focus-account>h2>span:first-child{color:#245b80!important}.acct-name{color:#285f83}.livepnl .num{color:inherit}.chart .rbg{stroke:#d5e8e4}.pring .rfg{stroke:#258a72}.focus-trade-live .pspark{background:transparent}

.kpi .l,.kpi .label,.focus-metric span,.focus-metric small{color:#526b7e}.emerg{background:#fbe7eb;border-color:#e6adb9;color:#9d3047}.emerg>span{color:#9d3047}.emerg .muted{color:#7e5260}.hero-balance span,.hero-status-grid span{color:#5b7284}.banner a{color:#8f3249}

/* All dashboard information expanded */
.focus-overview .acct .rows{display:grid}
.focus-overview .acct .ddbar{display:block}
.focus-overview .acct .ddlabel{display:flex}
.focus-overview .acct .nowline{max-height:none;overflow:visible}
.focus-account .tkgrid,.focus-overview .tkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));overflow:visible}
.focus-account .tk,.focus-overview .tk{min-width:0}
.focus-positions .tw,.focus-overview .focus-positions .tw{max-height:none;overflow-x:auto}
.focus-details .log{max-height:none}
.tksrc { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; padding: 1px 5px; border-radius: 5px; background: rgba(79,140,255,.16); color: var(--blue); vertical-align: middle; }

/* command center */
.cc { border: 1px solid rgba(240,185,11,.35); border-radius: 14px; padding: 10px 12px; margin: 10px 0 12px; background: linear-gradient(180deg, rgba(240,185,11,.05), transparent 60%), var(--panel); }
.cchead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; font-size: 14px; }
.ccstate { margin-left: auto; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 8px; }
.ccstate.good { background: rgba(34,229,139,.12); color: var(--green); } .ccstate.bad { background: rgba(255,77,109,.16); color: var(--red); }
.cckpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 6px; margin-bottom: 8px; }
.cck { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 9px; padding: 5px 8px; display: flex; flex-direction: column; min-width: 0; }
.cck span { font-size: 10.5px; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cck b { font-size: 16px; font-weight: 800; white-space: nowrap; } .cck small { font-size: 10.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cctable .ptable td, .cctable .ptable th { padding: 4px 7px; font-size: 12px; white-space: nowrap; }
/* compact density: same information, less space */
body.compact main { padding-top: 6px; }
body.compact .card, body.compact .pcard { padding: 8px 10px; border-radius: 12px; }
body.compact .kpi { padding: 8px 10px; } body.compact .kpi .v { font-size: 17px; }
body.compact .hero, body.compact .kpis, body.compact .pgrid, body.compact .pgrid2 { gap: 8px; }
body.compact h2 { font-size: 15px; margin: 14px 0 8px; }
body.compact .ptable td, body.compact .ptable th, body.compact table td, body.compact table th { padding-top: 4px; padding-bottom: 4px; }
body.compact .tkgrid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }
body.compact .tk { padding: 4px 6px; } body.compact .tkpx { font-size: 12.5px; }
body.compact .pspark { height: 56px; } body.compact .ptrade { padding: 8px 10px; }
body.compact .pstrip { padding: 6px 10px; margin: 8px 0; }
body.compact .hint { font-size: 11.5px; margin: 4px 0; }