:root {
  --brand-1: #7c3aed;
  --brand-2: #2563eb;
  --brand-3: #22c55e;
  --brand-gradient: linear-gradient(90deg, var(--brand-1) 0%, var(--brand-2) 52%, var(--brand-3) 100%);
  --brand-glow-1: rgba(124,58,237,.18);
  --brand-glow-2: rgba(37,99,235,.14);
  --brand-glow-3: rgba(34,197,94,.12);
  --light-bg: #f5f7fb;
  --light-panel: rgba(255,255,255,.92);
  --light-panel-2: rgba(248,250,252,.96);
  --light-text: #0f172a;
  --light-muted: #64748b;
  --light-border: #dbe3f1;
  --light-link: #1d4ed8;
  --light-sidebar-bg: rgba(255,255,255,.92);
  --dark-bg: #08111f;
  --dark-panel: rgba(14,26,49,.9);
  --dark-panel-2: rgba(18,33,64,.92);
  --dark-text: #eaf0ff;
  --dark-muted: #96a3c0;
  --dark-border: #263758;
  --dark-link: #8cb9ff;
  --dark-sidebar-bg: rgba(14,26,49,.92);
  --focus-ring: rgba(124,58,237,.16);
  --light-sidebar-active-bg: rgba(124,58,237,.10);
  --light-sidebar-active-border: rgba(124,58,237,.22);
  --dark-sidebar-active-bg: rgba(124,58,237,.18);
  --dark-sidebar-active-border: rgba(124,58,237,.28);
  --good: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;
  --info: #3b82f6;
  --shadow-lg: 0 16px 40px rgba(2, 8, 23, .16);
}
html[data-theme="dark"] {
  --bg: var(--dark-bg);
  --panel: var(--dark-panel);
  --panel-2: var(--dark-panel-2);
  --text: var(--dark-text);
  --muted: var(--dark-muted);
  --border: var(--dark-border);
  --link: var(--dark-link);
  --sidebar-bg: var(--dark-sidebar-bg);
  --sidebar-active-bg: var(--dark-sidebar-active-bg);
  --sidebar-active-border: var(--dark-sidebar-active-border);
  --sidebar-hover: rgba(255,255,255,.05);
}
html[data-theme="light"] {
  --bg: var(--light-bg);
  --panel: var(--light-panel);
  --panel-2: var(--light-panel-2);
  --text: var(--light-text);
  --muted: var(--light-muted);
  --border: var(--light-border);
  --link: var(--light-link);
  --sidebar-bg: var(--light-sidebar-bg);
  --sidebar-active-bg: var(--light-sidebar-active-bg);
  --sidebar-active-border: var(--light-sidebar-active-border);
  --sidebar-hover: rgba(15,23,42,.05);
  --shadow-lg: 0 14px 34px rgba(15, 23, 42, .08);
}

