html, body {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

/* LOGIN POPUP */
.login-overlay {
    position: fixed;
    inset: 0;

    background:
            radial-gradient(circle at 25% 20%, rgba(63, 124, 255, 0.24), transparent 30%),
            radial-gradient(circle at 80% 70%, rgba(49, 199, 95, 0.18), transparent 26%),
            rgba(17, 24, 39, 0.58);
    backdrop-filter: blur(14px);

    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;

    z-index: 2000;
}

.login-overlay.active {
    display: flex;
}

.login-popup {
    position: relative;
    overflow: hidden;

    width: min(408px, calc(100vw - 28px));
    padding: 24px;
    box-sizing: border-box;

    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 253, 0.98)),
            #ffffff;
    border: 1px solid rgba(205, 214, 226, 0.92);
    border-radius: 14px;

    box-shadow:
            0 22px 70px rgba(9, 14, 24, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.92);

    font-family: Inter, Arial, sans-serif;
    color: #141a23;

    animation: popupIn 0.16s ease;
}

.login-popup::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, #3f7cff, #31c75f 52%, #ffb300);
}

@keyframes popupIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-close {
    position: absolute;
    top: 16px;
    right: 16px;

    width: 34px;
    height: 34px;

    border: 1px solid #d3dbe8;
    border-radius: 999px;

    background: #ffffff;
    color: #1e2633;

    font-size: 15px;
    font-weight: 900;

    cursor: pointer;

    transition:
            transform 0.12s ease,
            background 0.12s ease,
            border-color 0.12s ease;
}

.login-close:hover {
    background: #f4f7fb;
    border-color: #9eabbc;
    transform: translateY(-1px);
}

.login-header {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin: 6px 46px 20px 0;
}

.login-logo {
    width: 46px;
    height: 46px;

    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;

    background: #f7f9fc;
    border: 1px solid #c8d0dc;
    border-radius: 6px;
}

.login-header h2 {
    margin: 0;

    color: #141a23;
    font-size: 27px;
    font-weight: 930;
    line-height: 1;
    letter-spacing: 0;
}

.login-header p {
    display: none;
}

.login-form {
    display: grid;
    gap: 13px;
}

.login-popup.register-mode .login-form {
    gap: 11px;
}

.login-form label {
    display: grid;
    gap: 6px;

    color: #2d3748;
    font-size: 12px;
    font-weight: 850;
}

.login-form label::before {
    min-height: 14px;
    line-height: 14px;
}

.login-form label:has(#emailInput)::before {
    content: "E-Mail";
}

.login-form label:has(#usernameInput)::before {
    content: "Benutzername";
}

.login-form label:has(#passwordInput)::before {
    content: "Passwort";
}

.login-form label:has(#confirmPasswordInput)::before {
    content: "Passwort wiederholen";
}

.login-form label:has(#forgotPasswordEmailInput)::before {
    content: "E-Mail";
}

.login-form label:has(#newPasswordInput)::before {
    content: "Neues Passwort";
}

.login-form label:has(#newPasswordConfirmInput)::before {
    content: "Passwort wiederholen";
}

.login-form label:has(#twoFactorCodeInput)::before {
    content: "Sechsstelliger Code";
}

.login-form input {
    width: 100%;
    height: 45px;
    padding: 0 13px;
    box-sizing: border-box;

    border: 1px solid #c7d0df;
    border-radius: 6px;

    background: #f8fafc;
    color: #111827;

    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    font-weight: 720;

    outline: none;

    transition:
            border-color 0.14s ease,
            box-shadow 0.14s ease,
            background 0.14s ease;
}

.login-form input::placeholder {
    color: #9aa6b8;
    font-weight: 650;
}

.login-form input:focus {
    border-color: #3f7cff;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(63, 124, 255, 0.18);
}

.login-form label::after {
    content: "";
    min-height: 0;
    color: #b42318;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
}

.login-form.was-submitted label:has(input.field-error) {
    color: #b42318;
}

