:root {
    --auth-void: #03070b;
    --auth-void-soft: #061017;
    --auth-shell-deep: #071018;
    --auth-shell: #14212b;
    --auth-shell-light: #3a4b56;
    --auth-well: rgba(3, 15, 22, 0.92);
    --auth-glass: rgba(5, 30, 41, 0.76);
    --auth-glass-strong: rgba(4, 24, 34, 0.94);
    --auth-cyan: #68d8ea;
    --auth-cyan-bright: #9de8fb;
    --auth-cyan-deep: #159bb7;
    --auth-green: #64e69a;
    --auth-green-deep: #16925b;
    --auth-red: #ff7d85;
    --auth-red-deep: #7d2934;
    --auth-text: #f4fbfd;
    --auth-text-soft: #b8d1da;
    --auth-text-muted: #7fa0ad;
    --auth-line: rgba(117, 222, 239, 0.28);
    --auth-focus: 0 0 0 3px rgba(104, 216, 234, 0.24), 0 0 22px rgba(48, 202, 228, 0.28);
    --auth-radius-shell: 38px;
    --auth-radius-well: 30px;
    --auth-ease: cubic-bezier(0.22, 0.61, 0.24, 1);
    --auth-font-display: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --auth-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    min-height: 100%;
    background: #9de8fb;
}

