@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f5f7fb;--surface:#ffffff;--surface-2:#f8fafc;--text:#111827;--muted:#667085;
  --line:#e7ebf2;--line-strong:#d9e0ea;--primary:#2563eb;--primary-2:#1d4ed8;
  --primary-soft:#eef4ff;--success:#15803d;--success-soft:#ecfdf3;--danger:#c2413b;
  --danger-soft:#fff1f0;--warning:#b7791f;--sidebar:#0c1322;--sidebar-2:#111b2f;
  --shadow:0 20px 50px rgba(15,23,42,.08);--shadow-soft:0 8px 24px rgba(15,23,42,.05);
  --radius:18px;--radius-sm:12px
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font-family:'Manrope','Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.55}
button,input{font:inherit}
a{text-decoration:none;color:inherit}
.shell{min-height:100vh;display:grid;grid-template-columns:268px minmax(0,1fr)}
.sidebar{background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));color:#fff;padding:26px 18px 20px;display:flex;flex-direction:column;min-height:100vh;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:12px;align-items:center;padding:0 8px 24px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#60a5fa);font-size:19px;font-weight:800;box-shadow:0 10px 24px rgba(37,99,235,.34)}
.brand strong{display:block;font-size:14px;letter-spacing:-.01em}.brand small{display:block;color:#93a4bf;font-size:11px;margin-top:2px}
.nav-label{font-size:10px;font-weight:800;letter-spacing:.14em;color:#64748b;padding:24px 12px 10px}
.sidebar nav{display:grid;gap:6px}
.sidebar nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;color:#aebbd0;font-weight:600;transition:.2s}
.sidebar nav a svg{width:18px;height:18px;opacity:.9}
.sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar nav a.active{background:#1e2b45;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.sidebar-footer{margin-top:auto;padding:16px 10px 4px;color:#8090aa;font-size:11px}
.sidebar-footer strong{display:block;color:#d6deea;font-size:12px;margin-bottom:2px}
.main{min-width:0;padding:28px 30px 42px}
.page-wrap{max-width:1480px;margin:0 auto}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}
.topbar h1{margin:3px 0 0;font-size:30px;line-height:1.18;letter-spacing:-.035em;font-weight:800}
.eyebrow{margin:0;color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.muted{color:var(--muted)}
.topbar .muted{margin:8px 0 0;font-size:14px}
.btn{border:0;border-radius:11px;padding:11px 16px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;transition:.18s;white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.18)}
.btn.primary:hover{background:var(--primary-2);transform:translateY(-1px)}
.btn.secondary{background:#fff;border:1px solid var(--line-strong);color:#344054;box-shadow:var(--shadow-soft)}
.btn.secondary:hover{background:#f8fafc;border-color:#cbd5e1}
.btn:disabled{cursor:not-allowed;transform:none!important}
.hero{background:linear-gradient(135deg,#0f172a 0%,#16213a 55%,#1e3a8a 120%);color:#fff;padding:38px;border-radius:22px;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:34px;align-items:center;overflow:hidden;position:relative}
.hero:after{content:'';position:absolute;width:360px;height:360px;border-radius:50%;right:-150px;top:-170px;background:rgba(96,165,250,.16);filter:blur(4px)}
.hero>div{position:relative;z-index:1}.hero h2{font-size:40px;line-height:1.08;letter-spacing:-.04em;margin:14px 0 12px;max-width:760px}.hero p{color:#c9d5e7;font-size:15px;max-width:680px;margin:0 0 22px}
.pill{display:inline-flex;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.09);color:#dbeafe;font-size:11px;font-weight:800;letter-spacing:.04em}
.hero-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:20px;display:grid;gap:7px;backdrop-filter:blur(10px)}
.hero-card span{color:#9fb0c9;font-size:11px;margin-top:7px}.hero-card strong{font-size:18px;color:#fff}
.ok{color:#86efac!important}.error{color:#fca5a5!important}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow-soft)}
.card-icon{width:40px;height:40px;border-radius:12px;background:var(--primary-soft);display:grid;place-items:center;color:var(--primary)}
.card-icon svg{width:20px;height:20px}.card h3{margin:14px 0 7px;font-size:15px}.card p{color:var(--muted);margin:0;font-size:13px}
.alert{padding:13px 15px;border-radius:12px;margin-bottom:16px;font-weight:600;border:1px solid transparent}
.alert.success{background:var(--success-soft);color:var(--success);border-color:#d2f4df}
.alert.error{background:var(--danger-soft);color:var(--danger);border-color:#ffd9d6}
.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px;box-shadow:var(--shadow-soft)}
.stat-card .label{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:11px;font-weight:700}
.stat-card .stat-icon{width:30px;height:30px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;color:#64748b}
.stat-card .stat-icon svg{width:15px;height:15px}
.stat-card strong{display:block;margin-top:11px;font-size:25px;letter-spacing:-.03em}
.progress-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px;box-shadow:var(--shadow-soft);margin-bottom:20px}
.progress-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:11px}
.progress-head strong{font-size:13px}.progress-head span{font-size:12px;color:var(--muted)}
.progress-track{height:9px;border-radius:999px;background:#edf1f6;overflow:hidden}.progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,#2563eb,#60a5fa)}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:26px 0 12px}
.section-head h2{font-size:16px;margin:0;letter-spacing:-.01em}.section-head p{margin:3px 0 0;color:var(--muted);font-size:12px}
.updates{display:grid;gap:12px}
.update-item{display:grid;grid-template-columns:54px minmax(0,1fr);gap:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow-soft);transition:.18s}
.update-item:hover{border-color:#d5ddea;box-shadow:0 12px 30px rgba(15,23,42,.07)}
.update-status{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#f0f4f8;color:#6b7280;font-weight:800;font-size:15px}
.update-status.pending{background:var(--primary-soft);color:var(--primary)}
.update-status.installed{background:var(--success-soft);color:var(--success)}
.update-status.failed{background:var(--danger-soft);color:var(--danger)}
.update-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.version{display:inline-flex;color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.update-head h3{margin:3px 0 0;font-size:16px;letter-spacing:-.01em}
.update-body>p{color:var(--muted);margin:8px 0 0;font-size:13px}
.badge{padding:6px 9px;border-radius:999px;font-size:10px;font-weight:800;background:#f2f4f7;color:#667085}
.badge.pending{background:var(--primary-soft);color:var(--primary)}
.badge.installed{background:var(--success-soft);color:var(--success)}
.badge.failed{background:var(--danger-soft);color:var(--danger)}
.meta{font-size:11px;color:var(--muted);margin-top:12px}
.error-box{display:flex;align-items:flex-start;gap:8px;background:var(--danger-soft);color:#a33a34;padding:11px 12px;border:1px solid #ffd9d6;border-radius:10px;margin:12px 0 0;font-size:12px}
.update-form{display:flex;align-items:center;gap:13px;margin-top:14px}
.loading{font-size:12px;color:var(--muted)}
.spinner{display:inline-block;width:13px;height:13px;border:2px solid #cdd7e8;border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px;margin-right:5px}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}.summary-grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}.hero-card{max-width:520px}}
@media(max-width:860px){.shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto;min-height:auto;padding:14px 16px}.brand{border-bottom:0;padding:0}.nav-label,.sidebar-footer{display:none}.sidebar nav{display:flex;margin-top:12px}.sidebar nav a{flex:1;justify-content:center}.main{padding:20px}.topbar{align-items:flex-start}.hero h2{font-size:34px}}
@media(max-width:620px){.main{padding:14px}.topbar{flex-direction:column}.topbar h1{font-size:25px}.summary-grid,.cards{grid-template-columns:1fr}.hero{padding:24px}.hero h2{font-size:30px}.update-item{grid-template-columns:1fr}.update-head{flex-direction:column}.btn{width:100%}.update-form{align-items:stretch;flex-direction:column}.sidebar nav a{font-size:12px}}