/* ============================================================
   Driver Booster Pro - Driver Navigator Style
   Toolbar tabs + driver list + Download/Install buttons
   ============================================================ */

:root {
    --bg: linear-gradient(180deg, #0a1628 0%, #0f1d32 50%, #0a1628 100%);
    --surface: #111d33;
    --surface-light: #162442;
    --surface-hover: #1a2d50;
    --border: rgba(255,255,255,0.07);
    --border-accent: rgba(59,130,246,0.3);

    --text: #e8edf5;
    --text-sec: #8899b4;
    --text-dim: #56687e;

    --accent: #3b82f6;
    --accent-light: #60a5fa;
    --accent-dark: #2563eb;
    --accent-glow: rgba(59,130,246,0.25);

    --green: #10b981;
    --green-bg: rgba(16,185,129,0.12);
    --yellow: #f59e0b;
    --yellow-bg: rgba(245,158,11,0.12);
    --red: #ef4444;
    --red-bg: rgba(239,68,68,0.12);
    --cyan: #06b6d4;

    --r: 10px;
    --r-sm: 6px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Segoe UI Variable','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
    background: var(--bg);
    background-attachment: fixed;
    color: var(--text);
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ---- App Shell ---- */
.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* ---- Title Bar ---- */
.titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px 10px;
    border-bottom: 1px solid var(--border);
    background: rgba(10,22,40,0.8);
    backdrop-filter: blur(12px);
    flex-shrink: 0;
}

.titlebar-left { display:flex; align-items:center; gap:12px; }

.app-logo {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--accent), var(--cyan));
    border-radius: 10px;
    display: flex; align-items:center; justify-content:center;
    box-shadow: 0 2px 12px var(--accent-glow);
}
.app-logo svg { width:20px; height:20px; color:white; }

.app-title { display:flex; align-items:baseline; gap:6px; }
.app-name {
    font-size: 18px; font-weight: 800;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #fff, #94a3b8);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.app-edition {
    font-size: 11px; font-weight: 700;
    color: var(--cyan);
    background: rgba(6,182,212,0.15);
    padding: 2px 8px; border-radius: 4px;
    letter-spacing: 1px;
}

.sys-status {
    display:flex; align-items:center; gap:6px;
    font-size: 12px; color: var(--text-sec);
}
.status-led {
    width:8px; height:8px; border-radius:50%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ---- Toolbar ---- */
.toolbar {
    display: flex;
    gap: 4px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    background: rgba(10,22,40,0.5);
    flex-shrink: 0;
}

.toolbar-tab {
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    padding: 12px 28px;
    border: 1px solid transparent;
    border-radius: var(--r);
    background: transparent;
    color: var(--text-sec);
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
    position: relative;
}

.toolbar-tab:hover { background: var(--surface); color: var(--text); }

.toolbar-tab.active {
    background: linear-gradient(180deg, var(--surface-light), var(--surface));
    border-color: var(--border-accent);
    color: var(--accent-light);
    box-shadow: 0 2px 12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.05);
}

.tab-icon-wrap {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items:center; justify-content:center;
    transition: all .2s ease;
}

.tab-icon-wrap svg { width: 22px; height: 22px; }

.scan-icon-wrap { background: rgba(59,130,246,0.1); color: var(--accent); }
.drivers-icon-wrap { background: rgba(6,182,212,0.1); color: var(--cyan); }
.updates-icon-wrap { background: rgba(16,185,129,0.1); color: var(--green); }
.settings-icon-wrap { background: rgba(245,158,11,0.1); color: var(--yellow); }

.toolbar-tab.active .scan-icon-wrap { background: rgba(59,130,246,0.2); }
.toolbar-tab.active .drivers-icon-wrap { background: rgba(6,182,212,0.2); }
.toolbar-tab.active .updates-icon-wrap { background: rgba(16,185,129,0.2); }
.toolbar-tab.active .settings-icon-wrap { background: rgba(245,158,11,0.2); }

