/* Mini App «RSI Alpha» — the terminal's neon «cyber» theme (journal/web/terminal-cyber.css), adapted for a phone. */
:root {
  --bg: #05050c; --panel: rgba(11, 13, 30, .86); --panel2: rgba(16, 20, 46, .95); --line: #1b2350; --line2: #2a3577;
  --text: #e6f1ff; --mut: #93a6cc; --dim: #5a6a94;
  --pos: #2bff9a; --neg: #ff2e63; --acc: #00e5ff; --mag: #ff2bd6; --warn: #ffe600; --acc2: #a98bff;
  --long: var(--pos); --short: var(--neg);
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; --head: 'Rajdhani', 'Inter', sans-serif; --disp: 'Orbitron', 'Rajdhani', sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --cut: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --cut-s: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: #05050c; }
body { margin: 0; color: var(--text); min-height: 100vh; font: 14px/1.4 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  padding: calc(var(--safe-t) + 4px) 12px calc(var(--safe-b) + 18px); overscroll-behavior-y: contain;
  background:
    radial-gradient(700px 420px at 90% -10%, rgba(255, 43, 214, .14), transparent 60%),
    radial-gradient(600px 380px at -15% 5%, rgba(0, 229, 255, .12), transparent 60%),
    radial-gradient(600px 420px at 50% 115%, rgba(120, 60, 255, .11), transparent 60%), #05050c;
  background-attachment: fixed; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(0, 229, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, .035) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .25)); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .25)); }
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 90;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px); }
header, nav, main, footer { position: relative; z-index: 1; }
::selection { background: rgba(255, 43, 214, .45); color: #fff; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* header */
.top { display: flex; justify-content: space-between; align-items: center; padding: 8px 2px 12px; border-bottom: 1px solid rgba(0, 229, 255, .3);
  margin-bottom: 10px; box-shadow: 0 1px 0 rgba(255, 43, 214, .22); }
.brand { font-family: var(--disp); font-weight: 800; font-size: 16px; letter-spacing: 3px; text-transform: uppercase;
  background: linear-gradient(90deg, var(--acc), var(--mag)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, .55)); }
.logo { margin-right: 2px; }
.conn { display: flex; align-items: center; gap: 6px; color: var(--mut); font: 10.5px var(--mono); letter-spacing: .3px; text-align: right; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); display: inline-block; flex: none; }
.conn.ok .dot { background: var(--pos); box-shadow: 0 0 8px var(--pos); }
.conn.stale .dot { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.conn.bad .dot { background: var(--neg); box-shadow: 0 0 8px var(--neg); animation: cpulse 1.2s infinite; }
@keyframes cpulse { 50% { opacity: .35; } }

/* tabs */
.tabs { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 12px;
  background: rgba(5, 5, 14, .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 229, 255, .35); clip-path: var(--cut); }
.tabs button { appearance: none; border: 0; border-right: 1px solid rgba(0, 229, 255, .18); background: transparent; color: var(--mut);
  font: 600 13px var(--head); letter-spacing: 1.5px; text-transform: uppercase; padding: 11px 0; }
.tabs button:last-child { border-right: 0; }
.tabs button.on { color: #fff; background: linear-gradient(90deg, rgba(0, 229, 255, .28), rgba(255, 43, 214, .28));
  box-shadow: inset 0 -2px 0 var(--acc); text-shadow: 0 0 8px rgba(0, 229, 255, .9); }
.tabs button[data-tab="real"].on { background: linear-gradient(90deg, rgba(43, 255, 154, .25), rgba(0, 229, 255, .22)); box-shadow: inset 0 -2px 0 var(--pos); }

/* panels with HUD corner brackets */
.card { position: relative; background: var(--panel); border: 1px solid var(--line); padding: 14px; margin-bottom: 12px;
  box-shadow: 0 0 0 1px rgba(255, 43, 214, .04), 0 0 28px rgba(0, 229, 255, .05), inset 0 0 40px rgba(0, 229, 255, .025); }
.card::before { content: ''; position: absolute; top: -1px; left: -1px; width: 14px; height: 14px; border-top: 2px solid var(--acc); border-left: 2px solid var(--acc);
  filter: drop-shadow(0 0 4px var(--acc)); pointer-events: none; }
.card::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 14px; height: 14px; border-bottom: 2px solid var(--mag); border-right: 2px solid var(--mag);
  filter: drop-shadow(0 0 4px var(--mag)); pointer-events: none; }
