/* ログイン画面（2026-10 UI改善）：色は theme.css */
        * { box-sizing: border-box; }
        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 24px 16px;
            background: var(--bg);
            color: var(--ink);
            font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
        }

        .login-card {
            width: 100%;
            max-width: 380px;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
        }
        .login-head {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 22px 28px;
            background: var(--ai-dark);
            color: #fff;
        }
        .login-head img { width: 36px; height: 36px; }
        .login-head h1 { margin: 0; font-size: 20px; letter-spacing: .04em; }
        .login-head p { margin: 2px 0 0; font-size: 12px; opacity: .75; letter-spacing: .08em; }

        form { display: flex; flex-direction: column; gap: 16px; padding: 28px; }
        .field { display: flex; flex-direction: column; gap: 6px; }
        label { font-size: 14px; font-weight: 600; }
        input {
            width: 100%;
            padding: 10px 12px;
            font-size: 16px;
            border: 1px solid #c9ced3;
            border-radius: 6px;
            background: #fff;
            color: var(--ink);
            transition: border-color .15s, box-shadow .15s;
        }
        input:focus { outline: none; border-color: var(--ai); box-shadow: 0 0 0 3px var(--ai-pale); }

        .pw-wrap { position: relative; }
        .pw-wrap input { padding-right: 64px; }
        .pw-toggle {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            padding: 4px 8px;
            font-size: 12px;
            color: var(--ai);
            background: none;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .pw-toggle:hover { background: var(--ai-pale); }
        .pw-toggle:focus-visible { outline: 2px solid var(--ai); }
        .caps { display: none; font-size: 12px; color: var(--warn); }

        .error {
            display: none;
            padding: 10px 12px;
            font-size: 14px;
            color: #a8322b;
            background: #fbeaea;
            border-radius: 6px;
        }

        button[type="submit"] {
            margin-top: 4px;
            padding: 11px;
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            background: var(--btn-primary);
            border: none;
            border-radius: 6px;
            cursor: pointer;
            box-shadow: 0 1px 2px rgba(0,0,0,.12);
            transition: background-color .15s, transform .1s, box-shadow .15s;
        }
        button[type="submit"]:hover { background: var(--btn-primary-hover); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.15); }
        button[type="submit"]:active { transform: translateY(0); }
        button[type="submit"]:focus-visible { outline: 3px solid var(--ai-pale); outline-offset: 1px; }
        button[type="submit"]:disabled { opacity: .7; cursor: progress; }

        .login-foot { font-size: 12px; color: var(--sub); }