body.auth-page {
    min-width: 320px;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    overflow-x: hidden;
    background: #9de8fb;
    color: var(--auth-text);
    font-family: var(--auth-font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input {
    font: inherit;
}

a {
    color: inherit;
}

svg {
    display: block;
}

.auth-skip {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100;
    padding: 11px 16px;
    border: 1px solid var(--auth-cyan);
    border-radius: 10px;
    background: #04151d;
    color: var(--auth-text);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 160ms ease;
}

.auth-skip:focus {
    transform: translateY(0);
}

.auth-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #9de8fb;
}

.auth-backdrop__water,
.auth-backdrop__rays,
.auth-backdrop__caustic,
.auth-backdrop__current,
.auth-backdrop__bubbles,
.auth-backdrop__edge,
.auth-backdrop__bubbles i {
    position: absolute;
    pointer-events: none;
}

.auth-backdrop__water,
.auth-backdrop__rays,
.auth-backdrop__caustic,
.auth-backdrop__bubbles,
.auth-backdrop__edge {
    inset: 0;
}

.auth-backdrop__water {
    background:
        radial-gradient(118% 84% at 34% -4%, #eefcff 0%, rgba(238, 252, 255, 0.84) 26%, transparent 66%),
        linear-gradient(180deg, #cdf5ff 0%, #9de8fb 44%, #5fd2ef 76%, #238fb3 100%);
}

.auth-backdrop__water::before,
.auth-backdrop__water::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.auth-backdrop__water::before {
    inset: -16% -10% 54%;
    opacity: 0.72;
    background:
        linear-gradient(172deg, rgba(255, 255, 255, 0.78) 0 2%, transparent 22%),
        linear-gradient(187deg, rgba(255, 255, 255, 0.54) 0 1.4%, transparent 27%),
        linear-gradient(198deg, rgba(255, 255, 255, 0.38) 0 1%, transparent 31%);
    background-repeat: no-repeat;
    background-size: 44% 100%, 35% 100%, 39% 100%;
    background-position: 4% 0, 38% 0, 74% 0;
    mix-blend-mode: soft-light;
    filter: blur(5px);
    animation: auth-surface-breathe 14s ease-in-out infinite alternate;
}

.auth-backdrop__water::after {
    inset: auto -12% -22%;
    height: 54%;
    border-radius: 48% 52% 0 0 / 24% 28% 0 0;
    opacity: 0.52;
    background:
        linear-gradient(180deg, rgba(11, 109, 139, 0.04), rgba(4, 46, 64, 0.58)),
        repeating-linear-gradient(174deg, transparent 0 34px, rgba(225, 250, 255, 0.11) 35px 37px, transparent 38px 71px);
    transform: rotate(-1.5deg);
    animation: auth-tide 18s ease-in-out infinite alternate;
}

.auth-backdrop__rays {
    inset: -18% -10% 0;
    opacity: 0.58;
    background:
        linear-gradient(166deg, rgba(255, 255, 255, 0.5) 0 2.2%, transparent 24%),
        linear-gradient(181deg, rgba(255, 255, 255, 0.34) 0 1.5%, transparent 28%),
        linear-gradient(195deg, rgba(255, 255, 255, 0.26) 0 1.2%, transparent 32%),
        linear-gradient(158deg, rgba(255, 255, 255, 0.3) 0 1.4%, transparent 26%);
    background-repeat: no-repeat;
    background-size: 39% 100%, 31% 100%, 36% 100%, 28% 100%;
    background-position: 3% 0, 31% 0, 59% 0, 86% 0;
    mix-blend-mode: soft-light;
    filter: blur(6px);
    animation: auth-rays 19s ease-in-out infinite alternate;
}

.auth-backdrop__caustic {
    inset: -16%;
    opacity: 0.3;
    background:
        repeating-radial-gradient(ellipse at 18% 28%, transparent 0 25px, rgba(255, 255, 255, 0.2) 27px 29px, transparent 31px 58px),
        repeating-radial-gradient(ellipse at 66% 48%, transparent 0 31px, rgba(220, 250, 255, 0.16) 33px 35px, transparent 37px 70px);
    background-size: 260px 180px, 330px 230px;
    mix-blend-mode: soft-light;
    transform-origin: 34% 8%;
    animation: auth-caustic 16s ease-in-out infinite alternate;
}

.auth-backdrop__current {
    left: -14%;
    width: 82%;
    height: clamp(96px, 13vw, 190px);
    border-top: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    opacity: 0.34;
    box-shadow: 0 -18px 42px rgba(235, 253, 255, 0.12);
}

.auth-backdrop__current--high {
    top: 34%;
    transform: rotate(-7deg);
    animation: auth-current-high 21s ease-in-out infinite alternate;
}

.auth-backdrop__current--low {
    top: 61%;
    left: -6%;
    width: 72%;
    opacity: 0.2;
    transform: rotate(4deg);
    animation: auth-current-low 25s ease-in-out infinite alternate;
}

.auth-backdrop__bubbles {
    overflow: hidden;
    opacity: 0.72;
}

.auth-backdrop__bubbles i {
    bottom: -80px;
    left: var(--bubble-x);
    width: var(--bubble-size);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background:
        radial-gradient(circle at 31% 27%, rgba(255, 255, 255, 0.94) 0 10%, transparent 38%),
        radial-gradient(circle at 50% 52%, rgba(220, 250, 255, 0.08), rgba(255, 255, 255, 0.22) 100%);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.28), 0 0 12px rgba(199, 247, 255, 0.2);
    animation: auth-bubble-rise var(--bubble-speed) linear var(--bubble-delay) infinite;
}

.auth-backdrop__bubbles i:nth-child(1) { --bubble-x: 8%; --bubble-size: 18px; --bubble-speed: 18s; --bubble-delay: -4s; --bubble-sway: 34px; }
.auth-backdrop__bubbles i:nth-child(2) { --bubble-x: 17%; --bubble-size: 9px; --bubble-speed: 13s; --bubble-delay: -11s; --bubble-sway: -18px; }
.auth-backdrop__bubbles i:nth-child(3) { --bubble-x: 29%; --bubble-size: 29px; --bubble-speed: 24s; --bubble-delay: -16s; --bubble-sway: 46px; }
.auth-backdrop__bubbles i:nth-child(4) { --bubble-x: 41%; --bubble-size: 12px; --bubble-speed: 16s; --bubble-delay: -7s; --bubble-sway: -26px; }
.auth-backdrop__bubbles i:nth-child(5) { --bubble-x: 54%; --bubble-size: 20px; --bubble-speed: 21s; --bubble-delay: -18s; --bubble-sway: 28px; }
.auth-backdrop__bubbles i:nth-child(6) { --bubble-x: 65%; --bubble-size: 8px; --bubble-speed: 14s; --bubble-delay: -3s; --bubble-sway: -16px; }
.auth-backdrop__bubbles i:nth-child(7) { --bubble-x: 76%; --bubble-size: 14px; --bubble-speed: 19s; --bubble-delay: -13s; --bubble-sway: 22px; }
.auth-backdrop__bubbles i:nth-child(8) { --bubble-x: 91%; --bubble-size: 7px; --bubble-speed: 12s; --bubble-delay: -9s; --bubble-sway: -12px; }

.auth-backdrop__edge {
    background:
        radial-gradient(ellipse 35% 62% at 82% 54%, rgba(2, 13, 19, 0.78) 0%, rgba(3, 28, 39, 0.55) 56%, transparent 100%),
        linear-gradient(90deg, rgba(238, 252, 255, 0.04) 0%, transparent 42%, rgba(3, 31, 43, 0.18) 59%, rgba(2, 14, 21, 0.74) 100%),
        linear-gradient(180deg, rgba(6, 39, 51, 0.05) 0%, transparent 55%, rgba(3, 40, 55, 0.34) 100%);
    box-shadow: inset 0 -42px 90px rgba(1, 23, 33, 0.18);
}

@keyframes auth-caustic {
    from { opacity: 0.2; transform: translate3d(-2%, -1%, 0) rotate(-1deg) scale(1.01); }
    to { opacity: 0.34; transform: translate3d(2%, 1%, 0) rotate(1deg) scale(1.04); }
}

@keyframes auth-surface-breathe {
    from { opacity: 0.58; transform: translate3d(-1.5%, 0, 0) skewX(-1deg); }
    to { opacity: 0.82; transform: translate3d(1.5%, 1%, 0) skewX(1.4deg); }
}

@keyframes auth-rays {
    from { opacity: 0.45; transform: translate3d(-2%, 0, 0) skewX(-1.5deg); }
    to { opacity: 0.68; transform: translate3d(2%, 0, 0) skewX(2deg); }
}

@keyframes auth-tide {
    from { transform: translate3d(-1.5%, 0, 0) rotate(-1.5deg); }
    to { transform: translate3d(1.5%, -2%, 0) rotate(0.6deg); }
}

@keyframes auth-current-high {
    from { transform: translate3d(-2%, 0, 0) rotate(-7deg); }
    to { transform: translate3d(3%, -8px, 0) rotate(-5.5deg); }
}

@keyframes auth-current-low {
    from { transform: translate3d(2%, 0, 0) rotate(4deg); }
    to { transform: translate3d(-3%, 9px, 0) rotate(2.5deg); }
}

@keyframes auth-bubble-rise {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.72); }
    12% { opacity: 0.75; }
    86% { opacity: 0.58; }
    100% { opacity: 0; transform: translate3d(var(--bubble-sway), -118vh, 0) scale(1.08); }
}

