:root {--bg-color:#050505; --sidebar-bg:#0a0a0a; --main-bg:#111; --gold:#d4af37; --green:#00ff41; --red:#ff3333;}
* {box-sizing:border-box; margin:0; padding:0; outline:none;}
body {background:var(--bg-color); color:#fff; font-family:'Share Tech Mono', monospace; height:100vh; overflow:hidden;}
.hidden {display:none !important;}
.hidden-panel {opacity:0; pointer-events:none; transform:scale(0.95);}
::-webkit-scrollbar {width:8px; height:8px;}
::-webkit-scrollbar-track {background:#050505; border-left:1px solid #222;}
::-webkit-scrollbar-thumb {background:#333; border:1px solid #000;}
::-webkit-scrollbar-thumb:hover {background:var(--gold);}
.film-grain {position:fixed; inset:0; opacity:0.05; pointer-events:none; z-index:1; background-image:url("data:image/svg+xml, %3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");}
#dynamic-bg {position:fixed; inset:0; z-index:0 !important; background-color:#050505; background-size:cover; background-position:center; background-repeat:no-repeat; filter:blur(10px) brightness(0.6); transform:scale(1.1); transition:background-image 0.5s ease-in-out, opacity 0.5s ease; opacity:0; pointer-events:none;}
#dynamic-bg.active {opacity:1;}
.modal {position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:8000; display:flex; justify-content:center; align-items:center;}
.modal-box {z-index:8001; background:#111; border:1px solid var(--gold); padding:3rem; width:400px; text-align:center; box-shadow:0 0 50px rgba(212,175,55,0.2);}
.modal-box h3 {color:var(--gold); margin-bottom:20px; font-family:'Cinzel', serif;}
.modal-box input {width:100%; margin:10px 0; padding:15px; background:#000; border:1px solid #444; color:#fff; font-family:monospace;}
.modal-box button {width:100%; padding:15px; background:var(--gold); border:none; cursor:pointer; margin-top:20px; font-weight:bold;}
.toast {position:fixed; top:30px; left:50%; transform:translateX(-50%); background:var(--gold); color:#000; padding:15px 40px; z-index:9000; font-weight:bold; border:2px solid #fff; box-shadow:0 0 20px rgba(0,0,0,0.5);}
.btn-row {display:flex; gap:15px; margin-top:10px;}
.btn {padding:15px 20px; cursor:pointer; border:none; font-weight:bold; flex:1; font-family:'Share Tech Mono', monospace; transition:0.2s;}
.btn.gold {background:var(--gold); color:#000;}
.btn.gold:hover {background:#fff;}
.btn.secondary {background:#080808; color:#888; border:1px solid #333;}
.btn.secondary:hover {color:#fff; border-color:#666;}
.text-btn {background:none; border:none; color:#666; cursor:pointer; padding:10px; margin-top:10px; text-decoration:underline;}
.text-btn:hover {color:#fff;}
.text-danger-btn {background:none; border:none; color:#444; font-family:'Share Tech Mono', monospace; font-size:0.75rem; cursor:pointer; letter-spacing:1px; transition:all 0.3s; padding:5px 0;}
.text-danger-btn:hover {color:#ff3333; text-shadow:0 0 8px rgba(255, 51, 51, 0.5); font-weight:bold;}
.dialog-box {border:2px solid var(--red); background:#050000; max-width:350px !important; text-align:left; box-shadow:0 0 50px rgba(255, 50, 50, 0.2);}
.dialog-box h3 {color:var(--red); border-bottom:1px solid #333; padding-bottom:10px; margin-bottom:15px; font-size:1.1rem; display:flex; align-items:center; gap:10px;}
.dialog-box h3::before {content:'\f071'; font-family:"Font Awesome 6 Free"; font-weight:900;}
.dialog-box p {color:#ccc; font-size:0.9rem; line-height:1.5; margin-bottom:25px;}
.dialog-actions {display:flex; gap:15px;}
.dialog-actions button {padding:10px; font-size:0.8rem; text-transform:uppercase; letter-spacing:1px;}
.modal-box.dialog-box {z-index:9999;}
.hidden, .hidden-panel {display:none !important; opacity:0 !important; pointer-events:none !important; visibility:hidden !important; z-index:-9999 !important;}
@media screen and (max-width: 768px) {
  .modal-box {width:90%; padding:1.5rem;}
  .toast {width:90%; text-align:center; padding:15px;}
}