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

:root { --bg:#08090b; --line:#292d35; --text:#f3f4f2; --muted:#8d929d; --accent:#d8ff3e; --danger:#ff6b6b; --amber:#ffc857; --shadow:0 24px 80px rgba(0,0,0,.4); }
* { box-sizing:border-box }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:'Manrope',sans-serif }
body { overflow-x:hidden }
body[data-auth="required"] { visibility:hidden } body[data-auth="required"].auth-ready { visibility:visible }
body::before { position:fixed; inset:0; z-index:-1; content:''; pointer-events:none; opacity:.5; background:linear-gradient(115deg,transparent 0 46%,rgba(216,255,62,.035) 46.1% 46.3%,transparent 46.4%),radial-gradient(circle at 82% 10%,rgba(216,255,62,.1),transparent 25%); }
input,textarea,select,button { font:inherit } button { cursor:pointer } a { color:var(--accent); text-decoration:none }
.grid-bg { background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:48px 48px }
.shell { max-width:1440px; margin:auto; padding:36px clamp(20px,5vw,72px) 72px }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:28px; border-bottom:1px solid var(--line) }
.brand { letter-spacing:.18em; font-weight:800; font-size:1.1rem }
.eyebrow { color:var(--accent); font:500 .68rem 'DM Mono',monospace; letter-spacing:.14em; text-transform:uppercase }
.muted { color:var(--muted) }
.panel { background:linear-gradient(145deg,#171a1f,#0c0e11); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:2px; padding:26px }
.auth { min-height:100vh; display:grid; place-items:center; padding:24px; position:relative }
.auth::before { content:'DA / 09'; position:absolute; left:6vw; top:8vh; color:rgba(216,255,62,.14); font:500 clamp(4rem,14vw,12rem) 'DM Mono'; letter-spacing:-.08em; pointer-events:none }
.auth-card { width:min(560px,100%); animation:rise .6s ease both; position:relative; z-index:1 }
h1,h2,h3,p { margin-top:0 } h1 { font-size:clamp(2.4rem,6vw,5.6rem); letter-spacing:-.07em; line-height:.92; margin:18px 0 16px } h2 { margin-bottom:8px }
label { display:block; color:var(--muted); font:500 .7rem 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.1em; margin:20px 0 8px }
input,textarea,select { width:100%; background:#0b0d10; color:var(--text); border:1px solid #343942; padding:14px; border-radius:2px; outline:none }
input:focus,textarea:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(216,255,62,.13) }
.btn { border:1px solid var(--accent); color:#0a0c08; background:var(--accent); padding:12px 16px; border-radius:2px; font-weight:800; transition:transform .2s,filter .2s }
.btn:hover { transform:translateY(-2px); filter:brightness(1.08) } .btn.ghost { background:transparent; color:var(--text); border-color:var(--line) } .btn.ghost:hover { color:var(--accent); border-color:var(--accent) } .btn.danger { background:transparent; border-color:var(--danger); color:var(--danger) }
.actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center } .notice { border-left:2px solid var(--accent); padding:13px 15px; background:rgba(216,255,62,.06); color:var(--text); margin:18px 0 }
.dash-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px } .span-2 { grid-column:span 2 }
.metric { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font:500 .72rem 'DM Mono',monospace } .metric strong { color:var(--accent); font-size:.9rem }
.critical { color:var(--danger)!important } .high { color:var(--amber)!important } .low { color:var(--accent)!important } .feed { display:grid; gap:0 } .feed-item { padding:15px 0; border-bottom:1px solid var(--line) } .feed-item:last-child { border-bottom:0 } .feed-item strong { display:block; margin-top:8px } .feed-item p { font-size:.85rem; margin:7px 0 0; line-height:1.5 } .badge { display:inline-block; font:500 .65rem 'DM Mono',monospace; letter-spacing:.08em }
.chat-log { min-height:180px; max-height:260px; overflow:auto; margin:18px 0; padding:4px 0 } .chat-line { padding:12px 0; border-bottom:1px solid var(--line); font-size:.86rem; line-height:1.5 } .chat-line strong { color:var(--accent) }
.theme-menu { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px } .theme-menu button { background:transparent; color:var(--muted); border:1px solid var(--line); padding:7px 9px; font:500 .67rem 'DM Mono' } .theme-menu button.active,.theme-menu button:hover { color:var(--accent); border-color:var(--accent) }
.radar { width:min(180px,70%); aspect-ratio:1; margin:24px auto; border:1px solid var(--accent); border-radius:50%; background:radial-gradient(circle,transparent 0 38%,rgba(216,255,62,.12) 39% 40%,transparent 41%),linear-gradient(90deg,transparent 49.5%,rgba(216,255,62,.35) 50%,transparent 50.5%),linear-gradient(0deg,transparent 49.5%,rgba(216,255,62,.35) 50%,transparent 50.5%); box-shadow:0 0 28px rgba(216,255,62,.16) }
.meter { height:4px; background:#292d35; margin:14px 0 } .meter i { display:block; height:100%; width:72%; background:var(--accent) } .user-row { display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); font-size:.84rem } video { width:100%; max-height:220px; object-fit:cover; margin-top:16px; background:#050607; border:1px solid var(--line) }
#blackout-guard { display:none; position:fixed; inset:0; z-index:20; place-items:center; background:#050607; text-align:center; padding:24px } #blackout-guard.visible { display:grid } @keyframes rise { from { opacity:0; transform:translateY(18px) } to { opacity:1; transform:none } }
@media (max-width:800px) { .shell { padding:24px 16px 48px } .topbar { align-items:flex-start; flex-direction:column } .topbar .actions { width:100% } .dash-grid { grid-template-columns:1fr } .span-2 { grid-column:auto } .user-row { grid-template-columns:1fr 1fr } .auth-card { padding:22px } h1 { font-size:clamp(2.8rem,14vw,5rem) } }
[data-theme="light"] { --bg:#f2f3ed; --line:#d2d5c8; --text:#151712; --muted:#687064; --accent:#6d8d00; --danger:#bd3c3c; --shadow:0 24px 80px rgba(30,35,15,.12) } [data-theme="light"] body::before { opacity:.18 } [data-theme="light"] .panel { background:#fff } [data-theme="light"] input,[data-theme="light"] textarea,[data-theme="light"] select { background:#f7f8f2; color:var(--text) } [data-theme="cyber"] { --accent:#4df6ff; --line:#184f5a } [data-theme="snake"] { --accent:#a9d63b; --line:#46552d } [data-theme="dragon"] { --accent:#ff84c8; --line:#633c56 }