/* 
  FanPulse 2026 - CSS Variables & Global Tokens
  Theme: Ultra-Dark Sporty Neon (Cyberpunk Athletic)
*/

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

:root {
  /* Fonts */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Color Palette - Neutrals */
  --bg-main: #0b0c10;
  --bg-card: #151821;
  --bg-card-hover: #1f2330;
  --bg-input: #1b1d28;
  --text-main: #f5f6fa;
  --text-muted: #8f9cae;
  --text-dark: #12131a;
  --border-light: rgba(255, 255, 255, 0.08);
  --border-focus: rgba(255, 255, 255, 0.2);

  /* Color Palette - Cyber Neon Accents */
  --neon-gold: #ffd700;
  --neon-gold-glow: rgba(255, 215, 0, 0.35);
  
  --neon-cyan: #00f0ff;
  --neon-cyan-glow: rgba(0, 240, 255, 0.35);

  --neon-pink: #ff007f;
  --neon-pink-glow: rgba(255, 0, 127, 0.35);

  --neon-green: #39ff14;
  --neon-green-glow: rgba(57, 255, 20, 0.35);

  --neon-red: #ff3b30;
  --neon-red-glow: rgba(255, 59, 48, 0.35);

  --neon-blue: #007aff;
  --neon-blue-glow: rgba(0, 122, 255, 0.35);

  --neon-purple: #af52de;
  --neon-purple-glow: rgba(175, 82, 222, 0.35);

  /* Glassmorphism Styles */
  --glass-bg: rgba(21, 24, 33, 0.75);
  --glass-border: rgba(255, 255, 255, 0.05);
  --glass-backdrop: blur(16px);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);

  /* UI Spacing & Roundness */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout Constants */
  --mobile-width: 430px; /* Standard iPhone Pro Max width */
  --mobile-height: 880px; /* standard mobile viewport height */
}

/* Base resets specifically designed for App Store wrapping */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent; /* Disable default gray tap highlight on mobile */
  user-select: none; /* Make UI feel native by blocking text drag selection */
}

input, textarea {
  user-select: text; /* Allow input editing */
}

body {
  background-color: #030406; /* Dark background behind app emulator frame */
  color: var(--text-main);
  font-family: var(--font-body);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden; /* Hide scrollbars outside app */
}

/* App frame emulator - on desktop displays a sleek phone mockup, on mobile stretches 100% */
#app-frame {
  width: 100%;
  height: 100vh;
  max-width: var(--mobile-width);
  max-height: var(--mobile-height);
  background: radial-gradient(circle at top left, #121520, var(--bg-main));
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  border: 1px solid var(--border-light);
}

@media (min-width: 480px) {
  /* On desktop, make it look like a gorgeous premium bezel-less phone container */
  #app-frame {
    border-radius: var(--radius-lg);
    border: 3px solid rgba(255, 255, 255, 0.15);
    height: 92vh;
    box-shadow: 0 0 40px rgba(0, 240, 255, 0.15), 0 30px 60px rgba(0, 0, 0, 0.8);
  }
}

/* Custom gorgeous scrollbar for inner scroll lists */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}