@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');:root{--overlay-bg:rgba(0,0,0,0.75);--text-primary:#ffffff;--text-secondary:rgba(255,255,255,0.85);--text-tertiary:rgba(255,255,255,0.65);--glass-bg:rgba(20,20,20,0.4);--glass-bg-strong:rgba(10,10,10,0.85);--glass-border:rgba(255,255,255,0.08);--card-hover:rgba(30,30,30,0.5);--chart-opacity:0.2}
[data-theme="light"]{--overlay-bg:rgba(255,255,255,0.82);--text-primary:#1a1a1a;--text-secondary:rgba(0,0,0,0.55);--text-tertiary:rgba(0,0,0,0.35);--glass-bg:rgba(255,255,255,0.65);--glass-bg-strong:rgba(255,255,255,0.85);--glass-border:rgba(0,0,0,0.08);--card-hover:rgba(255,255,255,0.8);--chart-opacity:0.15}
*{font-family:'ZCOOL KuaiLe',sans-serif;margin:0;padding:0;box-sizing:border-box}
.dynamic-bg{background-size:cover;background-position:center;background-attachment:fixed}
.theme-overlay{background:var(--overlay-bg);transition:background 0.5s ease}
.glass{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border)}
.glass-strong{background:var(--glass-bg-strong);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--glass-border)}
.glow-text{color:var(--text-primary);font-weight:800;letter-spacing:0.02em;text-rendering:optimizeLegibility;text-shadow:0 0 20px rgba(128,128,128,0.3)}
[data-theme="light"] .glow-text{text-shadow:0 0 10px rgba(0,0,0,0.1)}
.text-theme-primary{color:var(--text-primary)}
.text-theme-secondary{color:var(--text-secondary)}
.text-theme-tertiary{color:var(--text-tertiary)}
.bg-theme-glass{background:var(--glass-bg)}
.border-theme-glass{border-color:var(--glass-border)}
.api-card{transform:translateZ(0);transition:all 0.2s ease-out;will-change:transform;color:var(--text-primary)}
.api-card:hover{transform:translateY(-2px) translateZ(0);background:var(--card-hover);border-color:var(--glass-border)}
.stat-value{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-0.01em}
.theme-icon{transition:transform 0.3s ease,opacity 0.3s ease}
.theme-icon.hidden{opacity:0;transform:rotate(90deg) scale(0.5);position:absolute}
.theme-icon.active{opacity:1;transform:rotate(0) scale(1);position:relative}
.mobile-menu{transition:opacity 0.3s cubic-bezier(0.4,0,0.2,1),transform 0.3s cubic-bezier(0.4,0,0.2,1),visibility 0.3s;visibility:hidden;opacity:0;transform:scale(0.95) translateY(-10px)}
.mobile-menu.visible{visibility:visible;opacity:1;transform:scale(1) translateY(0)}
.menu-arrow{position:absolute;top:-6px;right:12px;width:12px;height:12px;background:var(--glass-bg-strong);border-left:1px solid var(--glass-border);border-top:1px solid var(--glass-border);transform:rotate(45deg)}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:2px}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
pre{background:rgba(0,0,0,0.4) !important;border:1px solid rgba(255,255,255,0.1)}
[data-theme="light"] pre{background:rgba(0,0,0,0.05) !important;border:1px solid rgba(0,0,0,0.1)}
.prose{color:var(--text-secondary)}
.prose strong{color:var(--text-primary)}
a{color:inherit}
button{color:var(--text-primary)}
input{color:var(--text-primary)}
input::placeholder{color:var(--text-tertiary)}


/* Sidebar theme sync: light mode stays readable, dark mode keeps glass style. */
#sidebar {
  background: var(--glass-bg-strong) !important;
  border-right: 1px solid var(--glass-border) !important;
  color: var(--text-primary) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
#sidebar > div,
#sidebar .flex-1,
#sidebar .h-16 {
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
}
#sidebar .sidebar-link,
#sidebar .sidebar-link > span:not(.ml-auto),
#sidebar .sidebar-group-header,
#sidebar .sidebar-group-header span,
#sidebar p {
  color: var(--text-secondary) !important;
}
#sidebar .sidebar-link-home,
#sidebar .sidebar-link-home > span:not(.ml-auto) {
  color: var(--text-primary) !important;
}
#sidebar .sidebar-link > span.ml-auto {
  color: #fff !important;
}
#sidebar .sidebar-link:hover,
#sidebar .sidebar-group-header:hover {
  background: var(--card-hover) !important;
  color: var(--text-primary) !important;
}
#sidebar .sidebar-link-home {
  background: linear-gradient(135deg, rgba(96,165,250,.18), rgba(34,211,238,.10)) !important;
  border: 1px solid rgba(96,165,250,.24) !important;
}
#sidebar .sidebar-link > div:first-child {
  background: rgba(96,165,250,.08) !important;
  border: 1px solid rgba(96,165,250,.16) !important;
}
#sidebar .sidebar-link-home > div:first-child {
  background: linear-gradient(135deg, rgba(96,165,250,.28), rgba(34,211,238,.16)) !important;
  color: #60a5fa !important;
  border-color: rgba(34,211,238,.28) !important;
}
#sidebar-close svg {
  color: var(--text-secondary) !important;
}
#sidebar ::-webkit-scrollbar-thumb {
  background: rgba(96,165,250,.35);
  border-radius: 3px;
}
#sidebar ::-webkit-scrollbar-thumb:hover {
  background: rgba(34,211,238,.48);
}

/* Final hard override for the shared sidebar text. ThemeManager writes data-theme on body. */
body[data-theme="light"] #sidebar span,
body[data-theme="light"] #sidebar p,
body[data-theme="light"] #sidebar button {
  color: rgba(31,41,55,.82) !important;
}
body[data-theme="light"] #sidebar .ml-auto,
body[data-theme="light"] #sidebar .text-white,
body[data-theme="light"] #sidebar span[style*="background"] {
  color: #fff !important;
}
body:not([data-theme="light"]) #sidebar span,
body:not([data-theme="light"]) #sidebar p,
body:not([data-theme="light"]) #sidebar button {
  color: rgba(255,255,255,.82) !important;
}
body:not([data-theme="light"]) #sidebar .ml-auto,
body:not([data-theme="light"]) #sidebar .text-white,
body:not([data-theme="light"]) #sidebar span[style*="background"] {
  color: #fff !important;
}