:root{
  --bg:#0a0014; --bg2:#12002a; --panel:#1a0a2e; --panel2:#241040;
  --neon1:#ff00ea; --neon2:#00e5ff; --neon3:#8b5cf6;
  --text:#f0e6ff; --muted:#9c8bc0; --border:rgba(255,0,234,.2);
  --grad:linear-gradient(135deg,#ff00ea 0%,#8b5cf6 50%,#00e5ff 100%);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;
  background-image:radial-gradient(ellipse at top left,rgba(255,0,234,.15),transparent 50%),radial-gradient(ellipse at bottom right,rgba(0,229,255,.15),transparent 50%);}
a{color:var(--neon2);text-decoration:none}
code{background:rgba(255,255,255,.05);padding:2px 6px;border-radius:4px;font-size:.85em;color:var(--neon2)}
.muted{color:var(--muted)} .small{font-size:.8em}
.neon-title{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:900;letter-spacing:1px}
.neon-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* AUTH */
.auth-body{display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{background:var(--panel);border:1px solid var(--border);padding:40px;border-radius:16px;max-width:420px;width:100%;box-shadow:0 0 40px rgba(255,0,234,.2)}
.auth-card h1{margin:0 0 8px;font-size:2em}
.auth-card label{display:block;margin:16px 0 6px;font-size:.85em;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.auth-card input,.auth-card select,.auth-card textarea{width:100%;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:1em}
.auth-card input:focus{outline:none;border-color:var(--neon1);box-shadow:0 0 0 3px rgba(255,0,234,.2)}

.btn-neon{background:var(--grad);border:none;color:white;padding:12px 24px;border-radius:8px;font-weight:700;cursor:pointer;font-size:1em;margin-top:20px;width:100%;text-transform:uppercase;letter-spacing:1px;transition:transform .1s,box-shadow .2s}
.btn-neon:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,0,234,.4)}
.btn-mini{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text);padding:5px 10px;border-radius:6px;cursor:pointer;font-size:.8em;margin:0 2px}
.btn-mini:hover{border-color:var(--neon1)} .btn-mini.danger:hover{border-color:#ff4466;color:#ff4466}

/* APP */
.app{display:flex;min-height:100vh}
.sidebar{width:240px;background:rgba(10,0,20,.8);backdrop-filter:blur(10px);border-right:1px solid var(--border);padding:24px 0;display:flex;flex-direction:column}
.sidebar .logo{font-size:1.4em;padding:0 24px 24px;border-bottom:1px solid var(--border)}
.sidebar nav{flex:1;padding:16px 0}
.sidebar nav a{display:block;padding:12px 24px;color:var(--muted);border-left:3px solid transparent}
.sidebar nav a:hover{color:var(--text);background:rgba(255,0,234,.05)}
.sidebar nav a.active{color:var(--text);border-left-color:var(--neon1);background:rgba(255,0,234,.1)}
.sidebar-foot{padding:16px 24px;border-top:1px solid var(--border)}
.logout{display:inline-block;margin-top:8px;color:#ff4466}

.main{flex:1;min-width:0}
.topbar{padding:24px 32px;border-bottom:1px solid var(--border)}
.topbar h1{margin:0;font-size:1.6em}
.content{padding:24px 32px}

.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:24px;margin-bottom:20px}
.card h2{margin:0 0 16px;font-size:1.2em}

.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}
.stat-label{color:var(--muted);font-size:.8em;text-transform:uppercase;letter-spacing:1px}
.stat-value{font-size:2.2em;font-weight:800;margin-top:8px}

.chart{display:flex;align-items:flex-end;gap:16px;height:220px;padding-top:20px}
.bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.bar{width:100%;background:var(--grad);border-radius:6px 6px 0 0;min-height:4px;box-shadow:0 0 20px rgba(255,0,234,.3)}
.bar-label{color:var(--muted);font-size:.75em;text-align:center}

table{width:100%;border-collapse:collapse}
th,td{padding:12px;text-align:left;border-bottom:1px solid var(--border);font-size:.9em}
th{color:var(--muted);text-transform:uppercase;font-size:.75em;letter-spacing:1px}
.actions form{margin:0}

.pill{padding:3px 10px;border-radius:12px;font-size:.75em;text-transform:uppercase;background:rgba(255,255,255,.05)}
.pill.active{background:rgba(0,229,255,.15);color:var(--neon2)}
.pill.disabled{background:rgba(255,68,102,.15);color:#ff4466}
.pill.expired{background:rgba(156,139,192,.15);color:var(--muted)}
.pill.info{background:rgba(0,229,255,.15);color:var(--neon2)}
.pill.warning{background:rgba(255,200,0,.15);color:#ffc800}
.pill.critical{background:rgba(255,68,102,.15);color:#ff4466}

.row-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row-form>*{flex:1;min-width:120px}
.row-form input,.row-form select,.row-form textarea{padding:10px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);width:100%}
.row-form button{flex:0 0 auto}

form label{display:block;margin:12px 0 6px;font-size:.85em;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
form input,form select,form textarea{width:100%;padding:10px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit}
form input:focus,form textarea:focus,form select:focus{outline:none;border-color:var(--neon1)}
.check{display:inline-flex;align-items:center;gap:8px;text-transform:none}
.check input{width:auto}

.alert{padding:12px 16px;border-radius:8px;margin-bottom:16px}
.alert.success{background:rgba(0,229,255,.1);border:1px solid var(--neon2);color:var(--neon2)}
.alert.error{background:rgba(255,68,102,.1);border:1px solid #ff4466;color:#ff4466}
.alert.warning{background:rgba(255,200,0,.1);border:1px solid #ffc800;color:#ffc800}

@media(max-width:768px){.sidebar{width:70px}.sidebar nav a{padding:12px;font-size:0}.sidebar nav a::first-letter{font-size:16px}.sidebar .logo,.sidebar-foot{display:none}}