:root {
    --cc-sea-top: #0E1E3A;
    --cc-sea-mid: #0A1730;
    --cc-sea-low: #071022;
    --cc-sea-deep: #04080F;
    --cc-sea-glow: #A8C7FA;
    --cc-sea-ray-alpha: 0.06;
    --cc-sea-sub-hull: #DCE9FF;
    --cc-sea-sub-fill: #0C1B31;
    --cc-sea-sub-rim: rgba(176, 203, 250, 0.6);
    --cc-auth-card: rgba(3, 9, 20, 0.6);
    --cc-auth-card-border: rgba(255, 255, 255, 0.16);
    --cc-auth-on-card: #EAF1FB;
    --cc-auth-on-card-muted: #B7C9E6;
    --cc-auth-field-bg: rgba(2, 8, 18, 0.55);
    --cc-auth-field-border: rgba(255, 255, 255, 0.34);
}
:root[data-theme="dark"] {
    --cc-sea-top: #0E1E3A;
    --cc-sea-mid: #0A1730;
    --cc-sea-low: #071022;
    --cc-sea-deep: #04080F;
    --cc-sea-glow: #A8C7FA;
    --cc-sea-ray-alpha: 0.06;
    --cc-sea-sub-hull: #DCE9FF;
}

body.cc-auth-page {
    display: block;
    place-items: normal;
    padding: 0;
    background: var(--cc-surface-container-low);
}
body.cc-auth-page .cc-auth {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
}
body.cc-auth-page .cc-auth-form {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--cc-space-6) var(--cc-space-4);
}
body.cc-auth-page .cc-login-card {
    max-width: 440px;
    text-align: left;
    color: var(--cc-auth-on-card);
    background: var(--cc-auth-card);
    border: 1px solid var(--cc-auth-card-border);
    border-radius: var(--cc-radius-xl);
    box-shadow: 0 24px 64px rgba(4, 14, 32, 0.45);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
}
body.cc-auth-page .cc-login-card.cc-hairline-card::before { display: none; }
:root[data-glass="off"] body.cc-auth-page .cc-login-card {
    background: var(--cc-sea-mid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.cc-auth-page .cc-auth-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--cc-sea-deep);
}
body.cc-auth-page .cc-sea {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

body.cc-auth-page .cc-login-card .cc-login-title,
body.cc-auth-page .cc-login-card .cc-auth-wordmark { color: var(--cc-auth-on-card); }
body.cc-auth-page .cc-login-card .cc-logo-mark { color: var(--cc-sea-sub-hull); }
body.cc-auth-page .cc-login-card .cc-field-label { color: var(--cc-auth-on-card-muted); }
body.cc-auth-page .cc-login-card .cc-switch-label { color: var(--cc-auth-on-card); }
body.cc-auth-page .cc-login-card .cc-input {
    background: var(--cc-auth-field-bg);
    border-color: var(--cc-auth-field-border);
    color: var(--cc-auth-on-card);
}
body.cc-auth-page .cc-login-card .cc-input::placeholder { color: var(--cc-auth-on-card-muted); }
body.cc-auth-page .cc-login-card .cc-input:focus-visible {
    outline-color: var(--cc-sea-sub-hull);
    border-color: var(--cc-sea-sub-hull);
}
body.cc-auth-page .cc-login-card .cc-switch-track { border-color: var(--cc-auth-field-border); }
body.cc-auth-page .cc-login-card .cc-turnstile { display: flex; justify-content: center; min-height: 65px; }
body.cc-auth-page .cc-login-tokenlink {
    margin: var(--cc-space-5) 0 0;
    text-align: center;
    font-size: var(--cc-type-body-md-size);
    color: var(--cc-auth-on-card-muted);
}
body.cc-auth-page .cc-login-tokenlink a {
    color: var(--cc-sea-sub-hull);
    font-weight: 500;
    text-decoration: none;
}
body.cc-auth-page .cc-login-tokenlink a:hover { text-decoration: underline; }
body.cc-auth-page .cc-login-tokenlink a:focus-visible {
    outline: 2px solid var(--cc-sea-sub-hull);
    outline-offset: 2px;
    border-radius: var(--cc-radius-xs, 4px);
}

body.cc-auth-page .cc-login-card .cc-check-text { color: var(--cc-auth-on-card-muted); }
body.cc-auth-page .cc-login-card .cc-check-fieldset .cc-field-label { color: var(--cc-auth-on-card-muted); }
body.cc-auth-page .cc-login-card .cc-check-option {
    background: var(--cc-auth-field-bg);
    border-color: var(--cc-auth-field-border);
    color: var(--cc-auth-on-card);
}
body.cc-auth-page .cc-login-card .cc-check-option-name { color: var(--cc-auth-on-card); }
body.cc-auth-page .cc-login-card .cc-check-option-sub { color: var(--cc-auth-on-card-muted); }
body.cc-auth-page .cc-login-card .cc-check-option:focus-within {
    outline: 2px solid var(--cc-sea-sub-hull);
    outline-offset: 2px;
}

body.cc-auth-page .cc-login-logo {
    justify-content: flex-start;
    align-items: center;
    gap: var(--cc-space-3);
    margin-bottom: var(--cc-space-6);
}
body.cc-auth-page .cc-logo-mark { width: 66px; height: 36px; flex: none; }
body.cc-auth-page .cc-auth-wordmark {
    font-size: var(--cc-type-title-lg-size);
    line-height: var(--cc-type-title-lg-line);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--cc-on-surface);
}
body.cc-auth-page .cc-login-title { margin-bottom: var(--cc-space-5); }
body.cc-auth-page .cc-login-error { justify-content: flex-start; }

body.cc-auth-page .cc-login-logo .cc-logo-halo {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    animation: cc-auth-draw var(--cc-motion-dur-10) var(--cc-motion-ease-standard) forwards;
}
body.cc-auth-page .cc-login-logo .cc-logo-sub {
    animation: cc-sub-surface var(--cc-motion-dur-10) var(--cc-spring-spatial-default) var(--cc-motion-dur-3) forwards;
}
@keyframes cc-auth-draw {
    from { stroke-dashoffset: 1; opacity: 1; }
    to { stroke-dashoffset: 0; opacity: 0.5; }
}

.cc-sea .cc-sea-s0 { stop-color: var(--cc-sea-top); }
.cc-sea .cc-sea-s1 { stop-color: var(--cc-sea-mid); }
.cc-sea .cc-sea-s2 { stop-color: var(--cc-sea-low); }
.cc-sea .cc-sea-s3 { stop-color: var(--cc-sea-deep); }
.cc-sea .cc-sea-g0 { stop-color: var(--cc-sea-glow); stop-opacity: 1; }
.cc-sea .cc-sea-g1 { stop-color: var(--cc-sea-glow); stop-opacity: 0; }

.cc-sea .cc-sea-fade {
    opacity: 0;
    animation: cc-sea-fade 1200ms var(--cc-motion-ease-standard) forwards;
}
@keyframes cc-sea-fade { to { opacity: 1; } }

.cc-sea .cc-sea-rays {
    opacity: var(--cc-sea-ray-alpha);
    transform-box: view-box;
    transform-origin: 460px 0px;
    animation: cc-sea-sway 16s ease-in-out infinite alternate;
}
@keyframes cc-sea-sway {
    from { transform: rotate(-2.5deg); }
    to { transform: rotate(2.5deg); }
}

.cc-sea .cc-sea-bubbles circle { fill: none; stroke: var(--cc-sea-glow); }
.cc-sea .cc-sea-bubbles-far { opacity: 0.16; animation: cc-sea-rise 34s linear infinite; }
.cc-sea .cc-sea-bubbles-mid { opacity: 0.26; animation: cc-sea-rise 23s linear infinite; }
.cc-sea .cc-sea-bubbles-near { opacity: 0.36; animation: cc-sea-rise 15s linear infinite; }
@keyframes cc-sea-rise {
    from { transform: translateY(0); }
    to { transform: translateY(-1200px); }
}

