/* ===== PLATFORM LAYOUT ===== */
.platform-main {
  padding-top: 90px;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.platform-main.hidden { display: none; }

.plat-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 32px; padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.plat-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; margin-bottom: 8px;
}
.plat-sub { color: var(--text-secondary); font-size: 0.95rem; }

.live-clock {
  font-size: 0.9rem; color: var(--accent); font-weight: 600;
  padding: 8px 18px; border-radius: var(--radius-pill);
  background: rgba(6, 214, 160, 0.06); border: 1px solid rgba(6, 214, 160, 0.15);
  font-variant-numeric: tabular-nums; direction: ltr;
}

/* ===== INDICES BAR ===== */
.indices-bar {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 16px 0; margin-bottom: 28px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.indices-bar::-webkit-scrollbar { height: 4px; }
.indices-bar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.idx-card {
  flex-shrink: 0; padding: 14px 22px; min-width: 160px;
  border-radius: var(--radius-md); background: var(--bg-card);
  border: 1px solid var(--border); backdrop-filter: blur(12px);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s, box-shadow 0.3s;
  cursor: default;
}
.idx-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.idx-card:active { transform: translateY(0) scale(0.98); transition-duration: 0.1s; }
.idx-card .name { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 4px; white-space: nowrap; }
.idx-card .price { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; direction: ltr; text-align: right; }
.idx-card .change { font-size: 0.82rem; font-weight: 600; margin-top: 2px; direction: ltr; text-align: right; }
.idx-card .change.up { color: var(--accent); }
.idx-card .change.down { color: #ef4444; }
.idx-card .change.flat { color: var(--text-muted); }
.idx-skeleton {
  flex-shrink: 0; width: 160px; height: 72px;
  border-radius: var(--radius-md); background: var(--bg-card);
  border: 1px solid var(--border);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes skeleton-pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 0.2; } }

/* ===== DASHBOARD GRID ===== */
.dash-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.dash-card {
  padding: 24px; border-radius: var(--radius-lg);
  background: linear-gradient(170deg, rgba(16, 26, 50, 0.6), rgba(8, 14, 28, 0.6));
  border: 1px solid var(--border); backdrop-filter: blur(16px);
  box-shadow: var(--shadow-card);
  animation: cardSlideIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.dash-card:nth-child(1) { animation-delay: 0ms; }
.dash-card:nth-child(2) { animation-delay: 60ms; }
.dash-card:nth-child(3) { animation-delay: 120ms; }
.dash-card:nth-child(4) { animation-delay: 180ms; }
.dash-card:nth-child(5) { animation-delay: 240ms; }
@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.dash-card.span2 { grid-column: span 2; }
.dash-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.dash-card-head h3 { font-size: 1rem; font-weight: 700; }

.badge-sm {
  font-size: 0.7rem; padding: 3px 10px; border-radius: var(--radius-pill);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
.badge-sm.green {
  background: rgba(6, 214, 160, 0.1); color: var(--accent); border: 1px solid rgba(6, 214, 160, 0.2);
  position: relative;
}
.badge-sm.green::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); display: inline-block; margin-left: 5px;
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(6,214,160,0.5); } 50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(6,214,160,0); } }
.badge-sm.gold { background: rgba(232, 169, 32, 0.1); color: var(--gold); border: 1px solid rgba(232, 169, 32, 0.2); }
.badge-sm.red { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }
.badge-sm.blue { background: rgba(96, 165, 250, 0.1); color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.2); }

/* ===== MINI TABLE ===== */
.mini-table { display: flex; flex-direction: column; gap: 2px; }
.mt-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 12px; align-items: center; padding: 10px 12px;
  border-radius: 10px; transition: var(--transition-fast);
  font-size: 0.88rem;
}
.mt-row:hover { background: rgba(255, 255, 255, 0.03); }
.mt-row .sym { font-weight: 700; }
.mt-row .name { color: var(--text-secondary); font-size: 0.8rem; }
.mt-row .val { font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; text-align: right; }
.mt-row .chg { font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; text-align: right; min-width: 56px; }
.mt-row .chg.up { color: var(--accent); }
.mt-row .chg.down { color: #ef4444; }

.news-mini-list { display: flex; flex-direction: column; gap: 8px; }
.nm-item {
  padding: 10px 12px; border-radius: 10px; font-size: 0.85rem;
  border-bottom: 1px solid var(--border); transition: var(--transition-fast);
  cursor: default;
}
.nm-item:hover { background: rgba(255, 255, 255, 0.03); }
.nm-item:last-child { border-bottom: none; }
.nm-item .nm-title { font-weight: 600; margin-bottom: 3px; line-height: 1.5; }
.nm-item .nm-meta { font-size: 0.75rem; color: var(--text-muted); display: flex; gap: 8px; }

/* ===== BUTTONS ===== */
.btn-sm { padding: 10px 20px; font-size: 0.88rem; }
.inp {
  width: 100%; padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-primary); font-size: 0.92rem; font-family: inherit;
  transition: var(--transition-fast); outline: none;
}
.inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.1); }
.inp::placeholder { color: var(--text-muted); }
select.inp { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 16px center; padding-left: 36px; }

/* ===== SCANNER ===== */
.scanner-filters {
  display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap;
}
.filter-btn {
  padding: 8px 20px; border-radius: var(--radius-pill);
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 0.88rem; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: var(--transition-fast);
}
.filter-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.filter-btn.active { background: rgba(6, 214, 160, 0.1); border-color: var(--accent); color: var(--accent); }

.scan-grid { display: flex; flex-direction: column; gap: 12px; }
.scan-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 20px; text-align: center; color: var(--text-muted);
}
.scan-placeholder p { margin-top: 16px; font-size: 1rem; }
.scan-placeholder span { font-size: 0.85rem; margin-top: 6px; color: var(--text-muted); opacity: 0.7; }

.scan-card {
  display: grid; grid-template-columns: 60px 1fr auto auto auto auto auto;
  gap: 16px; align-items: center; padding: 18px 22px;
  border-radius: var(--radius-md); background: var(--bg-card);
  border: 1px solid var(--border); backdrop-filter: blur(12px);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s, box-shadow 0.3s;
  cursor: pointer;
}
.scan-card:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(6, 214, 160, 0.1);
}
.scan-card:active { transform: translateY(0) scale(0.99); transition-duration: 0.1s; }
.scan-card .score-badge {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 900; font-size: 1.1rem;
  font-family: 'Outfit', sans-serif;
  border: 2px solid; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.scan-card:hover .score-badge { transform: scale(1.1) rotate(-5deg); }
.scan-card .score-badge.high { border-color: var(--accent); color: var(--accent); background: rgba(6, 214, 160, 0.08); }
.scan-card .score-badge.mid { border-color: var(--gold); color: var(--gold); background: rgba(232, 169, 32, 0.08); }
.scan-card .score-badge.low { border-color: var(--purple); color: var(--purple); background: rgba(129, 140, 248, 0.08); }

.scan-card .sc-info h4 { font-size: 1.05rem; font-weight: 800; margin-bottom: 3px; }
.scan-card .sc-info .sector { font-size: 0.8rem; color: var(--text-muted); }
.scan-card .sc-price { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; direction: ltr; text-align: right; }
.scan-card .sc-chg { font-size: 0.88rem; font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; text-align: right; min-width: 52px; }
.scan-card .sc-chg.up { color: var(--accent); }
.scan-card .sc-chg.down { color: #ef4444; }
.scan-card .sc-vol { font-size: 0.82rem; color: var(--text-secondary); direction: ltr; text-align: right; }
.scan-card .sc-rsi { font-size: 0.82rem; color: var(--text-secondary); }
.scan-card .sc-signals {
  grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--border); margin-top: 4px;
}
.signal-tag {
  font-size: 0.75rem; padding: 4px 12px; border-radius: var(--radius-pill);
  background: rgba(6, 214, 160, 0.06); border: 1px solid rgba(6, 214, 160, 0.12);
  color: var(--accent-light);
}

/* ===== FAVORITES ===== */
.fav-btn {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 1rem; cursor: pointer;
  display: grid; place-items: center;
  transition: transform 0.2s, color 0.2s, background 0.2s;
}
.fav-btn:hover { background: rgba(232,169,32,0.1); color: var(--gold); transform: scale(1.15); }
.fav-btn.fav-active { color: var(--gold); background: rgba(232,169,32,0.15); border-color: rgba(232,169,32,0.3); }
.scan-card { position: relative; }

/* ===== STRATEGIES ===== */
.strat-builder {
  display: grid; grid-template-columns: 340px 1fr; gap: 24px;
}
.strat-config {
  padding: 28px; border-radius: var(--radius-lg);
  background: var(--bg-card); border: 1px solid var(--border);
  backdrop-filter: blur(16px); height: fit-content;
  position: sticky; top: 90px;
}
.strat-form label {
  display: block; font-size: 0.85rem; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 6px; margin-top: 16px;
}
.strat-form label:first-child { margin-top: 0; }
.strat-form .inp { margin-bottom: 4px; }

.strat-results {
  min-height: 400px; padding: 28px;
  border-radius: var(--radius-lg); background: var(--bg-card);
  border: 1px solid var(--border); backdrop-filter: blur(16px);
}
.bt-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; min-height: 360px; text-align: center; color: var(--text-muted);
}
.bt-placeholder p { margin-top: 14px; font-size: 0.95rem; }

