/* ═══════════════════════════════════════════════════════════════════════
       CSS VARIABLES
       ═══════════════════════════════════════════════════════════════════════ */
    :root {
      color-scheme: dark;
      --bg: #0a0a0a;
      --bg-card: #151515;
      --bg-elevated: #1a1a1a;
      --bg-nav: #111111;
      --bg-input: rgba(255,255,255,0.10);
      --bg-input-focus: rgba(255,255,255,0.14);
      --text-primary: #ffffff;
      --text-secondary: rgba(255,255,255,0.60);
      --text-tertiary: rgba(255,255,255,0.40);
      --accent: #22c55e;
      --accent-pink: #ec4899;
      --border: rgba(255,255,255,0.08);
      --border-light: rgba(255,255,255,0.12);
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 20px;
      --radius-full: 9999px;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --tg-safe-top: 0px;
      --tg-safe-bottom: 0px;
      --nav-height: 64px;
      --header-height: 56px;
      --vip-rose: #ff8da1;
      --vip-champagne: #f3d6a4;
      --vip-mist: #9cb7ff;
      --vip-glow: rgba(255, 166, 190, 0.32);
      --vip-surface: rgba(21, 17, 24, 0.88);
    }

    
/* ═══════════════════════════════════════════════════════════════════════
       RESET & BASE
       ═══════════════════════════════════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background: var(--bg);
      color: var(--text-primary);
      -webkit-font-smoothing: antialiased;
      -webkit-text-size-adjust: 100%;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      overflow: hidden;
    }
    button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
    input, textarea { font-family: inherit; }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }

    
/* ═══════════════════════════════════════════════════════════════════════
       APP CONTAINER
       ═══════════════════════════════════════════════════════════════════════ */
    #app {
      position: relative;
      width: 100%;
      max-width: 600px;
      height: 100%;
      overflow: hidden;
      margin: 0 auto;
    }
    @media (min-width: 1024px) {
      #app { max-width: 100%; }
    }
    .screen {
      position: absolute;
      inset: 0;
      display: none;
      flex-direction: column;
      overflow: hidden;
    }
    .screen.active { display: flex; }
    /* Screens with bottom nav get padding */
    .screen.has-nav { padding-bottom: calc(var(--nav-height) + var(--safe-bottom)); }