/* ═══════════════════════════════════════════════════════════
   STAFFSWIFT AUTH — SHARED CSS
   Cross-browser safe: Chrome, Firefox, Safari, Edge, iOS/Android
   No CSS Grid (for max compat), Flexbox with -webkit- prefixes
═══════════════════════════════════════════════════════════ */
:root{
  --navy:#0B1340;--navy2:#1A2260;--navy3:#1E2B6E;
  --gold:#B8891A;--gold-d:#9A7015;--gold-l:#C9A96E;
  --gold-bg:#FDF6E7;--gold-b:#F0D080;
  --green:#15803D;--green-bg:#F0FDF4;--green-b:#86EFAC;--green-m:#22C55E;
  --amber:#B45309;--amber-bg:#FFFBEB;--amber-b:#FDE68A;--amber-m:#F59E0B;
  --red:#DC2626;--red-bg:#FEF2F2;--red-b:#FECACA;
  --blue:#1D4ED8;--blue-bg:#EFF6FF;--blue-b:#BFDBFE;
  --purple:#7C3AED;--purple-bg:#F5F3FF;--purple-b:#DDD6FE;
  --white:#FFFFFF;--off:#F7F9FD;--off2:#EEF2FB;
  --border:#DDE3F0;--border2:#C8D0E8;
  --t1:#0B1340;--t2:#4B5675;--t3:#94A3B8;
  --shadow:0 2px 12px rgba(11,19,64,.09);
  --shadow-lg:0 16px 48px rgba(11,19,64,.16);
}
*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
body{font-family:'DM Sans',Arial,Helvetica,sans-serif;color:var(--t1);min-height:100%;min-height:100vh;overflow-x:hidden;font-size:15px;line-height:1.55;background:#f4f6fb}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto;border:0}
button,input,select,textarea{font-family:inherit;font-size:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}
input[type=checkbox],input[type=radio]{-webkit-appearance:checkbox;-moz-appearance:checkbox;appearance:checkbox}
input[type=radio]{-webkit-appearance:radio;-moz-appearance:radio;appearance:radio}

/* ─── ANIMATIONS ─── */
@-webkit-keyframes fadeUp{from{opacity:0;-webkit-transform:translateY(18px);transform:translateY(18px)}to{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@-webkit-keyframes slideInR{from{opacity:0;-webkit-transform:translateX(28px);transform:translateX(28px)}to{opacity:1;-webkit-transform:none;transform:none}}
@keyframes slideInR{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@-webkit-keyframes checkPop{0%{-webkit-transform:scale(0) rotate(-10deg);transform:scale(0) rotate(-10deg)}70%{-webkit-transform:scale(1.18) rotate(3deg);transform:scale(1.18) rotate(3deg)}100%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}
@keyframes checkPop{0%{transform:scale(0) rotate(-10deg)}70%{transform:scale(1.18) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
@-webkit-keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@-webkit-keyframes pulseGold{0%,100%{-webkit-box-shadow:0 0 0 0 rgba(184,137,26,.35);box-shadow:0 0 0 0 rgba(184,137,26,.35)}70%{-webkit-box-shadow:0 0 0 10px rgba(184,137,26,0);box-shadow:0 0 0 10px rgba(184,137,26,0)}}
@keyframes pulseGold{0%,100%{box-shadow:0 0 0 0 rgba(184,137,26,.35)}70%{box-shadow:0 0 0 10px rgba(184,137,26,0)}}
@-webkit-keyframes gradShift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes gradShift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-transform:translateX(-6px);transform:translateX(-6px)}60%{-webkit-transform:translateX(6px);transform:translateX(6px)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}60%{transform:translateX(6px)}}

/* ─── LAYOUT ─── */
.auth-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100vh}

/* LEFT PANEL */
.auth-left{
  width:420px;
  min-width:340px;
  background:linear-gradient(160deg,#0B1340 0%,#1A2260 55%,#0e1a50 100%);
  background-size:200% 200%;
  -webkit-animation:gradShift 14s ease infinite;
  animation:gradShift 14s ease infinite;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  padding:2rem 2.25rem 2rem;
  position:relative;
  overflow:hidden;
  -webkit-box-flex:0;
  -ms-flex-negative:0;
  flex-shrink:0;
}
.al-glow{position:absolute;border-radius:50%;pointer-events:none}
.al-glow1{top:-80px;right:-60px;width:320px;height:320px;background:radial-gradient(circle,rgba(201,169,110,.18),transparent 68%)}
.al-glow2{bottom:-60px;left:-50px;width:260px;height:260px;background:radial-gradient(circle,rgba(29,78,216,.18),transparent 68%)}
.al-glow3{top:40%;left:30%;width:200px;height:200px;background:radial-gradient(circle,rgba(255,255,255,.04),transparent 70%)}
.al-logo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:2.5rem;position:relative;z-index:1}
.al-logo img{height:28px;width:auto}
.al-body{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;z-index:1}
.al-tag{display:inline-block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:.35rem .875rem;font-size:.72rem;font-weight:700;color:rgba(255,255,255,.75);letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.25rem;-webkit-animation:fadeIn .6s ease .2s both;animation:fadeIn .6s ease .2s both}
.al-h1{font-family:'Fraunces',Georgia,serif;font-size:1.95rem;font-weight:700;color:#FFF;line-height:1.25;letter-spacing:-.01em;margin-bottom:1rem;-webkit-animation:fadeUp .65s ease .3s both;animation:fadeUp .65s ease .3s both}
.al-h1 em{color:var(--gold-l);font-style:normal}
.al-p{font-size:.875rem;color:rgba(255,255,255,.55);line-height:1.7;margin-bottom:2rem;-webkit-animation:fadeUp .65s ease .42s both;animation:fadeUp .65s ease .42s both}
.al-features{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.625rem;-webkit-animation:fadeUp .65s ease .55s both;animation:fadeUp .65s ease .55s both;margin-bottom:1.75rem}
.al-feat{display:-webkit-box;display:-ms-flexbox;display:flex;gap:.75rem;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.875rem 1rem}
.af-num{width:28px;height:28px;border-radius:50%;background:var(--gold);color:#FFF;font-family:'Fraunces',Georgia,serif;font-size:.8rem;font-weight:700;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:0;-ms-flex-negative:0;flex-shrink:0;margin-top:.05rem}
.af-txt{}
.af-title{font-size:.82rem;font-weight:700;color:#FFF;margin-bottom:.15rem}
.af-sub{font-size:.74rem;color:rgba(255,255,255,.5);line-height:1.5}
.al-quote{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1.125rem 1.25rem;-webkit-animation:fadeUp .65s ease .65s both;animation:fadeUp .65s ease .65s both}
.aq-stars{color:var(--gold-l);font-size:.9rem;letter-spacing:-.1em;margin-bottom:.5rem}
.aq-text{font-size:.82rem;color:rgba(255,255,255,.65);line-height:1.65;font-style:italic;margin-bottom:.75rem}
.aq-author{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.625rem}
.aq-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--gold-l),var(--gold));display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:.68rem;font-weight:700;color:#FFF;-webkit-box-flex:0;-ms-flex-negative:0;flex-shrink:0}
.aq-name{font-size:.8rem;font-weight:700;color:#FFF}
.aq-role{font-size:.68rem;color:rgba(255,255,255,.4)}

/* RIGHT PANEL */
.auth-right{-webkit-box-flex:1;-ms-flex:1;flex:1;background:var(--white);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ar-wrap{width:100%;max-width:640px;margin:0 auto;padding:2.25rem 2rem 3rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}

/* mobile logo bar */
.mob-logo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:1.5rem}
.mob-logo img{height:22px;width:auto}
.mob-logo a{font-size:.78rem;color:var(--t2)}
@media(min-width:821px){.mob-logo{display:none}}

/* Registration badge */
.reg-badge-row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.5rem;margin-bottom:1rem}
.reg-badge{display:inline-block;background:var(--gold-bg);border:1.5px solid var(--gold-b);border-radius:100px;padding:.3rem .875rem;font-size:.68rem;font-weight:700;color:var(--gold-d);letter-spacing:.06em;text-transform:uppercase;-webkit-animation:fadeIn .5s ease both;animation:fadeIn .5s ease both}

/* Who-am-I banner */
.who-banner{background:var(--off);border:1px solid var(--border);border-radius:12px;padding:.875rem 1.125rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.75rem;margin-bottom:1.25rem;-webkit-animation:fadeIn .5s ease .1s both;animation:fadeIn .5s ease .1s both}
.who-ico{font-size:1.25rem;-webkit-box-flex:0;-ms-flex-negative:0;flex-shrink:0}
.who-title{font-size:.88rem;font-weight:700;color:var(--t1)}
.who-sub{font-size:.74rem;color:var(--t3);margin-top:.1rem}

/* Account-setup section label */
.section-label{display:inline-block;background:var(--gold-bg);border:1.5px solid var(--gold-b);border-radius:100px;padding:.3rem .875rem;font-size:.68rem;font-weight:700;color:var(--gold-d);letter-spacing:.06em;text-transform:uppercase;margin-bottom:1rem}

/* Big form title */
.form-h1{font-family:'Fraunces',Georgia,serif;font-size:1.6rem;font-weight:700;color:var(--t1);margin-bottom:.375rem}
.form-sub{font-size:.84rem;color:var(--t2);line-height:1.65;margin-bottom:1.375rem}

/* Role switcher (Customer/Staff tabs) */
.role-tabs{display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--off);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:1.375rem}
.rt-btn{-webkit-box-flex:1;-ms-flex:1;flex:1;height:40px;border-radius:9px;border:none;background:transparent;font-size:.84rem;font-weight:600;color:var(--t3);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:.375rem;-webkit-transition:all .2s;transition:all .2s}
.rt-btn.active{background:var(--white);color:var(--navy);font-weight:700;-webkit-box-shadow:0 1px 4px rgba(11,19,64,.1);box-shadow:0 1px 4px rgba(11,19,64,.1)}
.rt-btn:hover:not(.active){background:rgba(255,255,255,.5);color:var(--t2)}

/* Step tabs (1.Contact 2.Company…) */
.step-tabs{display:-webkit-box;display:-ms-flexbox;display:flex;border-bottom:2px solid var(--border);margin-bottom:1.75rem;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
.st-tab{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:.75rem .5rem;text-align:center;font-size:.8rem;font-weight:600;color:var(--t3);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-2px;white-space:nowrap;-webkit-transition:all .25s;transition:all .25s;background:none;border-top:none;border-left:none;border-right:none}
.st-tab.done{color:var(--green);border-bottom-color:var(--green-m)}
.st-tab.active{color:var(--navy);font-weight:700;border-bottom-color:var(--navy)}
.st-tab.active.customer{color:var(--blue);border-bottom-color:var(--blue)}
.st-tab.active.staff{color:var(--green);border-bottom-color:var(--green)}
.st-tab.active.admin{color:var(--purple);border-bottom-color:var(--purple)}

/* Form step content */
.step-panel{display:none}
.step-panel.show{display:block;-webkit-animation:slideInR .35s ease both;animation:slideInR .35s ease both}

/* Section sub-heading */
.step-h2{font-family:'Fraunces',Georgia,serif;font-size:1.25rem;font-weight:700;color:var(--t1);margin-bottom:.375rem}
.step-p{font-size:.82rem;color:var(--t2);line-height:1.6;margin-bottom:1.375rem}

/* Form rows */
.form-row{display:-webkit-box;display:-ms-flexbox;display:flex;gap:.75rem;margin-bottom:.875rem;-ms-flex-wrap:wrap;flex-wrap:wrap}
.form-col{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:180px}
.form-col.full{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.form-col.half{-webkit-box-flex:0;-ms-flex:0 0 calc(50% - .375rem);flex:0 0 calc(50% - .375rem);max-width:calc(50% - .375rem)}
@media(max-width:520px){.form-col.half{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}
.field-label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--t2);margin-bottom:.4rem}
.field-label .req{color:var(--red);margin-left:1px}
.field-label .opt{font-weight:400;color:var(--t3);text-transform:none;font-size:.65rem}
.field-input{display:block;width:100%;background:#F8FAFF;border:1.5px solid var(--border2);border-radius:10px;padding:.7rem .9rem;font-size:.88rem;color:var(--t1);outline:none;-webkit-transition:border-color .2s,-webkit-box-shadow .2s;transition:border-color .2s,box-shadow .2s;font-family:'DM Sans',Arial,Helvetica,sans-serif}
.field-input:focus{border-color:var(--gold);-webkit-box-shadow:0 0 0 3px rgba(184,137,26,.12);box-shadow:0 0 0 3px rgba(184,137,26,.12);background:var(--white)}
.field-input:focus.customer-focus{border-color:var(--blue);-webkit-box-shadow:0 0 0 3px rgba(29,78,216,.1);box-shadow:0 0 0 3px rgba(29,78,216,.1)}
.field-input:focus.staff-focus{border-color:var(--green);-webkit-box-shadow:0 0 0 3px rgba(34,197,94,.1);box-shadow:0 0 0 3px rgba(34,197,94,.1)}
.field-input::placeholder{color:var(--t3)}
.field-input.error{border-color:var(--red);background:var(--red-bg);-webkit-animation:shake .35s ease;animation:shake .35s ease}
.field-hint{font-size:.7rem;color:var(--t3);margin-top:.3rem;line-height:1.5}
.field-hint.err{color:var(--red)}
textarea.field-input{resize:vertical;min-height:80px}
select.field-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394A3B8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .875rem center;padding-right:2.25rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}

/* Phone input with country code */
.phone-row{display:-webkit-box;display:-ms-flexbox;display:flex;gap:.5rem}
.phone-cc{width:110px;-webkit-box-flex:0;-ms-flex-negative:0;flex-shrink:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394A3B8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2rem}
.phone-num{-webkit-box-flex:1;-ms-flex:1;flex:1}

/* Password wrap */
.pw-wrap{position:relative}
.pw-wrap .field-input{padding-right:2.75rem}
.pw-eye{position:absolute;right:.75rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--t3);font-size:.95rem;padding:.25rem;-webkit-transition:color .15s;transition:color .15s;line-height:1}
.pw-eye:hover{color:var(--t2)}

/* Password strength */
.pw-strength{margin-top:.4rem}
.pw-bars{display:-webkit-box;display:-ms-flexbox;display:flex;gap:3px;height:4px;margin-bottom:.3rem}
.pw-bar{-webkit-box-flex:1;-ms-flex:1;flex:1;border-radius:2px;background:var(--border);-webkit-transition:background .3s;transition:background .3s}
.pw-label{font-size:.7rem;color:var(--t3)}
.bar-weak{background:var(--red)}
.bar-fair{background:var(--amber-m)}
.bar-good{background:var(--blue)}
.bar-strong{background:var(--green-m)}

/* Chip multi-select */
.chip-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}
.chip{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.35rem;padding:.38rem .8rem;border-radius:100px;font-size:.76rem;font-weight:600;cursor:pointer;border:1.5px solid var(--border2);background:var(--white);color:var(--t2);-webkit-transition:all .17s;transition:all .17s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.chip:hover{border-color:var(--border);background:var(--off)}
.chip.active{background:var(--green-bg);border-color:var(--green-b);color:var(--green)}
.chip .ck{display:none}
.chip.active .ck{display:inline}

/* Day picker */
.day-grid{display:-webkit-box;display:-ms-flexbox;display:flex;gap:.4rem;-ms-flex-wrap:wrap;flex-wrap:wrap}
.day-btn{width:40px;height:40px;border-radius:9px;border:1.5px solid var(--border2);background:var(--white);font-size:.74rem;font-weight:700;cursor:pointer;color:var(--t2);-webkit-transition:all .17s;transition:all .17s;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.day-btn:hover{background:var(--off2)}
.day-btn.sel{background:var(--green-bg);border-color:var(--green-b);color:var(--green)}

/* Upload zone */
.upload-zone{border:2px dashed var(--border2);border-radius:12px;padding:1.375rem;text-align:center;cursor:pointer;-webkit-transition:all .2s;transition:all .2s;background:var(--off)}
.upload-zone:hover{border-color:var(--gold-b);background:var(--gold-bg)}
.uz-icon{font-size:1.75rem;margin-bottom:.5rem}
.uz-title{font-size:.84rem;font-weight:700;color:var(--t1);margin-bottom:.25rem}
.uz-sub{font-size:.72rem;color:var(--t3)}

/* Account summary box */
.acct-summary{background:var(--off);border:1px solid var(--border);border-radius:12px;padding:1rem 1.25rem;margin-bottom:1.25rem}
.as-row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--border)}
.as-row:last-child{border-bottom:none;padding-bottom:0}
.as-key{font-size:.8rem;color:var(--t3);font-weight:500}
.as-val{font-size:.84rem;font-weight:700;color:var(--t1);text-align:right;max-width:60%;word-break:break-all}

/* Terms checkbox */
.terms-row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:.625rem;padding:.875rem;background:var(--off);border:1px solid var(--border);border-radius:10px;cursor:pointer;margin-bottom:1.25rem}
.terms-row input{width:17px;height:17px;margin-top:.1rem;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;accent-color:var(--gold);-webkit-appearance:checkbox;-moz-appearance:checkbox;appearance:checkbox;cursor:pointer}
.terms-txt{font-size:.78rem;color:var(--t2);line-height:1.65}
.terms-txt a{color:var(--gold);font-weight:600}

/* OTP boxes */
.otp-row{display:-webkit-box;display:-ms-flexbox;display:flex;gap:.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:.875rem}
.otp-box{width:50px;height:58px;border:1.5px solid var(--border2);border-radius:12px;text-align:center;font-size:1.35rem;font-weight:700;color:var(--t1);background:var(--off);outline:none;-webkit-transition:all .2s;transition:all .2s;font-family:'Fraunces',Georgia,serif;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.otp-box:focus{border-color:var(--gold);-webkit-box-shadow:0 0 0 3px rgba(184,137,26,.12);box-shadow:0 0 0 3px rgba(184,137,26,.12);background:var(--white)}

/* Social buttons */
.or-line{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.875rem;margin:1.25rem 0}
.or-line::before,.or-line::after{content:'';-webkit-box-flex:1;-ms-flex:1;flex:1;height:1px;background:var(--border)}
.or-line span{font-size:.75rem;color:var(--t3);-webkit-box-flex:0;-ms-flex-negative:0;flex-shrink:0}
.social-row{display:-webkit-box;display:-ms-flexbox;display:flex;gap:.625rem;margin-bottom:1.25rem}
.soc-btn{-webkit-box-flex:1;-ms-flex:1;flex:1;height:46px;border:1.5px solid var(--border2);border-radius:11px;background:var(--white);font-size:.82rem;font-weight:600;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:.5rem;color:var(--t2);-webkit-transition:all .18s;transition:all .18s}
.soc-btn:hover{border-color:var(--border);background:var(--off)}

/* Nav buttons */
.btn-row{display:-webkit-box;display:-ms-flexbox;display:flex;gap:.625rem;margin-top:1.375rem;-ms-flex-wrap:wrap;flex-wrap:wrap}
.btn-back{height:50px;padding:0 1.25rem;border-radius:12px;border:1.5px solid var(--border2);background:var(--white);font-size:.88rem;font-weight:600;color:var(--t2);cursor:pointer;-webkit-transition:all .17s;transition:all .17s;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.375rem;-webkit-box-flex:0;-ms-flex-negative:0;flex-shrink:0;white-space:nowrap}
.btn-back:hover{background:var(--off);border-color:var(--border)}
.btn-next{-webkit-box-flex:1;-ms-flex:1;flex:1;height:50px;border-radius:12px;border:none;font-size:.9rem;font-weight:700;cursor:pointer;-webkit-transition:all .18s;transition:all .18s;color:#FFF;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:.5rem;white-space:nowrap;min-width:140px}
.btn-next:active{-webkit-transform:scale(.98);transform:scale(.98)}
.btn-next:disabled{background:var(--border2)!important;cursor:not-allowed;-webkit-box-shadow:none!important;box-shadow:none!important}
.btn-navy{background:var(--navy)}
.btn-navy:hover:not(:disabled){background:var(--navy2)}
.btn-blue{background:var(--blue)}
.btn-blue:hover:not(:disabled){background:#1E40AF}
.btn-green{background:var(--green)}
.btn-green:hover:not(:disabled){background:#166534}
.btn-gold{background:var(--gold);-webkit-box-shadow:0 4px 16px rgba(184,137,26,.28);box-shadow:0 4px 16px rgba(184,137,26,.28);-webkit-animation:pulseGold 2.5s infinite;animation:pulseGold 2.5s infinite}
.btn-gold:hover:not(:disabled){background:var(--gold-d)}
.btn-purple{background:var(--purple)}
.btn-purple:hover:not(:disabled){background:#6D28D9}
.btn-full{width:100%;height:50px;border-radius:12px;border:none;font-size:.92rem;font-weight:700;cursor:pointer;-webkit-transition:all .18s;transition:all .18s;color:#FFF;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:.5rem;text-align:center;text-decoration:none}

/* Already registered */
.already-link{text-align:center;font-size:.8rem;color:var(--t2);margin-top:1.25rem}
.already-link a{color:var(--gold);font-weight:700}

/* Alert boxes */
.alert{border-radius:12px;padding:.875rem 1.125rem;font-size:.8rem;line-height:1.65;margin-bottom:1rem;display:-webkit-box;display:-ms-flexbox;display:flex;gap:.625rem;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start}
.alert strong{font-weight:700}
.alert-gold{background:var(--gold-bg);border:1px solid var(--gold-b);color:var(--gold-d)}
.alert-green{background:var(--green-bg);border:1px solid var(--green-b);color:var(--green)}
.alert-amber{background:var(--amber-bg);border:1px solid var(--amber-b);color:var(--amber)}
.alert-red{background:var(--red-bg);border:1px solid var(--red-b);color:var(--red)}
.alert-blue{background:var(--blue-bg);border:1px solid var(--blue-b);color:var(--blue)}
.alert-purple{background:var(--purple-bg);border:1px solid var(--purple-b);color:var(--purple)}
.alert-icon{font-size:1rem;-webkit-box-flex:0;-ms-flex-negative:0;flex-shrink:0;margin-top:.05rem}

/* Success screen */
.success-card{text-align:center;padding:1.5rem 1rem 1rem}
.success-ring{width:84px;height:84px;border-radius:50%;background:var(--green-bg);border:2px solid var(--green-b);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:2.5rem;margin:0 auto 1.25rem;-webkit-animation:checkPop .55s cubic-bezier(.34,1.56,.64,1);animation:checkPop .55s cubic-bezier(.34,1.56,.64,1)}
.success-h2{font-family:'Fraunces',Georgia,serif;font-size:1.5rem;font-weight:700;color:var(--t1);margin-bottom:.5rem}
.success-p{font-size:.85rem;color:var(--t2);max-width:300px;margin:0 auto 1.5rem;line-height:1.7}

/* Resend timer */
.resend-row{text-align:center;font-size:.8rem;color:var(--t2);margin-bottom:1rem}
.resend-row button{background:none;border:none;color:var(--gold);font-weight:700;cursor:pointer;padding:0;font-family:inherit;font-size:inherit}
.resend-cd{color:var(--t3)}

/* Password requirements list */
.pw-reqs{list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.4rem;margin-bottom:1.25rem}
.pw-reqs li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.5rem;font-size:.78rem;color:var(--t3);-webkit-transition:color .3s;transition:color .3s}
.pw-reqs li::before{content:"○";font-size:.65rem;-webkit-box-flex:0;-ms-flex-negative:0;flex-shrink:0}
.pw-reqs li.met{color:var(--green)}
.pw-reqs li.met::before{content:"✓";color:var(--green-m)}

/* Auth footer */
.auth-footer{margin-top:auto;padding-top:1.5rem;text-align:center;font-size:.8rem;color:var(--t2)}
.auth-footer a{color:var(--gold);font-weight:700}

/* ─── RESPONSIVE ─── */
@media(max-width:820px){
  .auth-left{display:none}
  .auth-right{width:100%;min-height:100vh}
  .ar-wrap{padding:1.5rem 1.125rem 2.5rem}
}
@media(max-width:480px){
  .form-h1{font-size:1.3rem}
  .otp-box{width:42px;height:50px;font-size:1.15rem}
  .social-row{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
  .btn-row{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
  .btn-back,.btn-next{width:100%;min-width:unset}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{-webkit-animation-duration:.01ms!important;animation-duration:.01ms!important;-webkit-transition-duration:.01ms!important;transition-duration:.01ms!important}
}


.section-divider{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);text-align:center;border-bottom:1px solid var(--border);line-height:0;margin:1.25rem 0}
.section-divider span{background:var(--white);padding:0 .75rem}



/* StaffSwift PHP registration bridge — maps live form markup to the attached design */
.auth-shell{min-height:100vh}.auth-side{width:420px;min-width:340px}.auth-side>.al-glow{display:block}
.auth-side>div:not(.al-glow){position:relative;z-index:1}.auth-side .logo{height:30px;width:auto;margin-bottom:2.2rem}
.side-chip{display:inline-block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:.35rem .875rem;font-size:.72rem;font-weight:700;color:rgba(255,255,255,.75);letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.25rem}
.side-title{font-family:'Fraunces',Georgia,serif;font-size:1.95rem;font-weight:700;color:#fff;line-height:1.25;margin-bottom:1rem}
.side-copy{font-size:.875rem;color:rgba(255,255,255,.58);line-height:1.7;margin-bottom:2rem}
.side-list{display:flex;flex-direction:column;gap:.625rem}.side-item{display:flex;gap:.75rem;align-items:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.875rem 1rem}.side-ico{width:28px;height:28px;border-radius:50%;background:var(--gold);color:#fff;font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.side-item strong{display:block;font-size:.82rem;color:#fff;margin-bottom:.15rem}.side-item span{display:block;font-size:.72rem;color:rgba(255,255,255,.5);line-height:1.45}.side-links{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem;font-size:.75rem;color:rgba(255,255,255,.5)}.side-links a:hover{color:#fff}
.auth-main{background:#fff;min-width:0}.auth-card{max-width:700px;margin:0 auto;padding:2rem 2.25rem 3rem;width:100%}.auth-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}.brand-mini{display:flex;align-items:center;gap:.55rem;font-weight:800;color:var(--navy)}.brand-mini img{width:30px;height:30px;object-fit:contain}.auth-badge{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-d);background:var(--gold-bg);border:1px solid var(--gold-b);border-radius:999px;padding:.35rem .7rem}
.account-type-banner{display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem;border-radius:12px;background:var(--gold-bg);border:1px solid var(--gold-b);margin-bottom:1.25rem}.account-type-banner .type-icon{width:38px;height:38px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:1.15rem;box-shadow:0 2px 8px rgba(11,19,64,.06)}.account-type-banner strong{display:block;font-size:.82rem;color:var(--navy)}.account-type-banner em{display:block;font-size:.72rem;color:var(--t2);font-style:normal;margin-top:.12rem}
.auth-head{margin-bottom:1.25rem}.auth-kicker{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-d);font-weight:800}.auth-title{font-family:'Fraunces',Georgia,serif;font-size:1.7rem;line-height:1.25;margin:.25rem 0 .35rem}.auth-sub{font-size:.82rem;color:var(--t2)}
.portal-switch{display:flex;background:var(--off);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:1.35rem}.portal-switch a{flex:1;text-align:center;padding:.65rem .75rem;border-radius:9px;font-size:.82rem;font-weight:700;color:var(--t3)}.portal-switch a.active{background:#fff;color:var(--navy);box-shadow:0 1px 4px rgba(11,19,64,.1)}
.stepper{display:flex;border-bottom:2px solid var(--border);margin-bottom:1.5rem;overflow-x:auto}.step-indicator{flex:1;padding:.72rem .45rem;text-align:center;font-size:.76rem;font-weight:700;color:var(--t3);background:none;border:0;border-bottom:2.5px solid transparent;margin-bottom:-2px;white-space:nowrap;cursor:pointer}.step-indicator.active{color:var(--navy);border-bottom-color:var(--navy)}.step-indicator.done{color:var(--green);border-bottom-color:var(--green-m)}
.form-step{display:none}.form-step.active{display:block;animation:slideInR .35s ease both}.step-title{font-family:'Fraunces',Georgia,serif;font-size:1.22rem;margin-bottom:.25rem}.step-copy{font-size:.8rem;color:var(--t2);margin-bottom:1.25rem}.form-grid{display:flex;flex-wrap:wrap;gap:.85rem}.form-grid.two>.field{flex:1 1 calc(50% - .45rem);min-width:220px}.field{width:100%;margin-bottom:.8rem}.field label{display:block;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--t2);margin-bottom:.4rem}.input{display:block;width:100%;background:#F8FAFF;border:1.5px solid var(--border2);border-radius:10px;padding:.72rem .9rem;font-size:.88rem;color:var(--t1);outline:none;transition:border-color .2s,box-shadow .2s}.input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,137,26,.12);background:#fff}.input.invalid{border-color:var(--red);background:var(--red-bg)}.field-error{display:none;font-size:.7rem;color:var(--red);margin-top:.3rem}.field.invalid .field-error{display:block}.field-hint,.phone-status{font-size:.7rem;color:var(--t3);margin-top:.3rem}.divider{display:flex;align-items:center;gap:.75rem;margin:1rem 0}.divider:before,.divider:after{content:'';height:1px;background:var(--border);flex:1}.divider span{font-size:.66rem;color:var(--t3);text-transform:uppercase;letter-spacing:.05em}
.phone-control{display:flex;gap:.5rem}.country-code-box{width:112px;flex-shrink:0;position:relative;display:flex;align-items:center}.country-flag{position:absolute;left:.7rem;z-index:2;font-size:1rem;pointer-events:none}.country-select{padding-left:2.05rem!important;padding-right:1.6rem!important}.phone-local{flex:1;min-width:0}
.field-append{position:relative}.field-append .input{padding-right:2.8rem}.eye{position:absolute;right:.7rem;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer}.password-strength{margin-top:.45rem}.strength-bars{display:flex;gap:3px}.strength-bars span{height:4px;border-radius:3px;background:var(--border);flex:1}.strength-label{font-size:.7rem;color:var(--t3);margin-top:.25rem}
.upload-card,.upload-zone{border:2px dashed var(--border2);border-radius:12px;padding:1.1rem;text-align:center;background:var(--off);transition:.2s}.upload-card:hover,.upload-zone:hover{border-color:var(--gold-b);background:var(--gold-bg)}
.actions{display:flex;justify-content:space-between;gap:.75rem;margin-top:1.25rem}.btn{border:0;border-radius:10px;padding:.75rem 1rem;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.4rem}.btn-primary{background:var(--navy);color:#fff;box-shadow:0 6px 16px rgba(11,19,64,.18)}.btn-secondary{background:var(--off);color:var(--navy);border:1px solid var(--border)}.btn:disabled{opacity:.55;cursor:not-allowed}.alert{padding:.8rem 1rem;border-radius:10px;margin-bottom:1rem;font-size:.8rem}.alert.error{background:var(--red-bg);border:1px solid var(--red-b);color:var(--red)}.alert.success{background:var(--green-bg);border:1px solid var(--green-b);color:var(--green)}
.auth-foot,.auth-links{text-align:center;font-size:.78rem;color:var(--t2);margin-top:1rem}.auth-foot a,.auth-links a{color:var(--gold-d);font-weight:700}.auth-links{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
@media(max-width:900px){.auth-left{width:340px;min-width:300px;padding:1.6rem}.auth-card{padding:1.6rem}}
@media(max-width:760px){.auth-wrap{display:block}.auth-left{width:100%;min-width:0;min-height:auto;padding:1.2rem 1.25rem}.auth-left .side-list,.auth-left .side-copy,.auth-left .side-links{display:none}.auth-left .logo{margin-bottom:.8rem;height:25px}.side-title{font-size:1.35rem;margin-bottom:0}.side-chip{margin-bottom:.55rem}.auth-right{min-height:auto}.auth-card{padding:1.25rem}.form-grid.two>.field{flex-basis:100%;min-width:0}.step-indicator{font-size:.7rem}.auth-top{margin-bottom:1rem}}
@media(max-width:430px){.phone-control{align-items:stretch}.country-code-box{width:104px}.actions{flex-direction:column-reverse}.actions .btn{width:100%}.auth-badge{display:none}.account-type-banner{align-items:flex-start}}

/* Registration wizard action visibility fix */
.wizard-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;flex-wrap:wrap}
.wizard-actions [hidden]{display:none!important}
.wizard-actions .btn{margin:0;min-width:150px}
.wizard-actions #prevStep{margin-right:auto}
.wizard-actions #nextStep,.wizard-actions #submitRegistration{margin-left:auto}
@media(max-width:640px){.wizard-actions{gap:12px}.wizard-actions .btn{width:100%;min-width:0;margin:0!important}}