html,body {
	margin:0;
	height:100%;
}

/* Trigger button only for demo */
.demoBar {
	position:fixed;
	inset:auto 16px 16px auto;
	z-index:1
}

/* --- MODAL LAYER --- */
.authOverlay {
	position:fixed;
	inset:0;
	display:flex;                /* always in layout */
	align-items:center;
	justify-content:center;
	background:rgba(0,5,10,.50);
	z-index:9999;

	/* animation base (closed state) */
	opacity:0;
	pointer-events:none;
	transition: opacity .25s ease;
}

/* visible state */
.authOverlay.is-open{
	opacity:1;
	pointer-events:auto;
}

.sheetSignIn {
	position: relative;
	width:min(420px,94vw);
	max-height:min(90vh,860px);
	background:#fff;
	border-radius:14px;
	box-shadow:0 12px 40px rgba(0,0,0,.22);
	overflow:hidden;
	display:flex;
	flex-direction:column;

	/* animation base (closed) */
	transform: translateY(24px);
	opacity:0;
	transition: transform .25s ease, opacity .25s ease, height .25s ease;
}

.sheetSignIn.is-resizing{
  will-change: height;
}

/* when overlay is open, slide sheet up + fade in */
.authOverlay.is-open .sheetSignIn {
	transform: translateY(0);
	opacity:1;
}

.sheetHeader {
   height: 56px;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;      
	padding:12px 0 5px 0;            
	background:#f1f3f5;
}

.sheetTitle {
	font-size:clamp(17px, 4vw, 19px);
	font-weight:700;
   color: #000;
}

/* close button on the LEFT, vertically centered */
.xBtn {
	appearance:none;
	border:0;
	background:#fff;
	width:40px;
	height:40px;
	border-radius:10px;
	cursor:pointer;
	font-size:17px;
	background: #f1f3f5;
	position:absolute;
	left:12px;
	transition: background-color .18s ease, transform .18s ease;
	align-items: center;
	justify-content: center;
	display: flex;
	margin-top: 1px;
}

/* .xBtn:hover {
	background:#e1e3e5;
} */

.sheetBody {
	padding:18px 30px 30px 30px; 
	overflow:auto
}
.row {
	display:flex; 
	gap:14px
}

.col {
	flex:1
}

.tabs {
	display:inline-flex; 
	background:#f3f4f6; 
	border-radius:999px; 
	padding:4px
}

.tab {
	appearance:none;
	border:0;
	background:transparent;
	padding:8px 14px;
	border-radius:999px;
	cursor:pointer;
	font-weight:600;
	color:#6b7280
}

.recendCode {
	color: #000;
}
.tab.is-active {
	background:#fff;
	color:#111; 
	box-shadow:0 4px 10px rgba(0,0,0,.08)
}

.ssoList {
	display:flex;
	flex-direction:column;
	gap:10px;
	margin-top:12px
}

.ssoBtn {
	position:relative;
	display:inline-flex; 
	width:100%;
	align-items:center;
	gap:10px; 
	justify-content:center; 
	padding:13px 16px; 
	font-size: 15px;  
	border-radius:8px; 
	border:0; 
	background:#eaecee; 
	cursor:pointer; 
	font-weight:600;
   color: #000;
	transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
}

/* Remove Chrome/Safari autofill blue/yellow background */
#phInput:-webkit-autofill,
#phInput:-webkit-autofill:hover,
#phInput:-webkit-autofill:focus,
#phInput:-webkit-autofill:active{
  -webkit-text-fill-color:#111;
  caret-color:#111;
  transition: background-color 9999s ease-out 0s;  /* prevents flash */
  -webkit-box-shadow: 0 0 0px 1000px #eaecee inset; /* match your field bg */
  box-shadow: 0 0 0px 1000px #eaecee inset;
}

.ssoBtn:hover {
	background-color: #e1e3e5;
}

.orRow {
	display:flex; 
	align-items:center; 
	gap:12px; 
	font-size: 15px; 
	margin:14px 7px; 
	color:#6b7280
}

.orRow:before,.orRow:after {
	content:""; 
	flex:1; 
	height:1px; 
	background:#e5e7eb
}

