/* === Layer 1: Dark theme variables (default) === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #05090f; --surface: #0d1421; --surface-2: #131d2e; --surface-3: #18253a;
  --border: #1c2a3e; --border-2: #253650;
  --text: #dde6f5; --text-2: #9ab0cc; --muted: #5a7090;
  --accent: #3b9eff; --accent-dim: #1a3d6b;
  --bullish: #20d4a0; --bullish-dim: rgba(32,212,160,.14);
  --bearish: #ff5f5f; --bearish-dim: rgba(255,95,95,.14);
  --cautious: #f5a623; --cautious-dim: rgba(245,166,35,.14);
  --cautious-bull: #a3d977; --cautious-bear: #ff8a65;
  --neutral: #6b82a0; --neutral-dim: rgba(107,130,160,.14);
  --lime: #8bc34a;
  --spotlight: #a67dff; --spotlight-dim: rgba(166,125,255,.14);
  --font: 'Outfit', sans-serif; --mono: 'JetBrains Mono', monospace;
  --shadow: 0 8px 24px rgba(0,0,0,0.4);
  --nav-bg: rgba(5,9,15,0.85);
  --body-glow: #0d2447;
  --overlay-bg: rgba(0,0,0,.65);
  --arc-turning-bg: #1a1400; --arc-turning-border: #3d2e00; --arc-turning-accent: #e3b341;
}
/* === Layer 2: Light theme variable overrides === */
html[data-theme="light"] {
  --bg: #f6f2ed; --surface: #ffffff; --surface-2: #f0ebe4; --surface-3: #e9e3db;
  --border: #e8e2d9; --border-2: #d9d0c5;
  --text: #2d2a24; --text-2: #5a5550; --muted: #8a8078;
  --accent: #2b7fd4; --accent-dim: #dceaf7;
  --bullish-dim: rgba(32,212,160,.10);
  --bearish-dim: rgba(255,95,95,.10);
  --cautious-dim: rgba(245,166,35,.10);
  --neutral: #5a6b80; --neutral-dim: rgba(90,107,128,.10);
  --spotlight: #7c5cbf; --spotlight-dim: rgba(124,92,191,.10);
  --shadow: 0 8px 24px rgba(150,140,130,0.12);
  --nav-bg: rgba(246,242,237,0.92);
  --body-glow: rgba(200,185,165,0.08);
  --overlay-bg: rgba(100,90,80,.45);
  --arc-turning-bg: #fdf6e3; --arc-turning-border: #e8d9a0; --arc-turning-accent: #b8860b;
}
html { background: var(--bg); color: var(--text); font-family: var(--font); }

/* === Layer 3: Shared structural CSS === */

/* --- Nav --- */
nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 40px; height: 56px; border-bottom: 1px solid var(--border); background: var(--nav-bg); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 100; }
.nav-brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: .08em; color: var(--text); text-decoration: none; }
.nav-brand-text { color: var(--text); }
.nav-brand-text span { color: var(--accent); }
.nav-brand-logo { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); transition: border-color .2s ease; }
.nav-brand:hover .nav-brand-logo { border-color: var(--accent); }
.nav-center { display: flex; gap: 2px; justify-content: center; }
.nav-right { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.nav-center a, .nav-links a { padding: 5px 14px; border-radius: 6px; font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; transition: all .15s; }
.nav-center a:hover, .nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-center a.active, .nav-links a.active { color: var(--accent); background: var(--accent-dim); }
.nav-center a.nav-alert-hot, .nav-links a.nav-alert-hot { color: var(--bearish); position: relative; }
.nav-center a.nav-alert-hot::after, .nav-links a.nav-alert-hot::after { content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; background: var(--bearish); border-radius: 50%; animation: alert-pulse 2s ease-in-out infinite; }
@keyframes alert-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.4); } }

