/* =========================================================================
   IzeChat — Premium Authentication Experience
   Super-App onboarding design system (Login / Signup / Forgot / Onboarding)
   Scoped under .ize_auth so it never leaks into the rest of the welcome theme.
   Light + Dark, glassmorphism, floating ecosystem, mobile-first, lightweight.
   ========================================================================= */

/* ---------------------------------------------------------------- Tokens */
.ize_auth {
  /* Brand palette */
  --ize-blue:        #2D6CFF;   /* Primary  — IzeChat Blue          */
  --ize-blue-700:    #1B4FD8;
  --ize-cyan:        #29D3E6;   /* Secondary — Soft Cyan            */
  --ize-emerald:     #12B981;   /* Accent   — Emerald Green         */
  --ize-violet:      #7C5CFF;

  --ize-grad: linear-gradient(135deg, #2D6CFF 0%, #29D3E6 100%);
  --ize-grad-soft: linear-gradient(135deg, rgba(45,108,255,.12), rgba(41,211,230,.12));

  /* Surfaces (light) */
  --ize-bg:          #eef3ff;
  --ize-bg-2:        #f7faff;
  --ize-surface:     #ffffff;
  --ize-glass:       rgba(255,255,255,.72);
  --ize-glass-brd:   rgba(255,255,255,.85);
  --ize-field:       #f1f5fb;
  --ize-field-brd:   #e2e8f5;

  /* Text */
  --ize-ink:         #0f1b3d;
  --ize-ink-2:       #5a6783;
  --ize-ink-3:       #8a96b3;

  /* FX */
  --ize-shadow:      0 18px 50px -12px rgba(20, 43, 104, .28);
  --ize-shadow-sm:   0 6px 18px -8px rgba(20, 43, 104, .25);
  --ize-radius:      22px;
  --ize-radius-sm:   14px;
  --ize-ring:        rgba(45,108,255,.18);

  --ize-ease: cubic-bezier(.22,.61,.36,1);

  font-family: "Plus Jakarta Sans", "Readex Pro", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ize-ink);
}

/* Dark theme — driven by the site's night-mode cookie (.is-dark) or the OS */
.ize_auth.is-dark {
  --ize-bg:        #0b1020;
  --ize-bg-2:      #0e1530;
  --ize-surface:   #141c34;
  --ize-glass:     rgba(22,30,56,.66);
  --ize-glass-brd: rgba(120,140,210,.18);
  --ize-field:     rgba(255,255,255,.05);
  --ize-field-brd: rgba(255,255,255,.10);
  --ize-ink:       #eef2ff;
  --ize-ink-2:     #aab6da;
  --ize-ink-3:     #7a86ad;
  --ize-shadow:    0 24px 60px -16px rgba(0,0,0,.6);
  --ize-shadow-sm: 0 8px 24px -10px rgba(0,0,0,.55);
  --ize-ring:      rgba(41,211,230,.28);
}

/* ----------------------------------------------------------- Page shell */
body:has(.ize_auth) { background: var(--ize-bg) !important; }

.ize_auth {
  position: relative;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 12% 8%,  rgba(45,108,255,.20), transparent 60%),
    radial-gradient(55% 50% at 92% 12%, rgba(41,211,230,.18), transparent 60%),
    radial-gradient(60% 60% at 80% 96%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(50% 50% at 8% 92%,  rgba(18,185,129,.14), transparent 60%),
    var(--ize-bg);
}
.ize_auth * { box-sizing: border-box; }

/* Slow drifting aurora behind the cards */
.ize_aurora {
  position: absolute; inset: -20% -10% auto -10%; height: 70vh;
  background: var(--ize-grad);
  filter: blur(120px); opacity: .14; z-index: 0;
  animation: izeAurora 18s var(--ize-ease) infinite alternate;
  pointer-events: none;
}
@keyframes izeAurora {
  0%   { transform: translate3d(-4%, -2%, 0) scale(1);   opacity:.12; }
  100% { transform: translate3d(6%, 4%, 0)  scale(1.15); opacity:.20; }
}

