/* ==========================================================================
   Cryptoscan24 — Theme System
   --------------------------------------------------------------------------
   Loaded AFTER design.css on every page. The default "Terminal" dark theme
   lives in design.css :root and needs no attribute. Every other theme is a
   [data-theme="..."] override of the same custom properties, so one switch
   re-skins the entire site. theme.js sets <html data-theme> from the signed-
   in user's saved preference (or localStorage for guests) and draws the
   floating switcher.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · DAYLIGHT — clean bright professional, Bloomberg-terminal light
   -------------------------------------------------------------------------- */
[data-theme="daylight"] {
  color-scheme: light;
  --bg:        #F4F6FA;
  --bg2:       #EAEEF5;
  --panel:     #FFFFFF;
  --panel2:    #F0F3F9;
  --border:    #D9E0EC;
  --border2:   #C0CBDD;
  --rule-soft: #E4E9F2;

  --text:      #131A2A;
  --muted:     #5A6780;
  --dim:       #8B96AC;

  --green:     #0B9D6C;
  --green-dim: #0A8A5F;
  --red:       #DF2B4A;
  --red-dim:   #C62440;

  --accent:      #D97706;
  --accent-ink:  #B45309;
  --accent2:     #0E7490;
  --purple:      #6D5BE0;

  --spike1: rgba(19, 26, 42, 0.04);
  --spike2: rgba(223, 43, 74, 0.10);
  --glow-green: 0 0 12px rgba(11, 157, 108, 0.30);

  --card:  var(--panel);
  --raised: var(--panel2);
  --rule:  var(--border);
  --body:  #3A465E;
  --link:  var(--accent-ink);
  --brand: var(--accent);

  --bg-glow1: rgba(109, 91, 224, .06);
  --bg-glow2: rgba(14, 116, 144, .05);
  --nav-bg: rgba(255, 255, 255, .88);
  --btn-hover: #E2E8F2;
  --shadow-sm: 0 1px 2px rgba(19,26,42,.06), 0 1px 6px rgba(19,26,42,.05);
  --shadow-md: 0 4px 14px rgba(19,26,42,.08), 0 1px 4px rgba(19,26,42,.06);
  --shadow-lg: 0 12px 36px rgba(19,26,42,.12), 0 2px 8px rgba(19,26,42,.08);
}

/* --------------------------------------------------------------------------
   2 · NEON — cyberpunk: hot magenta / cyan / lime on near-black violet
   -------------------------------------------------------------------------- */
[data-theme="neon"] {
  color-scheme: dark;
  --bg:        #07030F;
  --bg2:       #0B0618;
  --panel:     #120A24;
  --panel2:    #1A0F32;
  --border:    #2C1B52;
  --border2:   #40256E;
  --rule-soft: #1E1238;

  --text:      #F4ECFF;
  --muted:     #A48FCB;
  --dim:       #77639B;

  --green:     #00FFC8;
  --green-dim: #00DCA9;
  --red:       #FF3D81;
  --red-dim:   #E03570;

  --accent:      #E4FF2E;
  --accent-ink:  #D7F94A;
  --accent2:     #00E5FF;
  --purple:      #B967FF;

  --spike1: rgba(185, 103, 255, 0.07);
  --spike2: rgba(255, 61, 129, 0.18);
  --glow-green: 0 0 14px rgba(0, 255, 200, 0.55);

  --card:  var(--panel);
  --raised: var(--panel2);
  --rule:  var(--border);
  --body:  #CBBCE8;
  --link:  var(--accent2);
  --brand: var(--accent);

  --bg-glow1: rgba(185, 103, 255, .12);
  --bg-glow2: rgba(0, 229, 255, .08);
  --nav-bg: rgba(7, 3, 15, .88);
  --btn-hover: #241543;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 1px 8px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.5);
}

/* --------------------------------------------------------------------------
   3 · OCEAN — deep-sea trading desk: abyss blue, ice cyan accents
   -------------------------------------------------------------------------- */
