:root {
  color-scheme: dark;
  --bg: #040b14;
  --panel: #071321;
  --panel2: #091827;
  --line: #142b40;
  --muted: #8198ae;
  --text: #e4edf7;
  --cyan: #16d9e8;
  --green: #00d6a0;
  --red: #fa5577;
  --purple: #9d70fa;
  --gold: #f6ae4b;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: radial-gradient(ellipse at 48% -30%, #0b2540 0, transparent 55%), var(--bg);
  color: var(--text);
  font: 13px Manrope, "Segoe UI", sans-serif;
}
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
.terminal { height: 100dvh; min-height: 680px; display: grid; grid-template-rows: 58px minmax(0, 1fr) 26px; }
.topbar { display: flex; align-items: center; gap: 22px; padding: 0 20px; border-bottom: 1px solid var(--line); background: #050e19; }
.brand { font-size: 18px; font-weight: 800; letter-spacing: .5px; color: var(--text); text-decoration: none; white-space: nowrap; }
.logo { color: var(--cyan); font-size: 25px; vertical-align: -2px; margin-right: 5px; }
.topbar nav { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.topbar nav a { padding: 10px 14px; color: #a7bbcd; text-decoration: none; border-radius: 9px; }
.topbar nav .active { background: #0c2538; color: var(--cyan); }
.search-wrap { position: relative; display: flex; align-items: center; gap: 10px; width: min(32vw, 440px); margin: auto; border: 1px solid #20415b; border-radius: 9px; padding: 0 12px; height: 40px; color: #91abc1; }
.search-wrap input { background: none; border: 0; outline: 0; color: var(--text); width: 100%; font: inherit; }
.suggestions { position: absolute; z-index: 20; top: 44px; left: 0; right: 0; background: #091827; border: 1px solid #21425d; border-radius: 9px; max-height: 320px; overflow: auto; box-shadow: 0 16px 35px #0009; }
.suggestions button { width: 100%; display: flex; justify-content: space-between; padding: 10px 12px; border: 0; background: none; color: var(--text); }
.suggestions button:hover { background: #10283b; }
.live { display: flex; gap: 7px; align-items: center; color: #b6c7d6; white-space: nowrap; }
.live i, .statusbar i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px #00d6a066; }
.tiny { font-size: 11px; color: var(--green); }
.grid { padding: 8px; min-height: 0; display: grid; grid-template-columns: minmax(285px, .78fr) minmax(540px, 2.05fr) minmax(345px, .97fr); gap: 9px; }
.left-col, .center-col, .right-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 9px; }
.panel { min-width: 0; background: linear-gradient(145deg, #081725, #06111d 72%); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 20px #0002; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.section-head h2, .liq-head h2 { font-size: 16px; margin: 0; font-weight: 750; }
.arena { flex: 0 0 47%; min-height: 320px; padding: 11px; display: flex; flex-direction: column; overflow: hidden; }
.tabs, .flow-controls { display: flex; gap: 5px; align-items: center; }
.tabs button, .flow-controls button, .liq-head button, .chart-tools button {
  background: #081725; border: 1px solid #18334a; border-radius: 7px; color: #a8bdce; padding: 7px 9px; font-size: 11px;
}
.tabs button.selected, .flow-controls button.selected, .liq-head button.selected { border-color: #176aaf; color: #7fe8f2; background: #0b2033; box-shadow: inset 0 0 0 1px #176aaf33; }
.arena > .tabs { margin: 10px 0 8px; }
.rotation-heading { display: flex; justify-content: space-between; align-items: center; color: #bdcee0; font-size: 11px; letter-spacing: .04em; margin: 0 1px 6px; }
.rotation-heading span { color: #81a5bd; font-size: 10px; font-weight: 600; }
.rotation-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.rotation-card { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; min-width: 0; padding: 6px 7px; border: 1px solid #183146; border-radius: 8px; background: linear-gradient(145deg, #0b1c2a, #081522); }
.rotation-card .rank { grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #9cb2c6; background: #102538; font: 700 11px "DM Mono", monospace; }
.rotation-card:nth-child(1) .rank { color: #ffd47a; background: #3b2d15; }
.rotation-card:nth-child(2) .rank { color: #c7d7e7; background: #1a2c3c; }
.rotation-card:nth-child(3) .rank { color: #e7a981; background: #362317; }
.rotation-card .sector-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; }
.rotation-card .power { display: flex; gap: 5px; align-items: baseline; font: 700 11px "DM Mono", monospace; color: var(--green); }
.rotation-card.negative .power { color: var(--red); }
.rotation-card .movement { color: #9aaec0; font: 10px "DM Mono", monospace; }
.arena-stage { min-height: 122px; flex: 1 1 auto; margin: 6px 0 4px; display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; justify-items: center; position: relative; isolation: isolate; }
.arena-stage::before { content: ""; position: absolute; inset: 8% 16%; z-index: -1; background: radial-gradient(ellipse, #10354a66 0, #07142100 68%); }
.arena-orb { width: min(100%, 80px); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 50%; border: 1px solid var(--orb-color, #7c82a8); background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--orb-color, #7c82a8) 24%, transparent), #0a1523 66%); box-shadow: 0 0 22px color-mix(in srgb, var(--orb-color, #7c82a8) 22%, transparent), inset 0 0 16px #0a0e1b; }
.arena-orb.secondary { width: min(100%, 72px); opacity: .88; }
.arena-orb.dominant { width: min(100%, 112px); border-width: 2px; box-shadow: 0 0 30px color-mix(in srgb, var(--orb-color, #18d7e5) 32%, transparent), inset 0 0 22px #0a0e1b; }
.arena-orb .orb-label { font-size: 11px; font-weight: 750; color: #e5edf7; line-height: 1.15; }
.arena-orb .orb-score { margin-top: 3px; color: var(--orb-color, var(--cyan)); font: 800 17px "DM Mono", monospace; }
.arena-orb.dominant .orb-label { font-size: 14px; }
.arena-orb.dominant .orb-score { font-size: 23px; }
.arena-orb .orb-rank { color: #91a6ba; font: 10px "DM Mono", monospace; margin-bottom: 2px; }
.arena-message { min-height: 18px; text-align: center; font-size: 11px; color: #a8bfd1; margin: 1px 0 6px; }
.performance { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid #142b3f; padding-top: 7px; }
.performance > b { color: #8ea9bd; font-size: 10px; letter-spacing: .06em; }
.performance > div { display: flex; gap: 5px; overflow: hidden; }
.performance .perf-chip { flex: 1; min-width: 0; padding: 5px 6px; border: 1px solid #132b3d; background: #091725; border-radius: 7px; display: flex; justify-content: space-between; gap: 4px; font-size: 10px; color: #9fb3c5; }
.performance .perf-chip strong { color: var(--green); font: 700 10px "DM Mono", monospace; }
.performance .perf-chip.negative strong { color: var(--red); }
.events { margin-top: 7px; border-top: 1px solid var(--line); padding-top: 7px; }
.events h3 { font-size: 10px; margin: 0; color: #d8e5ef; letter-spacing: .03em; }
.event-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 6px; }
.event-card { min-width: 0; padding: 6px 7px; border-radius: 8px; border: 1px solid #173247; background: #091827; font-size: 10px; line-height: 1.3; }
.event-card b { display: block; color: #dce8f3; font-size: 11px; }
.event-card span { display: block; color: #92a8ba; margin-top: 2px; }
.event-card.up { border-color: #165a4e; }
.event-card.down { border-color: #663348; }
.event-card.muted { color: var(--muted); }
.flow { flex: 1 1 auto; min-height: 240px; padding: 11px; display: flex; flex-direction: column; overflow: hidden; }
.flow h2 { font-size: 16px; }
.flow-controls { margin: 9px 0 7px; }
.flow-controls span { margin-right: auto; color: #91a7ba; font-size: 11px; }
.flow-controls button { padding: 6px 9px; }
.bubbles { min-height: 0; flex: 1; position: relative; overflow: hidden; border-radius: 9px; background: radial-gradient(ellipse at 50% 48%, #0b1b2b 0, #06111c 76%); }
.bubbles canvas { width: 100%; height: 100%; display: block; }
.bubble-meta { position: absolute; left: 9px; top: 7px; color: #8ba2b8; font-size: 10px; pointer-events: none; }
.panel-foot { min-height: 18px; font-size: 10px; color: #91a7ba; border-top: 1px solid #173047; padding-top: 6px; margin-top: 6px; }
.center-col { overflow: hidden; }
.chart-top { height: 68px; flex: none; padding: 10px 14px; display: flex; align-items: center; gap: 20px; }
.pair { display: flex; align-items: center; gap: 10px; }
.star { border: 0; background: none; color: #b1c2d0; font-size: 21px; }
.coin { display: grid; place-items: center; background: #f39c27; color: white; width: 28px; height: 28px; border-radius: 50%; font-weight: bold; font-size: 15px; }
.pair strong { font-size: 17px; display: block; }
.pair small, .stats small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.price-info { display: flex; align-items: center; gap: 12px; }
.price-info > strong { font: 700 17px "DM Mono", monospace; }
.price-info > b { color: var(--green); font: 600 13px "DM Mono", monospace; }
.interval-chip { border: 1px solid #245a8a; border-radius: 10px; padding: 7px 10px; color: #d9ecfa; font: 600 12px "DM Mono", monospace; }
.stats { display: flex; gap: 18px; margin-left: auto; text-align: right; }
.stats b { font: 600 12px "DM Mono", monospace; display: block; margin-top: 4px; }
.chart-layout { flex: 1 1 auto; min-height: 280px; display: grid; grid-template-columns: 54px minmax(0, 1fr) 34px; gap: 7px; }
.interval-rail { display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: 5px 3px; }
.interval-rail button { border: 1px solid transparent; background: transparent; color: #a8bdce; padding: 10px 8px; border-radius: 8px; font: 12px "DM Mono", monospace; }
.interval-rail button.selected { border-color: #7b69e7; color: white; background: #151a37; box-shadow: 0 0 12px #7665ea33; }
.chart-panel { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.chart-tools { height: 43px; flex: none; display: flex; gap: 6px; align-items: center; padding: 0 10px; border-bottom: 1px solid #10263a; }
.chart-tools button { padding: 7px 10px; }
.tool-title { font-size: 12px; font-weight: 750; color: #c4d2df; }
.tool-spacer { flex: 1; }
.legend { min-height: 26px; flex: none; padding: 5px 13px; color: #a7bac9; font: 11px "DM Mono", monospace; }
.legend b { font-weight: 600; }
.orange { color: var(--gold); }
.pink { color: #d36ce9; }
.cyan { color: var(--cyan); }
#chart { width: 100%; height: auto; flex: 1 1 auto; min-height: 140px; display: block; touch-action: none; }
.indicator-subpanel { height: 84px; flex: none; width: 100%; border-top: 1px solid #183047; background: #06111c; }
.indicator-rail { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 9px 3px; }
.indicator-rail button { background: none; border: 0; color: #a6bbcd; font-size: 18px; }
.tooltip { position: absolute; z-index: 3; background: #0b1b2b; border: 1px solid #31506b; padding: 8px; border-radius: 7px; font: 11px "DM Mono", monospace; pointer-events: none; }
.liquidity { flex: 0 0 24%; min-height: 145px; max-height: 235px; padding: 10px 12px; display: flex; flex-direction: column; position: relative; }
.liq-head { display: flex; align-items: center; gap: 7px; min-height: 32px; }
.liq-head h2 { margin-right: 5px; }
.liq-head button { padding: 6px 9px; font-size: 10px; }
.liq-head .interval-chip { padding: 5px 8px; font-size: 10px; }
#depth { width: 100%; flex: 1; min-height: 75px; display: block; }
.liq-labels { display: flex; justify-content: space-between; font: 10px "DM Mono", monospace; color: #8ca3b8; }
.liq-labels span:first-child { color: var(--red); }
.liq-labels span:last-child { color: var(--green); }
.right-col { overflow: hidden; }
.thesis { flex: 0 0 48%; min-height: 300px; padding: 11px; display: flex; flex-direction: column; overflow: auto; }
.thesis-head { display: flex; align-items: center; gap: 10px; }
.trend-icon { width: 44px; height: 44px; background: #062a27; color: var(--green); display: grid; place-items: center; border-radius: 10px; font-size: 26px; }
.thesis-head h2 { font-size: 16px; margin: 0 0 6px; }
.direction { color: var(--green); background: #07352d; padding: 6px 9px; border-radius: 6px; font-size: 11px; font-weight: 750; }
.score { margin-left: auto; width: 52px; height: 52px; border: 4px solid #1a4560; border-top-color: #29d5b1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score b { font-size: 17px; }
.score small { font-size: 10px; color: var(--muted); }
.thesis-tabs { margin: 12px 0 8px; }
.thesis-tabs button { flex: 1; padding: 7px 3px; }
.thesis ul { list-style: none; margin: 0; padding: 3px 2px; font-size: 12px; }
.thesis li { padding: 5px 0 5px 15px; position: relative; color: #c0d0dd; line-height: 1.35; }
.thesis li:before { content: "•"; position: absolute; left: 2px; color: var(--green); font-size: 16px; top: 2px; }
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 8px; }
.levels div { padding: 7px; background: #091a28; border: 1px solid #142b3d; border-radius: 7px; }
.levels small { display: block; color: var(--muted); font-size: 10px; }
.levels b { display: block; margin-top: 4px; font: 650 12px "DM Mono", monospace; }
.mtf { padding: 8px 0; }
.mtf h3, .scenario b { font-size: 11px; margin: 0 0 6px; }
.mtf > div { display: flex; gap: 5px; }
.mtf span { background: #0b2530; color: #78dbc6; border-radius: 6px; padding: 6px 7px; font-size: 10px; }
.scenario { background: #091827; border: 1px solid #152c40; border-radius: 8px; padding: 8px; }
.scenario > b { color: #f2c27a; }
.scenario p { margin: 5px 0 0; color: #b5c8d7; font-size: 11px; line-height: 1.45; }
.nether { flex: 1 1 auto; min-height: 250px; padding: 11px; display: flex; flex-direction: column; overflow: hidden; }
.nether-head { display: flex; align-items: center; gap: 9px; flex: none; }
.nether-gem { font-size: 25px; color: #b58afa; }
.nether h2 { font-size: 16px; margin: 0; }
.nether-head small { color: var(--muted); font: 11px "DM Mono", monospace; }
.nether-head button { background: none; border: 1px solid #183047; border-radius: 7px; color: #a8bdce; width: 30px; height: 30px; font-size: 16px; }
.beta { font-size: 10px; color: #76e7c4; border: 1px solid #177e63; padding: 2px 5px; border-radius: 8px; vertical-align: 2px; }
.context-chip { flex: none; background: #0b1b2a; color: #a1b6c8; border-radius: 7px; padding: 7px 8px; margin: 8px 0; font-size: 11px; }
.quick { display: flex; flex-wrap: wrap; gap: 5px; flex: none; }
.quick button { background: #0b1d2d; border: 1px solid #18334a; border-radius: 7px; color: #c4d2df; padding: 7px 8px; font-size: 10px; }
.quick button:disabled { opacity: .55; cursor: not-allowed; }
.quick button:hover, .quick button.selected { color: #b7f5e9; border-color: #247d76; background: #0a262b; }
.chat { overflow: auto; flex: 1; min-height: 40px; margin: 8px 0 5px; scrollbar-color: #24455e transparent; }
.message { background: #091a29; border: 1px solid #152d41; border-radius: 9px; padding: 10px; margin-bottom: 7px; font-size: 12px; line-height: 1.45; }
.message > b { color: #cfb5ff; font-size: 12px; }
.message p { margin: 6px 0 0; color: #c7d5e1; }
.message .analysis-lead { color: #ecf5ff; font-size: 13px; font-weight: 700; }
.analysis-block { border-top: 1px solid #19334a; margin-top: 8px; padding-top: 7px; }
.analysis-block h4 { margin: 0 0 4px; color: #89b9d4; font-size: 10px; letter-spacing: .06em; }
.analysis-block p { margin: 0; color: #c1d0de; }
.visual-card { margin-top: 8px; overflow: hidden; border: 1px solid #1b3850; border-radius: 8px; background: #06121f; }
.visual-card h4 { margin: 0; padding: 8px 9px 0; font-size: 11px; color: #cbd9e7; }
.visual-card svg { display: block; width: 100%; height: auto; }
.local-note { color: #7890a4; font-size: 10px; text-align: center; padding-top: 4px; flex: none; }
.statusbar { display: flex; align-items: center; gap: 22px; padding: 0 12px; color: #8599ab; font-size: 10px; border-top: 1px solid var(--line); background: #050e19; }
.statusbar span:first-child { display: flex; align-items: center; gap: 6px; }
.statusbar span:last-child { margin-left: auto; }
.indicator-drawer { position: absolute; z-index: 8; right: 39px; top: 43px; bottom: 0; width: min(330px, 46%); background: #071522f7; border: 1px solid #1d405a; border-radius: 10px; overflow: auto; padding: 12px; box-shadow: 0 15px 40px #0009; }
.ind-group { margin: 8px 0 13px; }
.ind-group h4 { margin: 0 0 7px; color: #6edce8; font: 11px "DM Mono", monospace; letter-spacing: 1px; }
.ind-list { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ind-list button, .tool-active { background: #0a1d2c; border: 1px solid #18354b; border-radius: 6px; padding: 7px 6px; color: #b7c8d7; font-size: 11px; text-align: left; }
.ind-list button.on, .tool-active { color: #6ef0cc; border-color: #1b9d85; background: #082a28; }
.indicator-drawer .close { float: right; background: none; border: 0; color: #a9bdce; }
.chart-tools { position: relative; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.loading { color: var(--muted); font-size: 12px; }

@media (max-width: 1350px) {
  .grid { grid-template-columns: minmax(270px, .78fr) minmax(480px, 2fr) minmax(320px, .98fr); gap: 7px; padding: 6px; }
  .topbar { gap: 14px; padding: 0 12px; }
  .topbar nav { gap: 0; }
  .topbar nav a { padding: 9px; }
  .arena { padding: 9px; }
  .arena > .tabs button { padding: 6px 7px; }
  .rotation-card { padding: 5px; column-gap: 4px; }
  .rotation-card .rank { width: 21px; height: 21px; }
  .arena-orb.dominant { width: min(100%, 98px); }
  .arena-orb.secondary { width: min(100%, 65px); }
  .stats { gap: 10px; }
  .thesis, .nether { padding: 9px; }
  .chart-layout { grid-template-columns: 46px minmax(0, 1fr) 28px; }
  .interval-rail button { padding: 9px 5px; }
}

@media (max-height: 760px) and (min-width: 1101px) {
  .terminal { min-height: 0; }
  .arena { flex-basis: 48%; min-height: 285px; }
  .flow { min-height: 210px; }
  .thesis { flex-basis: 48%; min-height: 270px; }
  .liquidity { flex-basis: 22%; min-height: 115px; }
  .chart-top { height: 58px; }
  .arena-stage { min-height: 104px; }
}

@media (max-width: 1100px) {
  body { overflow: auto; }
  .terminal { height: auto; min-height: 100dvh; grid-template-rows: 58px auto 26px; }
  .grid { grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr); }
  .center-col { grid-column: 1 / -1; grid-row: 1; min-height: 660px; }
  .left-col, .right-col { grid-row: 2; }
  .arena, .thesis { flex-basis: 440px; }
  .flow, .nether { min-height: 390px; }
  .search-wrap { width: 28vw; }
  .stats { display: none; }
}

@media (max-width: 680px) {
  .topbar { gap: 8px; padding: 0 8px; }
  .brand { font-size: 14px; }
  .topbar nav a { padding: 7px; font-size: 11px; }
  .search-wrap { width: auto; flex: 1; margin: 0; }
  .topbar > .live { display: none; }
  .grid { display: flex; flex-direction: column; }
  .center-col { order: 0; min-height: 690px; }
  .left-col { order: 1; }
  .right-col { order: 2; overflow: visible; }
  .arena, .thesis { flex-basis: auto; min-height: 390px; }
  .flow, .nether { min-height: 420px; }
  .chart-top { gap: 8px; padding: 8px; }
  .price-info { gap: 6px; }
  .price-info > strong { font-size: 13px; }
  .price-info > b { font-size: 10px; }
  .chart-layout { grid-template-columns: 42px minmax(0, 1fr) 24px; }
  .chart-tools { gap: 3px; padding: 0 5px; }
  .chart-tools button { padding: 6px; font-size: 10px; }
  .liquidity { flex-basis: 175px; }
  .statusbar { gap: 8px; font-size: 10px; }
}