/* templates/login.html */
        :root {
            /* Login keeps a deep canvas, but accent comes from tokens.css. */
            --login-bg: var(--gray-050);
            --login-surface: var(--color-surface);
            --bg-primary: var(--login-bg);
            --bg-secondary: var(--login-surface);
            --bg-tertiary: var(--gray-300);
            --border-color: var(--color-border);
            --text-primary: var(--color-text-strong);
            --text-secondary: var(--color-text-muted);
            --accent-danger: var(--color-danger);
            --accent-success: var(--color-success);
            --accent-warning: var(--color-warning);
        }
        
        body {
            background:
                radial-gradient(ellipse at 50% -10%, rgba(0, 212, 255, 0.10), transparent 46%),
                var(--login-bg);
            color: var(--color-text);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            font-size: var(--font-md);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .login-bg {
            position: fixed;
            inset: 0;
            z-index: 0;
        }

        .login-bg dotlottie-player {
            width: 200%;
            height: 200%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0.16;
            pointer-events: none;
        }

        .login-bg-overlay {
            position: fixed;
            inset: 0;
            z-index: 1;
            background: radial-gradient(circle at 18% 12%, rgba(0, 212, 255, 0.16), transparent 42%),
                        linear-gradient(160deg, rgba(8, 11, 15, 0.15), rgba(8, 11, 15, 0.78));
        }
        
        .login-container {
            background: linear-gradient(180deg, rgba(28, 37, 48, 0.94), rgba(14, 19, 26, 0.92));
            border: 1px solid rgba(148, 176, 198, 0.18);
            border-radius: 16px;
            padding: var(--space-7) var(--space-6);
            width: 100%;
            max-width: 420px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 56px rgba(0, 0, 0, 0.4);
            position: relative;
            z-index: 2;
            backdrop-filter: blur(16px);
        }
        
        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .login-header h1 {
            font-size: var(--font-2xl);
            font-weight: 800;
            letter-spacing: -0.03em;
            color: var(--color-text-strong);
            margin-bottom: 8px;
        }
        
        .login-header .subtitle {
            font-size: var(--font-sm);
            color: var(--color-text-muted);
        }
        
        .login-icon {
            margin-bottom: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-icon dotlottie-player {
            width: 216px;
            height: 216px;
            pointer-events: none;
        }

        .desktop-hint {
            font-size: 13px;
            color: var(--color-accent);
            margin-top: 6px;
            margin-bottom: 0;
        }
        
        .form-group {
            margin-bottom: 16px;
        }
        
        .form-label {
            font-size: var(--font-xs);
            font-weight: 600;
            letter-spacing: .02em;
            color: var(--color-text-muted);
            margin-bottom: 6px;
        }
        
        .form-control {
            background: rgba(8, 11, 15, 0.88);
            border: 1px solid var(--color-border);
            color: var(--color-text);
            min-height: 40px;
            padding: 8px 12px;
            border-radius: var(--radius-2);
            font-size: var(--font-sm);
            transition:
                background-color var(--dur-2) var(--ease-out),
                border-color var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out);
        }

        .form-control:hover:not(:disabled) {
            border-color: var(--color-border-strong);
        }
        
        .form-control:focus {
            background: rgba(8, 11, 15, 0.98);
            border-color: var(--color-accent);
            color: var(--color-text-strong);
            box-shadow: var(--focus-ring);
            outline: 0;
        }
        
        .form-control::placeholder {
            color: var(--color-text-muted);
            opacity: .7;
        }
        
        .btn-login {
            width: 100%;
            min-height: 42px;
            padding: 10px 16px;
            background: var(--color-accent);
            color: var(--color-on-accent);
            border: 1px solid var(--color-accent);
            border-radius: var(--radius-2);
            font-weight: 700;
            font-size: var(--font-sm);
            cursor: pointer;
            margin-top: 12px;
            box-shadow: var(--shadow-1);
            transition:
                background-color var(--dur-2) var(--ease-out),
                border-color var(--dur-2) var(--ease-out),
                color var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out),
                transform var(--dur-2) var(--ease-out);
        }
        
        .btn-login:hover:not(:disabled) {
            background: var(--color-accent-hover);
            border-color: var(--color-accent-hover);
            color: var(--color-on-accent);
            box-shadow: 0 6px 20px rgba(0, 212, 255, 0.28);
            transform: translateY(-1px);
        }

        .btn-login:focus-visible {
            outline: 0;
            box-shadow: var(--focus-ring);
            transform: none;
        }

        .btn-login:active:not(:disabled) {
            transform: translateY(0) scale(0.985);
            box-shadow: var(--shadow-1);
        }
        
        .btn-login:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .error-alert {
            background: rgba(248, 81, 73, 0.1);
            border: 1px solid var(--accent-danger);
            color: var(--accent-danger);
            padding: 12px;
            border-radius: 6px;
            font-size: 12px;
            margin-bottom: 16px;
            display: none;
        }
        
        .error-alert.show {
            display: block;
        }
        
        .success-alert {
            background: rgba(63, 185, 80, 0.1);
            border: 1px solid var(--accent-success);
            color: var(--accent-success);
            padding: 12px;
            border-radius: 6px;
            font-size: 12px;
            margin-bottom: 16px;
            display: none;
        }
        
        .success-alert.show {
            display: block;
        }
        
        .lockout-alert {
            background: rgba(240, 136, 62, 0.1);
            border: 1px solid var(--accent-warning);
            color: var(--accent-warning);
            padding: 12px;
            border-radius: 6px;
            font-size: 12px;
            margin-bottom: 16px;
            display: none;
        }
        
        .lockout-alert.show {
            display: block;
        }
        
        .loading-spinner {
            display: none;
            margin-right: 8px;
        }
        
        .loading-spinner.show {
            display: inline-block;
        }

        .loading-spinner dotlottie-player {
            width: 16px;
            height: 16px;
            pointer-events: none;
        }

        .entry-loading {
            position: fixed;
            inset: 0;
            z-index: 10;
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 12px;
            background: rgba(13, 17, 23, 0.84);
            backdrop-filter: blur(6px);
        }

        .entry-loading.show {
            display: flex;
        }

        .entry-loading dotlottie-player {
            width: 120px;
            height: 120px;
            pointer-events: none;
        }

        .entry-loading-text {
            color: var(--text-primary);
            font-size: 14px;
            letter-spacing: 0.3px;
        }
        
        .attempt-counter {
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 8px;
            text-align: center;
        }
        
        .footer-text {
            font-size: 12px;
            color: var(--text-secondary);
            text-align: center;
            margin-top: 24px;
        }