.ize_shell {
  position: relative; z-index: 2;
  flex: 1; width: 100%;
  max-width: 1120px; margin: 0 auto;
  padding: 28px 20px 40px;
  display: grid; grid-template-columns: 1.05fr .95fr;
  align-items: center; gap: 48px;
}
.ize_shell.ize_single { grid-template-columns: 1fr; max-width: 480px; }

/* ------------------------------------------------- Ecosystem showcase */
.ize_eco {
  position: relative; z-index: 2;
  min-height: 460px;
  display: flex; flex-direction: column; justify-content: center;
}
.ize_eco_brand { display:flex; align-items:center; gap:12px; margin-bottom: 26px; }
.ize_eco_brand img { height: 42px; width:auto; }
.ize_eco_tag {
  font-size: 12px; font-weight: 700; letter-spacing:.14em; text-transform: uppercase;
  color: var(--ize-blue);
  background: var(--ize-grad-soft);
  padding: 5px 12px; border-radius: 999px;
}
.ize_eco_h {
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; font-weight: 800;
  letter-spacing: -.02em; margin: 0 0 14px;
}
.ize_eco_h .grad {
  background: var(--ize-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ize_eco_p { font-size: 16px; line-height: 1.6; color: var(--ize-ink-2); max-width: 440px; margin: 0 0 30px; }

/* Floating super-app cards */
.ize_eco_stage { position: relative; height: 230px; }
.ize_float {
  position: absolute; display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 16px;
  background: var(--ize-glass);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--ize-glass-brd);
  box-shadow: var(--ize-shadow-sm);
  will-change: transform;
  animation: izeFloat 6s var(--ize-ease) infinite;
}
.ize_float .ic {
  width: 38px; height: 38px; flex: none; border-radius: 11px; display:grid; place-items:center;
  font-size: 19px; color:#fff;
}
.ize_float .tx b { display:block; font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.ize_float .tx span { font-size: 11.5px; color: var(--ize-ink-3); }

.ize_float.f_chat   { top: 6%;   left: 2%;   animation-delay: 0s;   }
.ize_float.f_shop   { top: 0%;   right: 4%;  animation-delay: 1.1s; }
.ize_float.f_pay    { top: 46%;  left: 18%;  animation-delay: .6s;  }
.ize_float.f_comm   { bottom: 4%; right: 8%; animation-delay: 1.6s; }
.ize_float.f_ai     { bottom: 0%; left: 0%;  animation-delay: 2.1s; }

.ize_float.f_chat .ic { background: linear-gradient(135deg,#2D6CFF,#5B8Cff); }
.ize_float.f_shop .ic { background: linear-gradient(135deg,#12B981,#34d39e); }
.ize_float.f_pay  .ic { background: linear-gradient(135deg,#7C5CFF,#a07bff); }
.ize_float.f_comm .ic { background: linear-gradient(135deg,#29D3E6,#22b8d6); }
.ize_float.f_ai   .ic { background: linear-gradient(135deg,#FF7A59,#ff9d59); }

@keyframes izeFloat {
  0%,100% { transform: translate3d(0,0,0); }
  50%     { transform: translate3d(0,-14px,0); }
}

/* ----------------------------------------------------------- Glass card */
.ize_panel { position: relative; z-index: 2; width: 100%; }
.ize_card {
  position: relative;
  width: 100%; max-width: 440px; margin: 0 auto;
  background: var(--ize-glass);
  -webkit-backdrop-filter: blur(22px) saturate(165%); backdrop-filter: blur(22px) saturate(165%);
  border: 1px solid var(--ize-glass-brd);
  border-radius: var(--ize-radius);
  box-shadow: var(--ize-shadow);
  padding: 34px 30px 30px;
  animation: izeRise .6s var(--ize-ease) both;
}
@keyframes izeRise { from { opacity:0; transform: translate3d(0,22px,0); } to { opacity:1; transform:none; } }

.ize_logo { text-align:center; margin-bottom: 18px; }
.ize_logo img { height: 46px; width:auto; }
.ize_h { font-size: 25px; font-weight: 800; letter-spacing:-.02em; text-align:center; margin: 0 0 6px; }
.ize_sub { font-size: 14.5px; color: var(--ize-ink-2); text-align:center; margin: 0 0 22px; }

/* Inline notices / errors */
.ize_notice {
  display:flex; align-items:center; gap:9px; margin: 0 0 16px; padding: 11px 14px;
  border-radius: var(--ize-radius-sm); font-size: 13.5px; line-height:1.4;
  background: rgba(18,185,129,.12); border:1px solid rgba(18,185,129,.28); color:#0c8c63;
  animation: izeRise .5s var(--ize-ease) both;
}
.is-dark .ize_notice { color:#5fe3b6; }
.ize_errors:not(:empty) {
  display:flex; align-items:center; gap:9px; margin: 0 0 16px; padding: 11px 14px;
  border-radius: var(--ize-radius-sm); font-size: 13.5px; line-height: 1.4;
  background: rgba(244,63,94,.10); border:1px solid rgba(244,63,94,.30); color:#e11d48;
  animation: izeShake .4s var(--ize-ease) both;
}
.ize_errors i { display:none; }
@keyframes izeShake {
  0%,100% { transform:translateX(0); } 20%,60% { transform:translateX(-5px); } 40%,80% { transform:translateX(5px); }
}

/* ---------------------------------------------------------------- Fields */
.ize_field { position: relative; margin-bottom: 15px; }
.ize_field > input,
.ize_field > select,
.ize_field > textarea {
  width: 100%; height: 54px;
  padding: 0 44px 0 46px;
  border: 1.5px solid var(--ize-field-brd);
  border-radius: var(--ize-radius-sm);
  background: var(--ize-field);
  color: var(--ize-ink); font-size: 15px; font-family: inherit;
  transition: border-color .18s var(--ize-ease), box-shadow .18s var(--ize-ease), background .18s var(--ize-ease);
  -webkit-appearance: none; appearance: none;
}
.ize_field > textarea { height: auto; min-height: 96px; padding: 14px 16px; resize: vertical; }
.ize_field > select { padding-right: 40px; cursor: pointer; }
.ize_field > input::placeholder,
.ize_field > textarea::placeholder { color: var(--ize-ink-3); }
.ize_field > input:focus,
.ize_field > select:focus,
.ize_field > textarea:focus {
  outline: none; border-color: var(--ize-blue);
  background: var(--ize-surface);
  box-shadow: 0 0 0 4px var(--ize-ring);
}
.ize_field .ize_ic {
  position:absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--ize-ink-3); pointer-events:none;
  transition: color .18s var(--ize-ease);
}
.ize_field > input:focus ~ .ize_ic,
.ize_field > select:focus ~ .ize_ic { color: var(--ize-blue); }
.ize_field.no-icon > input,
.ize_field.no-icon > select { padding-left: 16px; }

.ize_toggle {
  position:absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display:grid; place-items:center;
  color: var(--ize-ink-3); cursor: pointer; border-radius: 8px;
  transition: color .15s, background .15s;
}
.ize_toggle:hover { color: var(--ize-ink); background: rgba(45,108,255,.08); }
.ize_toggle.is-on { color: var(--ize-blue); }

/* Phone field (country code + number) — nested controls need explicit styling
   because the base `.ize_field > input/select` rules only match direct children. */
.ize_field.phone { display:flex; gap: 8px; }
.ize_field.phone .ccode { width: 96px; flex: none; }
.ize_field.phone .pnum { flex: 1; }
.ize_field.phone .ccode select,
.ize_field.phone .pnum input {
  width: 100%; height: 54px;
  border: 1.5px solid var(--ize-field-brd); border-radius: var(--ize-radius-sm);
  background: var(--ize-field); color: var(--ize-ink); font-size: 15px; font-family: inherit;
  transition: border-color .18s var(--ize-ease), box-shadow .18s var(--ize-ease), background .18s var(--ize-ease);
}
.ize_field.phone .ccode select { padding: 0 8px; text-align:center; cursor:pointer; }
.ize_field.phone .pnum input { padding: 0 16px; }
.ize_field.phone .ccode select:focus,
.ize_field.phone .pnum input:focus {
  outline:none; border-color: var(--ize-blue); background: var(--ize-surface); box-shadow: 0 0 0 4px var(--ize-ring);
}

/* select chevron */
.ize_select_wrap::after {
  content:""; position:absolute; right: 18px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--ize-ink-3); border-bottom: 2px solid var(--ize-ink-3);
  transform: translateY(-65%) rotate(45deg); pointer-events:none;
}

/* Remember / forgot row */
.ize_row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin: 4px 0 20px; font-size: 13.5px; }
.ize_check { display:flex; align-items:center; gap: 9px; color: var(--ize-ink-2); cursor:pointer; user-select:none; }
.ize_check input { position:absolute; opacity:0; width:0; height:0; }
.ize_check .box {
  width: 19px; height: 19px; border-radius: 6px; flex:none;
  border: 1.5px solid var(--ize-field-brd); background: var(--ize-field);
  display:grid; place-items:center; transition: all .15s var(--ize-ease);
}
.ize_check .box svg { width: 12px; height:12px; color:#fff; opacity:0; transform: scale(.4); transition: all .15s var(--ize-ease); }
.ize_check input:checked + .box { background: var(--ize-grad); border-color: transparent; }
.ize_check input:checked + .box svg { opacity:1; transform: scale(1); }
.ize_check input:focus-visible + .box { box-shadow: 0 0 0 4px var(--ize-ring); }
.ize_link { color: var(--ize-blue); font-weight: 600; text-decoration:none; }
.ize_link:hover { color: var(--ize-blue-700); text-decoration: underline; }

/* ---------------------------------------------------------------- Button */
.ize_btn {
  position: relative; width:100%; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--ize-radius-sm);
  background: var(--ize-grad); background-size: 180% 180%;
  color:#fff; font-size: 15.5px; font-weight: 700; font-family: inherit;
  text-align: center; text-decoration: none; line-height: 1;
  cursor:pointer; overflow:hidden;
  box-shadow: 0 12px 26px -10px rgba(45,108,255,.65);
  transition: transform .12s var(--ize-ease), box-shadow .2s var(--ize-ease), filter .2s;
}
.ize_btn:hover { color:#fff; }
.ize_btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -10px rgba(45,108,255,.7); animation: izeShift 3s ease infinite; }
.ize_btn:active { transform: translateY(0) scale(.985); }
.ize_btn:disabled { filter: grayscale(.35) opacity(.65); cursor: not-allowed; box-shadow:none; transform:none; }
.ize_btn .lbl { position: relative; z-index:1; }
.ize_btn::after { /* sheen */
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ize-ease);
}
.ize_btn:hover::after { left: 130%; }
@keyframes izeShift { 0%,100%{ background-position:0% 50%;} 50%{ background-position:100% 50%; } }

.ize_btn.is-loading .lbl { visibility:hidden; }
.ize_btn.is-loading::before {
  content:""; position:absolute; inset:0; margin:auto; width: 22px; height: 22px; z-index:2;
  border: 2.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%;
  animation: izeSpin .7s linear infinite;
}
@keyframes izeSpin { to { transform: rotate(360deg); } }

.ize_btn.ghost {
  background: transparent; color: var(--ize-ink); border: 1.5px solid var(--ize-field-brd);
  box-shadow:none;
}
.ize_btn.ghost:hover { background: rgba(45,108,255,.06); border-color: var(--ize-blue); transform: translateY(-2px); animation:none; }
.ize_btn.ghost::after { display:none; }

/* ------------------------------------------------------- Social + foot */
.ize_divider { display:flex; align-items:center; gap:14px; margin: 22px 0 18px; color: var(--ize-ink-3); font-size: 12.5px; font-weight:600; }
.ize_divider::before, .ize_divider::after { content:""; flex:1; height:1px; background: var(--ize-field-brd); }
.ize_social { display:flex; justify-content:center; gap: 12px; }
.ize_social a {
  width: 50px; height: 50px; border-radius: 14px; display:grid; place-items:center;
  background: var(--ize-surface); border: 1.5px solid var(--ize-field-brd);
  transition: transform .15s var(--ize-ease), box-shadow .15s, border-color .15s;
}
.is-dark .ize_social a { background: var(--ize-field); }
.ize_social a:hover { transform: translateY(-3px); box-shadow: var(--ize-shadow-sm); border-color: transparent; }
.ize_social a svg { width: 22px; height: 22px; }
.ize_social a.fb svg { fill:#1877F2; } .ize_social a.gg svg { fill:#EA4335; } .ize_social a.tw svg { fill:#1DA1F2; }

.ize_foot { text-align:center; margin-top: 22px; font-size: 14px; color: var(--ize-ink-2); }
.ize_foot a { color: var(--ize-blue); font-weight: 700; text-decoration:none; }
.ize_foot a:hover { text-decoration: underline; }

/* Trust indicators */
.ize_trust { display:flex; flex-wrap:wrap; justify-content:center; gap: 8px 16px; margin-top: 20px; }
.ize_trust span { display:inline-flex; align-items:center; gap:6px; font-size: 12px; font-weight:600; color: var(--ize-ink-3); }
.ize_trust svg { width: 15px; height:15px; color: var(--ize-emerald); }

/* ----------------------------------------------------- Password helpers */
.ize_strength { margin: -4px 0 14px; }
.ize_strength_bar { height: 6px; border-radius: 999px; background: var(--ize-field-brd); overflow:hidden; }
.ize_strength_bar i { display:block; height:100%; width:0; border-radius:999px; transition: width .3s var(--ize-ease), background .3s; }
.ize_strength.s1 i { width:25%;  background:#f43f5e; }
.ize_strength.s2 i { width:50%;  background:#f59e0b; }
.ize_strength.s3 i { width:75%;  background:#3b82f6; }
.ize_strength.s4 i { width:100%; background:#12B981; }
.ize_strength_lbl { margin-top:6px; font-size: 12px; font-weight:600; color: var(--ize-ink-3); }

.helper-text { list-style:none; margin: -4px 0 14px; padding: 12px 14px; border-radius: var(--ize-radius-sm);
  background: var(--ize-field); border:1px solid var(--ize-field-brd); font-size: 12.5px; display:none; }
.helper-text.is-visible { display:block; }
.helper-text li { position: relative; padding-left: 22px; color: var(--ize-ink-3); margin-bottom:5px; }
.helper-text li:last-child { margin-bottom:0; }
.helper-text li::before { content:"○"; position:absolute; left:0; color: var(--ize-ink-3); }
.helper-text li.valid { color: var(--ize-emerald); }
.helper-text li.valid::before { content:"✓"; color: var(--ize-emerald); }

.auth-match { display:flex; align-items:center; gap:8px; margin:-4px 0 14px; padding: 9px 14px; border-radius: var(--ize-radius-sm); font-size: 13px; font-weight:600; }
.auth-match[hidden] { display:none; }
.auth-match-icon { width:18px; height:18px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:11px; }
.auth-match.valid   { background: rgba(18,185,129,.12); color:#0c8c63; } .auth-match.valid .auth-match-icon { background: var(--ize-emerald); }
.auth-match.invalid { background: rgba(244,63,94,.10); color:#e11d48; }   .auth-match.invalid .auth-match-icon { background:#f43f5e; }

/* --------------------------------------------------------- Register steps */
.ize_steps_head { margin-bottom: 22px; }
.ize_progress { height:6px; border-radius:999px; background: var(--ize-field-brd); overflow:hidden; }
.ize_progress i { display:block; height:100%; border-radius:999px; background: var(--ize-grad); width: 25%; transition: width .4s var(--ize-ease); }
.ize_steps_meta { display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; }
.ize_steps_meta .step_no { font-size:12.5px; font-weight:700; color: var(--ize-blue); }
.ize_steps_meta .step_nm { font-size:12.5px; color: var(--ize-ink-3); }

.ize_steps { position: relative; }
.ize_step {
  position:absolute; top:0; left:0; right:0; height:0; overflow:hidden;
  opacity:0; transform: translateX(26px); pointer-events:none;
  transition: opacity .35s var(--ize-ease), transform .35s var(--ize-ease);
}
.ize_step.is-active {
  position: relative; height:auto; overflow:visible; opacity:1; transform:none; pointer-events:auto;
}
.ize_step.is-prev { transform: translateX(-26px); }
.ize_step_title { font-size: 18px; font-weight: 800; letter-spacing:-.01em; margin: 0 0 4px; }
.ize_step_sub { font-size: 13.5px; color: var(--ize-ink-2); margin: 0 0 18px; }
.ize_nav { display:flex; gap: 12px; margin-top: 6px; }
.ize_nav .ize_btn { flex:1; }
.ize_nav .ize_btn.back { flex: 0 0 52px; padding:0; }

/* interests chips */
.ize_chips { display:flex; flex-wrap:wrap; gap:9px; margin-bottom: 16px; }
.ize_chips label { cursor:pointer; }
.ize_chips input { position:absolute; opacity:0; }
.ize_chip {
  display:inline-flex; align-items:center; gap:6px; padding: 9px 14px; border-radius:999px;
  background: var(--ize-field); border:1.5px solid var(--ize-field-brd); color: var(--ize-ink-2);
  font-size: 13px; font-weight:600; transition: all .15s var(--ize-ease);
}
.ize_chips input:checked + .ize_chip { background: var(--ize-grad-soft); border-color: var(--ize-blue); color: var(--ize-blue); }

/* avatar uploader */
.ize_avatar { display:flex; flex-direction:column; align-items:center; gap:10px; margin: 4px 0 18px; }
.ize_avatar_ring {
  width: 96px; height:96px; border-radius:50%; padding:3px; background: var(--ize-grad);
  cursor:pointer; position:relative;
}
.ize_avatar_ring img, .ize_avatar_ring .ph {
  width:100%; height:100%; border-radius:50%; object-fit:cover; background: var(--ize-field);
  display:grid; place-items:center; color: var(--ize-ink-3);
}
.ize_avatar_ring .ph svg { width: 34px; height:34px; }
.ize_avatar_ring .cam { position:absolute; right:2px; bottom:2px; width:30px; height:30px; border-radius:50%;
  background: var(--ize-blue); color:#fff; display:grid; place-items:center; border:3px solid var(--ize-surface); }
.ize_avatar_ring .cam svg { width:15px; height:15px; }
.ize_avatar small { color: var(--ize-ink-3); font-size:12px; }

/* terms */
.ize_terms { display:flex; align-items:flex-start; gap:10px; margin: 4px 0 18px; font-size: 13px; color: var(--ize-ink-2); }
.ize_terms .ize_check .box { margin-top:1px; }
.ize_terms a { color: var(--ize-blue); font-weight:600; text-decoration:none; }
.ize_terms a:hover { text-decoration:underline; }

/* ------------------------------------------------------------- OTP code */
.ize_otp { display:flex; justify-content:center; gap: 10px; margin: 8px 0 18px; direction:ltr; }
.ize_otp input {
  width: 52px; height: 60px; text-align:center; font-size: 24px; font-weight:800;
  border:1.5px solid var(--ize-field-brd); border-radius: var(--ize-radius-sm);
  background: var(--ize-field); color: var(--ize-ink);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.ize_otp input:focus { outline:none; border-color: var(--ize-blue); box-shadow: 0 0 0 4px var(--ize-ring); transform: translateY(-2px); }
.ize_otp input.filled { border-color: var(--ize-blue); }
.ize_resend { text-align:center; font-size: 13px; color: var(--ize-ink-3); margin-top:4px; }
.ize_resend a { color: var(--ize-blue); font-weight:700; }

/* ----------------------------------------------------------- Onboarding */
.ize_onb {
  position: fixed; inset:0; z-index: 60; display:flex; flex-direction:column;
  background:
    radial-gradient(70% 60% at 20% 6%,  rgba(45,108,255,.30), transparent 60%),
    radial-gradient(60% 55% at 90% 14%, rgba(41,211,230,.26), transparent 60%),
    radial-gradient(70% 60% at 80% 98%, rgba(124,92,255,.24), transparent 60%),
    var(--ize-bg);
  padding: max(28px, env(safe-area-inset-top)) 22px max(26px, env(safe-area-inset-bottom));
  animation: izeRise .4s var(--ize-ease) both;
}
.ize_onb[hidden] { display:none; }
.ize_onb_top { display:flex; justify-content:space-between; align-items:center; }
.ize_onb_top img { height: 34px; }
.ize_onb_skip { background:none; border:0; color: var(--ize-ink-2); font-size:14px; font-weight:600; cursor:pointer; padding:8px; }

.ize_onb_track { flex:1; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.ize_onb_track::-webkit-scrollbar { display:none; }
.ize_slide {
  flex: 0 0 100%; scroll-snap-align:center; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding: 10px 6px; gap: 8px;
}
.ize_slide_art {
  position: relative; width: min(78vw, 300px); height: min(78vw, 300px); margin-bottom: 14px;
  display:grid; place-items:center;
}
.ize_slide_blob { position:absolute; inset:0; border-radius: 38% 62% 58% 42% / 48% 40% 60% 52%;
  background: var(--ize-grad); opacity:.16; animation: izeMorph 8s var(--ize-ease) infinite; }
@keyframes izeMorph {
  0%,100% { border-radius: 38% 62% 58% 42% / 48% 40% 60% 52%; transform: rotate(0); }
  50%     { border-radius: 58% 42% 38% 62% / 60% 55% 45% 40%; transform: rotate(8deg); }
}
.ize_slide_emoji { font-size: clamp(64px, 22vw, 104px); filter: drop-shadow(0 12px 20px rgba(20,43,104,.22)); }
.ize_slide_chips { position:absolute; inset:0; pointer-events:none; }
.ize_slide_chips .mini {
  position:absolute; padding: 8px 11px; border-radius: 13px; font-size: 12px; font-weight:700;
  background: var(--ize-glass); border:1px solid var(--ize-glass-brd); box-shadow: var(--ize-shadow-sm);
  display:flex; align-items:center; gap:6px; animation: izeFloat 5s var(--ize-ease) infinite;
}
.ize_slide_chips .mini.m1 { top: 4%; left: -4%; }
.ize_slide_chips .mini.m2 { bottom: 10%; right: -6%; animation-delay:.8s; }
.ize_slide_chips .mini b { color: var(--ize-blue); }

.ize_slide h2 { font-size: clamp(22px, 6vw, 28px); font-weight:800; letter-spacing:-.02em; margin: 4px 0 0; }
.ize_slide p { font-size: 15px; line-height:1.55; color: var(--ize-ink-2); max-width: 340px; margin: 6px auto 0; }

.ize_onb_dots { display:flex; justify-content:center; gap:8px; margin: 18px 0; }
.ize_onb_dots i { width:8px; height:8px; border-radius:999px; background: var(--ize-field-brd); transition: all .3s var(--ize-ease); }
.ize_onb_dots i.on { width:26px; background: var(--ize-grad); }

.ize_onb_actions { display:flex; flex-direction:column; gap: 11px; max-width: 440px; width:100%; margin:0 auto; }
.ize_onb_actions .ize_btn { height: 52px; }
.ize_onb_final h2 { background: var(--ize-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ize_onb_pills { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:14px; }
.ize_onb_pills span { font-size:13px; font-weight:700; padding:7px 13px; border-radius:999px; background: var(--ize-glass); border:1px solid var(--ize-glass-brd); }

/* Success splash */
.ize_success { text-align:center; padding: 10px 0; }
.ize_success_ring { width: 92px; height:92px; margin: 0 auto 18px; border-radius:50%; display:grid; place-items:center;
  background: rgba(18,185,129,.14); animation: izePop .5s var(--ize-ease) both; }
.ize_success_ring svg { width:46px; height:46px; color: var(--ize-emerald); }
@keyframes izePop { 0%{ transform:scale(.5); opacity:0; } 60%{ transform:scale(1.08); } 100%{ transform:scale(1); opacity:1; } }
.ize_quick { display:grid; grid-template-columns: repeat(2,1fr); gap:10px; margin: 20px 0 6px; }
.ize_quick a { display:flex; flex-direction:column; align-items:center; gap:8px; padding: 16px 8px; border-radius: var(--ize-radius-sm);
  background: var(--ize-field); border:1.5px solid var(--ize-field-brd); color: var(--ize-ink); font-size:13px; font-weight:700;
  transition: transform .15s var(--ize-ease), border-color .15s; }
.ize_quick a:hover { transform: translateY(-3px); border-color: var(--ize-blue); }
.ize_quick a .qic { width: 40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:20px; color:#fff; }

/* skeleton loader */
.ize_skel { background: linear-gradient(90deg, var(--ize-field) 25%, rgba(255,255,255,.5) 37%, var(--ize-field) 63%);
  background-size: 400% 100%; animation: izeSkel 1.3s ease infinite; border-radius: 8px; }
@keyframes izeSkel { 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

/* recaptcha + legacy bits centering */
.ize_card .g-recaptcha { margin: 0 0 14px; display:flex; justify-content:center; }
.ize_card .form-group { margin: 0; }
.ize_hide { display:none !important; }

/* ---------------------------------------------------------- Responsive */
@media (max-width: 920px) {
  .ize_shell { grid-template-columns: 1fr; max-width: 480px; gap: 8px; padding-top: 20px; }
  .ize_eco { display: none; }            /* showcase folds into the card header on phones */
  .ize_eco.mobile_lite { display:flex; min-height:auto; text-align:center; align-items:center; margin-bottom: 6px; }
  .ize_eco.mobile_lite .ize_eco_stage,
  .ize_eco.mobile_lite .ize_eco_p { display:none; }
  .ize_eco.mobile_lite .ize_eco_brand { justify-content:center; margin-bottom: 14px; }
  .ize_eco.mobile_lite .ize_eco_h { font-size: 24px; }
}
@media (max-width: 480px) {
  .ize_card { padding: 26px 20px 24px; border-radius: 20px; box-shadow: var(--ize-shadow-sm); }
  .ize_h { font-size: 22px; }
  .ize_otp input { width: 46px; height: 54px; font-size: 21px; }
  .ize_quick { grid-template-columns: repeat(2,1fr); }
}

/* --------------------------------------------------- Motion preference */
@media (prefers-reduced-motion: reduce) {
  .ize_auth *, .ize_onb * { animation: none !important; transition: none !important; }
}

/* OS dark fallback when night cookie isn't set */
@media (prefers-color-scheme: dark) {
  .ize_auth:not(.is-light) {
    --ize-bg:#0b1020; --ize-bg-2:#0e1530; --ize-surface:#141c34;
    --ize-glass:rgba(22,30,56,.66); --ize-glass-brd:rgba(120,140,210,.18);
    --ize-field:rgba(255,255,255,.05); --ize-field-brd:rgba(255,255,255,.10);
    --ize-ink:#eef2ff; --ize-ink-2:#aab6da; --ize-ink-3:#7a86ad;
    --ize-shadow:0 24px 60px -16px rgba(0,0,0,.6); --ize-shadow-sm:0 8px 24px -10px rgba(0,0,0,.55);
    --ize-ring:rgba(41,211,230,.28);
  }
}