:root {
  --navy: #0a0e1a;
  --navy-mid: #1a2332;
  --panel-border: #1e2a3d;
  --gold: #c8a04e;
  --gold-dim: #8b7034;
  --gold-bright: #e8c94a;
  --brass: #b8963e;
  --text: #d1d5db;
  --bg1: #080c16; --bg2: #0a0e1a; --bg3: #0d1220;
  --panel-a: rgba(20, 28, 43, 0.95); --panel-b: rgba(16, 22, 35, 0.98);
}
body.anarchy {
  --navy: #0b0b0b;
  --navy-mid: #1a1212;
  --panel-border: #3a1818;
  --gold: #dc2626;
  --gold-dim: #7f1d1d;
  --gold-bright: #ef4444;
  --brass: #991b1b;
  --bg1: #050505; --bg2: #0d0808; --bg3: #140a0a;
  --panel-a: rgba(22, 16, 16, 0.96); --panel-b: rgba(14, 10, 10, 0.98);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--navy); color: var(--text); font-family: 'IBM Plex Sans', sans-serif; min-height: 100vh; overflow-x: hidden; transition: background .4s; }
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(200,160,78,0.04) 0%, transparent 50%), linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 30%, var(--bg3) 100%);
}
body.anarchy::before {
  background:
    repeating-linear-gradient(-45deg, rgba(220,38,38,0.025) 0 2px, transparent 2px 14px),
    radial-gradient(ellipse at 80% 10%, rgba(220,38,38,0.12) 0%, transparent 45%),
    linear-gradient(180deg, var(--bg1), var(--bg3));
}
#root { position: relative; z-index: 1; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 3px; }

.serif-heading { font-family: 'Crimson Pro', serif; }
.mono-text { font-family: 'IBM Plex Mono', monospace; }
.stencil { font-family: 'Stardos Stencil', 'Crimson Pro', serif; font-weight: 700; letter-spacing: .02em; }
body.anarchy .title-main, body.anarchy .section-title { font-family: 'Stardos Stencil', serif; letter-spacing: .03em; }

.panel { background: linear-gradient(135deg, var(--panel-a), var(--panel-b)); border: 1px solid var(--panel-border); border-radius: 4px; position: relative; }
.panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); opacity: .4; }
.panel-embossed { box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 2px 8px rgba(0,0,0,.35); }
.gold-border-top { border-top: 2px solid var(--gold-dim); }

body.anarchy .panel { border-radius: 1px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 97% 100%, 93% calc(100% - 4px), 88% 100%, 60% calc(100% - 3px), 30% 100%, 0 calc(100% - 4px)); }
body.anarchy .tilt-l { transform: rotate(-0.5deg); }
body.anarchy .tilt-r { transform: rotate(0.45deg); }

.app-header { background: rgba(10,14,26,.96); border-bottom: 1px solid var(--panel-border); backdrop-filter: blur(10px); }
body.anarchy .app-header { background: rgba(10,6,6,.96); border-bottom: 2px solid #dc2626; }
.app-nav { background: rgba(0,0,0,.25); border-bottom: 1px solid var(--panel-border); }

.stat-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.05); overflow: hidden; }
.stat-bar-fill { height: 100%; border-radius: 4px; transition: width .8s ease-out; position: relative; }
.stat-bar-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); animation: shimmer 2s infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
@keyframes pulse-gold { 0%,100% { box-shadow: 0 0 0 0 rgba(200,160,78,.35); } 50% { box-shadow: 0 0 20px 4px rgba(200,160,78,.15); } }
@keyframes stampIn { from { transform: scale(1.3) rotate(-3deg); opacity: 0; } to { transform: scale(1) rotate(-1deg); opacity: 1; } }
.animate-fade-in { animation: fadeIn .4s ease-out forwards; }
.animate-slide-in { animation: slideIn .3s ease-out forwards; }
.stamp { animation: stampIn .35s ease-out forwards; font-family: 'Stardos Stencil', monospace; letter-spacing: .05em; }

