:root {
    --bg: #02080d;
    --surface: rgba(6, 20, 29, .76);
    --surface-strong: rgba(7, 23, 33, .92);
    --border: rgba(159, 214, 205, .16);
    --border-focus: rgba(40, 235, 183, .72);
    --text: #f6fbfa;
    --muted: #738783;
    --accent: #25e6b2;
    --accent-deep: #00b881;
    --danger: #ff8b9d;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; }
button, input { font: inherit; }

.login-page {
    min-height: 100vh;
    overflow: hidden;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 50% 32%, rgba(15, 86, 76, .18), transparent 30%),
        radial-gradient(circle at 15% 73%, rgba(20, 215, 166, .07), transparent 25%),
        radial-gradient(circle at 85% 73%, rgba(20, 215, 166, .07), transparent 25%),
        linear-gradient(180deg, #02080d 0%, #031018 58%, #03110e 100%);
}

.login-stage {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 38px 24px 245px;
}

.login-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -5;
    opacity: .28;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, transparent 0, #000 25%, #000 72%, transparent 100%);
}

.stadium-light {
    position: absolute;
    top: 46%;
    z-index: -3;
    width: 38vw;
    height: 6px;
    opacity: .72;
    filter: blur(.3px);
    background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(239,255,251,.9) 19px 23px, transparent 24px 42px);
    box-shadow: 0 0 16px rgba(226,255,248,.55), 0 0 55px rgba(53,220,178,.2);
}
.stadium-light::after {
    content: "";
    position: absolute;
    inset: -36px -10px;
    background: radial-gradient(ellipse, rgba(229,255,249,.18), transparent 66%);
    filter: blur(13px);
}
.stadium-light-left { left: -10vw; transform: rotate(7deg); }
.stadium-light-right { right: -10vw; transform: rotate(-7deg); }

.login-card {
    width: min(100%, 510px);
    padding: 44px 46px 42px;
    border: 1px solid var(--border);
    border-radius: 27px;
    background: linear-gradient(145deg, rgba(7, 24, 34, .84), rgba(3, 14, 22, .7));
    box-shadow: 0 35px 95px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter: blur(24px);
}

.login-logo {
    display: block;
    width: 142px;
    height: 142px;
    margin: -8px auto 30px;
    filter: drop-shadow(0 0 22px rgba(37, 230, 178, .22));
}

.login-alert {
    margin: 0 0 18px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 139, 157, .34);
    border-radius: 13px;
    color: #ffd4da;
    background: rgba(255, 87, 115, .09);
    font-size: 14px;
}

.login-form { display: grid; gap: 17px; }
.field { position: relative; display: block; }
.field input {
    width: 100%;
    height: 62px;
    padding: 0 58px 0 58px;
    border: 1px solid rgba(160, 201, 196, .16);
    border-radius: 14px;
    outline: none;
    color: var(--text);
    background: rgba(1, 10, 16, .46);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input::placeholder { color: #71827f; }
.field input:focus {
    border-color: var(--border-focus);
    background: rgba(2, 16, 22, .72);
    box-shadow: 0 0 0 4px rgba(37, 230, 178, .09), 0 0 28px rgba(37, 230, 178, .08);
}

.field-icon,
.password-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--accent);
}
.field-icon { left: 18px; pointer-events: none; }
.password-toggle {
    right: 17px;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: transparent;
}
.field svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.password-toggle:hover { color: #7affd9; }
.eye-closed { display: none; }
.password-toggle.is-visible .eye-open { display: none; }
.password-toggle.is-visible .eye-closed { display: block; }

.login-submit {
    height: 62px;
    margin-top: 5px;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    color: #00150e;
    background: linear-gradient(100deg, #31efbd, #08c78c);
    box-shadow: 0 16px 36px rgba(0, 199, 139, .24), inset 0 1px 0 rgba(255,255,255,.35);
    font-weight: 900;
    letter-spacing: .065em;
    text-transform: uppercase;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.login-submit:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 20px 44px rgba(0, 199, 139, .31); }
.login-submit:active { transform: translateY(0); }

.pitch {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    height: 255px;
    overflow: hidden;
    border-top: 1px solid rgba(41, 226, 178, .13);
    background:
        radial-gradient(ellipse at 50% 15%, rgba(36, 237, 183, .14), transparent 45%),
        repeating-linear-gradient(90deg, rgba(11, 61, 45, .86) 0 86px, rgba(8, 48, 36, .86) 86px 172px),
        #082d22;
    transform-origin: bottom;
    box-shadow: inset 0 30px 55px rgba(1,8,11,.62);
}
.pitch::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(2,10,15,.44), transparent 34%, rgba(0,8,6,.34));
    pointer-events: none;
}
.pitch-lines {
    position: absolute;
    left: 50%;
    bottom: -97px;
    width: min(1050px, 92vw);
    height: 335px;
    transform: translateX(-50%) perspective(480px) rotateX(57deg);
    transform-origin: bottom;
    border: 3px solid rgba(202, 255, 239, .48);
    box-shadow: 0 0 18px rgba(34,228,174,.16);
}
.pitch-halfway { position: absolute; left: 0; right: 0; top: 50%; border-top: 3px solid rgba(202,255,239,.48); }
.pitch-circle { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; border: 3px solid rgba(202,255,239,.48); border-radius: 50%; transform: translate(-50%, -50%); }
.pitch-circle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: rgba(202,255,239,.7); transform: translate(-50%,-50%); }
.pitch-box { position: absolute; left: 50%; top: -2px; width: 330px; height: 112px; border: 3px solid rgba(202,255,239,.48); border-top: 0; transform: translateX(-50%); }
.pitch-goal { position: absolute; left: 50%; top: -34px; width: 150px; height: 36px; border: 3px solid rgba(202,255,239,.5); transform: translateX(-50%); }

.ball-track {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 17px;
    height: 95px;
    z-index: 3;
    pointer-events: none;
}
.rolling-ball {
    position: absolute;
    left: -110px;
    bottom: 0;
    width: 78px;
    height: 78px;
    filter: drop-shadow(0 11px 12px rgba(0,0,0,.5)) drop-shadow(0 0 15px rgba(40,235,183,.25));
    animation: ball-roll 8.5s cubic-bezier(.42,0,.58,1) infinite alternate;
}
.ball-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    height: 3px;
    opacity: .55;
    background: linear-gradient(90deg, transparent, rgba(37,230,178,.55) 20%, rgba(37,230,178,.18) 70%, transparent);
    filter: blur(3px);
}

@keyframes ball-roll {
    0% { left: -110px; transform: rotate(0deg) scale(.92); }
    45% { transform: rotate(560deg) scale(1); }
    100% { left: calc(100% + 30px); transform: rotate(1180deg) scale(.94); }
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 620px) {
    .login-stage { padding: 22px 16px 198px; }
    .login-card { padding: 30px 22px 27px; border-radius: 22px; }
    .login-logo { width: 112px; height: 112px; margin-bottom: 21px; }
    .field input, .login-submit { height: 56px; }
    .pitch { height: 205px; }
    .pitch-lines { width: 980px; bottom: -135px; }
    .rolling-ball { width: 64px; height: 64px; }
    .stadium-light { top: 57%; opacity: .42; }
}

@media (prefers-reduced-motion: reduce) {
    .rolling-ball { animation: none; left: calc(50% - 39px); }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}