/* ==========================================
   SparkBox — Friendly, Apple-ish Dashboard
   ========================================== */

/* Inter font loaded from system stack -- no external CDN/Google Fonts for offline-first privacy */
/* If you need Inter specifically, self-host the font files in /public/fonts/ */

:root {
  /* =================================================================
     Dark palette tuned to match the light mode's clean, readable feel.
     Key differences from the previous Raycast-derived ladder:
       • Warmer base (#0F1117 vs cold #0B0D12) — feels like a comfortable
         dark room rather than a clinical void
       • Real ambient drop shadows (not ring-shadow tricks) — cards feel
         lifted off the page instead of etched into it
       • Text primary at #F8F9FB — matches the readability punch that
         dark-on-white gives the light mode
       • Accent back to violet-500 for vibrancy against dark surfaces
     ================================================================= */
  --bg-0: #0F1117;            /* warm near-black page base */
  --bg-1: #1A1D26;            /* card surface — 3:1 against bg-0 */
  --bg-2: #262B37;            /* hover / inner panels */
  --bg-3: #323847;            /* modals, tooltips */

  /* Borders — subtle but visible hairlines. Cards lean on shadows, not
     borders, for depth. */
  --border: #2A2E3A;          /* default hairline */
  --border-strong: #3E4352;   /* hovered, focused */
  --border-hair: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.04);

  /* Elevation — real ambient drop shadows, mirror of the light mode.
     Cards feel lifted off the page, not etched into the void. */
  --elev-1:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 0 0 1px var(--border);
  --elev-2:
    0 8px 24px -8px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 0 0 1px var(--border);
  --elev-3:
    0 24px 64px -16px rgba(0, 0, 0, 0.6),
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 0 1px var(--border-strong);

  /* Key-cap: launcher tile and shortcut chip. In the new system the
     keycap is slightly BRIGHTER than the card it sits on, so brand
     icons pop out instead of sinking into wells — same pattern as
     the light mode. */
  --keycap-bg: linear-gradient(180deg, #242834, #1D2029);
  --shadow-keycap:
    0 2px 4px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Warm ambient glow painted behind the top of every page — Raycast's
     single touch of warmth in an otherwise cold palette. */
  --warm-glow: rgba(215, 201, 175, 0.05);

  /* ----- Legacy aliases (kept so non-home pages don't break) ----- */
  --bg: var(--bg-0);
  --bg-elevated: var(--bg-1);
  --bg-card: var(--bg-1);
  --bg-card-hover: var(--bg-2);
  --bg-input: #1E2230;
  --bg-code: #0B0D12;

  /* Text colors — pushed brighter to match the readability punch that
     dark-on-white gives the light mode. All pass WCAG AA against bg-0.
     • --text         #F8F9FB → 17.5:1 (primary, AAA)
     • --text-secondary #C7CCD6 → 10.8:1 (secondary, AAA)
     • --text-muted   #9196A5 → 5.3:1 (muted, AA) */
  --text: #F8F9FB;
  --text-secondary: #C7CCD6;
  --text-muted: #9196A5;

  /* Accent system — tuned for vibrance against the dark surfaces.
     In dark mode we use violet-500 (#8b5cf6) as the base because it
     reads more punchy against the dark backgrounds than violet-600
     does. The light mode overrides this with violet-600 which still
     reads bold on white. Hover goes darker for that "press" feel. */
  --accent: #8b5cf6;         /* violet-500 — primary button fill (dark) */
  --accent-2: #7c3aed;       /* violet-600 — hover/pressed */
  --accent-soft: rgba(139, 92, 246, 0.20);
  --accent-hover: #a78bfa;   /* violet-400 — lighter for focus rings */
  --accent-glow: rgba(139, 92, 246, 0.45);

  /* Secondary "live" accent (running/healthy) */
  --live: #30d158;
  --live-glow: rgba(48, 209, 88, 0.25);
  --warn: #ff9f0a;
  --danger: #ff453a;

  /* Legacy mesh vars (no longer painted in body, still referenced by login) */
  --mesh-1: rgba(124, 58, 237, 0.22);
  --mesh-2: rgba(100, 210, 255, 0.10);
  --mesh-3: rgba(255, 55, 95, 0.08);

  --green: #30d158;
  --green-soft: rgba(48, 209, 88, 0.15);
  --orange: #ff9f0a;
  --orange-soft: rgba(255, 159, 10, 0.15);
  --red: #ff453a;
  --red-soft: rgba(255, 69, 58, 0.15);
  --purple: #bf5af2;
  --purple-soft: rgba(191, 90, 242, 0.15);
  --blue: #64d2ff;
  --blue-soft: rgba(100, 210, 255, 0.15);
  --pink: #ff375f;
  --teal: #5ac8fa;
  --gold: #fcd34d;

  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: var(--elev-1);
  --shadow: var(--elev-2);
  --shadow-lg: var(--elev-3);
  --shadow-glow: 0 0 0 1px rgba(255,255,255,0.04), 0 12px 32px -8px var(--accent-glow);
  --transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Type scale */
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

/* Global app background — Raycast cold-void with a single touch of
   warmth at the top center. The warm radial is the one "atmospheric"
   signal in an otherwise engineered dark UI. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1200px 800px at 50% 0%, var(--warm-glow), transparent 60%);
  background-repeat: no-repeat;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Subtle edge vignette — even cooler on the corners than the center. */
  background: radial-gradient(1600px 1000px at 50% 50%, transparent 60%, rgba(0,0,0,0.5) 100%);
}

/* Base typography — Raycast hallmarks: +0.2px letter-spacing, weight 500
   baseline, Inter OpenType features for correct alternates and kerning.
   Apply at the body level so every text element inherits. */
body {
  letter-spacing: 0.2px;
  font-weight: 500;
  font-feature-settings: "calt", "kern", "liga", "ss03";
}

/* Utility: monospace tabular numerals for stats, timestamps, counts */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
#login-screen, #dashboard, #setup-wizard { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  background: var(--bg-0);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  letter-spacing: -0.005em;
}

.screen { display: none; }
.screen.active { display: block; }
.hidden { display: none !important; }

/* ==============================
   LOGIN
   ============================== */

#login-screen { display: none; }
#login-screen.active { display: flex; }

/* License activation screen — mirrors the login card layout with
   different copy and a different form handler. Same .login-wrap /
   .login-card classes so the visual style stays consistent. */
#license-screen { display: none; }
#license-screen.active { display: flex; }
#license-screen.hidden { display: none !important; }

#license-key-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font: inherit;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-input);
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
#license-key-input:focus {
  outline: none;
  border-color: var(--accent);
}

.license-screen-links {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}
.license-screen-links a {
  color: var(--accent);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
}
.license-screen-links a:hover { text-decoration: underline; }

.license-screen-footer {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}
.license-screen-footer a { color: var(--text-muted); text-decoration: underline; }

.login-wrap {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1000px 600px at 30% 20%, rgba(124, 58, 237, 0.30), transparent 60%),
    radial-gradient(900px 600px at 80% 90%, rgba(56, 189, 248, 0.18), transparent 65%),
    radial-gradient(700px 500px at 50% 50%, rgba(244, 114, 182, 0.08), transparent 70%),
    linear-gradient(160deg, #0b0b0e 0%, #101017 40%, #0a0f18 100%);
}
.login-wrap::before {
  content: '';
  position: absolute;
  inset: -20%;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.035) 0, transparent 2px),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.025) 0, transparent 2px);
  background-size: 120px 120px, 160px 160px;
  pointer-events: none;
  mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 80%);
}

.login-card {
  text-align: center;
  max-width: 440px;
  width: 100%;
  padding: 2.5rem 2rem;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--elev-3);
  position: relative;
  z-index: 1;
}

.login-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  animation: float 4s ease-in-out infinite;
}
.login-hero img, .login-hero svg {
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 12px 32px var(--accent-glow));
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.login-card h1 {
  font-size: 1.85rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  letter-spacing: -0.028em;
  color: var(--text);
}

.login-sub {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 2rem;
  letter-spacing: -0.005em;
}

#login-form input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--bg-2);
  color: var(--text);
  outline: none;
  transition: border 0.15s ease, box-shadow 0.15s ease;
  margin-bottom: 0.75rem;
}

#login-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#login-form input::placeholder { color: var(--text-muted); }

.error-msg {
  color: var(--red);
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* ==============================
   BUTTONS
   ============================== */

/* =================================================================
   MODE TOGGLE — light/dark switch in the topbar
   Shows the sun icon when the dashboard is in dark mode (click to go
   light) and the moon when in light mode (click to go dark). CSS
   toggles which icon is visible based on the root data-theme attr.
   ================================================================= */
.mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}
.mode-toggle:hover {
  background: var(--bg-2);
  color: var(--text);
  border-color: var(--border-strong);
}
.mode-icon { display: none; }
/* Dark mode (default): show sun icon so click goes to light mode */
:root:not([data-theme="light"]) .mode-icon-sun { display: block; }
/* Light mode: show moon icon so click goes back to dark */
:root[data-theme="light"] .mode-icon-moon { display: block; }

/* Settings sub-tabs */
.settings-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 1.5rem;
  padding: 4px;
  background: var(--bg-2);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.settings-tab {
  flex: 1;
  padding: 0.55rem 0.75rem;
  border: none;
  background: none;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.settings-tab:hover {
  color: var(--text-secondary);
  background: var(--bg-3);
}

.settings-tab.active {
  color: var(--text);
  background: var(--bg-card);
  box-shadow: var(--elev-1);
}

.settings-panel {
  animation: fadeIn 0.15s ease;
}

.settings-panel.hidden {
  display: none !important;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 480px) {
  .settings-tabs { flex-wrap: wrap; }
  .settings-tab { flex: none; width: calc(50% - 2px); }
}

/* App UPDATE badge — green pill next to app name when update is available */
.app-update-badge {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 1px 6px;
  background: var(--green, #34d399);
  color: #000;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  border-radius: 3px;
  vertical-align: 2px;
  font-family: var(--font-mono);
  animation: pulse-update 2s ease-in-out infinite;
}

@keyframes pulse-update {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Clean Slate button on installed app cards */
.app-clean-slate {
  display: block;
  margin-top: 4px;
  padding: 2px 0;
  background: none;
  border: none;
  font-size: 0.68rem;
  font-family: inherit;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.app-card:hover .app-clean-slate {
  opacity: 1;
}

.app-clean-slate:hover {
  color: var(--danger, #dc2626);
  text-decoration: underline;
}

/* Pro activation banner — shows on Home when no license is active */
.pro-activation-banner {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1rem 1.5rem;
  margin-bottom: 1.25rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.5;
}

.pro-activation-banner.hidden { display: none; }

/* =================================================================
   APPS PAGE — batch install apply bar
   Fixed-position floating strip at the bottom of the viewport that
   appears when the user has pending toggle changes. Commits all
   changes in one batch request on Apply.
   ================================================================= */

.apps-apply-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem 1rem 0.75rem 1.25rem;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow:
    0 18px 48px -12px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  min-width: 340px;
  max-width: calc(100vw - 32px);
  animation: apply-bar-in 0.2s var(--ease-out);
}
@keyframes apply-bar-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.apps-apply-bar-summary {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
}
.apps-apply-bar-summary strong {
  color: var(--text);
  font-weight: 700;
}

.apps-apply-bar-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
  .apps-apply-bar { animation: none; }
}

/* =================================================================
   BUTTONS — flat + square + sharp (2026-04-11)
   Single language: 6px radius corners, solid color fills (NO gradients),
   1px solid borders, no inset highlights, no multi-layer shadows,
   150ms ease transitions. Every button variant follows the same
   geometry — only color changes per role.

   Tiers:
     .btn-pill         — default neutral (dark fill, muted text)
     .btn-pill.primary — primary action (solid accent fill, white text)
     .btn-pill.danger  — destructive (danger-colored text on neutral fill)
     .btn-main         — same as .btn-pill.primary but can be full-width
                         (login form). Kept for legacy HTML compat.
     .btn-soft         — secondary on colored backgrounds (translucent accent)
     .btn-ghost        — tertiary transparent + border
   ================================================================= */

.btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.2rem;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: -0.005em;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Only stretch to full width in the login form (narrow card context).
 * Everywhere else, .btn-main sizes to its content. */
#login-form .btn-main,
.btn-main.block {
  width: 100%;
  padding: 0.75rem 1.4rem;
  font-size: 0.95rem;
}

.btn-main:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #fff;
}

.btn-main:active { background: var(--accent-2); }

.btn-main:disabled, .btn-soft:disabled, .btn-pill:disabled, .btn-ghost:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading spinner for buttons */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  background: var(--accent-soft);
  color: var(--accent-hover);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-soft:hover {
  background: var(--accent-soft);
  filter: brightness(1.3);
  border-color: var(--accent);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-ghost:hover {
  background: var(--bg-2);
  border-color: var(--border-strong);
  color: var(--text);
}

/* Default neutral button — flat fill, 1px border, 6px corners.
 * Name kept as "btn-pill" only for HTML/JS backwards-compatibility;
 * the visual is square, not a pill. */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  min-height: 34px;
  background: var(--bg-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.btn-pill:hover {
  background: var(--bg-3);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-pill.danger {
  color: var(--danger);
  border-color: rgba(255, 69, 58, 0.3);
}
.btn-pill.danger:hover {
  background: rgba(255, 69, 58, 0.1);
  border-color: var(--danger);
  color: var(--danger);
}

/* Primary button — solid accent fill, matches .btn-main visually.
 * Used for "Check for App Updates", "Save Changes", "Upgrade to Pro",
 * "Apply changes", and every other primary action across the dashboard. */
.btn-pill.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.btn-pill.primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #fff;
}

/* ==============================
   TOP BAR
   ============================== */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 60px;
  background: rgba(13, 13, 16, 0.72);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 8px 24px -16px rgba(0,0,0,0.6);
  transform: translateZ(0);
  will-change: backdrop-filter;
}

.topbar-left { display: flex; align-items: center; gap: 0.65rem; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  color: var(--text);
}
.brand-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px var(--accent-glow));
}
.brand-text {
  color: var(--text);
  font-weight: 700;
}

.topbar-nav {
  display: flex;
  gap: 0.15rem;
  padding: 4px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-pill);
}

