:root {
    --neon: #00f2ff;
    --danger: #ff4d4d;
    --bg: #02040a;
    --border: rgba(0, 242, 255, 0.2);
}

* { box-sizing: border-box; outline: none; }
body { margin: 0; font-family: 'Inter', sans-serif; background: #000; color: #fff; display: flex; overflow-x: hidden; }

/* SIDEBAR FIX */
#sidebar {
    width: 260px; height: 100vh; background: #000; border-right: 1px solid var(--border);
    padding: 30px 20px; display: flex; flex-direction: column; position: fixed; z-index: 100;
}
.logo { font-family: 'Orbitron'; font-size: 1.6rem; color: var(--neon); margin-bottom: 50px; font-weight: 900; }
.logo span { color: #fff; }

.n-link { padding: 15px; margin-bottom: 10px; cursor: pointer; color: #64748b; font-weight: 700; transition: 0.3s; }
.n-link.active { color: var(--neon); background: rgba(0, 242, 255, 0.1); border-radius: 12px; }

.logout-wrap {
    margin-top: auto; padding: 15px; border: 1px solid var(--danger);
    color: var(--danger); border-radius: 12px; text-align: center;
    font-family: 'Orbitron'; font-size: 0.8rem; cursor: pointer; transition: 0.3s;
}
.logout-wrap:hover { background: var(--danger); color: #000; box-shadow: 0 0 20px var(--danger); }

/* AUTH/LOGIN SCREEN */
.auth-container { height: 100vh; display: flex; align-items: center; justify-content: center; width: 100%; }
.auth-card { 
    background: rgba(5, 10, 20, 0.9); padding: 50px; border-radius: 25px; 
    border: 1px solid var(--border); text-align: center; width: 380px;
}
.glitch-text { font-family: 'Orbitron'; color: var(--neon); font-size: 1.8rem; text-shadow: 0 0 10px var(--neon); }
.subtitle { font-size: 0.7rem; color: #444; letter-spacing: 2px; margin-bottom: 30px; }

.btn-neon-main {
    width: 100%; padding: 16px; background: transparent; border: 2px solid var(--neon);
    color: var(--neon); font-family: 'Orbitron'; font-weight: 900; border-radius: 12px; cursor: pointer; transition: 0.3s;
}
.btn-neon-main:hover { background: var(--neon); color: #000; box-shadow: 0 0 25px var(--neon); }

/* BIO-HACK FIX (Checkboxes neon, no bianco) */
.check-group { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.check-btn input { display: none; }
.check-btn span {
    padding: 12px 20px; border: 1px solid var(--border); border-radius: 10px;
    cursor: pointer; font-size: 0.8rem; transition: 0.3s; color: #64748b;
}
.check-btn input:checked + span { 
    background: rgba(0, 242, 255, 0.1); border-color: var(--neon); 
    color: var(--neon); box-shadow: 0 0 15px rgba(0, 242, 255, 0.2); 
}

/* UI ELEMENTS */
#main-view { margin-left: 260px; padding: 50px; width: 100%; }
.glass-card { background: #050a14; border: 1px solid var(--border); padding: 35px; border-radius: 24px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.field.full { grid-column: span 2; }
.field label { display: block; font-family: 'Orbitron'; font-size: 0.75rem; color: var(--neon); margin-bottom: 12px; }

input, select {
    width: 100%; padding: 14px; margin-bottom: 15px; background: #000;
    border: 1px solid var(--border); color: #fff; border-radius: 10px;
}

.btn-sync {
    width: 100%; padding: 20px; background: transparent; border: 2px solid var(--neon);
    color: var(--neon); font-family: 'Orbitron'; font-weight: 900; border-radius: 12px; cursor: pointer; margin-top: 20px;
}

.stat-big { font-family: 'Orbitron'; font-size: 3.5rem; color: var(--neon); }
.hidden { display: none; }
.ex-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }