/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── CSS Custom Properties (Glassmorphism palette) ─────────── */
:root {
  --bg-body: #000;
  --bg-app: rgba(12, 12, 20, 0.95);
  --bg-surface: rgba(14, 14, 24, 0.5);
  --bg-surface-hover: rgba(255, 255, 255, 0.03);
  --bg-surface-active: rgba(122, 162, 247, 0.1);
  --bg-header: rgba(20, 20, 32, 0.7);
  --bg-input: rgba(20, 20, 32, 0.5);
  --bg-overlay: rgba(0, 0, 0, 0.6);

  --border-subtle: rgba(255, 255, 255, 0.04);
  --border-medium: rgba(255, 255, 255, 0.06);
  --border-active: rgba(122, 162, 247, 0.15);

  --text-primary: #e4e4f0;
  --text-secondary: #8a8aa4;
  --text-muted: #6a6a8a;
  --text-faint: #4a4a60;

  --accent: #7aa2f7;
  --accent-glow: rgba(122, 162, 247, 0.4);
  --green: #28c940;
  --red: #f7768e;
  --yellow: #e0af68;
  --purple: #bb9af7;

  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --touch-target: 44px;
}

/* ─── Body ───────────────────────────────────────────────────── */
html {
  background: var(--bg-body);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-ui);
  background: var(--bg-body);
  color: var(--text-primary);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
}

/* ─── Ambient glows ──────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  top: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(122, 162, 247, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  bottom: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(187, 154, 247, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ─── App root ───────────────────────────────────────────────── */
#app {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  overflow: hidden;
}

/* ─── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }

/* ─── Selection ─────────────────────────────────────────────── */
::selection {
  background: rgba(122, 162, 247, 0.3);
  color: #fff;
}