.ky-login-security-button {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--ky-site-px, 1px));
    width: 100%;
    min-height: calc(46 * var(--ky-site-px, 1px));
    padding: calc(10 * var(--ky-site-px, 1px)) calc(18 * var(--ky-site-px, 1px));
    border: 1px solid #d9e7dc;
    border-radius: calc(12 * var(--ky-site-px, 1px));
    background: #f4f8f4;
    color: #38744a;
    font-size: calc(15 * var(--ky-site-px, 1px));
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.ky-login-security-button:hover:not(:disabled) { border-color: #57bc7a; background: #edf6ee; }
.ky-login-security-button:disabled { cursor: default; }
.ky-login-security-button.is-verified { border-color: #8ac99d; background: #edf8ef; color: #248443; }
.ky-login-security-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(22 * var(--ky-site-px, 1px));
    height: calc(24 * var(--ky-site-px, 1px));
    border: 1px solid currentColor;
    border-radius: calc(5 * var(--ky-site-px, 1px)) calc(5 * var(--ky-site-px, 1px)) calc(10 * var(--ky-site-px, 1px)) calc(10 * var(--ky-site-px, 1px));
    font-size: calc(13 * var(--ky-site-px, 1px));
    flex-shrink: 0;
}
.ky-login-security-arrow { margin-left: auto; font-size: calc(24 * var(--ky-site-px, 1px)); line-height: 1; }
.is-verified .ky-login-security-arrow { visibility: hidden; }
.ky-login-security-hint { display: block; margin: calc(6 * var(--ky-site-px, 1px)) calc(2 * var(--ky-site-px, 1px)) 0; font-size: calc(12 * var(--ky-site-px, 1px)); color: #7b827c; line-height: 1.5; }
.ky-login-form .ky-login-input { min-width: 0; }
.ky-login-form .ky-login-input:disabled { background: transparent; color: #929b94; opacity: 1; cursor: not-allowed; }
.ky-login-form .ky-login-input:disabled::placeholder { color: #929b94; }
.ky-sms-security-dialog {
    position: fixed;
    inset: 0;
    z-index: 10010;
    align-items: center;
    justify-content: center;
    padding: calc(16 * var(--ky-site-px, 1px));
}
.ky-security-mask { position: absolute; inset: 0; background: rgba(20, 28, 22, .42); }
.ky-security-panel {
    position: relative;
    width: calc(356 * var(--ky-site-px, 1px));
    max-width: 100%;
    max-height: calc(100dvh - calc(32 * var(--ky-site-px, 1px)));
    overflow-y: auto;
    padding: calc(18 * var(--ky-site-px, 1px));
    border-radius: calc(18 * var(--ky-site-px, 1px));
    background: #fff;
    box-shadow: 0 calc(18 * var(--ky-site-px, 1px)) calc(64 * var(--ky-site-px, 1px)) rgba(18, 35, 24, .22);
    box-sizing: border-box;
}
.ky-security-header { display: flex; align-items: center; gap: calc(12 * var(--ky-site-px, 1px)); }
.ky-security-header h2 { margin: 0; font-size: calc(18 * var(--ky-site-px, 1px)); font-weight: 600; color: #202b23; }
.ky-security-refresh { margin-left: auto; background: none; color: #52745a; font-size: calc(13 * var(--ky-site-px, 1px)); cursor: pointer; }
.ky-security-close { padding: 0 calc(2 * var(--ky-site-px, 1px)); background: none; color: #818981; font-size: calc(25 * var(--ky-site-px, 1px)); line-height: 1; cursor: pointer; }
.ky-security-refresh:disabled { opacity: .45; cursor: wait; }
.ky-security-intro { margin: calc(6 * var(--ky-site-px, 1px)) 0 calc(15 * var(--ky-site-px, 1px)); color: #8a918b; font-size: calc(12 * var(--ky-site-px, 1px)); }
.ky-security-images { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(10 * var(--ky-site-px, 1px)); background: #edf1ed; }
.ky-security-images img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.ky-security-images.is-loading img { visibility: hidden; }
.ky-security-images .ky-security-piece { position: absolute; top: 0; left: 0; width: 17.5%; filter: drop-shadow(0 1px calc(3 * var(--ky-site-px, 1px)) rgba(0,0,0,.45)); }
.ky-security-track { position: relative; height: calc(48 * var(--ky-site-px, 1px)); margin-top: calc(14 * var(--ky-site-px, 1px)); border-radius: calc(10 * var(--ky-site-px, 1px)); background: #f1f4f1; }
.ky-security-track span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-left: calc(35 * var(--ky-site-px, 1px)); font-size: calc(13 * var(--ky-site-px, 1px)); color: #89958b; pointer-events: none; }
.ky-security-track input {
    position: relative;
    display: block;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: calc(48 * var(--ky-site-px, 1px));
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: calc(10 * var(--ky-site-px, 1px));
    background: transparent;
    cursor: grab;
    touch-action: none;
}
.ky-security-track input:active { cursor: grabbing; }
.ky-security-track input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: calc(48 * var(--ky-site-px, 1px));
    height: calc(48 * var(--ky-site-px, 1px));
    border: 0;
    border-radius: calc(10 * var(--ky-site-px, 1px));
    background: #448c59 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='m5 5 7 7-7 7m8-14 7 7-7 7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
    box-shadow: 0 calc(2 * var(--ky-site-px, 1px)) calc(6 * var(--ky-site-px, 1px)) #38744a33;
}
.ky-security-track input::-moz-range-thumb { width: calc(48 * var(--ky-site-px, 1px)); height: calc(48 * var(--ky-site-px, 1px)); border: 0; border-radius: calc(10 * var(--ky-site-px, 1px)); background: #448c59; }
.ky-security-track input:disabled { opacity: .45; cursor: default; }
.ky-security-message { min-height: calc(18 * var(--ky-site-px, 1px)); margin: calc(10 * var(--ky-site-px, 1px)) 0 0; font-size: calc(12 * var(--ky-site-px, 1px)); line-height: 1.5; color: #6b796f; }
.ky-security-message.is-error { color: #c3483d; }
.ky-security-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.ky-login-security-button:focus-visible, .ky-security-panel button:focus-visible, .ky-security-track input:focus-visible { outline: calc(2 * var(--ky-site-px, 1px)) solid #448c59; outline-offset: calc(3 * var(--ky-site-px, 1px)); }
/* 增加认证行后仍保证较矮屏幕能滚动看到登录按钮。 */
.ky-modal-login .ky-modal-content { max-height: calc(100dvh - calc(32 * var(--ky-site-px, 1px))); overflow-y: auto; }
@media (max-width: 768px) {
    .ky-login-security-button { min-height: calc(44 * var(--ky-site-px, 1px)); font-size: calc(14 * var(--ky-site-px, 1px)); padding: calc(8 * var(--ky-site-px, 1px)) calc(14 * var(--ky-site-px, 1px)); }
    .ky-security-panel { padding: calc(16 * var(--ky-site-px, 1px)); }
}