.tab {
  padding: 0.5rem 1.05rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s var(--ease-out);
  min-height: 36px;
  display: flex;
  align-items: center;
  letter-spacing: -0.005em;
  position: relative;
}
/* External community link — subtle accent so users spot it as a
 * separate destination (demox.world forum, not an internal page). */
.tab-external {
  color: var(--accent);
  background: rgba(167, 139, 250, 0.06);
}
.tab-external:hover {
  background: rgba(167, 139, 250, 0.12);
  color: var(--accent);
}

.tab:hover { color: var(--text); background: rgba(255,255,255,0.05); }

/* Active tab — lifted card surface with clean drop shadow, matching
 * the card treatment elsewhere. */
.tab.active {
  background: var(--bg-1);
  color: var(--text);
  box-shadow: var(--elev-1);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.host-pill {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-input);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
}

.topbar-stats {
  display: inline-flex;
  gap: 2px;
  margin-left: 4px;
}

.topbar-stat {
  font-size: 0.65rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-muted);
  background: var(--bg-input);
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  min-width: 32px;
  text-align: center;
  transition: color 0.2s, background 0.2s;
}

.topbar-stat.warn {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}

@media (max-width: 768px) {
  .topbar-stats { display: none; }
}

/* ==============================
   MAIN CONTENT
   ============================== */

.main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem 2rem 6rem;
  position: relative;
  z-index: 1;
}
/* Bento home page gets more horizontal room */
.main:has(#page-home.active) {
  max-width: 1320px;
}

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

.section-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin-bottom: 1.25rem;
  margin-top: 0.5rem;
  background: linear-gradient(180deg, #ffffff 0%, #d0d0d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.page-intro {
  margin-bottom: 2rem;
}

.page-intro h1 {
  font-size: 2.15rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 0.4rem;
  background: linear-gradient(180deg, #ffffff 0%, #cfcfd6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-intro p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 520px;
  line-height: 1.5;
}

/* ==============================
   HERO BANNER
   ============================== */

.hero-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2.5rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.25);
}

.hero-text h1 {
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}

.hero-text p {
  font-size: 1rem;
  opacity: 0.85;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.hero-stat {
  text-align: center;
}

.hero-stat-num {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.2rem;
}

.hero-stat-label {
  font-size: 0.75rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.hero-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.2);
}

/* ==============================
   SYSTEM GAUGES
   ============================== */

