/* app.css — MarketPulse Dashboard
   Da_Prof-inspired theme: dark, clean, "trustworthy lab" feel
   Palette: bg #131722 · green #26a69a (buy/bottom) · red #ef5350 (sell/top)
            blue #2962ff (accent/warming) · orange #ff9800 (BTC reference) */

:root {
  --bg: #131722;
  --panel: #1c2333;
  --panel-2: #222b3d;
  --border: #2a3346;
  --text: #d1d4dc;
  --muted: #9aa0ad;   /* AA contrast (~4.6:1 on bg) — was #787b86 (3.4:1, failed) */
  --green: #26a69a;
  --green-soft: rgba(38, 166, 154, 0.14);
  --red: #ef5350;
  --red-soft: rgba(239, 83, 80, 0.14);
  --pink: #e91e63;
  --blue: #2962ff;
  --blue-soft: rgba(41, 98, 255, 0.14);
  --orange: #ff9800;
  --gray-soft: rgba(120, 123, 134, 0.16);
  --radius: 12px;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Noto Sans Thai", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* keyboard focus — visible everywhere (a11y) */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 5px; }
.ico-info { cursor: pointer; }

/* ===== Auth (login/register) ===== */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(41, 98, 255, 0.10), transparent 60%),
    var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 28px;
}
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.brand h1 { font-size: 18px; margin: 0; font-weight: 600; letter-spacing: 0.2px; }
.auth-sub { color: var(--muted); font-size: 12.5px; margin: 0 0 22px; }

.tabs { display: flex; gap: 4px; background: var(--panel-2); padding: 4px; border-radius: 10px; margin-bottom: 20px; }
.tab { flex: 1; text-align: center; padding: 8px 0; border-radius: 7px; cursor: pointer; color: var(--muted); font-weight: 500; border: none; background: transparent; font-size: 13px; }
.tab.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 6px rgba(0,0,0,0.3); }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 11px 12px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px; font-size: 14px; outline: none;
  transition: border-color 0.15s;
}
.field input:focus { border-color: var(--blue); }

.btn {
  width: 100%; padding: 12px; border: none; border-radius: 9px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: #fff; background: var(--blue);
  transition: filter 0.15s, opacity 0.15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }

.msg { margin-top: 14px; padding: 10px 12px; border-radius: 9px; font-size: 13px; display: none; }
.msg.show { display: block; }
.msg.error { background: var(--red-soft); color: #ff9b99; border: 1px solid rgba(239,83,80,0.3); }
.msg.ok { background: var(--green-soft); color: #7fe0d6; border: 1px solid rgba(38,166,154,0.3); }
.msg.info { background: var(--blue-soft); color: #9db8ff; border: 1px solid rgba(41,98,255,0.3); }

/* ===== App layout ===== */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--panel);
  position: sticky; top: 0; z-index: 10;
}
.topbar .brand { margin: 0; }
.topbar .spacer { flex: 1; }
.asset-tabs { display: flex; gap: 6px; }
.asset-tab { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); cursor: pointer; font-weight: 600; font-size: 13px; }
.asset-tab.active { color: var(--text); border-color: var(--orange); background: rgba(255,152,0,0.10); }
.user-chip { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.user-chip .plan { padding: 2px 8px; border-radius: 6px; background: var(--gray-soft); color: var(--text); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }

.container { max-width: 1180px; margin: 0 auto; padding: 20px; }

.stale {
  display: none; margin-bottom: 16px; padding: 10px 14px; border-radius: 9px;
  background: rgba(255,152,0,0.12); border: 1px solid rgba(255,152,0,0.35); color: #ffce88; font-size: 13px;
}
.stale.show { display: block; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 12px; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.card .big { font-size: 26px; font-weight: 700; letter-spacing: -0.3px; }
.card .sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.span-2 { grid-column: span 2; }
.span-4 { grid-column: span 4; }

.up { color: var(--green); }
.down { color: var(--red); }

/* zone badge */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.zone-bottom { background: var(--green-soft); color: var(--green); }
.zone-accumulation { background: var(--green-soft); color: #6fd3c8; }
.zone-neutral { background: var(--gray-soft); color: var(--muted); }
.zone-distribution { background: rgba(255,152,0,0.14); color: var(--orange); }
.zone-top { background: var(--red-soft); color: var(--red); }

/* gauge */
.gauge { height: 10px; border-radius: 6px; margin: 14px 0 8px; position: relative;
  background: linear-gradient(90deg, var(--green) 0%, #6fd3c8 22%, var(--muted) 50%, var(--orange) 75%, var(--red) 100%); }
.gauge .needle { position: absolute; top: -4px; width: 3px; height: 18px; background: #fff; border-radius: 2px; box-shadow: 0 0 6px rgba(0,0,0,0.6); transform: translateX(-50%); }
.gauge-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); }
.empty { color: var(--muted); font-size: 13px; font-style: italic; padding: 8px 0; }

/* chart */
#chart { width: 100%; height: 540px; }
#ocChart { width: 100%; height: 420px; }
.chart-card { margin-top: 16px; }
.chart-wrap { position: relative; }

/* ===== nav tabs ===== */
.nav-tabs { display: flex; gap: 4px; background: var(--panel-2); padding: 4px; border-radius: 9px; margin-left: 6px; }
.nav-tab { padding: 7px 16px; border-radius: 7px; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 600; }
.nav-tab.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 6px rgba(0,0,0,0.3); }

/* ===== chart toolbar (TradingView-like) ===== */
.chart-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tool-group { display: flex; gap: 3px; background: var(--panel-2); padding: 3px; border-radius: 8px; }
.tool { padding: 5px 11px; border-radius: 6px; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 600; }
.tool.active { background: var(--blue); color: #fff; }
.tool:hover:not(.active) { color: var(--text); }

/* ===== crosshair tooltip ===== */
.chart-tip { position: absolute; display: none; z-index: 20; pointer-events: none; background: rgba(18,23,34,0.96); border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; font-size: 12px; box-shadow: var(--shadow); min-width: 132px; }
.chart-tip .tip-date { color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.chart-tip .tip-row { color: var(--text); margin: 1px 0; }
.chart-tip .tip-row span { color: var(--muted); font-size: 10px; }
.chart-tip .tip-score { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--border); font-weight: 700; }

/* ===== modal (alerts) ===== */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; z-index: 80; padding: 20px; }
.modal-bg.show { display: flex; animation: fadeIn 0.15s ease both; }
.modal { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; }
.al-toggle { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text); cursor: pointer; }
.al-toggle input { width: 16px; height: 16px; accent-color: var(--green); }
.modal .field label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.modal input[type=range] { accent-color: var(--green); }
.modal .field input { width: 100%; padding: 10px 12px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 9px; font-size: 14px; outline: none; }
.modal .field input:focus { border-color: var(--blue); }
.set-sec h3 { color: var(--text) !important; text-transform: none !important; letter-spacing: 0 !important; }
.auth-alt { text-align: center; margin-top: 14px; font-size: 13px; }
.auth-alt a { color: var(--muted); }
.auth-alt a:hover { color: var(--blue); }

/* strategy comparison — win rate vs holding period */
.wr-svg { width: 100%; height: auto; display: block; }
.wr-grid { stroke: var(--border); stroke-width: 1; }
.wr-ax { fill: var(--muted); font-size: 11px; }
.wr-axt { fill: var(--muted); font-size: 11px; font-weight: 600; }
.wr-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.wr-mark { stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0.6; }
.eq-contrib { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 5 4; opacity: 0.8; }
.wr-swatch.eq-key { height: 0; border-top: 2px dashed var(--muted); background: transparent !important; width: 18px; }
.wr-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; font-size: 12.5px; }
.wr-leg { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.wr-swatch { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
.wr-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 7px; vertical-align: middle; }
.wr-input { margin: 14px 0 4px; }
.wr-input label { font-size: 13px; color: var(--text); display: block; margin-bottom: 6px; }
.wr-input input[type=range] { width: 100%; max-width: 480px; accent-color: var(--green); }
.tr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 12.5px; }
.tr-btn { padding: 5px 12px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 600; }
.tr-btn:hover { color: var(--text); }
.tr-btn.active { background: rgba(41,98,255,0.14); border-color: var(--blue); color: #9db8ff; }
.wr-verdict { margin-top: 12px; padding: 12px 14px; background: var(--panel-2); border-radius: 9px; font-size: 13px; line-height: 1.6; }

/* track-record sub-tabs + collapsible table columns */
.sub-tabs { display: flex; gap: 4px; background: var(--panel-2); padding: 4px; border-radius: 9px; margin-bottom: 16px; flex-wrap: wrap; }
.sub-tab { padding: 8px 16px; border-radius: 7px; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 600; }
.sub-tab.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 6px rgba(0,0,0,0.3); }
.sub-tab:hover:not(.active) { color: var(--text); }
.col-extra { display: none; }
table.show-extra .col-extra { display: table-cell; }

/* ===== Strategy Lab ===== */
.lab-mm { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; font-size: 12px; color: var(--muted); }
.lab-mm label { display: inline-flex; align-items: center; gap: 6px; }
.lab-mm .input-sm { width: 96px; }
.lab-range { margin-bottom: 18px; }
.lab-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.lab-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.lab-card-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.lab-name { flex: 1; min-width: 0; background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text); font-weight: 700; font-size: 14px; padding: 3px 2px; outline: none; }
.lab-name:focus { border-color: var(--blue); }
.lab-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.lab-cond { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.lab-lbl { font-size: 10.5px; color: var(--muted); width: 64px; flex: none; text-transform: uppercase; letter-spacing: 0.3px; }
.lab-u { font-size: 11px; color: var(--muted); white-space: nowrap; }
.lab-dim { opacity: 0.5; }
.lab-card .select { padding: 5px 8px; font-size: 12px; }
.lab-card .input-sm { width: 62px; }
.lab-card .ico-info { color: var(--muted); margin-left: 1px; }
.lab-h { font-size: 13px; margin: 18px 0 8px; color: var(--text); }
.lab-quickstart { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.lab-quickstart .select { min-width: 300px; flex: 1; max-width: 460px; }
.lab-settings { margin-bottom: 16px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; }
.lab-settings > summary { cursor: pointer; padding: 11px 0; font-size: 13px; font-weight: 600; color: var(--text); list-style: none; }
.lab-settings > summary::-webkit-details-marker { display: none; }
.lab-settings > summary::before { content: '▸  '; color: var(--muted); }
.lab-settings[open] > summary::before { content: '▾  '; }
.lab-settings[open] { padding-bottom: 14px; }
.lab-sec { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); font-weight: 700; margin: 6px 0 8px; }
.lab-desc { font-size: 12px; color: var(--muted); margin: -2px 0 8px; }
.lab-add { background: transparent; border: 1px dashed var(--border); color: var(--muted); border-radius: 7px; padding: 6px 11px; font-size: 12px; cursor: pointer; }
.lab-add:hover { color: var(--text); border-color: var(--blue); }
.lab-card .icon-btn.lab-rmcond, .lab-card .icon-btn.lab-rmtp { padding: 3px 7px; font-size: 11px; }

/* ===== Best-strategy leaderboard ===== */
.best-lead { font-size: 13.5px; line-height: 1.65; color: var(--text); background: var(--panel-2); border-radius: 9px; padding: 13px 15px; }
.best-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
.best-tag { font-size: 10px; padding: 1px 6px; border-radius: 5px; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.tag-roi { background: rgba(0, 230, 118, 0.16); color: var(--green); }
.tag-win { background: rgba(41, 98, 255, 0.2); color: #7aa2ff; }
.best-warn { font-size: 11.5px; line-height: 1.55; color: var(--muted); background: rgba(255, 152, 0, 0.07); border: 1px solid rgba(255, 152, 0, 0.22); border-radius: 8px; padding: 10px 13px; margin-top: 13px; }

/* dual-thumb range slider (CMC-style) */
.rng { position: relative; height: 30px; }
.rng-track { position: absolute; top: 13px; left: 0; right: 0; height: 4px; background: var(--panel-2); border-radius: 2px; }
.rng-fill { position: absolute; top: 13px; height: 4px; background: var(--blue); border-radius: 2px; }
.rng input[type=range] { position: absolute; top: 0; left: 0; width: 100%; height: 30px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.rng input[type=range]::-webkit-slider-runnable-track { height: 30px; background: transparent; }
.rng input[type=range]::-moz-range-track { height: 30px; background: transparent; }
.rng input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 16px; height: 16px; margin-top: 7px; border-radius: 50%; background: var(--blue); border: 2px solid var(--panel); box-shadow: 0 1px 4px rgba(0,0,0,0.5); cursor: pointer; }
.rng input[type=range]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); border: 2px solid var(--panel); cursor: pointer; }

/* dot color legend (Da_Prof-style gradient) */
.dot-legend { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--muted); }
.dot-legend .dl-grp { display: inline-flex; align-items: center; gap: 5px; }
.dot-legend .dl-lbl { color: var(--text); font-weight: 600; margin-right: 4px; }
.dot-legend .dl-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dot-legend .dl-sub { margin-left: 6px; font-size: 11px; opacity: 0.8; }

