/* MERQUAN auth drawer — vanilla, brand-matched (teal on black) */
:root{
  --mq-bg:#050505;
  --mq-panel:#0a0d0d;
  --mq-primary:#00A19B;
  --mq-primary-bright:#27F4D2;
  --mq-border:rgba(255,255,255,0.10);
  --mq-muted:#8a9595;
}
.auth-overlay{
  position:fixed; inset:0; z-index:9998;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(4px);
  opacity:0; transition:opacity .3s ease;
}
.auth-overlay.is-open{ opacity:1; }

.auth-drawer{
  position:fixed; top:0; right:0; z-index:9999;
  height:100vh; width:420px; max-width:92vw;
  background:linear-gradient(180deg,#070a0a 0%,#040606 100%);
  border-left:1px solid var(--mq-border);
  box-shadow:-30px 0 80px rgba(0,0,0,0.6), inset 1px 0 0 rgba(39,244,210,0.08);
  transform:translateX(100%); transition:transform .35s cubic-bezier(.22,.61,.36,1);
  overflow-y:auto; color:#fff;
  font-family:'Inter',system-ui,sans-serif;
}
.auth-drawer.is-open{ transform:translateX(0); }
.auth-drawer__inner{ padding:34px 30px 48px; position:relative; }

.auth-drawer__close{
  position:absolute; top:18px; right:20px;
  background:none; border:none; color:var(--mq-muted);
  font-size:30px; line-height:1; cursor:pointer; transition:color .2s;
}
.auth-drawer__close:hover{ color:var(--mq-primary-bright); }

.auth-drawer__brand{ margin:6px 0 26px; }
.auth-drawer__brand img{ height:30px; width:auto; user-select:none; }

.auth-tabs{ display:flex; gap:6px; margin-bottom:26px; border-bottom:1px solid var(--mq-border); }
.auth-tab{
  flex:1; background:none; border:none; cursor:pointer;
  padding:12px 4px; font-size:13px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--mq-muted);
  border-bottom:2px solid transparent; transition:color .2s,border-color .2s;
}
.auth-tab:hover{ color:#fff; }
.auth-tab.is-active{ color:var(--mq-primary-bright); border-bottom-color:var(--mq-primary); }

.auth-panel{ display:none; flex-direction:column; gap:16px; }
.auth-panel.is-active{ display:flex; }
.auth-panel__title{ font-size:22px; font-weight:700; margin:0 0 4px; }

.auth-field{ display:flex; flex-direction:column; gap:7px; }
.auth-field span{ font-size:12px; color:var(--mq-muted); letter-spacing:.03em; }
.auth-field input{
  background:#0c1010; border:1px solid var(--mq-border); border-radius:8px;
  padding:12px 14px; color:#fff; font-size:14px; outline:none; transition:border-color .2s,box-shadow .2s;
}
.auth-field input:focus{ border-color:var(--mq-primary); box-shadow:0 0 0 3px rgba(0,161,155,0.18); }

.auth-btn{
  border-radius:8px; padding:13px 16px; font-size:14px; font-weight:700;
  cursor:pointer; border:1px solid transparent; transition:background .2s,color .2s,border-color .2s;
}
.auth-btn--primary{
  background:var(--mq-primary); color:#001312;
  box-shadow:0 0 24px rgba(0,161,155,0.35);
}
.auth-btn--primary:hover{ background:var(--mq-primary-bright); }
.auth-btn--ghost{
  background:transparent; color:#fff; border-color:var(--mq-border);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.auth-btn--ghost:hover{ border-color:var(--mq-primary); color:var(--mq-primary-bright); }
.auth-key{ font-size:15px; }

.auth-alt{ font-size:13px; color:var(--mq-muted); text-align:center; margin:4px 0 0; }
.auth-alt a{ color:var(--mq-primary-bright); text-decoration:none; }
.auth-alt a:hover{ text-decoration:underline; }

body.auth-open{ overflow:hidden; }

.auth-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --- AJAX additions --- */
.auth-check{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:rgba(255,255,255,.7); margin:-2px 0 2px;
  cursor:pointer; user-select:none;
}
.auth-check input{ width:16px; height:16px; accent-color:#00A19B; }

.auth-msg{
  margin:2px 0 4px; font-size:13px; line-height:1.4; border-radius:8px;
  padding:9px 12px; border:1px solid transparent;
}
.auth-msg--error{
  color:#ff8d8d; background:rgba(255,77,77,.08); border-color:rgba(255,77,77,.28);
}
.auth-msg--ok{
  color:#5ef2dc; background:rgba(0,161,155,.10); border-color:rgba(39,244,210,.30);
}

.auth-panel.is-busy{ opacity:.75; pointer-events:none; }
.auth-panel.is-busy .auth-btn--primary{ position:relative; }