/* ==========================================================================
   PLIXWIN – Log in / Sign up, iOS look (29 Oct). Loaded last.
   No picture. Onest font. Sign up / Log in as an iPhone segmented control,
   fields grouped in rounded boxes like iPhone Settings, 18+ as an iPhone switch,
   pill buttons. Phones: full screen. Desktop: one centred card.
   To turn it off: remove the auth-ios.css line in index.html.
   ========================================================================== */
html body #pxAuth,
html body #pxAuth *:not(#_a1):not(#_a2) { font-family: "Onest", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif !important; }
html body #pxAuth { letter-spacing: -.01em; }

/* ---------------------------------------------------------------- card */
html body #pxAuth .pxa-auth-art { display: none !important; }
html body #pxAuth .pxa-auth-card {
  display: block; width: min(420px, 100%); height: auto; max-height: calc(100dvh - 32px);
  border-radius: 28px; background: #151518; border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6); overflow: hidden;
}
html body #pxAuth .pxa-auth-main {
  display: flex; flex-direction: column; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: 24px 24px 22px; background: transparent; scrollbar-width: none;
}
html body #pxAuth .pxa-auth-main::-webkit-scrollbar { display: none; }
html body #pxAuth .pxa-auth-main::before { display: none; }

/* logo + close */
html body #pxAuth .pxa-ios-top { display: flex; align-items: center; height: 36px; padding-right: 48px; }
html body #pxAuth .pxa-ios-mark { display: block; width: auto; height: 32px; }
html body #pxAuth .pxa-x {
  position: absolute; top: 24px; right: 24px; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: #232326; color: #C7C7CC; display: grid; place-items: center; transition: background .2s, transform .18s cubic-bezier(.32, .72, 0, 1);
}
html body #pxAuth .pxa-x:hover { background: #2C2C30; color: #FFFFFF; }
html body #pxAuth .pxa-x:active { transform: scale(.92); }
html body #pxAuth .pxa-x .px-ic-svg { width: 14px; height: 14px; stroke-width: 3; }

/* Sign up / Log in: iPhone segmented control */
html body #pxAuth .pxa-auth-tabs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: stretch; gap: 2px;
  margin: 18px 0 0; padding: 3px; border-radius: 12px; border: 0; background: #0E0E11;
}
html body #pxAuth .pxa-auth-tabs[hidden] { display: none; }
html body #pxAuth .pxa-auth-tabs button {
  min-width: 0; height: 34px; border-radius: 9px; border: 0; background: transparent; color: #AEAEB2;
  font-size: 14px; font-weight: 600; box-shadow: none; transition: background .25s, color .25s;
}
html body #pxAuth .pxa-auth-tabs button.is-active { background: #2E2E33; color: #FFFFFF; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }

/* titles */
html body #pxAuth .pxa-auth-title { margin: 20px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: #FFFFFF; }
html body #pxAuth .pxa-auth-sub { margin: 6px 0 0; font-size: 14px; color: #8A8A8E; }

/* ---------------------------------------------------------------- fields, grouped like iPhone Settings */
html body #pxAuth .pxa-form { gap: 0; margin-top: 18px; }
html body #pxAuth .pxa-form[hidden] { display: none; }
html body #pxAuth .pxa-form-error { margin: 0 0 12px; border-radius: 12px; }
/* the field names are read by screen readers; the placeholder shows them on screen */
html body #pxAuth .pxa-form > label.pxa-field > span,
html body #pxAuth .pxa-ref-field > span {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
html body #pxAuth .pxa-field { gap: 0; }
html body #pxAuth .pxa-input {
  height: 50px; padding: 0 14px; gap: 12px; border: 0; border-radius: 0; background: #1B1B1E; box-shadow: none;
  transition: background .2s;
}
html body #pxAuth .pxa-input:hover { border: 0; }
html body #pxAuth .pxa-input:focus-within { background: #232327; box-shadow: none; border: 0; }
html body #pxAuth .pxa-input > .px-ic-svg { width: 19px; height: 19px; color: #8A8A8E; }
html body #pxAuth .pxa-input input { font-size: 15px; color: #FFFFFF; }
html body #pxAuth .pxa-input input::placeholder { color: #6E6E73; }
html body #pxAuth .pxa-input input:-webkit-autofill { -webkit-text-fill-color: #FFFFFF; -webkit-box-shadow: 0 0 0 1000px #1B1B1E inset; box-shadow: 0 0 0 1000px #1B1B1E inset; }
html body #pxAuth .pxa-eye { width: 38px; height: 38px; margin-right: -8px; border-radius: 50%; color: #8A8A8E; }
/* first row rounded on top, last row rounded at the bottom, thin lines between */
html body #pxAuth .pxa-form > label.pxa-field:nth-of-type(1) .pxa-input { border-radius: 14px 14px 0 0; }
html body #pxAuth .pxa-form > label.pxa-field:nth-of-type(2) .pxa-input,
html body #pxAuth .pxa-form > label.pxa-field:nth-of-type(3) .pxa-input { box-shadow: inset 0 1px 0 #2A2A2E; }
html body #pxAuth .pxa-form[data-form="register"] > label.pxa-field:nth-of-type(3) .pxa-input,
html body #pxAuth .pxa-form[data-form="login"] > label.pxa-field:nth-of-type(2) .pxa-input { border-radius: 0 0 14px 14px; }
/* password strength + hint under the group */
html body #pxAuth .pxa-strength { margin: 9px 4px 0; gap: 4px; }
html body #pxAuth .pxa-strength i { height: 4px; border-radius: 2px; background: #2A2A2E; }
html body #pxAuth .pxa-strength[data-score="1"] i:nth-child(-n+1) { background: #FF6B6B; }
html body #pxAuth .pxa-strength[data-score="2"] i:nth-child(-n+2) { background: #FFB547; }
html body #pxAuth .pxa-strength[data-score="3"] i:nth-child(-n+3) { background: #49E8CA; }
html body #pxAuth .pxa-strength[data-score="4"] i { background: #15D8B3; }
html body #pxAuth .pxa-hint { margin: 6px 4px 0; font-size: 12px; color: #8A8A8E; }

