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

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

:root {
  --bg-dark: #ffffff;
  --bg-card: #f7f5fb;
  --bg-card-lighter: #eef0f6;
  --accent-purple: #5750f1;
  --accent-purple-light: #7a73f5;
  --accent-purple-glow: rgba(87, 80, 241, 0.22);
  --accent-pink: #ff5c8a;
  --text-white: #1f2a44;
  --text-muted: rgba(31, 42, 68, 0.62);
  --toolbar-bg: rgba(255, 255, 255, 0.96);
  --overlay-bg: rgba(15, 10, 25, 0.45);
  --page-bg: #ffffff;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-xl: 0 18px 40px rgba(16, 24, 40, 0.10);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.06);
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --progress-gradient: linear-gradient(90deg, #5750f1, #7a73f5, #c084fc, #f0abfc, #ff5c8a);
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'Quicksand', sans-serif;
  background: var(--bg-dark);
  color: var(--text-white);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}