.field {
	display:flex;
	align-items:center; 
	justify-content: center;
	gap:8px; 
	border-radius:8px; 
	padding:5px 14px; 
	background:#eaecee
}

.field input {
	width:100%; 
	font-size:16px; 
	border:0; 
	outline:0;
	padding: 8px 0;
	background:#eaecee
}

.hint {
	font-size:13px; 
	color:#444; 
	margin:6px 7px 3px;
	font-weight: 500;
}

.hintMobile {
	font-size:13px; 
	color:#000; 
	margin:6px 7px 3px;
	font-weight: 500;
}

.hint2 {
	font-size:12px; 
	color:#333; 
	margin:30px 7px 0;
	font-weight: 300;
	display: block;
	align-items: center;
	justify-content: center;
	text-align: center;
}


.hint3 {
	font-size:13px; 
	color:#444; 
	margin:6px 7px 0;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hint4 {
	font-size:15px; 
	color:#515355; 
	margin:6px 7px 0;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.signupOptions{
	margin-top:10px;
	text-align:center;
	font-size:14px;
}

.linkBack {
	background:none;
	border:0;
	font-size: 15px;
	color:#d62e04;
	font-weight:400;
	cursor:pointer;
	margin-bottom: 15px;
}

.submit {
	width:100%; 
	border:0; 
	background:#000; 
	color:#fff; 
	padding:13px 16px; 
	border-radius:8px; 
	font-weight:500; 
	cursor:pointer;
	font-size: 16px;
	display:flex;
  	align-items:center;
  	justify-content:center;
  	gap:10px;
}

.submit[disabled]{
	opacity:.6; 
	cursor:not-allowed
}

.link{
	background:none;
	border:0;
	color:#111;
	font-weight:700;
	cursor:pointer
}

.error {
	margin:8px 5px;
	color:#ff0000;
	font-size:13px;
	text-align: center;
}

.success {
	margin-top:8px;
	color:#059669;
	font-size:13px
}

/* PIN */
/* PIN */
.pinWrap {
    display:flex;
    gap:12px;
    justify-content:center;
    margin:14px 0;
}

.pinWrap input {
    width:56px;
    height:60px;
    text-align:center;
    font-size:22px;
    border-radius:12px;
    border:1px solid #e5e7eb;
}

/* fade when disabled */
.pinWrap input[disabled] {
    opacity:.5;
    background:#f9fafb;
    border-color:#e5e7eb;
}

/* inline spinner under the PIN */
.pinSpinner {
    margin-top:8px;
    display:flex;
    justify-content:center;
}
.pinSpinner[hidden] {
    display:none;
}

.pinSpinner__loader {
    width:24px;
    height:24px;
    border-radius:50%;
    border:3px solid #e5e7eb;
    border-top-color:#111;
    animation: pinSpin .7s linear infinite;
}

@keyframes pinSpin {
    to { transform: rotate(360deg); }
}


/* icon fixed on the left, vertically centered */
.ssoBtn .ssoIcon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

/* Full-screen modal on small screens */
@media (max-width:480px) {
	.authOverlay {
		align-items:stretch;        /* let sheet fill full height */
	}

	.sheetSignIn {
		width:100%;
		height:100%;
		max-height:none;
		border-radius:0;            /* no rounded corners */
		box-shadow:none;            /* optional: remove shadow */
	}

	.sheetTitle {
		font-size:clamp(17px, 4vw, 20px);
		font-weight:600;
	}

	.pinWrap input {
		width:46px;
		height:52px;
	}

   .authOverlay {
      background:rgba(255,255,255,.50);
   }
}

.floatField{
  position:relative;
  background:#eaecee;
  border-radius:8px;
  padding:6px 16px 6px;      /* top padding creates room for the floated label */
}

.floatField input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font-size:16px;              /* avoid iOS zoom */
  padding:18px 0 0;
}

.floatField label{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  color:#8a8f96;
  font-size:16px;
  font-weight:400;
  pointer-events:none;
  transition: top .16s ease, transform .16s ease, font-size .16s ease, color .16s ease;
}

/* float when focused OR when there is a value */
.floatField input:focus + label,
.floatField input:not(:placeholder-shown) + label{
  top:5px;
  transform:none;
  font-size:12px;
  color:#0454d4;
}

/* Spinner inside the login button */
.btnSpinner{
  width:18px;
  height:18px;
  display:inline-block;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation: rdSpin .8s linear infinite;
}

@keyframes btnSpin{
  to{ transform: rotate(360deg); }
}

@keyframes rdSpin { to { transform: rotate(360deg); } }

/* Disabled look */
#stepEmailLogin input:disabled { opacity:.65; cursor:not-allowed; }
#stepEmailLogin button:disabled { opacity:.85; cursor:default; }

.xBtn { color:#111; }
.xBtn svg { display:block; }

/* Phone verify error message (center, red) */
.pinErr{
  margin: 16px 22px 14px;
  text-align:center;
  color:#d90000;
  font-size:14px;
  line-height:1.15;
  font-weight:400;
}

/* Resubmit button (gray iOS-style) */
.pinResubmitBtn{
  margin: 0 auto 40px;
  display:block;
  padding: 12px 18px;
  border:0;
  border-radius:10px;
  background:#eaecee;
  color:#000;
  font-size:15px;
  font-weight:400;
  cursor:pointer;
  transition: background-color .18s ease, opacity .18s ease, transform .18s ease;
}

.pinResubmitBtn:hover{ background:#e1e4e7; }
.pinResubmitBtn:active{ transform: translateY(1px); }

/* ===== Centered dialog overlay inside auth modal (like Settings openSheet center) ===== */

.authSheetOverlay{
  position:absolute;
  inset:0;
  z-index:30;
  display:flex;
  align-items:center;      /* centered */
  justify-content:center;

  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease-out;
}

.authSheetOverlay[hidden]{
  display:none !important;
}

.authSheetOverlay.is-open{
  opacity:1;
  pointer-events:auto;
}

.authSheetBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.25);
}

.authSheetPanel{
  position:relative;
  width:min(440px, calc(100% - 40px));
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 40px rgba(15,23,42,.22);
  overflow:hidden;

  transform:scale(.92);
  transition:transform .22s ease-out;
}

.authSheetOverlay.is-open .authSheetPanel{
  transform:scale(1);
}

@media (prefers-reduced-motion: reduce){
  .authSheetOverlay,
  .authSheetPanel{
    transition:none;
  }
}

.authSheetHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 18px 10px 18px;
  background:#f1f3f5;
}