.bt-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px;
}
.bt-stat {
  padding: 16px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border);
  text-align: center;
}
.bt-stat .val { font-size: 1.4rem; font-weight: 900; margin-bottom: 4px; }
.bt-stat .lbl { font-size: 0.78rem; color: var(--text-muted); }
.bt-stat .val.profit { color: var(--accent); }
.bt-stat .val.loss { color: #ef4444; }

.bt-chart-container { height: 320px; margin-bottom: 20px; border-radius: var(--radius-sm); overflow: hidden; }
.bt-trades-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.bt-trades-table th {
  text-align: right; padding: 10px 14px; font-weight: 600; color: var(--text-secondary);
  border-bottom: 1px solid var(--border); font-size: 0.8rem;
}
.bt-trades-table td {
  padding: 10px 14px; border-bottom: 1px solid rgba(148, 163, 184, 0.04);
  font-variant-numeric: tabular-nums; direction: ltr;
}
.bt-trades-table tr:hover td { background: rgba(255, 255, 255, 0.02); }
.bt-trades-table .buy { color: var(--accent); font-weight: 600; }
.bt-trades-table .sell { color: #ef4444; font-weight: 600; }
.bt-trades-table .pnl-pos { color: var(--accent); }
.bt-trades-table .pnl-neg { color: #ef4444; }

/* ===== ANALYSIS ===== */
.analysis-top { margin-bottom: 24px; }
.search-box {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 20px; border-radius: var(--radius-lg);
  background: var(--bg-card); border: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.search-box .inp { border: none; background: transparent; padding: 8px; flex: 1; }
.search-box .inp:focus { box-shadow: none; }
.search-box svg { flex-shrink: 0; stroke: var(--text-muted); }

.analysis-grid {
  display: grid; grid-template-columns: 1fr 360px; gap: 20px;
}
.chart-panel {
  padding: 24px; border-radius: var(--radius-lg);
  background: var(--bg-card); border: 1px solid var(--border);
  backdrop-filter: blur(16px);
}
.chart-panel .chart-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.chart-panel .chart-header h3 { font-size: 1.1rem; font-weight: 800; }
.chart-panel .price-big {
  font-size: 2rem; font-weight: 900; font-variant-numeric: tabular-nums; direction: ltr;
}
.chart-panel .change-big { font-size: 0.95rem; font-weight: 600; margin-right: 12px; direction: ltr; display: inline-block; }
.chart-container { height: 400px; border-radius: var(--radius-sm); overflow: hidden; }

.side-panel {
  display: flex; flex-direction: column; gap: 16px;
}
.side-card {
  padding: 20px; border-radius: var(--radius-lg);
  background: var(--bg-card); border: 1px solid var(--border);
  backdrop-filter: blur(16px);
}
.side-card h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }

.indicator-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; font-size: 0.88rem;
}
.indicator-row + .indicator-row { border-top: 1px solid rgba(148, 163, 184, 0.04); }
.indicator-row .ind-name { color: var(--text-secondary); }
.indicator-row .ind-val { font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; }

.indicator-row .signal-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-left: 6px;
}
.signal-dot.bullish { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.signal-dot.bearish { background: #ef4444; box-shadow: 0 0 8px #ef4444; }
.signal-dot.neutral { background: var(--text-muted); }

.fundamental-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; font-size: 0.88rem;
}
.fundamental-row + .fundamental-row { border-top: 1px solid rgba(148, 163, 184, 0.04); }
.fundamental-row .fn-name { color: var(--text-secondary); }
.fundamental-row .fn-val { font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; }

.summary-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px;
  border-radius: var(--radius-pill); font-weight: 700; font-size: 0.9rem;
}
.summary-badge.bullish { background: rgba(6, 214, 160, 0.1); border: 1px solid rgba(6, 214, 160, 0.2); color: var(--accent); }
.summary-badge.bearish { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: #ef4444; }
.summary-badge.neutral { background: rgba(148, 163, 184, 0.1); border: 1px solid rgba(148, 163, 184, 0.2); color: var(--text-secondary); }

/* ===== CRYPTO ===== */
.crypto-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.crypto-card {
  padding: 22px; border-radius: var(--radius-lg);
  background: var(--bg-card); border: 1px solid var(--border);
  backdrop-filter: blur(16px); cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s, box-shadow 0.3s;
}
.crypto-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 32px rgba(6, 214, 160, 0.1); }
.crypto-card:active { transform: translateY(-1px) scale(0.99); transition-duration: 0.1s; }
.crypto-card .cc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.crypto-card .cc-top img { width: 36px; height: 36px; border-radius: 50%; }
.crypto-card .cc-top .cc-sym { font-weight: 800; font-size: 1.05rem; }
.crypto-card .cc-top .cc-name { font-size: 0.82rem; color: var(--text-muted); }
.crypto-card .cc-price { font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; direction: ltr; margin-bottom: 8px; }
.crypto-card .cc-changes { display: flex; gap: 16px; font-size: 0.85rem; font-weight: 600; direction: ltr; }
.crypto-card .cc-changes .up { color: var(--accent); }
.crypto-card .cc-changes .down { color: #ef4444; }

.crypto-detail-panel {
  grid-column: 1 / -1; padding: 28px;
  border-radius: var(--radius-lg); background: var(--bg-card);
  border: 1px solid var(--border); backdrop-filter: blur(16px);
}
.crypto-chart-container { height: 350px; border-radius: var(--radius-sm); overflow: hidden; margin-top: 16px; }

.forex-detail-panel {
  grid-column: 1 / -1; padding: 28px;
  border-radius: var(--radius-lg); background: var(--bg-card);
  border: 1px solid var(--border); backdrop-filter: blur(16px);
}

/* ===== NEWS ===== */
.news-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.news-card {
  padding: 24px; border-radius: var(--radius-lg);
  background: var(--bg-card); border: 1px solid var(--border);
  backdrop-filter: blur(16px); transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s;
}
.news-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.news-card:active { transform: translateY(0); transition-duration: 0.1s; }
.news-card .nc-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.news-card h3 { font-size: 1rem; font-weight: 700; line-height: 1.6; flex: 1; }
.news-card .nc-sentiment { flex-shrink: 0; margin-right: 12px; }
.news-card .nc-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: 12px; }
.news-card .nc-meta { font-size: 0.78rem; color: var(--text-muted); display: flex; gap: 12px; align-items: center; }
.news-card .nc-impact { font-size: 0.72rem; padding: 3px 10px; border-radius: var(--radius-pill); font-weight: 600; }
.news-card .nc-impact.high { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.news-card .nc-impact.medium { background: rgba(232, 169, 32, 0.1); color: var(--gold); }
.news-card .nc-impact.low { background: rgba(96, 165, 250, 0.1); color: #60a5fa; }

.ai-analysis-card {
  grid-column: 1 / -1; padding: 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.06), rgba(6, 214, 160, 0.04));
  border: 1px solid rgba(129, 140, 248, 0.15);
}
.ai-analysis-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.ai-analysis-card p { color: var(--text-secondary); line-height: 2; font-size: 0.95rem; }

/* ===== LOADING ===== */
.loading-row {
  display: flex; align-items: center; gap: 10px; padding: 14px;
  color: var(--text-muted); font-size: 0.9rem;
}
.loading-dots span {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin: 0 3px;
  animation: dotPulse 1.2s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.loading-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dotPulse { 0%,100% { opacity: 0.2; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.3); } }

/* ===== SKELETON LOADERS (Dexu.ai inspired) ===== */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, rgba(148,163,184,0.08) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes skeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text.sm { width: 60%; height: 12px; }
.skeleton-text.lg { width: 80%; height: 18px; }
.skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-card {
  padding: 20px; border-radius: var(--radius-lg);
  background: var(--bg-card); border: 1px solid var(--border);
}
.skeleton-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.skeleton-row + .skeleton-row { border-top: 1px solid var(--border); }

/* ===== BOX COMPONENT (Dexu.ai inspired) ===== */
.box {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  backdrop-filter: blur(16px);
}
.box-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.box-header h3 { font-size: 0.95rem; font-weight: 700; margin: 0; }
.box-body { padding: 16px 20px; }
.box-body.flush { padding: 0; }

/* ===== NARRATIVE GROUPS (Dexu.ai inspired) ===== */
.narrative-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
}
.narrative-card {
  padding: 18px; border-radius: var(--radius-md);
  background: var(--bg-card); border: 1px solid var(--border);
  cursor: pointer; transition: all 0.2s;
}
.narrative-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.narrative-card .nc-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; }
.narrative-card .nc-count { font-size: 0.78rem; color: var(--text-muted); }
.narrative-card .nc-change { font-size: 0.85rem; font-weight: 600; margin-top: 8px; }
.narrative-card .nc-items { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.narrative-card .nc-tag {
  font-size: 0.7rem; padding: 3px 8px; border-radius: 4px;
  background: rgba(6, 214, 160, 0.08); color: var(--accent-light);
}

/* ===== DATA TABLE (Dexu.ai inspired) ===== */
.data-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.data-table th {
  text-align: right; padding: 10px 14px; font-weight: 600;
  color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.5px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg-card); z-index: 1;
}
.data-table td {
  padding: 10px 14px; border-bottom: 1px solid rgba(148,163,184,0.04);
  font-variant-numeric: tabular-nums;
}
.data-table tr:hover td { background: rgba(255,255,255,0.02); }
.data-table .up { color: var(--accent); }
.data-table .down { color: #ef4444; }
.data-table-scroll { max-height: 400px; overflow-y: auto; scrollbar-width: thin; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .analysis-grid { grid-template-columns: 1fr; }
  .strat-builder { grid-template-columns: 1fr; }
  .strat-config { position: static; }
}
@media (max-width: 920px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-card.span2 { grid-column: span 1; }
  .scan-card { grid-template-columns: 50px 1fr auto; }
  .scan-card .sc-vol, .scan-card .sc-rsi { display: none; }
  .crypto-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .bt-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  /* Header */
  .plat-header { flex-direction: column; gap: 12px; align-items: flex-start; margin-bottom: 20px; padding-bottom: 16px; }
  .plat-title { font-size: 1.3rem; }
  .plat-sub { font-size: 0.82rem; }
  .live-clock { font-size: 0.75rem; padding: 6px 12px; }

  /* Indices */
  .indices-bar { padding: 10px 0; gap: 8px; margin-bottom: 20px; }
  .idx-card { min-width: 130px; padding: 10px 14px; }
  .idx-card .name { font-size: 0.68rem; }
  .idx-card .price { font-size: 0.95rem; }
  .idx-card .change { font-size: 0.75rem; }

  /* Dashboard */
  .dash-grid { gap: 12px; }
  .dash-card { padding: 16px 14px; }
  .dash-card-head { margin-bottom: 10px; padding-bottom: 8px; }
  .dash-card-head h3 { font-size: 0.85rem; }
  .badge-sm { font-size: 0.65rem; padding: 2px 8px; }

  /* Mini table */
  .mt-row { padding: 8px 8px; font-size: 0.78rem; gap: 8px; }
  .mt-row .sym { font-size: 0.82rem; }
  .mt-row .name { font-size: 0.7rem; display: none; }
  .mt-row .val { font-size: 0.78rem; }
  .mt-row .chg { font-size: 0.72rem; min-width: 44px; }

  /* News mini */
  .nm-item { padding: 8px; font-size: 0.78rem; }
  .nm-item .nm-title { font-size: 0.78rem; line-height: 1.4; }
  .nm-item .nm-meta { font-size: 0.68rem; }

  /* Scanner */
  .scanner-filters { gap: 6px; margin-bottom: 16px; }
  .filter-btn { padding: 8px 14px; font-size: 0.78rem; min-height: 38px; }
  .scan-card { grid-template-columns: 1fr auto; padding: 12px 14px; gap: 8px; }
  .scan-card .score-badge { display: none; }
  .scan-card .sc-info h4 { font-size: 0.9rem; }
  .scan-card .sc-info .sector { font-size: 0.72rem; }
  .scan-card .sc-price { font-size: 0.85rem; }
  .scan-card .sc-chg { font-size: 0.78rem; min-width: 44px; }
  .scan-card .sc-signals { gap: 6px; padding-top: 8px; }
  .signal-tag { font-size: 0.68rem; padding: 3px 8px; }
  .fav-btn { width: 28px; height: 28px; font-size: 0.8rem; top: 6px; left: 6px; }

  /* Crypto */
  .crypto-card { padding: 14px; }
  .crypto-card .cc-top { gap: 8px; margin-bottom: 10px; }
  .crypto-card .cc-top img { width: 28px; height: 28px; }
  .crypto-card .cc-top .cc-sym { font-size: 0.9rem; }
  .crypto-card .cc-top .cc-name { font-size: 0.72rem; }
  .crypto-card .cc-price { font-size: 1.1rem; margin-bottom: 6px; }
  .crypto-card .cc-changes { font-size: 0.72rem; gap: 8px; flex-wrap: wrap; }

  /* News */
  .news-card { padding: 14px; }
  .news-card h3 { font-size: 0.85rem; line-height: 1.5; }
  .news-card .nc-desc { font-size: 0.78rem; line-height: 1.6; margin-bottom: 8px; }
  .news-card .nc-head { gap: 8px; }
  .news-card .nc-sentiment { font-size: 0.7rem; padding: 2px 6px; margin-right: 0; }
  .ai-analysis-card { padding: 14px; }
  .ai-analysis-card h3 { font-size: 0.9rem; }
  .ai-analysis-card p { font-size: 0.82rem; }

  /* Strategy */
  .strat-config { padding: 16px; }
  .strat-results { padding: 14px; min-height: 280px; }
  .bt-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bt-stat { padding: 10px 8px; }
  .bt-stat .val { font-size: 1rem; }
  .bt-stat .lbl { font-size: 0.68rem; }
  .bt-chart-container { height: 200px; }
  .chart-container { height: 250px; }

  /* Analysis */
  .search-box { padding: 8px 12px; gap: 8px; }
  .search-box .inp { font-size: 0.85rem; padding: 6px; }
  .chart-panel { padding: 14px; }
  .chart-panel .chart-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .chart-panel .price-big { font-size: 1.3rem; }
  .chart-panel .change-big { font-size: 0.78rem; margin-right: 0; }
  .side-card { padding: 14px; }
  .side-card h4 { font-size: 0.85rem; margin-bottom: 10px; padding-bottom: 8px; }
  .indicator-row, .fundamental-row { font-size: 0.78rem; padding: 5px 0; }
  .summary-badge { padding: 6px 12px; font-size: 0.78rem; }

  /* Loading */
  .loading-row { padding: 8px; font-size: 0.78rem; }
  .scan-placeholder { padding: 40px 16px; }
  .scan-placeholder p { font-size: 0.88rem; }
}

/* ===== MOBILE TOUCH ===== */
@media (hover: none) and (pointer: coarse) {
  .card:hover, .scan-card:hover, .crypto-card:hover, .news-card:hover,
  .idx-card:hover, .stat:hover, .step:hover { transform: none; }
  .card:active, .scan-card:active, .crypto-card:active, .news-card:active,
  .idx-card:active, .stat:active, .step:active { transform: scale(0.98); }
  .fav-btn { width: 36px; height: 36px; }
  .filter-btn { min-height: 42px; }
  button, .btn { min-height: 44px; }
  .inp { min-height: 44px; font-size: 16px !important; }
  select.inp { min-height: 44px; }
  a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ===== MOBILE NAV ===== */
@media (max-width: 600px) {
  .navlinks {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 260px; z-index: 200; flex-direction: column;
    background: rgba(6, 10, 20, 0.98); backdrop-filter: blur(24px);
    padding: 80px 20px 20px; gap: 0;
    border-left: 1px solid var(--border);
    transform: translateX(100%); transition: transform 0.3s ease;
    overflow-y: auto;
  }
  .navlinks.nav-open { display: flex !important; transform: translateX(0); }
  .navlinks a { padding: 14px 0; font-size: 0.95rem; border-bottom: 1px solid var(--border); width: 100%; min-height: 48px; display: flex; align-items: center; }
  .navlinks a:last-child { border-bottom: none; }
  .navlinks a.active { color: var(--gold); }
  .burger { display: block; z-index: 201; position: relative; background: none; border: none; padding: 10px; }
  .burger.active { color: var(--gold); }
  .nav-cta { display: none !important; }
}

/* ===== MOBILE SCROLLBAR ===== */
@media (max-width: 600px) {
  .indices-bar::-webkit-scrollbar { display: none; }
  .indices-bar { -ms-overflow-style: none; scrollbar-width: none; }
  .dash-grid { overflow: visible; }
}

/* ===== OVERFLOW PROTECTION ===== */
* { -webkit-overflow-scrolling: touch; }
img, video { max-width: 100%; height: auto; }
.bt-trades-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bt-trades-table th, .bt-trades-table td { white-space: nowrap; }

/* ===== FOCUS STATES (Accessibility) ===== */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.inp:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.15);
}