/* compact summary cards on price view */
.grid-compact .card { padding: 13px 15px; }
.grid-compact .card .big { font-size: 22px; }

/* ===== info icon + popover ===== */
.ico-info { color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 400; user-select: none; }
.ico-info:hover { color: var(--blue); }
.info-pop { position: fixed; display: none; z-index: 60; max-width: 300px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; box-shadow: var(--shadow); font-size: 12.5px; }
.info-pop.show { display: block; animation: fadeIn 0.15s ease both; }
.info-pop .ip-name { font-weight: 700; margin-bottom: 6px; }
.info-pop .ip-what { color: var(--text); margin-bottom: 6px; }
.info-pop .ip-help { color: var(--muted); }

/* ===== Learn view ===== */
.learn-head { margin: 6px 0 18px; }
.learn-head h2 { margin: 0 0 4px; font-size: 20px; }
.learn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.learn-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.learn-card .learn-ic { font-size: 26px; margin-bottom: 6px; }
.learn-card h3 { margin: 0 0 12px; font-size: 16px; color: var(--text); }
.learn-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; margin-bottom: 9px; font-size: 13px; line-height: 1.55; }
.learn-row .lk { color: var(--blue); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; padding-top: 1px; }
@media (max-width: 800px) { .learn-grid { grid-template-columns: 1fr; } .nav-tab { padding: 7px 11px; } }

