/* ============================================================
   Driver Booster Pro - Windows 11 WinUI3 + PNG Icons
   Mica/Acrylic materials, rounded corners, native look
   ============================================================ */

:root {
    /* Windows 11 Dark Mica palette */
    --bg: #202020;
    --mica: #2c2c2c;
    --surface: #2d2d2d;
    --surface-light: #383838;
    --surface-hover: #3a3a3a;
    --card: #323232;
    --border: rgba(255,255,255,0.0578);
    --border-light: rgba(255,255,255,0.0837);
    --border-top: rgba(255,255,255,0.093);

    --text: #ffffffde;
    --text-sec: #ffffffa0;
    --text-dim: #ffffff60;

    /* Windows 11 accent (Blue) */
    --accent: #60cdff;
    --accent-bg: #0078d4;
    --accent-hover: #429ce3;
    --accent-press: #005a9e;
    --accent-subtle: rgba(96,205,255,0.08);

    --green: #6ccb5f;
    --green-bg: rgba(108,203,95,0.1);
    --yellow: #fce100;
    --yellow-bg: rgba(252,225,0,0.1);
    --red: #ff99a4;
    --red-bg: rgba(255,153,164,0.1);

    --radius: 8px;
    --radius-lg: 12px;
    --radius-sm: 4px;
}

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

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

