/* Girls Power — Apple HIG · Medical Tech · Soft Minimal · Glass */
:root {
  --sky-top: #b8d9f5;
  --sky-mid: #d6ebfa;
  --sky-bot: #f2f7fc;
  --bg: #f2f7fc;
  --bg-soft: rgba(255, 255, 255, 0.55);
  --card: #ffffff;
  --card-glass: rgba(255, 255, 255, 0.72);
  --ink: #1c1c1e;
  --ink-secondary: #3a3a3c;
  --muted: #8e8e93;
  --line: #e5e5ea;
  --line-soft: rgba(60, 60, 67, 0.12);

  --accent: #0a4d8c;
  --accent-deep: #06335e;
  --ink-btn: #1c1c1e;
  --sky-deep: #5b8def;
  --sky-500: #7eaaef;
  --blue: #5b8def;
  --blue-deep: #0a4d8c;
  --green: #34c759;
  --green-deep: #248a3d;
  --yellow: #f5c542;
  --yellow-deep: #c9a82e;
  --red: #ff6b9d;
  --red-deep: #d94a7a;
  --purple: #7b61ff;
  --purple-deep: #5a45c9;
  --orange: #ff9f0a;
  --pink: #ff6b9d;

  --light-green: rgba(52, 199, 89, 0.12);
  --light-blue: rgba(91, 141, 239, 0.12);
  --light-yellow: rgba(245, 197, 66, 0.16);
  --light-red: rgba(255, 107, 157, 0.12);
  --light-purple: rgba(123, 97, 255, 0.1);
  --light-orange: rgba(255, 159, 10, 0.12);
  --light-pink: rgba(255, 107, 157, 0.1);

  --radius: 18px;
  --radius-sm: 12px;
  --radius-block: 18px;
  --shadow-card: 0 8px 28px rgba(10, 77, 140, 0.08), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-btn-green: var(--shadow-btn);
  --shadow-btn-blue: var(--shadow-btn);
  --frame: 1px solid var(--line);
  --glass-blur: blur(20px) saturate(1.2);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
  --font-display: var(--font);
  --nav-h: 72px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-bot) 100%);
  color: var(--ink);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font-family: inherit; }
button { cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}