/* ============================================================
   AUTH SCREENS — register / sign in
   Standalone pages: no app nav, no status bar. style.css supplies the
   tokens, fonts and background layers; everything here is the split
   pitch-and-form layout on top of it.
   ============================================================ */
html:has(.page-auth), body.page-auth{ height:auto; }
body.page-auth{
  overflow-y:auto; overflow-x:hidden; display:block; min-height:100%;
  scrollbar-width:thin; scrollbar-color:rgba(255,26,46,.6) rgba(255,255,255,.04);
}
body.page-auth::-webkit-scrollbar{ width:9px; }
body.page-auth::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); }
body.page-auth::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--red),#7a0d16); border-radius:5px;
}

.auth-wrap{
  position:relative; z-index:10; min-height:100vh;
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,520px);
  gap:36px; padding:36px 40px; align-items:center;
  max-width:1340px; margin:0 auto;
}

/* ============================================================
   LEFT — THE PITCH
   ============================================================ */
.auth-brand{ min-width:0; max-width:560px; }

.ab-logo{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; margin-bottom:34px; }
.ab-logo .brand-mark{ width:42px; height:42px; filter:drop-shadow(0 0 12px rgba(255,26,46,.55)); }
.ab-logo b{
  display:block; font-family:var(--head); font-size:17px; font-weight:900;
  letter-spacing:.14em; color:#fff;
}
.ab-logo b span{ color:var(--red); text-shadow:0 0 16px rgba(255,26,46,.8); }
.ab-logo i{ display:block; font-style:normal; font-size:8.5px; letter-spacing:.34em; color:#7f7f89; margin-top:3px; }

.ab-head{
  font-family:var(--head); font-size:clamp(26px,3.4vw,40px); font-weight:900; line-height:1.15;
  color:#fff; letter-spacing:.01em; text-shadow:0 0 40px rgba(255,26,46,.3);
}
.ab-sub{ font-size:14px; line-height:1.6; color:#9a9aa4; margin-top:14px; max-width:52ch; }

.ab-points{ list-style:none; margin-top:28px; display:flex; flex-direction:column; gap:15px; }
.ab-points li{ display:flex; gap:13px; align-items:flex-start; }
.abp-ic{
  flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px; border-radius:10px;
  background:rgba(255,26,46,.1); border:1px solid rgba(255,26,46,.34);
}
.abp-ic svg{ width:19px; height:19px; fill:none; stroke:var(--red); stroke-width:1.7;
             stroke-linecap:round; stroke-linejoin:round; }
.ab-points b{ display:block; font-size:13.5px; color:#fff; font-weight:600; }
.ab-points span{ display:block; font-size:12.5px; color:#8b8b95; margin-top:2px; line-height:1.45; }

.ab-note{
  margin-top:30px; padding:13px 15px; border-radius:11px; font-size:12px; line-height:1.7; color:#8b8b95;
  background:rgba(255,255,255,.03); border-left:2px solid rgba(255,26,46,.55);
}
.ab-note b{ color:#e4e4ec; }

/* ============================================================
   RIGHT — THE FORM
   ============================================================ */
.auth-panel{ min-width:0; }

.auth-card{
  padding:26px 26px 24px; border-radius:15px;
  background:rgba(12,7,9,.86); border:1px solid rgba(255,26,46,.3);
  box-shadow:0 26px 70px rgba(0,0,0,.6), 0 0 46px rgba(255,26,46,.09);
  backdrop-filter:blur(4px);
}
.auth-card[hidden]{ display:none; }

.ac-title{
  font-family:var(--head); font-size:17px; font-weight:900; letter-spacing:.12em; color:#fff;
}
.ac-sub{ font-size:12.5px; color:#8b8b95; margin-top:6px; }
#regForm, #loginForm{ margin-top:20px; display:flex; flex-direction:column; gap:13px; }

.af{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.af > span:first-child{ font-size:11.5px; letter-spacing:.05em; color:#9a9aa4; }
.af > span:first-child i{ color:var(--red); font-style:normal; }
.af-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }

.af input[type=text], .af input[type=email], .af input[type=tel], .af input[type=password]{
  width:100%; padding:11px 13px; border-radius:9px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-soft);
  font-family:var(--body); font-size:13.5px; color:var(--text); outline:none; transition:.16s;
}
.af input:focus{ border-color:rgba(255,26,46,.55); background:rgba(255,26,46,.06); }
/* same rule as the sign-in screen: a filled field keeps the red border */
.af input:not(:placeholder-shown){ border-color:rgba(255,26,46,.55); }
.af input:-webkit-autofill, .af input:autofill{ border-color:rgba(255,26,46,.55); }
.af input::placeholder{ color:#5e5e68; }
.af input.bad{ border-color:#ff5a68; background:rgba(255,90,104,.08); }

.af-err{ font-style:normal; font-size:10.5px; color:#ff8a94; }

/* password */
.af-pw{ position:relative; display:block; }
.af-eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  padding:4px 8px; border-radius:6px; cursor:pointer; transition:.15s;
  background:rgba(255,255,255,.06); border:1px solid var(--line-soft);
  font-family:var(--head); font-size:8.5px; font-weight:700; letter-spacing:.1em; color:#8b8b95;
}
.af-eye:hover{ color:#fff; border-color:rgba(255,26,46,.45); }

.pw-meter{ display:block; height:4px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden; }
.pw-meter i{ display:block; height:100%; width:0; border-radius:3px; transition:width .25s, background .25s; }
.pw-meter i.s1{ width:25%;  background:#ff5a68; }
.pw-meter i.s2{ width:50%;  background:var(--amber); }
.pw-meter i.s3{ width:75%;  background:#b8c31a; }
.pw-meter i.s4{ width:100%; background:var(--green); }
.pw-hint{ font-size:10.5px; color:#6a6a74; }

/* account type */
.type-pick{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.tp{
  position:relative; padding:11px 13px; border-radius:10px; cursor:pointer; transition:.16s;
  background:rgba(255,255,255,.03); border:1px solid var(--line-soft);
}
.tp input{ position:absolute; opacity:0; width:0; height:0; }
.tp b{ display:block; font-size:13px; color:#dcdce4; font-weight:600; }
.tp i{ display:block; font-style:normal; font-size:10.5px; color:#7f7f89; margin-top:2px; }
.tp:hover{ border-color:rgba(255,26,46,.35); }
.tp.on{
  background:rgba(255,26,46,.12); border-color:var(--red);
  box-shadow:0 0 16px rgba(255,26,46,.2) inset;
}
.tp.on b{ color:#fff; }

.code-field[hidden]{ display:none; }
.code-field input{
  font-family:'Cascadia Mono',Consolas,monospace; letter-spacing:.1em; text-transform:uppercase;
}

/* terms */
.af-check{ display:flex; align-items:flex-start; gap:9px; cursor:pointer; margin-top:2px; }
.af-check input{
  flex:0 0 auto; width:15px; height:15px; margin-top:2px; accent-color:var(--red); cursor:pointer;
}
.af-check span{ font-size:11.5px; line-height:1.5; color:#8b8b95; }
.af-check a{ color:var(--red); text-decoration:none; }
.af-check a:hover{ text-decoration:underline; }

.af-msg{ font-size:12.5px; line-height:1.5; }
.af-msg.bad{ color:#ff8a94; }
.af-msg.ok{ color:var(--green); }

.af-submit{
  margin-top:4px; padding:13px; border-radius:10px; cursor:pointer; transition:.16s; width:100%;
  background:linear-gradient(135deg,var(--red-deep),var(--red)); border:none;
  font-family:var(--head); font-size:11.5px; font-weight:700; letter-spacing:.14em; color:#fff;
  box-shadow:0 0 20px rgba(255,26,46,.35);
}
.af-submit:hover:not(:disabled){ box-shadow:0 0 32px rgba(255,26,46,.6); transform:translateY(-1px); }
.af-submit:disabled{ opacity:.6; cursor:default; transform:none; }

.af-alt{ text-align:center; font-size:12px; color:#8b8b95; margin-top:2px; }
.af-alt a{ color:var(--red); text-decoration:none; }
.af-alt a:hover{ text-decoration:underline; }

/* ============================================================
   SUCCESS STATE
   ============================================================ */
.auth-card.done{ text-align:center; }
.ad-ic{
  display:grid; place-items:center; width:56px; height:56px; margin:4px auto 14px; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, rgba(47,208,106,.3), rgba(47,208,106,.07));
  border:1.5px solid rgba(47,208,106,.6); box-shadow:0 0 26px rgba(47,208,106,.3);
}
.ad-ic svg{ width:28px; height:28px; fill:none; stroke:var(--green); stroke-width:1.8;
            stroke-linecap:round; stroke-linejoin:round; }
.auth-card.done h2{ font-family:var(--head); font-size:18px; font-weight:900; letter-spacing:.1em; color:#fff; }
.auth-card.done p{ font-size:12.5px; line-height:1.55; color:#9a9aa4; margin-top:8px; }

.ad-code{
  display:inline-flex; align-items:center; gap:10px; margin-top:16px;
  padding:10px 14px; border-radius:10px;
  background:rgba(255,26,46,.1); border:1px solid rgba(255,26,46,.4);
}
.ad-code span{ font-size:9px; letter-spacing:.18em; color:#9a9aa4; }
.ad-code b{ font-family:var(--head); font-size:17px; letter-spacing:.1em; color:var(--red);
            text-shadow:0 0 16px rgba(255,26,46,.6); }

.ad-rows{ margin-top:16px; text-align:left; }
.ad-rows > div{ display:flex; gap:12px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.ad-rows > div:last-child{ border-bottom:none; }
.ad-rows dt{ flex:0 0 92px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#7f7f89; }
.ad-rows dd{ flex:1; font-size:12.5px; color:#e4e4ec; }

.ad-actions{ display:flex; gap:10px; margin-top:20px; }
.ad-actions .af-submit{ margin-top:0; }
.ad-ghost{
  flex:0 0 auto; padding:13px 16px; border-radius:10px; cursor:pointer; text-decoration:none;
  display:grid; place-items:center; transition:.16s;
  background:transparent; border:1px solid var(--line);
  font-family:var(--body); font-size:12px; color:#8b8b95;
}
.ad-ghost:hover{ color:var(--red); border-color:rgba(255,26,46,.5); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .auth-wrap{ grid-template-columns:1fr; gap:26px; padding:26px 22px 40px; align-items:start; }
  .auth-brand{ max-width:none; }
  .ab-points{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
  .auth-panel{ max-width:520px; }
}
@media (max-width:560px){
  .af-row, .type-pick{ grid-template-columns:1fr; }
  .auth-card{ padding:20px 18px; }
  .ab-note{ margin-top:20px; }
}