/* Stranger AI by L3AN — split pre-auth (Ivory form + Carbon rail)
   Light packs: canvas form + peach rail via --background / --secondary.
   Created: 2026-08-20
   Updated: 2026-08-21 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  overflow-x:hidden;
}
body{
  font-family:var(--l3an-font-body, Inter, Arial, sans-serif);
  background:var(--background, var(--l3an-ivory, #F4F0E8));
  color:var(--foreground, var(--l3an-carbon, #0B1220));
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(var(--zh-accent-rgb, 197,138,69),.3)}

.shell{
  display:grid;
  grid-template-columns:58% 42%;
  width:100%;
  min-height:100%;
  min-height:100dvh;
}
.pane-form{
  min-width:0;
  background:var(--background, var(--l3an-ivory, #F4F0E8));
  overflow-y:auto;
}
.pane-form-inner{
  box-sizing:border-box;
  width:100%;
  max-width:400px;
  min-height:100%;
  margin:0 auto;
  padding:48px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.pane-rail{
  min-width:0;
  width:100%;
  background:var(--secondary, var(--l3an-carbon, #0B1220));
  color:var(--secondary-foreground, var(--l3an-ivory, #F4F0E8));
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  padding:40px 40px 48px;
}
.rail-mark-wrap{
  width:min(260px,100%);
  aspect-ratio:900 / 172;
  overflow:hidden;
  margin-bottom:16px;
}
.rail-mark{
  width:100%;
  height:auto;
  display:block;
}
.logo-wrap{margin-bottom:32px}
.logo-img{width:32px;height:32px;margin:0 0 12px;object-fit:contain;display:block}
.logo-title{
  font-family:var(--l3an-font-heading, Manrope, Arial, sans-serif);
  font-size:28px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--l3an-carbon, #0B1220);
  line-height:1.15;
}
.logo-by{
  font-family:var(--l3an-font-body, Inter, Arial, sans-serif);
  font-size:13px;
  font-weight:400;
  color:var(--l3an-slate, #52606D);
  margin-top:6px;
}
.logo-by[hidden]{display:none!important}
.logo-sub{font-size:14px;color:var(--l3an-slate, #52606D);margin:0 0 24px;line-height:1.45}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:var(--l3an-radius, 4px);
  background:var(--l3an-white, #fff);
  border:1px solid color-mix(in srgb, var(--l3an-slate, #52606D) 35%, transparent);
  margin-bottom:12px;
}
.badge-text{color:var(--l3an-slate, #52606D);font-size:11px;font-weight:600}

.form-group{margin-bottom:16px}
.form-label{
  display:block;
  font-size:13px;
  font-weight:500;
  color:var(--l3an-slate, #52606D);
  margin-bottom:6px;
}
.form-input{
  width:100%;
  padding:10px 14px;
  border-radius:var(--l3an-radius, 4px);
  font-size:14px;
  background:var(--l3an-white, #fff);
  border:1px solid color-mix(in srgb, var(--l3an-slate, #52606D) 35%, transparent);
  color:var(--l3an-carbon, #0B1220);
  outline:none;
  font-family:inherit;
  transition:border-color var(--l3an-motion-micro, 150ms), box-shadow var(--l3an-motion-micro, 150ms);
}
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color:#0B1220 !important;
  background-color:#fff !important;
}
.form-input:focus{
  border-color:var(--l3an-copper, #C58A45);
  box-shadow:0 0 0 3px rgba(197,138,69,.22);
}
.form-input::placeholder{color:var(--l3an-slate, #52606D)}
.form-hint{font-size:12px;color:var(--l3an-slate, #52606D);margin-top:6px;line-height:1.45}
.pass-wrap{position:relative}
.pass-wrap .form-input{padding-right:44px}

.btn-primary{
  width:100%;
  padding:12px 16px;
  border-radius:var(--l3an-radius, 4px);
  font-size:14px;
  font-weight:600;
  font-family:var(--l3an-font-heading, Manrope, Arial, sans-serif);
  background:var(--l3an-copper, #C58A45);
  color:var(--l3an-white, #fff);
  border:none;
  cursor:pointer;
  transition:background var(--l3an-motion-micro, 150ms);
  margin-top:8px;
}
.btn-primary:hover{background:color-mix(in srgb, var(--l3an-copper, #C58A45) 82%, var(--l3an-carbon, #0B1220))}
.btn-primary:disabled{opacity:.4;cursor:default}
.btn-success{
  background:rgba(74,222,128,.15);
  color:#15803d;
  border:1px solid rgba(74,222,128,.35);
}
.btn-success:hover{background:rgba(74,222,128,.25)}

.error-box{
  font-size:13px;
  color:#b91c1c;
  padding:8px 12px;
  border-radius:var(--l3an-radius, 4px);
  background:rgba(248,113,113,.08);
  border:1px solid rgba(248,113,113,.25);
  margin-bottom:12px;
  display:none;
}

.step{display:none}
.step.active{display:block}

.auth-tabs{display:flex;gap:8px;margin-bottom:16px}
.auth-tab{
  flex:1;
  padding:8px;
  border-radius:var(--l3an-radius, 4px);
  font-size:13px;
  font-weight:500;
  border:1px solid color-mix(in srgb, var(--l3an-slate, #52606D) 25%, transparent);
  background:var(--l3an-white, #fff);
  color:var(--l3an-slate, #52606D);
  cursor:pointer;
  font-family:inherit;
}
.auth-tab.active{
  border-color:var(--l3an-copper, #C58A45);
  color:var(--l3an-carbon, #0B1220);
}

.terminal{
  padding:8px;
  border-radius:var(--l3an-radius, 4px);
  background:var(--l3an-carbon, #0B1220);
  border:1px solid color-mix(in srgb, var(--l3an-slate, #52606D) 30%, transparent);
  max-height:80px;
  overflow-y:auto;
  font-family:ui-monospace,monospace;
  font-size:11px;
  color:var(--l3an-ivory, #F4F0E8);
  line-height:1.5;
  margin-bottom:10px;
  display:none;
}

.status-ok{
  padding:10px;
  border-radius:var(--l3an-radius, 4px);
  background:rgba(74,222,128,.08);
  border:1px solid rgba(74,222,128,.25);
  font-size:13px;
  color:#15803d;
  margin-bottom:12px;
  display:none;
}

.msg{margin-top:16px;font-size:13.5px;line-height:1.5;display:none;padding:11px 13px;border-radius:var(--l3an-radius, 4px)}
.msg.erro{display:block;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.35);color:#b91c1c}
.msg.ok{display:block;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.35);color:#15803d}

@keyframes fadeUp{from{opacity:0}to{opacity:1}}
.fade-in{animation:fadeUp 150ms ease both}
@media (prefers-reduced-motion: reduce) {
  .fade-in,.btn-primary{animation:none;transition:none}
}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{
  width:12px;
  height:12px;
  border:2px solid color-mix(in srgb, var(--l3an-slate, #52606D) 20%, transparent);
  border-top-color:var(--l3an-copper, #C58A45);
  border-radius:50%;
  animation:spin .6s linear infinite;
  display:inline-block;
}

.link-muted{
  display:inline-block;
  margin-top:16px;
  font-size:13px;
  color:var(--l3an-slate, #52606D);
  text-decoration:none;
}
.link-muted:hover{color:var(--l3an-carbon, #0B1220)}
.eye-btn{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  background:none;
  border:none;
  color:var(--l3an-slate, #52606D);
  cursor:pointer;
  padding:0;
}
.eye-btn:hover{color:var(--l3an-carbon, #0B1220)}
.eye-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

h1.page-title{
  font-family:var(--l3an-font-heading, Manrope, Arial, sans-serif);
  font-size:20px;
  font-weight:700;
  margin-bottom:6px;
  color:var(--l3an-carbon, #0B1220);
}

@media (max-width: 860px){
  .shell{grid-template-columns:1fr}
  .pane-rail{display:none}
  .pane-form-inner{padding:32px 24px 40px}
  body{background:var(--l3an-ivory, #F4F0E8)}
}