/* --- Nav dropdown --- */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-dropdown-trigger { padding: 5px 14px; border-radius: 6px; font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; transition: all .15s; }
.nav-dropdown:hover .nav-dropdown-trigger { color: var(--text); background: var(--surface-2); }
.nav-dropdown.active .nav-dropdown-trigger { color: var(--accent); background: var(--accent-dim); }
.nav-dropdown-caret { color: var(--muted); font-size: 10px; margin-left: 2px; transition: transform .15s; pointer-events: none; }
.nav-dropdown:hover .nav-dropdown-caret, .nav-dropdown.open .nav-dropdown-caret { color: var(--text); transform: rotate(180deg); }
.nav-dropdown.active .nav-dropdown-caret { color: var(--accent); }
.nav-dropdown-menu { display: none; position: fixed; min-width: 160px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 4px 4px 4px; box-shadow: var(--shadow); z-index: 200; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a { display: block; padding: 8px 14px; border-radius: 5px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap; transition: all .12s; }
.nav-dropdown-menu a:hover { color: var(--text); background: var(--surface-2); }
.nav-dropdown-menu a.active { color: var(--accent); background: var(--accent-dim); }
@media (hover: none) { .nav-dropdown:hover .nav-dropdown-menu { display: none; } .nav-dropdown.open .nav-dropdown-menu { display: block; } }

/* --- Lang toggle --- */
.lang-toggle { display: flex; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.lang-btn { font-family: var(--mono); font-size: 11px; padding: 4px 9px; cursor: pointer; color: var(--muted); background: none; border: none; transition: all .15s; user-select: none; }
.lang-btn:hover { color: var(--text); }
.lang-btn.active { color: var(--accent); background: var(--accent-dim); }
.lang-sep { color: var(--border); font-size: 11px; }

/* --- Theme toggle button --- */
.theme-btn { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: pointer; font-size: 16px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; transition: all .15s; user-select: none; flex-shrink: 0; }
.theme-btn:hover { color: var(--text); border-color: var(--border-2); }

/* --- Color mode toggle button (红涨绿跌) --- */
.color-btn { background: none; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 13px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 1px; transition: all .15s; user-select: none; flex-shrink: 0; line-height: 1; }
.color-btn:hover { border-color: var(--border-2); }
.cb-up { color: var(--bullish); }
.cb-dn { color: var(--bearish); }

/* === Layer 2b: Color inversion (红涨绿跌) === */
html[data-color="inverted"] {
  --bullish: #ff5f5f; --bullish-dim: rgba(255,95,95,.14);
  --bearish: #20d4a0; --bearish-dim: rgba(32,212,160,.14);
  --cautious-bull: #ff8a65; --cautious-bear: #a3d977;
}
html[data-color="inverted"][data-theme="light"] {
  --bullish-dim: rgba(255,95,95,.10);
  --bearish-dim: rgba(32,212,160,.10);
}

/* --- Footer --- */
.site-footer { max-width: 1280px; margin: 60px auto 32px; padding: 20px 40px 0; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.site-footer a { color: var(--muted); text-decoration: none; border-bottom: 1px dashed var(--border); }
.site-footer a:hover { color: var(--text); border-bottom-color: var(--text); }
.site-footer .sep { opacity: .5; }

/* --- Light mode overrides for page elements --- */
html[data-theme="light"] .today-pulse { border-color: rgba(0,0,0,0.15); }
html[data-theme="light"] .evidence-section { background: rgba(0,0,0,.04); box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
html[data-theme="light"] .evidence-section .macro-card { box-shadow: 0 1px 4px rgba(0,0,0,.06); }
html[data-theme="light"] .evidence-section .macro-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }

/* rgba(255,255,255,...) backgrounds invisible on white — flip to rgba(0,0,0,...) */
html[data-theme="light"] .e-day-badge { background: rgba(0,0,0,.05); }
html[data-theme="light"] .e-tab { background: rgba(0,0,0,.04); }
html[data-theme="light"] .e-tab:hover { background: rgba(0,0,0,.07); }
html[data-theme="light"] .e-tab.active { background: var(--accent-dim); border-color: rgba(43,127,212,.3); }
html[data-theme="light"] .hot-tab.active { color: var(--accent); background: var(--accent-dim); box-shadow: inset 0 0 0 1px rgba(43,127,212,.5); }
html[data-theme="light"] a.arc-bar-cell:hover { background: rgba(0,0,0,.03); }
html[data-theme="light"] .macro-strip .cell { box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04); }
html[data-theme="light"] .macro-strip .cell:hover { box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.06); }
html[data-theme="light"] .feed-marquee { background: linear-gradient(90deg, rgba(200,185,165,0.08), rgba(200,185,165,0.04)); }
html[data-theme="light"] .detail-link-secondary { color: var(--accent); }
html[data-theme="light"] .detail-link-primary { box-shadow: 0 2px 10px rgba(43,127,212,.18); }
html[data-theme="light"] .detail-link-primary:hover { box-shadow: 0 4px 16px rgba(43,127,212,.28); }
html[data-theme="light"] .thesis-modal { box-shadow: 0 20px 60px rgba(0,0,0,.12); }
html[data-theme="light"] .e-card { background: linear-gradient(180deg, rgba(43,127,212,.03) 0%, var(--surface) 70%); box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.03); }
html[data-theme="light"] .tldr-callout { border-left-color: var(--accent); }

