/*
 * CoinBatmi Pro v16 — Design System
 * Light-first. Editorial clarity. Bloomberg-meets-The-Block.
 * Every token named for intent, not appearance.
 * ─────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════
   GOOGLE FONTS  (2 families only — Instrument Serif + Plus Jakarta Sans)
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — LIGHT MODE (default)
═══════════════════════════════════════════════════════════ */
:root {

  /* ── Typography ──────────────────────────── */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Type Scale (no sub-11px labels in UI) */
  --text-2xs: 11px;   /* micro labels */
  --text-xs:  12px;   /* captions, meta */
  --text-sm:  13px;   /* secondary text */
  --text-base:15px;   /* body copy */
  --text-md:  17px;   /* card intro */
  --text-lg:  20px;   /* sub-headlines */
  --text-xl:  24px;   /* section titles */
  --text-2xl: 32px;   /* page headlines */
  --text-3xl: 42px;   /* hero */
  --text-4xl: clamp(36px, 5vw, 60px);

  /* ── Surface / Background ─────────────────── */
  --bg-canvas:   #f7f8fa;      /* page background */
  --bg-white:    #ffffff;      /* card surface */
  --bg-subtle:   #f2f4f7;      /* inset panels, alt rows */
  --bg-muted:    #eaecf1;      /* borders, dividers */
  --bg-overlay:  rgba(10,14,26,.55); /* modal backdrop */

  /* ── Text ─────────────────────────────────── */
  --text-primary:   #0d1117;   /* headings, prices */
  --text-secondary: #3d4a5c;   /* body copy */
  --text-muted:     #6b7a90;   /* labels, captions */
  --text-faint:     #9baab8;   /* placeholder, disabled */
  --text-inverse:   #ffffff;

  /* ── Accent — Sky Blue (trust + tech) ────── */
  --accent:       #0284c7;
  --accent-hover: #0369a1;
  --accent-light: #e0f2fe;
  --accent-mid:   rgba(2, 132, 199, .12);
  --accent-border:rgba(2, 132, 199, .25);
  --accent-glow:  rgba(2, 132, 199, .18);

  /* ── Market Colors ────────────────────────── */
  --bull:        #059669;   /* green — price up */
  --bull-light:  #d1fae5;
  --bull-mid:    rgba(5, 150, 105, .10);
  --bear:        #dc2626;   /* red — price down */
  --bear-light:  #fee2e2;
  --bear-mid:    rgba(220, 38, 38, .10);
  --neut:        #d97706;   /* amber — neutral */
  --neut-light:  #fef3c7;
  --bitcoin:     #f7931a;
  --bitcoin-light:#fff3e0;

  /* ── Border ───────────────────────────────── */
  --border:       #dde1e9;
  --border-hover: #c4cad6;
  --border-focus: var(--accent);

  /* ── Shadow ───────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.07);
  --shadow-accent: 0 4px 20px var(--accent-glow);

  /* ── Radius ───────────────────────────────── */
  --r-xs:  4px;
  --r-sm:  6px;
  --r:     8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl:24px;
  --r-full:9999px;

  /* ── Layout ───────────────────────────────── */
  --max-w:    1360px;
  --col-gap:  24px;
  --section-gap: 56px;
  --header-h: 60px;
  --topbar-h: 36px;

  /* ── Motion ───────────────────────────────── */
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --t-fast: 0.15s;
  --t:      0.22s;
  --t-slow: 0.40s;

  /* ── Shorthand Aliases (used by JS inline styles) ── */
  --s2:           var(--bg-subtle);
  --s3:           var(--bg-muted);
  --b1:           var(--border);
  --b2:           var(--border-hover);
  --t1:           var(--text-primary);
  --t2:           var(--text-secondary);
  --t3:           var(--text-muted);
  --t4:           var(--text-faint);
  --hover-bg:     rgba(0, 0, 0, 0.04);
  --bg-glass:     rgba(255, 255, 255, 0.70);
  --border-glass: rgba(0, 0, 0, 0.08);
  --font-m:       var(--font-mono);
  --bg:           var(--bg-canvas);
  --bull-bg:      var(--bull-light);
  --bear-bg:      var(--bear-light);
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-canvas:   #0f1117;
  --bg-white:    #171b24;
  --bg-subtle:   #1c2130;
  --bg-muted:    #242a38;
  --bg-overlay:  rgba(0,0,0,.70);

  --text-primary:   #eef1f6;
  --text-secondary: #9baab8;
  --text-muted:     #6b7a90;
  --text-faint:     #3d4a5c;

  --accent:       #38bdf8;
  --accent-hover: #7dd3fc;
  --accent-light: rgba(56, 189, 248, .08);
  --accent-mid:   rgba(56, 189, 248, .10);
  --accent-border:rgba(56, 189, 248, .20);
  --accent-glow:  rgba(56, 189, 248, .15);

  --bull:        #34d399;
  --bull-light:  rgba(52, 211, 153, .10);
  --bull-mid:    rgba(52, 211, 153, .08);
  --bear:        #f87171;
  --bear-light:  rgba(248, 113, 113, .10);
  --bear-mid:    rgba(248, 113, 113, .08);
  --neut:        #fbbf24;

  --border:       #242a38;
  --border-hover: #2e3648;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.40);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.45);
  --shadow-md: 0 4px 20px rgba(0,0,0,.50);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.60);

  /* ── Dark Shorthand Aliases ──────────────── */
  --hover-bg:     rgba(255, 255, 255, 0.06);
  --bg-glass:     rgba(14, 21, 37, 0.55);
  --border-glass: rgba(255, 255, 255, 0.08);
  --bg:           var(--bg-canvas);
  --bull-bg:      rgba(52, 211, 153, .12);
  --bear-bg:      rgba(248, 113, 113, .12);
}