/* currency + referral: a second group */
html body #pxAuth .pxa-row2 { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 14px; }
html body #pxAuth .pxa-row2 > label.pxa-field {
  flex-direction: row; align-items: center; justify-content: space-between; gap: 6px;
  height: 50px; padding: 0 14px; border-radius: 14px 14px 0 0; background: #1B1B1E;
}
html body #pxAuth .pxa-row2 > label.pxa-field > span { position: static !important; width: auto; height: auto; clip: auto; font-size: 15px; font-weight: 400; color: #FFFFFF; }
html body #pxAuth .pxa-row2 select {
  height: auto; padding: 0 18px 0 0; border: 0; border-radius: 0; box-shadow: none; text-align: right; text-align-last: right;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 5 7 7-7 7' fill='none' stroke='%238A8A8E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 13px 13px no-repeat;
  -webkit-appearance: none; appearance: none; color: #8A8A8E; font-size: 15px; cursor: pointer; min-width: 0;
}
html body #pxAuth .pxa-row2 select:hover, html body #pxAuth .pxa-row2 select:focus { border: 0; box-shadow: none; }
html body #pxAuth .pxa-row2 select option { background: #1B1B1E; color: #FFFFFF; }
html body #pxAuth .pxa-ref-field .pxa-input { border-radius: 0 0 14px 14px; box-shadow: inset 0 1px 0 #2A2A2E; }

/* 18+ and Terms: iPhone switch on the right */
html body #pxAuth .pxa-check {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px 10px 14px; border-radius: 14px; background: #1B1B1E;
  font-size: 13.5px; line-height: 1.4; color: #C7C7CC; cursor: pointer;
}
html body #pxAuth .pxa-check > span { order: 0; flex: 1; }
html body #pxAuth .pxa-check a { color: #49E8CA; font-weight: 600; text-decoration: none; }
html body #pxAuth .pxa-check input {
  order: 1; flex: none; width: 51px; height: 31px; margin: 0; border-radius: 999px; cursor: pointer;
  -webkit-appearance: none; appearance: none; outline-offset: 3px;
  background: #39393D radial-gradient(circle 13.5px at 15.5px 50%, #FFFFFF 98%, transparent 100%) no-repeat;
  transition: background-color .25s cubic-bezier(.32, .72, 0, 1), background-position .25s cubic-bezier(.32, .72, 0, 1);
  box-shadow: none;
}
html body #pxAuth .pxa-check input:checked { background-color: #15D8B3; background-position: 20px 0; }