.btn-gold { background: linear-gradient(135deg, var(--gold), var(--brass)); color: #0a0a0a; font-weight: 700; border: none; cursor: pointer; transition: all .2s; text-transform: uppercase; letter-spacing: .05em; }
.btn-gold:hover { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); transform: translateY(-1px); }
body.anarchy .btn-gold { color: #fff; font-family: 'Stardos Stencil', sans-serif; }
.btn-outline { background: transparent; border: 1px solid var(--panel-border); color: var(--text); cursor: pointer; transition: all .2s; }
.btn-outline:hover { border-color: var(--gold-dim); color: var(--gold); }
.btn-outline.active { border-color: var(--gold); color: var(--gold); background: rgba(200,160,78,.08); }
body.anarchy .btn-outline.active { background: rgba(220,38,38,.1); }
.btn-outline:disabled { opacity: .35; cursor: not-allowed; }

.anarchy-card { background: linear-gradient(to top right, #0a0a0a 50%, #7f1d1d 50%) !important; border-color: #dc2626 !important; }
.zine-box { border: 1px dashed #dc2626; background: rgba(220,38,38,.05); }
.proposal-card { border: 1px dashed var(--panel-border); background: rgba(255,255,255,.02); transition: transform .15s; }
.proposal-card:hover { transform: rotate(-0.4deg); border-color: var(--gold-dim); }

.zine {
  background: #e7e2d4;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0 1px, transparent 1px 3px), radial-gradient(circle at 30% 20%, rgba(0,0,0,.08), transparent 60%);
  color: #111; transform: rotate(-1deg); box-shadow: 6px 8px 0 #dc2626, 0 10px 40px rgba(0,0,0,.6);
  clip-path: polygon(0 2%, 4% 0, 30% 1%, 60% 0, 100% 1%, 99% 40%, 100% 98%, 70% 100%, 40% 99%, 2% 100%, 0 60%);
}
.zine-btn { background: transparent; border: 2px solid #111; color: #111; cursor: pointer; font-family: 'Special Elite', monospace; transition: all .15s; }
.zine-btn:hover { background: #111; color: #e7e2d4; transform: rotate(0.5deg); }

.tooltip-container { position: relative; }
.tooltip-container:hover .tooltip-text { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.tooltip-text { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--navy-mid); border: 1px solid var(--gold-dim); padding: 6px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: all .2s; z-index: 100; pointer-events: none; }

.news-ticker-item { border-left: 3px solid var(--gold-dim); animation: slideIn .3s ease-out forwards; }
body.anarchy .news-ticker-item { font-family: 'Special Elite', monospace; }
.speech { background: rgba(255,255,255,.025); border-radius: 0 8px 8px 8px; padding: 6px 10px; flex: 1; }

.slider-custom { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); }
.slider-custom::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); cursor: pointer; }
.slider-custom::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: none; }
select.styled-select, input.styled-input, textarea.styled-input { background: var(--navy-mid); border: 1px solid var(--panel-border); color: #f3f4f6; padding: 8px 12px; border-radius: 4px; outline: none; font-family: 'IBM Plex Sans', sans-serif; }
input.styled-input:focus, textarea.styled-input:focus, select.styled-select:focus { border-color: var(--gold-dim); }

.watermark { position: fixed; bottom: 20px; right: 20px; font-size: 140px; font-family: 'Crimson Pro', serif; font-weight: 900; color: var(--gold); opacity: .03; pointer-events: none; z-index: 0; user-select: none; }
body.anarchy .watermark { opacity: .06; font-size: 220px; }
.advance-btn { animation: pulse-gold 3s infinite; }
@media (max-width: 768px) { .watermark { display: none; } body.anarchy .tilt-l, body.anarchy .tilt-r { transform: none; } }