html,
body.tv-login {
    margin: 0;
    min-height: 100%;
    background: #000;
    color: #f6f1e6;
    font-family: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

body.tv-login {
    min-height: 100vh;
}

.tv-stage {
    min-height: 100vh;
    display: flex;
    background: #000;
}

.tv-brand {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
}

.tv-glow {
    position: absolute;
    left: 50%;
    top: 44%;
    width: min(980px, 96%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(226, 188, 104, 0.2) 0%, rgba(150, 108, 42, 0.07) 42%, rgba(0, 0, 0, 0) 72%);
    filter: blur(18px);
    pointer-events: none;
}

.tv-logo {
    position: relative;
    z-index: 1;
    width: min(820px, 86%);
    height: auto;
    display: block;
    user-select: none;
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(ellipse 68% 64% at 50% 44%, #000 40%, transparent 72%);
    mask-image: radial-gradient(ellipse 68% 64% at 50% 44%, #000 40%, transparent 72%);
}

.tv-panel {
    position: relative;
    flex: 0 0 480px;
    width: 480px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px 76px 56px;
    background:
        linear-gradient(180deg, rgba(255, 244, 214, 0.05), rgba(255, 255, 255, 0.015) 28%, rgba(0, 0, 0, 0.28));
    border-left: 1px solid rgba(212, 179, 106, 0.38);
    box-shadow: -40px 0 80px rgba(0, 0, 0, 0.28);
}

.tv-mark {
    width: 42px;
    height: 1px;
    margin-bottom: 26px;
    background: linear-gradient(90deg, #f4e3b4, #8d6828);
}

.tv-kicker {
    margin: 0 0 18px;
    color: #d4b36a;
    font-size: 12px;
    letter-spacing: 0.48em;
    text-indent: 0.48em;
    text-transform: uppercase;
}

.tv-panel h1 {
    margin: 0;
    color: #f7f3ea;
    font-size: 44px;
    font-weight: 400;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    line-height: 1;
}

.tv-lead {
    margin: 16px 0 6px;
    color: #8f897f;
    font-size: 14px;
    letter-spacing: 0.22em;
}

.tv-field {
    margin-top: 28px;
}

.tv-field label,
.tv-captcha-label {
    display: block;
    margin-bottom: 8px;
    color: #b9a57a;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.24em;
}

.tv-login input[type="text"],
.tv-login input[type="password"] {
    display: block;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 2px;
    border: 0;
    border-bottom: 1px solid rgba(212, 179, 106, 0.4);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #f6f1e6;
    font-size: 16px;
    outline: none;
}

.tv-login input::placeholder {
    color: rgba(246, 241, 230, 0.28);
}

.tv-login input[type="text"]:focus,
.tv-login input[type="password"]:focus {
    border-bottom-color: #f0ddaa;
}

.tv-captcha {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-top: 28px;
}

.tv-captcha .tv-field {
    flex: 1;
    margin-top: 0;
}

.tv-captcha img {
    height: 42px;
    margin-bottom: 2px;
    border: 1px solid rgba(212, 179, 106, 0.35);
}

.tv-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    color: #b7b1a6;
    font-size: 13px;
    letter-spacing: 0.08em;
}

.tv-remember input {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    margin: 0;
    border: 1px solid rgba(212, 179, 106, 0.75);
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.tv-remember input:checked::after {
    content: "";
    width: 7px;
    height: 7px;
    background: #e6d09a;
}

.tv-remember label {
    margin: 0;
    cursor: pointer;
    font-weight: 400;
}

.tv-submit {
    width: 100%;
    height: 52px;
    margin-top: 36px;
    border: 0;
    border-radius: 1px;
    background: linear-gradient(180deg, #f3e4b6 0%, #d7b56a 42%, #a07c38 100%);
    box-shadow: 0 14px 32px rgba(160, 118, 42, 0.22);
    color: #1b1408;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    cursor: pointer;
}

.tv-submit:hover {
    filter: brightness(1.06);
}

.tv-submit:active {
    transform: translateY(1px);
}

.tv-foot {
    margin: 64px 0 0;
    color: #6f6a62;
    font-size: 12px;
    letter-spacing: 0.06em;
}

.tv-login label.error {
    display: block;
    margin-top: 6px;
    color: #e0b4b4;
    font-size: 12px;
    letter-spacing: 0;
    position: static;
}

@media screen and (max-width: 980px) {
    .tv-stage {
        flex-direction: column;
    }

    .tv-brand {
        min-height: 42vh;
        padding: 24px 0 0;
    }

    .tv-logo {
        width: min(520px, 92vw);
    }

    .tv-panel {
        flex: none;
        width: 100%;
        padding: 36px 28px 48px;
        border-left: 0;
        border-top: 1px solid rgba(212, 179, 106, 0.38);
        box-shadow: none;
    }

    .tv-panel h1 {
        font-size: 36px;
    }

    .tv-foot {
        margin-top: 40px;
    }
}