@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=PT+Sans:wght@400;700&display=swap');

/* Shared typography and palette for the website and generated documentation. */
:root {
  color-scheme: dark;
  --bg: #11151d; --bg2: #1a202c; --bg3: #222b39; --bg4: #2a3546;
  --panel: var(--bg2); --panel2: var(--bg3);
  --border: #303949; --border2: #414d60;
  --text: #edf2fa; --text2: #9ba8bc; --text3: #9ba8bc; --muted: var(--text2);
  --blue: #85b4ff; --blue2: #a5c8ff;
  --blue-dim: rgba(133,180,255,.08); --blue-dim2: rgba(133,180,255,.15);
  --green: #66ddb0; --profit: #66ddb0; --profit-dim: rgba(102,221,176,.1); --profit-dim2: rgba(102,221,176,.15);
  --red: #ff8585; --red-dim: rgba(255,133,133,.15); --amber: #edc175;
  --sans: 'PT Sans', sans-serif; --mono: 'PT Sans', sans-serif;
  --technical: 'JetBrains Mono', monospace;
}
/* Theme tokens also cover dynamically rendered metrics, tables and charts. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f9; --bg2: #fff; --bg3: #edf1f7; --bg4: #e3e9f2;
  --border: #dce2ec; --border2: #c1ccdc;
  --text: #182234; --text2: #657187; --text3: #657187;
  --blue: #285dd1; --blue2: #204bab;
  --blue-dim: rgba(40,93,209,.07); --blue-dim2: rgba(40,93,209,.12);
  --green: #087a54; --profit: #087a54;
  --red: #c53045; --red-dim: rgba(197,48,69,.12); --amber: #936017;
}
body { font-family: var(--sans); line-height: 1.5; }
button, input, select, textarea { font-family: var(--sans); }
nav { background: var(--bg); }
body::before { opacity: .12; }
.nav-links a { text-transform: none; letter-spacing: 0; }
.nav-links a:hover { color: var(--blue); background: var(--blue-dim); border-bottom-color: var(--blue); }
.lang-toggle .active, .demo-actions a, .btn-primary { color: var(--bg); }
.metric-help summary { color: var(--blue); }
.signal-card, .exchange-group, .setting-card { background: var(--bg2); }
.metric-box, .exchange-summary { background: var(--bg3); }
.setting-card.off { background: var(--bg3); }
.bar-body.pos { background: var(--green); }
.bar-body.neg { background: var(--red); }
.an-grid { stroke: var(--border); }
.an-zero { stroke: var(--border2); }
.stat-val, .metric-value, td, .an-delta { font-variant-numeric: tabular-nums; }
/* Keep the terminal identity in market data, not in explanatory text. */
.stat-val, .sig-ticker, .metric-value, .setting-value, .badge, .sig-tag, .sig-exchange,
.filter-example, .ex-badge, .stat-num, .price-val, .workspace-metric b,
.coin-name, .coin-price, .change, .metric b, .fund b, .detail-price, .ticker-item b,
.telegram-ticker, .telegram-number, .telegram-chip, .demo-chart-metrics span[id] { font-family: var(--technical); }
.theme-toggle { color: var(--text); border-color: var(--border2); white-space: nowrap; }
.theme-toggle:hover { color: var(--blue); border-color: var(--blue); }
.login-theme { position: absolute; right: 20px; top: 20px; }
.coin, .ticker { background: var(--bg2); }
.chart-wrap { background: var(--bg); }
.coin:hover { border-color: var(--blue); }
.mode-switch button.active { color: var(--bg); }
:root[data-theme="light"] .plan-banner, :root[data-theme="light"] .table-card { box-shadow: 0 8px 24px rgba(24,34,52,.05); }