body.cc-auth-page .cc-sea-sub {
    position: absolute;
    left: 50%;
    top: 12%;
    width: clamp(140px, 40vw, 200px);
    height: auto;
    overflow: visible;
    pointer-events: none;
    translate: -50% -50%;
    --cc-sub-sway: 4vw;
    animation: cc-sea-sail 16s ease-in-out infinite;
}
.cc-sea-sub .cc-sea-sub-ping circle {
    fill: none;
    stroke: var(--cc-sea-glow);
    stroke-width: 1.2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: cc-sea-ping 7s var(--cc-motion-ease-decel) infinite;
}
.cc-sea-sub .cc-sea-sub-ping circle:nth-child(2) { animation-delay: 2.3s; }
.cc-sea-sub .cc-sea-sub-ping circle:nth-child(3) { animation-delay: 4.6s; }
@keyframes cc-sea-ping {
    0% { transform: scale(0.4); opacity: 0.32; }
    100% { transform: scale(2.4); opacity: 0; }
}
@keyframes cc-sea-sail {
    0%, 100% { transform: translateX(calc(-1 * var(--cc-sub-sway))); }
    50% { transform: translateX(var(--cc-sub-sway)); }
}
.cc-sea-sub .cc-sea-sub-body {
    transform-box: fill-box;
    transform-origin: center;
    animation: cc-sea-breathe 7s ease-in-out infinite;
}
@keyframes cc-sea-breathe {
    0%, 100% { transform: translateY(0) rotate(-1.4deg); }
    50% { transform: translateY(3px) rotate(1.4deg); }
}
.cc-sea-sub .cc-sea-sub-logo {
    fill: var(--cc-sea-sub-fill);
    stroke: var(--cc-sea-sub-rim);
    stroke-width: 1.4;
    filter: drop-shadow(0 0 6px rgba(96, 138, 208, 0.55));
}
.cc-sea-sub .cc-sea-sub-wake circle {
    fill: var(--cc-sea-glow);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: cc-sea-wake 2.6s ease-out infinite;
}
.cc-sea-sub .cc-sea-sub-wake circle:nth-child(2) { animation-delay: 0.9s; }
.cc-sea-sub .cc-sea-sub-wake circle:nth-child(3) { animation-delay: 1.7s; }
@keyframes cc-sea-wake {
    0% { opacity: 0.5; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(-14px, -12px) scale(0.35); }
}

@media (prefers-reduced-motion: reduce) {
    body.cc-auth-page .cc-sea *,
    body.cc-auth-page .cc-sea-sub,
    body.cc-auth-page .cc-sea-sub *,
    body.cc-auth-page .cc-logo-mark * { animation: none !important; }
    body.cc-auth-page .cc-sea-sub { transform: none; }
    body.cc-auth-page .cc-sea-sub .cc-sea-sub-wake { display: none; }
    body.cc-auth-page .cc-sea .cc-sea-fade,
    body.cc-auth-page .cc-login-logo .cc-logo-sub { opacity: 1; transform: none; }
    body.cc-auth-page .cc-login-logo .cc-logo-halo { stroke-dashoffset: 0; opacity: 0.5; }
    body.cc-auth-page .cc-auth-scene,
    body.cc-auth-page .cc-login-logo { animation: cc-auth-fade var(--cc-motion-dur-6) var(--cc-motion-ease-standard) both; }
}
@keyframes cc-auth-fade { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 840px) {
    body.cc-auth-page .cc-auth-form {
        justify-content: flex-start;
        padding: var(--cc-space-8) var(--cc-space-6);
        padding-left: clamp(var(--cc-space-8), 15vw, 220px);
    }
    body.cc-auth-page .cc-sea-sub {
        left: 75%;
        top: 50%;
        width: clamp(190px, 20vw, 260px);
        --cc-sub-sway: 7vw;
    }
}