@import url('https://fonts.googleapis.com/css2?family=Russo+One&family=Exo+2:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg:         #0C0808;
  --bg-2:       #110D0D;
  --bg-3:       #171010;
  --bg-4:       #1F1515;
  --bg-5:       #271A1A;
  --border:     rgba(255,80,60,0.08);
  --border-2:   rgba(255,80,60,0.18);
  --accent:     #E8341A;
  --accent-dim: rgba(232,52,26,0.12);
  --accent-2:   #C4200D;
  --gold:       #D4A017;
  --gold-dim:   rgba(212,160,23,0.12);
  --text:       #F0E8E8;
  --text-dim:   #6B5A5A;
  --text-mid:   #9C8080;
  --sidebar-w:       248px;
  --sidebar-w-col:   60px;
  --topbar-h:        56px;
  --mobile-header-h: 52px;
  --radius:          6px;
  --radius-lg:       10px;
  --radius-xl:       14px;
  --shadow:    0 4px 24px rgba(0,0,0,0.6);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.75);
  --shadow-red: 0 0 32px rgba(232,52,26,0.2);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Exo 2', 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; transition: opacity 0.15s; }
a:hover { opacity: 0.8; text-decoration: underline; }
code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  background: var(--bg-5);
  color: var(--gold);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-2);
}
h1, h2, h3 { font-family: 'Russo One', sans-serif; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; }
b, strong   { font-weight: 600; color: var(--text); }
::-webkit-scrollbar               { width: 4px; height: 4px; }
::-webkit-scrollbar-track         { background: transparent; }
::-webkit-scrollbar-thumb         { background: rgba(232,52,26,0.25); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover   { background: rgba(232,52,26,0.45); }
* { scrollbar-width: thin; scrollbar-color: rgba(232,52,26,0.25) transparent; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slide-right {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes ember-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(232,52,26,0.35), 0 0 40px rgba(232,52,26,0.1); }
  50%       { box-shadow: 0 0 28px rgba(232,52,26,0.55), 0 0 60px rgba(232,52,26,0.18); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}