:root {
  --bg: #ffffff;
  --surface: #f5f5f7;
  --surface-2: #ececee;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --accent: #007aff;
  --accent-press: #0066d6;
  --danger: #ff3b30;
  --success: #34c759;
  --warning: #ff9500;
  --border: rgba(0, 0, 0, 0.08);
  --card-bg: #ffffff;

  --radius-card: 12px;
  --radius-button: 8px;
  --radius-sheet: 20px;
  --radius-input: 10px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-sheet: 0 -4px 20px rgba(0, 0, 0, 0.12);
  --shadow-topbar: 0 0.5px 0 rgba(0, 0, 0, 0.08);

  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", system-ui, sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-system);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh;
  transition: background-color 0.2s ease, color 0.2s ease;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, select, textarea {
  font-family: inherit;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: 0;
}

.card {
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.fade-in {
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.spinner {
  border: 2px solid var(--surface-2);
  border-top: 2px solid var(--accent);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.safe-top { padding-top: var(--safe-top); }
.safe-bottom { padding-bottom: calc(var(--safe-bottom) + 64px); }