@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap');

:root {
  --bg-void:      #010A13;
  --bg-dark:      #04111D;
  --bg-base:      #0A1428;
  --bg-surface:   #0D1B2E;
  --bg-card:      #112233;
  --bg-elevated:  #1C3141;
  --bg-hover:     rgba(200,155,60,0.06);
  --gold-1:       #C89B3C;
  --gold-2:       #F0E6D3;
  --gold-3:       #A07840;
  --gold-4:       #785A28;
  --gold-dim:     rgba(200,155,60,0.15);
  --gold-glow:    0 0 20px rgba(200,155,60,0.3);
  --blue:         #3B89D6;
  --blue-light:   #60A8FF;
  --blue-dim:     rgba(59,137,214,0.15);
  --blue-glow:    0 0 20px rgba(59,137,214,0.4);
  --red:          #E84057;
  --red-light:    #FF6070;
  --red-dim:      rgba(232,64,87,0.15);
  --red-glow:     0 0 20px rgba(232,64,87,0.4);
  --purple:       #9B69FF;
  --purple-dim:   rgba(155,105,255,0.15);
  --green:        #0BC4B7;
  --green-bright: #1AFF8C;
  --yellow:       #F5A623;
  --orange:       #E8723A;
  --text-primary:   #F0E6D3;
  --text-secondary: #A09B8C;
  --text-muted:     #5B5A56;
  --border-gold:    rgba(200,155,60,0.3);
  --border-subtle:  rgba(200,155,60,0.12);
  --border-dark:    rgba(255,255,255,0.06);
  --font-title:   'Bebas Neue', serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'DM Mono', monospace;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  --r-sm:3px;--r-md:6px;--r-lg:10px;--r-xl:16px;
  --t-fast:100ms ease;--t-base:200ms ease;--t-slow:400ms ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);background:var(--bg-void);color:var(--text-primary);line-height:1.5;overflow:hidden;height:100vh}
img{display:block;max-width:100%}
a{color:var(--gold-1);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--gold-2)}
button{cursor:pointer;font-family:var(--font-body);border:none;background:none}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-gold);border-radius:2px}

.t-title{font-family:var(--font-title);letter-spacing:2px}
.t-label{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text-secondary)}
.t-mono{font-family:var(--font-mono)}
.t-gold{color:var(--gold-1)}.t-blue{color:var(--blue)}.t-red{color:var(--red)}.t-muted{color:var(--text-muted)}

.flex{display:flex}.flex-col{display:flex;flex-direction:column}
.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-1{gap:var(--sp-1)}.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)}.gap-4{gap:var(--sp-4)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.relative{position:relative}.absolute{position:absolute}

.badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:2px 8px;border-radius:var(--r-sm);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border:1px solid}
.badge-live{color:var(--green-bright);border-color:var(--green);background:rgba(11,196,183,0.1)}
.badge-gold{color:var(--gold-1);border-color:var(--border-gold);background:var(--gold-dim)}
.badge-blue{color:var(--blue-light);border-color:var(--blue);background:var(--blue-dim)}
.badge-red{color:var(--red-light);border-color:var(--red);background:var(--red-dim)}

.dot-live{width:7px;height:7px;border-radius:50%;background:var(--green-bright);box-shadow:0 0 8px var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-gold),transparent);opacity:.5}
.glow-line{height:2px;background:linear-gradient(90deg,transparent,var(--gold-1),var(--purple),var(--blue),transparent);opacity:.6}

.btn{display:inline-flex;align-items:center;gap:var(--sp-2);padding:6px 14px;border-radius:var(--r-sm);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border:1px solid var(--border-gold);color:var(--text-secondary);transition:all var(--t-base)}
.btn:hover{border-color:var(--gold-1);color:var(--gold-1);box-shadow:var(--gold-glow)}
.btn-live{border-color:var(--green);color:var(--green)}
.btn-live:hover{background:var(--green);color:var(--bg-void)}
.btn-sim{border-color:var(--yellow);color:var(--yellow)}
.btn-sim:hover{background:var(--yellow);color:var(--bg-void)}

.section-hdr{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-subtle)}
.section-title{font-family:var(--font-title);font-size:15px;letter-spacing:2px;color:var(--gold-1)}

/* ── NAV COMMUNE ── */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;height:52px;display:flex;align-items:center;gap:16px;padding:0 24px;background:rgba(1,10,19,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle)}
.nav-brand{font-family:var(--font-title);font-size:18px;letter-spacing:3px;color:var(--gold-1);text-decoration:none;flex-shrink:0}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-link{padding:6px 14px;border-radius:var(--r-sm);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-secondary);text-decoration:none;transition:all var(--t-base)}
.nav-link:hover,.nav-link.active{color:var(--gold-1);background:var(--gold-dim)}

.spinner{width:24px;height:24px;border:2px solid var(--border-subtle);border-top-color:var(--gold-1);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.skeleton{background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-elevated) 50%,var(--bg-card) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.btn.active{border-color:var(--gold-1);color:var(--gold-1);background:var(--gold-dim)}

/* ── RESPONSIVE ── */
@media (max-width:768px){
  #nav{padding:0 12px;gap:8px}
  .nav-brand{font-size:16px;letter-spacing:2px}
  .nav-link{padding:4px 10px;font-size:12px;letter-spacing:.5px}
}
@media (max-width:480px){
  .nav-brand{font-size:14px;letter-spacing:1px}
  .nav-links{gap:0}
  .nav-link{padding:4px 7px;font-size:11px}
}