:root {
                color-scheme: light;
                --bg-primary: #f0f7f4;
                --bg-gradient-start: #e8f5ef;
                --bg-gradient-end: #d4ebe0;
                --card-bg: #ffffff;
                --text-primary: #1a2820;
                --text-secondary: #6b7f75;
                --text-muted: #9ca8a1;
                --accent: #2d8659;
                --accent-dark: #1e5f3e;
                --accent-light: #3fa572;
                --accent-lighter: #eef7f2;
                --error: #dc2626;
                --error-light: #fee2e2;
                --border-light: #d4e5dc;
                --border-medium: #c1d5ca;
                --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
                --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
                --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.12);
                --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
                --radius-sm: 8px;
                --radius-md: 12px;
                --radius-lg: 16px;
                --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            }

            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }

            body {
                min-height: 100vh;
                display: grid;
                place-items: center;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                background: linear-gradient(145deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
                color: var(--text-primary);
                padding: clamp(16px, 4vw, 32px);
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            .card {
                width: min(460px, 100%);
                background: var(--card-bg);
                border: 1.5px solid var(--border-light);
                border-radius: var(--radius-lg);
                padding: clamp(24px, 5vw, 40px);
                box-shadow: var(--shadow-xl);
                animation: slideUp 0.4s ease;
            }

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

            h1 {
                margin: 0;
                font-size: clamp(1.75rem, 4vw, 2.2rem);
                letter-spacing: -0.02em;
                color: var(--accent-dark);
                font-weight: 700;
                margin-bottom: 8px;
            }

            p {
                margin: 0 0 28px;
                color: var(--text-secondary);
                font-size: clamp(0.92rem, 2vw, 1rem);
                line-height: 1.6;
            }

            label {
                display: block;
                font-weight: 600;
                margin-bottom: 8px;
                font-size: 0.95rem;
                color: var(--text-primary);
                letter-spacing: -0.01em;
            }

            input[type="text"],
            input[type="password"] {
                width: 100%;
                border: 1.5px solid var(--border-medium);
                border-radius: var(--radius-md);
                padding: 13px 16px;
                font-size: 1rem;
                font-family: inherit;
                outline: none;
                transition: var(--transition);
                margin-bottom: 18px;
                background: var(--card-bg);
                color: var(--text-primary);
            }

            input:focus {
                border-color: var(--accent);
                box-shadow: 0 0 0 4px var(--accent-lighter);
                background: var(--card-bg);
            }

            input::placeholder {
                color: var(--text-muted);
            }

            button {
                width: 100%;
                margin-top: 8px;
                border: none;
                border-radius: var(--radius-md);
                background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
                color: #ffffff;
                font-size: 1.05rem;
                font-weight: 700;
                font-family: inherit;
                padding: 14px 18px;
                cursor: pointer;
                transition: var(--transition);
                box-shadow: var(--shadow-md);
                letter-spacing: -0.01em;
            }

            button:hover {
                background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
                transform: translateY(-2px);
                box-shadow: var(--shadow-lg);
            }

            button:active {
                transform: translateY(0);
            }

            button:disabled {
                opacity: 0.6;
                cursor: not-allowed;
                transform: none !important;
            }

            #error {
                min-height: 1.5em;
                margin: 0 0 16px;
                font-size: 0.95rem;
                font-weight: 600;
                color: var(--error);
                padding: 10px 14px;
                background: var(--error-light);
                border-radius: var(--radius-sm);
                border-left: 3px solid var(--error);
                display: none;
            }

            #error:not(:empty) {
                display: block;
                animation: shake 0.3s ease;
            }

            @keyframes shake {
                0%, 100% { transform: translateX(0); }
                25% { transform: translateX(-10px); }
                75% { transform: translateX(10px); }
            }

            .hint {
                margin-top: 24px;
                text-align: center;
                color: var(--text-secondary);
                font-size: 0.9rem;
                font-weight: 500;
            }

            @media (max-width: 640px) {
                .card {
                    padding: 24px 20px;
                }

                h1 {
                    font-size: 1.65rem;
                }

                input[type="text"],
                input[type="password"],
                button {
                    min-height: 48px;
                }
            }

            @media (hover: none) and (pointer: coarse) {
                input[type="text"],
                input[type="password"],
                button {
                    min-height: 48px;
                    font-size: 16px;
                }
            }