.auth-mast {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1680px;
    min-height: 94px;
    margin: 0 auto;
    padding:
        max(18px, env(safe-area-inset-top))
        max(28px, calc(env(safe-area-inset-right) + 20px))
        12px
        max(28px, calc(env(safe-area-inset-left) + 20px));
}
.auth-mast::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 50%;
    z-index: -1;
    width: 100vw;
    background: linear-gradient(180deg, rgba(58, 78, 90, 0.94), rgba(43, 63, 74, 0.88));
    box-shadow:
        0 10px 28px rgba(4, 30, 40, 0.18),
        inset 0 -1px 0 rgba(205, 245, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateX(-50%);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
    backdrop-filter: blur(16px) saturate(1.08);
}

.auth-mast::after {
    content: "";
    position: absolute;
    left: max(28px, calc(env(safe-area-inset-left) + 20px));
    right: max(28px, calc(env(safe-area-inset-right) + 20px));
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(104, 216, 234, 0.42), rgba(104, 216, 234, 0.08) 55%, transparent);
}

.auth-brand {
    display: inline-flex;
    width: clamp(202px, 18vw, 250px);
    border-radius: 12px;
    outline: none;
}

.auth-brand img {
    display: block;
    width: 100%;
    height: auto;
}

.auth-brand:focus-visible {
    box-shadow: var(--auth-focus);
}