/* ---------------------------------------------------------------- buttons */
html body #pxAuth .pxa-btn-gold {
  height: 50px; margin-top: 16px; border-radius: 999px; border: 0; background: #15D8B3 !important; color: #02120F !important;
  font-size: 16px; font-weight: 700; box-shadow: 0 8px 22px rgba(21, 216, 179, .25) !important; transition: transform .18s cubic-bezier(.32, .72, 0, 1), opacity .2s, background .2s;
}
html body #pxAuth .pxa-btn-gold:hover:not(:disabled) { background: #2BE4C1 !important; }
html body #pxAuth .pxa-btn-gold:active { transform: scale(.97); }
html body #pxAuth .pxa-form[data-form="login"] .pxa-btn-gold { margin-top: 18px; }
/* "Create account" looks paused until the 18+ switch is on (still tappable: it then says why) */
html body #pxAuth .pxa-form[data-form="register"]:has(input[name="agree"]:not(:checked)) .pxa-btn-gold { opacity: .45; box-shadow: none !important; }

html body #pxAuth .pxa-or { margin: 16px 0 12px; font-size: 13px; color: #6E6E73; }
html body #pxAuth .pxa-or::before, html body #pxAuth .pxa-or::after { background: #2A2A2E; }
html body #pxAuth .pxa-google > .pxa-btn-google {
  height: 50px !important; min-height: 50px !important; border-radius: 999px !important; border: 0 !important;
  background: #FFFFFF !important; color: #111114 !important; font-size: 15px !important; font-weight: 600 !important;
}
html body #pxAuth .pxa-google > .pxa-btn-google:hover { background: #F0F0F2 !important; }

html body #pxAuth .pxa-switch { margin: 14px 0 0; text-align: center; font-size: 13.5px; color: #8A8A8E; }
html body #pxAuth .pxa-switch[hidden] { display: none; }
html body #pxAuth .pxa-switch .pxa-link { padding: 4px; border: 0; background: none; color: #49E8CA; font-size: 13.5px; font-weight: 600; cursor: pointer; }
html body #pxAuth .pxa-auth-secure { margin-top: 14px; padding-top: 0; font-size: 12px; color: #6E6E73; }

/* 2-step code */
html body #pxAuth .pxa-code { height: 56px; border-radius: 14px; border: 0; background: #1B1B1E; font-size: 22px; letter-spacing: .4em; text-align: center; }
html body #pxAuth .pxa-2fa-badge { background: rgba(21, 216, 179, .12); color: #49E8CA; }

/* ---------------------------------------------------------------- phones: full screen, no picture */
@media (max-width: 900px) {
  html body #pxAuth { padding: 0; place-items: stretch; }
  html body #pxAuth .pxa-auth-card { width: 100%; height: 100dvh; max-height: none; border-radius: 0; border: 0; background: #0C0C0F; box-shadow: none; }
  html body #pxAuth .pxa-auth-main {
    height: 100dvh; max-height: none;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(22px + env(safe-area-inset-bottom, 0px));
  }
  html body #pxAuth .pxa-x { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px; background: #1B1B1E; }
  html body #pxAuth .pxa-auth-title { font-size: 30px; margin-top: 22px; }
  html body #pxAuth .pxa-auth-sub { font-size: 15px; }
  html body #pxAuth .pxa-input { height: 52px; padding: 0 16px; background: #151518; }
  html body #pxAuth .pxa-input:focus-within { background: #1E1E22; }
  html body #pxAuth .pxa-input input { font-size: 16px; }   /* 16px stops iPhone zooming in on the field */
  html body #pxAuth .pxa-input input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #151518 inset; box-shadow: 0 0 0 1000px #151518 inset; }
  html body #pxAuth .pxa-row2 { grid-template-columns: 1fr; gap: 0; margin-top: 16px; }
  html body #pxAuth .pxa-row2 > label.pxa-field { height: 52px; padding: 0 14px 0 16px; border-radius: 14px 14px 0 0; background: #151518; }
  html body #pxAuth .pxa-row2 > label.pxa-field > span, html body #pxAuth .pxa-row2 select { font-size: 16px; }
  html body #pxAuth .pxa-ref-field .pxa-input { border-radius: 0 0 14px 14px; box-shadow: inset 0 1px 0 #26262A; }
  html body #pxAuth .pxa-check { margin-top: 16px; padding: 12px 14px 12px 16px; background: #151518; font-size: 14px; }
  html body #pxAuth .pxa-auth-tabs { background: #1B1B1E; margin-top: 16px; }
  html body #pxAuth .pxa-auth-tabs button.is-active { background: #3A3A3F; }
  html body #pxAuth .pxa-btn-gold, html body #pxAuth .pxa-google > .pxa-btn-google { height: 52px !important; min-height: 52px !important; font-size: 16px !important; }
  html body #pxAuth .pxa-btn-gold { font-size: 17px; }
  html body #pxAuth .pxa-or { margin: 18px 0 14px; }
  html body #pxAuth .pxa-auth-secure { margin-top: auto; padding-top: 18px; }
}