/* public/assets/css/auth.css - refreshed to match main site palette */
:root{
  --bg: #0a0a0b;
  --bg-deep: #060608;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-strong: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.12);
  --text: #f9fafb;
  --muted: rgba(161, 161, 170, 0.8);
  --accent: #7c3aed;
  --accent-2: #3b82f6;
  --accent-warm: #fb923c;
  --radius: 24px;
  --btnRadius: 12px;
  --inputRadius: 10px;
  --shadow: 0 32px 90px rgba(0, 0, 0, 0.7);
  --ring: 0 0 0 4px rgba(59, 130, 246, 0.22);
}

*{box-sizing:border-box}

html{
  min-height:100%;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  font-family: "Manrope", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 12% -10%, rgba(124, 58, 237, 0.2), transparent 60%),
    radial-gradient(1200px 800px at 90% 0%, rgba(59, 130, 246, 0.2), transparent 60%),
    radial-gradient(900px 700px at 50% 120%, rgba(14, 165, 233, 0.08), transparent 65%),
    var(--bg);
  min-height:100vh;
  min-height:100dvh;
  width:100%;
  max-width:100%;
  overflow:hidden;
  overflow-x:hidden;
  display:flex;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.02), transparent 45%),
    radial-gradient(700px 320px at 18% 35%, rgba(124,58,237,0.12), transparent 70%),
    radial-gradient(900px 500px at 90% 85%, rgba(59,130,246,0.12), transparent 70%);
  pointer-events:none;
  z-index:0;
}

.auth-wrap{
  width:100%;
  max-width:100%;
  min-height:100vh;
  min-height:100dvh;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  overflow-y:auto;
  position:relative;
  z-index:1;
}

@media (max-height: 800px){
  .auth-wrap{ align-items:flex-start; padding-top:36px; padding-bottom:36px; }
}

.auth-frame{
  width:100%;
  max-width:1120px;
  min-width:0;
  min-height:560px;
  height:86vh;
  max-height:700px;
  background: linear-gradient(160deg, rgba(12,14,22,0.96) 0%, rgba(8,10,16,0.98) 60%, rgba(6,7,12,0.98) 100%);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow), 0 0 0 1px rgba(124,58,237,0.12);
  display:grid;
  grid-template-columns: 440px 1fr;
  overflow:hidden;
  position:relative;
  z-index:2;
  animation: frame-in 520ms ease-out both;
}

.auth-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 380px at 8% 18%, rgba(124,58,237,0.18), transparent 55%),
    radial-gradient(700px 380px at 100% 80%, rgba(59,130,246,0.18), transparent 60%);
  pointer-events:none;
}

.auth-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:32px 36px 28px;
  border-right:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(12,16,26,0.92) 0%, rgba(9,12,20,0.7) 100%);
  position:relative;
  overflow-y:auto;
  z-index:2;
  animation: pane-left 620ms ease-out 100ms both;
}

.auth-left::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background: linear-gradient(90deg, rgba(124,58,237,0.35), rgba(59,130,246,0.3), transparent 65%);
  opacity:0.6;
}

::-webkit-scrollbar{ width:8px }
::-webkit-scrollbar-track{ background: transparent }
::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.16);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.28); }

.brand-pill{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color: var(--text);
  margin:2px 0 18px;
  padding:8px 12px;
  line-height:1;
  border-radius: 999px;
  background: rgba(12,16,26,0.85);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow: 0 10px 22px rgba(2,6,23,0.35);
  align-self:flex-start;
}

.brand-pill img{
  width:28px;
  height:28px;
  border-radius:9px;
  flex-shrink:0;
  display:block;
}

.brand-pill span{
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:-0.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1;
}

.auth-title{
  margin:0 0 6px;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size:28px;
  font-weight:700;
  letter-spacing:-0.02em;
  color: #f2f6ff;
}

.auth-subtitle{
  margin:0 0 18px;
  font-size:14px;
  color: var(--muted);
  line-height:1.5;
}

.form-label{
  display:block;
  font-size:12px;
  font-weight:600;
  color: rgba(249,250,251,0.7);
  margin-bottom:6px;
}

.auth-input{
  width:100%;
  background: rgba(8,12,20,0.82);
  border:1px solid rgba(255,255,255,0.14);
  border-radius: var(--inputRadius);
  padding:10px 12px;
  color: var(--text);
  font-size:14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  outline:none;
}

.auth-input::placeholder{ color: rgba(249,250,251,0.45); }

.auth-input:focus{
  border-color: rgba(124,58,237,0.7);
  background: rgba(10,14,22,0.95);
  box-shadow: var(--ring);
}

.btn-auth-primary{
  width:100%;
  padding:10px;
  border:none;
  border-radius: var(--btnRadius);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#0b0b10;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  box-shadow: 0 14px 34px rgba(59,130,246,0.25), 0 10px 18px rgba(124,58,237,0.2);
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.btn-auth-primary:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 18px 40px rgba(59,130,246,0.32), 0 12px 22px rgba(124,58,237,0.26);
}