.login-form.was-submitted label:has(input.field-error) input {
    border-color: #d92d20;
    background: #fff7f6;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}

.login-form.was-submitted label:has(#emailInput.field-error-missing)::after {
    content: "E-Mail darf nicht leer sein.";
    min-height: 14px;
}

.login-form.was-submitted label:has(#emailInput.field-error-invalid)::after {
    content: "Bitte eine gültige E-Mail-Adresse eingeben.";
    min-height: 14px;
}

.login-form.was-submitted label:has(#usernameInput.field-error-missing)::after {
    content: "Benutzername darf nicht leer sein.";
    min-height: 14px;
}

.login-form.was-submitted label:has(#passwordInput.field-error-missing)::after {
    content: "Passwort darf nicht leer sein.";
    min-height: 14px;
}

.login-form.was-submitted label:has(#passwordInput.field-error-weak)::after {
    content: "Min. 8 Zeichen mit Groß-/Kleinbuchstabe, Zahl und Sonderzeichen.";
    min-height: 14px;
}

.login-form.was-submitted label:has(#passwordInput.field-error-mismatch)::after {
    content: "Dieses Passwort passt nicht zur Wiederholung.";
    min-height: 14px;
}

.login-form.was-submitted label:has(#passwordInput.field-error-login)::after {
    content: "Passwort ist falsch.";
    min-height: 14px;
}

.login-form.was-submitted label:has(#confirmPasswordInput.field-error-missing)::after {
    content: "Bitte Passwort wiederholen.";
    min-height: 14px;
}

.login-form.was-submitted label:has(#confirmPasswordInput.field-error-mismatch)::after {
    content: "Passwörter stimmen nicht überein.";
    min-height: 14px;
}

.login-form.was-submitted label:has(#forgotPasswordEmailInput.field-error-missing)::after {
    content: "E-Mail darf nicht leer sein.";
    min-height: 14px;
}

.login-form.was-submitted label:has(#forgotPasswordEmailInput.field-error-invalid)::after {
    content: "Bitte eine gültige E-Mail-Adresse eingeben.";
    min-height: 14px;
}

.login-form.was-submitted label:has(#newPasswordInput.field-error-missing)::after {
    content: "Neues Passwort darf nicht leer sein.";
    min-height: 14px;
}

.login-form.was-submitted label:has(#newPasswordInput.field-error-weak)::after {
    content: "Min. 8 Zeichen mit Groß-/Kleinbuchstabe, Zahl und Sonderzeichen.";
    min-height: 14px;
}

.login-form.was-submitted label:has(#newPasswordInput.field-error-mismatch)::after {
    content: "Dieses Passwort passt nicht zur Wiederholung.";
    min-height: 14px;
}

.login-form.was-submitted label:has(#newPasswordConfirmInput.field-error-missing)::after {
    content: "Bitte Passwort wiederholen.";
    min-height: 14px;
}

.login-form.was-submitted label:has(#newPasswordConfirmInput.field-error-mismatch)::after {
    content: "Passwörter stimmen nicht überein.";
    min-height: 14px;
}

.login-form.was-submitted label[data-error]::after {
    content: attr(data-error) !important;
    min-height: 14px;
}

#twoFactorCodeInput {
    text-align: center;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.35em;
    font-variant-numeric: tabular-nums;
}