.card h3 { margin: -14px -14px 12px; padding: 10px 14px; border-bottom: 1px solid rgba(0, 229, 255, .14);
  background: linear-gradient(90deg, rgba(0, 229, 255, .07), transparent 60%);
  font: 700 13.5px var(--head); letter-spacing: 2px; text-transform: uppercase; color: var(--acc); text-shadow: 0 0 8px rgba(0, 229, 255, .55);
  display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card h3 > span:first-child::before, .card h3:not(:has(> span))::before { content: '▍'; color: var(--mag); margin-right: 6px; text-shadow: 0 0 8px var(--mag); }
.card h3 .mut { font: 10.5px var(--mono); letter-spacing: 0; color: var(--dim); text-shadow: none; text-transform: none; }
.big { font: 700 28px var(--mono); letter-spacing: -.5px; color: #fff; text-shadow: 0 0 14px rgba(0, 229, 255, .45); }
.sub { color: var(--mut); font-size: 12px; margin-top: 4px; }
.sub b { font-family: var(--mono); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 10px 0 4px; background: rgba(0, 229, 255, .13); border: 1px solid rgba(0, 229, 255, .13); }
.kpi { background: rgba(9, 11, 26, .96); padding: 8px 8px 7px; }
.kpi .l { font: 600 10.5px var(--head); letter-spacing: 1.1px; text-transform: uppercase; color: var(--mut); }
.kpi .v { font: 700 15px var(--mono); margin-top: 3px; color: #fff; text-shadow: 0 0 10px rgba(0, 229, 255, .35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos { color: var(--pos) !important; text-shadow: 0 0 10px rgba(43, 255, 154, .55); }
.neg { color: var(--neg) !important; text-shadow: 0 0 10px rgba(255, 46, 99, .55); }
.mut { color: var(--mut); text-shadow: none; } .warnc { color: var(--warn); }

/* badges */
.badge { display: inline-block; font: 700 10px var(--head); padding: 2px 6px; letter-spacing: 1.2px; text-transform: uppercase; vertical-align: 1px; clip-path: var(--cut-s); }
.b-long { background: rgba(43, 255, 154, .14); color: var(--pos); box-shadow: inset 0 0 0 1px rgba(43, 255, 154, .5); }
.b-short { background: rgba(255, 46, 99, .14); color: var(--neg); box-shadow: inset 0 0 0 1px rgba(255, 46, 99, .5); }
.b-add { background: rgba(255, 43, 214, .14); color: var(--mag); box-shadow: inset 0 0 0 1px rgba(255, 43, 214, .5); }
.b-mut { background: rgba(147, 166, 204, .08); color: var(--mut); box-shadow: inset 0 0 0 1px rgba(147, 166, 204, .25); font-family: var(--mono); letter-spacing: 0; text-transform: none; }
.b-live { background: rgba(0, 229, 255, .12); color: var(--acc); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .5); }
.b-warn { background: rgba(255, 230, 0, .12); color: var(--warn); box-shadow: inset 0 0 0 1px rgba(255, 230, 0, .45); }

/* account cards */
.acct { display: block; color: inherit; text-decoration: none; }
.acct .row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.acct .row1 .num { font-size: 13px; }
.bar { height: 6px; background: rgba(27, 35, 80, .8); overflow: hidden; display: flex; margin: 12px 0 6px; gap: 2px; }
.bar i { display: block; height: 100%; }
.bar .l { background: var(--pos); box-shadow: 0 0 10px var(--pos); } .bar .s { background: var(--neg); box-shadow: 0 0 10px var(--neg); }
.legend { display: flex; justify-content: space-between; font: 11.5px var(--mono); }
.legend .pos, .legend .neg { text-shadow: none; }

/* warnings */
.warns { list-style: none; margin: 0; padding: 0; }
.warns li { padding: 8px 10px; margin-bottom: 6px; font-size: 12.5px; border-left: 3px solid var(--dim); background: rgba(16, 20, 46, .7); }
.warns li.bad { border-color: var(--neg); background: linear-gradient(90deg, rgba(255, 46, 99, .22), rgba(255, 46, 99, .04)); color: #ffc2d0; }
.warns li.warn { border-color: var(--warn); background: linear-gradient(90deg, rgba(255, 230, 0, .14), rgba(255, 230, 0, .03)); color: #fff6a8; }
.warns li.info { border-color: var(--acc); background: linear-gradient(90deg, rgba(0, 229, 255, .12), rgba(0, 229, 255, .02)); }
.ok-line { color: var(--pos); font: 12.5px var(--mono); text-shadow: 0 0 8px rgba(43, 255, 154, .5); }

/* chart */
.chips { display: flex; gap: 4px; }
.chips button { appearance: none; border: 1px solid rgba(0, 229, 255, .35); background: rgba(0, 229, 255, .04); color: var(--acc);
  font: 600 11px var(--head); letter-spacing: 1px; padding: 3px 8px; clip-path: var(--cut-s); text-shadow: none; }
.chips button.on { color: #fff; border-color: var(--acc); background: rgba(0, 229, 255, .2); text-shadow: 0 0 8px var(--acc); }
canvas.chart { width: 100%; height: 190px; display: block; touch-action: pan-y; }
.chart-tip { font: 11.5px var(--mono); color: var(--mut); min-height: 17px; margin-top: 6px; }

/* positions */
.pcard { border-top: 1px solid rgba(0, 229, 255, .12); padding: 12px 0; }
.pcard:first-of-type { border-top: 0; padding-top: 0; }
.pcard .h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 6px; }
.pcard .coin { font: 700 16px var(--head); letter-spacing: 1.5px; margin-right: 6px; color: #fff; }
.pcard .g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; font-size: 12px; }
.pcard .g span { color: var(--dim); display: block; font: 600 10px var(--head); letter-spacing: 1px; text-transform: uppercase; }

/* tables / rows */
table.t { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 12px; }
table.t th { color: var(--mut); font: 600 10.5px var(--head); letter-spacing: 1px; text-transform: uppercase; text-align: right; padding: 5px 4px; border-bottom: 1px solid rgba(0, 229, 255, .25); }
table.t td { text-align: right; padding: 7px 4px; border-bottom: 1px solid rgba(27, 35, 80, .7); }
table.t th:first-child, table.t td:first-child { text-align: left; }
table.t td .pos, table.t td.pos, table.t td.neg { text-shadow: none; }
.trow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid rgba(27, 35, 80, .7); }
.trow .l1 { font: 700 14px var(--head); letter-spacing: 1px; } .trow .l2 { color: var(--dim); font: 10.5px var(--mono); margin-top: 3px; }
.trow .r { text-align: right; } .trow .r b { font-family: var(--mono); }
.more { width: 100%; appearance: none; background: rgba(0, 229, 255, .05); color: var(--acc); border: 1px solid rgba(0, 229, 255, .4); clip-path: var(--cut);
  padding: 11px; font: 600 12.5px var(--head); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 12px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 12px; border: 1px solid rgba(0, 229, 255, .35); clip-path: var(--cut); background: rgba(0, 229, 255, .03); }
.seg button { appearance: none; border: 0; background: transparent; color: var(--mut); font: 600 13px var(--head); letter-spacing: 1.5px; text-transform: uppercase; padding: 9px; }
.seg button.on { color: #fff; background: linear-gradient(90deg, rgba(0, 229, 255, .28), rgba(255, 43, 214, .28)); box-shadow: inset 0 -2px 0 var(--acc); text-shadow: 0 0 8px rgba(0, 229, 255, .9); }

/* signals */
.srow { display: grid; grid-template-columns: 80px 1fr 46px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(27, 35, 80, .7); }
.srow .c { font: 700 14px var(--head); letter-spacing: 1px; } .srow .c small { display: block; color: var(--dim); font: 400 10px var(--mono); letter-spacing: 0; margin-top: 2px; }
.srow .v { text-align: right; font: 700 13px var(--mono); color: #fff; }
.srow svg { width: 100%; height: 22px; display: block; overflow: visible; }
.srow.off { opacity: .4; }
.empty { color: var(--mut); text-align: center; padding: 40px 10px; font-family: var(--mono); }
.foot { color: var(--dim); text-align: center; font: 10.5px var(--mono); letter-spacing: .5px; margin-top: 8px; }
.health { display: flex; flex-wrap: wrap; gap: 6px; }
.health span { font: 10.5px var(--mono); padding: 3px 7px; background: rgba(43, 255, 154, .06); color: var(--mut); box-shadow: inset 0 0 0 1px rgba(43, 255, 154, .2); }
.health span.bad { color: var(--neg); background: rgba(255, 46, 99, .08); box-shadow: inset 0 0 0 1px rgba(255, 46, 99, .4); }
.card h3:not(:has(> span)) { justify-content: flex-start; }

/* Capital Milestones (dashboard card path.css, phone layout) */
.ms-top { display: flex; gap: 12px; align-items: center; }
.ms-rank { flex: none; width: 82px; text-align: center; }
.ms-rank b { display: block; font: 700 12px var(--head); letter-spacing: 1.2px; text-transform: uppercase; color: #fff; margin-top: 2px; }
.ms-rank small { display: block; font: 10px var(--mono); color: var(--mut); }
.ms-badge { width: 54px; height: 54px; display: block; margin: 0 auto; filter: drop-shadow(0 0 8px rgba(0, 229, 255, .35)); }
.ms-main { min-width: 0; }
.ms-main .big small { font-size: 13px; margin-left: 4px; }
.ms-bar { position: relative; height: 22px; margin: 14px 0 6px; background: rgba(27, 35, 80, .55); border: 1px solid rgba(0, 229, 255, .25); }
.ms-bar i { position: absolute; left: 0; top: 0; bottom: 0; display: block; }
.ms-bar .ms-pk { background: repeating-linear-gradient(45deg, rgba(0, 229, 255, .10) 0 4px, transparent 4px 8px); }
.ms-bar .ms-v { background: linear-gradient(90deg, #00e5ff, #2bff9a 35%, #ffe600 60%, #ff9a3c 80%, #ff2bd6); box-shadow: 0 0 12px rgba(43, 255, 154, .55); }
.ms-ath { position: absolute; top: -18px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.ms-ath em { position: absolute; top: 0; right: 4px; font: 700 9.5px var(--mono); font-style: normal; color: var(--warn); white-space: nowrap; }
.ms-t { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 0 4px #000, 0 0 8px #000; }
.ms-row { display: grid; grid-template-columns: 62px 86px 1fr 84px; gap: 6px; align-items: center; margin-top: 7px; font-size: 11.5px; }
.ms-l { font: 600 10.5px var(--head); letter-spacing: 1px; color: var(--mut); }
.ms-row b { font-size: 11.5px; }
.ms-b { height: 5px; background: rgba(27, 35, 80, .8); overflow: hidden; }
.ms-b i { display: block; height: 100%; }
.ms-b.r i { background: var(--pos); box-shadow: 0 0 8px var(--pos); } .ms-b.a i { background: #b06cff; box-shadow: 0 0 8px #b06cff; }
.ms-n { text-align: right; color: var(--mut); font-size: 10.5px; }
.acct .row1 .big.num { font-size: 26px; }