/* ---- Content Area ---- */
.content-area {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.tab-page {
    display: none;
    height: 100%;
    animation: fadeUp .3s ease;
}
.tab-page.active { display: flex; flex-direction: column; }

@keyframes fadeUp {
    from { opacity:0; transform:translateY(8px); }
    to { opacity:1; transform:translateY(0); }
}

/* ---- Scan Hero ---- */
.scan-hero {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 40px;
}

.scan-illustration { flex-shrink:0; }
.computer-svg { width: 220px; height: 200px; }

.scan-info { max-width: 380px; }
.scan-info h2 { font-size: 28px; font-weight: 800; margin-bottom: 10px; letter-spacing:-0.5px; }
.scan-info p { color: var(--text-sec); font-size: 14px; line-height: 1.6; margin-bottom: 24px; }

.scan-stats {
    display: flex; gap: 20px;
    margin-bottom: 28px;
}

.mini-stat {
    display: flex; align-items:center; gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 10px 16px;
}
.mini-stat svg { width:16px; height:16px; color: var(--accent-light); }
.mini-stat span { font-size:20px; font-weight:700; }
.mini-stat label { font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; }
.mini-stat.warn svg { color: var(--yellow); }
.mini-stat.warn span { color: var(--yellow); }
.mini-stat.danger svg { color: var(--red); }
.mini-stat.danger span { color: var(--red); }

.big-scan-btn {
    display: flex; align-items:center; gap:12px;
    padding: 16px 48px;
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    border: none; border-radius: 12px;
    color: white; font-size: 16px; font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all .25s ease;
    font-family: inherit;
    box-shadow: 0 4px 20px var(--accent-glow);
}
.big-scan-btn svg { width:22px; height:22px; }
.big-scan-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(59,130,246,0.4);
}
.big-scan-btn:active { transform:translateY(0); }

/* ---- Step Bar ---- */
.step-bar {
    display: flex; align-items:center; justify-content:center;
    gap: 0;
    padding: 18px 24px;
    border-top: 1px solid var(--border);
    background: rgba(10,22,40,0.5);
    flex-shrink: 0;
}

.step {
    display:flex; align-items:center; gap:8px;
    font-size: 12px; color: var(--text-dim);
    font-weight: 500;
}
.step.active { color: var(--accent-light); }
.step.done { color: var(--green); }

.step-num {
    width:24px; height:24px;
    border-radius:50%;
    border: 2px solid var(--text-dim);
    display:flex; align-items:center; justify-content:center;
    font-size: 11px; font-weight:700;
}
.step.active .step-num { border-color: var(--accent); background: var(--accent); color:white; }
.step.done .step-num { border-color: var(--green); background: var(--green); color:white; }

.step-line {
    width: 60px; height: 2px;
    background: var(--text-dim);
    margin: 0 12px;
    opacity: 0.3;
}

/* ---- Tab Headers ---- */
.tab-header {
    display: flex; justify-content:space-between; align-items:center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.tab-header-left h2 {
    font-size: 16px; font-weight: 700;
    display:flex; align-items:center; gap:8px;
}
.tab-header-left h2 svg { width:20px; height:20px; color:var(--accent-light); }
.result-count { font-size:12px; color:var(--text-dim); margin-top:3px; }
.warn-text { color: var(--yellow); }

.header-btn {
    display:flex; align-items:center; gap:6px;
    padding: 8px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-sec);
    font-size: 12.5px; font-weight:600;
    cursor:pointer;
    transition: all .2s ease;
    font-family: inherit;
}
.header-btn svg { width:14px; height:14px; }
.header-btn:hover { border-color: var(--accent); color: var(--accent-light); background: var(--surface-light); }

/* ---- Filter Strip ---- */
.filter-strip {
    display:flex; gap:6px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.pill {
    display:flex; align-items:center; gap:5px;
    padding: 5px 14px;
    border:1px solid var(--border);
    border-radius:20px;
    background:transparent;
    color: var(--text-dim);
    font-size:12px; font-weight:500;
    cursor:pointer;
    transition: all .15s ease;
    font-family:inherit;
}
.pill svg { width:12px; height:12px; }
.pill:hover { border-color: var(--accent); color: var(--accent-light); }
.pill.active { background:var(--accent); border-color:var(--accent); color:white; }

/* ---- Driver Scroll List ---- */
.driver-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px 24px;
}
.driver-scroll::-webkit-scrollbar { width:5px; }
.driver-scroll::-webkit-scrollbar-track { background:transparent; }
.driver-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