.authSheetTitle{
  font-weight:700;
  color:#000;
  font-size:19px; /* matches your screenshot scale */
  line-height:1.05;
}

.authSheetX{
  width:40px;
  height:40px;
  border-radius:10px;
  border:0;
  background:#f1f3f5;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.authSheetX:hover{
  background:#e1e3e5;
}

.authSheetBody{
  padding:14px 18px 16px;
}

/* body + actions like your Settings "Check your email" dialog */
.authAlertBody{
  color:#444;
  font-size:15px;
  line-height:1.35;
  padding:0px 2px 10px;
}

.authAlertActions{
  display:flex;
  justify-content:flex-end;
  padding:0 0 2px;
}

.authAlertLink{
  border:0;
  background:#000;
  border-radius:10px;
  font-weight:500;
  letter-spacing:.02em;
  color:#fff;
  padding:10px 20px;
  cursor:pointer;
}


/* City picker step (Register) */
.cityTrigger{
  cursor:pointer;
  caret-color: transparent;
}

.cityPickerHint{
  font-size:15px;
  color:#515355;
  margin: 6px 7px 0;
  font-weight:500;
  text-align:center;
}

.cityPickerInputWrap{
  position:relative;
  background:#eaecee;
  border-radius:8px;
  padding:6px 44px 6px 16px;
}

.cityPickerInput{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font-size:16px;
  padding:12px 0;
}

.cityPickerClear{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border:0;
  border-radius:10px;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.cityPickerClear:hover{
  background:#e1e3e5;
}

.cityPickerList{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:auto;
  max-height: 44vh;
  background:#fff;
}

.cityPickerRow{
  padding:12px 14px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.cityPickerRow:hover{ background:#f3f4f6; }

.cityPickerMain{
  font-size:15px;
  font-weight:500;
  color:#111;
}

.cityPickerSub{
  font-size:13px;
  color:#6b7280;
}

.cityPickerEmpty{
  padding:14px;
  color:#6b7280;
  font-size:14px;
}