/* UMBRA ID auth modal — landing (index.php). Self-contained, blue-themed. */
.modal-overlay{
  position:fixed;inset:0;z-index:5000;
  background:rgba(2,6,16,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;
  overflow-y:auto;padding:20px 12px;
}
.modal-overlay.open{display:flex;}
:root:has(.modal-overlay.open),:root:has(.modal-overlay.open) body{overflow:hidden;}
.modal-box{
  background:#0a1224;border:1px solid var(--border-strong,rgba(120,160,255,.28));
  border-radius:14px;padding:32px;width:380px;max-width:90vw;position:relative;
  max-height:calc(100vh - 40px);overflow-y:auto;
  box-shadow:0 32px 80px rgba(0,0,0,.7),0 0 40px rgba(46,139,255,.08);
}
.modal-close{position:absolute;top:14px;right:14px;background:transparent;border:none;cursor:pointer;color:var(--muted);font-size:18px;line-height:1;transition:color .2s;}
.modal-close:hover{color:var(--text);}
.modal-title{font-family:'Orbitron',sans-serif;font-size:16px;font-weight:900;color:#fff;margin-bottom:4px;letter-spacing:.5px;}
.modal-sub{font-size:12px;color:var(--muted);margin-bottom:22px;}
.modal-tabs{display:flex;gap:4px;margin-bottom:20px;background:rgba(255,255,255,.03);border-radius:6px;padding:3px;}
.modal-tab{flex:1;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;background:transparent;border:none;cursor:pointer;color:var(--muted);padding:7px;border-radius:4px;transition:color .2s,background .2s;}
.modal-tab.active{color:#fff;background:rgba(46,139,255,.16);}
.modal-field{margin-bottom:14px;}
.modal-label{font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:5px;display:block;}
.modal-input{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:6px;padding:10px 12px;font-family:'Inter',sans-serif;font-size:13px;color:var(--text);outline:none;transition:border-color .2s;-webkit-appearance:none;}
.modal-input:focus{border-color:rgba(46,139,255,.5);}
.pass-wrap{position:relative;}
.pass-wrap .modal-input{padding-right:40px;}
.pass-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:transparent;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(46,139,255,.7);transition:color .2s,filter .2s;-webkit-tap-highlight-color:transparent;}
.pass-eye:hover{color:rgba(46,139,255,1);filter:drop-shadow(0 0 6px rgba(46,139,255,.6));}
.pass-eye svg{width:14px;height:14px;display:block;}
.auth-or{display:flex;align-items:center;gap:10px;margin:14px 0;font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);}
.btn-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:6px;padding:10px 12px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent;}
.btn-google:hover{border-color:rgba(46,139,255,.4);background:rgba(46,139,255,.06);box-shadow:0 0 12px rgba(46,139,255,.15);}
.btn-google svg{width:18px;height:18px;flex-shrink:0;}
.modal-submit{width:100%;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#04122e;border:none;border-radius:6px;padding:12px;cursor:pointer;margin-top:4px;transition:filter .15s,transform .15s;}
.modal-submit:hover{filter:brightness(1.08);transform:translateY(-1px);}
.modal-error{font-size:11px;color:#ff6b6b;margin-top:-8px;margin-bottom:8px;display:none;}
.modal-error.show{display:block;}
.reg-codebox ~ .modal-error,.login-codebox ~ .modal-error,.gauth-codebox ~ .modal-error{margin-top:10px;}
/* reCAPTCHA: центрируем (по умолчанию прижималось к левому краю в code-box) и скругляем/обрезаем
   собственную светлую рамку виджета, чтобы она не читалась как чужеродные белые полоски на тёмной модалке. */
.g-recaptcha{display:flex!important;justify-content:center;margin:10px auto!important;}
.g-recaptcha>div{border-radius:8px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.35);}
.pw-reqs{list-style:none;margin:8px 0 2px;padding:0;font-size:11px;line-height:1.75;}
.pw-reqs li{color:#ef4444;display:flex;align-items:center;gap:7px;transition:color .15s ease;}
.pw-reqs li::before{content:"✗";font-weight:800;width:13px;text-align:center;flex-shrink:0;}
.pw-reqs li.ok{color:#4ade80;}
.pw-reqs li.ok::before{content:"✓";}
@media(max-width:600px){
  .modal-box{padding:22px 18px;}
  .g-recaptcha{transform:scale(.94);transform-origin:top left;}
  /* Phones often don't apply backdrop-filter, so a 72%-opaque overlay let the page show
     through and the whole dialog read as "transparent". Use a solid overlay instead. */
  .modal-overlay{background:rgba(2,6,16,.95);-webkit-backdrop-filter:none;backdrop-filter:none;}
}
/* ── Auth: registration step 2 + login-name availability ── */
.modal-hint{font-size:10.5px;color:var(--muted);margin-top:5px;line-height:1.45;}
.profile-hint{font-size:10.5px;color:var(--muted);margin-top:5px;line-height:1.45;}
.profile-input[readonly],.profile-input:disabled{opacity:.6;cursor:not-allowed;}
.login-status{font-size:11px;margin-top:5px;min-height:14px;color:var(--muted);}
.login-status.ok{color:#4ade80;}
.login-status.bad{color:#ef4444;}
.auth-alt{text-align:center;font-size:11.5px;color:var(--muted);margin-top:12px;}
.auth-alt a{color:var(--accent,#5aa9ff);text-decoration:none;font-weight:600;}
.auth-alt a:hover{text-decoration:underline;}
.auth-step2-head{display:flex;flex-direction:column;gap:3px;align-items:center;margin:-2px 0 14px;}
.auth-step2-badge{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#4ade80;
  border:1px solid rgba(74,222,128,.35);background:rgba(74,222,128,.08);border-radius:999px;padding:3px 10px;}
.auth-step2-email{font-size:12px;color:var(--text);word-break:break-all;text-align:center;}
/* ── Auth modal: vertically centered ──
   Owner wants the dialog centered on screen — a top-anchored offset read as "too high / off
   centre" on large displays and, on the tall create-password step, pushed content down into a
   scroll. It now centres via the base .modal-overlay rule; when it's genuinely taller than the
   viewport it scrolls inside its own max-height box (above) instead of pushing a page scrollbar.
   The error/success line already reserves a fixed slot (below), so appearing text doesn't reflow
   the box — which was the original reason for anchoring the top. */
#authModal{align-items:center!important;}

/* ── Custom checkbox (site style) + static message area ──────────────────────
   CHECKBOX: the "remember me" box used a native input with accent-color. Replaced with a
   themed box + animated check, consistent across the whole site.
   MESSAGES: the error/success line used display:none↔block, so when it appeared it PUSHED the
   button, Google and link down (worse in longer languages). Now #authModal .modal-error always
   reserves a fixed centered slot — the text only fades in, nothing below it ever moves. */
.umbra-check{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;font-size:12px;color:#8592ad;line-height:1.35;margin:2px 0 10px;}
.umbra-check input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.umbra-check .umbra-check-box{width:18px;height:18px;flex-shrink:0;border-radius:5px;border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);display:inline-flex;align-items:center;justify-content:center;color:#06111f;transition:background .15s,border-color .15s;}
.umbra-check .umbra-check-box svg{width:12px;height:12px;opacity:0;transform:scale(.5);transition:opacity .15s,transform .15s;}
.umbra-check input:checked + .umbra-check-box{background:#2e8bff;border-color:#2e8bff;}
.umbra-check input:checked + .umbra-check-box svg{opacity:1;transform:scale(1);}
.umbra-check:hover .umbra-check-box{border-color:#2e8bff;}
.umbra-check input:focus-visible + .umbra-check-box{box-shadow:0 0 0 3px rgba(46,139,255,.3);}
#authModal .modal-error,#authModal #s2Err,#authModal #loginErr,#authModal #regErr{
  display:flex!important;align-items:center;justify-content:center;text-align:center;
  min-height:32px;margin:2px 0 6px!important;
}
#authModal .modal-error:not(.show){visibility:hidden;}
/* Faint-white placeholder in the auth inputs (the password hint should read as a subtle ghost) */
#authModal .modal-input::placeholder{color:rgba(255,255,255,.28);opacity:1;}
#authModal .modal-input::-webkit-input-placeholder{color:rgba(255,255,255,.28);}
/* Chrome autofill sometimes paints a saved value with a coloured background — neutralise it */
#authModal .modal-input:-webkit-autofill,#authModal .modal-input:-webkit-autofill:hover,#authModal .modal-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text,#dce3f0);
  transition:background-color 9999s ease-in-out 0s;
}