:root {
  /* Base surfaces */
  --bg-base: #0a0a0f;
  --bg-surface: #111118;
  --bg-elevated: #18181f;
  --bg-overlay: #1e1e28;

  /* Borders */
  --border-subtle: rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);

  /* Text */
  --text-primary: #f0f0f5;
  --text-secondary: #8888a0;
  --text-muted: #555568;
  --text-inverse: #0a0a0f;

  /* Accent */
  --accent: #6366f1;
  --accent-dim: rgba(99,102,241,0.15);
  --accent-glow: rgba(99,102,241,0.35);

  /* Semantic */
  --green: #22c55e;
  --green-dim: rgba(34,197,94,0.12);
  --amber: #f59e0b;
  --amber-dim: rgba(245,158,11,0.12);
  --red: #ef4444;
  --red-dim: rgba(239,68,68,0.12);
  --blue: #3b82f6;
  --blue-dim: rgba(59,130,246,0.12);

  /* Typography */
  --font-mono: 'DM Mono', monospace;
  --font-sans: 'Geist', sans-serif;

  /* Spacing */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* Responsive Layout Settings */
@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100% !important; height: auto !important; flex-direction: row !important; overflow-x: auto;
    border-right: none !important; border-bottom: 1px solid var(--border-subtle); padding: 8px 12px !important; display: flex !important; gap: 8px; }
  .sidebar .nav-item { white-space: nowrap; }
  .plugins-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
  .stats-bar { flex-direction: column !important; gap: 16px !important; padding: 16px !important; }
  .stat-divider { width: 100% !important; height: 1px !important; margin: 0 !important; }
  .main-content { padding: 16px !important; }
  .stat-value { font-size: 22px !important; }
}