/* ── Smooth Theme Transition ────────── */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Prefer-color-scheme support */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-canvas:   #0f1117;
    --bg-white:    #171b24;
    --bg-subtle:   #1c2130;
    --bg-muted:    #242a38;
    --text-primary:   #eef1f6;
    --text-secondary: #9baab8;
    --text-muted:     #6b7a90;
    --text-faint:     #3d4a5c;
    --accent:       #38bdf8;
    --accent-hover: #7dd3fc;
    --accent-light: rgba(56, 189, 248, .08);
    --accent-mid:   rgba(56, 189, 248, .10);
    --accent-border:rgba(56, 189, 248, .20);
    --accent-glow:  rgba(56, 189, 248, .15);
    --bull:        #34d399;
    --bull-light:  rgba(52, 211, 153, .10);
    --bear:        #f87171;
    --bear-light:  rgba(248, 113, 113, .10);
    --border:       #242a38;
    --border-hover: #2e3648;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.45);
    --shadow-md: 0 4px 20px rgba(0,0,0,.50);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
  }
}


/* ═══════════════════════════════════════════════════════════
   TRADING INTELLIGENCE — Mobile Overflow Fix
   Prevents horizontal scroll, constrains chart/grid properly
═══════════════════════════════════════════════════════════ */

.intelligence-section { overflow: hidden; }

.intelligence-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .intelligence-grid { grid-template-columns: 1fr 260px; }
}

