:root{
--maroon:#8e2627;
--maroon-dark:#7e2022;
--green:#24c76a;
--bg:#f2f3f5;
--card:#ffffff;
--text:#111827;
--label:#374151;
--muted:#7b818d;
--placeholder:#aeb3bb;
--border:#e7e8eb;
--line:#e5e7eb;
--navy:#111827;
}

*{box-sizing:border-box}


.page-loader{
  position:fixed;
  inset:0;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.page-loader.show{
  display:flex;
}

.spinner{
  width:50px;
  height:50px;
  border:4px solid #e5e5e5;
  border-top:4px solid #AE275F;
  border-radius:50%;
  animation:spin 1s linear infinite;
}

@keyframes spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}






html,body{
margin:0;
min-height:100%;
font-family:Arial,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--text);
background:var(--bg);
-webkit-tap-highlight-color:transparent;
}

button,input{font:inherit}

.screen{
min-height:100vh;
background:var(--bg);
}

/* ===== UPDATED HEADER ===== */

.topbar{
position:sticky;
top:0;
z-index:10;
background:#ffffff;
border-bottom:1px solid #e5e7eb;
}

.bar-inner{
height:72px;
max-width:448px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:center;
position:relative;
padding:0;
}
.back-btn{
position:absolute;
left:16px;
top:50%;
transform:translateY(-50%);
border:0;
background:#AE275F;
color:#ffffff;
display:flex;
align-items:center;
gap:6px;
padding:10px 16px;
border-radius:999px;
font-size:15px;
font-weight:700;
cursor:pointer;
box-shadow:0 2px 8px rgba(245,130,32,.28);
}

.back-btn svg{
width:17px;
height:17px;
flex:0 0 auto;
color:#ffffff;
}

.back-btn:hover{
opacity:.95;
}

.bar-spacer{
display:none;
}

.header-banner{
height:52px;
max-width:240px;
width:auto;
object-fit:contain;
display:block;
margin:0 auto;
}

/* ===== REST OF CSS UNCHANGED ===== */

.steps-wrap{
max-width:448px;
margin:0 auto;
padding:28px 20px 10px;
}

.steps{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}

.step-block{
display:flex;
align-items:center;
gap:8px;
}

.step{
width:42px;
height:42px;
border-radius:999px;
background:#e6e8ec;
color:#9aa1ac;
display:flex;
align-items:center;
justify-content:center;
font-size:17px;
font-weight:800;
box-shadow:none;
}

.step.active{
background:var(--maroon);
color:white;
box-shadow:0 7px 12px rgba(80,30,30,.18);
}

.step.done{
background:var(--green);
color:white;
font-size:0;
}

.step.done::before{
content:"✓";
font-size:30px;
font-weight:500;
line-height:1;
}

.line{
width:37px;
height:3px;
border-radius:99px;
background:var(--line);
}

.line.active{
background:var(--maroon);
}

.step-text{
text-align:center;
color:#9aa1ac;
font-size:16px;
font-weight:500;
margin:14px 0 0;
}

.card-wrap{
max-width:448px;
margin:0 auto;
padding:8px 20px 32px;
}

.card{
background:var(--card);
border:1px solid var(--border);
border-radius:22px;
padding:34px 28px 28px;
box-shadow:0 2px 7px rgba(15,23,42,.06);
}

.form-card{
min-height:auto;
}

.form-stack{
display:flex;
flex-direction:column;
gap:22px;
}

.hidden{
display:none!important;
}

h1{
margin:0;
font-size:22px;
line-height:1.18;
font-weight:800;
letter-spacing:-.3px;
color:#111827;
}

.subtitle{
margin:12px 0 0;
color:var(--muted);
font-size:16px;
line-height:1.45;
font-weight:400;
}

.field-group{
display:flex;
flex-direction:column;
gap:11px;
}

label{
font-size:18px;
line-height:1.25;
font-weight:500;
color:var(--label);
}

input{
width:100%;
height:58px;
border:1px solid var(--border);
border-radius:16px;
background:#fafbfc;
padding:0 18px;
color:#111827;
font-size:16px;
outline:none;
transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}

input::placeholder{
color:var(--placeholder);
}

input:focus{
border-color:#bb6969;
box-shadow:0 0 0 3px rgba(142,38,39,.1);
background:#fff;
}

.split-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.message{
display:none;
margin:-6px 0 -4px;
font-size:13px;
line-height:1.35;
}

.message.show{
display:block;
}

.message.error{
color:#b42318;
}

.message.success{
color:#137333;
}

.primary-btn,
.secondary-btn{
height:58px;
border-radius:20px;
font-size:18px;
font-weight:700;
cursor:pointer;
transition:opacity .15s ease,transform .15s ease,background .15s ease;
}

.primary-btn{
width:100%;
border:0;
background:var(--maroon);
color:#fff;
}

.primary-btn:hover{
background:var(--maroon-dark);
}

.secondary-btn{
width:100%;
border:1px solid var(--border);
background:#fff;
color:#374151;
}

.primary-btn:active,
.secondary-btn:active{
transform:scale(.985);
}

.primary-btn:disabled,
.secondary-btn:disabled{
opacity:.65;
cursor:not-allowed;
}

.button-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.store-row{
display:flex;
justify-content:center;
}

.store-btn{
display:inline-flex;
align-items:center;
gap:10px;
background:var(--navy);
color:#fff;
text-decoration:none;
border-radius:20px;
padding:14px 26px;
font-size:16px;
font-weight:600;
line-height:1;
white-space:nowrap;
}

.play-icon{
width:21px;
height:21px;
flex:0 0 auto;
fill:currentColor;
}

.done-card{
text-align:center;
padding:42px 28px;
}

.done-icon{
width:58px;
height:58px;
border-radius:999px;
background:var(--green);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 18px;
font-size:34px;
}

.centered{
text-align:center;
}

.otp-input{
text-align:center;
letter-spacing:14px;
font-weight:600;
color:#111827;
}

.otp-input::placeholder{
letter-spacing:14px;
color:#9ca3af;
}

@media(max-width:380px){

.bar-inner,
.steps-wrap,
.card-wrap{
padding-left:16px;
padding-right:16px;
}

.header-banner{
height:46px;
max-width:200px;
}

.back-btn{
left:12px;
padding:8px 13px;
font-size:14px;
}

.back-btn span{
display:none;
}

.card{
padding:30px 24px 24px;
border-radius:22px;
}

h1{font-size:21px}
.subtitle{font-size:15px}
label{font-size:17px}

.store-btn{
padding:14px 21px;
font-size:15px;
}

.primary-btn,
.secondary-btn{
font-size:17px;
}

.split-row,
.button-row{
gap:12px;
}

input{
padding-left:16px;
padding-right:16px;
}
}

@media(min-width:520px){
.topbar{
position:relative;
}

.screen{
padding-bottom:40px;
}
}