:root {
  --bg: #07131d;
  --bg-deep: #040b12;
  --panel: rgba(10, 28, 41, .78);
  --panel-solid: #0b1d2a;
  --line: rgba(157, 190, 205, .14);
  --line-bright: rgba(157, 190, 205, .28);
  --text: #eaf4f6;
  --muted: #849ba5;
  --subtle: #57717d;
  --cyan: #72e6df;
  --cyan-soft: rgba(114, 230, 223, .12);
  --green: #67e6a3;
  --coral: #ff827d;
  --amber: #f6c76c;
  --purple: #b8a6ff;
  --mono: "IBM Plex Mono", monospace;
  --sans: "Space Grotesk", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg-deep); }
body { margin: 0; color: var(--text); background: radial-gradient(circle at 76% -5%, rgba(35, 82, 93, .22), transparent 30%), linear-gradient(180deg, #081722 0%, var(--bg-deep) 100%); font-family: var(--sans); min-height: 100vh; }
button, input { font: inherit; }
button { cursor: pointer; }
.ambient { position: fixed; pointer-events: none; filter: blur(80px); opacity: .15; border-radius: 50%; z-index: 0; }
.ambient-one { width: 340px; height: 340px; background: var(--cyan); top: 32%; left: -220px; }
.ambient-two { width: 280px; height: 280px; background: #4f3cac; top: 68%; right: -160px; }
.app-shell { position: relative; z-index: 1; width: min(1440px, calc(100% - 72px)); margin: 0 auto; padding: 26px 0 38px; }
.topbar, .asset-header, .app-footer, .chart-footer, .signal-footer { display: flex; align-items: center; justify-content: space-between; }
.topbar { padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--text); }
.brand strong { display: block; font-weight: 600; font-size: 16px; letter-spacing: -.02em; }
.brand small { display: block; color: var(--subtle); font: 10px var(--mono); letter-spacing: .14em; margin-top: 2px; }
.brand-mark { display: grid; place-items: center; position: relative; width: 38px; height: 38px; border: 1px solid rgba(114,230,223,.7); background: rgba(114,230,223,.06); color: var(--cyan); font: 600 12px var(--mono); letter-spacing: -.08em; }
.brand-mark:before, .brand-mark:after { position: absolute; content: ""; background: var(--cyan); }
.brand-mark:before { width: 5px; height: 1px; top: -1px; left: 7px; } .brand-mark:after { width: 1px; height: 5px; right: -1px; bottom: 7px; }
.brand-mark i { position: absolute; width: 5px; height: 5px; background: var(--cyan); border-radius: 50%; right: 5px; top: 5px; box-shadow: 0 0 12px var(--cyan); }
.connection { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 11px var(--mono); letter-spacing: .04em; }
.status-dot, .confidence-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px rgba(246,199,108,.65); }
.connection[data-state="live"] .status-dot { background: var(--green); box-shadow: 0 0 10px rgba(103,230,163,.7); }
.connection[data-state="error"] .status-dot { background: var(--coral); box-shadow: 0 0 10px rgba(255,130,125,.65); }
.hero-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 62px 0 42px; }
.eyebrow, .field-kicker, .metric-label { color: var(--cyan); font: 500 10px var(--mono); letter-spacing: .15em; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 17px; }
.eyebrow-line { width: 28px; height: 1px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
h1 { margin: 0; font-size: clamp(38px, 5.3vw, 76px); font-weight: 500; letter-spacing: -.075em; line-height: .98; }
h1 em { color: var(--cyan); font-style: normal; }
.hero-copy { max-width: 480px; color: var(--muted); font-size: 14px; line-height: 1.65; margin: 24px 0 0; }
.hero-meta { min-width: 180px; text-align: right; padding-bottom: 4px; }
.hero-meta span, .hero-meta small { display: block; color: var(--subtle); font: 10px var(--mono); letter-spacing: .13em; }
.hero-meta strong { display: block; margin: 9px 0 7px; color: var(--text); font: 600 12px var(--mono); letter-spacing: .1em; }
.panel { border: 1px solid var(--line); background: linear-gradient(130deg, rgba(16,40,54,.82), rgba(7,20,30,.82)); box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 16px 40px rgba(0,0,0,.10); }
.search-panel { position: relative; display: grid; grid-template-columns: 180px 1fr; gap: 14px 30px; align-items: center; padding: 22px 24px 20px; }
.search-copy label { display: block; font-size: 15px; font-weight: 500; margin-top: 7px; }
.search-control { position: relative; display: flex; align-items: center; min-width: 0; border-bottom: 1px solid var(--line-bright); padding: 0 0 9px; }
.search-icon { margin-right: 10px; color: var(--cyan); font-size: 25px; line-height: 1; transform: rotate(-20deg); }
.search-control input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 19px; font-weight: 500; text-transform: uppercase; }
.search-control input::placeholder { color: var(--subtle); }
.quote-suffix { color: var(--muted); font: 11px var(--mono); margin: 0 16px; white-space: nowrap; }
#analyzeButton { border: 0; background: var(--cyan); color: #062024; font-size: 12px; font-weight: 700; padding: 11px 14px; transition: transform .2s, background .2s; }
#analyzeButton:hover { background: #a1f8f1; transform: translateY(-1px); }
#analyzeButton span { padding-left: 9px; font-size: 15px; }
.search-hint { grid-column: 2; margin: -3px 0 0; color: var(--subtle); font: 10px var(--mono); }
.quick-symbol { padding: 0; border: 0; background: none; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.quick-symbol:hover { color: var(--cyan); }
.suggestions { position: absolute; z-index: 10; display: none; top: 44px; left: 0; right: 130px; border: 1px solid var(--line-bright); background: #0b202e; box-shadow: 0 18px 30px rgba(0,0,0,.35); }
.suggestions.open { display: block; }
.suggestion { display: flex; justify-content: space-between; width: 100%; padding: 12px 14px; color: var(--text); border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.suggestion:hover { background: var(--cyan-soft); }
.suggestion span:last-child { color: var(--subtle); font: 10px var(--mono); }
.asset-header { padding: 36px 0 27px; }
.asset-identity { display: flex; align-items: center; gap: 14px; }
.coin-avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; border: 1px solid rgba(246,199,108,.32); background: rgba(246,199,108,.1); color: var(--amber); font-size: 24px; }
.asset-name-line { display: flex; align-items: baseline; gap: 10px; }
.asset-name-line h2 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -.04em; }
.asset-name-line span { color: var(--muted); font: 11px var(--mono); }
.asset-identity p { color: var(--subtle); font: 10px var(--mono); margin: 7px 0 0; }
.asset-quote { text-align: right; }
.quote-price { font: 600 clamp(25px, 3vw, 35px) var(--mono); letter-spacing: -.06em; }
.quote-change { font: 11px var(--mono); margin-top: 6px; }
.quote-change.positive { color: var(--green); }.quote-change.negative { color: var(--coral); }.quote-change.neutral { color: var(--muted); }
.workspace { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, .85fr); gap: 16px; }
.chart-panel, .signals-panel { min-height: 460px; padding: 23px 24px 18px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.panel-heading h3 { margin: 8px 0 0; font-size: 17px; font-weight: 500; letter-spacing: -.03em; }
.chart-controls { display: flex; align-items: center; gap: 10px; }
.zone-toggle { display: flex; align-items: center; gap: 7px; color: var(--muted); font: 10px var(--mono); cursor: pointer; user-select: none; }.zone-toggle b { color: var(--cyan); font-size: 8px; letter-spacing: .08em; }
.zone-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track { position: relative; display: inline-block; width: 28px; height: 15px; border: 1px solid var(--line-bright); border-radius: 20px; background: rgba(0,0,0,.2); transition: .2s; }
.toggle-track i { position: absolute; top: 3px; left: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--subtle); transition: .2s; }
.zone-toggle input:checked + .toggle-track { border-color: rgba(114,230,223,.7); background: var(--cyan-soft); }.zone-toggle input:checked + .toggle-track i { left: 16px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.time-tabs { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); background: rgba(0,0,0,.12); }
.time-tab { border: 0; background: transparent; color: var(--muted); padding: 6px 9px; font: 10px var(--mono); }.time-tab:hover, .time-tab.active { color: var(--bg); background: var(--cyan); }
.chart-wrap { position: relative; height: 345px; margin: 23px -5px 0; }
#priceChart { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-grid { stroke: rgba(150,183,196,.11); stroke-width: 1; vector-effect: non-scaling-stroke; }.chart-axis { fill: var(--subtle); font: 10px var(--mono); }.chart-area { fill: url(#areaGradient); }.chart-line { fill: none; stroke: var(--cyan); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(114,230,223,.42)); }.chart-point { fill: var(--cyan); stroke: var(--bg); stroke-width: 2; vector-effect: non-scaling-stroke; }.zone-band { vector-effect: non-scaling-stroke; }.zone-band.resistance { fill: rgba(255,130,125,.10); stroke: rgba(255,130,125,.34); stroke-width: 1; stroke-dasharray: 4 4; }.zone-band.support { fill: rgba(103,230,163,.10); stroke: rgba(103,230,163,.34); stroke-width: 1; stroke-dasharray: 4 4; }.zone-label { font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.zone-label.resistance { fill: var(--coral); }.zone-label.support { fill: var(--green); }
.chart-loading { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--muted); font: 11px var(--mono); background: rgba(7,19,29,.48); }.chart-loading.hidden { display: none; }
.spinner { display: inline-block; width: 13px; height: 13px; border: 1px solid var(--subtle); border-top-color: var(--cyan); border-radius: 50%; animation: spin .8s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }
.chart-footer { color: var(--subtle); font: 10px var(--mono); margin-top: 9px; }.chart-footer > span:first-child { display: flex; gap: 10px; align-items: center; }.chart-legends { display: flex; gap: 10px; }.chart-legends > span { display: flex; align-items: center; gap: 5px; }.legend-line { width: 16px; height: 2px; background: var(--cyan); }.legend-zone i { width: 8px; height: 8px; border: 1px dashed currentColor; }.legend-zone.resistance { color: var(--coral); }.legend-zone.support { color: var(--green); }.chart-live { color: var(--green); }.chart-live i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--green); margin-right: 5px; vertical-align: middle; box-shadow: 0 0 8px var(--green); }
.zone-explainer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 13px; padding-top: 10px; color: var(--subtle); font: 9px var(--mono); }.zone-explainer-title { color: var(--cyan); letter-spacing: .1em; }.explainer-chip { display: inline-block; width: 8px; height: 8px; margin-right: 3px; border: 1px dashed currentColor; }.explainer-chip.resistance { color: var(--coral); background: rgba(255,130,125,.18); }.explainer-chip.support { color: var(--green); background: rgba(103,230,163,.18); }
.chart-tooltip { display: none; position: absolute; pointer-events: none; z-index: 4; padding: 8px 10px; border: 1px solid var(--line-bright); background: #102b3a; color: var(--text); font: 10px var(--mono); white-space: nowrap; transform: translate(-50%, -115%); }
.info-mark { display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid var(--line-bright); border-radius: 50%; color: var(--muted); font: 11px var(--mono); }
.signal-summary { display: grid; grid-template-columns: 106px 1fr; gap: 19px; align-items: center; margin: 31px 0 26px; }.signal-ring { display: grid; place-items: center; align-content: center; width: 106px; height: 106px; border-radius: 50%; background: radial-gradient(circle at center, var(--panel-solid) 56%, transparent 57%), conic-gradient(var(--cyan) 0 72%, rgba(114,230,223,.14) 72% 100%); box-shadow: 0 0 28px rgba(114,230,223,.08); }.signal-ring span { color: var(--cyan); font: 600 22px var(--mono); letter-spacing: -.07em; }.signal-ring small { margin-top: 4px; color: var(--muted); font: 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; }.signal-summary strong { display: block; margin-top: 8px; font-size: 16px; font-weight: 500; }.signal-summary p { color: var(--muted); font-size: 11px; line-height: 1.45; margin: 7px 0 0; }
.probability-list { border-top: 1px solid var(--line); padding-top: 20px; }.probability-row { margin-bottom: 18px; }.probability-label { display: flex; align-items: center; gap: 9px; font-size: 12px; }.probability-label strong { margin-left: auto; font: 600 14px var(--mono); }.signal-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font: 15px var(--mono); }.up-row .signal-icon { color: var(--green); background: rgba(103,230,163,.12); }.down-row .signal-icon { color: var(--coral); background: rgba(255,130,125,.12); }.side-row .signal-icon { color: var(--amber); background: rgba(246,199,108,.12); }.meter { height: 4px; margin: 9px 0 5px 29px; overflow: hidden; background: rgba(150,183,196,.12); }.meter span { display: block; width: 0; height: 100%; transition: width .7s ease; }.up-row .meter span { background: var(--green); }.down-row .meter span { background: var(--coral); }.side-row .meter span { background: var(--amber); }.probability-row small { display: block; margin-left: 29px; color: var(--subtle); font: 9px var(--mono); }.signal-footer { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 14px; color: var(--muted); font: 10px var(--mono); }.signal-modules { color: var(--cyan); }.signal-sample { margin-left: auto; color: var(--subtle); }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }.metric-card { position: relative; min-height: 123px; padding: 18px 19px; overflow: hidden; }.metric-card strong { display: block; margin-top: 14px; font: 500 22px var(--mono); letter-spacing: -.08em; }.metric-card small { display: block; margin-top: 6px; color: var(--muted); font: 10px var(--mono); }.metric-spark { position: absolute; right: 15px; bottom: 14px; width: 66px; height: 24px; opacity: .7; background: linear-gradient(135deg, transparent 8%, currentColor 9%, currentColor 11%, transparent 12%, transparent 25%, currentColor 26%, currentColor 28%, transparent 29%, transparent 48%, currentColor 49%, currentColor 51%, transparent 52%, transparent 64%, currentColor 65%, currentColor 67%, transparent 68%, transparent 81%, currentColor 82%, currentColor 84%, transparent 85%); transform: skewY(-10deg); }.spark-cyan { color: var(--cyan); }.spark-amber { color: var(--amber); transform: skewY(9deg); }.spark-purple { color: var(--purple); }.live-pulse { position: absolute; right: 24px; bottom: 22px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 7px rgba(103,230,163,.08), 0 0 18px var(--green); animation: breathe 2s infinite; }@keyframes breathe { 50% { box-shadow: 0 0 0 12px rgba(103,230,163,0), 0 0 20px var(--green); } }
.method-note { display: flex; align-items: flex-start; gap: 15px; margin-top: 16px; padding: 17px 19px; }.note-symbol { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border: 1px solid rgba(246,199,108,.6); border-radius: 50%; color: var(--amber); font: 600 12px var(--mono); }.method-note strong { font-size: 12px; font-weight: 600; }.method-note p { max-width: 810px; margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }.method-note b { color: var(--text); font-weight: 500; }.method-tag { margin-left: auto; padding-top: 3px; color: var(--subtle); font: 9px var(--mono); white-space: nowrap; }.app-footer { padding-top: 25px; color: var(--subtle); font: 9px var(--mono); letter-spacing: .08em; }
@media (max-width: 980px) { .app-shell { width: min(100% - 40px, 760px); }.workspace { grid-template-columns: 1fr; }.signals-panel { min-height: auto; }.signal-summary { margin-top: 22px; }.hero-row { padding-top: 48px; }.metrics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .chart-heading .chart-controls { justify-content: space-between; margin-top: 19px; }.chart-legends { gap: 7px; }.chart-legends > span { gap: 3px; }.legend-line { width: 10px; } }
@media (max-width: 600px) { .app-shell { width: calc(100% - 28px); padding-top: 17px; }.topbar { padding-bottom: 20px; }.connection { font-size: 0; }.connection .status-dot { width: 8px; height: 8px; }.hero-row { display: block; padding: 40px 0 30px; }.hero-meta { margin-top: 27px; text-align: left; }.hero-copy { font-size: 13px; }.search-panel { display: block; padding: 18px 15px 16px; }.search-copy { margin-bottom: 20px; }.search-hint { margin-top: 12px; }.suggestions { top: 44px; right: 0; }.quote-suffix { display: none; }.search-control input { font-size: 17px; }.asset-header { padding: 27px 0 22px; }.asset-name-line { display: block; }.asset-name-line span { display: block; margin-top: 5px; }.asset-name-line h2 { font-size: 21px; }.asset-identity p { display: none; }.coin-avatar { width: 42px; height: 42px; }.quote-price { font-size: 22px; }.chart-panel, .signals-panel { padding: 18px 14px 15px; }.chart-heading { display: block; }.time-tabs { width: max-content; margin-top: 19px; }.chart-wrap { height: 270px; margin-top: 16px; }.chart-footer { font-size: 9px; }.chart-footer > span:nth-child(2) { display: none; }.signal-summary { grid-template-columns: 92px 1fr; gap: 14px; }.signal-ring { width: 92px; height: 92px; }.signal-ring span { font-size: 18px; }.metrics-grid { gap: 10px; margin-top: 10px; }.metric-card { min-height: 111px; padding: 14px; }.metric-card strong { font-size: 17px; margin-top: 13px; }.metric-card small { font-size: 9px; }.method-note { padding: 15px 13px; }.method-tag { display: none; }.app-footer { display: block; line-height: 2; padding-top: 20px; }.app-footer span { display: block; }.app-footer span:last-child { color: var(--amber); } }

