.transition-spring { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
    .transition-fast { transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
    .card-lift { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
    .card-lift:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.06), 0 8px 20px rgba(0,0,0,0.02); }
    /* Entrance animation — PROGRESSIVE ENHANCEMENT ONLY.
       The element is VISIBLE by default (opacity: 1) and the fade-up is applied
       only when the user has NOT asked for reduced motion. Previously this rule
       set `opacity: 0` unconditionally and relied on the animation to reveal the
       content, so under `prefers-reduced-motion: reduce` (or when the animation
       was interrupted) the card stayed permanently invisible. Content must never
       depend on an animation to become readable. */
    .fade-in-up { opacity: 1; }
    .fade-in-up-1 { animation-delay: 0.1s; }
    .fade-in-up-2 { animation-delay: 0.2s; }
    .fade-in-up-3 { animation-delay: 0.3s; }
    @media (prefers-reduced-motion: no-preference) {
      .fade-in-up { animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
    }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

    .form-input {
      width: 100%;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid #E2E8F0;
      background: #F8FAFC;
      /* 0.9rem (14.4px) triggered iOS Safari zoom-on-focus. */
      font-size: 1rem;
      color: #0F172A;
      outline: none;
      transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .form-input:focus {
      border-color: #2563EB;
      background: #ffffff;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .date-quick-select:active {
      transform: scale(0.96);
    }

    .dark body { background-color: #0F172A; color: #F1F5F9; }
    .dark .bg-\[\#F8FAFC\] { background-color: #0F172A !important; }
    .dark .bg-white { background-color: #1E293B !important; }
    .dark .border-slate-100\/80, .dark .border-slate-100, .dark .border-slate-200, .dark .border-slate-200\/80 { border-color: #334155 !important; }
    .dark .text-slate-900 { color: #F8FAFC !important; }
    .dark .text-slate-700 { color: #CBD5E1 !important; }
    .dark .text-slate-500 { color: #94A3B8 !important; }
    .dark .text-slate-400 { color: #64748B !important; }
    .dark .bg-slate-50 { background-color: #0F172A !important; }
    .dark .bg-slate-100 { background-color: #334155 !important; }