/* BIBOB Interview Pro v2.0 — canonical KbD styling
   Dark gradient + glasmorphisme (BIBOB v4.1.0 blueprint) */

:root {
    --primary:#1e3a5f;
    --primary-light:#3d6a99;
    --accent:#17a2b8;
    --success:#28a745;
    --warning:#ffc107;
    --danger:#dc3545;
    --dark:#1a1a2e;
    --darker:#0a0f1a;
    --light:#f8f9fa;
    --gray:#6c757d;
    --gray-light:#dee2e6;
    --spk1:#1e88e5;
    --spk2:#e53935;
    --spk3:#43a047;
    --spk-overlap:#fb8c00;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body {
    font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
    background:linear-gradient(135deg, var(--darker), #16213e);
    min-height:100vh;
    color:var(--light);
    -webkit-font-smoothing:antialiased;
}

.hidden { display:none !important; }

/* ── Auth-screens (setup + login) ──────────────────────────────────────────── */

.auth-screen {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.auth-box {
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:24px;
    padding:40px 30px;
    width:100%;
    max-width:380px;
    text-align:center;
}
.auth-logo {
    width:80px;
    height:80px;
    background:var(--primary);
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    font-size:2rem;
    color:white;
}
.auth-box h1 { color:var(--primary-light); font-size:1.5rem; margin-bottom:6px; }
.auth-box .sub { color:rgba(255,255,255,0.6); margin-bottom:25px; font-size:.9rem; }

.auth-input {
    width:100%;
    padding:14px 16px;
    margin-bottom:12px;
    border:2px solid rgba(255,255,255,0.1);
    border-radius:12px;
    background:rgba(0,0,0,0.3);
    color:white;
    font-size:1rem;
    text-align:center;
    transition:border-color .2s;
}
.auth-input::placeholder { color:rgba(255,255,255,0.4); }
.auth-input:focus { outline:none; border-color:var(--primary-light); }

.pin-dots {
    display:flex;
    justify-content:center;
    gap:14px;
    margin:25px 0;
}
.pin-dot {
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid var(--primary-light);
    background:transparent;
    transition:all .2s;
}
.pin-dot.filled {
    background:var(--primary-light);
    transform:scale(1.15);
}

.numpad {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    max-width:280px;
    margin:0 auto;
}
.numpad-btn {
    aspect-ratio:1;
    border:none;
    border-radius:50%;
    font-size:1.4rem;
    font-weight:600;
    cursor:pointer;
    background:rgba(255,255,255,0.08);
    color:white;
    transition:all .15s;
}
.numpad-btn:hover { background:rgba(255,255,255,0.18); }
.numpad-btn:active { transform:scale(0.95); }
.numpad-btn.action { background:var(--primary); }
.numpad-btn.action:hover { background:var(--primary-light); }

.auth-error {
    color:#ff8a93;
    font-size:.85rem;
    margin-top:14px;
    min-height:20px;
}

@keyframes shake {
    0%,100% { transform:translateX(0); }
    20%,60% { transform:translateX(-10px); }
    40%,80% { transform:translateX(10px); }
}
.shake { animation:shake .4s ease-in-out; }

/* ── App shell ─────────────────────────────────────────────────────────────── */

.app { display:none; }
.app.active { display:block; }

.security-bar {
    background:var(--primary);
    color:white;
    padding:6px 14px;
    font-size:.72rem;
    text-align:center;
    position:fixed;
    top:0; left:0; right:0;
    z-index:1000;
}
.security-bar i { margin-right:6px; }

.app-header {
    background:linear-gradient(135deg, var(--dark), #16213e);
    color:white;
    padding:50px 20px 18px;
    text-align:center;
    border-bottom:1px solid rgba(255,255,255,0.08);
}
.app-header h1 {
    font-size:1.2rem;
    color:var(--primary-light);
    margin-bottom:4px;
    font-weight:600;
}
.app-header .user-info { color:rgba(255,255,255,0.65); font-size:.82rem; }

/* ── Bottom-tabs nav (mobile-first) ───────────────────────────────────────── */

.nav-tabs {
    display:flex;
    background:rgba(0,0,0,0.5);
    backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,0.08);
    position:fixed;
    bottom:0; left:0; right:0;
    z-index:100;
}
.nav-tab {
    flex:1;
    padding:10px 6px;
    text-align:center;
    border:none;
    background:none;
    cursor:pointer;
    font-size:.7rem;
    color:rgba(255,255,255,0.6);
    transition:color .2s;
}
.nav-tab i { display:block; font-size:1.2rem; margin-bottom:3px; }
.nav-tab.active { color:var(--primary-light); }

/* ── Main content + tabs ──────────────────────────────────────────────────── */

.main { padding:20px 15px 90px; max-width:680px; margin:0 auto; }
.tab-content { display:none; }
.tab-content.active { display:block; }

.card {
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    padding:20px;
    margin-bottom:15px;
}
.card-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,0.05);
}
.card-title {
    font-size:.95rem;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--primary-light);
}
.card-title i { color:var(--accent); }

