body.auth-gated { overflow: hidden; }
body.auth-gated > .app-shell,
body.auth-gated > .toast { visibility: hidden; }

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  min-height: 620px;
  overflow: auto;
  display: grid;
  place-items: safe center;
  box-sizing: border-box;
  padding: 28px 0;
  color: #eee4d1;
  background: #050606;
  font-family: Georgia, 'Times New Roman', serif;
}
.auth-atmosphere {
  position: fixed;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(0,0,0,.18), transparent 30%, transparent 70%, rgba(0,0,0,.18)), url('assets/auth/miniarchivum-login-background-v2.png');
  background-size: cover;
  background-position: center;
  filter: saturate(.94) contrast(1.04);
}
.auth-atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,.04) 0 25%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.auth-panel {
  position: relative;
  z-index: 2;
  width: min(440px, calc(100vw - 38px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.auth-wordmark {
  width: 100%;
  filter: drop-shadow(0 6px 12px #000);
}
.auth-wordmark img {
  display: block;
  width: 100%;
  height: auto;
}
.auth-motto { margin: 3px 0 14px; color: #d6b16d; font-size: 13px; letter-spacing: .4em; text-align: center; }
.auth-divider { width: 100%; display: flex; align-items: center; gap: 13px; color: #d9a94f; }
.auth-divider::before,.auth-divider::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #8d672d); }
.auth-divider::after { background: linear-gradient(90deg, #8d672d, transparent); }
.auth-card {
  position: relative;
  width: 100%;
  margin-top: 14px;
  padding: 28px 32px 27px;
  background: linear-gradient(155deg, rgba(12,14,14,.93), rgba(3,4,4,.88));
  border: 1px solid rgba(190,139,63,.78);
  box-shadow: inset 0 0 0 1px rgba(234,188,104,.12), 0 18px 52px rgba(0,0,0,.72), 0 0 28px rgba(0,0,0,.32);
  backdrop-filter: blur(7px);
}
.auth-card::before,.auth-card::after { content: '◆'; position: absolute; color: #b8863b; font-size: 11px; }
.auth-card::before { top: 6px; left: 8px; }.auth-card::after { right: 8px; bottom: 6px; }
.auth-form { display: grid; gap: 13px; }
.auth-form h1 { margin: 0; color: #f0e7d5; font-size: 23px; font-weight: 500; text-align: center; }
.auth-form > p { margin: -5px 0 6px; color: #a9a59c; font: 14px/1.45 system-ui, sans-serif; text-align: center; }
.auth-field { height: 46px; display: grid; grid-template-columns: 43px 1fr; align-items: center; background: rgba(7,9,9,.82); border: 1px solid #7b684c; transition: border-color .2s, box-shadow .2s; }
.auth-field-password { grid-template-columns: 43px minmax(0, 1fr) 43px; }
.auth-field:focus-within { border-color: #d3a352; box-shadow: 0 0 0 2px rgba(211,163,82,.14); }
.auth-field > span { text-align: center; color: #e0ae52; font-size: 18px; }
.auth-field input { width: 100%; height: 100%; padding: 0 12px 0 0; border: 0; outline: 0; background: transparent; color: #f5efe4; font: 15px system-ui, sans-serif; }
.auth-field input::placeholder { color: #8e8d88; }
.auth-password-toggle { width: 42px; height: 100%; display: grid; place-items: center; padding: 0; border: 0; color: #a9a59c; background: transparent; cursor: pointer; transition: color .15s, background .15s; touch-action: none; }
.auth-password-toggle:hover,.auth-password-toggle:focus-visible,.auth-password-toggle.is-revealing { color: #e0ae52; background: rgba(211,163,82,.08); outline: 0; }
.auth-password-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.auth-primary,.auth-secondary,.auth-link { min-height: 45px; cursor: pointer; font: 600 16px Georgia, serif; transition: filter .2s, transform .12s, opacity .2s; }
.auth-primary { border: 1px solid #f2c46d; color: #211506; background: linear-gradient(#e9be72, #a66e27); box-shadow: inset 0 1px rgba(255,255,255,.45), 0 4px 14px rgba(0,0,0,.35); }
.auth-secondary { border: 1px solid #a87835; color: #e4c27f; background: rgba(13,15,15,.7); }
.auth-link { min-height: auto; padding: 3px; border: 0; color: #d5aa62; background: transparent; font-size: 14px; text-decoration: underline; }
.auth-primary:hover,.auth-secondary:hover { filter: brightness(1.12); }.auth-primary:active,.auth-secondary:active { transform: translateY(1px); }
.auth-primary:disabled,.auth-secondary:disabled { cursor: wait; opacity: .48; }
.auth-separator { display: flex; align-items: center; gap: 8px; color: #d39f47; }.auth-separator span { height: 1px; flex: 1; background: #5b431e; }.auth-separator b { font-size: 11px; }
.auth-feedback { min-height: 19px; margin: 0 !important; color: #d9b46e !important; }.auth-feedback.error { color: #ef8a7f !important; }
.auth-security { margin: 15px 0 0; color: rgba(225,193,132,.65); font: 11px system-ui, sans-serif; letter-spacing: .08em; text-align: center; }
.auth-loader { min-height: 215px; display: grid; place-content: center; justify-items: center; gap: 14px; color: #d3ab63; }
.auth-loader span { width: 35px; height: 35px; border: 2px solid #5e4826; border-top-color: #e0ad53; border-radius: 50%; animation: auth-spin .8s linear infinite; }
.auth-loader p { font: 14px system-ui, sans-serif; }
.auth-recovery-code { padding: 16px 10px; color: #f1d28f; background: #080909; border: 1px dashed #bf8b40; font: 700 20px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .11em; text-align: center; user-select: all; }
.auth-code-confirm { display: flex; align-items: flex-start; gap: 9px; color: #cbc5b9; font: 13px/1.45 system-ui, sans-serif; }.auth-code-confirm input { margin-top: 3px; accent-color: #b87e2e; }
.auth-unavailable { min-height: 230px; place-content: center; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

@media (max-width: 1050px) { .auth-screen { padding-block: 22px; } }
@media (max-width: 600px) {
  .auth-screen { min-height: 100dvh; }
  .auth-atmosphere { background-position: 50% center; }
  .auth-screen { display: block; padding: 18px 0 24px; }
  .auth-panel { margin: 0 auto; }
  .auth-wordmark { width: 94%; }
  .auth-motto { font-size: 11px; letter-spacing: .26em; }
  .auth-card { padding: 22px 18px; }
  .auth-form h1 { font-size: 20px; }
}