/* signals table */
.table-card { margin-top: 16px; }
table.signals { width: 100%; border-collapse: collapse; font-size: 13px; }
table.signals th { text-align: left; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; }
table.signals td { padding: 9px 10px; border-bottom: 1px solid rgba(42,51,70,0.5); }
table.signals tr:last-child td { border-bottom: none; }
.sig { display: inline-block; padding: 2px 9px; border-radius: 6px; font-weight: 600; font-size: 12px; }
.sig-buy, .sig-strong_buy, .sig-cycle_bottom { background: var(--green-soft); color: var(--green); }
.sig-sell, .sig-strong_sell, .sig-cycle_top { background: var(--red-soft); color: var(--red); }
.strength-bar { display: inline-block; height: 6px; width: 60px; background: var(--panel-2); border-radius: 4px; overflow: hidden; vertical-align: middle; }
.strength-bar > span { display: block; height: 100%; background: var(--blue); }

.lang-switch { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 5px 10px; border-radius: 8px; cursor: pointer; font-size: 12px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.mt { margin-top: 16px; }

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .span-2, .span-4 { grid-column: span 2; }
}
@media (max-width: 520px) {
  .grid { grid-template-columns: 1fr; }
  .span-2, .span-4 { grid-column: span 1; }
  .container { padding: 14px; }
  .topbar { padding: 10px 14px; gap: 10px; }
  .card .big { font-size: 22px; }
}