/* ===== MARKETPLACE / USER PANEL / MODAL (added) ===== */
.hidden { display: none !important; }
.tool-form { display: flex; flex-direction: column; gap: 4px; }
.tool-form label { font-size: .85rem; color: var(--text-secondary); margin-top: 10px; }
.tool-form .inp { width: 100%; }
.tool-form textarea.inp { resize: vertical; min-height: 90px; line-height: 1.5; }
.tool-card { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.tool-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.tool-card h3 { font-size: 1.05rem; }
.tool-card p { color: var(--text-secondary); font-size: .88rem; line-height: 1.7; flex: 1; }
.tool-meta { display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font-size: .82rem; }
.tool-meta .price { color: var(--gold); font-weight: 700; direction: ltr; }
.code-preview { background: rgba(2,2,3,.7); color: #9ca3af; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; font-size: .75rem; line-height: 1.5; max-height: 200px; overflow: auto; direction: ltr; text-align: left; font-family: monospace; white-space: pre-wrap; word-break: break-all; }
.btn-danger { background: rgba(239,68,68,.12); color: #ff6b6b; border: 1px solid rgba(239,68,68,.3); }
.btn-danger:hover { background: rgba(239,68,68,.2); }
.modal-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(2,2,3,.7); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 20px; }
.modal { width: 100%; max-width: 420px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; position: relative; box-shadow: var(--shadow-card-hover); }
.modal-close { position: absolute; top: 12px; left: 12px; background: none; border: none; color: var(--text-muted); font-size: 1.6rem; cursor: pointer; line-height: 1; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 18px; background: var(--bg-glass); padding: 4px; border-radius: var(--radius-pill); }
.auth-tab { flex: 1; padding: 10px; background: none; border: none; color: var(--text-muted); border-radius: var(--radius-pill); cursor: pointer; font-weight: 600; }
.auth-tab.active { background: var(--accent); color: #061008; }
.auth-title { margin-bottom: 14px; }
.modal form label { display: block; font-size: .85rem; color: var(--text-secondary); margin: 10px 0 4px; }
.modal form .inp { width: 100%; }
@media (max-width: 600px) {
  .tool-meta { flex-wrap: wrap; gap: 6px; }
  .modal { padding: 22px 18px; }
}
.light-theme .code-preview { background: rgba(255,255,255,.6); border-color: var(--border); }

/* ===== ACCOUNT BUTTON + PROFESSIONAL MENU (added) ===== */
.acct-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #04120d; font-weight: 700; font-size: .85rem;
  border: none; cursor: pointer; line-height: 1;
  box-shadow: 0 4px 16px var(--accent-glow);
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s;
  white-space: nowrap;
}
.acct-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px var(--accent-glow); }
.acct-btn:active { transform: scale(.96); }
.light-theme .acct-btn { color: #fff; }
.navlinks a { position: relative; }
.navlinks a.active::after {
  content: ""; position: absolute; right: 14%; left: 14%; bottom: -6px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
}
@media (max-width: 768px) {
  .acct-btn { padding: 8px 12px; font-size: .78rem; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .platform-main { animation: none; }
  .dash-card { animation: none; }
}


/* ===== HAMBURGER AT EVERY WIDTH =====================================
   The platform nav carries 19 links. A horizontal rail that wide forces
   tiny text and still overflows, and the first casualty is always the
   items at the end - which here included "پنل من" and "مدیریت".

   The slide-out panel already existed but was gated to <=600px. Promoting
   it to all widths is a smaller change than redesigning the rail, and it
   gives every link the same prominence instead of privileging the first
   six. The rail markup is kept: the panel reuses it, so there is one list
   to maintain rather than two that drift apart. */
@media (min-width: 601px) {
  .navlinks {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(320px, 86vw); z-index: 200;
    display: flex !important; flex-direction: column;
    background: rgba(6, 10, 20, 0.98);
    backdrop-filter: blur(24px);
    padding: 84px 22px 24px; gap: 0;
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    /* Not reachable by keyboard while closed - a hidden panel that still
       takes tab focus is worse than no panel. */
    visibility: hidden;
  }
  .navlinks.nav-open { transform: translateX(0); visibility: visible; }
  .navlinks a {
    padding: 13px 0; font-size: 0.95rem; width: 100%;
    min-height: 46px; display: flex; align-items: center;
    border-bottom: 1px solid var(--border);
  }
  .navlinks a:last-child { border-bottom: none; }
  .navlinks a.active { color: var(--gold); }

  .burger {
    display: block; z-index: 201; position: relative;
    background: none; border: none; padding: 10px;
    font-size: 1.4rem; color: var(--text-primary); cursor: pointer;
  }
  .burger.active { color: var(--gold); }

  /* Dim the page behind the panel so the eye knows where to look. */
  body.nav-locked::after {
    content: ''; position: fixed; inset: 0; z-index: 199;
    background: rgba(0, 0, 0, 0.5);
  }
}

/* Group headings inside the slide-out menu.
   aria-hidden: they are visual grouping only. Announcing "معامله" as a menu
   item would make a screen-reader user try to activate it. */
.nav-group-title {
  font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--text-muted, #8892a4);
  padding: 14px 0 6px; margin-top: 4px;
  border-bottom: 1px solid var(--border);
  width: 100%; user-select: none;
}
.nav-group-title:first-child { margin-top: 0; padding-top: 0; }
/* The rail is never shown now, but if a future change re-enables it the
   headings must not turn into stray words in a horizontal bar. */
@media (min-width: 601px) {
  .nav-rail:not(:has(.nav-open)) .nav-group-title { display: block; }
}

/* ===== DRAWING TOOLBAR (TradingView-style vertical rail) ============== */
.draw-toolbar {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(6, 10, 20, 0.92);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 4px;
  backdrop-filter: blur(10px);
}
.draw-tool {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: none; border: none; border-radius: 7px;
  color: var(--text-secondary, #8892a4);
  font-size: 15px; cursor: pointer; line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.draw-tool:hover { background: rgba(212,175,55,.12); color: #d4af37; }
.draw-tool.active { background: rgba(212,175,55,.2); color: #d4af37; }
/* Visible focus ring: a toolbar reachable only by mouse excludes keyboard
   users from every drawing tool at once. */
.draw-tool:focus-visible { outline: 2px solid #d4af37; outline-offset: 1px; }
.draw-sep { height: 1px; background: var(--border); margin: 3px 2px; }

@media (max-width: 600px) {
  /* Horizontal along the top on phones: a vertical rail eats the chart
     height, which is the scarcest thing on a small screen. */
  .draw-toolbar {
    flex-direction: row; top: 6px; right: 6px; left: 6px;
    justify-content: center; flex-wrap: wrap;
  }
  .draw-tool { width: 40px; height: 40px; }
}

/* ===== INDICATOR PANEL =============================================== */
.ind-panel {
  position: absolute; top: 8px; left: 8px; z-index: 4;
  width: 250px; max-width: calc(100% - 60px);
  background: rgba(6, 10, 20, 0.93);
  border: 1px solid var(--border); border-radius: 10px;
  backdrop-filter: blur(10px); font-size: 12px;
}
.ind-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border);
  color: var(--text-secondary, #8892a4);
}
.ind-add {
  background: rgba(212,175,55,.12); color: #d4af37;
  border: 1px solid rgba(212,175,55,.4); border-radius: 7px;
  padding: 4px 8px; font-size: 11px; cursor: pointer; min-height: 30px;
}
.ind-active { padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.ind-empty { color: #64748b; padding: 8px; text-align: center; font-size: 11px; }
.ind-row {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px; border-radius: 7px; background: rgba(255,255,255,.03);
}
.ind-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ind-name { flex: 1; color: #e8edf7; font-size: 11px; }
.ind-param {
  width: 46px; background: rgba(0,0,0,.35); color: #e8edf7;
  border: 1px solid var(--border); border-radius: 5px;
  padding: 3px 5px; font-size: 11px; min-height: 26px;
}
.ind-del {
  background: none; border: none; color: #64748b;
  cursor: pointer; padding: 2px 5px; border-radius: 5px; line-height: 1;
}
.ind-del:hover { color: #ef4444; background: rgba(239,68,68,.12); }
.ind-del:focus-visible, .ind-add:focus-visible, .ind-param:focus-visible {
  outline: 2px solid #d4af37; outline-offset: 1px;
}

@media (max-width: 600px) {
  /* Below the chart on phones: floating panels cover the candles, and the
     toolbar already occupies the top strip. */
  .ind-panel {
    position: static; width: 100%; max-width: none; margin-top: 8px;
  }
}

/* ===== WORKSPACE BAR ================================================= */
.ws-bar { display: flex; align-items: center; gap: 6px; }
.ws-select {
  background: rgba(0,0,0,.35); color: #e8edf7;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 8px; font-size: 12px; min-height: 32px; max-width: 150px;
}
.ws-btn {
  background: rgba(212,175,55,.12); color: #d4af37;
  border: 1px solid rgba(212,175,55,.4); border-radius: 8px;
  padding: 5px 12px; font-size: 12px; cursor: pointer; min-height: 32px;
}
.ws-btn:hover { background: rgba(212,175,55,.2); }
.ws-btn:disabled { opacity: .4; cursor: not-allowed; }
.ws-btn:focus-visible, .ws-select:focus-visible {
  outline: 2px solid #d4af37; outline-offset: 1px;
}

/* ===== DASHBOARD: COLLAPSED SECONDARY PANELS ========================= */
.dash-more {
  display: grid; gap: 12px; margin-top: 16px;
}
.dash-fold {
  background: var(--bg-card, rgba(255, 255, 255, .03));
  border: 1px solid var(--border, #1e2a3d);
  border-radius: 14px;
  overflow: hidden;
}
.dash-fold > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 18px; cursor: pointer;
  font-size: .92rem; font-weight: 700; color: var(--text-primary, #e8edf7);
  list-style: none; user-select: none; min-height: 50px;
}
/* Safari draws its own triangle unless this is cleared. */
.dash-fold > summary::-webkit-details-marker { display: none; }
.dash-fold > summary:hover { background: rgba(255, 255, 255, .03); }
.dash-fold > summary:focus-visible {
  outline: 2px solid var(--gold, #d4af37); outline-offset: -2px;
}
.dash-fold-hint {
  font-size: .72rem; font-weight: 600; color: var(--text-muted, #6d788d);
  border: 1px solid var(--border, #1e2a3d);
  border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
.dash-fold[open] > summary { border-bottom: 1px solid var(--border, #1e2a3d); }
.dash-fold[open] .dash-fold-hint::before { content: 'بستن'; }
.dash-fold[open] .dash-fold-hint { font-size: 0; }
.dash-fold[open] .dash-fold-hint::before { font-size: .72rem; }
.dash-fold > .mini-table { padding: 4px 6px 10px; }

/* ===== NAV STACKING FIX ==============================================
   The burger was unclickable, and the reason was a stacking-context trap
   rather than a small z-index difference.

   `header` is `position: fixed; z-index: 50`, so it opens a stacking context.
   The burger inside it carried `z-index: 201`, but that number only competes
   with its siblings INSIDE the header — against the rest of the page the whole
   header still ranks at 50. The backdrop is `body.nav-locked::after` at
   z-index 199, a child of <body> in the root context, so it painted over the
   entire header: burger, menu and all. Every click landed on the backdrop,
   which closes the menu — the menu appeared to open and instantly shut.

   The fix raises the header above the backdrop while the menu is open. The
   internal 200/201 ordering then works as intended.
   ==================================================================== */
/* Flat surface, no decorative layer. Set on the page itself so the removal
   cannot be undone by a stylesheet that happens to load later. */
body.platform-page {
  background: var(--bg-deep, #01131f);
  background-image: none;
}
body.platform-page .ocean-photo,
body.platform-page .bgmesh,
body.platform-page .whale-bg { display: none !important; }

body.nav-locked::after { z-index: 150 !important; }

/* The header must stay fixed and above the page at all times. Stated here as
   well as in styles.css because this is the file that owns platform layout,
   and the previous breakage came from another stylesheet quietly overriding
   the bare `header` rule. */
body.platform-page header#hdr {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 250;

  /* THE reason the slide-out menu kept landing behind the page, and why
     raising z-index never fixed it — the problem was never stacking order.
     theme-ocean.css puts `backdrop-filter: blur(14px)` on the header. Per
     spec, an element with a backdrop-filter (like transform and filter)
     becomes the CONTAINING BLOCK for its `position: fixed` descendants.
     `.navlinks` is a fixed panel inside the header, so `top:0; bottom:0`
     stopped meaning "full viewport height" and started meaning "the height of
     the header" — roughly 70px. The menu was being squashed into the header
     bar and clipped, not covered by anything.

     Removing the blur here costs nothing: it existed to blur the ocean
     photograph, and the platform page no longer has one. There is now only a
     flat colour behind the header, and blurring a flat colour produces the
     same flat colour at the price of a full-viewport filter pass every frame.

     !important is required: theme-ocean.css loads after this file and sets the
     header background with !important of its own. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #071827 !important;
  border-bottom: 1px solid rgba(150, 210, 245, .12);
}
.light-theme.platform-page header#hdr,
.platform-page.light-theme header#hdr {
  background: #f4f9fd !important;
  border-bottom-color: rgba(8, 40, 60, .10);
}

/* shell.css re-declares `.navlinks` after this file with the same specificity
   and sets `overflow-y: hidden`, which wins on load order and left the open
   panel unable to scroll to its last items. The panel needs its own scroll. */
body.platform-page .navlinks {
  overflow-y: auto;
  overflow-x: hidden;
  /* shell.css also replaces the panel's `padding: 84px 22px 24px` with a flat
     `padding: 4px`, which pulled the first menu item up under the fixed header
     bar. The top inset is what keeps «داشبورد» reachable rather than tucked
     behind the brand and the theme button. */
  padding: 84px 22px 24px;
  gap: 0;
}

/* No extra bump while the menu is open: the header now sits at 250 for its
   whole life, comfortably above the 150 backdrop. Raising it further would
   push it over the 300 modal overlay and let the nav sit on top of dialogs. */

/* The slide-out panel is the platform's real navigation at every width — the
   bottom bar carries five links, this carries twenty. mobile.css hid the
   burger below 768px, which left 601-768px with no way to reach most tabs. */
@media (max-width: 768px) {
  .burger { display: block !important; }
}

.burger {
  display: block; position: relative; z-index: 201;
  background: none; border: none; cursor: pointer;
  color: var(--text-primary); font-size: 1.4rem;
  padding: 10px; min-width: 44px; min-height: 44px;
  border-radius: 10px; line-height: 1;
}
.burger:hover { background: rgba(212, 175, 55, .12); }
.burger.active { color: var(--gold); background: rgba(212, 175, 55, .18); }
.burger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ===== AUTH GATE ===================================================== */
/* Hide the shell until the server confirms the token. Without this the
   platform paints for a moment before the gate appears, which both looks
   broken and briefly exposes content. */
/* The gate is a full-screen layer, not a block appended to the document.
   Anything less and it lands wherever the page flow happens to end — which is
   exactly how it was showing up at the bottom of the page. */
body.auth-checking > *:not(#auth-gate) { visibility: hidden; }
body.auth-gated { overflow: hidden; }

#auth-gate {
  position: fixed; inset: 0; z-index: 99999;
  display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(1100px 620px at 78% -12%, rgba(212, 175, 55, .13), transparent 60%),
    radial-gradient(900px 560px at 12% 108%, rgba(74, 159, 216, .14), transparent 62%),
    #05080f;
  overflow-y: auto;
  animation: agFade .32s ease both;
}
@keyframes agFade { from { opacity: 0 } to { opacity: 1 } }

.ag-card {
  width: 100%; max-width: 400px;
  background: linear-gradient(168deg, rgba(20, 28, 44, .96), rgba(9, 14, 26, .97));
  border: 1px solid rgba(212, 175, 55, .18);
  border-radius: 20px;
  padding: 34px 30px 30px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .05);
  animation: agRise .42s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes agRise { from { opacity: 0; transform: translateY(16px) scale(.985) } }

.ag-brand {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 20px;
}
.ag-mark {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #d4af37, #b08d1f);
  color: #06101f; font-weight: 900; font-size: 1.2rem;
  box-shadow: 0 8px 22px rgba(212, 175, 55, .3);
}
.ag-brand-name { color: #f2f5fb; font-weight: 800; font-size: 1.16rem; letter-spacing: -.2px; }
.ag-brand-sub { color: #7e8ba1; font-size: .66rem; letter-spacing: 2.4px; text-transform: uppercase; }

.ag-title { color: #f2f5fb; font-size: 1.06rem; margin: 0 0 6px; text-align: center; font-weight: 700; }
.ag-sub { color: #8892a4; font-size: 12.5px; margin: 0 0 20px; line-height: 1.9; text-align: center; }

.ag-field { margin-bottom: 14px; }
.ag-label { display: block; color: #9aa6bb; font-size: 11.5px; margin: 0 0 7px; font-weight: 600; }
.ag-wrap { position: relative; display: flex; align-items: center; }
.ag-inp {
  width: 100%; background: rgba(0, 0, 0, .42); color: #eef2f9;
  border: 1px solid #223047; border-radius: 11px;
  padding: 12px 14px; font-size: 14px; min-height: 48px;
  transition: border-color .18s ease, box-shadow .18s ease;
  font-family: inherit;
}
.ag-inp::placeholder { color: #55617a; }
.ag-inp:hover { border-color: #2c3d59; }
.ag-inp:focus {
  outline: none; border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .16);
}
/* Password fields keep room for the reveal toggle. The page is RTL but the
   credentials are typed LTR, so the toggle sits on the left where the end of
   an LTR string is. */
.ag-wrap.has-toggle .ag-inp { padding-left: 46px; }
.ag-eye {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: #7e8ba1;
  padding: 8px; border-radius: 8px; font-size: 15px; line-height: 1;
  min-width: 34px; min-height: 34px;
}
.ag-eye:hover { color: #d4af37; background: rgba(212, 175, 55, .1); }
.ag-eye:focus-visible { outline: 2px solid #d4af37; outline-offset: 1px; }
/* Crossed-out state: an ❌ sits on top of the eye. Absolutely positioned so
   the button keeps exactly one glyph's width and does not jump when toggled. */
.ag-eye.crossed::after {
  content: '❌';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: .74em; pointer-events: none;
}

.ag-btn {
  width: 100%; margin-top: 8px; min-height: 50px;
  background: linear-gradient(135deg, #d4af37, #c39d28);
  color: #06101f; font-weight: 800; font-family: inherit;
  border: none; border-radius: 12px; cursor: pointer; font-size: 14.5px;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 10px 26px rgba(212, 175, 55, .24);
}
.ag-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.ag-btn:active:not(:disabled) { transform: translateY(0); }
.ag-btn:disabled { opacity: .62; cursor: not-allowed; box-shadow: none; }
.ag-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Errors are announced and visually distinct, and the box only takes space
   once it has something to say. */
.ag-err {
  color: #fca5a5; font-size: 12.5px; line-height: 1.75;
  background: rgba(239, 68, 68, .1);
  border: 1px solid rgba(239, 68, 68, .3);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 14px;
  display: none;
}
.ag-err.show { display: block; animation: agShake .3s ease; }
@keyframes agShake {
  0%, 100% { transform: translateX(0) } 25% { transform: translateX(-5px) }
  75% { transform: translateX(5px) }
}
.ag-ok {
  color: #6ee7b7; font-size: 12.5px; line-height: 1.75;
  background: rgba(16, 185, 129, .1);
  border: 1px solid rgba(16, 185, 129, .3);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 14px;
}
.ag-hint { color: #6d788d; font-size: 11px; margin-top: 7px; line-height: 1.8; }
.ag-link {
  background: none; border: none; color: #d4af37; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; padding: 2px 4px;
  text-decoration: underline; text-underline-offset: 3px;
}
.ag-link:hover { color: #e6c352; }
.ag-link:focus-visible { outline: 2px solid #d4af37; outline-offset: 2px; border-radius: 4px; }

/* ===== VIEWER (read-only) MODE ======================================= */
#viewer-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  padding: 9px 16px;
  background: linear-gradient(90deg, rgba(212, 175, 55, .16), rgba(212, 175, 55, .09));
  border-top: 1px solid rgba(212, 175, 55, .34);
  backdrop-filter: blur(10px);
  color: #f0e3bd; font-size: 12.5px; line-height: 1.8;
}
#viewer-banner button {
  background: rgba(212, 175, 55, .22); color: #f5e9c8;
  border: 1px solid rgba(212, 175, 55, .45);
  border-radius: 9px; padding: 6px 14px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; min-height: 34px;
}
#viewer-banner button:hover:not(:disabled) { background: rgba(212, 175, 55, .34); }
#viewer-banner button:disabled { opacity: .65; cursor: default; }

/* Keep the banner from covering the bottom nav on phones. */
@media (max-width: 768px) {
  #viewer-banner { bottom: 64px; font-size: 11.5px; padding: 8px 12px; }
}
.ag-foot {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  text-align: center; color: #6d788d; font-size: 11px; line-height: 1.9;
}

@media (max-width: 420px) {
  #auth-gate { padding: 14px; }
  .ag-card { padding: 26px 20px 24px; border-radius: 16px; }
}

/* ===== ADMIN PANEL =================================================== */
.ap-sec { margin-bottom: 22px; }
.ap-h { font-size: 0.95rem; color: #e8edf7; margin: 0 0 10px; font-weight: 700; }
.ap-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ap-inp {
  background: rgba(0,0,0,.35); color: #e8edf7;
  border: 1px solid var(--border, #1e2a3d); border-radius: 9px;
  padding: 9px 12px; font-size: 13px; min-height: 40px; flex: 1 1 170px;
}
.ap-btn {
  background: #d4af37; color: #06101f; font-weight: 700;
  border: none; border-radius: 9px; padding: 9px 18px;
  cursor: pointer; font-size: 13px; min-height: 40px;
}
.ap-btn:hover { background: #e0bf50; }
.ap-note { font-size: 12px; color: #8892a4; }
.ap-list { display: flex; flex-direction: column; gap: 8px; }
.ap-row {
  background: rgba(255,255,255,.03); border: 1px solid var(--border, #1e2a3d);
  border-radius: 11px; padding: 11px 13px;
}
.ap-row-head {
  display: flex; justify-content: space-between; gap: 10px;
  align-items: baseline; margin-bottom: 5px; flex-wrap: wrap;
}
.ap-row-head b { color: #e8edf7; font-size: 13px; }
.ap-time { color: #64748b; font-size: 11px; }
.ap-body { color: #cbd5e1; font-size: 13px; line-height: 1.9; }
.ap-pre {
  margin: 0; padding: 8px; border-radius: 7px; background: rgba(0,0,0,.35);
  color: #94a3b8; font-size: 11px; direction: ltr; text-align: left;
  /* Long JSON must scroll inside its own box, never widen the page. */
  overflow-x: auto; white-space: pre; max-height: 180px;
}
.ap-empty { color: #64748b; font-size: 13px; padding: 14px; text-align: center; }
.ap-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ap-table th, .ap-table td {
  padding: 8px 10px; text-align: right;
  border-bottom: 1px solid var(--border, #1e2a3d);
}
.ap-table th { color: #8892a4; font-weight: 600; }
.ap-table td { color: #cbd5e1; }
.ap-inp:focus-visible, .ap-btn:focus-visible {
  outline: 2px solid #d4af37; outline-offset: 1px;
}

/* ===== CHART TOOLBAR ================================================== */
.ctb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 7px 10px; margin-bottom: 8px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border, #1e2a3d);
  border-radius: 11px;
}
.ctb-group { display: flex; gap: 2px; flex-wrap: wrap; }
.ctb-tf, .ctb-btn {
  background: transparent; color: var(--text-secondary, #8892a4);
  border: 1px solid transparent; border-radius: 8px;
  padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer;
  min-height: 32px; white-space: nowrap;
}
.ctb-tf:hover, .ctb-btn:hover { background: rgba(212, 175, 55, .12); color: var(--text-primary, #e8edf7); }
.ctb-tf.active, .ctb-btn.active {
  background: rgba(212, 175, 55, .2); color: var(--gold, #d4af37);
  border-color: rgba(212, 175, 55, .4);
}
.ctb-tf:focus-visible, .ctb-btn:focus-visible, .ctb-type:focus-visible {
  outline: 2px solid var(--gold, #d4af37); outline-offset: 1px;
}
.ctb-sep { width: 1px; align-self: stretch; background: var(--border, #1e2a3d); margin: 0 4px; }
.ctb-type {
  background: rgba(0, 0, 0, .3); color: var(--text-primary, #e8edf7);
  border: 1px solid var(--border, #1e2a3d); border-radius: 8px;
  padding: 5px 8px; font: inherit; font-size: 12px; min-height: 32px;
}
.ctb-note { font-size: 11px; color: var(--text-muted, #6d788d); margin-inline-start: auto; }

/* ===== SCRIPT LAB ===================================================== */
.sl-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .sl-wrap { grid-template-columns: 1fr; } }
.sl-editor, .sl-side {
  background: var(--bg-card, rgba(255,255,255,.03));
  border: 1px solid var(--border, #1e2a3d);
  border-radius: 14px; padding: 16px;
}
.sl-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.sl-inp {
  background: rgba(0,0,0,.3); color: var(--text-primary, #e8edf7);
  border: 1px solid var(--border, #1e2a3d); border-radius: 9px;
  padding: 9px 12px; font: inherit; font-size: 13px; min-height: 40px; flex: 1;
}
.sl-kind { flex: 0 0 130px; }
.sl-code {
  width: 100%; min-height: 320px; resize: vertical;
  background: #05090f; color: #cfe3f5;
  border: 1px solid var(--border, #1e2a3d); border-radius: 10px;
  padding: 12px 14px; font-family: Consolas, "Courier New", monospace;
  font-size: 12.5px; line-height: 1.75; tab-size: 4;
}
.sl-code:focus { outline: none; border-color: var(--gold, #d4af37); }
.sl-btn {
  background: rgba(255,255,255,.05); color: var(--text-primary, #e8edf7);
  border: 1px solid var(--border, #1e2a3d); border-radius: 9px;
  padding: 8px 14px; font: inherit; font-size: 12.5px; cursor: pointer; min-height: 38px;
}
.sl-btn:hover { background: rgba(212,175,55,.15); }
.sl-btn.primary { background: var(--gold, #d4af37); color: #06101f; font-weight: 700; border: none; }
.sl-btn.danger:hover { background: rgba(239,68,68,.2); color: #fca5a5; }
.sl-file { display: inline-flex; align-items: center; }
.sl-msg { font-size: 12px; color: var(--text-muted, #6d788d); }
.sl-check { margin-top: 12px; font-size: 12.5px; line-height: 2; }
.sl-ok { color: #6ee7b7; }
.sl-problems { list-style: none; padding: 0; margin: 0; }
.sl-problems li { padding: 4px 0; }
.sl-error { color: #fca5a5; }
.sl-warn { color: #fcd34d; }
.sl-trans {
  margin-top: 8px; padding: 9px 12px; border-radius: 9px;
  background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); color: #6ee7b7;
}
.sl-unsup {
  margin-top: 8px; padding: 9px 12px; border-radius: 9px;
  background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.25);
  color: #9aa6bb;
}
.sl-trans code, .sl-unsup code {
  background: rgba(0,0,0,.35); padding: 1px 6px; border-radius: 5px; font-size: 11.5px;
}
.sl-h { font-size: .95rem; margin: 0 0 12px; color: var(--text-primary, #e8edf7); }
.sl-item { border: 1px solid var(--border, #1e2a3d); border-radius: 11px; padding: 11px; margin-bottom: 9px; }
.sl-item-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; }
.sl-badge {
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
  background: rgba(56,189,248,.15); color: #7dd3fc; border: 1px solid rgba(56,189,248,.3);
}
.sl-badge.alt { background: rgba(167,139,250,.15); color: #c4b5fd; border-color: rgba(167,139,250,.3); }
.sl-note { font-size: 11.5px; color: var(--text-muted, #6d788d); margin-bottom: 7px; }
.sl-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sl-actions .sl-btn { padding: 5px 10px; font-size: 11.5px; min-height: 32px; }
.sl-empty { color: var(--text-muted, #6d788d); font-size: 12.5px; padding: 14px 0; text-align: center; }

/* ===== ANALYSIS SYMBOL PICKS ========================================== */
.sym-picks {
  display: flex; flex-wrap: wrap; gap: 14px 22px;
  margin: 14px 0 22px; padding: 12px 16px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--border, #1e2a3d);
  border-radius: 12px;
}
.sym-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sym-label {
  font-size: 11px; color: var(--text-muted, #6d788d);
  margin-inline-end: 2px; white-space: nowrap;
}
.sym-chip {
  background: rgba(0, 0, 0, .28); color: var(--text-secondary, #8892a4);
  border: 1px solid var(--border, #1e2a3d); border-radius: 999px;
  padding: 5px 13px; font: inherit; font-size: 12px; cursor: pointer;
  min-height: 32px; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sym-chip:hover { background: rgba(212, 175, 55, .14); color: var(--text-primary, #e8edf7); }
.sym-chip.active {
  background: rgba(212, 175, 55, .22); color: var(--gold, #d4af37);
  border-color: rgba(212, 175, 55, .45); font-weight: 700;
}
.sym-chip:focus-visible { outline: 2px solid var(--gold, #d4af37); outline-offset: 2px; }
@media (max-width: 600px) { .sym-picks { gap: 10px 14px; padding: 10px 12px; } }

/* ===== SIGN-UP AGREEMENT ============================================== */
/* Scrollable rather than collapsed: terms hidden behind a "read more" are
   terms most people never open, and this one carries a real limitation. */
.ag-agree { margin-top: 14px; }
.ag-agree-box {
  max-height: 168px; overflow-y: auto;
  background: rgba(0, 0, 0, .32);
  border: 1px solid #223047; border-radius: 11px;
  padding: 12px 14px; font-size: 11.5px; line-height: 2;
  color: #9aa6bb;
}
.ag-agree-box b { color: #e2e8f4; display: block; margin: 10px 0 4px; }
.ag-agree-box b:first-child { margin-top: 0; }
.ag-agree-box p { margin: 0 0 8px; }
.ag-agree-box:focus-visible { outline: 2px solid #d4af37; outline-offset: 1px; }
.ag-agree-check {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px; font-size: 11.5px; line-height: 1.9; color: #9aa6bb;
  cursor: pointer;
}
.ag-agree-check input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; cursor: pointer; }

/* ===== LIGHT THEME CORRECTIONS ========================================
   Components added recently were written against the dark palette with
   literal colours instead of the theme tokens. In light mode that produced
   near-white text (#e8edf7) on white cards and black input fills behind dark
   text — readable in neither direction.

   Everything below re-states only the colours, never the layout, so the two
   themes cannot drift apart structurally.
   ==================================================================== */

/* ---- chart toolbar ---- */
.light-theme .ctb {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(8, 40, 60, .14);
}
.light-theme .ctb-tf,
.light-theme .ctb-btn { color: var(--text-secondary); }
.light-theme .ctb-tf:hover,
.light-theme .ctb-btn:hover { background: rgba(184, 121, 28, .12); color: var(--text-primary); }
.light-theme .ctb-tf.active,
.light-theme .ctb-btn.active {
  background: rgba(184, 121, 28, .16); color: var(--gold);
  border-color: rgba(184, 121, 28, .4);
}
.light-theme .ctb-type {
  background: #fff; color: var(--text-primary);
  border-color: rgba(8, 40, 60, .18);
}
.light-theme .ctb-sep { background: rgba(8, 40, 60, .14); }

/* ---- symbol quick-picks ---- */
.light-theme .sym-picks {
  background: rgba(255, 255, 255, .7);
  border-color: rgba(8, 40, 60, .12);
}
.light-theme .sym-chip {
  background: #fff; color: var(--text-secondary);
  border-color: rgba(8, 40, 60, .16);
}
.light-theme .sym-chip:hover { background: rgba(184, 121, 28, .1); color: var(--text-primary); }
.light-theme .sym-chip.active {
  background: rgba(184, 121, 28, .16); color: var(--gold);
  border-color: rgba(184, 121, 28, .45);
}

/* ---- collapsed dashboard panels ---- */
.light-theme .dash-fold {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(8, 40, 60, .12);
}
.light-theme .dash-fold > summary { color: var(--text-primary); }
.light-theme .dash-fold > summary:hover { background: rgba(8, 40, 60, .04); }
.light-theme .dash-fold-hint { color: var(--text-muted); border-color: rgba(8, 40, 60, .16); }
.light-theme .dash-fold[open] > summary { border-bottom-color: rgba(8, 40, 60, .12); }

/* ---- script lab ---- */
.light-theme .sl-editor,
.light-theme .sl-side {
  background: rgba(255, 255, 255, .82);
  border-color: rgba(8, 40, 60, .12);
}
.light-theme .sl-inp {
  background: #fff; color: var(--text-primary);
  border-color: rgba(8, 40, 60, .18);
}
/* The editor stays dark on purpose — code is read more comfortably on a dark
   field, and it is a single bounded panel rather than a page background. */
.light-theme .sl-code {
  background: #0d1622; color: #dbe7f5;
  border-color: rgba(8, 40, 60, .25);
}
.light-theme .sl-btn {
  background: #fff; color: var(--text-primary);
  border-color: rgba(8, 40, 60, .18);
}
.light-theme .sl-btn:hover { background: rgba(184, 121, 28, .12); }
.light-theme .sl-btn.primary { background: var(--gold); color: #fff; }
.light-theme .sl-item { border-color: rgba(8, 40, 60, .14); }
.light-theme .sl-h { color: var(--text-primary); }
.light-theme .sl-msg, .light-theme .sl-note, .light-theme .sl-empty { color: var(--text-muted); }
.light-theme .sl-ok { color: #0f7a52; }
.light-theme .sl-error { color: #b42318; }
.light-theme .sl-warn { color: #9a6700; }
.light-theme .sl-trans {
  background: rgba(15, 122, 82, .1); border-color: rgba(15, 122, 82, .3); color: #0f7a52;
}
.light-theme .sl-unsup {
  background: rgba(8, 40, 60, .05); border-color: rgba(8, 40, 60, .16); color: var(--text-secondary);
}
.light-theme .sl-trans code,
.light-theme .sl-unsup code { background: rgba(8, 40, 60, .08); color: var(--text-primary); }
.light-theme .sl-badge { background: rgba(23, 92, 140, .12); color: #14567f; border-color: rgba(23, 92, 140, .28); }
.light-theme .sl-badge.alt { background: rgba(109, 76, 168, .12); color: #5b3d94; border-color: rgba(109, 76, 168, .28); }

/* ---- news categories ---- */
.light-theme .news-cat {
  background: #fff; color: var(--text-secondary);
  border-color: rgba(8, 40, 60, .16);
}
.light-theme .news-cat:hover { background: rgba(184, 121, 28, .1); color: var(--text-primary); }
.light-theme .news-cat.active {
  background: rgba(184, 121, 28, .16); color: var(--gold);
  border-color: rgba(184, 121, 28, .45);
}
.light-theme .nc-count { background: rgba(8, 40, 60, .1); color: var(--text-muted); }

/* ---- viewer banner ---- */
.light-theme #viewer-banner {
  background: linear-gradient(90deg, rgba(184, 121, 28, .16), rgba(184, 121, 28, .09));
  border-top-color: rgba(184, 121, 28, .4);
  color: #6b4610;
}
.light-theme #viewer-banner button {
  background: rgba(184, 121, 28, .18); color: #5c3c0d;
  border-color: rgba(184, 121, 28, .45);
}

/* ---- multichart per-pane timeframe ---- */
.light-theme .mc-tf,
.light-theme .mc-tf-all {
  background: #fff; color: var(--text-secondary);
  border-color: rgba(8, 40, 60, .18);
}
.light-theme .mc-tf:hover { color: var(--text-primary); border-color: rgba(184, 121, 28, .45); }

/* ===== NEWS CATEGORIES ================================================ */
.news-cats {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
}
.news-cat {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(0, 0, 0, .28); color: var(--text-secondary, #8892a4);
  border: 1px solid var(--border, #1e2a3d); border-radius: 999px;
  padding: 7px 15px; font: inherit; font-size: 12.5px; cursor: pointer;
  min-height: 38px;
}
.news-cat:hover { background: rgba(212, 175, 55, .13); color: var(--text-primary, #e8edf7); }
.news-cat.active {
  background: rgba(212, 175, 55, .2); color: var(--gold, #d4af37);
  border-color: rgba(212, 175, 55, .45); font-weight: 700;
}
.news-cat:focus-visible { outline: 2px solid var(--gold, #d4af37); outline-offset: 2px; }
.nc-count {
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: var(--text-muted, #6d788d);
}
.nc-cat { white-space: nowrap; }
.nc-time { color: var(--text-muted, #6d788d); font-size: 11px; }
.nc-link {
  margin-inline-start: auto; color: var(--gold, #d4af37);
  font-size: 11.5px; font-weight: 700; text-decoration: none;
}
.nc-link:hover { text-decoration: underline; }
.news-card .nc-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Viewer banner dismissal — fades and slides out once the upgrade request
   has been filed, so a one-time prompt does not become permanent furniture. */
#viewer-banner {
  transition: opacity .55s ease, transform .55s ease;
}
#viewer-banner.vb-done {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

/* ===== DATA WINDOW (OHLC legend) ====================================== */
.ctb-legend {
  position: absolute; top: 8px; inset-inline-start: 10px; z-index: 4;
  display: none; gap: 12px; flex-wrap: wrap;
  padding: 6px 11px; border-radius: 9px;
  background: rgba(4, 10, 20, .82);
  border: 1px solid var(--border, #1e2a3d);
  font-size: 11.5px; color: var(--text-secondary, #8892a4);
  font-variant-numeric: tabular-nums; pointer-events: none;
  backdrop-filter: blur(4px);
}
.ctb-legend.on { display: flex; }
.ctb-legend b { color: var(--text-primary, #e8edf7); font-weight: 700; }
.ctb-legend .up { color: #06d6a0; }
.ctb-legend .down { color: #ef4444; }
.light-theme .ctb-legend {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(8, 40, 60, .16);
  color: var(--text-secondary);
}
.draw-tool.active { background: rgba(212, 175, 55, .2); color: var(--gold, #d4af37); }
.light-theme .draw-toolbar { background: rgba(255,255,255,.9); border-color: rgba(8,40,60,.14); }
.light-theme .draw-tool { color: var(--text-secondary); }
.light-theme .draw-tool.active { background: rgba(184,121,28,.18); color: var(--gold); }

/* ===== SYMBOL AUTOCOMPLETE ============================================ */
.sym-ac {
  position: absolute; z-index: 60; inset-inline-start: 0; top: calc(100% + 4px);
  min-width: 260px; max-width: 340px; max-height: 300px; overflow-y: auto;
  display: none; flex-direction: column;
  background: #0a1220; border: 1px solid var(--border, #1e2a3d);
  border-radius: 11px; box-shadow: 0 18px 42px rgba(0, 0, 0, .5);
}
.sym-ac.on { display: flex; }
.sym-ac-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 12px; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12.5px; text-align: start;
  color: var(--text-secondary, #8892a4);
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.sym-ac-row:last-child { border-bottom: none; }
.sym-ac-row:hover, .sym-ac-row.on { background: rgba(212, 175, 55, .14); }
.sym-ac-tick { font-weight: 800; color: var(--text-primary, #e8edf7); direction: ltr; min-width: 78px; }
.sym-ac-name { flex: 1; }
.sym-ac-cat { font-size: 10.5px; opacity: .7; white-space: nowrap; }
.light-theme .sym-ac { background: #fff; border-color: rgba(8,40,60,.16); }
.light-theme .sym-ac-row { color: var(--text-secondary); border-bottom-color: rgba(8,40,60,.08); }
.light-theme .sym-ac-row:hover, .light-theme .sym-ac-row.on { background: rgba(184,121,28,.12); }
.search-box, .wl-form, .cmp { position: relative; }

/* ===== WATCHLIST ====================================================== */
.wl-host { margin: 14px 0 4px; }
.wl {
  background: var(--bg-card, rgba(255,255,255,.03));
  border: 1px solid var(--border, #1e2a3d); border-radius: 13px; padding: 12px 14px;
}
.wl-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .9rem; font-weight: 700; color: var(--text-primary, #e8edf7);
  margin-bottom: 10px;
}
.wl-add {
  background: rgba(212,175,55,.16); color: var(--gold, #d4af37);
  border: 1px solid rgba(212,175,55,.35); border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; font-size: 15px; line-height: 1;
}
.wl-form { margin-bottom: 10px; }
.wl-inp {
  width: 100%; background: rgba(0,0,0,.3); color: var(--text-primary, #e8edf7);
  border: 1px solid var(--border, #1e2a3d); border-radius: 9px;
  padding: 8px 12px; font: inherit; font-size: 12.5px; min-height: 38px;
}
.wl-list { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-row {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.25); border: 1px solid var(--border, #1e2a3d);
  border-radius: 999px; padding: 5px 6px 5px 12px;
}
.wl-sym {
  background: none; border: none; color: var(--text-primary, #e8edf7);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; direction: ltr;
}
.wl-price { font-size: 11.5px; color: var(--text-muted, #6d788d); font-variant-numeric: tabular-nums; }
.wl-price.up { color: #06d6a0; } .wl-price.down { color: #ef4444; }
.wl-del {
  background: none; border: none; color: var(--text-muted, #6d788d);
  cursor: pointer; font-size: 12px; padding: 2px 6px; border-radius: 6px;
}
.wl-del:hover { color: #ef4444; background: rgba(239,68,68,.12); }
.wl-empty, .wl-err { font-size: 12px; color: var(--text-muted, #6d788d); padding: 6px 0; }
.wl-err { color: #fca5a5; }
.light-theme .wl { background: rgba(255,255,255,.8); border-color: rgba(8,40,60,.12); }
.light-theme .wl-inp, .light-theme .wl-row { background: #fff; border-color: rgba(8,40,60,.16); }

/* ===== COMPARE ======================================================== */
.cmp { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cmp-inp {
  background: rgba(0,0,0,.3); color: var(--text-primary, #e8edf7);
  border: 1px solid var(--border, #1e2a3d); border-radius: 9px;
  padding: 7px 12px; font: inherit; font-size: 12px; min-height: 34px; min-width: 190px;
}
.cmp-clear {
  background: rgba(239,68,68,.14); color: #fca5a5;
  border: 1px solid rgba(239,68,68,.3); border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer;
}
.cmp-note { font-size: 11.5px; color: #f472b6; }
.light-theme .cmp-inp { background: #fff; border-color: rgba(8,40,60,.16); }

/* ===== CHART ALERT MENU =============================================== */
.alert-menu {
  position: fixed; z-index: 900; display: none;
  min-width: 196px; padding: 10px;
  background: #0a1220; border: 1px solid var(--border, #1e2a3d);
  border-radius: 11px; box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.alert-menu.on { display: block; }
.am-head {
  font-size: 12px; color: var(--text-secondary, #8892a4);
  padding-bottom: 8px; margin-bottom: 8px; direction: ltr; text-align: start;
  border-bottom: 1px solid var(--border, #1e2a3d);
}
.am-head b { color: var(--text-primary, #e8edf7); font-variant-numeric: tabular-nums; }
.am-btn {
  display: block; width: 100%; text-align: start;
  background: none; border: none; color: var(--text-primary, #e8edf7);
  font: inherit; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.am-btn:hover { background: rgba(212,175,55,.15); }
.am-msg { font-size: 11.5px; color: var(--text-muted, #6d788d); padding: 6px 10px 0; min-height: 16px; }
.light-theme .alert-menu { background: #fff; border-color: rgba(8,40,60,.16); }

/* ===== ANALYSIS WORKSPACE ============================================
   The tab used to be a page of equal cards with a small chart among them —
   which is why it read as an info page rather than a trading screen. The
   chart is now the subject: it spans the full width of the work area and the
   supporting data moves into a rail beside it that scrolls independently.
   ==================================================================== */
#tab-analysis .analysis-grid {
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  gap: 16px;
}
#tab-analysis .chart-panel {
  padding: 14px 16px 16px;
  /* The drawing overlay and indicator panel are absolutely positioned against
     this box, so it must stay a positioned ancestor. */
  position: relative;
}
#tab-analysis .chart-container { min-height: 560px; }

/* The rail sticks while the chart stays put, so fundamentals stay reachable
   without scrolling the chart out of view. */
#tab-analysis .side-panel {
  position: sticky; top: 96px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  scrollbar-width: thin;
}
#tab-analysis .side-panel::-webkit-scrollbar { width: 6px; }
#tab-analysis .side-panel::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .3); border-radius: 3px;
}

/* Symbol row: search, chips and watchlist collapse into one compact band
   instead of three stacked blocks that pushed the chart below the fold. */
#tab-analysis .analysis-top { margin-bottom: 10px; }
#tab-analysis .sym-picks { margin: 0 0 10px; padding: 9px 13px; }
#tab-analysis .wl-host { margin: 0 0 12px; }
#tab-analysis .wl { padding: 10px 12px; }
#tab-analysis .wl-list { max-height: 92px; overflow-y: auto; }

@media (max-width: 1100px) {
  #tab-analysis .analysis-grid { grid-template-columns: minmax(0, 1fr); }
  #tab-analysis .side-panel {
    position: static; max-height: none;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
  #tab-analysis .chart-container { min-height: 420px; }
}

/* ===== COMMAND PALETTE (Ctrl+K) ======================================= */
.cp {
  position: fixed; inset: 0; z-index: 99000; display: none;
  background: rgba(2, 6, 14, .62); backdrop-filter: blur(3px);
  padding: 12vh 16px 16px;
}
.cp.on { display: block; }
.cp-box {
  max-width: 560px; margin: 0 auto;
  background: #0a1220; border: 1px solid var(--border, #1e2a3d);
  border-radius: 15px; overflow: hidden;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .6);
}
.cp-inp {
  width: 100%; background: transparent; color: var(--text-primary, #e8edf7);
  border: none; border-bottom: 1px solid var(--border, #1e2a3d);
  padding: 15px 18px; font: inherit; font-size: 14.5px;
}
.cp-inp:focus { outline: none; }
.cp-inp::placeholder { color: #55617a; }
.cp-list { max-height: 320px; overflow-y: auto; }
.cp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 10px 18px; background: none; border: none;
  cursor: pointer; font: inherit; font-size: 13px; text-align: start;
  color: var(--text-secondary, #8892a4);
}
.cp-row:hover, .cp-row.on { background: rgba(212, 175, 55, .14); color: var(--text-primary, #e8edf7); }
.cp-label { flex: 1; }
.cp-hint { font-size: 10.5px; opacity: .65; white-space: nowrap; }
.cp-empty { padding: 20px; text-align: center; color: var(--text-muted, #6d788d); font-size: 12.5px; }
.cp-foot {
  padding: 9px 18px; font-size: 10.5px; color: var(--text-muted, #6d788d);
  border-top: 1px solid var(--border, #1e2a3d);
}
.light-theme .cp-box { background: #fff; border-color: rgba(8, 40, 60, .16); }
.light-theme .cp-inp { color: var(--text-primary); border-bottom-color: rgba(8, 40, 60, .12); }
.light-theme .cp-row:hover, .light-theme .cp-row.on { background: rgba(184, 121, 28, .12); }