.system-gauges {
  display: flex;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.gauge-card {
  flex: 1;
  min-width: 140px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: var(--elev-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.gauge-card:hover {
  background: var(--bg-2);
  border-color: var(--border-strong);
  box-shadow: var(--elev-2);
}

.gauge-ring {
  width: 80px;
  height: 80px;
  margin: 0 auto 0.5rem;
}

.gauge-ring svg {
  width: 100%;
  height: 100%;
}

.gauge-bg {
  fill: none;
  stroke: var(--bg-input);
  stroke-width: 3;
}

.gauge-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease, stroke 0.3s ease;
}

.gauge-fill.warn { stroke: var(--orange); }
.gauge-fill.danger { stroke: var(--red); }

.gauge-text {
  fill: var(--text);
  font-size: 0.6rem;
  font-weight: 700;
  text-anchor: middle;
  font-family: 'Inter', sans-serif;
}

.gauge-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gauge-detail {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.gauge-uptime {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  padding: 1.2rem 0;
}

/* ==============================
   SERVICE CARDS (Quick Access)
   ============================== */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.service-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.15rem;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s ease, border-color 0.15s ease;
  box-shadow: var(--elev-1);
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.service-card:hover {
  background: var(--bg-2);
  border-color: var(--border-strong);
}

.service-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.service-info {
  flex: 1;
  min-width: 0;
}

.service-name {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.1rem;
}

.service-status {
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.on { background: var(--green); box-shadow: 0 0 6px rgba(52,199,89,0.4); }
.status-dot.off { background: var(--red); }

/* Pulse animation for running status */
@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(48, 209, 88, 0); }
}

.status-dot.on {
  animation: statusPulse 2s ease infinite;
}

.launcher-icon-status.on {
  animation: statusPulse 2s ease infinite;
}

/* ==============================
   RUNNING LIST
   ============================== */

.running-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.running-row {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.running-row:hover {
  background: var(--bg-2);
  border-color: var(--border-strong);
}

/* Flat container row icon — kill the colored well from app.js's inline
 * style="background:..." and show brand icon on a neutral surface. */
.running-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  background: var(--bg-2) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.running-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.running-info { flex: 1; }

.running-name {
  font-weight: 600;
  font-size: 0.88rem;
}

.running-detail {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.running-stats {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.mini-stat {
  text-align: right;
}

.mini-stat-val {
  font-size: 0.85rem;
  font-weight: 600;
}

.mini-stat-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.running-actions {
  display: flex;
  gap: 0.5rem;
}

.running-actions .btn-pill {
  min-height: 40px;
  min-width: 40px;
  font-size: 0.85rem;
}

/* ==============================
   APPS (Module Store)
   ============================== */

.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.app-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: var(--elev-1);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-card:hover {
  background: var(--bg-2);
  border-color: var(--border-strong);
  box-shadow: var(--elev-2);
}

.app-card.enabled {
  border-color: var(--accent);
  box-shadow: var(--elev-1), 0 0 0 1px var(--accent-soft);
}

.app-card.required {
  border-color: var(--live);
}

/* Pending states — shown when a card has an unapplied change queued
 * by the batch-install system. The card gets a bright border, a
 * colored ambient glow, and a corner flag so it's impossible to miss
 * which apps the user has selected before they hit Apply. */
.app-card.pending-install {
  border-color: var(--accent);
  background: var(--bg-2);
  box-shadow:
    var(--elev-2),
    0 0 0 2px var(--accent),
    0 0 32px -8px var(--accent-glow);
  position: relative;
}
.app-card.pending-install::before {
  content: 'QUEUED · INSTALL';
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 4px 10px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
  border-radius: 0 6px 0 6px;
  z-index: 2;
}

.app-card.pending-remove {
  border-color: var(--danger);
  background: var(--bg-2);
  box-shadow:
    var(--elev-2),
    0 0 0 2px var(--danger),
    0 0 32px -8px rgba(255, 69, 58, 0.4);
  position: relative;
}
.app-card.pending-remove::before {
  content: 'QUEUED · REMOVE';
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 4px 10px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
  border-radius: 0 6px 0 6px;
  z-index: 2;
}

.app-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

/* Flat app-store tile icon. Same treatment as launcher. */
.app-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: var(--bg-2) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.app-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.toggle-wrap {
  padding-top: 0.2rem;
}

/* Legacy .toggle kept for any page that still uses the old switch.
 * The Apps page now uses .app-action-btn below for a clearer
 * "+ Install" / "Installed" affordance. */
.toggle {
  position: relative;
  width: 54px;
  height: 30px;
}
.toggle input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.toggle input:focus-visible + .toggle-track {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.toggle-track {
  position: absolute; inset: 0;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  background: var(--text-secondary);
  border-radius: 3px;
  transition: transform 0.2s ease, background 0.15s ease;
}
.toggle input:checked + .toggle-track { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .toggle-track::after { transform: translateX(22px); background: #fff; }
.toggle input:disabled + .toggle-track { opacity: 0.5; cursor: default; }

/* =================================================================
   .app-action-btn — primary affordance on each app card
   Four visual states driven by the click handler in app.js:
     (default)      "+ Install"   — purple solid, inviting
     .is-installed  "Installed"   — neutral, subtle, hover reveals red "Remove"
     .queued-install "✓ Queued"   — bright purple outline, confirmed pending
     .queued-remove  "✕ Queued"   — red outline, confirmed pending removal
     .locked        "Always On"   — disabled-looking tag for core/dashboard
   ================================================================= */
.app-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  /* 44px min-height to meet the recommended mobile tap target —
     the Apps page is one of the most-tapped surfaces in the UI,
     and the old 32px min was an accessibility miss. */
  min-height: 44px;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.app-action-btn:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}

.app-action-btn.is-installed {
  background: var(--bg-2);
  color: var(--text-secondary);
  border-color: var(--border);
}
/* Hover state for an already-installed app clearly signals "this will
 * remove it" without being destructive-looking at rest. */
.app-action-btn.is-installed:hover {
  background: rgba(255, 69, 58, 0.1);
  color: var(--danger);
  border-color: var(--danger);
}
/* Swap the label text to "Remove" on hover via a pseudo-element trick. */
.app-action-btn.is-installed:hover {
  font-size: 0; /* hide the "Installed" text */
}
.app-action-btn.is-installed:hover::before {
  content: 'Remove';
  font-size: 0.82rem;
}

.app-action-btn.queued-install {
  background: var(--bg-2);
  color: var(--accent-hover);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.app-action-btn.queued-install:hover {
  background: rgba(139, 92, 246, 0.12);
}

.app-action-btn.queued-remove {
  background: var(--bg-2);
  color: var(--danger);
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger) inset;
}
.app-action-btn.queued-remove:hover {
  background: rgba(255, 69, 58, 0.12);
}

.app-action-btn.locked {
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  font-weight: 500;
  cursor: default;
  pointer-events: none;
}

.app-action-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app-name {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  letter-spacing: -0.01em;
}

.app-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 1rem;
}

.app-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.app-tag {
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.app-tag.required { background: var(--green-soft); color: var(--green); }
.app-tag.optional { background: var(--accent-soft); color: var(--accent); }
.app-tag.ram { background: var(--bg-input); color: var(--text-secondary); }
.app-tag.category { background: var(--purple-soft); color: var(--purple); }

/* Post-update banner above the login form. Shown only after a
   successful self-update, since the dashboard restart kills the
   session and dumps the user back here. */
.login-update-banner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(253,186,115,0.08));
  border: 1px solid rgba(99,102,241,0.4);
  border-radius: 10px;
  color: var(--text, #fff);
  font-size: 0.9rem;
  animation: login-update-slide 0.4s ease both;
}
.login-update-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent, #6366f1);
  color: white;
  font-weight: 700;
  flex-shrink: 0;
}
@keyframes login-update-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Store toolbar — search at top, filter pills + sort dropdown below */
.store-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

/* Search box — full width on its own row above the filter pills.
   Magnifier icon on the left, clear (×) on the right, both inside
   the input chrome so it reads as one component. */
.store-search {
  position: relative;
  flex: 1 1 100%;
  display: flex;
  align-items: center;
}
.store-search-icon {
  position: absolute;
  left: 14px;
  color: var(--text-muted, rgba(255,255,255,0.5));
  pointer-events: none;
}
.store-search-input {
  flex: 1;
  padding: 0.7rem 2.5rem 0.7rem 2.4rem;
  background: var(--bg-input, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  color: var(--text, #fff);
  font: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.store-search-input::placeholder { color: var(--text-muted, rgba(255,255,255,0.4)); }
.store-search-input:focus {
  border-color: var(--accent, #6366f1);
  background: var(--bg-input-focus, rgba(99,102,241,0.05));
}
.store-search-clear {
  position: absolute;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted, rgba(255,255,255,0.6));
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.store-search-clear:hover { background: rgba(255,255,255,0.12); color: #fff; }

.store-sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.store-sort-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.store-sort-select {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.store-sort-select:hover {
  border-color: var(--border-strong);
}

.store-sort-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* App NEW badge — shows on cards for modules added in the last 30 days */
.app-new-badge {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 1px 6px;
  background: var(--accent);
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  border-radius: 3px;
  vertical-align: 2px;
  font-family: var(--font-mono);
}

/* Store filter bar */
.store-filter-bar {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.store-filter {
  padding: 0.4rem 0.95rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.store-filter:hover {
  background: var(--bg-3);
  border-color: var(--border-strong);
  color: var(--text);
}

.store-filter.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-hover);
}

.store-stats {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* App card enhancements */
.app-tagline {
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.app-services {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-input);
  border-radius: 8px;
}

.app-services-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.app-service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.2rem 0;
  font-size: 0.82rem;
}

.app-service-name {
  color: var(--text);
  font-weight: 500;
}

.app-service-port {
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.app-tips {
  margin-bottom: 0.75rem;
}

.app-tip {
  font-size: 0.78rem;
  color: var(--teal);
  padding: 0.3rem 0;
  padding-left: 1rem;
  position: relative;
  line-height: 1.4;
}

.app-tip::before {
  content: '\2728';
  position: absolute;
  left: 0;
  font-size: 0.7rem;
}

/* ==============================
   LOGS
   ============================== */

.logs-controls {
  margin-bottom: 1rem;
}

.pill-select {
  padding: 0.6rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--text);
  outline: none;
  min-width: 240px;
  cursor: pointer;
  transition: border var(--transition);
}

.pill-select:focus { border-color: var(--accent); }
.pill-select option { background: var(--bg-card); color: var(--text); }

.log-window {
  background: var(--bg-code);
  border-radius: var(--radius);
  min-height: 400px;
  max-height: calc(100vh - 300px);
  overflow: auto;
  box-shadow: var(--shadow);
}

#log-output {
  padding: 1.25rem;
  font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.78rem;
  line-height: 1.65;
  color: #a1a1aa;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ==============================
   SETTINGS
   ============================== */

.settings-cards {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.settings-group {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--elev-1);
  overflow: hidden;
}

.settings-group-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1.25rem 1.5rem 0.5rem;
}

.setting-row {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.setting-row:last-child { border-bottom: none; }

.setting-label {
  width: 240px;
  flex-shrink: 0;
  font-size: 0.88rem;
  font-weight: 500;
}

.setting-input {
  flex: 1;
  max-width: 400px;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.88rem;
  font-family: inherit;
  background: var(--bg-2);
  color: var(--text);
  outline: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.setting-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--bg-1);
}

.setting-input::placeholder { color: var(--text-muted); }

.settings-actions {
  margin-top: 1rem;
}

.settings-actions .btn-main {
  width: auto;
  padding: 0.7rem 2rem;
}

.backup-actions {
  margin-bottom: 1rem;
}

.backup-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.backup-row {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
}

.backup-row-info { display: flex; flex-direction: column; gap: 0.15rem; }
.backup-row-name { font-weight: 600; font-size: 0.88rem; }
.backup-row-meta { font-size: 0.78rem; color: var(--text-muted); }
.badge-encrypted {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #30d158;
  background: rgba(48, 209, 88, 0.12);
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* ==============================
   TOASTS
   ============================== */

.toast-wrap {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: slideIn 0.35s ease;
  pointer-events: auto;
}

.toast.success { background: var(--green); color: #fff; }
.toast.error { background: var(--red); color: #fff; }
.toast.info { background: var(--accent, #7c5cff); color: #fff; }

@keyframes slideIn {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ==============================
   RESPONSIVE
   ============================== */

@media (max-width: 768px) {
  .topbar { padding: 0.5rem 1rem; flex-wrap: wrap; height: auto; gap: 0.5rem; }
  .topbar-nav { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 3px; }
  .topbar-nav::-webkit-scrollbar { display: none; }
  .tab { flex-shrink: 0; padding: 0.45rem 0.85rem; font-size: 0.82rem; }
  .topbar-right { gap: 0.4rem; }
  .launcher-section { padding: 1.5rem 1.1rem 1.1rem; border-radius: 18px; }
  .launcher-greeting h1 { font-size: 1.55rem; }
  .login-card { padding: 2rem 1.25rem; border-radius: 20px; }
  .login-hero img, .login-hero svg { width: 80px; height: 80px; }
  .main { padding: 1.25rem 1rem 3rem; }
  .hero-banner { flex-direction: column; gap: 1.5rem; text-align: center; padding: 1.75rem; }
  .hero-stats { justify-content: center; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .apps-grid { grid-template-columns: 1fr; }
  .running-stats { display: none; }
  .setting-row { flex-direction: column; align-items: stretch; gap: 0.4rem; }
  .setting-label { width: auto; }
}

@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ==============================
   SCROLLBAR
   ============================== */

/* Focus styles for keyboard navigation */
.tab:focus-visible, .btn-main:focus-visible, .btn-soft:focus-visible,
.btn-pill:focus-visible, .btn-ghost:focus-visible, .service-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a3a3c; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #48484a; }

/* ==============================
   SERVICE DESCRIPTIONS
   ============================== */

.service-card {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.15rem;
}

.service-card .service-icon {
  margin-bottom: 0.15rem;
}

.service-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 0.2rem;
}

.services-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.section-hint {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 0.5rem;
}

/* ==============================
   CRITICAL BADGES
   ============================== */

.critical-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  margin-left: 0.35rem;
  vertical-align: middle;
}

/* ==============================
   CONFIRM DIALOG
   ============================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-overlay.hidden { display: none !important; }

.modal-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 2rem;
  max-width: 420px;
  width: 90%;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.2s ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.modal-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.modal-actions .btn-soft {
  min-width: 80px;
}

/* ---------- Install disclosure modal (pre-install review screen) ---------- */

.install-disclosure-card {
  max-width: 560px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
}

.install-disclosure-intro {
  margin-bottom: 1rem !important;
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.install-disclosure-list {
  overflow-y: auto;
  margin: 0 -0.5rem 1rem -0.5rem;
  padding: 0 0.5rem;
  flex: 1 1 auto;
}

.install-disclosure-section {
  margin-bottom: 1.25rem;
}

.install-disclosure-section:last-child {
  margin-bottom: 0;
}

.install-disclosure-section-title {
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.install-disclosure-item {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.5rem;
}

.install-disclosure-item-disable {
  border-left-color: #e05858;
}

.install-disclosure-item-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.install-disclosure-item-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.install-disclosure-chip {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.install-disclosure-item-services {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-style: italic;
}

.install-disclosure-item code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--bg-0);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
}

.install-disclosure-footer {
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--border);
  margin-bottom: 0.9rem;
}
.install-disclosure-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 0.7rem;
}
/* Loud neon-green patience notice — the whole point is that users
 * see this before they panic about an app not loading. */
.install-disclosure-notice {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.35);
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.18), inset 0 0 0 1px rgba(34, 197, 94, 0.15);
}

.install-disclosure-autocfg {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 0.6rem;
  padding: 0.65rem 0.8rem;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(253,186,115,0.06));
  border: 1px solid rgba(99,102,241,0.4);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text);
}
.install-disclosure-autocfg-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 1px;
}
.install-disclosure-autocfg strong {
  color: var(--accent);
  font-weight: 600;
}
.install-disclosure-notice-icon {
  font-size: 1.3rem;
  line-height: 1;
  color: hsl(142, 71%, 60%);
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
  flex-shrink: 0;
  padding-top: 2px;
}
.install-disclosure-notice-text {
  font-size: 0.85rem;
  line-height: 1.45;
  color: hsl(142, 65%, 82%);
}
.install-disclosure-notice-text strong {
  color: hsl(142, 85%, 70%);
  font-weight: 700;
  text-shadow: 0 0 6px rgba(34, 197, 94, 0.35);
}

.modal-actions .btn-main {
  width: auto;
  min-width: 100px;
  padding: 0.65rem 1.25rem;
}

.btn-main.danger {
  background: var(--danger);
  border-color: var(--danger);
}

.btn-main.danger:hover {
  background: #ff2d20;
  border-color: #ff2d20;
}

/* ==============================
   SETTINGS IMPROVEMENTS
   ============================== */

.setting-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 0.6rem;
  font-weight: 700;
  font-style: italic;
  margin-left: 0.35rem;
  cursor: help;
  vertical-align: middle;
  border: 1px solid var(--border);
}

.danger-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--red-soft);
  color: var(--red);
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  margin-left: 0.35rem;
  vertical-align: middle;
}

.setting-row.dangerous {
  background: rgba(255, 69, 58, 0.04);
}

.setting-row.dangerous .setting-input {
  opacity: 0.6;
}

.settings-group.dangerous-group {
  border: 1px solid rgba(255, 69, 58, 0.2);
}

.group-warning {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--orange);
  text-transform: none;
  letter-spacing: normal;
  margin-left: 0.5rem;
}

/* ==============================
   HELP PAGE
   ============================== */

.help-section {
  margin-bottom: 2.5rem;
}

.help-section h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.help-section > p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 640px;
}

.help-services {
  display: grid;
  gap: 0.75rem;
}

.help-service-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border: 1px solid var(--border);
}

.help-service-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.help-service-info { flex: 1; }

.help-service-name {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.help-service-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 0.3rem;
}

.help-service-tip {
  font-size: 0.78rem;
  color: var(--accent);
  font-style: italic;
}

.help-faq {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
}

.help-faq h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.help-faq p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.help-faq code {
  background: var(--bg-code);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.82rem;
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  color: var(--accent);
}

/* ==============================
   ONBOARDING BANNER
   ============================== */

.onboarding-banner {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: var(--elev-1);
}
.onboarding-banner h2 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0;
}
.onboarding-banner p {
  display: none; /* Hide the description to save space */
}
.onboarding-steps {
  display: flex;
  gap: 0.75rem;
  margin-top: 0;
  flex: 1;
}
.onboarding-step {
  background: var(--bg-input);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.78rem;
  flex: 1;
  min-width: 0;
}
.onboarding-step strong {
  display: block;
  font-size: 0.82rem;
  margin-bottom: 0.1rem;
}
.onboarding-dismiss {
  position: static;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.25rem;
  line-height: 1;
}
.onboarding-dismiss:hover { color: var(--text); }

/* ==============================
   QUICK ACTION BAR
   ============================== */

.quick-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1.75rem;
  background: var(--bg-0);
  border-bottom: 1px solid var(--border);
}

.qa-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.qa-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(48, 209, 88, 0.4);
  flex-shrink: 0;
}

.qa-dot.warn { background: var(--orange); box-shadow: 0 0 6px rgba(255, 159, 10, 0.4); }
.qa-dot.error { background: var(--red); box-shadow: 0 0 6px rgba(255, 69, 58, 0.4); }

.qa-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.qa-btn {
  font-size: 0.78rem;
  padding: 0.35rem 0.75rem;
}

/* ==============================
   GLOBAL SEARCH BAR
   ============================== */

.search-bar {
  margin-bottom: 1.25rem;
}

.search-bar input {
  width: 100%;
  padding: 0.85rem 1.25rem 0.85rem 2.75rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-family: inherit;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  outline: none;
  letter-spacing: -0.005em;
  transition: border 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 0.95rem center;
  background-size: 16px 16px;
}

.search-bar input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-bar input::placeholder {
  color: var(--text-muted);
}

/* ==============================
   APP LAUNCHER (Desktop OS Grid)
   ============================== */