/* ===== UX polish ===== */
/* fade/slide-in for content */
.fade-in { animation: fadeIn 0.35s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* skeleton loading shimmer */
.skeleton { position: relative; overflow: hidden; background: var(--panel-2); border-radius: 6px; color: transparent !important; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transform: translateX(-100%); animation: shimmer 1.3s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.sk-line { height: 12px; border-radius: 6px; margin: 8px 0; }
.sk-big { height: 28px; width: 60%; border-radius: 8px; }

/* button spinner */
.btn .spin { display: none; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: rot 0.7s linear infinite; vertical-align: -2px; margin-right: 8px; }
.btn.loading .spin { display: inline-block; }
.btn.loading .label { opacity: 0.85; }
@keyframes rot { 100% { transform: rotate(360deg); } }

/* zone-tinted accent strip on cards (Da_Prof signature: state by color) */
.card.tinted { position: relative; }
.card.tinted::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: var(--radius) 0 0 var(--radius); background: var(--muted); }
.card.tint-bottom::before, .card.tint-accumulation::before { background: var(--green); }
.card.tint-neutral::before { background: var(--muted); }
.card.tint-distribution::before { background: var(--orange); }
.card.tint-top::before { background: var(--red); }

/* page-level subtle ambient tint by overall cycle zone */
body.amb-bottom { background: radial-gradient(900px 420px at 50% -8%, rgba(38,166,154,0.10), transparent 60%), var(--bg); }
body.amb-top { background: radial-gradient(900px 420px at 50% -8%, rgba(239,83,80,0.10), transparent 60%), var(--bg); }
body.amb-distribution { background: radial-gradient(900px 420px at 50% -8%, rgba(255,152,0,0.09), transparent 60%), var(--bg); }

/* Fear & Greed dial */
.fng { display: flex; align-items: center; gap: 14px; }
.fng-dial { --pct: 50; width: 86px; height: 86px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--red) 0%, var(--orange) 25%, var(--muted) 50%, #6fd3c8 75%, var(--green) 100%);
  -webkit-mask: radial-gradient(transparent 54%, #000 55%); mask: radial-gradient(transparent 54%, #000 55%);
  position: relative; }
.fng-val { font-size: 24px; font-weight: 700; }
.fng-label { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* tooltip-ish hover lift on cards */
.card { transition: transform 0.15s ease, border-color 0.15s ease; }
.card:hover { border-color: #34405a; }

/* small helpers */
.row { display: flex; align-items: center; gap: 8px; }
.between { justify-content: space-between; }
.pill { font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 20px; padding: 2px 9px; }
.updated { font-size: 11px; color: var(--muted); margin-top: 10px; }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 4px; vertical-align: middle; box-shadow: 0 0 0 0 rgba(38,166,154,0.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(38,166,154,0.5); } 70% { box-shadow: 0 0 0 6px rgba(38,166,154,0); } 100% { box-shadow: 0 0 0 0 rgba(38,166,154,0); } }
.icon-btn { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px; font-weight: 500; }
.icon-btn:hover { border-color: #34405a; }

/* select control */
.select {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 28px 6px 10px; font-size: 12.5px; cursor: pointer; outline: none;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23787b86' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.select:focus { border-color: var(--blue); }
.controls { display: flex; gap: 8px; align-items: center; }
#ocChart { width: 100%; height: 300px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--muted); }
.legend .k { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* ===== Admin ===== */
.section-title { font-size: 13px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 14px; }
.input-sm { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; font-size: 12.5px; outline: none; max-width: 130px; }
.input-sm:focus { border-color: var(--blue); }
.btn-sm { padding: 6px 11px; border-radius: 7px; border: none; cursor: pointer; font-size: 12px; font-weight: 600; color: #fff; background: var(--blue); }
.btn-sm.ghost { background: transparent; color: var(--green); border: 1px solid rgba(38,166,154,0.4); }
.btn-sm:hover { filter: brightness(1.08); }
table.admin { width: 100%; border-collapse: collapse; font-size: 13px; }
table.admin th { text-align: left; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
table.admin td { padding: 9px 10px; border-bottom: 1px solid rgba(42,51,70,0.5); vertical-align: middle; }
table.admin tr:last-child td { border-bottom: none; }
.st-active { color: var(--green); } .st-pending { color: var(--orange); } .st-expired, .st-suspended { color: var(--red); }
.form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.form-row .field { margin: 0; }
.form-row .field label { font-size: 11px; }

.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 50; min-width: 200px; max-width: 340px;
  padding: 12px 16px; border-radius: 10px; box-shadow: var(--shadow); font-size: 13px;
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: none; }
.toast.ok { background: var(--green-soft); color: #7fe0d6; border: 1px solid rgba(38,166,154,0.4); }
.toast.error { background: var(--red-soft); color: #ff9b99; border: 1px solid rgba(239,83,80,0.4); }

/* ===== "Buy now?" headline banner ===== */
.buynow { display: none; margin-bottom: 16px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--panel); box-shadow: var(--shadow); padding: 18px 22px; position: relative; overflow: hidden; }
.buynow.show { display: block; }
.buynow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--muted); }
.buynow.z-bottom::before, .buynow.z-accumulation::before { background: var(--green); }
.buynow.z-neutral::before { background: var(--muted); }
.buynow.z-distribution::before { background: var(--orange); }
.buynow.z-top::before { background: var(--red); }
.buynow .bn-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.buynow .bn-score { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 2px 20px 2px 4px; border-right: 1px solid var(--border); }
.bn-ring { --c: var(--muted); width: 88px; height: 88px; border-radius: 50%; position: relative; flex: none;
  background: conic-gradient(var(--c) calc(var(--pct, 0) * 1%), var(--panel-2) 0); transition: background 0.4s ease; }
.bn-ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--panel); }
.bn-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 800; color: var(--c); }
.buynow .bn-score.bs-good .bn-ring { --c: var(--green); }
.buynow .bn-score.bs-mid .bn-ring { --c: var(--orange); }
.buynow .bn-score.bs-bad .bn-ring { --c: var(--red); }
.buynow .bn-score-label { font-size: 10px; color: var(--muted); letter-spacing: 2px; font-weight: 700; }
.buynow .bn-main { min-width: 0; }
.buynow .bn-action { font-size: 25px; font-weight: 800; letter-spacing: 0.5px; line-height: 1.1; }
.buynow.z-bottom .bn-action, .buynow.z-accumulation .bn-action { color: var(--green); }
.buynow.z-neutral .bn-action { color: var(--text); }
.buynow.z-distribution .bn-action { color: var(--orange); }
.buynow.z-top .bn-action { color: var(--red); }
.buynow .bn-verdict { color: var(--text); font-size: 13.5px; margin-top: 3px; }
.buynow .bn-meta { color: var(--muted); font-size: 12px; margin-top: 7px; }
.buynow .bn-meta .dr { color: var(--text); font-weight: 600; }
.buynow .bn-metrics { margin-left: auto; display: flex; gap: 18px; }
.buynow .bn-m { text-align: right; }
.buynow .bn-m .v { font-size: 18px; font-weight: 700; }
.buynow .bn-m .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
@media (max-width: 700px) { .buynow .bn-metrics { margin-left: 0; width: 100%; } }

/* ===== First-run welcome ===== */
.welcome-tip { display: none; }
.welcome-tip.show { display: block; margin-bottom: 16px; padding: 18px 20px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(38,166,154,0.10), var(--panel)); border: 1px solid var(--green); box-shadow: var(--shadow); animation: fadeIn 0.2s ease both; }
.wt-head { display: flex; align-items: center; justify-content: space-between; }
.wt-head b { font-size: 16px; }
.wt-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0 16px; }
.wt-steps > div { font-size: 13px; color: var(--text); line-height: 1.5; }
.wt-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #06281f; font-weight: 800; font-size: 12px; margin-right: 6px; }
.btn.wt-got { width: auto; padding: 9px 22px; }
@media (max-width: 700px) { .wt-steps { grid-template-columns: 1fr; gap: 10px; } }