@media (max-width: 900px) {
  .intelligence-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .chart-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

@media (max-width: 600px) {
  .chart-right { grid-template-columns: 1fr; }
}

.chart-panel {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.chart-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  overflow: hidden;
}

.chart-area {
  width: 100%;
  height: 320px;
  min-height: 260px;
  overflow: hidden;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .chart-area        { height: 240px; min-height: 200px; }
  .chart-toolbar     { flex-wrap: wrap; gap: 4px; }
  .tf-group          { flex-wrap: wrap; }
  .ohlcv-strip       { overflow-x: auto; scrollbar-width: none; }
  .ohlcv-strip::-webkit-scrollbar { display: none; }
  .ta-row            { flex-wrap: wrap; gap: 6px; }
  .ta-ind            { min-width: calc(33% - 6px); }
  .wrt-coin-select   { max-width: 140px; font-size: 11px; }
  .chart-right       { gap: 8px; }
  .top10-widget      { max-height: 280px; }
}

/* Prevent TradingView iframe from breaking out of container */
#tradingview-chart-wrapper,
#tradingview-chart-wrapper iframe,
.ti-widget-shell--chart {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
/* ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   TRADING INTELLIGENCE — Mobile Overflow Fix
   Prevents horizontal scroll, constrains chart/grid properly
═══════════════════════════════════════════════════════════ */

.intelligence-section { overflow: hidden; }

.intelligence-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .intelligence-grid { grid-template-columns: 1fr 260px; }
}

@media (max-width: 900px) {
  .intelligence-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .chart-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

@media (max-width: 600px) {
  .chart-right { grid-template-columns: 1fr; }
}

.chart-panel {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.chart-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  overflow: hidden;
}

.chart-area {
  width: 100%;
  height: 320px;
  min-height: 260px;
  overflow: hidden;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .chart-area        { height: 240px; min-height: 200px; }
  .chart-toolbar     { flex-wrap: wrap; gap: 4px; }
  .tf-group          { flex-wrap: wrap; }
  .ohlcv-strip       { overflow-x: auto; scrollbar-width: none; }
  .ohlcv-strip::-webkit-scrollbar { display: none; }
  .ta-row            { flex-wrap: wrap; gap: 6px; }
  .ta-ind            { min-width: calc(33% - 6px); }
  .wrt-coin-select   { max-width: 140px; font-size: 11px; }
  .chart-right       { gap: 8px; }
  .top10-widget      { max-height: 280px; }
}

/* Prevent TradingView iframe from breaking out of container */
#tradingview-chart-wrapper,
#tradingview-chart-wrapper iframe,
.ti-widget-shell--chart {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
/* ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   TRADING INTELLIGENCE — Mobile Overflow Fix
═══════════════════════════════════════════════════════════ */
.intelligence-section{overflow:hidden}
.intelligence-grid{display:grid;grid-template-columns:1fr 300px;gap:16px;min-width:0;width:100%;box-sizing:border-box}
@media(max-width:1100px){.intelligence-grid{grid-template-columns:1fr 260px}}
@media(max-width:900px){.intelligence-grid{grid-template-columns:1fr;gap:12px}.chart-right{display:grid;grid-template-columns:1fr 1fr;gap:10px}}
@media(max-width:600px){.chart-right{grid-template-columns:1fr}.chart-area{height:240px;min-height:200px}.chart-toolbar{flex-wrap:wrap;gap:4px}.tf-group{flex-wrap:wrap}.ohlcv-strip{overflow-x:auto;scrollbar-width:none}.ta-row{flex-wrap:wrap;gap:6px}.ta-ind{min-width:calc(33% - 6px)}.wrt-coin-select{max-width:140px;font-size:11px}.top10-widget{max-height:280px}}
.chart-panel{min-width:0;width:100%;overflow:hidden;box-sizing:border-box}
.chart-area{width:100%;height:320px;overflow:hidden;box-sizing:border-box}
#tradingview-chart-wrapper,#tradingview-chart-wrapper iframe,.ti-widget-shell--chart{width:100%!important;max-width:100%!important;overflow:hidden!important}
/* ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   TRADINGVIEW CHART HEIGHT FIX v2
═══════════════════════════════════════════════════════════ */
.chart-area {
  height: 420px !important;
  min-height: 420px !important;
  position: relative !important;
  overflow: hidden !important;
}
.ti-widget-shell,
.ti-widget-shell--chart {
  display: block !important;
  width: 100% !important;
  height: 420px !important;
}
.ti-widget-skeleton {
  display: none !important;
}
#tradingview-chart-wrapper {
  width: 100% !important;
  height: 420px !important;
}
#tradingview-chart-wrapper iframe {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
@media (max-width: 600px) {
  .chart-area,
  .ti-widget-shell,
  .ti-widget-shell--chart,
  #tradingview-chart-wrapper {
    height: 280px !important;
    min-height: 280px !important;
  }
}
/* ═══════════════════════════════════════════════════════════ */