/* Login "Abyss". Without WebGL (html.ab-static) or JavaScript the page is a calm dark gradient
   with a frosted card; with the scene (html.ab-gl) the shader draws the glass card itself. */
:root {
    color-scheme: dark;
    --ab-teal: #3fe0d0;
    --ab-cyan: #5fd2ff;
    --ab-violet: #9a83ff;
    --ab-text: #eaf6f8;
    --ab-muted: #9bb2ba;
    --ab-error: #ff9d8c;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #01060d; }

.ab-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    color: var(--ab-text);
    background:
        radial-gradient(ellipse 80% 55% at 50% -10%, rgba(63, 160, 208, .25), transparent 70%),
        radial-gradient(ellipse 60% 50% at 50% 115%, rgba(110, 76, 220, .2), transparent 70%),
        linear-gradient(180deg, #062440 0%, #03162a 40%, #01060d 100%);
}

.ab-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: none;
    pointer-events: none;
}
.ab-gl .ab-canvas { display: block; }
.ab-gl .ab-body { background: #01060d; }
.ab-grabbing, .ab-grabbing * { cursor: grabbing !important; user-select: none; }

.ab-brand {
    position: fixed;
    top: 22px;
    left: 24px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: rgba(234, 246, 248, .78);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    pointer-events: none;
}
.ab-brand img { width: 32px; height: 32px; border-radius: 9px; }

.ab-main {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    justify-items: center;
    align-content: start;
    padding: max(12vh, 80px) 16px 34vh;
    pointer-events: none;
}

.ab-card {
    position: relative;
    width: min(390px, 100%);
    padding: 34px 32px 26px;
    border: 1px solid rgba(95, 210, 255, .22);
    border-radius: 26px;
    background: linear-gradient(160deg, rgba(10, 36, 58, .84), rgba(5, 16, 30, .92));
    backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: 0 40px 90px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 255, 255, .06);
    pointer-events: auto;
    transition: transform 1.1s cubic-bezier(.6, 0, .3, 1), opacity 1.1s ease;
}

/* The shader renders the glass, its rim and its shadow from the live scene. */
.ab-gl .ab-card { border-color: transparent; background: transparent; backdrop-filter: none; box-shadow: none; }

.ab-card.ab-shake { animation: ab-shake .5s ease; }
.ab-card.ab-diving { transform: translateY(46px) scale(.9) rotate(-2.5deg); opacity: 0; }

@keyframes ab-shake {
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

.ab-card h1 { margin: 0 0 22px; font-size: 1.9rem; font-weight: 780; letter-spacing: -.035em; }
.ab-card form { display: grid; gap: 17px; }

.ab-error:empty, .ab-error.validation-summary-valid { display: none; }
.ab-error {
    padding: 11px 14px;
    border: 1px solid rgba(255, 157, 140, .35);
    border-radius: 12px;
    color: var(--ab-error);
    background: rgba(110, 24, 18, .3);
    font-size: .85rem;
}
.ab-error ul { margin: 0; padding-left: 18px; }

.ab-field { display: grid; gap: 7px; }
.ab-field label { color: #c4d6dc; font-size: .82rem; font-weight: 650; }

.ab-field input {
    width: 100%;
    min-height: 50px;
    padding: 12px 15px;
    border: 1px solid rgba(155, 178, 186, .28);
    border-radius: 14px;
    color: #fff;
    background: rgba(1, 9, 18, .55);
    font: inherit;
    font-size: 1rem;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ab-field input:hover { border-color: rgba(95, 210, 255, .45); }
.ab-field input:focus {
    outline: none;
    border-color: var(--ab-teal);
    background: rgba(2, 16, 30, .8);
    box-shadow: 0 0 0 4px rgba(63, 224, 208, .16), 0 0 26px rgba(63, 224, 208, .2);
}
.ab-field input.input-validation-error { border-color: var(--ab-error); }

.ab-password { position: relative; display: flex; align-items: center; }
.ab-password input { padding-right: 50px; }
.ab-reveal {
    position: absolute;
    right: 7px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}
.ab-reveal svg { width: 20px; height: 20px; fill: none; stroke: var(--ab-muted); stroke-width: 1.8; }
.ab-reveal:hover svg, .ab-reveal[aria-pressed="true"] svg { stroke: var(--ab-teal); }
.ab-reveal:focus-visible { outline: 2px solid var(--ab-teal); }

.ab-field-error { color: var(--ab-error); font-size: .78rem; }
.ab-field-error:empty { display: none; }
.ab-caps { margin: 0; color: #ffd38a; font-size: .78rem; }

.ab-remember { display: flex; align-items: center; gap: 10px; color: #b5c7cd; font-size: .86rem; cursor: pointer; }
.ab-remember input { width: 18px; height: 18px; accent-color: var(--ab-teal); }

.ab-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    margin-top: 4px;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    color: #01151a;
    background: linear-gradient(110deg, var(--ab-teal), var(--ab-cyan) 55%, #b6a6ff);
    box-shadow: 0 14px 34px rgba(63, 224, 208, .28);
    font: inherit;
    font-size: 1.02rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.ab-submit::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .7s ease;
}
.ab-submit:hover { filter: brightness(1.06); box-shadow: 0 18px 44px rgba(63, 224, 208, .38); }
.ab-submit:hover::after { transform: translateX(120%); }
.ab-submit:active { transform: translateY(1px) scale(.99); }
.ab-submit:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ab-submit:disabled { cursor: progress; }
.ab-submit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.ab-register { margin: 20px 0 0; font-size: .86rem; text-align: center; }
.ab-register a { color: var(--ab-teal); font-weight: 700; text-decoration: none; }
.ab-register a:hover { text-decoration: underline; }
.ab-legal { margin: 14px 0 0; color: #6f9aa3; font-size: .74rem; text-align: center; }
.ab-legal a { color: inherit; text-decoration: none; }
.ab-legal a:hover { color: var(--ab-teal); text-decoration: underline; }

/* Typed e-mail characters float up as glowing bubbles. */
.ab-glyphs { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.ab-glyph {
    position: absolute;
    color: #c9fff7;
    font-size: 1rem;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(63, 224, 208, .9), 0 0 22px rgba(63, 224, 208, .5);
    transform: translate(-50%, -50%);
    animation: ab-glyph 1.5s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes ab-glyph {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
    15% { opacity: 1; transform: translate(-50%, -80%) scale(1.15); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--ab-drift, 0px)), -560%) scale(.7); }
}

@media (max-width: 520px) {
    .ab-brand { top: 16px; left: 16px; }
    .ab-brand span { display: none; }
    .ab-main { padding-top: 76px; padding-bottom: 30vh; }
    .ab-card { padding: 28px 22px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .ab-card, .ab-submit, .ab-submit::after { transition: none; }
    .ab-card.ab-shake { animation: none; }
    .ab-glyph { display: none; }
}

@media (forced-colors: active) {
    .ab-canvas { display: none !important; }
    .ab-gl .ab-card { border: 1px solid CanvasText; }
}