.launcher-section {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--elev-1);
  overflow: hidden;
}
.launcher-section::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 65%);
  pointer-events: none;
  opacity: 0.6;
}

.launcher-greeting {
  position: relative;
  margin-bottom: 1.75rem;
}

.launcher-greeting h1 {
  font-size: 1.95rem;
  font-weight: 700;
  letter-spacing: -0.028em;
  margin-bottom: 0.3rem;
  background: linear-gradient(180deg, #ffffff 0%, #cfcfd6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.launcher-greeting p {
  font-size: 0.98rem;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}

.app-launcher {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.launcher-category {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0.5rem 0 1rem;
  margin-bottom: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--border-soft);
}
.launcher-category:last-child { border-bottom: none; }

.launcher-category-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
  padding-left: 0.25rem;
}

.launcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1.25rem;
}

.launcher-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  padding: 0.75rem 0.5rem;
  border-radius: var(--radius);
  transition: all var(--transition);
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.launcher-icon:hover {
  background: var(--bg-card-hover);
}

.launcher-icon:active {
  /* transform handled on .launcher-icon-circle */
}

/* Raycast key-cap launcher tile.
 * Each icon sits in a gradient rounded square with a 5-layer shadow
 * stack — matches the `⌘K` keyboard chip treatment in Raycast's own UI.
 * Gives every app icon the physicality of a pressable key.
 * app.js sets inline `style="background:..."` via darkBg(moduleColor);
 * we override with !important to force the keycap gradient. */
.launcher-icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 0.55rem;
  background: var(--keycap-bg) !important;
  border: none;
  box-shadow: var(--shadow-keycap);
  transition: opacity 0.18s ease, transform 0.12s ease;
  position: relative;
  overflow: hidden;
}
/* Brand icon SVG inside the keycap — full saturation preserved. */
.launcher-icon-circle img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* Raycast hover = opacity dip, NOT color swap. Subtle but feels intentional. */
.launcher-icon:hover .launcher-icon-circle {
  opacity: 0.75;
  transform: translateY(-1px);
}
.launcher-icon:active .launcher-icon-circle {
  transform: translateY(0);
  opacity: 0.6;
}

/* Degraded/down app: desaturate + dim, like Raycast shows offline tools. */
.launcher-icon-status.unhealthy ~ * .launcher-icon-circle,
.launcher-icon:has(.launcher-icon-status.unhealthy) .launcher-icon-circle {
  filter: saturate(0.3) brightness(0.6);
}

.launcher-icon-status {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg);
}

.launcher-icon-status.on { background: var(--green); }
.launcher-icon-status.off { background: var(--text-muted); }
.launcher-icon-status.error { background: var(--red); }

.launcher-icon-name {
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==============================
   PROFILE SELECTOR
   ============================== */

.profile-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.profile-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 0.25rem;
}

/* .profile-btn = segmented control on the Apps page. Ring-shadow
 * treatment for active matches .tab.active — one segmented-control
 * language across the app. */
.profile-btn {
  padding: 0.4rem 1rem;
  background: transparent;
  border: none;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-muted);
  cursor: pointer;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.profile-btn:hover {
  color: var(--text);
  opacity: 0.85;
}

.profile-btn.active {
  color: var(--text);
  background: var(--bg-1);
  box-shadow: var(--elev-1);
}

/* ==============================
   RAM USAGE BAR
   ============================== */

.ram-usage-bar {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.ram-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
  font-weight: 500;
}

.ram-bar-track {
  height: 8px;
  background: var(--bg-input);
  border-radius: 4px;
  overflow: hidden;
}

.ram-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.4s ease, background 0.3s ease;
}

.ram-bar-fill.warn { background: var(--orange); }
.ram-bar-fill.danger { background: var(--red); }

/* ==============================
   IMPROVED APP CARDS (Apps Tab)
   ============================== */

.app-card-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.app-card-status .status-dot {
  width: 7px;
  height: 7px;
}

.app-card-ram {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ==============================
   RESPONSIVE IMPROVEMENTS
   ============================== */

/* Responsive adjustments for new elements */
@media (max-width: 768px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
  .service-desc { display: none; }
  .help-service-card { flex-direction: column; gap: 0.5rem; }

  .quick-action-bar { padding: 0.5rem 1rem; flex-wrap: wrap; gap: 0.5rem; }
  .launcher-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 0.5rem; }
  .launcher-icon-circle { width: 48px; height: 48px; font-size: 1.35rem; border-radius: 14px; }
  .launcher-icon-name { font-size: 0.68rem; }
  .launcher-greeting h1 { font-size: 1.35rem; }
  .system-gauges { gap: 0.5rem; }
  .gauge-card { padding: 0.85rem 0.5rem; min-width: 0; }
  .gauge-ring { width: 60px; height: 60px; }
  .profile-selector { gap: 0.35rem; }
  .topbar-right .host-pill { display: none; }
}

@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-desc { display: block; }

  .launcher-grid { grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
  .launcher-icon { padding: 0.5rem 0.25rem; }
  .launcher-icon-circle { width: 44px; height: 44px; font-size: 1.2rem; border-radius: 12px; }
  .qa-actions { flex-wrap: wrap; }
  .system-gauges { display: grid; grid-template-columns: 1fr 1fr; }
  .running-actions { flex-direction: column; gap: 0.25rem; }
  .running-actions .btn-pill { font-size: 0.72rem; padding: 0.3rem 0.6rem; }
}

/* ==============================
   PROGRESS MODAL
   ============================== */

.modal-progress {
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.progress-log {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  line-height: 1.55;
  color: #cbd0dc;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-y: auto;
  max-height: 420px;
  min-height: 220px;
  margin: 1rem 0;
}

.progress-log.has-stderr {
  border-color: rgba(224, 88, 88, 0.5);
}

.progress-steps {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.progress-step {
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--bg-input);
  color: var(--text-muted);
  transition: all 0.3s ease;
}

.progress-step.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.progress-step.done {
  background: var(--green-soft);
  color: var(--green);
}

/* ==============================
   MODULE CONFIG MODAL
   ============================== */

.modal-config {
  max-width: 480px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.modal-config > h3,
.modal-config > p,
.modal-config > .config-deps,
.modal-config > .modal-actions {
  flex-shrink: 0;
}

.modal-config #module-config-fields {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 -0.5rem 1rem;
  padding: 0 0.5rem;
}

.modal-config .wizard-field {
  margin-bottom: 1rem;
}

.config-deps {
  background: var(--orange-soft);
  color: var(--orange);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}

/* ==============================
   HEALTH BADGES
   ============================== */

.health-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  margin-left: 0.35rem;
  vertical-align: middle;
}

.health-badge.healthy {
  background: var(--green-soft);
  color: var(--green);
}

.health-badge.unhealthy {
  background: var(--red-soft);
  color: var(--red);
  animation: healthPulse 2s ease infinite;
}

.health-badge.starting {
  background: var(--orange-soft);
  color: var(--orange);
}

@keyframes healthPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.launcher-icon-status.unhealthy {
  background: var(--orange);
}

/* ==============================
   SETUP WIZARD
   ============================== */

.wizard-wrap {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #0d0d0f 0%, #1a1a30 40%, #0d1a1f 100%);
  padding: 2rem;
}

.wizard-card {
  max-width: 560px;
  width: 100%;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-lg);
  /* The card itself is the scroll container. Constraining max-height
     to viewport-minus-margins prevents the flex-centered parent from
     pushing the bottom off-screen on long steps. The nav row is sticky-
     bottom INSIDE this scroll container so it stays visible regardless
     of how far the user has scrolled. (v1.6.15 made wizard-page the
     scroll container with min-height:0, but flexbox collapsed it to
     zero height when content was tall — making input fields invisible.) */
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wizard-card .wizard-nav {
  position: sticky;
  /* Negative bottom cancels the card's bottom padding so the nav row
     hugs the bottom edge of the visible scroll viewport. */
  bottom: -2.5rem;
  background: var(--bg-card);
  z-index: 10;
}

.wizard-steps {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.wizard-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg-input);
  transition: all 0.3s ease;
}

.wizard-dot.active {
  background: var(--accent);
  width: 24px;
  border-radius: 4px;
}

.wizard-dot.done {
  background: var(--green);
}

.wizard-page { text-align: center; }

.wizard-hero {
  font-size: 4rem;
  margin-bottom: 1rem;
  animation: float 3s ease-in-out infinite;
  display: flex;
  justify-content: center;
}
.wizard-hero img { width: 112px; height: 112px; filter: drop-shadow(0 12px 36px var(--accent-glow)); }

.wizard-page h1 {
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.wizard-page h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

.wizard-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.wizard-field {
  text-align: left;
  margin-bottom: 1.25rem;
}

.wizard-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--text);
}

.wizard-field .setting-input,
.wizard-select {
  width: 100%;
}

.wizard-select {
  padding: 0.65rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--bg-input);
  color: var(--text);
  outline: none;
  max-width: none;
}

.wizard-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.wizard-hint {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
  line-height: 1.4;
}

.wizard-hint a,
.wizard-hint a:visited {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wizard-hint a:hover {
  color: var(--accent);
}

.wizard-profiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  text-align: left;
}

.wizard-profile-card {
  background: var(--bg-input);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 0.95rem;
  cursor: pointer;
  transition: all var(--transition);
}

.wizard-profile-card:hover {
  border-color: var(--text-muted);
}

.wizard-profile-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.wpc-icon { font-size: 1.25rem; margin-bottom: 0.25rem; }
.wpc-name { font-weight: 700; font-size: 0.92rem; margin-bottom: 0.2rem; }
.wpc-desc { font-size: 0.74rem; color: var(--text-secondary); line-height: 1.35; margin-bottom: 0.3rem; }
.wpc-ram { font-size: 0.68rem; color: var(--text-muted); font-weight: 500; }

.wizard-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding: 1rem 0 0.5rem;
  border-top: 1px solid hsla(0, 0%, 100%, 0.06);
}

.wizard-progress-area {
  text-align: left;
  margin-top: 1.5rem;
}

@media (max-width: 480px) {
  .wizard-card { padding: 1.5rem; }
  .wizard-profiles { grid-template-columns: 1fr; }
}

/* ==============================
   WELCOME SPLASH (first-run, replaces the old wizard)
   ============================== */

.welcome-wrap {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #0d0d0f 0%, #1a1a30 40%, #0d1a1f 100%);
  padding: 2rem 1.5rem;
}

.welcome-card {
  max-width: 540px;
  width: 100%;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.welcome-hero img {
  filter: drop-shadow(0 8px 24px var(--accent-glow, rgba(139, 92, 246, 0.45)));
  margin-bottom: 0.5rem;
}

.welcome-title {
  margin: 0.25rem 0 0.4rem;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.welcome-subtitle {
  margin: 0 0 1.4rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.welcome-blurb {
  text-align: left;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1.4rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.55;
}

.welcome-blurb p {
  margin: 0 0 0.6rem;
}

.welcome-blurb p:last-child {
  margin-bottom: 0;
}

.welcome-actions {
  margin: 0.5rem 0 1.5rem;
}

.welcome-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.75rem 0 1.5rem;
  font-size: 0.85rem;
}

.welcome-links a {
  color: var(--accent-hover);
  text-decoration: none;
}

.welcome-links a:hover {
  text-decoration: underline;
}

.welcome-sep {
  color: var(--text-muted);
  opacity: 0.5;
}

.welcome-recommended {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.welcome-rec-label {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.welcome-aff-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: hsl(173, 80%, 40%);
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
}

.welcome-aff-link:hover {
  background: hsl(173, 80%, 35%);
}

.welcome-rec-fineprint {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.8;
}

/* ==============================
   VPN PROMO CARDS (Wizard)
   ============================== */

.vpn-promo-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin-top: 0.5rem;
}

.vpn-promo-card {
  display: block;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem;
  text-decoration: none;
  color: var(--text);
  transition: all var(--transition);
  text-align: left;
}

.vpn-promo-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.vpn-promo-card strong {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.vpn-promo-card span {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

@media (max-width: 480px) {
  .vpn-promo-cards { grid-template-columns: 1fr; }
}

/* ==============================
   PRIVACY TOOLS (Help Page)
   ============================== */

.privacy-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}

.privacy-tool-card {
  display: block;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-decoration: none;
  color: var(--text);
  transition: all var(--transition);
}

.privacy-tool-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(167, 139, 250, 0.12);
  transform: translateY(-2px);
}

.ptc-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.ptc-header strong {
  font-size: 1.05rem;
}

.ptc-tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--green-soft);
  color: var(--green);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
}

