:root {
  --theme-color: rgb(13, 173, 182);
  --theme-color-hex: #0dadb6;
  --brand-50:  #ecfafb;
  --brand-100: #d0f3f5;
  --brand-200: #a3e8ec;
  --brand-300: #6dd9e0;
  --brand-400: #3ac4cd;
  --brand-500: #0dadb6;
  --brand-600: #0b939b;
  --brand-700: #097a80;
}
body { font-family: 'Inter', system-ui, sans-serif; }
@media (display-mode: standalone) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}
[x-cloak] { display: none !important; }
.gradient-hero { background: linear-gradient(135deg, #f8fefe 0%, #ecfafb 50%, #f0fdf4 100%); }
.card-shadow   { box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(13,173,182,.08); }
.popular-ring  { box-shadow: 0 0 0 2px var(--brand-500), 0 8px 32px rgba(13,173,182,.2); }