.btn-oauth{
  width:100%;
  padding:8px 10px;
  background: rgba(10,14,22,0.82);
  border:1px solid rgba(255,255,255,0.16);
  border-radius: var(--btnRadius);
  color: var(--text);
  font-weight:600;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.btn-oauth:hover{
  background: rgba(14,20,32,0.9);
  border-color: rgba(124,58,237,0.35);
  transform: translateY(-1px);
}

.divider{
  display:flex;
  align-items:center;
  margin:14px 0;
  color: rgba(230,237,245,0.24);
  font-size:10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.divider::before,
.divider::after{
  content:"";
  flex:1;
  border-bottom:1px solid rgba(148,163,184,0.2);
}

.divider span{ padding:0 12px; }

.link{
  color: #c4b5fd;
  text-decoration:none;
  font-weight:600;
  font-size:13px;
}

.link:hover{ text-decoration: underline; color: #93c5fd; }

.msg{
  color: #fca5a5;
  font-size:12px;
  margin-top:10px;
  text-align:center;
  min-height:20px;
}

.auth-foot{
  text-align:center;
  margin-top:16px;
  font-size:12px;
  color: var(--muted);
}

/* Register page compact tweaks to avoid scroll and clipped brand */
.auth-register .auth-left{
  justify-content:flex-start;
  padding:24px 32px 20px;
}

.auth-register .brand-pill{
  margin:0 0 12px;
  padding:7px 10px;
}

.auth-register .auth-title{
  font-size:26px;
}

.auth-register .auth-subtitle{
  margin-bottom:14px;
  font-size:13px;
}

.auth-register .btn-oauth{
  padding:7px 10px;
  font-size:12px;
}

.auth-register .divider{
  margin:10px 0;
}

.auth-register #recaptchaWrap{
  height:72px;
}

.auth-register #recaptchaWrap .g-recaptcha{
  transform: scale(0.9);
  transform-origin: 0 0;
}

.auth-register .msg{
  min-height:14px;
  font-size:11px;
  margin-top:8px;
}

.auth-register .auth-foot{
  margin-top:12px;
}

.mini-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.auth-right{
  position:relative;
  background:
    radial-gradient(600px 400px at 20% 20%, rgba(124,58,237,0.18), transparent 65%),
    radial-gradient(700px 500px at 80% 80%, rgba(59,130,246,0.18), transparent 60%),
    #0a0a0b;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  overflow:hidden;
  padding:0 !important;
  animation: pane-right 620ms ease-out 180ms both;
}

.auth-right::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(5,7,11,0.4) 0%, rgba(5,7,11,0.7) 100%);
  pointer-events:none;
  z-index:1;
}

.right-card{
  width:100%;
  height:100%;
  position:relative;
  display:flex;
  flex-direction:column;
  z-index:2;
}

.ai-support{
  flex:1;
  display:flex;
  flex-direction:column;
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  max-height:none !important;
}

.ai-window{
  flex:1;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  border-radius:0;
  background: transparent;
  border:none;
  box-shadow:none;
}

.ai-stack{
  width:100%;
  flex:1;
}

.ai-bubble{ max-width: 88%; }

.right-topbar{ display:none; }

@media (max-width: 900px){
  .auth-frame{
    grid-template-columns: 1fr;
    height:auto;
    max-height:none;
    min-height:0;
  }
  .auth-right{ display:none; }
  .auth-left{ border-right:none; padding:28px 22px; }
  .auth-wrap{ align-items:flex-start; height:auto; overflow-y:visible; }
  body{ overflow-y:auto; overflow-x:hidden; }
}

@media (max-width: 560px){
  body{
    height:auto;
    min-height:100vh;
    min-height:100dvh;
  }

  .auth-wrap{
    min-height:100vh;
    min-height:100dvh;
    padding:12px;
  }

  .auth-frame{
    width:100%;
    min-height:0;
    border-radius:20px;
  }

  .auth-left{
    padding:24px 18px;
    overflow-x:hidden;
  }

  .brand-pill{
    max-width:100%;
  }

  .brand-pill span,
  .auth-title,
  .auth-subtitle,
  .form-text,
  .auth-foot,
  .msg{
    overflow-wrap:anywhere;
  }

  .auth-title{
    font-size:clamp(28px, 10vw, 34px);
    line-height:1.05;
  }

  .auth-subtitle{
    font-size:14px;
    line-height:1.55;
  }

  .auth-input,
  .btn-auth-primary,
  .btn-oauth{
    width:100%;
    min-width:0;
  }

  .mini-row{
    flex-wrap:wrap;
    gap:8px;
  }
}

@media (max-width: 380px){
  .auth-wrap{
    padding:8px;
  }

  .auth-left{
    padding:22px 14px;
  }

  .brand-pill{
    gap:8px;
    padding:7px 10px;
  }
}

@media (max-height: 760px){
  .auth-frame{
    height:94vh;
    max-height:none;
  }
  .auth-left{
    padding:24px 28px 22px;
  }
  .brand-pill{
    margin-bottom:12px;
    padding:7px 10px;
  }
  .auth-title{
    font-size:26px;
  }
  .auth-subtitle{
    margin-bottom:14px;
  }
  .divider{
    margin:12px 0;
  }
  .auth-input{
    padding:8px 10px;
  }
  .btn-auth-primary{
    padding:9px;
  }
  .btn-oauth{
    padding:7px 10px;
  }
}

@keyframes frame-in{
  from{ opacity:0; transform: translateY(10px) scale(0.985); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

@keyframes pane-left{
  from{ opacity:0; transform: translateX(-14px); }
  to{ opacity:1; transform: translateX(0); }
}

@keyframes pane-right{
  from{ opacity:0; transform: translateX(14px); }
  to{ opacity:1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce){
  .auth-frame, .auth-left, .auth-right{ animation: none !important; }
}