/* Placeholder */
.placeholder-msg {
    text-align:center;
    padding: 80px 20px;
    color: var(--text-dim);
}
.placeholder-msg svg { width:48px; height:48px; margin-bottom:12px; opacity:.3; }
.placeholder-msg p { font-size:14px; }

/* ---- Driver Row (like Driver Navigator) ---- */
.drv-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    margin-bottom: 8px;
    transition: all .2s ease;
}
.drv-row:hover { border-color: rgba(59,130,246,0.2); background: var(--surface-hover); }
.drv-row.outdated { border-left: 3px solid var(--yellow); }
.drv-row.error { border-left: 3px solid var(--red); }

.drv-icon {
    width:40px; height:40px;
    border-radius: 10px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    background: rgba(59,130,246,0.1);
    color: var(--accent-light);
}
.drv-icon svg { width:20px; height:20px; }

.drv-info { flex:1; min-width:0; }
.drv-name {
    font-size: 13.5px; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.drv-meta { font-size:11.5px; color:var(--text-dim); margin-top:2px; }

/* Progress bar per driver */
.drv-progress {
    width: 120px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.drv-bar {
    height:4px;
    background: rgba(255,255,255,0.05);
    border-radius:2px;
    overflow:hidden;
}
.drv-bar-fill {
    height:100%;
    border-radius:2px;
    transition: width .6s ease;
}
.drv-bar-fill.ok { background: var(--green); width:100%; }
.drv-bar-fill.warn { background: var(--yellow); width:60%; }
.drv-bar-fill.err { background: var(--red); width:30%; }
.drv-size { font-size:10px; color:var(--text-dim); text-align:right; }

/* Action buttons per driver */
.drv-actions {
    display:flex; gap:6px; flex-shrink:0;
}

.drv-btn {
    display:flex; align-items:center; gap:5px;
    padding: 6px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface-light);
    color: var(--text-sec);
    font-size: 11.5px; font-weight:600;
    cursor:pointer;
    transition: all .15s ease;
    font-family:inherit;
}
.drv-btn svg { width:13px; height:13px; }
.drv-btn:hover { border-color: var(--accent); color: var(--accent-light); }

.drv-btn.install-btn {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    border-color: var(--accent);
    color: white;
}
.drv-btn.install-btn:hover { box-shadow: 0 2px 8px var(--accent-glow); }

.drv-btn.installed-btn {
    background: var(--green-bg);
    border-color: rgba(16,185,129,0.3);
    color: var(--green);
    cursor: default;
}

/* Status badges */
.drv-badge {
    font-size:10px; font-weight:600;
    padding: 2px 8px; border-radius:12px;
    display:inline-flex; align-items:center; gap:3px;
}
.drv-badge svg { width:10px; height:10px; }
.drv-badge.signed { background:var(--green-bg); color:var(--green); }
.drv-badge.unsigned { background:var(--red-bg); color:var(--red); }

/* ---- CTA Bar (Download All) ---- */
.cta-bar {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: rgba(10,22,40,0.8);
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.cta-btn {
    display:flex; align-items:center; gap:10px;
    padding: 14px 48px;
    background: linear-gradient(135deg, #059669, var(--green));
    border:none; border-radius:12px;
    color:white; font-size:15px; font-weight:700;
    letter-spacing:1px;
    cursor:pointer;
    transition: all .25s ease;
    font-family:inherit;
    box-shadow: 0 4px 20px rgba(16,185,129,0.3);
}
.cta-btn svg { width:20px; height:20px; }
.cta-btn:hover { transform:translateY(-2px); box-shadow:0 6px 30px rgba(16,185,129,0.4); }

.cta-count {
    background: rgba(255,255,255,0.2);
    padding: 2px 10px; border-radius:10px;
    font-size:12px;
}

/* ---- Update Card ---- */
.upd-row {
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    margin-bottom: 8px;
    transition: all .2s ease;
}
.upd-row:hover { border-color: rgba(59,130,246,0.2); }
.upd-row.pending { border-left: 3px solid var(--accent); }
.upd-row.done { opacity:.5; }

.upd-title { font-size:13.5px; font-weight:600; margin-bottom:5px; }
.upd-meta {
    display:flex; gap:14px; flex-wrap:wrap;
    font-size:11.5px; color:var(--text-dim);
}
.upd-tag { display:flex; align-items:center; gap:4px; }
.upd-tag svg { width:12px; height:12px; }
.upd-section {
    font-size:12px; font-weight:700; text-transform:uppercase;
    letter-spacing:.5px; margin:16px 0 8px;
    display:flex; align-items:center; gap:6px;
}
.upd-section svg { width:14px; height:14px; }
.upd-section.pend { color:var(--accent-light); }
.upd-section.inst { color:var(--green); }

/* ---- System Grid ---- */
.sys-grid {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

.sys-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
}

.sys-card-head {
    display:flex; align-items:center; gap:8px;
    padding: 12px 18px;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--border);
    font-size: 12px; font-weight:700;
    text-transform:uppercase; letter-spacing:.5px;
    color: var(--text-sec);
}
.sys-card-head svg { width:16px; height:16px; color:var(--accent-light); }

.sys-row {
    display:flex; justify-content:space-between;
    padding: 10px 18px;
    font-size: 12.5px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.sys-row:last-of-type { border-bottom:none; }
.sys-row span:first-child { color:var(--text-dim); }
.sys-row span:last-child { font-weight:600; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.sys-bar-wrap { padding:8px 18px 14px; }
.sys-bar { height:6px; background:rgba(255,255,255,0.05); border-radius:3px; overflow:hidden; }
.sys-bar-fill { height:100%; border-radius:3px; transition:width .8s ease; }
.ram-bar { background: linear-gradient(90deg, var(--green), #34d399); }
.disk-bar { background: linear-gradient(90deg, var(--accent), var(--accent-light)); }

/* ---- Footer ---- */
.app-footer {
    display:flex; justify-content:space-between; align-items:center;
    padding: 8px 24px;
    border-top: 1px solid var(--border);
    background: rgba(10,22,40,0.6);
    font-size: 11px; color: var(--text-dim);
    flex-shrink: 0;
}
.footer-right { display:flex; gap:4px; }
.footer-btn {
    display:flex; align-items:center; gap:4px;
    padding:4px 12px;
    background:transparent; border:1px solid transparent;
    border-radius:4px;
    color:var(--text-dim); font-size:11px;
    cursor:pointer;
    font-family:inherit;
    transition: all .15s ease;
}
.footer-btn svg { width:12px; height:12px; }
.footer-btn:hover { color:var(--text-sec); border-color:var(--border); }

/* ---- Loading ---- */
.loading-overlay {
    position:fixed; inset:0;
    background: rgba(8,12,24,0.92);
    backdrop-filter: blur(6px);
    display:flex; align-items:center; justify-content:center;
    z-index:1000;
}
.loading-card {
    text-align:center;
    padding: 44px 56px;
    background: var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow: 0 16px 48px rgba(0,0,0,.5);
}
.loading-spinner {
    width:64px; height:64px;
    margin:0 auto 20px;
    position:relative;
}
.spinner-ring {
    position:absolute; inset:0;
    border:3px solid var(--border);
    border-top-color: var(--accent);
    border-radius:50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }
.spinner-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:var(--accent-light); }
.spinner-icon svg { width:24px; height:24px; }
.loading-title { font-size:15px; font-weight:700; margin-bottom:14px; }
.loading-dots { display:flex; justify-content:center; gap:5px; }
.loading-dots span {
    width:5px; height:5px; border-radius:50%;
    background:var(--accent);
    animation: dotPulse 1.4s ease-in-out infinite;
}
.loading-dots span:nth-child(2){animation-delay:.2s}
.loading-dots span:nth-child(3){animation-delay:.4s}
@keyframes dotPulse {
    0%,80%,100%{opacity:.3;transform:scale(.8)}
    40%{opacity:1;transform:scale(1)}
}