.auth-return {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    gap: 9px;
    padding: 8px 13px 8px 10px;
    border: 1px solid rgba(154, 224, 237, 0.2);
    border-radius: 13px;
    background: rgba(3, 15, 22, 0.48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: #d9edf3;
    font-family: var(--auth-font-display);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform 160ms var(--auth-ease),
        border-color 160ms ease,
        background 160ms ease;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.auth-return svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.auth-return:hover {
    border-color: rgba(104, 216, 234, 0.52);
    background: rgba(6, 29, 40, 0.74);
    transform: translateX(-2px);
}

.auth-return:active {
    transform: translateX(-2px) translateY(2px);
}

.auth-return:focus-visible {
    outline: none;
    box-shadow: var(--auth-focus);
}

.auth-stage {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(13rem, 1fr) minmax(29rem, 34rem);
    align-items: center;
    gap: clamp(28px, 4vw, 72px);
    width: 100%;
    max-width: 1680px;
    min-height: calc(100vh - 94px);
    min-height: calc(100svh - 94px);
    margin: 0 auto;
    padding:
        clamp(22px, 3vw, 48px)
        max(34px, calc(env(safe-area-inset-right) + 24px))
        max(36px, calc(env(safe-area-inset-bottom) + 28px))
        max(34px, calc(env(safe-area-inset-left) + 24px));
}

.auth-stage__vista {
    min-height: 1px;
}

.auth-stage__panel {
    width: 100%;
    min-width: 0;
}

.auth-capsule {
    position: relative;
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(173, 225, 234, 0.34);
    border-radius: var(--auth-radius-shell);
    background:
        linear-gradient(145deg, rgba(103, 126, 138, 0.62) 0%, rgba(22, 35, 44, 0.98) 16%, rgba(5, 12, 18, 0.99) 51%, rgba(49, 70, 81, 0.92) 82%, rgba(7, 15, 22, 0.99) 100%);
    box-shadow:
        0 34px 80px rgba(0, 0, 0, 0.56),
        0 0 0 2px rgba(0, 8, 13, 0.84),
        0 0 0 4px rgba(93, 203, 222, 0.12),
        0 0 44px rgba(34, 191, 217, 0.16),
        inset 0 1px 0 rgba(238, 254, 255, 0.33),
        inset 0 -3px 8px rgba(0, 0, 0, 0.72);
    isolation: isolate;
}

.auth-capsule::before,
.auth-capsule::after {
    content: "";
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.auth-capsule::before {
    inset: 4px;
    border: 1px solid rgba(103, 231, 249, 0.18);
    border-radius: calc(var(--auth-radius-shell) - 4px);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.72),
        inset 0 0 22px rgba(72, 210, 232, 0.08);
}

.auth-capsule::after {
    top: 5px;
    left: 72px;
    right: 72px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(190, 245, 255, 0.8), transparent);
    filter: drop-shadow(0 0 5px rgba(104, 216, 234, 0.62));
}

.auth-capsule__latch {
    position: absolute;
    top: 78px;
    z-index: -1;
    width: 27px;
    height: 74px;
    border: 1px solid rgba(131, 177, 190, 0.26);
    background: linear-gradient(180deg, #344651, #0a131a 25%, #17252e 76%, #050b10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 20px rgba(0, 0, 0, 0.45);
}

.auth-capsule__latch--left {
    left: -15px;
    border-radius: 13px 0 0 13px;
}

.auth-capsule__latch--right {
    right: -15px;
    border-radius: 0 13px 13px 0;
}

.auth-capsule__well {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: clamp(25px, 3.1vw, 38px);
    border: 1px solid rgba(120, 220, 238, 0.34);
    border-radius: var(--auth-radius-well);
    background:
        linear-gradient(180deg, rgba(7, 28, 38, 0.95) 0%, rgba(3, 15, 22, 0.96) 46%, rgba(2, 10, 16, 0.98) 100%);
    box-shadow:
        inset 0 2px 0 rgba(219, 251, 255, 0.11),
        inset 0 -18px 44px rgba(0, 0, 0, 0.48),
        inset 0 0 40px rgba(49, 192, 215, 0.045);
    -webkit-backdrop-filter: blur(24px) saturate(1.12);
    backdrop-filter: blur(24px) saturate(1.12);
}

.auth-capsule__well::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.18;
    background:
        radial-gradient(circle at 18% 10%, rgba(157, 232, 251, 0.18), transparent 28%),
        repeating-linear-gradient(118deg, transparent 0 16px, rgba(255, 255, 255, 0.018) 17px 18px);
    pointer-events: none;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 0.9fr 1.35fr;
    min-height: 52px;
    margin: calc(clamp(25px, 3.1vw, 38px) * -1) calc(clamp(25px, 3.1vw, 38px) * -1) 30px;
    border-bottom: 1px solid rgba(113, 205, 221, 0.22);
    background: rgba(1, 10, 15, 0.4);
}

.auth-tab {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 15px 10px 14px;
    color: var(--auth-text-muted);
    font-family: var(--auth-font-display);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: color 160ms ease, background 160ms ease;
}

.auth-tab + .auth-tab {
    border-left: 1px solid rgba(113, 205, 221, 0.16);
}

.auth-tab::after {
    content: "";
    position: absolute;
    right: 18%;
    bottom: -1px;
    left: 18%;
    height: 2px;
    border-radius: 2px;
    background: var(--auth-cyan);
    box-shadow: 0 0 12px rgba(104, 216, 234, 0.8);
    opacity: 0;
    transform: scaleX(0.3);
    transition: opacity 160ms ease, transform 160ms var(--auth-ease);
}

.auth-tab:hover {
    color: var(--auth-text);
    background: rgba(104, 216, 234, 0.045);
}

.auth-tab.is-active {
    color: var(--auth-text);
}

.auth-tab.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}

