/* Hollowire auth UI: shared by SignIn, SignUp, VerifyOtp */
:root {
    color-scheme: light dark;
    --bg: #fafafa;
    --fg: #111;
    --muted: #666;
    --card: #f0f0f2;
    --field: #e4e4e9;
    --accent: #2b5cff;
    --accent2: #ff4fa3;
    --dot: rgba(0,0,0,.14);
    --ease: cubic-bezier(.2,.8,.2,1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0e0e0e;
        --fg: #eee;
        --muted: #999;
        --card: #181818;
        --field: #262626;
        --accent: #7c9bff;
        --accent2: #ff7ac0;
        --dot: rgba(255,255,255,.14);
    }
}

* {
    box-sizing: border-box;
    margin: 0;
}

body {
    background: var(--bg);
    color: var(--fg);
    font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 12px;
    overflow-x: hidden;
}

a {
    color: inherit;
}

    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

/* background */
.bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

    .bg .grid {
        position: absolute;
        inset: -40px;
        background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
        background-size: 28px 28px;
        -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
        mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
        animation: drift 14s linear infinite;
    }

    .bg .blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        opacity: .22;
    }

    .bg .b1 {
        width: 380px;
        height: 380px;
        background: var(--accent);
        top: -80px;
        left: -60px;
        animation: float 11s ease-in-out infinite;
    }

    .bg .b2 {
        width: 320px;
        height: 320px;
        background: var(--accent2);
        bottom: -80px;
        right: -40px;
        animation: float 13s ease-in-out infinite reverse;
    }

    .bg .b3 {
        width: 220px;
        height: 220px;
        background: var(--accent);
        top: 45%;
        left: 48%;
        opacity: .12;
        animation: float 9s ease-in-out infinite;
    }

    .bg .shape {
        position: absolute;
        background: var(--accent);
        opacity: .12;
        animation: spin 20s linear infinite;
    }

    .bg .s1 {
        width: 70px;
        height: 70px;
        top: 18%;
        left: 44%;
    }

    .bg .s2 {
        width: 40px;
        height: 40px;
        bottom: 16%;
        left: 8%;
        background: var(--accent2);
        animation-duration: 28s;
        animation-direction: reverse;
    }

    .bg .s3 {
        width: 24px;
        height: 24px;
        top: 70%;
        right: 12%;
        animation-duration: 16s;
    }

    .bg .s4 {
        width: 90px;
        height: 90px;
        top: 8%;
        right: 10%;
        background: var(--accent2);
        opacity: .08;
        animation-duration: 34s;
    }

    .bg .spot {
        position: absolute;
        inset: 0;
        background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
    }

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes float {
    50% {
        transform: translate(40px, 30px) scale(1.15);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg) translateY(-20px);
    }
}

@keyframes drift {
    to {
        background-position: 28px 28px;
    }
}

@keyframes shimmer {
    to {
        background-position: 200% center;
    }
}

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

.rise {
    animation: rise .6s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 80ms);
}

/* layout */
.auth {
    width: 100%;
    max-width: 400px;
}

    .auth.wide {
        max-width: 520px;
    }

.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.home {
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: var(--muted);
    padding: 6px 0;
    transition: color .3s, transform .3s var(--ease);
    display: inline-block;
}

    .home:hover {
        color: var(--accent);
        transform: translateX(-3px);
    }

.top .tag {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}

h1 {
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 10px;
}

.grad {
    background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shimmer 4s linear infinite;
}

.panel {
    background: var(--card);
    padding: 16px;
    transition: box-shadow .4s var(--ease);
}

    .panel:focus-within {
        box-shadow: 0 24px 60px -30px var(--accent);
    }

/* fields */
.field {
    margin-bottom: 10px;
    min-width: 0;
}

.cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 10px;
}

label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 3px;
    transition: color .3s;
}

.field:focus-within label {
    color: var(--accent);
}

input:not([type=hidden]):not([type=checkbox]):not([type=radio]), textarea {
    display: block;
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    border: 0;
    border-radius: 0;
    font: inherit;
    color: var(--fg);
    background-color: var(--field);
    background-image: linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
    transition: background-size .35s var(--ease);
}

textarea {
    min-height: 56px;
    resize: none;
}

    input:focus, textarea:focus {
        background-size: 100% 2px;
        outline: none;
    }

    input::placeholder, textarea::placeholder {
        color: var(--muted);
        opacity: .7;
    }

    input:-webkit-autofill, input:-webkit-autofill:focus, textarea:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 100px var(--field) inset;
        -webkit-text-fill-color: var(--fg);
        caret-color: var(--fg);
    }

    input.invalid, textarea.invalid, input.input-validation-error, textarea.input-validation-error {
        background-image: linear-gradient(var(--accent2), var(--accent2));
        background-size: 100% 2px;
    }

input.code {
    letter-spacing: 8px;
    font-size: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    min-height: 44px;
}

/* password toggle */
.pw {
    position: relative;
}

    .pw input {
        padding-right: 58px !important;
    }

.eye {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color .25s;
}

    .eye:hover {
        color: var(--accent);
    }

/* messages */
.err, .field-validation-error {
    display: block;
    font-size: 12px;
    color: var(--accent2);
    margin-top: 3px;
}

    .err:empty, .field-validation-valid {
        display: none;
    }

    .err:not(:empty) {
        animation: fade .3s var(--ease) both;
    }

.validation-summary-valid {
    display: none;
}

.validation-summary-errors, .info-banner, .banner {
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 13px;
    background: var(--field);
    animation: fade .4s var(--ease) both;
}

.validation-summary-errors, .info-banner {
    color: var(--accent2);
    box-shadow: inset 3px 0 var(--accent2);
}

    .validation-summary-errors ul {
        margin: 0;
        padding-left: 16px;
    }

.banner {
    color: var(--muted);
    box-shadow: inset 3px 0 var(--accent);
}

/* submit button */
.btn {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 11px 20px;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    background: var(--fg);
    color: var(--bg);
    font: inherit;
    font-weight: 600;
    transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
}

    .btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -80%;
        width: 50%;
        height: 100%;
        background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
        transform: skewX(-20deg);
    }

    .btn:hover::after {
        left: 130%;
        transition: left .6s var(--ease);
    }

    .btn:hover {
        transform: translateY(-2px);
        background: var(--accent);
        color: #fff;
        box-shadow: 0 10px 24px -10px var(--accent);
    }

    .btn:active {
        transform: scale(.97);
    }

    .btn:disabled {
        opacity: .7;
        cursor: wait;
        transform: none;
    }

    .btn.loading::before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-right: 8px;
        vertical-align: -2px;
        border: 2px solid currentColor;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spinner .7s linear infinite;
    }

/* footer links */
.switch {
    margin-top: 10px;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}

    .switch a {
        color: var(--fg);
        font-weight: 600;
        text-decoration: none;
        background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat;
        transition: background-size .4s var(--ease), color .3s;
    }

        .switch a:hover {
            background-size: 100% 2px;
            color: var(--accent);
        }

.brand {
    margin-top: 8px;
    font-size: 11px;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 800px) {
    .bg .s1, .bg .s4 {
        display: none;
    }
}

@media (max-width: 480px) {
    .cols {
        grid-template-columns: 1fr;
    }

    input, textarea {
        font-size: 16px;
    }

    .panel {
        padding: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}