.privacy-tool-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 480px) {
  .privacy-tools { grid-template-columns: 1fr; }
}

/* ==============================
   DASHBOARD FOOTER
   ============================== */

.dashboard-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem 2rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.footer-brand img { vertical-align: middle; opacity: 0.85; }

.dashboard-footer a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition);
}

.dashboard-footer a:hover {
  color: var(--accent);
}

.footer-sep {
  color: var(--border);
}

/* ==============================
   WIZARD COMMUNITY / DEMOX STEP
   ============================== */

.wizard-community-cards {
  text-align: left;
  margin-top: 0.5rem;
}

.featured-card {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.08) 0%, rgba(100, 210, 255, 0.06) 100%);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  text-align: center;
  margin-bottom: 0.75rem;
  position: relative;
  overflow: hidden;
}

.featured-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 40%, rgba(167, 139, 250, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

.featured-card .cc-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--green-soft);
  color: var(--green);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.75rem;
}

.featured-card .cc-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.featured-card h3 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.featured-card p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 420px;
  margin: 0 auto 0.5rem;
}

.featured-card .cc-cta-text {
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 1rem;
}

.cc-btn {
  width: auto !important;
  display: inline-block;
  padding: 0.7rem 2rem;
  font-size: 0.95rem;
}

.community-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.community-card-sm {
  display: block;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem;
  text-decoration: none;
  color: var(--text);
  transition: all var(--transition);
}

.community-card-sm:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.ccs-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.ccs-header strong {
  font-size: 0.95rem;
}

.community-card-sm p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 480px) {
  .community-cards-row { grid-template-columns: 1fr; }
  .featured-card { padding: 1.25rem; }
}

/* ==========================================
   Pro Badge & License System
   ========================================== */

.pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  color: #ffffff;
  vertical-align: middle;
  margin-left: 0.5rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 -1px 0 rgba(0,0,0,0.2) inset,
    0 4px 12px -4px rgba(139, 92, 246, 0.5);
  text-transform: uppercase;
}
.pro-badge::before {
  content: '\26A1';
  font-size: 0.6rem;
}

.update-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: #fff;
  margin-left: 0.3rem;
  vertical-align: middle;
}

/* License Section in Settings */
.license-status {
  padding: 1rem 1.5rem 0;
}

.license-tier {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tier-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
}

