:root {
            --bg: #eef4ff;
            --shell: #ffffff;
            --ink: #0f172a;
            --muted: #64748b;
            --blue: #1d4ed8;
            --orange: #f97316;
            --border: #cbd5e1;
            --danger: #7a0711;
        }
        * { box-sizing: border-box; }
        html, body { min-height: 100%; margin: 0; }
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 45%, #fff7ed 100%);
            font-family: "Segoe UI", Inter, system-ui, -apple-system, Arial, sans-serif;
            color: var(--ink);
            padding: 24px;
        }
        .shell {
            width: min(1320px, 100%);
            min-height: calc(100dvh - 48px);
            display: grid;
            grid-template-columns: 1fr 1fr;
            background: var(--shell);
            border-radius: 28px;
            overflow: hidden;
            box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
        }
        .left, .right { position: relative; overflow: hidden; }
        .left {
            background: linear-gradient(135deg, #0f2f7a 0%, #1d4ed8 58%, #f97316 100%);
            color: white;
            padding: 42px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .right {
            padding: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .blob1, .blob2 {
            position: absolute;
            border-radius: 999px;
            filter: blur(42px);
            pointer-events: none;
        }
        .blob1 { top: -40px; right: -40px; width: 240px; height: 240px; background: rgba(255,255,255,.12); }
        .blob2 { bottom: -50px; left: -40px; width: 220px; height: 220px; background: rgba(251,146,60,.20); }
        .brand { display: flex; gap: 14px; align-items: center; position: relative; z-index: 1; }
        .logo {
            width: 64px;
            height: 64px;
            border-radius: 20px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 24px rgba(15,23,42,.18);
            overflow: hidden;
            flex: 0 0 auto;
        }
        .logo-img { width: 38px; height: 38px; object-fit: cover; }
        .brand h1 { font-size: 30px; line-height: 1; margin: 0; font-weight: 800; letter-spacing: .8px; }
        .brand p { margin: 6px 0 0; font-size: 12px; letter-spacing: 1px; color: rgba(255,255,255,.8); }
        .hero { position: relative; z-index: 1; max-width: 500px; margin-top: 24px; }
        .hero h2 { font-size: 46px; line-height: 1.05; margin: 0 0 18px; font-weight: 800; }
        .hero p { margin: 0; color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.6; max-width: 470px; }
        .stats { display: flex; gap: 16px; position: relative; z-index: 1; flex-wrap: wrap; }
        .stat {
            background: rgba(255,255,255,.14);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 20px;
            padding: 18px 20px;
            min-width: 150px;
        }
        .stat strong { display: block; font-size: 20px; margin-bottom: 3px; }
        .stat span { font-size: 12px; color: rgba(255,255,255,.8); }
        .form { width: 100%; max-width: 520px; }
        .mobile-header { display: none; align-items: center; gap: 12px; margin-bottom: 14px; }
        .mobile-header .logo { width: 56px; height: 56px; border-radius: 12px; }
        .form h3 { font-size: 40px; line-height: 1.05; margin: 0 0 8px; font-weight: 800; }
        .form .sub { color: var(--muted); margin: 0 0 30px; font-size: 16px; }
        .field { margin-bottom: 18px; }
        label { display: block; font-size: 13px; color: #334155; margin-bottom: 8px; font-weight: 700; }
        input[type=text], input[type=password], input[type=email], input[type=tel], select {
            width: 100%;
            padding: 15px 18px;
            border: 1px solid var(--border);
            border-radius: 18px;
            font-size: 15px;
            color: #334155;
            outline: none;
            transition: border-color .2s, box-shadow .2s, background .2s;
            background: #fff;
        }
        input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=tel]:focus, select:focus {
            border-color: var(--blue);
            box-shadow: 0 0 0 4px rgba(29,78,216,.12);
            background: #f8fbff;
        }
        .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 18px; flex-wrap: wrap; }
        .remember { display: flex; align-items: center; gap: 8px; color: #475569; font-size: 13px; }
        .remember input { accent-color: var(--blue); }
        .forgot { background: transparent; border: 0; color: var(--blue); font-weight: 600; font-size: 13px; cursor: pointer; padding: 0; }
        .actions { display: flex; gap: 12px; flex-direction: column; }
        button.primary, button.ghost {
            width: 100%;
            min-height: 56px;
            border-radius: 18px;
            font-size: 15px;
            font-weight: 800;
            cursor: pointer;
            transition: opacity .2s, background .2s, transform .05s;
        }
        button.primary {
            background: linear-gradient(90deg, var(--blue), var(--orange));
            color: #fff;
            border: 0;
            box-shadow: 0 12px 24px rgba(29,78,216,.16);
        }
        button.ghost { background: #fff; border: 1px solid var(--border); color: #475569; }
        button:active { transform: translateY(1px); }
        .banner {
            background: #fff4f4;
            color: var(--danger);
            padding: 12px 14px;
            border-radius: 14px;
            margin-bottom: 16px;
            border: 1px solid #ffd6d6;
            font-size: 13px;
            line-height: 1.4;
        }
        .delete-btn {
            padding: 10px 14px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, #ef4444, #b91c1c);
            color: #fff;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 8px 16px rgba(220, 38, 38, 0.2);

            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .delete-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(220, 38, 38, 0.3);
            background: linear-gradient(135deg, #dc2626, #991b1b);
        }

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

        .delete-btn::before {
            content: "🗑";
            font-size: 14px;
        }
        .archive-btn {
            padding: 8px 14px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #fff;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.25s ease;
            box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25);

            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .archive-btn:hover {
            background: linear-gradient(135deg, #fbbf24, #ea580c);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(217, 119, 6, 0.35);
        }

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

        .archive-btn:focus {
            outline: none;
            box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25);
        }
        .foot { margin-top: 30px; font-size: 12px; color: #94a3b8; text-align: center; }
        
        .account-register-section { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:20px; color:var(--muted); font-size:14px; }
        .register-link-btn { padding:0; border:0; background:none; color:var(--primary); font:inherit; font-weight:800; cursor:pointer; }
        .register-link-btn:hover { text-decoration:underline; }
        .register-modal { position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(15,23,42,.62); backdrop-filter:blur(5px); }
        .register-modal.show { display:flex; }
        .register-modal-card { position:relative; width:min(680px,100%); max-height:calc(100dvh - 48px); overflow-y:auto; padding:32px; border-radius:24px; background:#fff; box-shadow:0 28px 80px rgba(15,23,42,.3); }
        .register-close-btn { position:absolute; top:16px; right:18px; width:38px; height:38px; border:0; border-radius:50%; background:#f1f5f9; color:#475569; font-size:26px; line-height:1; cursor:pointer; }
        .register-modal-header { margin-bottom:24px; padding-right:42px; }
        .register-modal-header h2 { margin:0 0 8px; color:#0f172a; font-size:28px; }
        .register-modal-header p { margin:0; color:#64748b; }
        .register-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
        .register-full-width { grid-column:1/-1; }
        .register-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:22px; }
        .registration-message { display:none; margin-top:18px; padding:13px 15px; border-radius:12px; font-size:14px; font-weight:700; }
        .registration-message.error { display:block; color:#b91c1c; background:#fef2f2; border:1px solid #fecaca; }
        .registration-message.success { display:block; color:#166534; background:#f0fdf4; border:1px solid #bbf7d0; }
        .registration-message.warning { display:block; color:#92400e; background:#fffbeb; border:1px solid #fde68a; }
        .register-actions button:disabled { cursor:not-allowed; opacity:.65; }
        .registration-honeypot { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
        .registration-verification { display:none; }
        .registration-verification.show { display:block; }
        .registration-code-input { letter-spacing:.35em; text-align:center; font-size:24px; font-weight:800; }
        .registration-captcha { display:flex; justify-content:center; margin-top:18px; }
        .primary-btn, .secondary-btn { min-height:46px; padding:11px 18px; border-radius:14px; font-size:14px; font-weight:800; cursor:pointer; }
        .primary-btn { border:0; color:#fff; background:linear-gradient(90deg,var(--blue),var(--orange)); }
        .secondary-btn { border:1px solid var(--border); color:#334155; background:#fff; }
        .primary-btn:disabled, .secondary-btn:disabled, button.primary:disabled { cursor:not-allowed; opacity:.65; }
        .login-message { display:none; margin:0 0 16px; padding:12px 14px; border-radius:12px; font-size:13px; font-weight:700; line-height:1.4; }
        .login-message.error { display:block; color:#b91c1c; background:#fef2f2; border:1px solid #fecaca; }
        .login-message.success { display:block; color:#166534; background:#f0fdf4; border:1px solid #bbf7d0; }
        .security-code-modal { position:fixed; inset:0; z-index:11000; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(15,23,42,.68); backdrop-filter:blur(6px); }
        .security-code-modal.show { display:flex; }
        .security-code-card { position:relative; width:min(520px,100%); max-height:calc(100dvh - 48px); overflow-y:auto; padding:32px; border-radius:24px; background:#fff; box-shadow:0 28px 80px rgba(15,23,42,.34); }
        .security-code-setup { margin:0 0 20px; padding:16px; border:1px solid #bfdbfe; border-radius:16px; background:#eff6ff; }
        .security-code-instruction { margin:0 0 14px; color:#334155; font-size:14px; line-height:1.55; }
        .security-code-qr-panel { display:flex; justify-content:center; margin:0 auto 14px; }
        .security-code-qr { width:min(240px,100%); aspect-ratio:1; padding:10px; border:1px solid #bfdbfe; border-radius:14px; background:#fff; image-rendering:pixelated; }
        .security-code-divider { display:flex; align-items:center; gap:10px; margin:12px 0; color:#64748b; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
        .security-code-divider::before, .security-code-divider::after { content:""; flex:1; height:1px; background:#cbd5e1; }
        .setup-key-row { display:flex; align-items:center; gap:10px; }
        .setup-key-row code { flex:1; min-width:0; padding:12px; border:1px dashed #60a5fa; border-radius:10px; background:#fff; color:#0f172a; overflow-wrap:anywhere; font-size:14px; font-weight:800; letter-spacing:.08em; }
        .setup-key-row .secondary-btn { flex:0 0 auto; }
        .authenticator-link { display:inline-block; margin-top:12px; color:var(--blue); font-size:13px; font-weight:800; text-decoration:none; }
        .authenticator-link:hover { text-decoration:underline; }
        .security-code-expiry { margin:10px 0 0; color:#64748b; font-size:12px; }
        .sms-security-code-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 16px; padding:14px; border:1px solid #e2e8f0; border-radius:14px; background:#f8fafc; }
        .sms-security-code-controls[hidden] { display:none; }
        .sms-security-code-controls .security-code-expiry { flex:1 0 100%; margin:0; }
        @media (max-width:640px) { .register-modal, .security-code-modal { padding:14px; } .register-modal-card, .security-code-card { padding:24px 18px; border-radius:18px; } .register-grid { grid-template-columns:1fr; } .register-full-width { grid-column:auto; } .register-actions { display:grid; grid-template-columns:1fr 1fr; } .setup-key-row { align-items:stretch; flex-direction:column; } }
        @media (max-width: 980px) {
            body { padding: 12px; }
            .shell { grid-template-columns: 1fr; min-height: auto; }
            .left { padding: 32px; }
            .hero h2 { font-size: 36px; }
            .right { padding: 32px; }
            .form h3 { font-size: 32px; }
        }

        /* Tablet: keep two-column feel but tighten spacing */
        @media (min-width: 561px) and (max-width: 980px) {
            .shell { grid-template-columns: 40% 60%; width: min(1100px, 100%); }
            .left { padding: 28px; }
            .right { padding: 28px; display: flex; align-items: center; justify-content: center; }
            .form { max-width: 420px; }
            .hero h2 { font-size: 34px; }
            .brand h1 { font-size: 26px; }
            .blob1 { width: 180px; height: 180px; }
            .blob2 { width: 160px; height: 160px; }
        }

        @media (min-width: 561px) and (max-width: 800px) {
            body { padding: 10px; }
            .shell { grid-template-columns: 1fr; width: calc(100vw - 20px); max-width: 100%; }
            .left { display: none; }
            .right { padding: 22px 20px 28px; }
            .brand h1 { font-size: 22px; }
            .brand p { font-size: 11px; }
            .hero { max-width: 100%; margin-top: 18px; }
            .hero h2 { font-size: 24px; line-height: 1.12; }
            .hero p { font-size: 14px; line-height: 1.45; }
            .stats { gap: 10px; }
            .stat { min-width: 0; flex: 1 1 0; padding: 14px 14px; }
            .stat strong { font-size: 16px; }
            .form { max-width: 100%; }
            .form h3 { font-size: 26px; }
            .form .sub { font-size: 14px; margin-bottom: 20px; }
            .field { margin-bottom: 14px; }
            label { font-size: 12px; }
            input[type=text], input[type=password] { padding: 13px 14px; font-size: 14px; border-radius: 14px; }
            .row { margin: 6px 0 14px; }
            button.primary, button.ghost { min-height: 50px; font-size: 14px; border-radius: 14px; }
            .foot { margin-top: 18px; }
            .mobile-header { display: flex; margin-bottom: 12px; }
            .left .stats { flex-wrap: nowrap; }
            .blob1 { width: 150px; height: 150px; }
            .blob2 { width: 130px; height: 130px; }
        }

        @media (max-width: 560px) {
            html, body { height:auto; min-height:100%; overflow-y:auto; }
            body { min-height:100dvh; align-items:flex-start; padding:12px; }
            .shell { width:100%; min-width:0; grid-template-columns: minmax(0, 1fr); border-radius: 16px; min-height:calc(100dvh - 24px); box-shadow: none; }
            .left { display: none; }
            .mobile-header { display: flex; }
            .right { min-width:0; padding: 20px; overflow:visible; }
            .brand h1 { font-size: 20px; }
            .hero h2 { font-size: 22px; }
            .form h3 { font-size: 22px; }
            .form { max-width: 100%; padding: 0; }
            .logo { width: 48px; height: 48px; }
            .logo-img { width: 100%; height: auto; }
            .blob1, .blob2 { display: none; }
            .stat { width: 100%; }
        }

        @media (max-width: 380px) {
            body { padding:6px; }
            .shell { min-height:calc(100dvh - 12px); border-radius:14px; }
            .right { padding:16px 12px; }
            .mobile-header { align-items:flex-start; gap:8px; margin-bottom:10px; }
            .mobile-header .logo { width:44px; height:44px; flex-basis:44px; }
            .brand { min-width:0; }
            .brand h1 { overflow-wrap:anywhere; font-size:18px; }
            .brand p { overflow-wrap:anywhere; font-size:10px; letter-spacing:.06em; }
            .form h3 { font-size:21px; }
            .form .sub { margin-bottom:18px; font-size:13px; }
            .field { margin-bottom:13px; }
            .row { align-items:flex-start; flex-direction:column; }
            .account-register-section { flex-wrap:wrap; text-align:center; }
            .register-modal-header, .password-reset-card .register-modal-header { padding-right:36px; }
            .register-modal-header h2 { font-size:22px; overflow-wrap:anywhere; }
            .registration-code-input { letter-spacing:.18em; font-size:20px; }
        }

        @media (max-width: 560px) and (max-height: 640px) {
            body { align-items:flex-start; }
            .right { padding-top:14px; padding-bottom:14px; }
            .mobile-header { margin-bottom:8px; }
            .form .sub { margin-bottom:16px; }
            .foot { margin-top:16px; }
        }

/* Password recovery */
.password-reset-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .68);
    backdrop-filter: blur(6px);
}
.password-reset-modal.show { display: flex; }
.password-reset-card {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    padding: 32px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .34);
}
.recovery-channel-fieldset {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}
.recovery-channel-fieldset legend {
    margin-bottom: 10px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}
.recovery-channel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.recovery-channel-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}
.recovery-channel-option:has(input:checked) {
    border-color: var(--blue);
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .10);
}
.recovery-channel-option:has(input:disabled) {
    cursor: not-allowed;
    opacity: .48;
}
.recovery-channel-option input {
    margin-top: 3px;
    accent-color: var(--blue);
}
.recovery-channel-option span { display: grid; gap: 3px; }
.recovery-channel-option strong { color: #0f172a; font-size: 14px; }
.recovery-channel-option small { color: #64748b; font-size: 12px; font-weight: 500; }
.password-help {
    display: block;
    margin-top: 7px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}
.development-reset-link {
    display: inline-block;
    margin: 0 0 16px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 800;
}
.development-reset-link[hidden] { display: none; }

@media (max-width: 640px) {
    .password-reset-modal { padding: 14px; }
    .password-reset-card { padding: 24px 18px; border-radius: 18px; }
    .recovery-channel-grid { grid-template-columns: 1fr; }
}

/* HANDA-TAYO login password visibility */
.login-password-field {
    position: relative;
}

.login-password-field > input {
    width: 100%;
    padding-right: 5.75rem;
}

.login-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    min-width: 4.25rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid rgba(100, 116, 139, 0.45);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.96);
    color: #334155;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    transform: translateY(-50%);
}

.login-password-toggle:hover {
    background: #f8fafc;
}

.login-password-toggle:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.28);
    outline-offset: 2px;
}

.login-password-toggle[aria-pressed="true"] {
    background: #e2e8f0;
}