:root{--bg:#0b1220;--panel:#101a2b;--edge:#263043;--text:#d7e1f0;--muted:#9fb3c8;--brand:#5aa0ff;--brand2:#6ab4ff}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--brand);text-decoration:none}a:hover{color:var(--brand2)}
.container{max-width:1080px;margin:0 auto;padding:16px}
.card{background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:16px}
.navbar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;background:#0e1727;border-bottom:1px solid var(--edge);position:sticky;top:0;z-index:10}
.brand{font-weight:800;color:var(--brand)}
.nav-links{display:flex;gap:12px;flex-wrap:wrap}
.btn{background:#1d2a3d;color:#fff;border:1px solid #3c557d;padding:8px 12px;border-radius:10px}
.btn-outline{background:transparent;color:#d7e1f0;border:1px dashed #3c557d}
.btn:hover{border-color:var(--brand);box-shadow:0 0 0 2px rgba(90,160,255,.25)}
.logout-btn{border:1px solid #3c557d;padding:6px 10px;border-radius:8px}
.input,textarea{width:100%;background:#0f1a2a;border:1px solid var(--edge);color:var(--text);border-radius:8px;padding:8px}
.app-footer{text-align:center;margin-top:30px;color:#9fb3c8;font-size:12px}
.badge{font-size:12px;color:#9fb3c8}
.thumb{width:56px;height:56px;object-fit:cover;border:1px solid #263043;border-radius:6px}
.muted{color:#9fb3c8}

/* -------------------------------
   IVVN Dock (barra laterale stile macOS)
--------------------------------*/

.ivvn-dock {
    position: fixed;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: rgba(18, 26, 38, 0.6);
    backdrop-filter: blur(10px);
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 9999;
}

.dock-item {
    font-size: 26px;
    text-decoration: none;
    padding: 8px;
    border-radius: 12px;
    transition: transform 0.18s, background 0.18s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dock-item:hover {
    transform: scale(1.25);
    background: rgba(255,255,255,0.1);
}

.dock-item.active {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    transform: scale(1.2);
}

/* Mobile: dock in basso */
@media (max-width: 850px) {
    .ivvn-dock {
        flex-direction: row;
        bottom: 8px;
        left: 50%;
        top: unset;
        transform: translateX(-50%);
        padding: 10px 16px;
    }
}