.auth-tab:focus-visible {
    z-index: 2;
    outline: none;
    box-shadow: inset var(--auth-focus);
}

.auth-heading {
    margin-bottom: 26px;
}

.auth-heading h1 {
    margin: 0;
    color: var(--auth-text);
    font-family: var(--auth-font-display);
    font-size: clamp(1.85rem, 3vw, 2.55rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    text-shadow: 0 2px 18px rgba(50, 190, 215, 0.14);
}

.auth-heading p {
    max-width: 42ch;
    margin: 11px 0 0;
    color: var(--auth-text-soft);
    font-size: 0.96rem;
    line-height: 1.6;
}

.auth-heading--result {
    text-align: center;
}

.auth-heading--result p {
    margin-right: auto;
    margin-left: auto;
}

.auth-state-core {
    display: grid;
    width: 58px;
    height: 58px;
    margin: 0 auto 17px;
    place-items: center;
    border: 1px solid rgba(142, 246, 181, 0.54);
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 32%, rgba(141, 255, 184, 0.42), rgba(23, 137, 82, 0.72) 42%, rgba(3, 36, 26, 0.98) 76%);
    box-shadow:
        0 0 0 5px rgba(6, 25, 24, 0.92),
        0 0 0 7px rgba(100, 230, 154, 0.18),
        0 0 26px rgba(100, 230, 154, 0.3),
        inset 0 1px 2px rgba(237, 255, 243, 0.42);
}

.auth-state-core svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: #d8ffe7;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.5;
    filter: drop-shadow(0 0 5px rgba(100, 230, 154, 0.65));
}

.auth-form {
    display: grid;
    gap: 18px;
}

.auth-field {
    display: grid;
    gap: 8px;
}

.auth-field > label,
.credential-field > label {
    color: #dcecf1;
    font-family: var(--auth-font-display);
    font-size: 0.83rem;
    font-weight: 700;
    letter-spacing: 0.015em;
}

.auth-field__hint {
    margin: -1px 2px 0;
    color: var(--auth-text-muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.auth-input-well {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 56px;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(130, 187, 199, 0.38);
    border-radius: 13px;
    background:
        linear-gradient(180deg, rgba(1, 10, 15, 0.82), rgba(5, 23, 31, 0.78));
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.58),
        inset 0 -1px 0 rgba(173, 237, 248, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.035);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms var(--auth-ease);
}

.auth-input-well:focus-within {
    border-color: rgba(104, 216, 234, 0.88);
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.54),
        inset 0 -1px 0 rgba(173, 237, 248, 0.12),
        var(--auth-focus);
    transform: translateY(-1px);
}

.auth-input-well input {
    width: 100%;
    min-width: 0;
    height: 54px;
    padding: 0 16px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--auth-text);
    font-family: var(--auth-font-body);
    font-size: 1rem;
    font-weight: 500;
    caret-color: var(--auth-cyan);
}

.auth-input-well input::selection,
.credential-control input::selection {
    background: rgba(104, 216, 234, 0.32);
}

.auth-input-well input:-webkit-autofill,
.auth-input-well input:-webkit-autofill:hover,
.auth-input-well input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--auth-text);
    box-shadow: 0 0 0 1000px #061923 inset;
    transition: background-color 9999s ease-out;
}

.auth-input-well--action input {
    padding-right: 58px;
}