/* ── Stats (dashboard) ────────────────────────────────────────────────────── */

.stats-grid {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
    margin-bottom:15px;
}
.stat-item {
    background:rgba(0,0,0,0.3);
    padding:16px 12px;
    border-radius:12px;
    text-align:center;
}
.stat-item .label { font-size:.7rem; opacity:.65; margin-bottom:4px; }
.stat-item .value { font-size:1.4rem; font-weight:700; color:var(--primary-light); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 20px;
    border:none;
    border-radius:10px;
    font-size:.9rem;
    font-weight:600;
    cursor:pointer;
    transition:all .15s;
    color:white;
}
.btn-primary { background:var(--primary); }
.btn-primary:hover:not(:disabled) { background:var(--primary-light); }
.btn-success { background:var(--success); }
.btn-danger { background:var(--danger); }
.btn-ghost { background:rgba(255,255,255,0.1); }
.btn-outline {
    background:transparent;
    border:1.5px solid rgba(255,255,255,0.2);
}
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn-block { width:100%; }
.btn-lg { padding:15px 24px; font-size:1rem; }

/* ── Form controls ─────────────────────────────────────────────────────────── */

.form-group { margin-bottom:14px; }
.form-label {
    display:block;
    font-size:.82rem;
    font-weight:600;
    margin-bottom:6px;
    color:rgba(255,255,255,0.8);
}
.form-control {
    width:100%;
    padding:12px 14px;
    border:1.5px solid rgba(255,255,255,0.1);
    border-radius:10px;
    background:rgba(0,0,0,0.3);
    color:white;
    font-size:.95rem;
    font-family:inherit;
}
.form-control:focus { outline:none; border-color:var(--primary-light); }
textarea.form-control { min-height:120px; resize:vertical; line-height:1.5; }

/* ── Toast ─────────────────────────────────────────────────────────────────── */

.toast-wrap {
    position:fixed;
    bottom:90px;
    left:50%;
    transform:translateX(-50%);
    z-index:9999;
    pointer-events:none;
}
.toast {
    background:rgba(0,0,0,0.85);
    backdrop-filter:blur(10px);
    color:white;
    padding:12px 22px;
    border-radius:10px;
    font-size:.88rem;
    margin-bottom:8px;
    pointer-events:auto;
    animation:slideUp .3s ease;
}
.toast.success { background:rgba(40,167,69,0.95); }
.toast.error { background:rgba(220,53,69,0.95); }
.toast.warning { background:rgba(255,193,7,0.95); color:#000; }
@keyframes slideUp {
    from { opacity:0; transform:translateY(20px); }
    to { opacity:1; transform:translateY(0); }
}

/* ── Empty-state ─────────────────────────────────────────────────────────── */

.empty {
    text-align:center;
    padding:40px 20px;
    color:rgba(255,255,255,0.4);
}
.empty i { font-size:2.5rem; margin-bottom:12px; opacity:.5; }
.empty p { font-size:.9rem; }