.signal-footer { gap: 8px; }
@media (max-width: 600px) { .signal-footer { flex-wrap: wrap; font-size: 9px; } .signal-footer .signal-sample { margin-left: 0; } }

.ad-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 96px; margin: 16px 0; padding: 15px; border: 1px dashed rgba(150,183,196,.18); background: rgba(9,26,37,.42); color: var(--subtle); text-align: center; }.ad-slot > span { color: var(--subtle); font: 8px var(--mono); letter-spacing: .16em; }.ad-slot strong { margin-top: 7px; color: var(--muted); font: 11px var(--mono); font-weight: 500; }.ad-slot small { margin-top: 5px; color: var(--subtle); font: 9px var(--mono); }.ad-slot-inline { margin-top: 16px; }.ad-live { min-height: 90px; border-style: solid; border-color: rgba(114,230,223,.2); }

.targets-panel { margin-top: 16px; padding: 20px; }.target-note { color: var(--subtle); font: 9px var(--mono); text-transform: uppercase; }.targets-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }.target-card { padding: 16px; border: 1px solid var(--line); background: rgba(8,22,33,.38); }.target-up { border-color: rgba(103,230,163,.25); }.target-down { border-color: rgba(255,130,125,.25); }.target-card-head { display: flex; align-items: center; gap: 10px; }.target-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font: 18px var(--mono); }.target-up .target-icon { color: var(--green); background: rgba(103,230,163,.11); }.target-down .target-icon { color: var(--coral); background: rgba(255,130,125,.11); }.target-card-head strong { display: block; font-size: 12px; font-weight: 600; }.target-card-head small { display: block; margin-top: 5px; color: var(--muted); font: 9px var(--mono); }.target-values { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }.target-values span { display: block; color: var(--subtle); font: 9px var(--mono); text-transform: uppercase; letter-spacing: .06em; }.target-values b { display: block; margin-top: 6px; color: var(--text); font: 600 17px var(--mono); }.target-up .target-values > div:last-child b { color: var(--green); }.target-down .target-values > div:last-child b { color: var(--coral); }.target-values small { display: block; margin-top: 4px; color: var(--muted); font: 9px var(--mono); }.target-card p { min-height: 29px; margin: 15px 0 0; color: var(--muted); font: 10px var(--mono); line-height: 1.45; }.targets-disclaimer { display: block; margin-top: 14px; color: var(--subtle); font: 9px var(--mono); line-height: 1.45; }
@media (max-width: 600px) { .targets-panel { padding: 16px 14px; }.targets-grid { grid-template-columns: 1fr; gap: 10px; }.target-card { padding: 14px; }.target-values b { font-size: 15px; } }