:root {
  --color-bg: #0a0a0f;
  --color-surface: #12121a;
  --color-border: #1e1e2e;
  --color-text: #e4e4e7;
  --color-text-muted: #a1a1aa;
  --color-text-dim: #52525b;
  --color-accent: #6366f1;
  --color-accent-hover: #818cf8;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--color-bg); color: var(--color-text); line-height: 1.6; min-height: 100vh; }
.container { max-width: 640px; margin: 0 auto; padding: 24px 16px; }
.hero { text-align: center; padding: 60px 0 40px; }
.hero h1 { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; }
.hero p { font-size: 1.125rem; color: var(--color-text-muted); max-width: 480px; margin: 0 auto; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: var(--radius-md); font-size: 1rem; font-weight: 600; cursor: pointer; border: none; transition: all 200ms; }
.btn--primary { background: var(--color-accent); color: white; }
.btn--primary:hover { background: var(--color-accent-hover); transform: translateY(-1px); }
.paywall { text-align: center; padding: 40px 0; }
.paywall .price { font-size: 2rem; font-weight: 800; color: var(--color-accent); }
.paywall .price-period { color: var(--color-text-dim); }
.feature-list { list-style: none; text-align: left; max-width: 360px; margin: 24px auto; }
.feature-list li { padding: 8px 0; color: var(--color-text-muted); }
.feature-list li::before { content: "✓ "; color: var(--color-accent); font-weight: 700; }
#app-loader { text-align: center; padding: 60px; color: var(--color-text-dim); }
.status-badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.status-badge--trial { background: #422006; color: #fbbf24; }
.status-badge--active { background: #052e16; color: #4ade80; }