[data-theme="ocean"] {
  color-scheme: dark;
  --bg:        #04121D;
  --bg2:       #071A29;
  --panel:     #0A2334;
  --panel2:    #0E2D44;
  --border:    #15415D;
  --border2:   #1D5679;
  --rule-soft: #10334A;

  --text:      #E7F5FC;
  --muted:     #82A9C0;
  --dim:       #5E8299;

  --green:     #2FE6B8;
  --green-dim: #28C9A1;
  --red:       #FF6E7E;
  --red-dim:   #E05F6F;

  --accent:      #38BDF8;
  --accent-ink:  #7CD4FB;
  --accent2:     #22D3EE;
  --purple:      #818CF8;

  --spike1: rgba(56, 189, 248, 0.06);
  --spike2: rgba(255, 110, 126, 0.15);
  --glow-green: 0 0 12px rgba(47, 230, 184, 0.45);

  --card:  var(--panel);
  --raised: var(--panel2);
  --rule:  var(--border);
  --body:  #B9D4E2;
  --link:  var(--accent-ink);
  --brand: var(--accent);

  --bg-glow1: rgba(56, 189, 248, .10);
  --bg-glow2: rgba(34, 211, 238, .07);
  --nav-bg: rgba(4, 18, 29, .88);
  --btn-hover: #123B57;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 8px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.45);
}

/* --------------------------------------------------------------------------
   4 · SUNSET — warm dusk: espresso plum base, ember amber, rose pink
   -------------------------------------------------------------------------- */
[data-theme="sunset"] {
  color-scheme: dark;
  --bg:        #160A10;
  --bg2:       #1D0E15;
  --panel:     #26131C;
  --panel2:    #311924;
  --border:    #46232F;
  --border2:   #5D2F40;
  --rule-soft: #371C27;

  --text:      #FBEFF1;
  --muted:     #C79AA4;
  --dim:       #99707A;

  --green:     #3DDC97;
  --green-dim: #34BE84;
  --red:       #FF5C6C;
  --red-dim:   #E0505F;

  --accent:      #FF8A3D;
  --accent-ink:  #FFB27A;
  --accent2:     #F472B6;
  --purple:      #C084FC;

  --spike1: rgba(255, 138, 61, 0.06);
  --spike2: rgba(255, 92, 108, 0.16);
  --glow-green: 0 0 12px rgba(61, 220, 151, 0.40);

  --card:  var(--panel);
  --raised: var(--panel2);
  --rule:  var(--border);
  --body:  #E3C9CE;
  --link:  var(--accent-ink);
  --brand: var(--accent);

  --bg-glow1: rgba(255, 138, 61, .10);
  --bg-glow2: rgba(244, 114, 182, .07);
  --nav-bg: rgba(22, 10, 16, .88);
  --btn-hover: #3C1F2C;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 8px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.45);
}

/* --------------------------------------------------------------------------
   5 · FOREST — quiet emerald terminal, moss and mint
   -------------------------------------------------------------------------- */
[data-theme="forest"] {
  color-scheme: dark;
  --bg:        #07110C;
  --bg2:       #0A1811;
  --panel:     #0F2118;
  --panel2:    #142B20;
  --border:    #1F4231;
  --border2:   #2A5742;
  --rule-soft: #183426;

  --text:      #ECF7F0;
  --muted:     #8FB5A2;
  --dim:       #68897A;

  --green:     #4ADE80;
  --green-dim: #3EC46F;
  --red:       #FB7185;
  --red-dim:   #E06476;

  --accent:      #A3E635;
  --accent-ink:  #C3F26B;
  --accent2:     #2DD4BF;
  --purple:      #A78BFA;

  --spike1: rgba(163, 230, 53, 0.05);
  --spike2: rgba(251, 113, 133, 0.14);
  --glow-green: 0 0 12px rgba(74, 222, 128, 0.40);

  --card:  var(--panel);
  --raised: var(--panel2);
  --rule:  var(--border);
  --body:  #C4DCCF;
  --link:  var(--accent-ink);
  --brand: var(--accent);

  --bg-glow1: rgba(163, 230, 53, .07);
  --bg-glow2: rgba(45, 212, 191, .06);
  --nav-bg: rgba(7, 17, 12, .88);
  --btn-hover: #1A382A;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 8px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.45);
}

