/* ============================================================================
   auth.css — sign-in modal (js/auth.js). Fixed chrome outside #app, so real
   glass is allowed. Atlas dark theme, blue accent. UI-only (unwired).
============================================================================ */
#auth-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  padding:24px;pointer-events:none;opacity:0;transition:opacity .3s var(--ease)}
#auth-modal.show{opacity:1;pointer-events:auto}
.auth-scrim{position:absolute;inset:0;background:rgba(6,7,11,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.auth-card{position:relative;width:380px;max-width:100%;max-height:92vh;overflow:auto;
  padding:30px 30px 24px;border-radius:20px;text-align:center;
  background:linear-gradient(180deg,rgba(24,26,34,.9),rgba(11,12,17,.96));
  -webkit-backdrop-filter:blur(26px) saturate(1.3);backdrop-filter:blur(26px) saturate(1.3);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 100px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(14px) scale(.96);transition:transform .42s var(--ease)}
#auth-modal.show .auth-card{transform:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .auth-card{background:linear-gradient(180deg,#181a22,#0b0c11)}}

.auth-x{position:absolute;top:12px;right:14px;width:30px;height:30px;border:0;background:none;
  color:rgba(255,255,255,.5);font-size:22px;line-height:1;cursor:pointer;border-radius:9px;
  transition:color .25s var(--ease),background .25s var(--ease),transform .34s var(--ease)}
.auth-x:hover{color:#fff;background:rgba(255,255,255,.08);transform:rotate(90deg)}

.auth-mark{width:56px;height:56px;margin:0 auto 14px;border-radius:15px;display:grid;place-items:center;
  background:rgba(91,124,250,.12);border:1px solid rgba(91,124,250,.28);overflow:hidden}
.auth-mark img{width:44px;height:44px;border-radius:11px}
.auth-h{font-size:22px;font-weight:500;letter-spacing:-.01em;color:#fff;margin-bottom:6px}
.auth-sub{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.55);margin:0 auto 20px;max-width:30ch}

.auth-form{display:flex;flex-direction:column;gap:11px;text-align:left}
.auth-field{display:flex;flex-direction:column;gap:5px}
.auth-field span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.auth-field input{height:42px;padding:0 13px;border-radius:11px;color:#fff;font-size:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.auth-field input::placeholder{color:rgba(255,255,255,.32)}
.auth-field input:focus{outline:none;border-color:var(--blue);background:rgba(26,47,251,.08)}
.auth-row{display:flex;align-items:center;justify-content:space-between;margin-top:1px}
.auth-check{display:flex;align-items:center;gap:7px;font-size:11.5px;color:rgba(255,255,255,.6);cursor:pointer}
.auth-check input{accent-color:var(--blue);width:14px;height:14px}
.auth-link{font-size:11.5px;color:#8f9aff;cursor:pointer}
.auth-link:hover{color:#b9c1ff;text-decoration:underline}
.auth-go{margin-top:6px;height:44px;border:0;border-radius:11px;cursor:pointer;color:#fff;font-size:14px;font-weight:500;
  background:linear-gradient(180deg,#2a3bff,var(--blue));box-shadow:0 8px 22px rgba(26,47,251,.35);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),filter .22s var(--ease)}
.auth-go:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(26,47,251,.5);filter:brightness(1.06)}
.auth-go:active{transform:translateY(0) scale(.99)}

.auth-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:rgba(255,255,255,.35);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.1)}
.auth-sso{display:flex;flex-direction:column;gap:9px}
.auth-sso-btn{display:flex;align-items:center;justify-content:center;gap:9px;height:42px;border-radius:11px;cursor:pointer;
  color:#eef0f8;font-size:13px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease)}
.auth-sso-btn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);transform:translateY(-1px)}
.auth-g{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;
  background:rgba(255,255,255,.1);font-weight:700;font-size:11px}

.auth-note{margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(120,200,150,.75)}
.auth-note.warn{color:#ffb454;text-transform:none;letter-spacing:.01em;font-size:11px}
.auth-foot{margin-top:9px;font-size:11.5px;color:rgba(255,255,255,.5)}

@media (prefers-reduced-motion:reduce){
  #auth-modal,.auth-card,.auth-x,.auth-go,.auth-sso-btn{transition:none!important}
  .auth-card{transform:none!important}
}