.auth-modal .is-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.auth-modal { position: fixed; inset: 0; z-index: 1200; display: none; }
.auth-modal.is-open { display: block; }
.auth-modal-overlay { position: absolute; inset: 0; background: rgba(8, 20, 11, 0.55); }
.auth-modal-dialog { position: relative; margin: 6vh auto 0; max-width: 26rem; width: calc(100% - 2rem); background: var(--theme-color-surface, #fff); color: var(--theme-color-text, #102315); border: 1px solid var(--theme-color-border, #b8cdbb); border-radius: 16px; padding: 1.5rem 1.5rem 1.25rem; box-shadow: 0 24px 60px rgba(8, 20, 11, 0.35); max-height: 88vh; overflow-y: auto; }
.auth-modal-x { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; cursor: pointer; font-size: 1.1rem; color: var(--theme-color-muted, #4d6453); line-height: 1; }
.auth-modal-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.auth-modal-tab { flex: 1; padding: 0.55rem 0.5rem; border: 1px solid var(--theme-color-border, #b8cdbb); background: transparent; color: var(--theme-color-muted, #4d6453); border-radius: 999px; cursor: pointer; font: inherit; }
.auth-modal-tab.is-active { background: var(--theme-color-accent, #00370d); color: var(--theme-color-bg, #f6fbf4); border-color: var(--theme-color-accent, #00370d); }
.auth-modal-form { display: none; flex-direction: column; gap: 0.85rem; }
.auth-modal-form.is-active { display: flex; }
.auth-modal-heading { margin: 0 0 0.25rem; font-size: 1.25rem; }
.auth-modal-alert { background: #fdecec; color: #8a1f1f; border: 1px solid #f1b9b9; border-radius: 10px; padding: 0.6rem 0.75rem; margin-bottom: 0.85rem; font-size: 0.9rem; }
.auth-modal-debug { background: #eef7ec; border: 1px dashed var(--theme-color-border, #b8cdbb); border-radius: 10px; padding: 0.5rem 0.65rem; font-size: 0.85rem; }
.auth-username-hint { font-size: 0.82rem; }
.auth-username-hint.is-ok { color: #1c7a3a; }
.auth-username-hint.is-bad { color: #8a1f1f; }
.auth-linkish { background: none; border: none; padding: 0; color: var(--theme-color-accent, #00370d); cursor: pointer; font: inherit; text-decoration: underline; }
.auth-modal *,
.auth-modal *::before,
.auth-modal *::after {
box-sizing: border-box;
}
html.auth-modal-open {
overflow: hidden;
}
.auth-modal-dialog {
padding-top: 3.25rem;
}
.auth-modal-x {
min-width: 44px;
min-height: 44px;
top: 0.25rem;
right: 0.25rem;
}
.auth-modal .settings-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin: 0;
min-width: 0;
}
.auth-modal .settings-field input:not([type="checkbox"]) {
width: 100%;
min-width: 0;
min-height: 44px;
padding: 0.65rem 0.8rem;
border: 1px solid var(--theme-color-border, #b8cdbb);
border-radius: 0.5rem;
background: var(--theme-color-surface, #fff);
color: inherit;
font: inherit;
}
.auth-modal .settings-field-checkbox {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
.auth-modal .settings-field-checkbox input {
order: -1;
width: 1.1rem;
height: 1.1rem;
}
.auth-modal .settings-field-checkbox small {
flex-basis: 100%;
}
.auth-modal .settings-submit button {
width: 100%;
min-height: 44px;
padding: 0.65rem 1rem;
border: 1px solid var(--theme-color-accent, #00370d);
border-radius: 0.5rem;
background: var(--theme-color-accent, #00370d);
color: var(--theme-color-bg, #f6fbf4);
font: inherit;
cursor: pointer;
}
.auth-modal :is(button, input, a):focus-visible {
outline: 2px solid var(--theme-color-text, #173b25);
outline-offset: 3px;
}