.tier-free {
  background: var(--bg-input);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.tier-pro {
  background: linear-gradient(135deg, #a78bfa, #6d28d9);
  color: #fff;
}

/* Founding Member badge — paid-beta customers grandfathered in the
   2026-05-01 free pivot. Gold treatment to distinguish from regular
   licensed (purple). The pre-pivot $29 buyers get the visual marker
   they paid for before the software went free. */
.tier-founding {
  background: linear-gradient(135deg, #fbbf24, #b45309);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.3);
}
.badge-founding {
  background: linear-gradient(135deg, #fbbf24, #b45309) !important;
  color: #fff !important;
}

.license-features {
  padding: 0.75rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.license-feature-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.lf-check {
  color: var(--green);
  font-size: 0.9rem;
}

.lf-lock {
  font-size: 0.8rem;
}

.lf-tag {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--bg-input);
  color: var(--text-muted);
  margin-left: auto;
}

.lf-tag.pro {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ==========================================
   Updates Page
   ========================================== */

.upgrade-prompt {
  margin-bottom: 2rem;
}

.upgrade-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: var(--elev-1);
}

.upgrade-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.upgrade-card p {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.updates-actions {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.self-update-section {
  margin-bottom: 2rem;
}

.self-update-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}

.self-update-info h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
}

.self-update-info p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.self-update-actions {
  display: flex;
  gap: 0.5rem;
}

.updates-status {
  margin-bottom: 1rem;
}

.updates-last-check {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.updates-list {
  margin-bottom: 1.5rem;
}

.empty-state {
  color: var(--text-muted);
  font-size: 0.88rem;
  padding: 1.5rem;
  text-align: center;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.update-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  transition: background var(--transition);
}

.update-item:hover {
  background: var(--bg-card-hover);
}

.update-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.update-item-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.update-item-image {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.update-item .btn-soft {
  font-size: 0.78rem;
  padding: 0.35rem 0.85rem;
}

/* ==========================================================================
 * Interactive tutorial — spotlight real UI, advance on click.
 *
 * The root overlay is a full-viewport fixed layer with pointer-events:none
 * so the user can still interact with the real dashboard. Only the tooltip
 * (and the big welcome/done modal) capture input.
 * ========================================================================== */
.tutorial-root {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  animation: tutorial-fade-in 220ms ease-out;
}
@keyframes tutorial-fade-in { from { opacity: 0; } to { opacity: 1; } }

.tutorial-mask {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Animated ring around the spotlighted element. */
.tutorial-ring {
  position: fixed;
  border: 2px solid var(--accent);
  border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.25), 0 0 32px rgba(167, 139, 250, 0.45);
  pointer-events: none;
  transition: all 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: tutorial-ring-pulse 2.4s ease-in-out infinite;
}
@keyframes tutorial-ring-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(167,139,250,0.2), 0 0 32px rgba(167,139,250,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(167,139,250,0.3), 0 0 44px rgba(167,139,250,0.6); }
}

/* Tooltip — floats near the target. pointer-events:auto so buttons work. */
.tutorial-tooltip {
  position: fixed;
  max-width: 360px;
  pointer-events: auto;
  transition: left 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
              top  260ms cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 180ms;
}
.mode-modal .tutorial-tooltip { display: none !important; }
.mode-spotlight .tutorial-tooltip { display: block; }

.tutorial-tooltip-inner {
  background: var(--bg-1);
  border: 1px solid rgba(167, 139, 250, 0.4);
  border-radius: 14px;
  padding: 16px 18px 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(167, 139, 250, 0.15);
}
.tutorial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.tutorial-progress {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(167, 139, 250, 0.12);
  padding: 3px 10px;
  border-radius: 999px;
}
.tutorial-skip {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 4px 6px;
}
.tutorial-skip:hover { color: var(--text); }

.tutorial-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.tutorial-body {
  margin: 0 0 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.tutorial-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.tutorial-back, .tutorial-next {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 120ms;
}
.tutorial-back {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.tutorial-back:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.tutorial-back:disabled { opacity: 0.3; cursor: not-allowed; }
.tutorial-next {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  box-shadow: 0 4px 14px rgba(167, 139, 250, 0.3);
}
.tutorial-next:hover { background: hsl(262, 83%, 70%); }

.tutorial-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--bg-1);
  border: 1px solid rgba(167, 139, 250, 0.4);
  transform: rotate(45deg);
  pointer-events: none;
}
.tutorial-arrow-top {
  top: -8px;
  left: 50%;
  margin-left: -7px;
  border-right: none;
  border-bottom: none;
}
.tutorial-arrow-bottom {
  bottom: -8px;
  left: 50%;
  margin-left: -7px;
  border-left: none;
  border-top: none;
}
.tutorial-arrow-left {
  left: -8px;
  top: 50%;
  margin-top: -7px;
  border-right: none;
  border-top: none;
}
.tutorial-arrow-right {
  right: -8px;
  top: 50%;
  margin-top: -7px;
  border-left: none;
  border-bottom: none;
}

/* Full-screen modal — used for Welcome (step 0) and Done (last step). */
.tutorial-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.mode-spotlight .tutorial-modal { display: none !important; }
.mode-modal .tutorial-modal { display: flex; }
.mode-modal .tutorial-mask { display: none; }
.mode-modal .tutorial-ring { display: none; }

.tutorial-modal-inner {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 44px 40px 32px;
  text-align: center;
  max-width: 520px;
  width: calc(100% - 40px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(167, 139, 250, 0.1);
  animation: tutorial-modal-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes tutorial-modal-in {
  from { transform: translateY(18px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.tutorial-logo {
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  display: block;
  filter: drop-shadow(0 0 32px rgba(167, 139, 250, 0.45));
  animation: tutorial-logo-float 4s ease-in-out infinite;
}
@keyframes tutorial-logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.tutorial-modal-title {
  margin: 0 0 12px;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--accent), hsl(202, 100%, 70%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tutorial-modal-body {
  margin: 0 0 28px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.tutorial-modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tutorial-modal-skip, .tutorial-modal-next {
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 120ms;
}
.tutorial-modal-skip {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.tutorial-modal-skip:hover { color: var(--text); border-color: var(--accent); }
.tutorial-modal-next {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  box-shadow: 0 6px 22px rgba(167, 139, 250, 0.4);
}
.tutorial-modal-next:hover { background: hsl(262, 83%, 70%); transform: translateY(-1px); }

@media (max-width: 640px) {
  .tutorial-tooltip { max-width: calc(100vw - 24px); }
  .tutorial-modal-title { font-size: 1.45rem; }
  .tutorial-logo { width: 72px; height: 72px; }
}

/* ==========================================================================
 * Legacy wizard styles — kept hidden so old .wizard-* markup (if present
 * in a cached browser tab during the 1.2.3 → 1.2.4 transition) still
 * renders something coherent while the user refreshes.
 * ========================================================================== */
.wizard-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: wizard-fade-in 240ms ease-out;
}
@keyframes wizard-fade-in { from { opacity: 0; } to { opacity: 1; } }
.wizard-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(167, 139, 250, 0.08);
  width: min(780px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: wizard-scale-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes wizard-scale-in {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 26px 12px;
}
.wizard-header-left { display: flex; flex-direction: column; gap: 2px; }
.wizard-step-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.wizard-step-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.wizard-skip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 120ms ease-out;
}
.wizard-skip:hover { color: var(--text); border-color: var(--accent); }

.wizard-dots {
  display: flex;
  gap: 8px;
  padding: 0 26px 18px;
}
.wizard-dot {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  transition: background 200ms ease-out;
}
.wizard-dot.active { background: var(--accent); box-shadow: 0 0 8px rgba(167,139,250,0.5); }
.wizard-dot.done   { background: rgba(167, 139, 250, 0.4); }

.wizard-body {
  padding: 8px 32px 24px;
  overflow-y: auto;
  flex: 1;
}
.wizard-intro h2 {
  margin: 0 0 6px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
}
.wizard-intro p {
  margin: 0 0 18px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Step 1: Welcome */
.wizard-welcome { text-align: center; padding: 10px 0 8px; }
.wizard-hero-icon {
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 24px rgba(167, 139, 250, 0.6));
}
.wizard-hero-title {
  margin: 0 0 10px;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--accent), hsl(202, 100%, 70%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.wizard-hero-sub {
  margin: 0 auto 20px;
  max-width: 540px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.wizard-features {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 480px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wizard-features li {
  padding: 12px 16px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.wizard-features li strong { color: var(--text); margin-right: 6px; }

/* Step 2: Profile grid */
.wizard-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wizard-profile-card {
  padding: 18px 18px 16px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text);
  transition: all 150ms ease-out;
}
.wizard-profile-card:hover {
  border-color: rgba(167, 139, 250, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.wizard-profile-card.selected {
  border-color: var(--accent);
  background: rgba(167, 139, 250, 0.08);
  box-shadow: 0 0 0 1px var(--accent), 0 0 24px rgba(167,139,250,0.25);
}
.wizard-profile-emoji { font-size: 1.8rem; line-height: 1; }
.wizard-profile-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.wizard-profile-desc {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.wizard-profile-apps {
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Step 3: Domain input */
.wizard-input-row { margin-top: 8px; }
.wizard-input {
  width: 100%;
  padding: 14px 18px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-size: 1rem;
  font-family: var(--font-mono);
  transition: border-color 120ms;
}
.wizard-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15);
}
.wizard-hint {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Step 4: VPN grid */
.wizard-vpn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wizard-vpn-card {
  padding: 16px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  transition: all 150ms ease-out;
}
.wizard-vpn-card:hover { border-color: rgba(167, 139, 250, 0.5); transform: translateY(-2px); }
.wizard-vpn-card.selected {
  border-color: var(--accent);
  background: rgba(167, 139, 250, 0.08);
  box-shadow: 0 0 0 1px var(--accent);
}
.wizard-vpn-name { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.wizard-vpn-badge {
  font-size: 0.72rem;
  color: hsl(142, 71%, 60%);
  font-weight: 600;
}
.wizard-vpn-badge.muted { color: var(--text-muted); }

/* Step 5: Backup key */
.wizard-backup-box {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 6px;
  padding: 14px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.wizard-backup-key {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
  word-break: break-all;
  display: flex;
  align-items: center;
  padding: 0 4px;
  user-select: all;
}
.wizard-copy-btn {
  padding: 8px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms;
}
.wizard-copy-btn:hover { background: hsl(262, 83%, 70%); }
.wizard-copy-btn.copied { background: hsl(142, 71%, 55%); }
.wizard-backup-warning {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(250, 204, 21, 0.08);
  border: 1px solid rgba(250, 204, 21, 0.3);
  border-radius: 10px;
  font-size: 0.82rem;
  color: hsl(48, 90%, 80%);
  line-height: 1.4;
}
.wizard-backup-warning-icon {
  color: hsl(48, 96%, 60%);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
}

/* Step 6: Install summary */
.wizard-summary-row {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.wizard-summary-row code {
  background: var(--bg-0);
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--font-mono);
  color: var(--accent);
}
.wizard-install-panel {
  margin-top: 16px;
  padding: 22px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.wizard-install-btn {
  display: block;
  width: 100%;
  padding: 16px 22px;
  background: linear-gradient(135deg, var(--accent), hsl(262, 83%, 70%));
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.35);
  transition: transform 140ms ease-out, box-shadow 140ms ease-out;
}
.wizard-install-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(167, 139, 250, 0.45);
}
.wizard-install-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.wizard-install-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  color: var(--text);
  font-size: 0.92rem;
}
.wizard-install-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(167, 139, 250, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: wizard-spin 800ms linear infinite;
  flex-shrink: 0;
}
@keyframes wizard-spin { to { transform: rotate(360deg); } }
.wizard-install-ok, .wizard-install-error {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.wizard-install-ok {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: hsl(142, 60%, 85%);
}
.wizard-install-ok strong { color: hsl(142, 85%, 70%); }
.wizard-install-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: hsl(0, 60%, 85%);
}
.wizard-install-error strong { color: hsl(0, 85%, 72%); }
.wizard-install-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
}

/* Footer */
.wizard-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 26px;
  border-top: 1px solid var(--border);
}
.wizard-back, .wizard-next {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 120ms;
}
.wizard-back {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.wizard-back:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.wizard-back:disabled { opacity: 0.35; cursor: not-allowed; }
.wizard-next {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  box-shadow: 0 4px 18px rgba(167, 139, 250, 0.3);
}
.wizard-next:hover { background: hsl(262, 83%, 70%); transform: translateY(-1px); }

@media (max-width: 640px) {
  .wizard-card { max-height: 96vh; }
  .wizard-profile-grid, .wizard-vpn-grid { grid-template-columns: 1fr; }
  .wizard-hero-title { font-size: 1.5rem; }
}

/* Right-column stack wrapper — makes System / Activity / Release
 * share the same 4-col grid slot and flow vertically with consistent
 * spacing matching the outer bento-grid gap. */
.bento-col-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
@media (max-width: 1100px) {
  .bento-col-right { grid-column: span 12; }
}

/* ACTIVITY feed card */
.bento-activity .activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.bento-activity .activity-list::-webkit-scrollbar { width: 5px; }
.bento-activity .activity-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}
.activity-empty {
  padding: 14px 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
}
.activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  background: var(--bg-0);
  font-size: 0.78rem;
  animation: activity-slide-in 260ms ease-out;
}
@keyframes activity-slide-in {
  from { transform: translateX(-6px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.activity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.activity-dot.start, .activity-dot.healthy { background: hsl(142, 71%, 55%); box-shadow: 0 0 6px rgba(34,197,94,0.6); }
.activity-dot.stop, .activity-dot.die, .activity-dot.unhealthy { background: hsl(0, 84%, 62%); box-shadow: 0 0 6px rgba(239,68,68,0.6); }
.activity-dot.restart, .activity-dot.create { background: hsl(202, 100%, 65%); box-shadow: 0 0 6px rgba(59,130,246,0.6); }
.activity-dot.destroy, .activity-dot.kill { background: hsl(0, 84%, 62%); }
.activity-row-name {
  flex: 1;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activity-row-action {
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: lowercase;
}
.activity-row-time {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

/* LATEST RELEASE card */
.bento-release .release-body {
  padding: 2px 4px 4px;
}
.bento-release .release-date {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin: 4px 0 8px;
  letter-spacing: -0.005em;
}
.bento-release .release-date time {
  color: var(--text);
  font-weight: 600;
}
.bento-release .release-title {
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.bento-release .release-summary {
  margin: 0 0 10px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.bento-release .release-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(167,139,250,0.1);
  transition: background 120ms;
}
.bento-release .release-link:hover { background: rgba(167,139,250,0.2); }
.bento-release .release-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(34,197,94,0.15);
  color: hsl(142, 71%, 60%);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

/* NETWORK card */
.bento-network .network-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}
.network-item {
  padding: 12px 14px;
  background: var(--bg-0);
  border-radius: 10px;
  min-width: 0;
}
.network-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 6px;
}
.network-value {
  font-size: 0.85rem;
  color: var(--text);
  word-break: break-all;
  line-height: 1.35;
}

/* BACKUP status card */
.bento-backup .backup-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px;
}
.backup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}
.backup-row-label {
  color: var(--text-muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.backup-row-value {
  color: var(--text);
  font-size: 0.82rem;
  text-align: right;
  word-break: break-all;
}
.backup-encryption-on {
  color: hsl(142, 71%, 60%);
  font-weight: 700;
}
.backup-encryption-off {
  color: hsl(0, 84%, 68%);
  font-weight: 700;
}

/* VPN & Downloads banner — minimalist status strip at the top of Home.
 * Single horizontal line: subtle border, a dot indicator, provider
 * name, protocol chip, the high-signal facts separated by middots,
 * and small text-style actions on the right. Matches the dashboard's
 * other bento cards in tone — no radial glows, no gradient text, no
 * oversized icons. */
.vpn-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.9rem;
  margin: 0 0 1.1rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  font-size: 0.86rem;
  line-height: 1.3;
  transition: border-color 0.2s ease;
}
/* Unused — left for compat with old JS that may reference it. */
.vpn-banner-glow { display: none; }

/* State: just a hairline accent on the left edge and a colored dot
 * in the shield slot. No gradients, no glow. */
.vpn-banner.vpn-banner-good { border-color: rgba(34, 197, 94, 0.35); }
.vpn-banner.vpn-banner-bad  { border-color: rgba(239, 68, 68, 0.40); }
.vpn-banner.vpn-banner-neutral { border-color: rgba(255,255,255,0.07); }

/* Left indicator — small rounded square hosting either the provider
 * logo or a monochrome shield. 28px feels compact enough to read as
 * UI chrome rather than decoration. */
.vpn-banner-shield {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-muted);
}
.vpn-banner-good .vpn-banner-shield { color: hsl(152, 70%, 65%); border-color: hsl(152, 60%, 45%, 0.35); }
.vpn-banner-bad  .vpn-banner-shield { color: hsl(0, 75%, 70%);  border-color: hsl(0, 70%, 60%, 0.40); }
.vpn-banner-shield svg { width: 16px; height: 16px; }
.vpn-banner-bad .vpn-shield-check { display: none; }
.vpn-provider-logo {
  max-width: 20px;
  max-height: 20px;
  object-fit: contain;
}
.vpn-provider-logo.hidden { display: none; }
.vpn-banner-shield #vpn-shield-svg.hidden { display: none; }

.vpn-banner-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.vpn-banner-row-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Provider block: small uppercase "PROTECTED BY" label, provider name
 * in plain weight, protocol chip inline. No gradient-text tricks. */
.vpn-banner-provider {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.vpn-banner-provider-label {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--text-muted);
}
.vpn-banner-provider-name {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.vpn-banner-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  color: var(--text-muted);
}
.vpn-banner[data-protocol="wireguard"] .vpn-banner-chip {
  background: #88171a;
  border-color: #a5242a;
  color: #fff;
}

/* Facts row — dot-separated, all the same weight. Only the two
 * "check" facts (qBit routing, kill switch) carry color. */
.vpn-banner-facts {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  color: var(--text-secondary);
  font-size: 0.82rem;
}
.vpn-banner-fact {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.vpn-banner-fact + .vpn-banner-fact::before {
  content: '·';
  margin-right: 0.7rem;
  color: var(--text-muted);
  opacity: 0.6;
}
.vpn-banner-fact-label {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
}
.vpn-banner-fact-val { color: var(--text-secondary); }
.vpn-banner-fact-check .vpn-banner-fact-val { color: hsl(0, 75%, 72%); font-weight: 500; }
.vpn-banner-fact-check.vpn-fact-ok .vpn-banner-fact-val { color: hsl(152, 70%, 68%); }
.vpn-banner-flag {
  font-size: 0.95rem;
  line-height: 1;
}

/* Verdict line is kept hidden by default on the minimalist strip —
 * redundant with the state color + facts. JS can toggle the .vpn-show-verdict
 * class to reveal it if we ever want it back. */
.vpn-banner-detail { display: none; }

.vpn-banner-help {
  margin-left: 0.1rem;
  opacity: 0.55;
  font-size: 0.72rem;
}
.vpn-banner-help:hover,
.vpn-banner-help:focus-visible { opacity: 1; }

.vpn-banner-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
  margin-left: auto;
}
.vpn-banner-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  padding: 0.2rem 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
}
.vpn-banner-btn:hover { color: var(--text); }

@media (max-width: 768px) {
  .vpn-banner { flex-wrap: wrap; padding: 0.55rem 0.75rem; }
  .vpn-banner-main { gap: 0.45rem; }
  .vpn-banner-fact + .vpn-banner-fact::before {
    /* Drop the middot on small viewports — facts wrap onto their own
     * rows and the leading · starts to look orphaned. */
    display: none;
  }
}

/* DO-NOT-CLOSE banner inside the progress modal during self-update.
   Standalone module installs don't need this — only the SparkBox
   self-update flow restarts the dashboard mid-request. Without
   the visible warning, customers refresh the tab and lose the box
   (Hostinger VPS incident 2026-04-27). The beforeunload dialog
   catches active close attempts; this banner pre-empts them. */
.progress-do-not-close {
  margin: 0 0 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid hsl(38, 75%, 50%);
  border-left-width: 4px;
  border-radius: 6px;
  background: hsla(38, 95%, 60%, 0.08);
  color: var(--text-primary);
  font-size: 0.92rem;
  line-height: 1.45;
}
.progress-do-not-close.hidden { display: none; }
.progress-do-not-close strong {
  display: block;
  color: hsl(38, 95%, 70%);
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}

/* INDEXER-NEEDED action banner. Shown on Home when Media is enabled
   and Prowlarr has zero indexers — customer needs to add one before
   anything will actually download. Yellow/amber so it's visible but
   not catastrophic-red (the system is healthy, customer just has one
   more setup step). */
.indexer-needed-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 1rem;
  border: 1px solid hsla(38, 75%, 50%, 0.45);
  border-left-width: 4px;
  border-radius: 8px;
  background: hsla(38, 95%, 60%, 0.08);
}
.indexer-needed-banner.hidden { display: none; }
.indexer-needed-icon {
  font-size: 1.4rem;
  color: hsl(38, 95%, 65%);
  flex-shrink: 0;
}
.indexer-needed-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.indexer-needed-title {
  color: var(--text-primary);
  font-size: 0.95rem;
}
.indexer-needed-detail {
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.45;
}
.indexer-needed-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid hsl(38, 95%, 60%);
  border-radius: 6px;
  background: hsl(38, 95%, 50%);
  color: #14141a;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.1s ease;
}
.indexer-needed-btn:hover {
  background: hsl(38, 95%, 55%);
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  .indexer-needed-banner { flex-direction: column; align-items: flex-start; }
  .indexer-needed-btn { align-self: stretch; text-align: center; }
}

/* RECYCLARR / TRaSH-Guides status strip
   Minimalist row matching the v1.5.17 module aesthetic — thin
   border, middot-separated facts, no gradients or glows. Sits
   under the VPN banner on Home as a "what TRaSH gave you"
   confirmation chip. */
.recyclarr-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.45rem 0.85rem;
  margin: -0.5rem 0 0.75rem 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.recyclarr-strip.hidden { display: none; }
.recyclarr-strip-label {
  font-weight: 600;
  color: var(--text-primary);
}
.recyclarr-strip-sep {
  color: var(--text-muted);
}
.recyclarr-strip-fact {
  color: var(--text-secondary);
}
.recyclarr-strip-help {
  margin-left: auto;
  font-size: 0.75rem;
}
.recyclarr-strip-help a {
  color: var(--text-muted);
  text-decoration: none;
}
.recyclarr-strip-help a:hover {
  color: var(--text-primary);
}

/* PRO UPSELL banner card */
.bento-pro-upsell {
  padding: 0;
  background: linear-gradient(135deg, rgba(167,139,250,0.10), rgba(59,130,246,0.08));
  border: 1px solid rgba(167,139,250,0.3);
  overflow: hidden;
}
.bento-pro-upsell.hidden { display: none !important; }
.pro-upsell-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 26px;
}
.pro-upsell-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(167,139,250,0.55));
  flex-shrink: 0;
}
.pro-upsell-text { flex: 1; min-width: 0; }
.pro-upsell-text h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.pro-upsell-text p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.pro-upsell-btn {
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(167,139,250,0.35);
  transition: all 120ms;
  flex-shrink: 0;
}
.pro-upsell-btn:hover { background: hsl(262, 83%, 70%); transform: translateY(-1px); }
@media (max-width: 720px) {
  .pro-upsell-inner { flex-direction: column; text-align: center; padding: 18px; }
  .bento-network .network-grid { grid-template-columns: 1fr; }
}

/* Quick actions strip inside the SYSTEM bento card — replaces the old
 * standalone Actions tile. Small rounded buttons in a 2x2 grid that
 * fill the space under the gauges. */
.bento-system .system-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}
.bento-system .system-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease-out, border-color 120ms ease-out, transform 120ms ease-out;
}
.bento-system .system-action:hover {
  background: var(--bg-1);
  border-color: rgba(167, 139, 250, 0.4);
  transform: translateY(-1px);
}
.bento-system .system-action-icon {
  font-size: 0.95rem;
  line-height: 1;
  color: var(--accent);
}
.bento-system .system-action-label {
  white-space: nowrap;
}

/* Releases page header banner — shows currently running version with
 * a link back to the Updates page for applying the latest. */
.releases-header {
  margin: 1rem 0 0.5rem;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(167,139,250,0.08), rgba(59,130,246,0.04));
  border: 1px solid rgba(167,139,250,0.25);
  border-radius: 14px;
}
.releases-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.releases-current-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.releases-current-version {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.01em;
}

/* Release Changelog — shown on Releases page so the product feels alive. */
.changelog-section { margin-top: 1.5rem; }
.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.changelog-entry {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 12px;
  box-shadow: var(--elev-1);
}
.changelog-entry + .changelog-entry { /* nothing — gap handles spacing */ }
.changelog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.changelog-version { display: flex; align-items: center; gap: 0.5rem; }
.changelog-version-num {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.changelog-tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.15);
  color: var(--accent);
}
.changelog-tag-performance { background: rgba(34, 197, 94, 0.14); color: hsl(142, 71%, 55%); }
.changelog-tag-improvements { background: rgba(59, 130, 246, 0.14); color: hsl(217, 91%, 65%); }
.changelog-tag-foundation { background: rgba(250, 204, 21, 0.14); color: hsl(48, 96%, 60%); }
.changelog-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.changelog-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.changelog-items {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.changelog-items li {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.changelog-items li::marker { color: var(--accent); }

/* Schedule Controls */
.updates-schedule-section {
  margin-top: 1rem;
}

.schedule-controls {
  margin-top: 0.75rem;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.88rem;
}

.toggle-input {
  display: none;
}

.toggle-slider {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--bg-input);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  transition: background var(--transition);
  flex-shrink: 0;
}

.toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-secondary);
  border-radius: 50%;
  transition: transform var(--transition), background var(--transition);
}

.toggle-input:checked + .toggle-slider {
  background: var(--accent);
  border-color: var(--accent);
}

.toggle-input:checked + .toggle-slider::after {
  transform: translateX(18px);
  background: #fff;
}

.schedule-config {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.schedule-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.schedule-row label {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.schedule-status {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Update History */
.updates-history {
  margin-top: 0.5rem;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
}

.history-icon {
  font-size: 1rem;
}

.history-module {
  font-weight: 600;
}

.history-time {
  color: var(--text-muted);
  margin-left: auto;
  font-size: 0.75rem;
}

.history-tag {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
}

.history-tag.success {
  background: var(--green-soft);
  color: var(--green);
}

.history-tag.failed {
  background: var(--red-soft);
  color: var(--red);
}

.history-tag.rolled-back {
  background: var(--orange-soft);
  color: var(--orange);
}

/* ==========================================
   AI Troubleshooting Widget
   ========================================== */

.chat-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(167, 139, 250, 0.4);
  transition: transform var(--transition), box-shadow var(--transition);
  z-index: 1000;
}

.chat-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(167, 139, 250, 0.5);
}

/* Tom 2026-04-24 live review: at 390px the backup banner's inline
 * flex row (icon + title + CTA + dismiss) wrapped text into a
 * one-word column because the CTA/dismiss buttons refused to shrink.
 * At narrow widths switch to a vertical stack, hide nothing, and let
 * the body text use the full row. */
@media (max-width: 520px) {
  .data-protection-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  .data-protection-banner > a,
  .data-protection-banner > button {
    width: 100%;
    text-align: center;
  }
}

/* Same narrow-width breakpoint for any right-side FAB cluster so the
 * help + AI bubbles don't overlap on-page banners like the VPN status
 * strip on tall phone screens. Pin both FABs a bit higher so they
 * clear fixed bottom banners on mobile Safari. */
@media (max-width: 520px) {
  .help-fab { bottom: 1rem; right: 1rem; }
  body.ai-fab-visible .help-fab { bottom: 5rem; }
}

/* Community Help FAB — same footprint as the chat FAB but green-tinted
 * so users read it as a separate affordance from the old AI chat. */
.help-fab {
  background: linear-gradient(135deg, hsl(262, 83%, 60%), hsl(202, 100%, 55%));
  box-shadow: 0 4px 16px rgba(167, 139, 250, 0.35), 0 0 32px rgba(59, 130, 246, 0.25);
}
.help-fab:hover {
  background: linear-gradient(135deg, hsl(262, 83%, 70%), hsl(202, 100%, 65%));
  box-shadow: 0 6px 24px rgba(167, 139, 250, 0.5), 0 0 44px rgba(59, 130, 246, 0.35);
}

/* When the AI chat FAB is visible (Pro user, AI not explicitly disabled),
 * lift the Community Help FAB above it so the two buttons stack instead
 * of overlapping in the bottom-right corner. The chat FAB sits at
 * bottom: 1.5rem; the help FAB jumps to bottom: 5.5rem (52px chat-fab
 * height + 1.5rem chat-fab bottom + ~12px gap). The class is added by
 * chat.js after /api/chat/available confirms the AI is enabled. */
body.ai-fab-visible .help-fab {
  bottom: 5.5rem;
}

/* Community help modal */
.help-modal-box {
  max-width: 480px;
  width: calc(100% - 32px);
}
/* Ticket modal reuses help-modal-box for framing but needs more room
 * for the subject + textarea + reply-to. 600px wide and taller so
 * customers can actually see what they're typing. Tom flagged the
 * cramped feel on v1.5.106. */
#ticket-modal-overlay .help-modal-box {
  max-width: 640px;
  padding: 28px 28px 24px;
}
#ticket-modal-overlay #ticket-message {
  min-height: 220px;
}
#ticket-modal-overlay input.setting-input,
#ticket-modal-overlay textarea.setting-input {
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
}
#ticket-modal-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
#help-modal-title {
  margin: 0 0 8px;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.help-modal-lead {
  margin: 0 0 18px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.help-modal-lead strong {
  color: var(--accent);
}
.help-modal-benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.help-benefit {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--bg-0);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.help-benefit-icon {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}
.help-benefit strong {
  display: block;
  font-size: 0.88rem;
  color: var(--text);
  margin-bottom: 2px;
}
.help-benefit span {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.help-modal-diagnostic {
  margin: 14px 0;
  padding: 12px 14px;
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 10px;
}
.help-diagnostic-label {
  font-size: 0.72rem;
  color: hsl(142, 71%, 60%);
  margin-bottom: 6px;
  font-weight: 600;
}
.help-diagnostic-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 140px;
  overflow-y: auto;
}
.help-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.help-modal-actions .btn-pill {
  text-decoration: none;
}
@media (max-width: 480px) {
  .help-modal-box { padding: 20px 18px; }
}

.chat-drawer {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 1001;
  transition: right 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  box-shadow: var(--shadow-lg);
}

.chat-drawer.active {
  right: 0;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.chat-header-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}

.chat-usage {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 1px;
}

.chat-usage--low {
  color: var(--orange);
}

.chat-usage--empty {
  color: var(--red);
}

.chat-usage--unlimited {
  color: var(--green);
}

/* ==========================================
   Help Page — Quick Guide Links
   ========================================== */

.guide-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.guide-link-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
}

.guide-link-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.guide-link-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-link-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.guide-link-body strong {
  font-size: 0.92rem;
  color: var(--text);
  margin-bottom: 2px;
}

.guide-link-body span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.chat-header-actions {
  display: flex;
  gap: 0.25rem;
}

.chat-icon-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.35rem;
  border-radius: 6px;
  transition: background var(--transition), color var(--transition);
  display: flex;
  align-items: center;
}

.chat-icon-btn:hover {
  background: var(--bg-input);
  color: var(--text);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chat-welcome, .chat-setup {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.6;
}
.chat-privacy-notice {
  margin-top: 18px;
  padding: 12px 14px;
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.chat-privacy-notice strong { color: hsl(142, 71%, 60%); }
.chat-privacy-notice code {
  background: rgba(255,255,255,0.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.74rem;
}
.chat-privacy-icon {
  font-size: 1rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.5));
}

.chat-setup-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.chat-setup h3 {
  color: var(--text);
  margin-bottom: 0.5rem;
}

.chat-setup-hint {
  margin-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.chat-message {
  max-width: 90%;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius);
  font-size: 0.84rem;
  line-height: 1.55;
  word-wrap: break-word;
}

.chat-message--user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-message--assistant {
  align-self: flex-start;
  background: var(--bg-input);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.chat-message--streaming {
  opacity: 0.9;
}

.chat-message--streaming::after {
  content: '\25AE';
  animation: blink 0.8s infinite;
  margin-left: 1px;
  color: var(--accent);
}

/* "Share to demox" footer appended to every finalized assistant reply
 * by chat.js appendShareToDemox(). Sits inside the assistant bubble
 * with a top border so it reads as a related action, not new content.*/
.chat-message-actions {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(255,255,255,0.12);
}
.chat-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(99,102,241,0.08));
  border: 1px solid rgba(99,102,241,0.4);
  color: var(--accent);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  font-family: inherit;
  text-align: left;
  line-height: 1.35;
}
.chat-share-btn:hover {
  background: linear-gradient(135deg, rgba(99,102,241,0.28), rgba(99,102,241,0.14));
  border-color: rgba(99,102,241,0.6);
  transform: translateY(-1px);
}
.chat-share-icon {
  font-size: 0.95rem;
  line-height: 1;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.chat-message code {
  background: rgba(0, 0, 0, 0.3);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.chat-message pre {
  background: var(--bg-code);
  padding: 0.6rem;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0.4rem 0;
}

.chat-message pre code {
  background: none;
  padding: 0;
  font-size: 0.78rem;
}

.chat-input-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.chat-input-row input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.55rem 1rem;
  color: var(--text);
  font-size: 0.84rem;
  outline: none;
  transition: border-color var(--transition);
}

.chat-input-row input:focus {
  border-color: var(--accent);
}

.chat-send-btn {
  background: var(--accent);
  border: none;
  border-radius: 50%;
  /* 44px tap target — 36px was below the recommended minimum and
     the primary action on the chat surface. The SVG inside stays
     16px so visual weight doesn't change. */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition);
}

.chat-send-btn:hover {
  background: var(--accent-hover);
}

/* Mobile: full-width drawer */
@media (max-width: 768px) {
  .chat-drawer {
    width: 100vw;
    right: -100vw;
  }

  .chat-fab {
    bottom: 1rem;
    right: 1rem;
  }
}

/* =============================================
   Alerts Bell & Dropdown
   ============================================= */

.alerts-bell-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.alerts-bell-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.35rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  position: relative;
}

.alerts-bell-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.08);
}

