/* 来源：templates/login.html 的内联样式（登录页不引 _styles.html，主题 token 自带一份）。逐字节搬运，未改任何选择器/属性。 */
        /* 登录页刻意不 include partials/_styles.html（保持零加载依赖），
           所以 token 在这里自带一份，暗色值同步自 modern-ui/_theme.css。 */
        :root {
            --primary-color: #292524;
            --primary-dark: #0c0a09;
            --primary-fg: #ffffff;
            --bg-page: #f5f5f5;
            --bg-surface: #ffffff;
            --text-primary: #0c0a09;
            --text-muted: #777169;
            --border-color: #e7e5e4;
            --border-strong: #d6d3d1;
            --gradient-mint: #a7e5d3;
            --gradient-peach: #f4c5a8;
            --danger-bg: rgb(220 38 38 / 0.06);
            --danger-border: rgb(220 38 38 / 0.2);
            --danger-fg: #b91c1c;
            --font-display: 'EB Garamond', 'GT Sectra', 'Times New Roman', Georgia, serif;
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            --shadow-focus: 0 0 0 3px rgb(41 37 36 / 0.12);
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-pill: 9999px;
            --radius-xxl: 24px;
        }

        html[data-theme="dark"] {
            /* 主色翻薄荷、前景翻近黑 —— 深底上墨黑按钮什么都看不见 */
            --primary-color: #a7e5d3;
            --primary-dark: #8fd4bf;
            --primary-fg: #0e0d0c;
            --bg-page: #0e0d0c;
            --bg-surface: #161514;
            --text-primary: #f4f2ef;
            --text-muted: #8a857e;
            --border-color: #262421;
            --border-strong: #33302c;
            /* 渐变光晕两色不翻：blur(80px) + 低透明度下就是背景氛围，暗底上正好 */
            --danger-bg: rgb(255 92 114 / 0.14);
            --danger-border: rgb(255 92 114 / 0.28);
            --danger-fg: #ff8a9b;
            /* 焦点环跟着主色走，墨黑那档在暗底上不可见 */
            --shadow-focus: 0 0 0 3px rgb(167 229 211 / 0.22);
            /* 滚动条 / 自动填充等浏览器原生控件跟着切暗 */
            color-scheme: dark;
        }

        body {
            min-height: 100vh;
            margin: 0;
            font-family: var(--font-sans);
            background: var(--bg-page);
            color: var(--text-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        /* 大气渐变光晕 — ElevenLabs gradient orbs */
        body::before,
        body::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            pointer-events: none;
            z-index: 0;
        }

        body::before {
            width: 520px;
            height: 520px;
            top: -180px;
            left: -140px;
            background: radial-gradient(circle, var(--gradient-peach) 0%, transparent 65%);
            opacity: 0.55;
        }

        body::after {
            width: 480px;
            height: 480px;
            bottom: -200px;
            right: -160px;
            background: radial-gradient(circle, var(--gradient-mint) 0%, transparent 65%);
            opacity: 0.5;
        }

        .auth-wrapper {
            position: relative;
            z-index: 1;
            width: min(420px, calc(100% - 2rem));
        }

        .brand-preamble {
            display: flex;
            justify-content: center;
            margin-bottom: 1.75rem;
        }

        .brand-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.4rem 0.95rem;
            border-radius: var(--radius-pill);
            background: var(--bg-surface);
            color: var(--text-primary);
            font-family: var(--font-sans);
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-size: 0.7rem;
            border: 1px solid var(--border-color);
        }

        .auth-card {
            background: var(--bg-surface);
            border-radius: var(--radius-xxl);
            padding: 2.75rem 2.5rem;
            box-shadow: 0 4px 24px rgb(12 10 9 / 0.06);
            border: 1px solid var(--border-color);
        }

        .auth-header {
            text-align: center;
            margin-bottom: 2.25rem;
        }

        .auth-icon {
            width: 52px;
            height: 52px;
            border-radius: var(--radius-pill);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-page);
            color: var(--text-primary);
            font-size: 1.35rem;
            margin-bottom: 1.25rem;
            border: 1px solid var(--border-color);
        }

        .auth-header h1 {
            font-family: var(--font-display);
            font-size: 2rem;
            font-weight: 300;
            color: var(--text-primary);
            margin-bottom: 0.6rem;
            letter-spacing: -0.02em;
            line-height: 1.1;
        }

        .auth-header p {
            color: var(--text-muted);
            margin: 0;
            font-size: 0.95rem;
            font-weight: 400;
        }

        .form-floating {
            margin-bottom: 0.9rem;
        }

        .form-floating > label {
            color: var(--text-muted);
            font-family: var(--font-sans);
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .form-control {
            border-radius: var(--radius-md);
            border: 1px solid var(--border-strong);
            background: var(--bg-surface);
            color: var(--text-primary);
            font-family: var(--font-sans);
            transition: border-color 0.18s ease, box-shadow 0.18s ease;
        }

        .form-control:focus {
            border-color: var(--text-primary);
            box-shadow: var(--shadow-focus);
            background: var(--bg-surface);
        }

        .btn-login {
            border: 1px solid var(--primary-color);
            border-radius: var(--radius-pill);
            padding: 0.85rem;
            font-family: var(--font-sans);
            font-weight: 500;
            font-size: 0.95rem;
            letter-spacing: 0.01em;
            width: 100%;
            background: var(--primary-color);
            color: var(--primary-fg);
            box-shadow: none;
            transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
        }

        .btn-login:hover {
            background: var(--primary-dark);
            border-color: var(--primary-dark);
            color: var(--primary-fg);
            transform: translateY(-1px);
        }

        .btn-login:active {
            transform: translateY(0);
        }

        .alert {
            border-radius: var(--radius-lg);
            border: 1px solid var(--danger-border);
            font-size: 0.85rem;
            background: var(--danger-bg);
            color: var(--danger-fg);
        }

        .system-info {
            margin-top: 1.75rem;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.8rem;
        }

        .system-info strong {
            font-family: var(--font-display);
            font-weight: 400;
            color: var(--text-primary);
            display: block;
            font-size: 0.95rem;
            margin-bottom: 0.25rem;
            letter-spacing: -0.01em;
        }

        @media (max-width: 480px) {
            .auth-card {
                padding: 2rem 1.75rem;
                border-radius: 20px;
            }

            .auth-header h1 {
                font-size: 1.65rem;
            }
        }