/* ═══════════════ ACCOUNT AUTH PAGES ═══════════════ */
.auth-shell{
  display:grid;grid-template-columns:1fr 1fr;
  max-width:1000px;margin:32px auto 56px;
  background:#fff;border:1px solid var(--grey-300,#D7D9DC);
  border-radius:18px;overflow:hidden;
  box-shadow:0 18px 50px rgba(15,23,42,.10)
}

/* ── Left brand panel ── */
.auth-brand{
  background:linear-gradient(155deg,var(--grey-950,#1B1C1F) 0%,#25272C 100%);
  padding:44px 40px;color:#fff;position:relative;overflow:hidden;
  display:flex;flex-direction:column
}
.auth-brand::before{
  content:"";position:absolute;right:-70px;top:-70px;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,40,54,.20),transparent 68%);
  pointer-events:none
}
.auth-brand::after{
  content:"";position:absolute;left:-40px;bottom:-60px;
  width:200px;height:200px;border-radius:50%;
  border:1px solid rgba(255,255,255,.06);pointer-events:none
}
.auth-brand-logo{position:relative;margin-bottom:26px}
.auth-brand-logo img{width:158px;display:block;filter:brightness(0) invert(1)}
.auth-brand h2{
  font-family:var(--font-display,'Poppins'),sans-serif;
  font-size:26px;font-weight:900;line-height:1.2;
  margin-bottom:10px;position:relative;color:#fff
}
.auth-brand h2 span{color:var(--red,#FF2836)}
.auth-brand > p{
  font-size:13.5px;color:rgba(255,255,255,.55);
  line-height:1.65;max-width:34ch;margin-bottom:28px;position:relative
}
.auth-perks{list-style:none;padding:0;margin:0 0 auto;position:relative;display:flex;flex-direction:column;gap:14px}
.auth-perks li{display:flex;align-items:flex-start;gap:11px;font-size:13px;color:rgba(255,255,255,.78);line-height:1.5}
.auth-perks .tick{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:1px;
  background:rgba(255,40,54,.16);border:1px solid rgba(255,40,54,.34);
  display:flex;align-items:center;justify-content:center
}
.auth-perks .tick svg{width:11px;height:11px;stroke:var(--red,#FF2836);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.auth-brand-foot{
  position:relative;margin-top:32px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.10);
  font-family:var(--font-mono,monospace);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.36)
}

/* ── Right form panel ── */
.auth-form{padding:44px 44px 40px;display:flex;flex-direction:column;justify-content:center}
.auth-form h1{
  font-family:var(--font-display,'Poppins'),sans-serif;
  font-size:25px;font-weight:900;color:var(--ink,#1B1C1F);
  margin:0 0 5px;line-height:1.2
}
.auth-form .sub{font-size:13.5px;color:var(--grey-600,#5B5F66);margin-bottom:24px}

.auth-alert{
  display:flex;align-items:flex-start;gap:9px;
  background:#FEF2F2;border:1px solid #FECACA;color:#991B1B;
  padding:11px 14px;border-radius:10px;font-size:13px;
  margin-bottom:18px;line-height:1.5
}
.auth-alert svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2}

.auth-field{margin-bottom:16px}
.auth-field label{
  display:block;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--grey-600,#5B5F66);margin-bottom:6px
}
.auth-input{position:relative;display:flex;align-items:center}
.auth-input .lead{
  position:absolute;left:14px;width:17px;height:17px;
  stroke:var(--grey-600,#5B5F66);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;transition:stroke .18s
}
.auth-input input,
.auth-input textarea{
  width:100%;padding:12px 14px 12px 42px;
  border:1.5px solid var(--grey-300,#D7D9DC);border-radius:10px;
  font-family:var(--font-body,'Poppins'),sans-serif;
  font-size:15px;color:var(--ink,#1B1C1F);background:#fff;
  outline:none;transition:border .18s,box-shadow .18s;margin:0
}
.auth-input textarea{padding-top:12px;resize:vertical;min-height:74px}
.auth-input input:focus,
.auth-input textarea:focus{
  border-color:var(--red,#FF2836);
  box-shadow:0 0 0 3px rgba(255,40,54,.10)
}
.auth-input input:focus ~ .lead,
.auth-input textarea:focus ~ .lead{stroke:var(--red,#FF2836)}
.auth-input input::placeholder,
.auth-input textarea::placeholder{color:#A8ABB1}

.auth-toggle{
  position:absolute;right:6px;
  background:none;border:0;cursor:pointer;padding:9px 11px;
  color:var(--grey-600,#5B5F66);border-radius:8px;
  display:flex;align-items:center;transition:color .18s,background .18s
}
.auth-toggle:hover{color:var(--ink,#1B1C1F);background:var(--grey-100,#F2F2F1)}
.auth-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.auth-toggle .eye-off{display:none}
.auth-toggle.on .eye-on{display:none}
.auth-toggle.on .eye-off{display:block}
.auth-input:has(.auth-toggle) input{padding-right:48px}

.auth-hint{font-size:11.5px;color:var(--grey-600,#5B5F66);margin-top:6px}

.auth-btn{
  width:100%;padding:14px;margin-top:6px;
  background:var(--red,#FF2836);color:#fff;
  border:0;border-radius:10px;cursor:pointer;
  font-family:var(--font-display,'Poppins'),sans-serif;
  font-size:15px;font-weight:800;letter-spacing:.01em;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 5px 16px rgba(255,40,54,.26);
  transition:background .18s,transform .15s,box-shadow .18s
}
.auth-btn:hover{background:var(--red-deep,#D01E2A);transform:translateY(-1px);box-shadow:0 8px 22px rgba(255,40,54,.34)}
.auth-btn:active{transform:translateY(0)}
.auth-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.auth-sep{
  display:flex;align-items:center;gap:14px;
  margin:22px 0 18px;color:var(--grey-600,#5B5F66);font-size:12px
}
.auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:var(--grey-300,#D7D9DC)}

.auth-alt{text-align:center;font-size:14px;color:var(--grey-600,#5B5F66)}
.auth-alt a{color:var(--red,#FF2836);font-weight:700;text-decoration:none}
.auth-alt a:hover{text-decoration:underline}

.auth-guest{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:14px;font-size:13px;color:var(--grey-600,#5B5F66);
  text-decoration:none;padding:11px;border-radius:10px;
  border:1.5px solid var(--grey-300,#D7D9DC);transition:.18s
}
.auth-guest:hover{border-color:var(--grey-600,#5B5F66);color:var(--ink,#1B1C1F)}
.auth-guest svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.auth-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ── Responsive ── */
@media(max-width:900px){
  .auth-shell{grid-template-columns:1fr;margin:18px auto 40px;border-radius:16px}
  .auth-brand{padding:26px 24px 24px}
  .auth-brand::after{display:none}
  .auth-brand-logo{margin-bottom:16px}
  .auth-brand-logo img{width:130px}
  .auth-brand h2{font-size:20px}
  .auth-brand > p{font-size:12.5px;margin-bottom:0;max-width:none}
  .auth-perks{display:none}
  .auth-brand-foot{display:none}
  .auth-form{padding:26px 22px 30px}
  .auth-form h1{font-size:21px}
  .auth-form .sub{font-size:13px;margin-bottom:20px}
  .auth-input input,.auth-input textarea{font-size:16px}
  .auth-row2{grid-template-columns:1fr;gap:0}
}
@media(max-width:400px){
  .auth-brand{padding:22px 18px 20px}
  .auth-form{padding:22px 18px 26px}
  .auth-form h1{font-size:19px}
}

/* Auth pages show the error inside the form — hide the layout's generic banner */
body:has(.auth-shell) > .flash.err{display:none}