:root {
  --bg: #090d14;
  --panel: #111720;
  --panel2: #151d29;
  --ink: #eef4ff;
  --muted: #8d99ac;
  --grid: rgba(148, 163, 184, 0.13);
  --green: #12d6a0;
  --red: #ff4d5e;
  --blue: #2f86ff;
  --gold: #f2c94c;
  --purple: #b8a4ff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(circle at 20% -10%, rgba(47, 134, 255, .24), transparent 35%), linear-gradient(135deg, #070a10, #0d1320 48%, #080b12);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.shell { width: min(1520px, calc(100vw - 28px)); margin: 0 auto; padding: 18px 0 28px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 14px; }
.eyebrow { color: var(--muted); letter-spacing: 2px; text-transform: uppercase; font-size: 11px; font-weight: 800; }
h1 { margin: 2px 0 0; font-size: clamp(24px, 3vw, 42px); letter-spacing: -1px; }
.top-subtitle { margin: 4px 0 0; color: #a7b4c7; font-size: 13px; line-height: 1.35; }
.status { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
button { border: 1px solid rgba(255,255,255,.12); color: var(--ink); background: #192234; border-radius: 999px; padding: 9px 14px; font-weight: 800; cursor: pointer; }
button:hover { background: #22314b; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 16px; align-items: start; }
.chart-card, .idea-card { background: rgba(17, 23, 32, .92); border: 1px solid rgba(255,255,255,.08); border-radius: 22px; box-shadow: 0 22px 70px rgba(0,0,0,.33); overflow: hidden; }
.chart-card { padding: 14px; }
.chart-head { display:flex; justify-content:space-between; align-items:center; padding: 0 4px 10px; color: var(--muted); font-size: 13px; gap: 10px; }
.ohlc strong { color: var(--ink); }
.legend { display:flex; align-items:center; gap: 9px; flex-wrap: wrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; display:inline-block; margin-left: 8px; }
.dot.price { background: var(--green); } .dot.vwap { background: var(--blue); } .dot.ema21 { background: var(--gold); } .dot.ema55 { background: var(--purple); }

.native-chart-panel { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(135deg, rgba(47,134,255,.10), rgba(255,255,255,.035)); border-radius:18px; padding:13px 14px; margin-bottom:12px; }
.native-chart-panel p { margin:4px 0 0; color:var(--muted); font-size:13px; line-height:1.4; }
.chart-mode-row { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.mini-chip { border:1px solid rgba(255,255,255,.09); background:rgba(9,13,20,.42); border-radius:999px; padding:8px 10px; color:#cbd5e1; font-size:11px; font-weight:900; white-space:nowrap; }

.trade-plan { display:flex; justify-content:space-between; align-items:center; gap: 14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.05); border-radius:18px; padding:13px 14px; margin: 0 0 12px; color:#dbe7f8; }
.trade-plan strong { display:block; font-size:17px; letter-spacing:-.2px; }
.trade-plan span { color:#b9c5d6; font-size:13px; line-height:1.35; }
.trade-plan.long { border-color:rgba(18,214,160,.34); background:linear-gradient(135deg, rgba(18,214,160,.13), rgba(255,255,255,.04)); }
.trade-plan.short { border-color:rgba(255,77,94,.34); background:linear-gradient(135deg, rgba(255,77,94,.13), rgba(255,255,255,.04)); }
.trade-plan.wait { border-color:rgba(242,201,76,.3); background:linear-gradient(135deg, rgba(242,201,76,.12), rgba(255,255,255,.04)); }
.plan-levels { display:grid; grid-template-columns: repeat(4, minmax(82px, 1fr)); gap: 7px; min-width:min(520px, 54%); }
.plan-levels span { border:1px solid rgba(255,255,255,.08); background:rgba(9,13,20,.38); border-radius:12px; padding:8px; color:var(--muted); }
.plan-levels b { display:block; color:var(--ink); font-size:14px; margin-top:2px; }
canvas { width: 100%; display:block; background: #0b111b; border-radius: 14px; }
#priceCanvas { height: 680px; }
#cvdCanvas { height: 210px; margin-top: 10px; }
.idea-card { padding: 20px; position: sticky; top: 14px; }
.kicker { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; font-weight: 900; }
.side { margin-top: 8px; font-size: 48px; line-height: 1; font-weight: 1000; letter-spacing: -2px; }
.side.long { color: var(--green); } .side.short { color: var(--red); } .side.wait { color: var(--gold); }
.confidence { color: var(--muted); font-weight: 800; margin-top: 6px; }
.summary { color: #c9d3e4; line-height: 1.5; }
.score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.score-grid div { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 12px; }
.score-grid span { display:block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.score-grid strong { font-size: 26px; }
.patterns { display:flex; flex-wrap:wrap; gap:8px; }
.pattern-chip { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.05); border-radius:13px; padding:9px 10px; min-width:128px; }
.pattern-chip strong { display:block; font-size:13px; }
.pattern-chip span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.8px; }
.pattern-chip.long { border-color:rgba(18,214,160,.3); background:rgba(18,214,160,.1); }
.pattern-chip.short { border-color:rgba(255,77,94,.3); background:rgba(255,77,94,.1); }
.pattern-chip.wait { border-color:rgba(242,201,76,.3); background:rgba(242,201,76,.1); }
.pattern-chip.neutral { color:var(--muted); }
h3 { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--muted); }
ul { margin: 0; padding-left: 18px; color: #d8e1f0; line-height: 1.5; }
.metrics, .levels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metric { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); border-radius: 13px; padding: 10px; }
.metric span { display:block; color: var(--muted); font-size: 11px; }
.metric strong { font-size: 15px; }
.rabby-card { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.045); border-radius:16px; padding:12px; display:grid; gap:9px; }
.rabby-card button { width:100%; }
.rabby-status { border-radius:12px; padding:9px 10px; background:rgba(242,201,76,.1); color:var(--gold); font-weight:900; font-size:12px; }
.rabby-status.long { background:rgba(18,214,160,.1); color:var(--green); }
.rabby-status.short { background:rgba(255,77,94,.1); color:var(--red); }
.ticket-box { border:1px solid rgba(255,255,255,.08); background:rgba(9,13,20,.45); border-radius:13px; padding:10px; color:#dbe7f8; font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.ticket-box strong { font-size:15px; }
.ticket-box span { color:var(--muted); }
.signature-result { color:#93c5fd; font-size:12px; min-height:18px; overflow-wrap:anywhere; }
@media (max-width: 1050px) { .layout { grid-template-columns: 1fr; } .idea-card { position: static; } 
.native-chart-panel { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(135deg, rgba(47,134,255,.10), rgba(255,255,255,.035)); border-radius:18px; padding:13px 14px; margin-bottom:12px; }
.native-chart-panel p { margin:4px 0 0; color:var(--muted); font-size:13px; line-height:1.4; }
.chart-mode-row { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.mini-chip { border:1px solid rgba(255,255,255,.09); background:rgba(9,13,20,.42); border-radius:999px; padding:8px 10px; color:#cbd5e1; font-size:11px; font-weight:900; white-space:nowrap; }

.trade-plan { display:block; } .plan-levels { min-width:0; margin-top:10px; } }
.potential-card, .demo-card { background: rgba(17, 23, 32, .92); border: 1px solid rgba(255,255,255,.08); border-radius: 22px; box-shadow: 0 22px 70px rgba(0,0,0,.28); padding: 16px; margin-bottom: 16px; }
.potential-head { display:flex; justify-content:space-between; align-items:flex-start; gap: 14px; margin-bottom: 12px; }
.potential-head p { margin: 4px 0 0; color: var(--muted); }
.meta-pill { border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); color:#cbd5e1; border-radius:999px; padding:8px 12px; font-size:12px; font-weight:800; white-space:nowrap; }
.demo-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:12px; }
.demo-bot { border:1px solid rgba(18,214,160,.20); background:linear-gradient(135deg, rgba(18,214,160,.08), rgba(255,255,255,.035)); border-radius:18px; padding:14px; min-height: 260px; }
.demo-bot.stale { border-color:rgba(242,201,76,.42); background:linear-gradient(135deg, rgba(242,201,76,.09), rgba(255,255,255,.03)); }
.demo-bot-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.demo-bot h2 { margin:3px 0 0; font-size:22px; letter-spacing:-.5px; }
.demo-status { border-radius:999px; padding:7px 10px; font-size:10px; font-weight:1000; text-transform:uppercase; letter-spacing:.8px; border:1px solid rgba(255,255,255,.11); color:#cbd5e1; background:rgba(255,255,255,.05); }
.demo-status.running { color:#06110d; background:var(--green); border-color:rgba(18,214,160,.65); }
.demo-status.stale { color:#171204; background:var(--gold); border-color:rgba(242,201,76,.7); }
.demo-status.missing { color:#17070a; background:var(--red); border-color:rgba(255,77,94,.7); }
.demo-stat-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin-bottom:10px; }
.demo-stat-grid div { border:1px solid rgba(255,255,255,.08); background:rgba(9,13,20,.35); border-radius:13px; padding:10px; }
.demo-stat-grid span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:1px; font-weight:900; }
.demo-stat-grid strong { display:block; margin-top:3px; font-size:18px; letter-spacing:-.3px; }
.profit { color:var(--green); }
.loss { color:var(--red); }
.demo-smallline { color:#b9c5d6; font-size:12px; line-height:1.35; margin-bottom:12px; }
.demo-section { border-top:1px solid rgba(255,255,255,.08); padding-top:10px; margin-top:10px; }
.demo-muted, .demo-position-meta { color:var(--muted); font-size:12px; line-height:1.35; }
.demo-position, .demo-signal, .demo-trade { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.045); border-radius:12px; padding:9px; margin-top:7px; }
.demo-position strong, .demo-signal strong, .demo-trade strong { font-size:13px; }
.demo-signal span, .demo-trade span { display:block; color:#cbd5e1; font-size:12px; margin-top:3px; line-height:1.35; }
.demo-trade.pos span { color:var(--green); }
.demo-trade.neg span { color:var(--red); }
.demo-empty { color:var(--muted); border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); border-radius:14px; padding:14px; }
.potential-list { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.potential-row { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.045); border-radius:17px; padding:12px; cursor:pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.potential-row:hover { transform: translateY(-2px); background:rgba(255,255,255,.075); }
.potential-row.active { border-color: rgba(47,134,255,.8); box-shadow: 0 0 0 1px rgba(47,134,255,.28) inset; }
.potential-row .rowtop { display:flex; align-items:center; justify-content:space-between; gap: 8px; }
.potential-row .sym { font-size:18px; font-weight:1000; letter-spacing:-.3px; }
.badge { border-radius:999px; padding:5px 9px; font-size:11px; font-weight:1000; letter-spacing:.8px; }
.badge.long { color:#07120e; background:var(--green); }
.badge.short { color:#16080a; background:var(--red); }
.badge.wait { color:#171204; background:var(--gold); }
.potential-score { font-size:28px; font-weight:1000; margin:8px 0 2px; }
.potential-sub { color:var(--muted); font-size:12px; line-height:1.35; }
.cmc-line { color:#93c5fd; font-size:12px; line-height:1.35; margin-top:5px; font-weight:800; }
.pattern-line { color:#d8b4fe; font-size:12px; line-height:1.35; margin-top:4px; font-weight:800; }
.pattern-line.long { color:var(--green); }
.pattern-line.short { color:var(--red); }
.pattern-line.wait { color:var(--gold); }
.potential-reason { color:#dbe7f8; font-size:12px; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width: 620px) { .topbar { display:block; } .status { margin-top:12px; flex-wrap:wrap; } .potential-head { display:block; } .meta-pill { display:inline-block; margin-top:10px; } .native-chart-panel { display:block; } .chart-mode-row { margin-top:10px; } .plan-levels { grid-template-columns:1fr 1fr; } .demo-grid { grid-template-columns:1fr; } .demo-stat-grid { grid-template-columns:1fr 1fr; } }

.decision-card { display:grid; grid-template-columns:minmax(260px, .95fr) 1.4fr; gap:12px; border:1px solid rgba(255,255,255,.09); background:linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.025)); border-radius:18px; padding:14px; margin:0 0 12px; }
.decision-card.ready { border-color:rgba(18,214,160,.42); box-shadow:0 0 0 1px rgba(18,214,160,.12) inset; }
.decision-card.watch { border-color:rgba(242,201,76,.38); box-shadow:0 0 0 1px rgba(242,201,76,.1) inset; }
.decision-card.wait { border-color:rgba(148,163,184,.22); }
.decision-title { margin-top:6px; font-size:22px; font-weight:1000; letter-spacing:-.5px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.decision-title em { color:var(--muted); font-style:normal; font-size:14px; font-weight:900; }
.decision-main p { color:#cbd5e1; line-height:1.45; margin:8px 0 0; }
.decision-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.decision-grid div { border:1px solid rgba(255,255,255,.08); background:rgba(9,13,20,.34); border-radius:13px; padding:10px; }
.decision-grid span { display:block; color:var(--muted); text-transform:uppercase; letter-spacing:1px; font-size:10px; font-weight:1000; margin-bottom:4px; }
.decision-grid strong { color:#eaf1ff; font-size:12px; line-height:1.35; }
.decision-pill { display:inline-flex; align-items:center; border-radius:999px; padding:5px 9px; font-size:10px; font-weight:1000; letter-spacing:.9px; vertical-align:middle; }
.decision-pill.ready { color:#06110d; background:var(--green); }
.decision-pill.watch { color:#171204; background:var(--gold); }
.decision-pill.wait { color:#dbe7f8; background:rgba(148,163,184,.22); border:1px solid rgba(148,163,184,.32); }
@media (max-width: 820px) { .decision-card { grid-template-columns:1fr; } .decision-grid { grid-template-columns:1fr; } }

.codex-take { border:1px solid rgba(255,255,255,.09); background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); border-radius:16px; padding:13px; margin:14px 0; }
.codex-take.high { border-color:rgba(18,214,160,.42); background:linear-gradient(135deg, rgba(18,214,160,.14), rgba(255,255,255,.035)); }
.codex-take.medium { border-color:rgba(242,201,76,.42); background:linear-gradient(135deg, rgba(242,201,76,.13), rgba(255,255,255,.035)); }
.codex-take.low, .codex-take.wait { border-color:rgba(148,163,184,.22); }
.codex-take strong { display:block; font-size:20px; letter-spacing:-.4px; margin-top:5px; }
.codex-take p { color:#dbe7f8; line-height:1.45; margin:8px 0; }
.take-next { border:1px solid rgba(255,255,255,.08); background:rgba(9,13,20,.36); border-radius:12px; padding:9px; color:#cbd5e1; font-size:12px; line-height:1.35; }
.take-checks { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.take-checks span { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.045); border-radius:999px; padding:5px 8px; color:var(--muted); font-size:10px; font-weight:900; }
.opinion-line { margin-top:8px; color:#dbe7f8; font-size:12px; line-height:1.35; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.opinion-line.high { color:var(--green); }
.opinion-line.medium { color:var(--gold); }
.opinion-line.low, .opinion-line.wait { color:#cbd5e1; }

@keyframes nearPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242,201,76,.10), 0 0 0 1px rgba(242,201,76,.20) inset; filter: brightness(1); }
  50% { box-shadow: 0 0 28px 4px rgba(242,201,76,.42), 0 0 0 1px rgba(242,201,76,.68) inset; filter: brightness(1.16); }
}
@keyframes nearTextPulse {
  0%, 100% { opacity:.72; transform:scale(1); }
  50% { opacity:1; transform:scale(1.035); }
}
.near-alert { border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.045); color:#cbd5e1; border-radius:999px; padding:8px 11px; font-size:11px; font-weight:1000; letter-spacing:.8px; text-transform:uppercase; white-space:nowrap; }
.near-alert.idle { color:var(--muted); }
.near-alert.blink { animation: nearPulse 1.05s infinite; background:rgba(242,201,76,.15); color:var(--gold); border-color:rgba(242,201,76,.55); }
.near-alert.blink.long { background:rgba(18,214,160,.13); color:var(--green); border-color:rgba(18,214,160,.55); }
.near-alert.blink.short { background:rgba(255,77,94,.13); color:var(--red); border-color:rgba(255,77,94,.55); }
.potential-row.near-entry { border-color:rgba(242,201,76,.65); animation: nearPulse 1.15s infinite; }
.potential-row.near-entry .sym { color:#fff7cc; }
.near-tag { display:inline-flex; margin-right:8px; border-radius:999px; padding:5px 7px; background:var(--gold); color:#171204; font-size:10px; font-weight:1000; letter-spacing:.8px; }
.near-tag.blink { animation: nearTextPulse .85s infinite; }
.codex-take.blink { animation: nearPulse 1.15s infinite; }
body.has-near-entry .topbar { position:relative; }
body.has-near-entry .topbar:after { content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; background:linear-gradient(90deg, transparent, rgba(242,201,76,.85), transparent); animation: nearTextPulse 1s infinite; }
@media (prefers-reduced-motion: reduce) { .near-alert.blink, .potential-row.near-entry, .near-tag.blink, .codex-take.blink, body.has-near-entry .topbar:after { animation:none; } }

.potential-row .rowtop > span:last-child { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }