:root{
  --ink:#111111;
  --ink-soft:#3a3a3a;
  --muted:#6b6b6b;
  --line:#e7e7e7;
  --line-strong:#d9d9d9;
  --bg:#ffffff;
  --panel:#f6f6f6;
  --panel-2:#efefef;
  --display:'Space Grotesk', system-ui, sans-serif;
  --ui:'Archivo', system-ui, sans-serif;
  --maxw:1440px;
  --pad:48px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{background:var(--bg);color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:inherit;text-decoration:none;}

/* ========== HEADER ========== */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--line);}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:84px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);}
.brand{display:flex;align-items:center;gap:12px;justify-self:start;}
.mark{width:34px;height:34px;flex:none;display:block;}
.brand .name{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.02em;line-height:1;}
.brand .name span{font-weight:400;color:var(--muted);}
nav.menu{display:flex;gap:36px;justify-self:center;}
nav.menu a{font-family:var(--ui);font-size:15px;font-weight:500;color:var(--ink-soft);padding:4px 0;position:relative;transition:color .18s ease;}
nav.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:center;transition:transform .2s ease;}
nav.menu a:hover{color:var(--ink);}
nav.menu a:hover::after{transform:scaleX(1);}
.tools{display:flex;align-items:center;gap:14px;justify-self:end;}
.icon-btn{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid transparent;border-radius:2px;background:transparent;cursor:pointer;color:var(--ink);transition:background .18s,border-color .18s;}
.icon-btn:hover{background:var(--panel);border-color:var(--line);}
.cart-count{position:absolute;top:4px;right:4px;background:var(--ink);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;}

/* ========== AUTH LAYOUT ========== */
.auth-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  height:calc(100vh - 84px);
}

/* ---- LEFT BRAND PANEL ---- */
.auth-brand{
  background:var(--ink);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:64px 56px;
  position:relative;
  overflow:hidden;
}
.auth-brand::before{
  content:"";
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    135deg,
    rgba(255,255,255,.03) 0 18px,
    transparent 18px 36px
  );
  pointer-events:none;
}
.brand-top{position:relative;z-index:1;}
.brand-logo{display:flex;align-items:center;gap:14px;margin-bottom:56px;}
.brand-logo .lname{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.02em;}
.brand-logo .lname span{font-weight:400;opacity:.55;}
.brand-headline{font-family:var(--display);font-weight:700;font-size:clamp(28px,3vw,42px);line-height:1.1;letter-spacing:-.02em;margin-bottom:20px;}
.brand-sub{font-size:15px;opacity:.6;line-height:1.65;max-width:38ch;}

.brand-mid{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:16px;
}
.trust-item{
  display:flex;align-items:center;gap:14px;
  border:1px solid rgba(255,255,255,.14);
  padding:16px 20px;
  border-radius:2px;
  background:rgba(255,255,255,.04);
  transition:background .2s;
}
.trust-item:hover{background:rgba(255,255,255,.08);}
.trust-item .ti-icon{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  flex:none;
}
.trust-item .ti-text strong{display:block;font-weight:600;font-size:14px;margin-bottom:2px;}
.trust-item .ti-text span{font-size:12.5px;opacity:.5;}

.brand-bottom{
  position:relative;z-index:1;
  font-size:12.5px;opacity:.35;
}

/* ---- RIGHT FORM PANEL ---- */
.auth-form-side{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:64px 48px;
  background:#fff;
}
.auth-form-side.full-page{
  min-height:calc(100vh - 84px);
}
.auth-box{
  width:100%;
  max-width:420px;
}

/* Tabs */
.auth-tabs{
  display:flex;
  border-bottom:1px solid var(--line);
  margin-bottom:36px;
  gap:0;
}
.auth-tab{
  flex:1;
  text-align:center;
  font-family:var(--display);
  font-weight:600;
  font-size:15px;
  letter-spacing:.02em;
  padding:14px 0;
  cursor:pointer;
  color:var(--muted);
  position:relative;
  background:none;
  border:0;
  transition:color .2s;
}
.auth-tab::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:2px;
  background:var(--ink);
  transform:scaleX(0);
  transition:transform .22s ease;
}
.auth-tab.active{color:var(--ink);}
.auth-tab.active::after{transform:scaleX(1);}

/* Form heading */
.form-heading{
  margin-bottom:28px;
}
.form-heading h2{
  font-family:var(--display);
  font-weight:700;
  font-size:26px;
  letter-spacing:-.01em;
  margin-bottom:6px;
}
.form-heading p{
  font-size:14px;
  color:var(--muted);
  line-height:1.55;
}

/* Back link */
.auth-back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--muted);
  margin-bottom:28px;
  transition:color .16s;
  background:none;border:0;cursor:pointer;
  font-family:var(--ui);
}
.auth-back-link:hover{color:var(--ink);}

/* Fields */
.field{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:18px;
}
.field label{
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
  letter-spacing:.02em;
}
.field-wrap{
  position:relative;
}
.field input{
  width:100%;
  border:1px solid var(--line-strong);
  border-radius:2px;
  padding:13px 14px;
  font-family:var(--ui);
  font-size:14.5px;
  color:var(--ink);
  background:#fff;
  outline:0;
  transition:border-color .18s;
}
.field input:focus{border-color:var(--ink);}
.field input::placeholder{color:#b0b0b0;}
.field input.has-icon{padding-right:44px;}
.field input.input-validation-error{border-color:#dc3545;}
.eye-btn{
  position:absolute;
  right:12px;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;
  color:var(--muted);padding:4px;
  display:flex;align-items:center;justify-content:center;
  transition:color .16s;
}
.eye-btn:hover{color:var(--ink);}

/* Row utility */
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

/* Extras row */
.extras-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
  gap:8px;
}
.check-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:var(--ink-soft);
  cursor:pointer;
  user-select:none;
}
.check-label input[type="checkbox"]{
  width:16px;height:16px;
  accent-color:var(--ink);
  cursor:pointer;
}
.forgot-link{
  font-size:13.5px;
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .16s;
}
.forgot-link:hover{color:var(--ink);}

/* Validation */
.validation-summary-errors ul{
  list-style:none;
  font-size:13px;
  color:#dc3545;
  margin-bottom:16px;
  padding:10px 14px;
  background:#fff5f5;
  border:1px solid #fecaca;
  border-radius:2px;
}
.field-validation-error{
  font-size:12px;
  color:#dc3545;
  display:block;
  margin-top:2px;
}

/* Primary CTA */
.btn-primary{
  width:100%;
  background:var(--ink);
  color:#fff;
  border:0;
  border-radius:2px;
  font-family:var(--ui);
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:16px;
  cursor:pointer;
  transition:background .18s,color .18s;
  margin-bottom:20px;
  display:inline-block;
  text-align:center;
}
.btn-primary:hover{background:#2a2a2a;}

/* Divider */
.or-divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
  color:var(--muted);
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.or-divider::before,.or-divider::after{
  content:"";flex:1;
  height:1px;background:var(--line);
}

/* OTP button */
.btn-otp{
  width:100%;
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink);
  border-radius:2px;
  font-family:var(--ui);
  font-weight:600;
  font-size:13.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:14px 16px;
  cursor:pointer;
  transition:background .18s,color .18s;
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-bottom:28px;
}
.btn-otp:hover{background:var(--ink);color:#fff;}

/* Switch link */
.switch-link{
  text-align:center;
  font-size:13.5px;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:20px;
}
.switch-link button{
  background:none;border:0;
  font-family:var(--ui);font-size:13.5px;
  font-weight:600;color:var(--ink);
  cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;
  transition:opacity .16s;
}
.switch-link button:hover{opacity:.6;}

/* Terms */
.terms-note{
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
  margin-bottom:20px;
  text-align:center;
}
.terms-note a{
  color:var(--ink-soft);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Panel visibility – use grid stacking to prevent height shifts */
.auth-box.tabbed{
  display:grid;
}
.auth-panel{
  grid-area:1/1;
}
.auth-panel:not(.active){
  visibility:hidden;
  pointer-events:none;
}

/* ========== CONFIRMATION CARD ========== */
.confirm-icon{
  width:56px;height:56px;
  margin:0 auto 1.25rem;
  background:#E8F5EE;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

/* ========== RESPONSIVE ========== */
@media(max-width:900px){
  :root{--pad:24px;}
  .auth-wrap{grid-template-columns:1fr;height:auto;min-height:calc(100vh - 84px);}
  .auth-brand{display:none;}
  .auth-form-side{padding:48px 24px;min-height:calc(100vh - 84px);}
  .nav{grid-template-columns:auto 1fr;height:64px;}
  nav.menu{display:none;}
}
@media(max-width:480px){
  .field-row{grid-template-columns:1fr;}
  .auth-form-side{padding:36px 20px;}
}