.auth-input-action,
.credential-icon-action,
.credential-action {
    border: 0;
    color: var(--auth-cyan-bright);
    cursor: pointer;
}

.auth-input-action {
    position: absolute;
    top: 5px;
    right: 5px;
    display: grid;
    width: 45px;
    height: 45px;
    place-items: center;
    border: 1px solid rgba(112, 209, 226, 0.18);
    border-radius: 10px;
    background: rgba(8, 35, 46, 0.68);
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.auth-input-action svg,
.credential-icon-action svg,
.credential-action svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.auth-input-action:hover,
.credential-icon-action:hover,
.credential-action:hover {
    border-color: rgba(104, 216, 234, 0.56);
    background: rgba(15, 65, 80, 0.82);
}

.auth-input-action:active,
.credential-icon-action:active,
.credential-action:active {
    transform: translateY(2px);
}

.auth-input-action:focus-visible,
.credential-icon-action:focus-visible,
.credential-action:focus-visible {
    outline: none;
    box-shadow: var(--auth-focus);
}

.auth-check {
    display: inline-flex;
    width: fit-content;
    min-height: 44px;
    align-items: center;
    gap: 11px;
    color: #d5e8ee;
    cursor: pointer;
    font-size: 0.9rem;
    user-select: none;
}

.auth-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.auth-check__box {
    display: grid;
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(133, 200, 213, 0.46);
    border-radius: 7px;
    background: linear-gradient(145deg, rgba(3, 13, 19, 0.9), rgba(11, 39, 49, 0.82));
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.52);
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.auth-check__box svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #eafff2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 130ms ease, transform 160ms var(--auth-ease);
}

.auth-check input:checked + .auth-check__box {
    border-color: rgba(129, 242, 171, 0.78);
    background: linear-gradient(145deg, #239860, #0d6941);
    box-shadow: inset 0 1px 0 rgba(224, 255, 235, 0.28), 0 0 14px rgba(100, 230, 154, 0.22);
}

.auth-check input:checked + .auth-check__box svg {
    opacity: 1;
    transform: scale(1);
}

.auth-check input:focus-visible + .auth-check__box {
    box-shadow: var(--auth-focus);
}

.auth-primary {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 58px;
    place-items: center;
    overflow: hidden;
    padding: 12px 24px;
    border: 1px solid rgba(186, 245, 255, 0.62);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(94, 222, 241, 0.94) 0%, rgba(29, 171, 199, 0.96) 48%, rgba(8, 104, 133, 0.98) 100%);
    box-shadow:
        0 8px 0 #043c52,
        0 14px 28px rgba(0, 166, 204, 0.25),
        inset 0 2px 0 rgba(239, 255, 255, 0.62),
        inset 0 -3px 0 rgba(0, 54, 74, 0.42);
    color: #03151c;
    cursor: pointer;
    font-family: var(--auth-font-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(214, 251, 255, 0.34);
    transition:
        filter 160ms ease,
        transform 160ms var(--auth-ease),
        box-shadow 160ms var(--auth-ease);
}

.auth-primary::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(234, 255, 255, 0.32);
    border-radius: 10px;
    pointer-events: none;
}

.auth-primary span {
    position: relative;
    z-index: 1;
}

.auth-primary:hover {
    filter: saturate(1.08) brightness(1.07);
    transform: translateY(-2px);
    box-shadow:
        0 10px 0 #043c52,
        0 18px 34px rgba(0, 177, 218, 0.32),
        inset 0 2px 0 rgba(239, 255, 255, 0.68),
        inset 0 -3px 0 rgba(0, 54, 74, 0.42);
}

.auth-primary:active {
    transform: translateY(6px);
    box-shadow:
        0 2px 0 #043c52,
        0 6px 14px rgba(0, 166, 204, 0.18),
        inset 0 2px 4px rgba(0, 45, 61, 0.38);
}

.auth-primary:focus-visible {
    outline: none;
    box-shadow:
        0 8px 0 #043c52,
        0 14px 28px rgba(0, 166, 204, 0.25),
        var(--auth-focus);
}

.auth-primary--submit {
    margin-top: 2px;
}

.auth-links {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 25px;
    color: var(--auth-text-soft);
    font-size: 0.82rem;
}

.auth-links > span {
    width: 1px;
    height: 19px;
    background: rgba(143, 205, 218, 0.28);
}

.auth-links a,
.auth-switch a,
.auth-secondary {
    color: var(--auth-cyan-bright);
    font-weight: 600;
    text-underline-offset: 4px;
    text-decoration-color: rgba(157, 232, 251, 0.36);
    transition: color 150ms ease, text-decoration-color 150ms ease;
}

.auth-links a:hover,
.auth-switch a:hover,
.auth-secondary:hover {
    color: var(--auth-green);
    text-decoration-color: currentColor;
}

.auth-links a:focus-visible,
.auth-switch a:focus-visible,
.auth-secondary:focus-visible {
    border-radius: 5px;
    outline: none;
    box-shadow: var(--auth-focus);
}

.auth-switch {
    margin: 24px 0 0;
    color: var(--auth-text-soft);
    font-size: 0.86rem;
    text-align: center;
}

.auth-notice,
.auth-message {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    padding: 12px 14px;
    border-radius: 12px;
}

.auth-notice {
    border: 1px solid rgba(104, 216, 234, 0.21);
    background: rgba(22, 86, 101, 0.13);
    color: var(--auth-text-soft);
}

.auth-notice svg,
.auth-message svg {
    width: 21px;
    height: 21px;
    margin-top: 1px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.auth-notice p,
.auth-message p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
}

.auth-message {
    margin: -6px 0 20px;
    font-weight: 600;
}

.auth-message--error {
    border: 1px solid rgba(255, 125, 133, 0.42);
    background: linear-gradient(135deg, rgba(97, 27, 38, 0.58), rgba(38, 14, 21, 0.62));
    color: #ffd4d7;
    box-shadow: inset 0 1px 0 rgba(255, 218, 221, 0.08);
}

.auth-message--success {
    border: 1px solid rgba(100, 230, 154, 0.38);
    background: linear-gradient(135deg, rgba(18, 83, 53, 0.5), rgba(6, 34, 25, 0.58));
    color: #d6ffe5;
    box-shadow: inset 0 1px 0 rgba(220, 255, 233, 0.08);
}

.credential-well {
    display: grid;
    gap: 17px;
    padding: 17px;
    border: 1px solid rgba(104, 216, 234, 0.3);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(5, 29, 39, 0.7), rgba(2, 14, 20, 0.82));
    box-shadow:
        inset 0 4px 10px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(170, 234, 245, 0.08);
}

.credential-field {
    display: grid;
    gap: 8px;
}

.credential-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: stretch;
}

.credential-control input {
    width: 100%;
    min-width: 0;
    height: 49px;
    padding: 0 13px;
    border: 1px solid rgba(116, 184, 199, 0.32);
    border-radius: 10px;
    outline: none;
    background: rgba(1, 10, 15, 0.72);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.54);
    color: var(--auth-text);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.88rem;
}

.credential-control input:focus-visible {
    border-color: var(--auth-cyan);
    box-shadow: var(--auth-focus);
}

.credential-action,
.credential-icon-action {
    display: inline-flex;
    min-width: 49px;
    height: 49px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid rgba(104, 216, 234, 0.36);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(15, 64, 79, 0.76), rgba(4, 28, 38, 0.9));
    box-shadow:
        0 3px 0 rgba(1, 13, 19, 0.9),
        inset 0 1px 0 rgba(194, 245, 253, 0.12);
    font-family: var(--auth-font-display);
    font-size: 0.76rem;
    font-weight: 700;
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.credential-icon-action {
    padding: 0;
}

.auth-result-actions {
    display: grid;
    gap: 17px;
    margin-top: 24px;
}

.auth-secondary {
    display: grid;
    min-height: 44px;
    place-items: center;
    font-family: var(--auth-font-display);
    font-size: 0.83rem;
    text-align: center;
}

.auth-copy-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .auth-return {
        background: rgba(3, 15, 22, 0.92);
    }

    .auth-capsule__well {
        background: #06131b;
    }
}

@media (max-width: 1080px) {
    .auth-stage {
        grid-template-columns: minmax(8rem, 0.52fr) minmax(28rem, 32rem);
        gap: 28px;
    }
}

@media (max-width: 820px) {
    .auth-backdrop__rays {
        opacity: 0.42;
    }

    .auth-backdrop__edge {
        background:
            radial-gradient(ellipse 74% 62% at 50% 56%, rgba(3, 18, 26, 0.7) 0%, rgba(3, 34, 47, 0.48) 58%, transparent 100%),
            linear-gradient(180deg, rgba(6, 43, 57, 0.06) 0%, rgba(3, 37, 51, 0.18) 30%, rgba(2, 18, 27, 0.58) 100%);
    }

    .auth-backdrop__current {
        width: 118%;
    }

    .auth-stage {
        grid-template-columns: minmax(0, 1fr);
        min-height: auto;
        padding-top: 28px;
    }

    .auth-stage__vista {
        display: none;
    }

    .auth-stage__panel {
        width: min(100%, 34rem);
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    :root {
        --auth-radius-shell: 29px;
        --auth-radius-well: 23px;
    }

    .auth-mast {
        min-height: 78px;
        padding:
            max(12px, env(safe-area-inset-top))
            max(16px, calc(env(safe-area-inset-right) + 10px))
            9px
            max(16px, calc(env(safe-area-inset-left) + 10px));
    }

    .auth-mast::after {
        right: max(16px, calc(env(safe-area-inset-right) + 10px));
        left: max(16px, calc(env(safe-area-inset-left) + 10px));
    }

    .auth-brand {
        width: clamp(162px, 49vw, 202px);
    }

    .auth-return {
        width: 46px;
        min-height: 46px;
        justify-content: center;
        padding: 0;
    }

    .auth-return span {
        display: none;
    }

    .auth-stage {
        min-height: calc(100svh - 78px);
        align-items: start;
        padding:
            20px
            max(13px, calc(env(safe-area-inset-right) + 8px))
            max(28px, calc(env(safe-area-inset-bottom) + 20px))
            max(13px, calc(env(safe-area-inset-left) + 8px));
    }

    .auth-capsule {
        padding: 6px;
    }

    .auth-capsule__well {
        padding: 23px 18px;
    }

    .auth-capsule::after {
        right: 50px;
        left: 50px;
    }

    .auth-capsule__latch {
        display: none;
    }

    .auth-tabs {
        min-height: 49px;
        margin: -23px -18px 24px;
    }

    .auth-tab {
        padding: 14px 7px 13px;
        font-size: 0.8rem;
    }

    .auth-heading {
        margin-bottom: 22px;
    }

    .auth-heading h1 {
        font-size: clamp(1.65rem, 8.4vw, 2.15rem);
    }

    .auth-heading p {
        font-size: 0.87rem;
        line-height: 1.55;
    }

    .auth-input-well {
        min-height: 53px;
    }

    .auth-input-well input {
        height: 51px;
        font-size: 16px;
    }

    .auth-links {
        flex-wrap: wrap;
        row-gap: 7px;
        margin-top: 22px;
    }

    .credential-well {
        padding: 14px;
    }

    .credential-action span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
    }

    .credential-action {
        width: 49px;
        padding: 0;
    }
}

@media (max-width: 370px) {
    .auth-capsule__well {
        padding-right: 15px;
        padding-left: 15px;
    }

    .auth-tabs {
        margin-right: -15px;
        margin-left: -15px;
    }

    .auth-tab {
        font-size: 0.75rem;
    }

    .credential-control {
        gap: 6px;
    }

    .credential-action,
    .credential-icon-action {
        width: 45px;
        min-width: 45px;
        height: 47px;
    }

    .credential-control input {
        height: 47px;
        padding: 0 10px;
        font-size: 0.79rem;
    }
}

@media (max-height: 720px) and (min-width: 821px) {
    .auth-mast {
        min-height: 78px;
        padding-top: 12px;
    }

    .auth-stage {
        min-height: calc(100vh - 78px);
        align-items: start;
        padding-top: 18px;
        padding-bottom: 28px;
    }

    .auth-capsule__well {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .auth-tabs {
        margin-top: -25px;
        margin-bottom: 22px;
    }

    .auth-heading {
        margin-bottom: 20px;
    }

    .auth-form {
        gap: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .auth-backdrop__edge {
        background:
            linear-gradient(90deg, rgba(157, 232, 251, 0.18), rgba(3, 24, 34, 0.72)),
            rgba(7, 78, 101, 0.36);
    }

    .auth-mast::before,
    .auth-return,
    .auth-capsule__well,
    .auth-input-well,
    .credential-well {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .auth-capsule__well {
        background: #06131b;
    }
}