/**
 * Login / register — като system/rg/auth/auth-styles.css (login-page тема).
 */

html:has(body.login-page),
html:has(body.register-page) {
    overflow-x: hidden;
    max-width: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body.login-page,
body.register-page {
    --profile-cream: #faf6f2;
    --profile-plum: #5e3a4d;
    --profile-rose: #9a5c72;
    --profile-dusty-rose: #c08497;
    --profile-lavender: #b8a0b8;
    --profile-gold: #c9a962;
    --profile-panel-bg: rgba(255, 252, 250, 0.88);
    --profile-panel-border: rgba(192, 132, 151, 0.45);

    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    color: var(--profile-plum);
    background-color: var(--profile-cream);
    background-image: var(--profile-bg-url, url("../pd.jpg"));
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.login-page::before,
body.register-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(250, 246, 242, 0.5) 0%,
        rgba(255, 252, 250, 0.38) 45%,
        rgba(250, 246, 242, 0.52) 100%
    );
    pointer-events: none;
    z-index: 0;
}

body.login-page,
body.register-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
    min-height: 100dvh;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-items: safe center;
    justify-content: safe center;
    padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
        max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
}

body.register-page {
    align-items: flex-start;
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

body.login-page .auth-container,
body.register-page .auth-container {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: min(380px, 100%);
    max-width: min(380px, calc(100vw - 1.5rem));
    max-height: calc(100dvh - 1.5rem);
    max-height: calc(100svh - 1.5rem);
    margin: auto;
    padding: clamp(0.9rem, 2.5vw, 1.15rem) clamp(0.95rem, 3vw, 1.2rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--profile-panel-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--profile-panel-border);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(94, 58, 77, 0.18);
    flex-shrink: 0;
}

body.register-page .auth-container {
    width: min(420px, 100%);
    max-width: min(420px, calc(100vw - 1.5rem));
}

body.login-page .auth-container form,
body.register-page .auth-container form {
    min-width: 0;
    max-width: 100%;
}

body.login-page .auth-header,
body.register-page .auth-header {
    text-align: center;
    margin-bottom: 0.85rem;
}

body.login-page .auth-header h1,
body.register-page .auth-header h1 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--profile-plum);
    line-height: 1.25;
}

body.login-page .auth-header p,
body.register-page .auth-header p {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    color: var(--profile-rose);
    line-height: 1.4;
}

body.login-page .form-group,
body.register-page .form-group {
    margin-bottom: 0.7rem;
}

body.register-page .form-group {
    margin-bottom: 0.55rem;
}

body.login-page .form-group label,
body.register-page .form-group label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--profile-rose);
}

body.login-page .form-control,
body.register-page .form-control {
    display: block;
    width: 100%;
    padding: 0.5rem 0.65rem;
    font-size: 0.9rem;
    color: var(--profile-plum);
    border: 1px solid rgba(192, 132, 151, 0.55);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.78);
}

body.login-page .form-control:focus,
body.register-page .form-control:focus {
    outline: none;
    border-color: var(--profile-dusty-rose);
    box-shadow: 0 0 0 2px rgba(192, 132, 151, 0.35);
}

body.login-page .btn,
body.register-page .btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--profile-dusty-rose) 0%, var(--profile-rose) 100%);
    border: 1px solid var(--profile-gold);
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
    transform: none;
}

body.login-page .btn:hover,
body.register-page .btn:hover {
    background: linear-gradient(135deg, #b07688 0%, #8a5268 100%);
    transform: none;
    box-shadow: none;
}

body.login-page .btn-block,
body.register-page .btn-block {
    display: block;
    width: 100%;
}

body.login-page .alert,
body.register-page .alert {
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    margin-bottom: 0.65rem;
    font-size: 0.82rem;
}

body.login-page .alert-success,
body.register-page .alert-success {
    background: rgba(255, 252, 250, 0.92);
    color: #4a6b52;
    border: 1px solid rgba(154, 180, 160, 0.65);
}

body.login-page .alert-error,
body.register-page .alert-error {
    background: rgba(255, 248, 248, 0.92);
    color: #8b3d52;
    border: 1px solid rgba(192, 132, 151, 0.65);
}

body.login-page .login-options {
    margin-top: 0.85rem;
    font-size: 0.82rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.55rem;
}

body.login-page .login-options a {
    color: var(--profile-rose);
    text-decoration: none;
    font-weight: 600;
}

body.login-page .login-options a:hover {
    color: var(--profile-plum);
    text-decoration: underline;
}

body.register-page .text-center {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: var(--profile-plum);
    text-align: center;
}

body.register-page .text-center a {
    color: var(--profile-rose);
    font-weight: 600;
    text-decoration: none;
}

body.register-page .text-center a:hover {
    color: var(--profile-plum);
    text-decoration: underline;
}

body.register-page .mt-3 {
    margin-top: 0.75rem;
}

@media (max-width: 360px) {
    body.login-page .login-options span {
        display: none;
    }
}