/* ── Theme variables ─────────────────────────────────────────────── */
:root {
  --primary: 121, 161, 242;
}
body {
  background-color: #121418;
  color: #e2e4e9;
  font-family: 'Inter', sans-serif;
  -webkit-tap-highlight-color: transparent;
  min-height: max(884px, 100dvh);
}
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.neon-glow {
  box-shadow: 0 0 15px rgba(121, 161, 242, 0.5), 0 0 30px rgba(121, 161, 242, 0.2);
}
.neon-border {
  border: 1px solid rgba(121, 161, 242, 0.6);
}
.accent-glow {
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}
::-webkit-scrollbar {
  display: none;
}

/* ── Screen active display override ──────────────────────────────────────── */
.screen { display: none; }
.screen.active { display: block; animation: fadeIn 0.4s ease-out; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Fluid Animations ────────────────────────────────────── */
.stagger-item {
  animation: slideUpFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  margin-bottom: 20px;
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  background: #79a1f2;
  border-radius: 2px;
  transition: width 0.3s ease;
  box-shadow: 0 0 8px #79a1f2;
}

/* ── Loader ───────────────────────────────────────────────────────────────── */
.spinner {
  width: 48px; height: 48px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: #79a1f2;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Form elements ────────────────────────────────────── */
input[type="text"], input[type="number"], input[type="date"], textarea {
  color: #f8fafc;
  background: rgba(255,255,255,0.05);
}

input:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 15px rgba(121, 161, 242, 0.3) !important;
  border-color: rgba(121, 161, 242, 0.8) !important;
}

/* Make iOS respect the dark theme inputs */
input { color-scheme: dark; }