/* --------------------------------------------------------------------------
   6 · GRAPHITE — neutral charcoal, one cool blue accent, no tint in the greys
   -------------------------------------------------------------------------- */
[data-theme="graphite"] {
  color-scheme: dark;
  --bg:        #0E0F11;
  --bg2:       #121316;
  --panel:     #16181C;
  --panel2:    #1C1F24;
  --border:    #272A31;
  --border2:   #353943;
  --rule-soft: #1F2227;

  --text:      #ECEDEF;
  --muted:     #A0A5AE;
  --dim:       #737882;

  --green:     #2EBD85;
  --green-dim: #27A574;
  --red:       #F6465D;
  --red-dim:   #D93C51;

  --accent:      #5B9BFF;
  --accent-ink:  #8DB8FF;
  --accent2:     #9AA4B2;
  --purple:      #5B9BFF;

  --spike1: rgba(91, 155, 255, 0.05);
  --spike2: rgba(246, 70, 93, 0.13);
  --glow-green: 0 0 12px rgba(46, 189, 133, 0.35);

  --card:  var(--panel);
  --raised: var(--panel2);
  --rule:  var(--border);
  --body:  #C9CCD2;
  --link:  var(--accent-ink);
  --brand: var(--accent);

  --bg-glow1: rgba(91, 155, 255, .045);
  --bg-glow2: rgba(255, 255, 255, .02);
  --nav-bg: rgba(14, 15, 17, .9);
  --btn-hover: #23262D;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 8px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.45);
}

/* --------------------------------------------------------------------------
   Theme-aware re-declarations of the few hard-coded values in design.css
   -------------------------------------------------------------------------- */
body {
  background:
    radial-gradient(1100px 500px at 85% -10%, var(--bg-glow1, rgba(139,124,246,.07)), transparent 60%),
    radial-gradient(900px 450px at -10% 0%, var(--bg-glow2, rgba(34,195,214,.05)), transparent 55%),
    var(--bg) !important;
}

.nav { background: var(--nav-bg, rgba(10,13,20,.88)) !important; }

