/* Extracted from auth.html — page-specific styles.
   Kept separate per-page (not merged into one shared file) because
   each page defines its own --apple-* variable values and a couple
   of same-named classes (e.g. .apple-card) with different rules;
   merging them would silently change another page's look. */

        :root {
            --apple-bg: #f5f5f7;
            --apple-card: #ffffff;
            --apple-input-bg: #f5f5f5;
            --apple-border: rgba(0, 0, 0, 0.08);
            --apple-text-gray: #86868b;
            --spring-easing: cubic-bezier(0.25, 1, 0.5, 1);
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: var(--apple-bg);
            color: #1d1d1f;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
        }

        @keyframes springUp {
            from { opacity: 0; transform: translateY(20px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes fadeIn {
            from { opacity: 0; } to { opacity: 1; }
        }
        .animate-spring { animation: springUp 0.6s var(--spring-easing) both; }
        .animate-fade { animation: fadeIn 0.4s ease both; }

        .apple-card {
            background: var(--apple-card);
            border-radius: 2.5rem;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0,0,0,0.02);
            border: 1px solid rgba(255, 255, 255, 0.5);
        }

        .apple-input {
            width: 100%;
            background-color: var(--apple-input-bg);
            border: 1.5px solid transparent;
            border-radius: 1.125rem;
            padding: 1rem 1.25rem;
            font-size: 0.95rem;
            font-weight: 500;
            color: #1d1d1f;
            transition: all 0.3s var(--spring-easing);
            outline: none;
        }
        .apple-input::placeholder { color: #a1a1a6; font-weight: 400; }
        .apple-input:focus {
            background-color: #ffffff;
            border-color: #000000;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
        }

        .apple-btn {
            width: 100%;
            background-color: #000000;
            color: #ffffff;
            font-weight: 600;
            font-size: 1.05rem;
            padding: 1.125rem;
            border-radius: 1.25rem;
            transition: all 0.3s var(--spring-easing);
            border: none;
            cursor: pointer;
        }
        .apple-btn:hover:not(:disabled) { background-color: #333333; transform: scale(0.98); }
        .apple-btn:active:not(:disabled) { transform: scale(0.95); }
        .apple-btn:disabled { background-color: #e5e5ea; color: #aeaeb2; cursor: not-allowed; transform: none; }

        .apple-label {
            display: block;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--apple-text-gray);
            margin-bottom: 0.375rem;
            padding-left: 0.25rem;
        }

        .strength-bar { height: 4px; border-radius: 2px; background: #e5e5ea; transition: all 0.4s var(--spring-easing); }

        .scrollable-area {
            max-height: 65vh;
            overflow-y: auto;
            scrollbar-width: thin;
        }
        .scrollable-area::-webkit-scrollbar { width: 4px; }
        .scrollable-area::-webkit-scrollbar-thumb { background: #d1d1d6; border-radius: 4px; }

        input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px var(--apple-input-bg) inset; }