@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Cinzel:wght@500;700&display=swap');

html,
body {
    min-height: 100%;
}

body {
    overflow: auto;
    background: #080c10;
    color: #f4ecd8;
    font-family: 'Cinzel', Georgia, serif;
}

body::before {
    inset: 0;
    background:
        linear-gradient(160deg, rgba(8, 12, 16, 0.34), rgba(13, 19, 23, 0.54)),
        radial-gradient(ellipse at 18% 82%, rgba(197, 155, 39, 0.16), transparent 34%),
        radial-gradient(ellipse at 78% 18%, rgba(192, 57, 43, 0.12), transparent 30%),
        url('../theme/img/619752.jpg');
    background-position: center, center, center, center 58%;
    background-size: cover;
    filter: brightness(0.84) saturate(0.9) sepia(0.14);
    transform: none;
}

body::after {
    background:
        radial-gradient(ellipse at 50% 110%, rgba(8, 12, 16, 0.04), rgba(0, 0, 0, 0.42)),
        repeating-linear-gradient(165deg, transparent 0 46px, rgba(229, 185, 72, 0.025) 47px, transparent 49px);
}

.login-bg {
    min-height: 100vh;
    padding: 32px 16px;
}

.login-container {
    width: min(100%, 390px);
    padding: 38px 34px 32px;
    background: rgba(13, 19, 23, 0.65);
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: 14px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.7), inset 0 0 12px rgba(197, 155, 39, 0.15);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.login-container::before {
    inset: -1px;
    border: 1px solid rgba(229, 185, 72, 0.2);
    background: linear-gradient(135deg, rgba(229, 185, 72, 0.16), transparent 34%, transparent 68%, rgba(139, 0, 0, 0.16));
    filter: none;
    animation: none;
}

.login-container::after {
    inset: 1px;
    background: rgba(13, 19, 23, 0.12);
}

.login-container #loginForm {
    width: 100%;
}

.login-avatar {
    width: 96px;
    height: 96px;
    margin-bottom: 28px;
    background: radial-gradient(circle, rgba(229, 185, 72, 0.2), rgba(13, 19, 23, 0.3) 68%);
    border: 1px solid rgba(229, 185, 72, 0.48);
    box-shadow: 0 0 24px rgba(197, 155, 39, 0.2), inset 0 0 16px rgba(229, 185, 72, 0.12);
}

.login-avatar img {
    opacity: 0.9;
    filter: drop-shadow(0 0 8px rgba(229, 185, 72, 0.55)) sepia(0.35);
}

.login-container .input-group {
    box-sizing: border-box;
    margin-bottom: 16px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(224, 215, 198, 0.2);
    border-radius: 9px;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.login-container .input-group:focus-within {
    background: rgba(0, 0, 0, 0.58);
    border-color: #c59b27;
    box-shadow: 0 0 10px rgba(197, 155, 39, 0.5);
}

.login-container .input-group .icon {
    color: #e5b948;
}

.login-container .input-group input {
    color: #f4ecd8;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 14px;
}

.login-container .input-group input::placeholder {
    color: rgba(244, 236, 216, 0.58);
}

.login-container .options {
    color: #f4ecd8;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 12px;
}

.login-container .options label {
    cursor: pointer;
}

.login-container .options input {
    accent-color: #c59b27;
}

.login-container .options .forgot {
    color: #e5b948;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 11px;
    text-decoration: none;
    transition: color 180ms ease, text-shadow 180ms ease;
}

.login-container .options .forgot:hover {
    color: #f7d070;
    text-shadow: 0 0 10px rgba(229, 185, 72, 0.55);
}

.login-container .login-btn {
    padding: 12px 0;
    background: linear-gradient(110deg, #8b0000 0%, #c0392b 45%, #c59b27 100%);
    border: 1px solid rgba(229, 185, 72, 0.8);
    border-radius: 8px;
    box-shadow: inset 0 1px rgba(255, 244, 205, 0.24), 0 5px 16px rgba(0, 0, 0, 0.4);
    color: #fff4d2;
    font-family: 'Cinzel Decorative', Georgia, serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    transition: box-shadow 180ms ease, filter 180ms ease, transform 180ms ease;
}

.login-container .login-btn:hover {
    background: linear-gradient(110deg, #a20d08 0%, #d35400 48%, #e5b948 100%);
    box-shadow: 0 0 20px rgba(229, 185, 72, 0.38), 0 0 28px rgba(192, 57, 43, 0.22);
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.login-container .login-btn:focus-visible,
.login-container .options .forgot:focus-visible {
    outline: 2px solid #e5b948;
    outline-offset: 3px;
}

.login-container .login-error {
    color: #ffb6a8;
    font-family: 'Cinzel', Georgia, serif;
}

@media (max-width: 500px) {
    .login-container {
        max-width: 390px;
        padding: 30px 22px 24px;
    }

    .login-avatar {
        width: 80px;
        height: 80px;
    }

    .login-avatar img {
        width: 58px;
        height: 58px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-container .input-group,
    .login-container .options .forgot,
    .login-container .login-btn {
        transition: none;
    }
}