button:hover, .btn:hover { background: var(--btn-hover, #1C2337); }

/* Keep the amber sign-in button readable on light themes */

/* --------------------------------------------------------------------------
   Floating theme switcher (drawn by theme.js; hidden in print)
   -------------------------------------------------------------------------- */
#cs-theme-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 99990;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer;
  background: var(--panel2, #171D2E);
  border: 1px solid var(--border2, #2E3852);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.4));
  color: var(--text, #E9EEF8);
  padding: 0; line-height: 1;
}
#cs-theme-fab:hover { border-color: var(--purple, #8B7CF6); }

#cs-theme-panel {
  position: fixed; right: 18px; bottom: 72px; z-index: 99990;
  width: 232px; padding: 14px;
  background: var(--panel, #121724);
  border: 1px solid var(--border2, #2E3852);
  border-radius: 14px;
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,.55));
  display: none;
}
#cs-theme-panel.open { display: block; }
#cs-theme-panel h4 {
  margin: 0 0 10px; font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted, #8E99B0);
}
.cs-theme-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; margin: 2px 0;
  background: transparent; border: 1px solid transparent;
  border-radius: 10px; cursor: pointer;
  color: var(--text, #E9EEF8); font-size: 13px; text-align: left;
}
.cs-theme-opt:hover { background: var(--panel2, #171D2E); }
.cs-theme-opt.on { border-color: var(--purple, #8B7CF6); background: var(--panel2, #171D2E); }
.cs-theme-opt .dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 1px solid rgba(255,255,255,.25);
}
.cs-theme-opt small { margin-left: auto; color: var(--dim, #6B7690); font-size: 11px; }

@media print { #cs-theme-fab, #cs-theme-panel { display: none !important; } }

/* Settings-page grid variant reuses the same option rows */
.cs-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.cs-theme-grid .cs-theme-opt { border: 1px solid var(--border, #232B40); }
.cs-theme-grid .cs-theme-opt.on { border-color: var(--purple, #8B7CF6); }
.cs-theme-grid .cs-theme-opt small { display: none; }

/* --------------------------------------------------------------------------
   home.php token aliases — the landing page predates the shared design system
   and reads --paper/--surface/--ink/--up/etc. Map them per theme so it
   re-skins along with everything else.
   -------------------------------------------------------------------------- */
[data-theme="daylight"] { --paper:#F4F6FA; --surface:#FFFFFF; --raised:#F0F3F9; --rule:#D9E0EC; --rule-soft:#E4E9F2; --ink:#131A2A; --up:#0B9D6C; --down:#DF2B4A; --brand:#D97706; --brand-ink:#FFFFFF; --link:#B45309; }
[data-theme="neon"]     { --paper:#07030F; --surface:#120A24; --raised:#1A0F32; --rule:#2C1B52; --rule-soft:#1E1238; --ink:#F4ECFF; --up:#00FFC8; --down:#FF3D81; --brand:#E4FF2E; --brand-ink:#12100A; --link:#00E5FF; }
[data-theme="ocean"]    { --paper:#04121D; --surface:#0A2334; --raised:#0E2D44; --rule:#15415D; --rule-soft:#10334A; --ink:#E7F5FC; --up:#2FE6B8; --down:#FF6E7E; --brand:#38BDF8; --brand-ink:#04121D; --link:#7CD4FB; }
[data-theme="sunset"]   { --paper:#160A10; --surface:#26131C; --raised:#311924; --rule:#46232F; --rule-soft:#371C27; --ink:#FBEFF1; --up:#3DDC97; --down:#FF5C6C; --brand:#FF8A3D; --brand-ink:#2A1408; --link:#FFB27A; }
[data-theme="forest"]   { --paper:#07110C; --surface:#0F2118; --raised:#142B20; --rule:#1F4231; --rule-soft:#183426; --ink:#ECF7F0; --up:#4ADE80; --down:#FB7185; --brand:#A3E635; --brand-ink:#101B07; --link:#C3F26B; }
[data-theme="graphite"] { --paper:#0E0F11; --surface:#16181C; --raised:#1C1F24; --rule:#272A31; --rule-soft:#1F2227; --ink:#ECEDEF; --up:#2EBD85; --down:#F6465D; --brand:#5B9BFF; --brand-ink:#0B1220; --link:#8DB8FF; }

/* --------------------------------------------------------------------------
   Every theme: the colour names a few pages use outside the shared set, and
   the page styles that hard-code the default navy/amber. Written for Graphite
   on 2026-10-28 and generalised the same day, so the five older themes stop
   showing navy panels and amber bands. The default look (no data-theme) is
   untouched.
   -------------------------------------------------------------------------- */
html[data-theme] {
  --amber: var(--accent); --soft: var(--panel2); --purple-deep: var(--purple); --cyan: var(--accent2);
  --chart-bg: var(--bg2); --chart-text: var(--muted); --chart-grid: var(--rule-soft); --chart-axis: var(--border2);
}
html[data-theme] .cs-cta,
html[data-theme] .btn.primary,
html[data-theme] .nav-cta,
html[data-theme] .btn-1 { background: var(--accent); color: var(--brand-ink, #1a1a1a); }

/* nav, crumbs and footers copied into the static pages */
html[data-theme] .cs-topnav { background: var(--panel); border-bottom-color: var(--border); }
html[data-theme] .cs-brand { color: var(--text); }
html[data-theme] .cs-brand b { color: var(--accent); }
html[data-theme] .tab.active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-ink); border-color: var(--accent); }
html[data-theme] .cs-links a,
html[data-theme] .cs-flinks a,
html[data-theme] .cs-footer p,
html[data-theme] .cs-crumb,
html[data-theme] .cs-crumb a,
html[data-theme] .crumb,
html[data-theme] .crumb a { color: var(--muted); }
html[data-theme] .cs-footer { background: var(--bg); border-top-color: var(--border); }
html[data-theme] .nav { border-bottom-color: var(--border); }
html[data-theme] .card:hover { border-color: var(--border2); }
html[data-theme] body > header { background: var(--panel); }

/* home: the highlighted "where the move starts" columns, blue instead of amber */
html[data-theme] th.band { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 9%, transparent); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
html[data-theme] thead th.fast { background: color-mix(in srgb, var(--accent) 9%, transparent); border-left-color: color-mix(in srgb, var(--accent) 28%, transparent); }
html[data-theme] thead th.fast.end { border-right-color: color-mix(in srgb, var(--accent) 28%, transparent); }
html[data-theme] tbody td.fast { background: color-mix(in srgb, var(--accent) 5%, transparent); border-left-color: color-mix(in srgb, var(--accent) 20%, transparent); }
html[data-theme] tbody td.fast.end { border-right-color: color-mix(in srgb, var(--accent) 20%, transparent); }

/* tracker and pair pages */
html[data-theme] header { background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 85%, transparent), color-mix(in srgb, var(--panel) 60%, transparent)); }
html[data-theme] thead th { background: linear-gradient(180deg, var(--panel2), var(--panel)); }
html[data-theme] .chart-header { background: var(--panel); }   /* the pair band kept the default's dark gradient on light themes */
html[data-theme] tbody tr.selected { background: var(--panel2); }
html[data-theme] .mktbar { border-right-color: var(--border); }
html[data-theme] .mkt-logo { background: linear-gradient(135deg, var(--accent), var(--accent-ink)); box-shadow: none; }
html[data-theme] .mkt-btn.on,
html[data-theme] .iv.active { background: var(--border2); color: var(--text); }
html[data-theme] #csSearchBox { background: var(--panel2); border-color: var(--border); }
html[data-theme] .cs-sr:hover,
html[data-theme] .cs-sr.on { background: var(--panel); }
html[data-theme] .cs-sr .nm { color: var(--muted); }
html[data-theme] .tw-sub-row input { background: var(--bg2); }
html[data-theme] .tw-sub-row button { background: var(--panel2); border-color: var(--border2); color: var(--accent-ink); }
html[data-theme] .dx-row { border-bottom-color: var(--rule-soft); }

/* coin directory and coin pages */
html[data-theme] .site-back { background: var(--panel2); }
html[data-theme] .dirgrid a { background: var(--panel); border-color: var(--border); }
html[data-theme] .dirgrid span,
html[data-theme] .ci-lbl,
html[data-theme] .ci-note { color: var(--muted); }
html[data-theme] .ci-chart { background: var(--panel); border-color: var(--border); }
html[data-theme] .ci-range button { background: var(--panel2); border-color: var(--border); color: var(--text); }
html[data-theme] .ci-range button.on { background: var(--accent); border-color: var(--accent); color: var(--brand-ink, #1a1a1a); }
html[data-theme] .ca-facts li { color: var(--body); background: var(--panel); border-color: var(--border); }
html[data-theme] .ca-quote { background: var(--panel); border-color: var(--border); }
html[data-theme] .ca-quote p { color: var(--body); }
html[data-theme] .ca-quote cite,
html[data-theme] .ca-quote cite a,
html[data-theme] .ca-caveat { color: var(--muted); }

/* panels, sign-in, pricing */
html[data-theme] .btn.alt,
html[data-theme] .note,
html[data-theme] .chan { background: var(--panel); border-color: var(--border); }
html[data-theme] .note { border-left-color: var(--accent); }
html[data-theme] .rel a,
html[data-theme] .chan .hd,
html[data-theme] .chan .ds,
html[data-theme] .wallet-msg { color: var(--muted); }
html[data-theme] .wallet-or { color: var(--dim); }
html[data-theme] .wallet-or::before,
html[data-theme] .wallet-or::after { background: var(--border); }
html[data-theme] .msg.info { color: var(--accent-ink); }
html[data-theme] .free-now-banner { background: var(--panel); }