/* Cards need stronger definition on light bg (surface ≈ bg, both near-white) */
html[data-theme="light"] .top-card,
html[data-theme="light"] .thesis-evo-card,
html[data-theme="light"] .detail-card,
html[data-theme="light"] .alert-card,
html[data-theme="light"] .event-card,
html[data-theme="light"] .card,
html[data-theme="light"] .hero-card,
html[data-theme="light"] .report-card,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .msg-form,
html[data-theme="light"] .video-card,
html[data-theme="light"] .hero-channel,
html[data-theme="light"] .step-card,
html[data-theme="light"] .learn-card,
html[data-theme="light"] .warning-card,
html[data-theme="light"] .stance-item,
html[data-theme="light"] .post-card,
html[data-theme="light"] .reply-form-box,
html[data-theme="light"] .modal-box,
html[data-theme="light"] .article-card,
html[data-theme="light"] .source-item,
html[data-theme="light"] .chart-card { box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.03); border-color: #ddd5ca; }
html[data-theme="light"] .top-card:hover,
html[data-theme="light"] .thesis-evo-card:hover,
html[data-theme="light"] .detail-card:hover,
html[data-theme="light"] .alert-card:hover,
html[data-theme="light"] .event-card:hover,
html[data-theme="light"] .card:hover,
html[data-theme="light"] .hero-card:hover,
html[data-theme="light"] .report-card:hover,
html[data-theme="light"] .contact-card:hover,
html[data-theme="light"] .video-card:hover,
html[data-theme="light"] .step-card:hover,
html[data-theme="light"] .post-card:hover,
html[data-theme="light"] .article-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.05); border-color: #cfc7bc; }
html[data-theme="light"] .arc-bar { border-color: #ddd5ca; }
html[data-theme="light"] .header-evo-btn,
html[data-theme="light"] .header-today-btn,
html[data-theme="light"] .detail-link-primary { box-shadow: 0 2px 10px rgba(43,127,212,.18); }
html[data-theme="light"] .header-evo-btn:hover,
html[data-theme="light"] .header-today-btn:hover,
html[data-theme="light"] .detail-link-primary:hover { box-shadow: 0 4px 16px rgba(43,127,212,.28); }
html[data-theme="light"] .hero-card { background: var(--surface); }
html[data-theme="light"] .snapshot-bar { border: 1px solid var(--border); }
html[data-theme="light"] .dr-link { box-shadow: 0 1px 3px rgba(0,0,0,.04); }
html[data-theme="light"] .watch-callout { background: rgba(240,136,62,.04); }
html[data-theme="light"] .evt-modal { box-shadow: 0 12px 40px rgba(0,0,0,.12); }
html[data-theme="light"] .modal-overlay { background: var(--overlay-bg); }
html[data-theme="light"] .modal-box { box-shadow: 0 12px 40px rgba(0,0,0,.12); }
html[data-theme="light"] .warning-card { background: rgba(255,95,95,.03); border-color: rgba(255,95,95,.15); }
html[data-theme="light"] .nick-bar { background: rgba(43,127,212,.04); border-color: rgba(43,127,212,.15); }
html[data-theme="light"] .article-lede { background: rgba(43,127,212,.04); border-color: rgba(43,127,212,.1); }
html[data-theme="light"] .video-modal { background: var(--overlay-bg); }
html[data-theme="light"] .nav-sub { background: rgba(246,242,237,0.85); }
html[data-theme="light"] .gauge-wrap { border-bottom-color: var(--border); }

/* --- Hamburger button (hidden on desktop) --- */
.nav-hamburger { display: none; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: pointer; font-size: 20px; width: 36px; height: 36px; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; line-height: 1; }
.nav-hamburger:hover { color: var(--text); border-color: var(--border-2); }

/* --- Mobile menu overlay --- */
.nav-mobile-overlay { display: none; position: fixed; inset: 0; top: 56px; background: var(--bg); z-index: 99; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px 32px; }
.nav-mobile-overlay.open { display: block; }
.nav-mobile-overlay a { display: block; padding: 12px 14px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--text-2); text-decoration: none; transition: all .12s; }
.nav-mobile-overlay a:hover, .nav-mobile-overlay a:active { color: var(--text); background: var(--surface-2); }
.nav-mobile-overlay a.active { color: var(--accent); background: var(--accent-dim); }
.nav-mobile-overlay .nav-m-sub { padding-left: 32px; font-size: 14px; color: var(--muted); }
.nav-mobile-overlay .nav-m-sub:hover, .nav-mobile-overlay .nav-m-sub:active { color: var(--text-2); }
.nav-mobile-overlay .nav-m-divider { height: 1px; background: var(--border); margin: 8px 14px; }
.nav-mobile-overlay .nav-m-controls { display: flex; align-items: center; gap: 10px; padding: 16px 14px 4px; }

/* --- Responsive nav (768px) --- */
@media (max-width: 768px) {
  nav { grid-template-columns: auto 1fr auto; padding: 0 10px; gap: 6px; }
  .nav-brand { font-size: 13px; white-space: nowrap; gap: 6px; }
  .nav-brand-logo { width: 28px; height: 28px; }
  .nav-center { display: none; }
  .nav-right { gap: 8px; }
  .nav-hamburger { display: flex; }
}

/* --- Responsive nav (480px) --- */
@media (max-width: 480px) {
  .nav-brand { font-size: 12px; gap: 5px; }
  .nav-brand-logo { width: 24px; height: 24px; }
  .nav-mobile-overlay a { font-size: 14px; padding: 11px 12px; }
  .nav-mobile-overlay .nav-m-sub { font-size: 13px; }
}