/* Home page uses the same blue accent; green is reserved for trading results. */
.site-home { --green: var(--blue); --green2: var(--blue2); --green-dim: var(--blue-dim); --green-dim2: var(--blue-dim2); }
.site-home .hero { max-width: 1240px; padding: 80px 32px 64px; grid-template-columns: 1fr 1.1fr; gap: 56px; }
.site-home .hero-tag { border-color: var(--border2); font-size: 13px; }
.hero-heading { font-size: 52px; font-weight: 700; line-height: 1.08; letter-spacing: -1px; margin-bottom: 24px; }
.hero-heading span { color: var(--blue); }
.site-home .hero-sub-typed { opacity: 1; font-size: 19px; line-height: 1.6; }
.site-home .hero-btns { flex-direction: row; max-width: none; gap: 12px; }
.site-home .hero-btns a { min-width: 0; font-size: 16px; padding: 13px 22px; }
.site-home .hero-btn-circles { opacity: .55; }
.site-home .hbc-1 { --arc: rgba(133,180,255,.4); animation-duration: 12s; }
.site-home .hbc-2 { --arc: rgba(102,221,176,.24); animation-duration: 20s; }
.site-home .hbc-3 { --arc: rgba(133,180,255,.14); animation-duration: 30s; }
.site-home .hbc::before { background: var(--blue); box-shadow: none; }
.site-home .hbc-2::before { background: var(--profit); box-shadow: none; }
.hero-workspace { position: relative; background: var(--bg2); border: 1px solid var(--border2); border-radius: 20px; padding: 26px; box-shadow: 0 24px 70px rgba(0,0,0,.15); }
.workspace-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--border); font-size: 15px; }
.workspace-top span { color: var(--text2); font-size: 12px; }
.hero-workspace h2 { font-size: 25px; margin: 22px 0 4px; }
.workspace-sub { color: var(--text2); font-size: 14px; }
.workspace-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; }
.workspace-metric { border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.workspace-metric small { color: var(--text2); font-size: 13px; display: block; }
.workspace-metric b { display: block; font-size: 28px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.workspace-metric .positive { color: var(--profit); }
.workspace-bars { display: flex; align-items: flex-end; gap: 10px; height: 110px; padding: 12px 0 0; border-bottom: 1px solid var(--border); }
.workspace-bars span { flex: 1; background: var(--profit); opacity: .7; border-radius: 4px 4px 0 0; }
.workspace-note { color: var(--text2); font-size: 12px; margin-top: 14px; }
.telegram-preview { position: relative; padding: 24px; border: 1px solid var(--border2); border-radius: 20px; background: var(--bg2); box-shadow: 0 24px 70px rgba(0,0,0,.15); }
.telegram-header { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.telegram-avatar { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: var(--bg); font-weight: 700; }
.telegram-header small { display: block; color: var(--text2); font-size: 13px; }
.telegram-message { background: var(--bg3); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 18px; margin-top: 20px; }
.telegram-message h2 { font-size: 19px; margin: 0 0 14px; }
.telegram-ticker { font-size: 18px; font-weight: 700; }
.telegram-metrics { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.telegram-metrics small { display: block; font-size: 12px; color: var(--text2); margin-bottom: 4px; }
.telegram-number { font-size: 14px; }
.telegram-chip { display: inline-block; color: var(--blue); background: var(--blue-dim); border: 1px solid var(--border2); border-radius: 6px; padding: 3px 7px; font-size: 11px; }
.telegram-flow { color: var(--text2); font-size: 13px; text-align: center; margin-top: 18px; }
.telegram-position { border-left: 3px solid var(--blue); }
.dashboard-preview-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.dashboard-preview-layout .section-sub { margin-bottom: 24px; }
.dashboard-preview-layout .hero-workspace h2 { margin-top: 22px; }
.site-home .section-title { font-size: 36px; font-weight: 700; }
.site-home .section-sub { font-size: 17px; max-width: 650px; margin-bottom: 30px; }
.site-home .feat-desc, .site-home .filter-desc { font-size: 15px; }
.site-home .features-section, .site-home .filters-section, .site-home .screenshots-section, .site-home .reviews-section, .site-home .pricing-section, .site-home .mba-section, .site-home .demo-section, .site-home .exchanges, .site-home .stats { max-width: 1240px; }
.product-demo { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 36px; max-width: 850px; margin: 0 auto; align-items: center; }
.product-demo .hero-phone { grid-column: auto; }
.demo-chart { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.demo-chart-head, .demo-chart-metrics { display: flex; justify-content: space-between; padding: 14px 18px; background: var(--bg3); }
.demo-chart-metrics { gap: 16px; }
.demo-chart-metrics small { display: block; color: var(--text2); }
.connection-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.connection-step { padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg2); }
.connection-step b { color: var(--blue); font-size: 14px; }
.connection-step h3 { font-size: 21px; margin: 12px 0; }
.connection-step p { color: var(--text2); font-size: 16px; }
.faq-item { border-bottom: 1px solid var(--border); padding: 20px 0; }
.faq-item summary { cursor: pointer; font-size: 20px; font-weight: 700; }
.faq-item p { color: var(--text2); font-size: 17px; max-width: 800px; margin-top: 12px; }
@media(max-width:1100px) { .site-home .hero { gap: 28px; } .hero-heading { font-size: 44px; } .site-home .hero-btns { flex-direction: column; } }
@media(max-width:800px) { .site-home .hero { grid-template-columns: 1fr; padding: 48px 20px; } .hero-heading { font-size: 40px; } .hero-workspace, .telegram-preview { padding: 20px; } .connection-steps, .dashboard-preview-layout { grid-template-columns: 1fr; } .product-demo { grid-template-columns: 1fr; } .product-demo .hero-phone { justify-self: center; } .site-home .hero-btns { align-items: stretch; } .site-home .hero-btns a { width: auto; max-width: none; } .stat-val { font-size: 18px; } .an-kpi-grid .stat-val { font-size: 18px; } }
@media(prefers-reduced-motion:reduce) { .hbc, .phone-float { animation: none !important; } .feat-card, .filter-card { transform: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* Hero chat: synthetic signal -> pressed button -> position opened, in the real bot message format. */
.hero-chat { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 18px; }
.hero-chat-step { color: var(--text2); font-size: 13px; margin: 6px 0 0; }
.hero-chat-step:first-child { margin-top: 0; }
.hero-bubble { max-width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 12px 14px; font-family: var(--technical); font-size: 13px; line-height: 1.65; color: var(--text); animation: heroPop .4s ease .2s both; }
.hero-bubble-ok { border-left: 3px solid var(--profit); animation-delay: 1.6s; }
.hero-kb { display: flex; flex-wrap: wrap; gap: 6px; animation: heroPop .4s ease .5s both; }
.hero-kb-btn { font-family: var(--technical); font-size: 12px; color: var(--blue); background: var(--blue-dim); border: 1px solid var(--border2); border-radius: 8px; padding: 6px 12px; }
.hero-kb-btn.g { color: var(--profit); }
.hero-kb-btn.r { color: var(--red); }
.hero-kb-btn.pressed { animation: heroPress .5s ease 1.1s both; }
@keyframes heroPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes heroPress { 0% { transform: none; } 40% { transform: scale(.94); } 100% { transform: none; background: var(--red-dim); border-color: var(--red); box-shadow: 0 0 0 3px var(--red-dim); } }
@media (prefers-reduced-motion: reduce) { .hero-bubble, .hero-kb, .hero-kb-btn.pressed { animation-duration: 0s; animation-delay: 0s; } }
@media (max-width: 480px) { .hero-bubble { font-size: 12px; padding: 10px 12px; } }