/* ==========================================================
   KallzStore — Auth Pages (Register / Login)
   Signature element: live "provisioning terminal" panel,
   echoing the boot-sequence language already used sitewide.
   ========================================================== */

.auth-shell{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

@media (max-width: 900px){
  .auth-shell{ grid-template-columns: 1fr; }
}

/* ---------- Left: terminal panel ---------- */
.auth-terminal{
  position: relative;
  background:
    radial-gradient(600px 400px at 15% 15%, rgba(225,29,46,.14), transparent 60%),
    var(--surface);
  border-right: 1px solid var(--border);
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

@media (max-width: 900px){
  .auth-terminal{ border-right: none; border-bottom: 1px solid var(--border); padding: 32px 24px; }
}

.auth-terminal::before{
  /* faint scanline texture, very subtle */
  content:'';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, transparent 1px, transparent 3px);
  pointer-events: none;
}

.auth-brand{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.05rem;
  position: relative; z-index: 1;
}
.auth-brand .mark{ color: var(--red-glow); }
.auth-brand a{ display:flex; align-items:center; gap:10px; }

.auth-tagline{
  margin-top: 18px;
  max-width: 380px;
  color: var(--text-dim);
  font-size: .95rem;
  position: relative; z-index: 1;
}

.term-window{
  position: relative; z-index: 1;
  margin-top: 36px;
  background: #0d0d10;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.7);
}
.term-bar{
  display:flex; align-items:center; gap:7px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.term-dot{ width:9px; height:9px; border-radius:50%; }
.term-dot.r{ background:#ff5f57; }
.term-dot.y{ background:#febc2e; }
.term-dot.g{ background:#28c840; }
.term-path{
  margin-left: 8px;
  font-family: 'JetBrains Mono', 'Space Mono', monospace;
  font-size: .72rem;
  color: var(--text-dim);
}
.term-body{
  padding: 18px 18px 22px;
  font-family: 'JetBrains Mono', 'Space Mono', monospace;
  font-size: .82rem;
  min-height: 190px;
}
.term-line{
  display:flex; gap:8px;
  opacity: 0;
  transform: translateY(4px);
  animation: term-in .35s ease forwards;
  margin-bottom: 8px;
  line-height: 1.5;
}
.term-line .t-ok{ color: #3ddc84; }
.term-line .t-tag{ color: var(--red-glow); }
.term-line .t-txt{ color: #d6d6db; }
.term-line .t-dim{ color: var(--text-dim); }
@keyframes term-in{ to{ opacity:1; transform: translateY(0); } }

.term-cursor{
  display:inline-block; width:7px; height:14px;
  background: var(--red-glow);
  animation: term-blink 1s step-end infinite;
  vertical-align: -2px;
}
@keyframes term-blink{ 50%{ opacity: 0; } }

.auth-stats{
  position: relative; z-index: 1;
  display:flex; gap:28px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.auth-stats div span{ display:block; }
.auth-stats .n{ font-family: var(--font-display); font-weight:600; font-size:1.15rem; }
.auth-stats .l{ color: var(--text-dim); font-size: .78rem; margin-top:2px; }

/* ---------- Right: form panel ---------- */
.auth-form-side{
  display:flex; align-items:center; justify-content:center;
  padding: 40px 28px;
}
.auth-card{
  width: 100%; max-width: 400px;
}
.auth-card h1{
  font-size: 1.7rem;
  margin-bottom: 6px;
}
.auth-sub{
  color: var(--text-dim);
  font-size: .92rem;
  margin-bottom: 28px;
}

.field{ margin-bottom: 16px; }
.field label{
  display:block; font-size: .82rem; font-weight: 600;
  color: var(--text-dim); margin-bottom: 7px;
}
.field-input{
  position: relative;
  display:flex; align-items:center;
}
.field input{
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .95rem;
  padding: 12px 14px;
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder{ color: #5c5c64; }
.field input:focus{
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(225,29,46,.15);
}
.field-hint{ font-size: .76rem; color: var(--text-dim); margin-top: 6px; }
.field-hint.err{ color: var(--red-glow); }

.pw-toggle{
  position:absolute; right:12px;
  background:none; border:none; color: var(--text-dim);
  font-size: .78rem; font-weight:600;
  padding: 4px;
}
.pw-toggle:hover{ color: var(--text); }

.pw-strength{
  display:flex; gap:4px; margin-top:8px;
}
.pw-strength i{
  flex:1; height:3px; border-radius:2px; background: var(--border);
  transition: background .2s ease;
}
.pw-strength.s1 i:nth-child(1){ background: var(--red); }
.pw-strength.s2 i:nth-child(-n+2){ background: #f2a93b; }
.pw-strength.s3 i:nth-child(-n+3){ background: #3ddc84; }

.field-check{
  display:flex; align-items:flex-start; gap:10px;
  font-size: .82rem; color: var(--text-dim);
  margin: 18px 0 20px;
}
.field-check input{ margin-top: 3px; accent-color: var(--red); }
.field-check a{ color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

.auth-row{
  display:flex; align-items:center; justify-content:space-between;
  margin: 4px 0 22px;
}
.auth-remember{ margin:0; align-items:center; }
.auth-forgot{ font-size: .82rem; color: var(--text-dim); }
.auth-forgot:hover{ color: var(--red-glow); }

.form-msg{
  display:none;
  font-size: .84rem;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.form-msg.show{ display:block; }
.form-msg.err{ background: rgba(225,29,46,.1); border: 1px solid rgba(225,29,46,.35); color:#ff8992; }
.form-msg.ok{ background: rgba(61,220,132,.1); border: 1px solid rgba(61,220,132,.35); color:#8ff0b5; }

.auth-divider{
  display:flex; align-items:center; gap:12px;
  color: var(--text-dim); font-size: .78rem;
  margin: 22px 0;
}
.auth-divider::before, .auth-divider::after{
  content:''; flex:1; height:1px; background: var(--border);
}

.btn-google{
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding: 11px 18px; border-radius: 10px; font-weight: 600; font-size: .92rem;
  transition: border-color .15s ease, background .15s ease;
}
.btn-google:hover{ border-color: #4a4a52; background: #202024; }

.auth-foot{
  text-align:center; margin-top: 26px;
  font-size: .88rem; color: var(--text-dim);
}
.auth-foot a{ color: var(--red-glow); font-weight: 600; }

.btn[disabled]{ opacity:.6; pointer-events:none; }

.btn-spinner{
  width:15px; height:15px; border-radius:50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
  display:none;
}
.btn[data-loading="1"] .btn-spinner{ display:inline-block; }
.btn[data-loading="1"] .btn-label{ opacity:.85; }
@keyframes spin{ to{ transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .term-line{ animation: none; opacity:1; transform:none; }
  .term-cursor{ animation: none; }
  .btn-spinner{ animation: none; }
}