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

/* ============================================================
   Design Token System — Single Source of Truth
   ============================================================ */
:root {
  /* ── Primary Palette ── */
  --primary: #8b5cf6;
  --primary-50: #f5f3ff;
  --primary-100: #ede9fe;
  --primary-200: #ddd6fe;
  --primary-300: #c4b5fd;
  --primary-400: #a78bfa;
  --primary-500: #8b5cf6;
  --primary-600: #7c3aed;
  --primary-700: #6d28d9;
  --primary-800: #5b21b6;
  --primary-900: #4c1d95;

  /* ── Accent Palette ── */
  --accent: #22d3ee;
  --accent-400: #22d3ee;
  --accent-500: #06b6d4;

  /* ── Semantic Colors ── */
  --success: #34d399;
  --success-400: #34d399;
  --danger: #fb7185;
  --danger-400: #fb7185;
  --warning: #fbbf24;

  /* ── Neutral / Surface ── */
  --bg: #070511;
  --bg-alt: #0c0918;
  --bg-desktop: #0f0d1a;
  --text: #f8fafc;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --white: #ffffff;

  /* ── Surfaces (glass series) ── */
  --surface: rgba(255, 255, 255, 0.03);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --surface-emphasis: rgba(255, 255, 255, 0.08);
  --surface-glass: rgba(255, 255, 255, 0.04);
  --surface-glass-hover: rgba(255, 255, 255, 0.12);

  /* ── Borders ── */
  --border-subtle: rgba(255, 255, 255, 0.04);
  --border-default: rgba(255, 255, 255, 0.06);
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-emphasis: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.25);
  --border-primary: rgba(139, 92, 246, 0.15);
  --border-primary-hover: rgba(139, 92, 246, 0.25);
  --border-primary-strong: rgba(139, 92, 246, 0.55);
  --border-danger: rgba(248, 113, 133, 0.25);
  --border-danger-hover: rgba(248, 113, 133, 0.35);

  /* ── Primary Overlays (on purple) ── */
  --primary-overlay: rgba(139, 92, 246, 0.08);
  --primary-overlay-hover: rgba(139, 92, 246, 0.15);
  --primary-overlay-strong: rgba(139, 92, 246, 0.25);
  --primary-glow: rgba(139, 92, 246, 0.12);
  --primary-glow-strong: rgba(139, 92, 246, 0.25);

  /* ── Danger Overlays ── */
  --danger-overlay: rgba(248, 113, 133, 0.08);
  --danger-overlay-hover: rgba(248, 113, 133, 0.12);
  --danger-overlay-active: rgba(248, 113, 133, 0.15);

  /* ── Gradients ── */
  --bg-gradient: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(124, 58, 237, 0.12) 0%, transparent 60%),
                 radial-gradient(ellipse 60% 50% at 80% 50%, rgba(6, 182, 212, 0.06) 0%, transparent 50%),
                 linear-gradient(180deg, #070511 0%, #0c0918 40%, #070511 100%);

  --gradient-primary: linear-gradient(135deg, var(--primary-500), var(--primary-700));
  --gradient-primary-hover: linear-gradient(135deg, var(--primary-400), var(--primary-500));
  --gradient-primary-light: linear-gradient(135deg, var(--primary-600), var(--primary-400));

  --gradient-glass: linear-gradient(145deg, var(--surface-glass), rgba(255, 255, 255, 0.01));
  --gradient-glass-hover: linear-gradient(145deg, var(--surface-hover), rgba(255, 255, 255, 0.03));
  --gradient-glass-emphasis: linear-gradient(145deg, var(--surface-emphasis), rgba(255, 255, 255, 0.02));

  --gradient-primary-glass: linear-gradient(145deg, var(--primary-overlay), rgba(139, 92, 246, 0.02));
  --gradient-primary-glass-hover: linear-gradient(145deg, var(--primary-overlay-hover), rgba(139, 92, 246, 0.06));

  --gradient-danger-glass: linear-gradient(145deg, var(--danger-overlay), rgba(248, 113, 133, 0.02));
  --gradient-danger-glass-hover: linear-gradient(145deg, var(--danger-overlay-hover), rgba(248, 113, 133, 0.06));

  --gradient-header: linear-gradient(135deg, rgba(139, 92, 246, 0.6), rgba(6, 182, 212, 0.4));
  --gradient-surface-bottom: linear-gradient(to top, rgba(7, 5, 17, 0.9) 0%, rgba(7, 5, 17, 0.6) 60%, transparent 100%);

  --gradient-landing-mask: linear-gradient(180deg,
    rgba(7, 5, 17, 0.2) 0%,
    rgba(7, 5, 17, 0.4) 40%,
    rgba(7, 5, 17, 0.7) 75%,
    rgba(7, 5, 17, 0.92) 100%);

  /* ── Avatar Surface ── */
  --surface-avatar: linear-gradient(135deg, #1a1033, #0d0820);
  --surface-avatar-glow: linear-gradient(135deg, rgba(46, 16, 101, 0.8), rgba(30, 27, 75, 0.6));

  /* ── Typography Scale ── */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 36px;
  --text-5xl: 44px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --leading-tight: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.03em;
  --tracking-normal: 0.01em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.06em;

  /* ── Border Radius Scale ── */
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ── Spacing Scale ── */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;

  /* ── Shadow Scale ── */
  --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 24px 80px rgba(0, 0, 0, 0.5);

  --shadow-primary: 0 4px 20px rgba(139, 92, 246, 0.2);
  --shadow-primary-hover: 0 6px 24px rgba(139, 92, 246, 0.3);
  --shadow-primary-glow: 0 8px 32px rgba(124, 58, 237, 0.3);
  --shadow-primary-strong: 0 12px 40px rgba(124, 58, 237, 0.45);
  --shadow-btn: 0 4px 16px rgba(139, 92, 246, 0.25);
  --shadow-send: 0 2px 12px rgba(139, 92, 246, 0.3);

  --shadow-danger-glow: 0 0 24px rgba(248, 113, 133, 0.2);
  --shadow-overlay: 0 24px 80px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 -20px 60px rgba(0, 0, 0, 0.5);
  --shadow-landing-avatar: 0 0 40px rgba(124, 58, 237, 0.3);

  --shadow-desktop-border: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 120px rgba(139, 92, 246, 0.06);

  /* ── Text Gradients ── */
  --text-gradient-primary: linear-gradient(135deg, #ffffff 0%, var(--primary-300) 60%, var(--primary-400) 100%);

  /* ── Transition Tokens ── */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-expressive: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Animation Tokens ── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
}

/* ============================================================
   Accessibility — Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Base Elements
   ============================================================ */
html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   App Shell
   ============================================================ */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg-gradient);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Ambient glow layer */
.app::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, var(--primary-glow) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   Focus Styles
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

button:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   Utilities
   ============================================================ */
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Responsive — Mobile (< 480px)
   ============================================================ */
@media (max-width: 480px) {
  .app { max-width: 100%; }
}

/* ============================================================
   Responsive — Tablet (481px ~ 767px)
   ============================================================ */
@media (min-width: 481px) and (max-width: 767px) {
  .app {
    border-left: var(--border-subtle) solid 1px;
    border-right: var(--border-subtle) solid 1px;
  }
}

/* ============================================================
   Responsive — Desktop (≥ 768px)
   ============================================================ */
@media (min-width: 768px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-desktop);
  }
  .app {
    height: 92vh;
    border-radius: var(--radius-xl);
    border: var(--border-default) solid 1px;
    box-shadow: var(--shadow-desktop-border);
  }
  .app::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl);
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--primary-overlay), transparent 40%, transparent 60%, rgba(6, 182, 212, 0.04)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
  }
}