:root { color-scheme: light; }
* { box-sizing: border-box; }
body.qk-login-page {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    color: #17284e;
    background:
        radial-gradient(circle at 18% 16%, rgba(81, 119, 236, .12), transparent 30%),
        radial-gradient(circle at 83% 84%, rgba(45, 184, 202, .10), transparent 32%),
        #f4f7fc;
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}
.qk-login-card {
    width: min(100%, 470px);
    padding: 30px 44px 22px;
    border: 1px solid #dfe6f1;
    border-radius: 20px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 22px 58px rgba(39, 62, 112, .13);
    transform: scale(.9);
    transform-origin: center;
}
.qk-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 21px; text-align: center; }
.qk-brand-logo { width: 56px; height: 56px; border-radius: 11px; object-fit: contain; box-shadow: 0 8px 22px rgba(45, 68, 112, .13); }
.qk-brand-copy h1 { margin: 0 0 5px; color: #162b55; font-size: 25px; font-weight: 700; line-height: 1.25; }
.qk-brand-copy p { margin: 0; color: #8a98b0; font-size: 11px; letter-spacing: 1.4px; }
.qk-login-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 18px; padding: 4px; border-radius: 11px; background: #f0f3f9; }
.qk-login-tab { height: 40px; border: 0; border-radius: 8px; color: #73829b; background: transparent; font: inherit; font-size: 14px; cursor: pointer; transition: .18s ease; }
.qk-login-tab.active { color: #3159c7; background: #fff; font-weight: 700; box-shadow: 0 3px 10px rgba(35, 61, 119, .09); }
.qk-login-panel { display: none; }
.qk-login-panel.active { display: block; }
.qk-login-form { display: grid; gap: 8px; }
.qk-login-form label { margin-top: 4px; color: #526887; font-size: 13px; font-weight: 600; }
.qk-input-wrap { display: flex; align-items: center; height: 46px; border: 1px solid #d5dfed; border-radius: 9px; background: #fff; transition: border-color .18s, box-shadow .18s; }
.qk-input-wrap:focus-within { border-color: #4168df; box-shadow: 0 0 0 3px rgba(65, 104, 223, .11); }
.qk-input-wrap > span { display: grid; place-items: center; flex: 0 0 43px; color: #91a0b7; font-size: 16px; }
.qk-input-wrap input { min-width: 0; width: 100%; height: 100%; padding: 0 13px 0 0; border: 0; outline: 0; color: #17284e; background: transparent; font: inherit; font-size: 14px; }
.qk-input-wrap input::placeholder { color: #a6b1c2; }
.qk-input-wrap input:-webkit-autofill,
.qk-input-wrap input:-webkit-autofill:hover,
.qk-input-wrap input:-webkit-autofill:focus { -webkit-text-fill-color: #17284e; -webkit-box-shadow: 0 0 0 1000px #fff inset; caret-color: #17284e; }
.qk-captcha-row { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 10px; }
.qk-captcha-image { height: 46px; padding: 0; overflow: hidden; border: 1px solid #d5dfed; border-radius: 9px; background: #f4f7fd; }
.qk-captcha-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qk-captcha-refresh-hint { width: fit-content; margin: -1px 0 2px; padding: 0; border: 0; color: #8190aa; background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
.qk-captcha-refresh-hint span { margin-right: 4px; color: #7185aa; font-size: 18px; line-height: 1; vertical-align: -1px; }
.qk-captcha-refresh-hint:hover { color: #4168df; }
.qk-login-options { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.qk-remember-account { display: inline-flex; align-items: center; gap: 8px; color: #5f7396; font-size: 13px; font-weight: 400; }
.qk-remember-account input { width: 16px; height: 16px; margin: 0; accent-color: #4168df; cursor: pointer; }
.qk-forgot-password { padding: 0; border: 0; color: #4168df; background: transparent; font: inherit; font-size: 13px; cursor: pointer; }
.qk-forgot-password:hover { color: #3159c7; text-decoration: underline; }
.qk-password-help-dialog { width: min(calc(100% - 40px), 320px); padding: 24px; border: 1px solid #d9e2f1; border-radius: 14px; color: #273d66; box-shadow: 0 18px 48px rgba(24, 44, 87, .22); text-align: center; }
.qk-password-help-dialog::backdrop { background: rgba(23, 40, 78, .32); }
.qk-password-help-dialog p { margin: 0 0 20px; font-size: 15px; }
.qk-password-help-dialog button { min-width: 88px; height: 36px; border: 0; border-radius: 7px; color: #fff; background: #4168df; font: inherit; cursor: pointer; }
.qk-password-help-dialog button:hover { background: #3159c7; }
.qk-login-submit { height: 46px; margin-top: 11px; border: 0; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #4168df, #3159c7); box-shadow: 0 9px 20px rgba(65, 104, 223, .24); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.qk-login-submit:hover { transform: translateY(-1px); box-shadow: 0 11px 24px rgba(65, 104, 223, .29); }
.qk-login-submit:disabled { opacity: .68; cursor: wait; transform: none; }
.qk-login-error { min-height: 19px; margin: 3px 0 0; color: #d34b5f; text-align: center; font-size: 13px; }
.qk-login-error-visible { margin: 0 0 18px; padding: 10px 12px; border-radius: 9px; background: #fff1f3; }
.qk-feishu-panel-copy { display: flex; flex-direction: column; align-items: center; padding: 16px 0 9px; text-align: center; }
.qk-feishu-panel-copy h2 { margin: 15px 0 7px; color: #21375f; font-size: 18px; }
.qk-feishu-panel-copy p { margin: 0; color: #8290a8; font-size: 13px; line-height: 1.7; }
.qk-feishu-mark { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; color: #3370ff; background: #eaf0ff; font-size: 25px; }
.qk-feishu-login { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 20px; border-radius: 9px; color: #fff; background: #3370ff; box-shadow: 0 8px 19px rgba(51, 112, 255, .22); font-size: 15px; font-weight: 700; text-decoration: none; transition: .18s ease; }
.qk-feishu-login:hover { background: #2864e8; transform: translateY(-1px); }
.qk-login-hint { margin: 12px 0 0; color: #8997ad; text-align: center; font-size: 12px; }
.qk-login-footer { margin-top: 19px; padding-top: 14px; border-top: 1px solid #edf0f5; color: #a0aabe; text-align: center; font-size: 11px; }
@media (max-width: 560px) {
    body.qk-login-page { padding: 18px; }
    .qk-login-card { padding: 31px 24px 23px; border-radius: 16px; }
    .qk-brand-logo { width: 56px; height: 56px; }
    .qk-brand-copy h1 { font-size: 22px; }
    .qk-captcha-row { grid-template-columns: minmax(0, 1fr) 116px; }
}