/* ---- Shared icon sizes ---- */
.app-logo-img { width:24px; height:24px; }
.tab-img { width:32px; height:32px; }
.h2-icon { width:20px; height:20px; vertical-align:middle; margin-right:6px; }
.hdr-icon { width:14px; height:14px; vertical-align:middle; }
.pill-icon { width:12px; height:12px; vertical-align:middle; }
.mini-icon { width:20px; height:20px; }
.btn-icon { width:20px; height:20px; }
.placeholder-img { width:48px; height:48px; opacity:.35; }
.sys-head-icon { width:16px; height:16px; vertical-align:middle; }
.footer-icon { width:12px; height:12px; vertical-align:middle; }
.cta-icon { width:20px; height:20px; }
.drv-icon-img { width:24px; height:24px; }
.spinner-img { width:24px; height:24px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

/* ---- App Shell ---- */
.app { display:flex; flex-direction:column; height:100vh; background:var(--mica); }

/* ---- Custom Title Bar (frameless window) ---- */
.titlebar {
    display:flex; align-items:center;
    padding:0 0 0 12px;
    height:38px;
    background:var(--bg);
    border-bottom:1px solid var(--border);
    flex-shrink:0;
    -webkit-app-region:drag;
    user-select:none;
}
.titlebar-left { display:flex; align-items:center; gap:8px; -webkit-app-region:no-drag; flex-shrink:0; }
.titlebar-center { flex:1; display:flex; align-items:center; justify-content:center; }
.app-title { display:flex; align-items:center; gap:6px; }
.app-name { font-size:12px; font-weight:600; color:var(--text); letter-spacing:.3px; }
.app-edition {
    font-size:9px; font-weight:600; color:var(--accent);
    background:var(--accent-subtle); padding:1px 5px;
    border-radius:var(--radius-sm); letter-spacing:.5px;
}
.sys-status { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-dim); }
.status-led {
    width:6px; height:6px; border-radius:50%;
    background:var(--green); box-shadow:0 0 6px var(--green);
    animation:pulse 2.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Window control buttons (Win11 style) */
.titlebar-controls {
    display:flex; align-items:stretch;
    height:38px; flex-shrink:0;
    -webkit-app-region:no-drag;
}
.win-btn {
    width:46px; height:38px;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:none;
    color:var(--text-sec); cursor:pointer;
    transition:background .1s ease;
    font-family:inherit;
}
.win-btn:hover { background:rgba(255,255,255,0.06); color:var(--text); }
.win-btn:active { background:rgba(255,255,255,0.04); }
.win-close:hover { background:#c42b1c; color:white; }
.win-close:active { background:#b52a1c; }

/* ---- Toolbar (Win11 Tabs / NavigationView) ---- */
.toolbar {
    display:flex; gap:2px; padding:6px 12px;
    background:var(--mica);
    border-bottom:1px solid var(--border);
    flex-shrink:0;
}
.toolbar-tab {
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:8px 20px;
    border:none; border-radius:var(--radius);
    background:transparent; color:var(--text-sec);
    font-size:11px; font-weight:500;
    cursor:pointer; transition:all .15s ease; font-family:inherit;
    position:relative;
}
.toolbar-tab:hover { background:var(--surface-hover); color:var(--text); }
.toolbar-tab.active {
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--border-light);
    border-top:1px solid var(--border-top);
}
.toolbar-tab.active::after {
    content:'';
    position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
    width:16px; height:3px; border-radius:2px;
    background:var(--accent);
}

/* ---- Content ---- */
.content-area { flex:1; overflow:hidden; position:relative; }
.tab-page { display:none; height:100%; animation:fadeUp .25s ease; }
.tab-page.active { display:flex; flex-direction:column; }
@keyframes fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ---- Scan Hero ---- */
.scan-hero {
    flex:1; display:flex; align-items:center; justify-content:center;
    gap:48px; padding:32px;
}
.scan-illustration { position:relative; flex-shrink:0; }
.hero-img { width:120px; height:120px; filter:drop-shadow(0 4px 16px rgba(0,0,0,0.3)); }
.hero-shield {
    width:48px; height:48px; position:absolute; bottom:-6px; right:-12px;
    filter:drop-shadow(0 2px 8px rgba(108,203,95,0.4));
    animation:shieldBob 3s ease-in-out infinite;
}
@keyframes shieldBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.scan-info { max-width:360px; }
.scan-info h2 { font-size:28px; font-weight:600; margin-bottom:8px; }
.scan-info p { color:var(--text-sec); font-size:14px; line-height:1.5; margin-bottom:20px; }

.scan-stats { display:flex; gap:10px; margin-bottom:24px; }
.mini-stat {
    display:flex; align-items:center; gap:8px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:10px 14px;
}
.mini-stat span { font-size:18px; font-weight:700; }
.mini-stat label { font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.4px; }
.mini-stat.warn span { color:var(--yellow); }
.mini-stat.danger span { color:var(--red); }

/* Win11 accent button */
.big-scan-btn {
    display:flex; align-items:center; gap:10px;
    padding:12px 40px;
    background:var(--accent-bg); border:none;
    border-radius:var(--radius); color:white;
    font-size:14px; font-weight:600;
    cursor:pointer; transition:all .15s ease; font-family:inherit;
}
.big-scan-btn:hover { background:var(--accent-hover); }
.big-scan-btn:active { background:var(--accent-press); transform:scale(0.98); }

/* ---- Step Bar ---- */
.step-bar {
    display:flex; align-items:center; justify-content:center;
    padding:12px 16px;
    border-top:1px solid var(--border); background:var(--bg);
    flex-shrink:0;
}
.step { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); font-weight:500; }
.step.active { color:var(--accent); }
.step.done { color:var(--green); }
.step-num {
    width:22px; height:22px; border-radius:50%;
    border:2px solid var(--text-dim);
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:600;
}
.step.active .step-num { border-color:var(--accent-bg); background:var(--accent-bg); color:white; }
.step.done .step-num { border-color:var(--green); background:var(--green); color:#000; }
.step-line { width:48px; height:1px; background:var(--text-dim); margin:0 10px; opacity:.3; }

/* ---- Tab Header ---- */
.tab-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 20px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.tab-header-left h2 { font-size:16px; font-weight:600; display:flex; align-items:center; }
.result-count { font-size:12px; color:var(--text-dim); margin-top:2px; }
.warn-text { color:var(--yellow); }

/* Win11 subtle button */
.header-btn {
    display:flex; align-items:center; gap:5px;
    padding:6px 14px; background:var(--surface);
    border:1px solid var(--border); border-radius:var(--radius);
    color:var(--text-sec); font-size:12px; font-weight:500;
    cursor:pointer; transition:all .15s ease; font-family:inherit;
}
.header-btn:hover { background:var(--surface-hover); color:var(--text); }

/* ---- Filter ---- */
.filter-strip { display:flex; gap:4px; padding:8px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.pill {
    display:flex; align-items:center; gap:4px;
    padding:4px 12px; border:1px solid var(--border); border-radius:var(--radius);
    background:transparent; color:var(--text-dim);
    font-size:12px; font-weight:500; cursor:pointer;
    transition:all .12s ease; font-family:inherit;
}
.pill:hover { background:var(--surface-hover); color:var(--text); }
.pill.active { background:var(--accent-bg); border-color:var(--accent-bg); color:white; }

/* ---- Driver Scroll ---- */
.driver-scroll { flex:1; overflow-y:auto; padding:8px 20px; }
.driver-scroll::-webkit-scrollbar{width:6px}
.driver-scroll::-webkit-scrollbar-track{background:transparent}
.driver-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px}
.driver-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.15)}

.placeholder-msg { text-align:center; padding:64px 20px; color:var(--text-dim); }
.placeholder-msg p { font-size:14px; margin-top:8px; }

/* ---- Driver Row (WinUI3 ListItem) ---- */
.drv-row {
    display:flex; align-items:center; gap:12px;
    padding:10px 14px;
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); margin-bottom:4px;
    transition:background .12s ease;
}
.drv-row:hover { 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:36px; height:36px; border-radius:var(--radius);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    background:var(--accent-subtle);
}

.drv-info { flex:1; min-width:0; }
.drv-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.drv-meta { font-size:11px; color:var(--text-dim); margin-top:1px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }

.drv-progress { width:100px; flex-shrink:0; }
.drv-bar { height:3px; background:rgba(255,255,255,0.06); border-radius:2px; overflow:hidden; }
.drv-bar-fill { height:100%; border-radius:2px; transition:width .5s 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-actions { display:flex; gap:4px; flex-shrink:0; }
.drv-btn {
    display:flex; align-items:center; gap:4px;
    padding:5px 10px; border-radius:var(--radius);
    border:1px solid var(--border); background:var(--surface);
    color:var(--text-sec); font-size:11px; font-weight:500;
    cursor:pointer; transition:all .12s ease; font-family:inherit;
}
.drv-btn img { width:13px; height:13px; }
.drv-btn:hover { background:var(--surface-hover); color:var(--text); }

.drv-btn.install-btn {
    background:var(--accent-bg); border-color:var(--accent-bg); color:white;
}
.drv-btn.install-btn:hover { background:var(--accent-hover); }

.drv-btn.ok-btn {
    background:var(--green-bg); border-color:rgba(108,203,95,0.2);
    color:var(--green); cursor:default;
}

.drv-badge {
    font-size:10px; font-weight:500; padding:1px 6px; border-radius:var(--radius-sm);
    display:inline-flex; align-items:center; gap:3px;
}
.drv-badge.signed { background:var(--green-bg); color:var(--green); }
.drv-badge.unsigned { background:var(--red-bg); color:var(--red); }

/* ---- CTA Bar ---- */
.cta-bar {
    padding:12px 20px; border-top:1px solid var(--border);
    background:var(--bg); display:flex; justify-content:center; flex-shrink:0;
}
.cta-btn {
    display:flex; align-items:center; gap:8px;
    padding:10px 36px;
    background:var(--accent-bg); border:none;
    border-radius:var(--radius); color:white;
    font-size:14px; font-weight:600;
    cursor:pointer; transition:all .15s ease; font-family:inherit;
}
.cta-btn:hover { background:var(--accent-hover); }
.cta-btn:active { background:var(--accent-press); transform:scale(.98); }
.cta-count { background:rgba(255,255,255,0.15); padding:2px 8px; border-radius:var(--radius-sm); font-size:11px; }

/* ---- Update Rows ---- */
.upd-row {
    padding:10px 14px; background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); margin-bottom:4px; transition:background .12s ease;
}
.upd-row:hover { background:var(--surface-hover); }
.upd-row.pending { border-left:3px solid var(--accent-bg); }
.upd-row.done { opacity:.45; }
.upd-title { font-size:13px; font-weight:600; margin-bottom:3px; }
.upd-meta { display:flex; gap:12px; flex-wrap:wrap; font-size:11px; color:var(--text-dim); }
.upd-tag { display:flex; align-items:center; gap:3px; }
.upd-tag img { width:12px; height:12px; }
.upd-section { font-size:12px; font-weight:600; margin:12px 0 6px; display:flex; align-items:center; gap:6px; }
.upd-section img { width:14px; height:14px; }
.upd-section.pend { color:var(--accent); }
.upd-section.inst { color:var(--green); }

/* ---- System Grid ---- */
.sys-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px 20px; overflow-y:auto; flex:1; }
.sys-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.sys-card-head {
    display:flex; align-items:center; gap:6px;
    padding:10px 14px; background:rgba(255,255,255,0.02);
    border-bottom:1px solid var(--border);
    font-size:12px; font-weight:600; color:var(--text-sec);
}
.sys-row { display:flex; justify-content:space-between; padding:7px 14px; font-size:12px; border-bottom:1px solid var(--border); }
.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:6px 14px 10px; }
.sys-bar { height:4px; background:rgba(255,255,255,0.06); border-radius:2px; overflow:hidden; }
.sys-bar-fill { height:100%; border-radius:2px; transition:width .8s ease; }
.ram-bar { background:linear-gradient(90deg,var(--green),#6ccb5f); }
.disk-bar { background:linear-gradient(90deg,var(--accent-bg),var(--accent)); }

/* ---- Footer ---- */
.app-footer {
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 16px; border-top:1px solid var(--border);
    background:var(--bg); font-size:11px; color:var(--text-dim); flex-shrink:0;
}
.footer-right { display:flex; gap:2px; }
.footer-btn {
    display:flex; align-items:center; gap:4px; padding:3px 8px;
    background:transparent; border:1px solid transparent; border-radius:var(--radius-sm);
    color:var(--text-dim); font-size:11px; cursor:pointer;
    font-family:inherit; transition:all .12s ease;
}
.footer-btn:hover { color:var(--text-sec); background:var(--surface-hover); }
.credit-link { color:var(--accent); text-decoration:none; font-weight:600; }
.credit-link:hover { text-decoration:underline; }

/* ---- Loading ---- */
.loading-overlay {
    position:fixed; inset:0;
    background:rgba(32,32,32,0.85); backdrop-filter:blur(20px);
    display:flex; align-items:center; justify-content:center; z-index:1000;
}
.loading-card {
    text-align:center; padding:36px 48px;
    background:var(--card); border:1px solid var(--border-light);
    border-radius:var(--radius-lg);
    box-shadow:0 8px 32px rgba(0,0,0,.5);
}
.loading-spinner { width:56px; height:56px; margin:0 auto 16px; position:relative; }
.spinner-ring {
    position:absolute; inset:0;
    border:3px solid var(--border);
    border-top-color:var(--accent-bg);
    border-radius:50%; animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-title { font-size:14px; font-weight:600; margin-bottom:10px; }
.loading-dots { display:flex; justify-content:center; gap:4px; }
.loading-dots span {
    width:4px; height:4px; border-radius:50%; background:var(--accent-bg);
    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)}}