/* ===== Trial banner ===== */
.trial-banner { display: none; }
.trial-banner.show { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; padding: 10px 16px; border-radius: 10px; font-size: 13px; background: rgba(41,98,255,0.10); border: 1px solid rgba(41,98,255,0.35); color: #9db8ff; }
.trial-banner span { flex: 1; min-width: 200px; }
.trial-banner b { color: #fff; }
.btn-upgrade { background: var(--green); color: #06281f; font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 8px; white-space: nowrap; }
.btn-upgrade:hover { filter: brightness(1.08); text-decoration: none; }

/* ===== Action Card (position sizing from Buy Score) ===== */
.action-card { display: none; }
/* secondary to #buyNow: lighter, no colored accent bar (zone already shown by ambient + buynow) */
.action-card.show { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 18px; margin-bottom: 16px; }
.ac-left { min-width: 0; }
.ac-h { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.ac-amt { font-size: 21px; font-weight: 800; margin: 3px 0 2px; letter-spacing: -0.3px; }
.ac-sub { font-size: 13px; color: var(--text); }
.ac-right label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.ac-input { display: inline-flex; align-items: center; gap: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; }
.ac-input span { color: var(--muted); }
.ac-input input { width: 108px; background: transparent; border: none; color: var(--text); font-size: 15px; outline: none; text-align: right; }
.ac-note { font-size: 11px; margin-top: 6px; max-width: 250px; }

/* ===================== Responsive ===================== */
@media (max-width: 880px) {
  .container { padding: 14px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  #chart { height: 420px; }
  #ocChart { height: 340px; }
  .topbar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .nav-tabs { order: 5; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .learn-grid { grid-template-columns: 1fr; }
  .action-card.show { flex-direction: column; align-items: stretch; }
  .table-card, .chart-card { overflow-x: auto; }
}
@media (max-width: 560px) {
  .container { padding: 10px; }
  .grid { grid-template-columns: 1fr; }
  #chart { height: 320px; }
  #ocChart { height: 280px; }
  .card { padding: 13px 14px; }
  .buynow .bn-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .buynow .bn-main { width: 100%; }
  .topbar { gap: 8px; }
  .topbar .brand h1 { font-size: 16px; }
  .user-chip, #adminLink { display: none; }
  .icon-btn, .lang-switch { padding: 6px 9px; }
  .chart-toolbar { gap: 8px; }
  .modal { padding: 18px 16px; }
  .ac-amt { font-size: 22px; }
  .controls { flex-wrap: wrap; }
}

/* bigger touch targets on touch devices (a11y) */
@media (pointer: coarse) {
  .tool, .tr-btn { min-height: 36px; }
  .nav-tab, .icon-btn, .lang-switch, .btn { min-height: 42px; }
  .icon-btn, .lang-switch { min-width: 42px; }
  .ico-info { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 30px; }
}

/* ===================== Landing page ===================== */
body.lp { background: radial-gradient(1100px 560px at 50% -8%, rgba(41,98,255,0.10), transparent 60%), var(--bg); }
.lp-nav { display: flex; align-items: center; gap: 14px; max-width: 1080px; margin: 0 auto; padding: 18px 24px; }
.lp-nav .brand h1 { font-size: 18px; }
.lp-link { color: var(--muted); font-size: 14px; }
.lp-link:hover { color: var(--text); text-decoration: none; }
.btn.lp-cta-sm { width: auto; padding: 9px 16px; font-size: 13px; }
.btn.lp-cta { width: auto; padding: 13px 26px; font-size: 15px; }

.lp-hero { max-width: 1080px; margin: 30px auto 0; padding: 0 24px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.lp-hero-text, .lp-hero-card, .lp-feat, .lp-plan, .lp-strip div { min-width: 0; }
.lp-hero-text h2 { font-size: 46px; line-height: 1.08; margin: 0 0 16px; letter-spacing: -1px; }
.lp-accent { color: var(--green); }
.lp-sub { font-size: 16px; color: var(--muted); line-height: 1.6; max-width: 520px; margin: 0 0 24px; }
.lp-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lp-fine { font-size: 12px; margin-top: 14px; }
.lp-hero-card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 26px; box-shadow: var(--shadow); }
.lp-score-wrap { display: flex; align-items: center; gap: 20px; }
.lp-ring { width: 100px; height: 100px; }
.lp-ring .bn-ring-num { font-size: 34px; }
.lp-ring.lp-good { --c: var(--green); } .lp-ring.lp-mid { --c: var(--orange); } .lp-ring.lp-bad { --c: var(--red); }
.lp-ring.lp-loading { --c: var(--border); animation: lp-pulse 1.4s ease-in-out infinite; }
.lp-ring.lp-loading .bn-ring-num { color: var(--muted); }
@keyframes lp-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.lp-score-label { font-size: 11px; color: var(--muted); letter-spacing: 1.5px; font-weight: 700; }
.lp-verdict { font-size: 24px; font-weight: 800; margin: 4px 0; }
.lp-drivers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lp-drivers span { font-size: 12px; color: var(--muted); background: var(--panel-2); padding: 5px 10px; border-radius: 7px; }

.lp-strip { max-width: 1080px; margin: 46px auto; padding: 0 24px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.lp-strip div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 26px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; flex: 1; min-width: 200px; }
.lp-strip b { font-size: 22px; color: var(--green); }
.lp-strip span { font-size: 13px; color: var(--muted); margin-top: 4px; }

.lp-features { max-width: 1080px; margin: 46px auto; padding: 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lp-feat { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 22px; }
.lp-feat-ic { font-size: 28px; }
.lp-feat h3 { font-size: 16px; margin: 10px 0 8px; }
.lp-feat p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0; }

.lp-pricing { max-width: 760px; margin: 60px auto; padding: 0 24px; text-align: center; }
.lp-pricing h2 { font-size: 30px; margin: 0 0 6px; }
.lp-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; text-align: left; }
.lp-plan { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 26px; position: relative; }
.lp-plan-pro { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), var(--shadow); }
.lp-plan-badge { position: absolute; top: -11px; right: 20px; background: var(--green); color: #06281f; font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: 20px; }
.lp-plan-name { font-size: 14px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.lp-plan-price { font-size: 38px; font-weight: 800; margin: 6px 0 16px; }
.lp-plan-price span { font-size: 15px; color: var(--muted); font-weight: 500; }
.lp-plan-list { list-style: none; padding: 0; margin: 0 0 20px; }
.lp-plan-list li { font-size: 14px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.lp-plan-list li.lp-dim { color: var(--muted); }
.lp-plan .btn { display: block; text-align: center; }

.lp-footer { max-width: 720px; margin: 40px auto; padding: 30px 24px; text-align: center; border-top: 1px solid var(--border); }
.lp-footer .brand { justify-content: center; margin-bottom: 12px; }
.lp-footer p { font-size: 12.5px; max-width: 560px; margin: 0 auto 14px; line-height: 1.6; }
.lp-foot-links { font-size: 13px; }

@media (max-width: 820px) {
  .lp-hero { grid-template-columns: 1fr; gap: 26px; margin-top: 18px; }
  .lp-hero-text h2 { font-size: 34px; }
  .lp-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .lp-features { grid-template-columns: 1fr; }
  .lp-plans { grid-template-columns: 1fr; }
  .lp-hero, .lp-strip, .lp-features { padding-left: 16px; padding-right: 16px; }
  .lp-hero-text h2 { font-size: 29px; }
  .lp-score-wrap { flex-direction: column; text-align: center; align-items: center; }
  .lp-nav { padding: 14px 16px; }
  .lp-strip { flex-direction: column; gap: 10px; }
  .lp-strip div { min-width: 0; }
  .lp-cta-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn.lp-cta { width: 100%; text-align: center; }
}