html, body { min-height:100%; }
* { box-sizing:border-box; }
body.app-auth { height: 100dvh; overflow: hidden; }
body.app-anon { min-height: 100dvh; }
body {
  background:
    radial-gradient(950px 430px at -10% 0%, var(--brand-glow-1), transparent 58%),
    radial-gradient(900px 460px at 18% 35%, var(--brand-glow-2), transparent 60%),
    radial-gradient(850px 420px at 105% 10%, var(--brand-glow-3), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.45;
  margin:0;
}
a { color: var(--link); text-decoration:none; }
a:hover { color: color-mix(in srgb, var(--link) 78%, white); }
.topbar {
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
.brandbar {
  background: var(--brand-gradient);
  color:#fff;
  font-weight:700;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.layout-shell { display:flex; height:100dvh; min-height:100dvh; overflow:hidden; }
.main-shell { flex:1; min-width:0; height:100dvh; min-height:100dvh; overflow-y:auto; overflow-x:hidden; }
.page-wrap { padding: 1.1rem 1.25rem 1.5rem; }
.page-header { margin-bottom: 1rem; }
.compact-header { margin-bottom: .85rem; }
.page-title { font-size: clamp(1.55rem, 2vw, 2rem); font-weight:800; letter-spacing:-.02em; margin:0; }
.page-subtitle { color: var(--muted); margin-top:.3rem; max-width: 70ch; font-size:.98rem; }
.eyebrow { display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.11em; color: var(--muted); margin-bottom:.38rem; }
.small-muted { color: var(--muted); font-size:.92rem; }
.sidebar {
  width: 278px;
  height:100dvh;
  min-height:100dvh;
  max-height:100dvh;
  flex: 0 0 278px;
  background:
    radial-gradient(900px 420px at -5% 0%, var(--brand-glow-1), transparent 58%),
    radial-gradient(850px 420px at 22% 24%, var(--brand-glow-2), transparent 60%),
    radial-gradient(820px 380px at 32% 115%, var(--brand-glow-3), transparent 60%),
    var(--sidebar-bg);
  border-right:1px solid var(--border);
  position:sticky;
  top:0;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  backdrop-filter: blur(8px);
}
.sidebar-top { flex: 0 0 auto; }
.sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; align-content: flex-start; padding-right: .2rem; margin-right: -.2rem; }
.sidebar-title { font-size: 1.45rem; font-weight: 800; line-height:1.1; }
.sidebar .nav-link {
  color: var(--text);
  border:1px solid transparent;
  border-radius: 14px;
  padding: .7rem .85rem;
  margin-bottom: .3rem;
  display:flex;
  align-items:center;
  gap:.6rem;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.sidebar .nav-link:hover { background: var(--sidebar-hover); border-color: color-mix(in srgb, var(--border) 70%, transparent); transform: translateX(1px); }
.sidebar .nav-link.active { background: var(--sidebar-active-bg); border-color: var(--sidebar-active-border); }
.sidebar-footer { flex: 0 0 auto; margin-top:.4rem; padding-top:.9rem; border-top:1px solid color-mix(in srgb, var(--border) 75%, transparent); display:grid; gap:.65rem; background: color-mix(in srgb, var(--sidebar-bg) 92%, transparent); }
.card.shell-card,
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
}
.card-body { padding: 1rem 1.05rem; }
.card-body-lg { padding: 1.1rem 1.15rem; }
.section-kicker { font-size:.72rem; text-transform:uppercase; letter-spacing:.11em; color: var(--muted); margin-bottom:.38rem; }
.section-title-row { display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; }
.muted-pill { display:inline-flex; align-items:center; padding:.3rem .62rem; border-radius:999px; background: color-mix(in srgb, var(--panel-2) 88%, transparent); border:1px solid color-mix(in srgb, var(--border) 80%, transparent); color: var(--muted); font-size:.78rem; }
.stats-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.stats-card {
  position:relative; overflow:hidden; display:flex; gap:.8rem; align-items:flex-start;
  padding:.95rem 1rem; border-radius: 16px; border:1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 90%, transparent), color-mix(in srgb, var(--panel) 96%, transparent));
}
.stats-card::after { content:""; position:absolute; inset:auto 0 0 0; height:3px; background: var(--brand-gradient); opacity:.95; }
.stats-icon { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:1.1rem; background: color-mix(in srgb, var(--panel-2) 75%, transparent); flex:0 0 auto; }
.stats-label { color: var(--muted); font-size:.84rem; }
.stats-value { font-size: 1.65rem; font-weight:800; line-height:1.05; margin-top:.15rem; }
.stats-meta { color: var(--muted); font-size:.78rem; margin-top:.18rem; }
.accent-primary::after { background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); }
.accent-info::after { background: linear-gradient(90deg, #38bdf8, #2563eb); }
.accent-success::after { background: linear-gradient(90deg, #34d399, #16a34a); }
.accent-warning::after { background: linear-gradient(90deg, #fbbf24, #f97316); }
.dashboard-header { display:flex; justify-content:space-between; align-items:flex-end; gap:.85rem; flex-wrap:wrap; }
.dashboard-header-note { min-width: 170px; padding: .75rem .85rem; border-radius: 14px; background: color-mix(in srgb, var(--panel-2) 85%, transparent); border:1px solid color-mix(in srgb, var(--border) 78%, transparent); }
.dashboard-header-value { font-size:1rem; font-weight:700; }
.dashboard-grid { display:grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .95fr); gap: .8rem; }
.trend-chart { height: 185px; display:flex; align-items:flex-end; gap: .65rem; padding-top: .4rem; }
.trend-bar-wrap { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:.45rem; }
.trend-bar { width:100%; min-height:18px; border-radius: 12px 12px 7px 7px; background: var(--brand-gradient); box-shadow: 0 10px 20px color-mix(in srgb, var(--brand-2) 28%, transparent); display:flex; align-items:flex-start; justify-content:center; padding-top:.28rem; color:#fff; font-size:.72rem; font-weight:700; }
.trend-label { color: var(--muted); font-size:.78rem; }
.health-stack, .mini-breakdown, .heartbeat-list { display:grid; gap:.7rem; }
.health-item, .heartbeat-item { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding: .8rem .9rem; border-radius:14px; background: color-mix(in srgb, var(--panel-2) 86%, transparent); border:1px solid color-mix(in srgb, var(--border) 72%, transparent); }
.health-label { color: var(--muted); font-size:.8rem; }
.health-value { font-size:1.18rem; font-weight:800; }
.status-dot { width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 5px color-mix(in srgb, var(--panel-2) 85%, transparent); }
.status-dot.danger { background: var(--bad); }
.status-dot.warning { background: var(--warn); }
.status-dot.info { background: var(--info); }
.mini-breakdown-row { display:grid; gap:.35rem; }
.mini-breakdown-head { display:flex; align-items:center; justify-content:space-between; gap:.7rem; font-size:.88rem; }
.mini-breakdown-track { height: 8px; border-radius:999px; background: color-mix(in srgb, var(--border) 55%, transparent); overflow:hidden; }
.mini-breakdown-fill { height:100%; border-radius:999px; background: var(--brand-gradient); }
.heartbeat-title { font-weight:700; }
.heartbeat-meta, .heartbeat-time { color: var(--muted); font-size:.8rem; }
.heartbeat-side { text-align:right; }
.heartbeat-status { display:inline-flex; align-items:center; justify-content:center; padding:.22rem .55rem; border-radius:999px; background: rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.22); color: color-mix(in srgb, var(--text) 86%, #dbeafe); font-size:.76rem; margin-bottom:.25rem; }
.table-wrap { overflow:auto; border-radius:14px; }
.table { color: var(--text); margin-bottom:0; }
.table > :not(caption) > * > * { background: transparent; color: var(--text); border-color: color-mix(in srgb, var(--border) 76%, transparent); vertical-align: middle; padding: .72rem .8rem; }
.table thead th { color: color-mix(in srgb, var(--muted) 82%, var(--text)); font-size:.74rem; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; padding-top: .72rem; padding-bottom: .72rem; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--panel-2) 82%, transparent); }
.empty-state { border:1px dashed color-mix(in srgb, var(--border) 76%, transparent); border-radius:14px; padding:1rem; color: var(--muted); text-align:center; }
.empty-state.compact { padding:.75rem .85rem; }
.form-control, .form-select {
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
  border-color: var(--border);
  color: var(--text);
  border-radius: 12px;
  min-height: 40px;
  padding: .55rem .75rem;
}
.form-control::placeholder { color: var(--muted); }
.form-control:focus, .form-select:focus { background: color-mix(in srgb, var(--panel-2) 92%, transparent); color: var(--text); border-color: color-mix(in srgb, var(--brand-1) 60%, white); box-shadow: 0 0 0 .18rem var(--focus-ring); }
.form-label, .text-muted, .form-text, small { color: var(--muted) !important; }
.form-text { font-size:.78rem; }
.form-check-input { background-color: color-mix(in srgb, var(--panel-2) 90%, transparent); border-color: var(--border); }
.form-check-input:checked { background-color: var(--brand-2); border-color: var(--brand-2); }
.btn { border-radius: 11px; font-weight: 700; padding: .55rem .85rem; transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease; line-height:1.25; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--brand-gradient); border:none; color:#fff; }
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.05); color:#fff; }
.btn-outline-light { color: var(--text); border-color: var(--border); background: color-mix(in srgb, var(--panel-2) 86%, transparent); }
.btn-outline-light:hover, .btn-outline-light:focus { background: color-mix(in srgb, var(--panel-2) 96%, transparent); color: var(--text); border-color: color-mix(in srgb, var(--border) 90%, white); }
.btn-danger { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.38); color: #991b1b; }
.btn-danger:hover, .btn-danger:focus { background: rgba(239,68,68,.22); border-color: rgba(220,38,38,.5); color: #7f1d1d; }
html[data-theme="dark"] .btn-danger { color: #fee2e2; }
html[data-theme="dark"] .btn-danger:hover,
html[data-theme="dark"] .btn-danger:focus { color: #fff; }
.btn-soft { background: color-mix(in srgb, var(--panel-2) 82%, transparent); border: 1px solid color-mix(in srgb, var(--border) 76%, transparent); color: var(--text); }
.btn-soft:hover, .btn-soft:focus { background: color-mix(in srgb, var(--panel-2) 95%, transparent); color: var(--text); }
.alert { border-radius: 14px; padding: .85rem .95rem; }
.section-actions { display:flex; gap:.55rem; flex-wrap:wrap; }
.compact-actions { gap:.45rem; }
.settings-tabs { display:flex; gap:.55rem; flex-wrap:wrap; }
.settings-tabs .btn.active { background: var(--brand-gradient); border-color: transparent; color: #fff; }
.info-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.compact-info-grid { gap: .55rem; }
.info-tile { padding: .75rem .85rem; border-radius: 14px; background: color-mix(in srgb, var(--panel-2) 86%, transparent); border:1px solid color-mix(in srgb, var(--border) 74%, transparent); }
.info-label { color: var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.18rem; }
.info-value { font-weight:700; }
.status-badge { display:inline-flex; align-items:center; padding:.28rem .62rem; border-radius:999px; font-size:.76rem; font-weight:700; border:1px solid transparent; }
.status-active { color:#14532d !important; background: rgba(34,197,94,.16); border-color: rgba(34,197,94,.34); }
html[data-theme="dark"] .status-active { color:#d1fae5; }
.status-warning, .status-grace { color:#9a3412 !important; background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.34); }
html[data-theme="dark"] .status-warning, html[data-theme="dark"] .status-grace { color:#fef3c7; }
.status-expired, .status-revoked { color:#991b1b !important; background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.34); }
html[data-theme="dark"] .status-expired, html[data-theme="dark"] .status-revoked { color:#fee2e2; }
.status-perpetual { color:#1d4ed8 !important; background: rgba(59,130,246,.15); border-color: rgba(59,130,246,.32); }
.status-unknown { color:#475569 !important; background: rgba(148,163,184,.15); border-color: rgba(148,163,184,.32); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.86rem; }
.login-shell { min-height: 100vh; display:grid; place-items:center; padding:1.25rem; }
.login-card { max-width: 460px; width:100%; }
.login-logo { font-size: .88rem; letter-spacing:.06em; text-transform: uppercase; color:#fff; font-weight:800; }
.brand-logo { max-width: 100%; max-height: 74px; object-fit: contain; }
.preview-image { max-width: 230px; max-height: 88px; object-fit: contain; background: color-mix(in srgb, var(--panel-2) 84%, transparent); padding: .5rem; border-radius: 12px; border:1px solid color-mix(in srgb, var(--border) 76%, transparent); }
.preview-favicon { width: 34px; height: 34px; object-fit: contain; background: color-mix(in srgb, var(--panel-2) 84%, transparent); padding: .28rem; border-radius: 10px; border:1px solid color-mix(in srgb, var(--border) 76%, transparent); }
.brand-preview-card { padding:.8rem; border-radius:16px; border:1px solid color-mix(in srgb, var(--border) 74%, transparent); background: color-mix(in srgb, var(--panel-2) 86%, transparent); }
.brand-preview-shell {
  border-radius:14px; overflow:hidden; border:1px solid color-mix(in srgb, var(--border) 76%, transparent);
  min-height: 255px; display:grid; grid-template-columns: 72px 1fr;
}
.brand-preview-sidebar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-glow-1) 40%, transparent), transparent 60%),
    color-mix(in srgb, var(--panel-2) 92%, transparent);
  border-right:1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.brand-preview-main { display:grid; grid-template-rows: 10px 1fr; }
.brand-preview-header { height:10px; background: var(--brand-gradient); }
.brand-preview-body { padding:.85rem; display:grid; gap:.8rem; }
.brand-preview-top { display:flex; align-items:center; gap:.7rem; }
.brand-preview-logo { max-width: 132px; max-height: 48px; object-fit: contain; }
.brand-preview-favicon { width: 26px; height: 26px; border-radius: 8px; object-fit: contain; }
.brand-preview-title { font-size:.96rem; font-weight:800; }
.brand-preview-subtitle { color: var(--muted); font-size:.8rem; }
.brand-preview-actions { display:flex; gap:.55rem; flex-wrap:wrap; }
.brand-preview-chip { padding:.32rem .58rem; border-radius:999px; background: color-mix(in srgb, var(--panel) 75%, transparent); border:1px solid color-mix(in srgb, var(--border) 72%, transparent); font-size:.76rem; color: var(--muted); }
.brand-preview-swatches { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.55rem; }
.brand-swatch { min-height: 78px; border-radius:12px; padding:.7rem; border:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; justify-content:space-between; }
.brand-swatch-label { font-size:.72rem; color: rgba(255,255,255,.84); text-transform:uppercase; letter-spacing:.08em; }
.brand-swatch-value { font-weight:700; margin-top:.18rem; color:#fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.color-input-wrap { display:grid; gap:.45rem; }
.compact-color-wrap { gap:.35rem; }
.color-code { padding:.42rem .58rem; border-radius:10px; background: color-mix(in srgb, var(--panel-2) 86%, transparent); border:1px solid color-mix(in srgb, var(--border) 74%, transparent); }
.form-control[type="file"] { padding:.45rem .65rem; }
.download-verify-form .form-control { min-width: 220px; }
.page-stack { display:grid; gap:1rem; }
.table-wrap { padding: .15rem 0; }
.table tbody tr td:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.table tbody tr td:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.section-actions .btn, .compact-actions .btn { min-width: 98px; justify-content:center; }
.btn-logout { background: color-mix(in srgb, var(--panel-2) 82%, transparent); color: var(--text) !important; border: 1px solid color-mix(in srgb, var(--border) 76%, transparent); }
.btn-logout:hover, .btn-logout:focus { background: color-mix(in srgb, var(--panel-2) 95%, transparent); color: var(--text) !important; }
.preview-light {
  background:
    radial-gradient(260px 140px at 0% 0%, var(--brand-glow-1), transparent 55%),
    radial-gradient(260px 140px at 100% 0%, var(--brand-glow-2), transparent 55%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(245,247,251,.99));
  color:#0f172a;
}
.preview-dark {
  background:
    radial-gradient(260px 140px at 0% 0%, var(--brand-glow-1), transparent 55%),
    radial-gradient(260px 140px at 100% 0%, var(--brand-glow-2), transparent 55%),
    linear-gradient(145deg, rgba(8,17,31,.98), rgba(18,33,64,.96));
  color:#eaf0ff;
}
.preview-light .brand-preview-subtitle,
.preview-light .brand-preview-chip { color:#475569; }
.preview-light .brand-preview-chip { background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.08); }
.preview-light .btn-outline-light.btn-preview-static { background: rgba(15,23,42,.05); border-color: rgba(15,23,42,.12); color:#0f172a; }
.preview-dark .btn-outline-light.btn-preview-static { color:#eaf0ff; }
.preview-light .brand-preview-sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--brand-glow-1) 45%, transparent), transparent 62%), rgba(255,255,255,.88); }
.preview-dark .brand-preview-sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--brand-glow-1) 40%, transparent), transparent 62%), rgba(15,24,51,.86); }
.brand-preview-actions .btn-preview-static { pointer-events:none; }
.text-break { word-break: break-word; }
@media (max-width: 1200px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-grid { grid-template-columns: 1fr; } }
@media (max-width: 992px) { .layout-shell { display:block; height:auto; min-height:100dvh; } .main-shell { height:auto; min-height:0; overflow:visible; } .sidebar { width:100%; min-height:auto; max-height:none; height:auto; position:static; } .sidebar-nav { overflow:visible; } .page-wrap { padding: .95rem 1rem 1.25rem; } body.app-auth { overflow:auto; height:auto; } }
@media (max-width: 768px) {
  .page-title { font-size: 1.42rem; }
  .section-actions { display:grid; grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .table-wrap { border:none; }
  .mobile-cards thead { display:none; }
  .mobile-cards, .mobile-cards tbody, .mobile-cards tr, .mobile-cards td { display:block; width:100%; }
  .mobile-cards tr { border:1px solid color-mix(in srgb, var(--border) 74%, transparent); border-radius:14px; margin-bottom:.75rem; padding:.4rem .2rem; background: color-mix(in srgb, var(--panel-2) 82%, transparent); }
  .mobile-cards td { border:none !important; padding:.42rem .7rem !important; }
  .mobile-cards td::before { content: attr(data-label); display:block; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color: var(--muted); margin-bottom:.18rem; }
  .download-verify-form .input-group { display:block; }
  .download-verify-form .btn { width:100%; margin-top:.45rem; }
  .heartbeat-item, .brand-preview-top { flex-direction:column; align-items:flex-start; }
  .heartbeat-side { text-align:left; }
  .info-grid, .brand-preview-swatches { grid-template-columns: 1fr; }
  .brand-preview-shell { grid-template-columns: 56px 1fr; }
}

.login-brand-wrap { display:grid; justify-items:center; gap:.15rem; }
.login-brand-image { max-width: 240px; max-height: 82px; object-fit: contain; }
.login-kicker { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.login-links a { font-weight: 600; }

.command-block {
    background: rgba(5, 10, 25, 0.95);
    border: 1px solid rgba(120, 150, 220, 0.18);
    border-radius: 12px;
    overflow-x: auto;
}

.command-block pre {
    margin: 0;
    padding: 1rem 1.1rem;
    color: #e8f0ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.95rem;
    line-height: 1.6;
}

.install-steps {
    padding-left: 1.15rem;
}

.install-steps li {
    margin-bottom: 0.35rem;
}