.ban-popup::before {
    background: linear-gradient(90deg, #d92d20, #f04438 55%, #ffb300);
}

.ban-details {
    display: grid;
    gap: 12px;
    margin: 4px 0 18px;
}

.ban-reason {
    display: grid;
    gap: 5px;
    padding: 13px 14px;
    background: #fff4f2;
    border: 1px solid #f4c7c2;
    border-radius: 8px;
}

.ban-reason[hidden] {
    display: none;
}

.ban-reason span {
    color: #8f251e;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ban-reason strong {
    color: #7a211a;
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.ban-details p {
    margin: 0;
    color: #596579;
    font-size: 13px;
    font-weight: 720;
    line-height: 1.45;
}

.ban-popup > .login-submit {
    width: 100%;
    background: #202733;
    box-shadow: 0 12px 24px rgba(32, 39, 51, 0.2);
}

.ban-popup > .login-submit:hover {
    background: #111827;
    box-shadow: 0 16px 30px rgba(32, 39, 51, 0.26);
}

.login-form .register-field {
    display: none;
}

.login-popup.register-mode .register-field {
    display: grid;
}

.login-submit {
    height: 46px;
    margin-top: 4px;

    border: 1px solid #202733;
    border-radius: 6px;

    background: #31c75f;
    color: #ffffff;

    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    font-weight: 930;
    letter-spacing: 0;

    cursor: pointer;

    box-shadow:
            0 12px 24px rgba(49, 199, 95, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.28);

    transition:
            background 0.12s ease,
            transform 0.12s ease,
            box-shadow 0.12s ease;
}

.login-submit:hover {
    background: #28b554;
    transform: translateY(-1px);
    box-shadow:
            0 16px 30px rgba(49, 199, 95, 0.34),
            inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.login-submit:active {
    transform: scale(0.98);
}

.login-submit:disabled {
    cursor: wait;
    opacity: 0.72;
    transform: none;
}

.login-footer {
    margin-top: 10px;

    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    text-align: center;

    color: #596579;
    font-size: 12px;
    font-weight: 760;
}

.login-footer a,
.login-footer button {
    color: #141a23;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 920;
    text-decoration: none;
    cursor: pointer;
}

.login-footer .forgot-password-btn,
.login-footer #forgotPasswordBackBtn,
.login-footer a {
    width: 100%;
    flex: 1 1 100%;
    min-height: 38px;
    padding: 0 10px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #202733;
    border-radius: 6px;
    background: #ffffff;
    color: #202733;

    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
}

.login-footer a:hover,
.login-footer button:hover {
    text-decoration: underline;
}

.login-footer .forgot-password-btn:hover,
.login-footer #forgotPasswordBackBtn:hover,
.login-footer a:hover {
    background: #f5f8fc;
    border-color: #3f7cff;
    text-decoration: none;
}

.password-reset-popup .login-header p {
    display: block;
    grid-column: 2 / -1;
    margin: 2px 0 0;
    color: #667085;
    font-size: 13px;
    font-weight: 720;
    line-height: 1.35;
}

@media (max-width: 430px) {
    .login-popup {
        padding: 22px;
    }

    .login-header {
        grid-template-columns: 42px minmax(0, 1fr);
        margin-right: 40px;
    }

    .login-logo {
        width: 42px;
        height: 42px;
        padding: 7px;
    }

    .login-header h2 {
        font-size: 23px;
    }

    .login-footer {
        display: flex;
    }

    .login-footer button,
    .login-footer a {
        width: 100%;
    }
}

/* ── LOGIN SETTINGS POPUP ── */
.login-settingsPopup {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;

    width: min(282px, calc(100vw - 24px));
    padding: 8px;
    box-sizing: border-box;

    background: var(--panel-bg, rgba(255, 255, 255, 0.94));
    border: 1.5px solid var(--panel-border, #e2ddd6);
    border-radius: 10px;
    color: var(--text-main, #1a1714);
    box-shadow:
            0 14px 38px rgba(0, 0, 0, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(12px);

    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top right;

    transition:
            opacity 0.14s ease,
            transform 0.14s ease,
            visibility 0.14s ease,
            background 0.14s ease,
            border-color 0.14s ease;
    z-index: 1200;
}

.login-settingsPopup.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.login-settingsPopup::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 24px;

    width: 10px;
    height: 10px;

    background: var(--panel-bg, rgba(255, 255, 255, 0.94));
    border-top: 1.5px solid var(--panel-border, #e2ddd6);
    border-left: 1.5px solid var(--panel-border, #e2ddd6);
    transform: rotate(45deg);
}

.settings-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
}

.settings-action {
    width: 100%;
    min-height: 44px;
    padding: 6px 9px;

    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 9px;
    align-items: center;

    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--text-main, #1a1714);
    cursor: pointer;
    text-align: left;

    transition:
            background 0.12s ease,
            border-color 0.12s ease,
            color 0.12s ease,
            transform 0.12s ease;
}

.settings-action:hover {
    background: var(--panel-soft, #f5f2ed);
    border-color: var(--panel-border, #e2ddd6);
}

.settings-action:active {
    transform: scale(0.98);
}

.settings-action:focus-visible {
    outline: 3px solid rgba(63, 124, 255, 0.24);
    outline-offset: 2px;
}

.settings-action-icon {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;
    border: 1px solid var(--panel-border, #e2ddd6);
    border-radius: 7px;
    color: var(--accent, #3f7cff);
}

.settings-action-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.settings-action-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-action-copy strong {
    color: inherit;
    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    font-weight: 850;
}

.settings-action-danger {
    color: #c9333a;
}

.settings-action.is-enabled .settings-action-icon {
    color: #138a3b;
    background: #ecfdf3;
    border-color: #a6e5ba;
}

.settings-action-danger .settings-action-icon {
    color: #c9333a;
    background: #fff1f1;
    border-color: #f1c4c7;
}

/* ── AVATAR PIXEL EDITOR ── */
.avatar-editor-overlay {
    position: fixed;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    background: rgba(26, 23, 20, 0.34);
    backdrop-filter: blur(6px);
    z-index: 2100;
}

.avatar-editor-overlay.active {
    display: flex;
}

.avatar-editor-popup {
    position: relative;
    width: min(336px, calc(100vw - 28px));
    padding: 18px;
    box-sizing: border-box;

    background: var(--panel-bg, rgba(255, 255, 255, 0.96));
    border: 1.5px solid var(--panel-border, #e2ddd6);
    border-radius: 14px;
    color: var(--text-main, #1a1714);
    box-shadow:
            0 18px 48px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);

    animation: popupIn 0.18s ease;
}

.avatar-editor-close {
    position: absolute;
    top: 12px;
    right: 12px;

    width: 30px;
    height: 30px;

    background: #ffffff;
    border: 1.5px solid var(--panel-border, #e2ddd6);
    border-radius: 50%;
    color: var(--text-main, #1a1714);
    cursor: pointer;

    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    font-weight: 900;
}

.avatar-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.avatar-editor-header h2 {
    margin: 0;
    color: var(--text-main, #1a1714);
    font-family: Inter, Arial, sans-serif;
    font-size: 18px;
    font-weight: 900;
}

.avatar-preview {
    width: 52px;
    height: 52px;
    flex-shrink: 0;

    background:
            linear-gradient(45deg, #d9d3ca 25%, transparent 25%),
            linear-gradient(-45deg, #d9d3ca 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, #d9d3ca 75%),
            linear-gradient(-45deg, transparent 75%, #d9d3ca 75%),
            #f8f5ef;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    background-size: 12px 12px;
    border: 1.5px solid var(--panel-border, #e2ddd6);
    border-radius: 8px;
    image-rendering: pixelated;
    margin-right: 10%;
}

.avatar-pixel-grid {
    width: 220px;
    height: 220px;
    margin: 0 auto 14px;

    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);

    background: #ffffff;
    border: 1.5px solid var(--panel-border, #e2ddd6);
    border-radius: 8px;
    overflow: hidden;
    touch-action: none;
}

.avatar-pixel-cell {
    width: 100%;
    height: 100%;
    padding: 0;

    background:
            linear-gradient(45deg, #eee9e1 25%, transparent 25%),
            linear-gradient(-45deg, #eee9e1 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, #eee9e1 75%),
            linear-gradient(-45deg, transparent 75%, #eee9e1 75%),
            #ffffff;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0;
    background-size: 10px 10px;
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(26, 23, 20, 0.08);
    cursor: crosshair;
}

.avatar-pixel-cell:focus-visible {
    outline: 2px solid var(--accent, #3f7cff);
    outline-offset: -2px;
}

.avatar-color-palette {
    display: grid;
    grid-template-columns: repeat(8, 24px);
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
}

.avatar-color {
    width: 24px;
    height: 24px;
    padding: 0;

    border: 1.5px solid rgba(26, 23, 20, 0.16);
    border-radius: 6px;
    cursor: pointer;
}

.avatar-color.active {
    outline: 3px solid rgba(63, 124, 255, 0.34);
    outline-offset: 2px;
}

.avatar-color-clear {
    background:
            linear-gradient(45deg, #eee9e1 25%, transparent 25%),
            linear-gradient(-45deg, #eee9e1 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, #eee9e1 75%),
            linear-gradient(-45deg, transparent 75%, #eee9e1 75%),
            #ffffff;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
    background-size: 8px 8px;
}

.avatar-editor-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 8px;
}

.avatar-editor-btn {
    height: 36px;

    border: 1.5px solid var(--panel-border, #e2ddd6);
    border-radius: 999px;
    cursor: pointer;

    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    font-weight: 850;
}

.avatar-editor-btn-soft {
    background: var(--panel-soft, #f5f2ed);
    color: var(--text-main, #1a1714);
}

.avatar-editor-btn-primary {
    background: linear-gradient(180deg, #42d66b 0%, #2db957 100%);
    border-color: #2db957;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(66, 214, 107, 0.28);
}