/* ============================================================
   ITEZIA — Authentication
   Login · Sign Up
   ============================================================ */

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 6px currentColor; }
  50%       { box-shadow: 0 0 2px currentColor; }
}

/* ──────────────────────── LOGIN PAGE ──────────────────────── */
.login-page {
  min-height: calc(100vh - var(--nav-h, 64px));
  display: flex; align-items: center; justify-content: center;
  padding: var(--s8) var(--s4);
  background:
    radial-gradient(ellipse 55% 45% at 50% 0%, rgba(192,150,60,.05) 0%, transparent 60%),
    var(--void);
}

.login-card {
  width: 100%; max-width: 420px;
  background: var(--card); border: 1px solid rgba(192,150,60,.16);
  border-radius: 12px; padding: var(--s10) var(--s8);
  display: flex; flex-direction: column; gap: var(--s6);
  box-shadow: 0 0 60px rgba(192,150,60,.05);
}

.login-logo      { display: flex; flex-direction: column; align-items: center; gap: var(--s2); text-align: center; }
.login-logo img  { width: 44px; height: 44px; }
.login-logo-name { font-size: var(--fs-xl); font-weight: 700; color: var(--t1); letter-spacing: -.02em; }
.login-logo-sub  { font-size: var(--fs-xs); color: var(--t4); font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

.login-divider { display: flex; align-items: center; gap: var(--s3); font-family: var(--mono); font-size: 9px; color: var(--t4); letter-spacing: .14em; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: rgba(192,150,60,.15); }

.login-form  { display: flex; flex-direction: column; gap: var(--s4); }
.login-field { display: flex; flex-direction: column; gap: var(--s2); }

.login-label { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--t3); letter-spacing: .08em; text-transform: uppercase; }

.login-input-wrap   { position: relative; }
.login-input-wrap i { position: absolute; left: var(--s4); top: 50%; transform: translateY(-50%); color: var(--t4); font-size: 13px; pointer-events: none; }
.login-input-wrap .login-icon-img { position: absolute; left: var(--s4); top: 50%; transform: translateY(-50%); width: 14px; height: 14px; opacity: .4; pointer-events: none; }

.login-input {
  width: 100%; background: var(--surface); border: 1px solid rgba(192,150,60,.14);
  border-radius: 6px; padding: var(--s3) var(--s4) var(--s3) calc(var(--s4) + 20px);
  color: var(--t1); font-size: var(--fs-sm); font-family: var(--mono);
  outline: none; transition: border-color .2s ease, box-shadow .2s ease; box-sizing: border-box;
}
.login-input:focus       { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(192,150,60,.08); }
.login-input::placeholder { color: var(--t4); }

.login-extras    { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); }
.login-remember  { display: flex; align-items: center; gap: var(--s2); color: var(--t3); cursor: pointer; user-select: none; }
.login-remember input[type="checkbox"] { accent-color: var(--brand); width: 13px; height: 13px; }
.login-forgot    { color: var(--brand-l); font-size: var(--fs-xs); text-decoration: none; transition: color .15s; }
.login-forgot:hover { color: var(--t1); }

.btn-login { width: 100%; padding: var(--s3) var(--s4); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em; justify-content: center; }

.login-footer   { text-align: center; font-size: var(--fs-xs); color: var(--t4); }
.login-footer a { color: var(--brand-l); text-decoration: none; transition: color .15s; }
.login-footer a:hover { color: var(--t1); }

.login-status     { display: flex; align-items: center; justify-content: center; gap: var(--s2); font-family: var(--font-mono); font-size: 9px; color: var(--t4); letter-spacing: .07em; }
.login-status     { font-family: var(--mono); }
.login-status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px rgba(34,197,94,.6); animation: pulse-glow 2s ease-in-out infinite; }

/* ──────────────────────── SIGN UP PAGE ────────────────────── */
/* Reuses login-page, login-card, login-form, login-field,
   login-label, login-input-wrap, login-input, login-logo,
   login-divider, login-footer — additions below */

.pwd-strength      { margin-top: var(--s2); display: flex; flex-direction: column; gap: 4px; }
.pwd-strength-bars { display: flex; gap: 4px; }
.pwd-bar           { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.08); transition: background .25s ease; }
.pwd-bar.weak      { background: #EF4444; }
.pwd-bar.fair      { background: #F59E0B; }
.pwd-bar.strong    { background: #10B981; }
.pwd-bar.great     { background: var(--brand-l); }

.pwd-strength-label        { font-family: var(--font-mono); font-size: 9px; color: var(--t4); letter-spacing: .06em; transition: color .25s ease; }
.pwd-strength-label.weak   { color: #EF4444; }
.pwd-strength-label.fair   { color: #F59E0B; }
.pwd-strength-label.strong { color: #10B981; }
.pwd-strength-label.great  { color: var(--brand-l); }

.pwd-match-hint      { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; margin-top: var(--s2); display: none; }
.pwd-match-hint.show { display: block; }
.pwd-match-hint.ok   { color: #10B981; }
.pwd-match-hint.no   { color: #EF4444; }

.signup-terms       { display: flex; align-items: flex-start; gap: var(--s2); font-size: var(--fs-xs); color: var(--t3); cursor: pointer; user-select: none; line-height: 1.5; }
.signup-terms input[type="checkbox"] { accent-color: var(--brand); width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; }
.signup-terms a       { color: var(--brand-l); text-decoration: none; }
.signup-terms a:hover { color: var(--t1); }

/* ──────────────────────── SPLIT AUTH LAYOUT ────────────────── */
.login-split {
  min-height: calc(100vh - var(--nav-h, 64px));
  display: grid;
  grid-template-columns: 1fr 480px;
  align-items: stretch;
}
.login-split-visual {
  position: relative;
  overflow: hidden;
}
.login-split-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.38) saturate(.7);
  display: block;
}
.login-split-visual-over {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, transparent 55%, var(--void) 100%),
    linear-gradient(135deg, rgba(10,10,22,.4) 0%, transparent 50%);
}
.login-split-visual-label {
  position: absolute; bottom: var(--s10); left: var(--s10);
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .15em; color: rgba(255,255,255,.3); text-transform: uppercase;
}
.login-split-visual-brand {
  position: absolute; top: var(--s10); left: var(--s10);
  display: flex; align-items: center; gap: var(--s3);
}
.login-split-visual-brand img { width: 28px; height: 28px; opacity: .6; }
.login-split-visual-brand span {
  font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .08em; color: rgba(255,255,255,.35);
}
.login-split-visual-tagline {
  position: absolute; bottom: var(--s16); left: var(--s10);
  font-size: clamp(var(--fs-xl), 2.5vw, var(--fs-3xl));
  font-weight: 700; letter-spacing: -.03em;
  color: rgba(255,255,255,.12); line-height: 1.2; max-width: 360px;
}
.login-split-panel {
  display: flex; align-items: center; justify-content: center;
  padding: var(--s8); background: var(--void);
  border-left: 1px solid rgba(192,150,60,.08);
}
@media (max-width: 860px) {
  .login-split { grid-template-columns: 1fr; }
  .login-split-visual { display: none; }
  .login-split-panel { padding: var(--s8) var(--s4); min-height: calc(100vh - var(--nav-h,64px)); }
}