.alerts-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  background: #ff3b30;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

.alerts-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-height: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--elev-3);
  overflow: hidden;
  z-index: 1000;
}

.alerts-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.85rem;
}

.alerts-dismiss-btn {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
}

.alerts-dropdown-list {
  overflow-y: auto;
  max-height: 360px;
  padding: 0.25rem 0;
}

.alerts-empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 1.5rem 1rem;
  margin: 0;
}

.alerts-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

.alerts-item:last-child {
  border-bottom: none;
}

.alerts-item:hover {
  background: rgba(255,255,255,0.04);
}

.alerts-item-icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.alerts-item.warning .alerts-item-icon { color: #ff9500; }
.alerts-item.failed .alerts-item-icon { color: #ff3b30; }
.alerts-item.recovered .alerts-item-icon { color: #34c759; }

.alerts-item-info {
  flex: 1;
  min-width: 0;
}

.alerts-item-name {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text);
}

.alerts-item-detail {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.alerts-item-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0.7;
  margin-top: 0.15rem;
}

/* =============================================
   Health Reports
   ============================================= */

.health-report-summary {
  padding: 0.5rem 1.25rem 1rem;
}

.report-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.report-summary-row:last-child {
  border-bottom: none;
}

.report-label {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
}

.report-value {
  font-weight: 600;
}

.report-value.good { color: #34c759; }
.report-value.warn { color: #ff9500; }
.report-value.bad { color: #ff3b30; }

.report-containers {
  padding-top: 0.25rem;
}

.report-container-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.report-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.25rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}

.report-list-row:last-child {
  border-bottom: none;
}

.report-list-date {
  font-weight: 600;
  color: var(--text);
}

.report-list-file {
  color: var(--text-muted);
  font-size: 0.78rem;
}

@media (max-width: 768px) {
  .alerts-dropdown {
    width: calc(100vw - 2rem);
    right: -1rem;
  }
}

/* ==========================================================================
   BENTO HOME (second design pass)
   Flat base, material elevation, monospace stats, bento grid layout.
   Linear/Vercel/Raycast sensibilities.
   ========================================================================== */

/* ---------- Bento page shell ---------- */
#page-home.bento-page {
  padding-top: 0.25rem;
}

/* Header row */
.bento-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.bento-greeting { flex: 1; min-width: 260px; }
.bento-greeting h1#greeting {
  font-size: 32px;
  line-height: 38px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 4px;
}
.bento-greeting p#hero-sub {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  margin: 0;
  font-weight: 400;
}

/* Header-row search bar: compact, neutral, NOT pill glass */
.bento-page .search-bar {
  margin: 0;
  flex: 0 1 340px;
  min-width: 240px;
}
.bento-page .search-bar input {
  padding: 0.6rem 1rem 0.6rem 2.4rem;
  background: var(--bg-1);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  box-shadow: var(--elev-1);
  font-size: 13px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 0.85rem center;
  background-size: 14px 14px;
}
.bento-page .search-bar input:focus {
  border-color: var(--accent);
  box-shadow: var(--elev-1), 0 0 0 3px var(--accent-soft);
  background-color: var(--bg-2);
}

/* ---------- Bento grid ---------- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  gap: 20px;
  /* Don't stretch short cards to match the tallest sibling in their
   * row. Otherwise a sparse launcher (say 6 apps) inflates to the
   * height of the right-column stack next to it and shows a huge
   * empty card background below the icons. With `start`, each card
   * sizes to its own content and the row just uses the max of those. */
  align-items: start;
}
.bento-8  { grid-column: span 8; }
.bento-6  { grid-column: span 6; }
.bento-4  { grid-column: span 4; }
.bento-12 { grid-column: span 12; }

