:root {
        --ink: #0F1216;
        --rust: #E2792A;
        --rust-light: #F2A93B;
        --text: #F5F3EE;
        --text-dim: rgba(245,243,238,.62);
        --line: rgba(245,243,238,.14);
        --field-bg: rgba(245,243,238,.06);
        --field-border: rgba(245,243,238,.22);
        --panel-w: clamp(360px, 34vw, 460px);
    }

    html, body {
        height: 100%;
        margin: 0;
    }

    body {
        font-family: 'Inter',system-ui,sans-serif;
        color: var(--text);
    }

    .login-stage {
        position: relative;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        min-height: 100dvh;
        display: flex;
        overflow: hidden;
        background: var(--ink);
    }

    .login-backdrop {
        position: absolute;
        inset: 0;
        z-index: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0;
        filter: blur(14px) scale(1.04);
        transition: opacity 1.8s ease, filter 1.8s ease;
        will-change: opacity, filter;
    }

        .login-backdrop.active {
            opacity: 1;
            filter: blur(0) scale(1.04);
        }

    .login-tint {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(115deg, rgba(10,13,17,.55) 0%, rgba(10,13,17,.15) 42%, rgba(10,13,17,.05) 58%);
    }

    .login-panel {
        margin-left: auto;
        width: var(--panel-w);
        min-height: 100dvh;
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: clamp(1.75rem,4vw,3rem);
        background: linear-gradient(180deg, rgba(12,15,19,.88), rgba(12,15,19,.94));
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-left: 1px solid var(--line);
        overflow-y: auto;
        box-sizing: border-box;
    }

        .login-panel::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--rust), var(--rust-light));
        }

    .login-brand {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: clamp(1.75rem,4vh,2.75rem);
    }

    .login-mark {
        position: relative;
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
    }

        .login-mark img {
            position: relative;
            width: 34px;
            height: 34px;
            object-fit: contain;
        }

    .login-wordmark {
        font-family: 'Oswald',sans-serif;
        font-weight: 500;
        font-size: 22px;
        letter-spacing: .5px;
        line-height: 1;
    }

        .login-wordmark b {
            font-weight: 600;
            color: var(--rust-light);
        }

        .login-wordmark small {
            display: block;
            margin-top: 4px;
            font-family: 'Inter',sans-serif;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 2px;
            color: var(--text-dim);
            text-transform: uppercase;
        }

    .login-panel h1 {
        font-family: 'Oswald',sans-serif;
        font-weight: 500;
        font-size: 22px;
        margin: 0 0 .3rem;
        letter-spacing: .2px;
    }

    .login-panel .sub {
        font-size: 13.5px;
        color: var(--text-dim);
        margin: 0 0 1.75rem;
    }

    .login-field {
        margin-bottom: 1rem;
    }

        .login-field label {
            display: block;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: .4px;
            text-transform: uppercase;
            color: var(--text-dim);
            margin-bottom: 6px;
        }

        .login-field input[type="text"],
        .login-field input[type="email"],
        .login-field input[type="password"] {
            width: 100%;
            height: 44px;
            padding: 0 14px;
            border-radius: 6px;
            border: 1px solid var(--field-border);
            background: var(--field-bg);
            color: var(--text);
            font-size: 14.5px;
            font-family: 'Inter',sans-serif;
            outline: none;
            box-sizing: border-box;
            transition: border-color .15s ease, background .15s ease;
        }

        .login-field input::placeholder {
            color: rgba(245,243,238,.35);
        }

        .login-field input:focus {
            border-color: var(--rust-light);
            background: rgba(245,243,238,.09);
        }

    .login-row-between {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: .25rem 0 1.5rem;
        font-size: 13px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .login-remember {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--text-dim);
    }

        .login-remember input {
            width: 15px;
            height: 15px;
            accent-color: var(--rust);
        }

        .login-remember label {
            cursor: pointer;
            margin: 0;
        }

    .login-panel a {
        color: var(--rust-light);
        text-decoration: none;
    }

        .login-panel a:hover {
            text-decoration: underline;
        }

    .login-btn {
        width: 100%;
        height: 46px;
        border: none;
        border-radius: 6px;
        background: linear-gradient(135deg,var(--rust-light),var(--rust));
        color: var(--ink);
        font-family: 'Inter',sans-serif;
        font-weight: 600;
        font-size: 14.5px;
        letter-spacing: .3px;
        cursor: pointer;
        transition: filter .15s ease, transform .05s ease;
    }

        .login-btn:hover {
            filter: brightness(1.08);
        }

        .login-btn:active {
            transform: scale(.99);
        }

    .login-error {
        margin-top: 1rem;
        padding: 10px 12px;
        border-radius: 6px;
        border: 1px solid rgba(226,73,73,.4);
        background: rgba(226,73,73,.1);
        color: #F3A9A9;
        font-size: 13px;
    }

    .login-foot {
        margin-top: 1.75rem;
        padding-top: 1.25rem;
        border-top: 1px solid var(--line);
        text-align: center;
        font-size: 13px;
        color: var(--text-dim);
    }

        .login-foot a {
            display: block;
            margin-top: 6px;
        }

    .login-server-note {
        margin-top: 1rem;
        text-align: center;
        font-size: 10.5px;
        color: rgba(245,243,238,.35);
    }

    @media (max-width:760px) {
        :root {
            --panel-w: 100%;
        }

        .login-panel {
            border-left: none;
            background: linear-gradient(180deg, rgba(8,10,13,.80), rgba(8,10,13,.95));
            justify-content: center;
            padding: 2rem 6vw;
        }

        .login-tint {
            background: linear-gradient(180deg, rgba(8,10,13,.35) 0%, rgba(8,10,13,.55) 100%);
        }
    }

    @media (max-height:640px) {
        .login-panel {
            justify-content: flex-start;
            padding-top: 2rem;
            padding-bottom: 2rem;
        }

        .login-brand {
            margin-bottom: 1.25rem;
        }

        .login-panel h1 {
            margin-bottom: .2rem;
        }

        .login-panel .sub {
            margin-bottom: 1.1rem;
        }

        .login-foot {
            margin-top: 1.1rem;
            padding-top: .9rem;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .login-backdrop {
            transition: opacity .3s linear;
            filter: none;
        }
    }