body.cfloat-login-page {
    --cf-ink: #17263b;
    --cf-muted: #606570;
    --cf-accent: #079c6f;
    --cf-green: #047857;
    --cf-soft: #e7faf2;
    --cf-line: #8de1c4;
    --cf-icon: #c3f3df;
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cf-ink);
    background:
        radial-gradient(ellipse at 4% 0%, #eaf8f2 0, transparent 32rem),
        #f8f9fa;
    font-family: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    color-scheme: light;
    isolation: isolate;
}
.cfloat-login-page .wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 488px;
    padding: 32px 24px;
}
.cfloat-login-page .cf-login-shell,
.cfloat-login-page .cf-login-shell * { box-sizing: border-box; }
.cfloat-login-page .cf-login-shell {
    position: relative;
    padding: 40px;
    overflow: hidden;
    border: 1.5px solid var(--cf-line);
    border-radius: 22px;
    background: linear-gradient(125deg, var(--cf-soft), #fff 78%);
    box-shadow: 0 3px 5px rgba(23, 38, 59, .065), inset 0 1px 0 rgba(255, 255, 255, .85);
}
.cfloat-login-page .cf-login-shell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #19c78b, transparent);
    pointer-events: none;
}
.cfloat-login-page .cf-login-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 38px;
    padding-bottom: 30px;
    border-bottom: 1px solid #bce9d9;
}
.cfloat-login-page .cf-login-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 1px solid var(--cf-line);
    border-radius: 13px;
    color: var(--cf-accent);
    background: var(--cf-icon);
}
.cfloat-login-page #cf-login-title {
    margin: 0;
    color: var(--cf-ink);
    font-size: 32px;
    font-weight: 750;
    letter-spacing: -1.2px;
    line-height: 1.1;
    text-align: left;
}
.cfloat-login-page .cf-login-form { margin: 0; }
.cfloat-login-page .cf-login-field { margin-bottom: 22px; }
.cfloat-login-page .cf-login-label {
    display: block;
    margin: 0 0 9px;
    color: var(--cf-muted);
    font-size: 13px;
    font-weight: 650;
}
.cfloat-login-page .cf-login-input-wrap { position: relative; }
.cfloat-login-page .cf-login-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #687f78;
    pointer-events: none;
}
.cfloat-login-page input.cf-login-input {
    display: block;
    width: 100%;
    height: 56px;
    margin: 0;
    padding: 14px 16px 14px 46px;
    border: 1px solid #c8ddd3;
    border-radius: 12px;
    outline: none;
    color: var(--cf-ink);
    background: #fff;
    font: inherit;
    font-size: 16px;
    transition: border-color .15s, box-shadow .15s;
}
.cfloat-login-page input.cf-login-input::placeholder { color: #606570; opacity: 1; }
.cfloat-login-page input.cf-login-input:focus {
    border-color: #078768;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(7, 135, 104, .1);
}
.cfloat-login-page input.cf-login-input:-webkit-autofill {
    -webkit-text-fill-color: var(--cf-ink);
    -webkit-box-shadow: 0 0 0 1000px #e7faf2 inset;
    caret-color: var(--cf-ink);
}
.cfloat-login-page #password { padding-right: 56px; }
.cfloat-login-page .cf-login-reveal {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #5c7870;
    background: transparent;
    cursor: pointer;
}
.cfloat-login-page .cf-login-reveal[hidden] { display: none; }
.cfloat-login-page .cf-login-reveal:hover { color: var(--cf-accent); background: var(--cf-soft); }
.cfloat-login-page .cf-login-reveal:focus-visible,
.cfloat-login-page .cf-login-submit:focus-visible {
    outline: 2px solid #078768;
    outline-offset: 4px;
}
.cfloat-login-page .cf-login-reveal .cf-login-eye-slash { display: none; }
.cfloat-login-page .cf-login-reveal[aria-pressed="true"] .cf-login-eye-slash { display: block; }
.cfloat-login-page .cf-login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 54px;
    margin: 30px 0 0;
    padding: 14px 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #fff;
    background: var(--cf-green);
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
}
.cfloat-login-page .cf-login-submit:hover { background: #066b50; box-shadow: 0 4px 12px rgba(4, 120, 87, .15); }
.cfloat-login-page .cf-login-submit:active { background: #055940; }
.cfloat-login-page .cf-login-error {
    margin: 0 0 24px;
    padding: 13px 15px;
    border: 1px solid #efd0ca;
    border-radius: 12px;
    color: #a33831;
    background: #fff5f3;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.cfloat-login-page svg { display: block; flex-shrink: 0; }
@media (max-width: 480px) {
    .cfloat-login-page .wrap { padding: 24px 20px; }
    .cfloat-login-page .cf-login-shell { padding: 32px 28px; border-radius: 22px; }
    .cfloat-login-page .cf-login-brand { margin-bottom: 30px; padding-bottom: 26px; }
    .cfloat-login-page #cf-login-title { font-size: 30px; }
}
@media (max-width: 360px) {
    .cfloat-login-page .wrap { padding: 20px 16px; }
    .cfloat-login-page .cf-login-shell { padding: 28px 22px; }
    .cfloat-login-page input.cf-login-input { padding-left: 42px; }
    .cfloat-login-page .cf-login-input-icon { left: 13px; }
}
@media (max-height: 560px) {
    body.cfloat-login-page { align-items: flex-start; }
    .cfloat-login-page .wrap { padding-top: 20px; padding-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .cfloat-login-page input.cf-login-input,
    .cfloat-login-page .cf-login-submit { transition: none; }
}