/* Bento card — flat solid surface + 1px border via elev shadow */
.bento-card {
  background: var(--bg-1);
  border-radius: 14px;
  padding: 18px 20px 20px;
  box-shadow: var(--elev-1);
  transition: box-shadow 120ms ease-out, background 120ms ease-out;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  animation: bento-enter 420ms var(--ease-out) forwards;
  animation-delay: var(--bento-delay, 0ms);
}
/* Bento cards don't need a hover lift — they're structural containers,
 * not interactive targets. Keep elev-1 constant so all four tiles
 * always read as the same depth. */
.bento-card:hover {
  box-shadow: var(--elev-1);
  background: var(--bg-1);
}

@keyframes bento-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .bento-card { animation: none; opacity: 1; transform: none; }
}

/* Tight tracked-uppercase header row inside every bento card */
.bento-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.bento-label {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.bento-meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---------- LAUNCHER tile — flat icon grid ---------- */
.bento-card .app-launcher {
  gap: 0.9rem;
  flex: 1;
}
.bento-card .launcher-category {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 0.85rem;
  box-shadow: none;
}
.bento-card .launcher-category:last-child { margin-bottom: 0; }
.bento-card .launcher-category-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
  padding-left: 0;
}
.bento-card .launcher-grid {
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0.85rem;
}
.bento-card .launcher-icon {
  padding: 0.5rem 0.35rem;
  border-radius: 10px;
}
.bento-card .launcher-icon:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border-hair);
}
/* Bento-scoped launcher circle uses the same Raycast keycap treatment
 * as the base rule — we only reassert the sizes to avoid any stale
 * overrides from earlier passes. */
.bento-card .launcher-icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  background: var(--keycap-bg) !important;
  border: none;
  box-shadow: var(--shadow-keycap);
}
.bento-card .launcher-icon-circle img {
  width: 30px;
  height: 30px;
}
.bento-card .launcher-icon:hover .launcher-icon-circle {
  opacity: 0.75;
  transform: translateY(-1px);
}
.bento-card .launcher-icon-status {
  border-color: var(--bg-1);
  width: 11px;
  height: 11px;
}
.bento-card .launcher-icon-status.on { background: var(--live); }
.bento-card .launcher-icon-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ---------- SYSTEM tile — flat gauges ---------- */
.bento-system .system-gauges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  gap: 6px;
  margin: 0;
  /* Do NOT flex:1 — stretching to fill the bento creates huge empty
   * cards with the ring floating in the middle. Align to top instead
   * and let the bento card size naturally around the gauges. */
  align-content: start;
  align-items: start;
}
/* The SYSTEM bento itself shouldn't force its inner content to fill
 * vertical space — cards size to content. */
.bento-system { justify-content: flex-start; }
/* Gauge sub-tiles inside the SYSTEM bento card. Tightened padding and
 * smaller rings — the information density was out of balance with the
 * card size; content now fills the box. */
.bento-system .gauge-card {
  background: var(--bg-0);
  border: none;
  border-radius: 10px;
  padding: 8px 8px 6px;
  min-width: 0;
  box-shadow: var(--elev-1);
  transition: background 120ms ease-out, box-shadow 120ms ease-out;
}
.bento-system .gauge-card:hover {
  background: var(--bg-1);
  transform: none;
  box-shadow: var(--elev-2);
}
.bento-system .gauge-ring {
  width: 46px;
  height: 46px;
  margin: 0 auto 0.15rem;
}
.bento-system .gauge-bg { stroke: rgba(255,255,255,0.06); }

/* Semantic gauge colors — CPU purple (brand), RAM blue, DISK yellow,
 * UPTIME green. Matches the Raycast preview's semantic gauge stack. */
.bento-system .gauge-fill { stroke: var(--accent); }
.bento-system #gauge-cpu .gauge-fill { stroke: var(--accent); filter: drop-shadow(0 0 4px var(--accent-glow)); }
.bento-system #gauge-ram .gauge-fill { stroke: hsl(202, 100%, 67%); filter: drop-shadow(0 0 4px hsla(202,100%,67%,0.35)); }
.bento-system #gauge-disk .gauge-fill { stroke: hsl(43, 100%, 60%); filter: drop-shadow(0 0 4px hsla(43,100%,60%,0.35)); }
.bento-system #gauge-uptime .gauge-fill { stroke: var(--live); filter: drop-shadow(0 0 4px var(--live-glow)); }
.bento-system .gauge-text {
  fill: var(--text);
  font-size: 0.55rem;
  font-weight: 700;
  font-family: var(--font-mono);
}
.bento-system .gauge-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.bento-system .gauge-detail {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.bento-system .gauge-uptime {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding: 0.4rem 0 0.15rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ---------- RUNNING tile — flat list, live dots ---------- */
.bento-card .running-list {
  gap: 0.4rem;
  max-height: 520px;
  overflow-y: auto;
  margin: 0 -6px;
  padding: 0 6px;
}
.bento-card .running-list::-webkit-scrollbar { width: 6px; }
.bento-card .running-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
}
/* Running-row cards inside the RUNNING bento — matching gauge-card. */
.bento-card .running-row {
  background: var(--bg-0);
  border: none;
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  box-shadow: var(--elev-1);
  transition: background 120ms ease-out, box-shadow 120ms ease-out;
}
.bento-card .running-row:hover {
  background: var(--bg-1);
  transform: none;
  box-shadow: var(--elev-2);
}
.bento-card .running-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Live status dot prefix on running rows */
.bento-card .running-name::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 6px var(--live-glow);
  flex-shrink: 0;
  animation: statusPulse 2s ease infinite;
}
.bento-card .running-detail {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.bento-card .running-stats { gap: 1rem; }
.bento-card .mini-stat-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.bento-card .mini-stat-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* ---------- ACTIONS tile ---------- */
/* ACTIONS bento — compact 2x2 grid of square keycap-style tiles.
 * Previously these were 178x255 filler rectangles; now they're
 * ~100px tall with the same keycap treatment as the launcher icons. */
.bento-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1;
  align-content: start;
}
.bento-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: var(--keycap-bg);
  border: none;
  border-radius: 10px;
  padding: 14px 10px;
  height: 92px;
  max-height: 92px;
  color: var(--text);
  text-decoration: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: var(--shadow-keycap);
  transition: opacity 120ms ease-out, transform 120ms var(--ease-out);
}
.bento-action:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}
.bento-action:active { transform: translateY(0); opacity: 0.7; }
.bento-action-icon {
  font-size: 18px;
  color: var(--accent);
  line-height: 1;
}
.bento-action-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-body, var(--text));
  text-align: center;
  letter-spacing: 0.02em;
}

/* ---------- Page-level .section-title overrides inside bento ---------- */
#page-home .section-title { display: none; }

/* ---------- KILL glass on legacy home wrappers that remain referenced ---------- */
/* If .launcher-section is ever rendered again, strip the glass */
.bento-page .launcher-section {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.bento-page .launcher-section::before { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .bento-8, .bento-6, .bento-4 { grid-column: span 12; }
  .bento-system .system-gauges { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  .bento-header-row { flex-direction: column; align-items: stretch; }
  .bento-page .search-bar { flex: 1 1 100%; }
  .bento-grid { gap: 14px; }
  .bento-card { padding: 16px 16px 18px; }
  .bento-greeting h1#greeting { font-size: 26px; line-height: 32px; }
  .bento-system .system-gauges { grid-template-columns: 1fr 1fr; }
  .bento-actions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 375px) {
  .bento-grid { gap: 12px; }
  .bento-actions { grid-template-columns: 1fr; }
}

/* ==========================================================================
   GLOBAL FLAT-BASE OVERRIDES
   Remove the first-pass glass from non-bento cards, keep glass on topbar only.
   ========================================================================== */

/* Topbar — keep glass (sticky, deserves separation) */
.topbar {
  background: rgba(8, 9, 13, 0.72);
}

/* Quick-action bar becomes flat & minimal (not glassy) */
.quick-action-bar {
  background: var(--bg-0);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Apply mono to stat/time values globally */
.mini-stat-val,
.gauge-uptime,
.gauge-text {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Respect reduced motion for the new stagger */
@media (prefers-reduced-motion: reduce) {
  .bento-card,
  .bento-action,
  .running-row,
  .gauge-card {
    animation: none !important;
    transition: none !important;
  }
}