/* Locked from docs/previews/auth-modal.html — DO NOT restyle */
    /* —— Shared auth shell —— */
    .dzd-auth {
      position: absolute;
      inset: 0;
      z-index: 40;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 14px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 220ms ease, visibility 220ms ease;
    }

    .dzd-auth.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .dzd-auth__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(12, 10, 28, 0.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .dzd-auth__dialog {
      position: relative;
      z-index: 1;
      width: min(420px, 100%);
      /* Content-sized height; viewport cap only — never force a tall fixed box. */
      height: auto;
      max-height: calc(100dvh - 48px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      /* Top padding clears the close control without a large empty tabs margin */
      padding: 52px 24px 18px;
      border-radius: 24px;
      background: var(--dzd-color-surface);
      border: 1px solid var(--dzd-color-border, #d8dae3);
      box-shadow: var(--dzd-shadow-elevated);
      transform: translateY(14px) scale(0.97);
      opacity: 0;
      transition:
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 240ms ease;
    }

    .dzd-auth.is-open .dzd-auth__dialog {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .dzd-auth__close {
      position: absolute;
      top: 14px;
      inset-inline-end: 14px;
      z-index: 3;
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: var(--dzd-radius-pill);
      background: var(--dzd-color-surface-tint);
      color: var(--dzd-color-text-muted);
      cursor: pointer;
    }

    .dzd-auth__close:hover {
      background: var(--dzd-color-accent-soft-strong);
      color: var(--dzd-color-accent);
    }

    /* Desktop/Tablet: no brand */
    .dzd-auth__brand { display: none !important; }

    .dzd-auth__tabs {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
      padding: 4px;
      flex: 0 0 auto;
      margin: 0 0 14px;
      border-radius: var(--dzd-radius-pill);
      background: var(--dzd-color-surface-tint);
      border: 1px solid var(--dzd-color-border);
    }

    .dzd-auth__tab-indicator {
      position: absolute;
      top: 4px;
      bottom: 4px;
      left: 4px;
      width: calc(50% - 4px);
      border-radius: var(--dzd-radius-pill);
      background: #fff;
      box-shadow: var(--dzd-shadow-card);
      transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
    }

    .dzd-auth[data-tab="register"] .dzd-auth__tab-indicator {
      transform: translateX(100%);
    }

    .dzd-auth__tab {
      position: relative;
      z-index: 1;
      min-height: 40px;
      border: 0;
      border-radius: var(--dzd-radius-pill);
      background: transparent;
      color: var(--dzd-color-text-muted);
      font-size: var(--dzd-fs-md, 15px);
      font-weight: 750;
      cursor: pointer;
    }

    .dzd-auth__tab[aria-selected="true"] { color: var(--dzd-color-text); }

    .dzd-auth__panel[hidden] { display: none !important; }

    .dzd-auth__body {
      flex: 0 1 auto;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }

    .dzd-auth__body::-webkit-scrollbar {
      width: 6px;
    }

    .dzd-auth__body::-webkit-scrollbar-thumb {
      background: rgba(27, 23, 52, 0.18);
      border-radius: 999px;
    }

    .dzd-auth__footer {
      flex: 0 0 auto;
    }

    .dzd-auth__form { display: grid; gap: 12px; }

    .dzd-auth__field { display: grid; gap: 6px; }

    .dzd-auth__label {
      font-size: var(--dzd-fs-sm, 14px);
      font-weight: 700;
      color: var(--dzd-color-text-muted-strong);
    }

    .dzd-auth__input {
      width: 100%;
      min-height: 48px;
      padding: 0 14px;
      border-radius: var(--dzd-radius-sm);
      border: 1px solid var(--dzd-color-border);
      background: #fff;
      color: var(--dzd-color-text);
      font-size: var(--dzd-fs-base, 16px);
    }

    .dzd-auth__input:focus {
      outline: none;
      border-color: #c9bff5;
      box-shadow: var(--dzd-shadow-focus);
    }

    .dzd-auth__input.is-invalid {
      border-color: #f0b4ae;
      background: #fff8f7;
    }

    .dzd-auth__pass {
      position: relative;
    }

    .dzd-auth__pass .dzd-auth__input {
      padding-inline-end: 52px;
    }

    .dzd-auth__toggle-pass {
      position: absolute;
      top: 50%;
      inset-inline-end: 8px;
      transform: translateY(-50%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      min-width: 36px;
      min-height: 36px;
      padding: 0;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--dzd-color-text-muted, #6b6580);
      cursor: pointer;
      line-height: 0;
    }

    .dzd-auth__toggle-pass:hover,
    .dzd-auth__toggle-pass:focus-visible {
      color: var(--dzd-color-accent);
      outline: none;
    }

    .dzd-auth__toggle-pass:focus-visible {
      box-shadow: 0 0 0 3px rgba(94, 67, 214, 0.18);
    }

    .dzd-auth__pass-icon.is-hidden {
      display: none !important;
    }

    .dzd-auth__forgot-inline {
      display: block;
      width: 100%;
      margin: 8px 0 0;
      padding: 0;
      border: 0;
      background: none;
      color: var(--dzd-color-accent);
      font: inherit;
      font-size: var(--dzd-fs-sm, 15px);
      font-weight: 750;
      text-align: end;
      cursor: pointer;
      min-height: 36px;
    }

    .dzd-auth__forgot-inline:hover,
    .dzd-auth__forgot-inline:focus-visible {
      text-decoration: underline;
      outline: none;
    }

    .dzd-auth__phone {
      display: flex;
      align-items: stretch;
      min-height: 48px;
      border-radius: var(--dzd-radius-sm);
      border: 1px solid var(--dzd-color-border);
      background: #fff;
      overflow: hidden;
    }

    .dzd-auth__phone:focus-within {
      border-color: #c9bff5;
      box-shadow: var(--dzd-shadow-focus);
    }

    .dzd-auth__phone.is-invalid {
      border-color: #f0b4ae;
      background: #fff8f7;
    }

    .dzd-auth__phone-cc {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0 12px;
      border-inline-end: 1px solid var(--dzd-color-border);
      background: var(--dzd-color-surface-tint);
      font-size: var(--dzd-fs-sm, 15px);
      font-weight: 700;
      white-space: nowrap;
    }

    .dzd-auth__phone .dzd-auth__input {
      border: 0;
      border-radius: 0;
      box-shadow: none;
      background: transparent;
      min-height: 46px;
    }

    .dzd-auth__row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .dzd-auth__check {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: var(--dzd-fs-sm, 15px);
      color: var(--dzd-color-text-muted-strong);
      cursor: pointer;
    }

    .dzd-auth__check input {
      width: 16px;
      height: 16px;
      accent-color: var(--dzd-color-accent);
    }

    .dzd-auth__error {
      display: none;
      margin: 0 0 14px;
      padding: 10px 12px;
      border-radius: var(--dzd-radius-sm);
      border: 1px solid #f0c7c2;
      background: var(--dzd-color-danger-soft);
      color: var(--dzd-color-danger);
      font-size: var(--dzd-fs-sm, 15px);
      font-weight: 600;
    }

    .dzd-auth__error.is-visible { display: block !important; }

    .dzd-auth__submit {
      width: 100%;
      min-height: 48px;
      margin-top: 4px;
      border: 0;
      border-radius: var(--dzd-radius-sm);
      background: var(--dzd-color-accent);
      color: #fff;
      font-size: var(--dzd-fs-base, 16px);
      font-weight: 800;
      box-shadow: var(--dzd-shadow-accent);
      cursor: pointer;
    }

    .dzd-auth__submit:disabled { opacity: 0.7; cursor: wait; }

    .dzd-auth__submit-inner {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .dzd-auth__spinner {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.35);
      border-top-color: #fff;
      animation: dzd-auth-spin 0.7s linear infinite;
    }

    @keyframes dzd-auth-spin { to { transform: rotate(360deg); } }

    .dzd-auth__divider {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 12px;
      margin: 12px 0 10px;
      color: var(--dzd-color-text-muted);
      font-size: var(--dzd-fs-sm, 15px);
      font-weight: 650;
    }

    .dzd-auth__divider::before,
    .dzd-auth__divider::after {
      content: "";
      height: 1px;
      background: var(--dzd-color-border);
    }

    .dzd-auth__social {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
    }

    .dzd-auth__social-btn {
      position: relative;
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid var(--dzd-color-border);
      background: #fff;
      cursor: pointer;
      box-shadow: var(--dzd-shadow-card);
      transition: transform var(--dzd-ease), box-shadow var(--dzd-ease);
    }

    .dzd-auth__social-btn:hover,
    .dzd-auth__social-btn:focus-visible {
      transform: translateY(-2px);
      box-shadow: var(--dzd-shadow-hover);
      outline: none;
    }

    .dzd-auth__social-btn svg {
      width: 20px;
      height: 20px;
      display: block;
      flex-shrink: 0;
    }

    .dzd-auth__google-icon {
      width: 20px !important;
      height: 20px !important;
      max-width: 20px;
      max-height: 20px;
      aspect-ratio: 1 / 1;
      overflow: visible;
      shape-rendering: geometricPrecision;
    }

    .dzd-auth__social-btn--google {
      overflow: hidden;
    }

    .dzd-auth__social-btn--google svg {
      transform: none !important;
      object-fit: contain;
    }

    .dzd-auth__social-btn--apple {
      background: #000;
      border-color: #000;
      color: #fff;
    }

    .dzd-auth__social-btn--facebook {
      background: #1877f2;
      border-color: #1877f2;
      color: #fff;
    }

    .dzd-auth__tooltip {
      position: absolute;
      left: 50%;
      bottom: calc(100% + 10px);
      transform: translateX(-50%) translateY(4px);
      padding: 6px 10px;
      border-radius: 8px;
      background: #1f1a3d;
      color: #fff;
      font-size: var(--dzd-fs-xs, 14px);
      font-weight: 700;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
      z-index: 2;
    }

    .dzd-auth__tooltip::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: #1f1a3d;
    }

    .dzd-auth__social-btn:hover .dzd-auth__tooltip,
    .dzd-auth__social-btn:focus-visible .dzd-auth__tooltip,
    .dzd-auth__social-btn.is-tip .dzd-auth__tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    .dzd-auth__legal {
      margin: 12px 0 0;
      text-align: center;
      font-size: var(--dzd-fs-xs, 14px);
      line-height: 1.5;
      color: var(--dzd-color-text-muted);
    }

    .dzd-auth__legal a {
      color: var(--dzd-color-accent);
      font-weight: 700;
      text-decoration: none;
    }

    .dzd-auth__legal a:hover { text-decoration: underline; }

    /* Desktop-only / mobile-only visibility defaults */
    .dzd-auth__sheet-chrome,
    .dzd-auth__create,
    .dzd-auth__legal--mobile,
    .dzd-auth__back {
      display: none;
    }

    .dzd-auth__legal--desktop { display: block; }

    /* —— Mobile bottom sheet —— */
    @media (max-width: 767px) {
      .stage {
        min-height: 720px;
        max-width: 420px;
        margin: 0 auto;
        border-radius: 32px;
      }

      .fake-grid { grid-template-columns: 1fr; }
      .fake-header { flex-wrap: wrap; }
      .fake-search { order: 3; flex: 1 1 100%; }

      .dzd-auth {
        align-items: flex-end;
        justify-content: stretch;
        padding: 0;
      }

      .dzd-auth__dialog {
        width: 100%;
        height: auto;
        max-height: calc(100dvh - 12px);
        margin: 0;
        padding: 0 0 14px;
        border-radius: 22px 22px 0 0;
        border: 0;
        border-top: 1px solid rgba(230, 224, 255, 0.9);
        box-shadow: 0 -12px 40px rgba(20, 12, 60, 0.22);
        transform: translateY(108%);
        opacity: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: transform 460ms cubic-bezier(0.32, 0.72, 0, 1);
        will-change: transform;
      }

      .dzd-auth.is-open .dzd-auth__dialog {
        transform: translateY(0);
      }

      .dzd-auth__dialog.is-dragging {
        transition: none;
      }

      .dzd-auth__close,
      .dzd-auth__tabs,
      .dzd-auth__remember,
      .dzd-auth__legal--desktop {
        display: none !important;
      }

      .dzd-auth__sheet-chrome {
        display: block;
        flex: 0 0 auto;
        padding: 10px 18px 0;
        touch-action: none;
        cursor: grab;
      }

      .dzd-auth__handle {
        width: 42px;
        height: 4px;
        margin: 0 auto 14px;
        border-radius: 999px;
        background: #d8d2ef;
      }

      .dzd-auth__sheet-head {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 8px;
        min-height: 36px;
        margin-bottom: 16px;
      }

      .dzd-auth__sheet-title {
        margin: 0;
        font-size: 22px;
        font-weight: 800;
        letter-spacing: -0.03em;
        text-align: center;
        grid-column: 2;
      }

      .dzd-auth__forgot,
      .dzd-auth__back {
        border: 0;
        background: none;
        padding: 0;
        color: var(--dzd-color-accent);
        font-size: var(--dzd-fs-sm, 15px);
        font-weight: 750;
        cursor: pointer;
      }

      .dzd-auth__back {
        display: none;
        align-items: center;
        gap: 4px;
        justify-self: start;
        grid-column: 1;
      }

      .dzd-auth__forgot {
        justify-self: end;
        grid-column: 3;
      }

      .dzd-auth__sheet-title--login { display: block; }
      .dzd-auth__sheet-title--reg { display: none; }

      .dzd-auth[data-tab="register"] .dzd-auth__sheet-title--login { display: none; }
      .dzd-auth[data-tab="register"] .dzd-auth__sheet-title--reg { display: block; }
      .dzd-auth[data-tab="register"] .dzd-auth__forgot { display: none; }
      .dzd-auth[data-tab="register"] .dzd-auth__back { display: inline-flex; }

      .dzd-auth__body {
        flex: 0 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0 18px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-width: none;
      }

      .dzd-auth__body::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      .dzd-auth__slider {
        display: flex;
        width: 200%;
        transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
      }

      .dzd-auth[data-tab="register"] .dzd-auth__slider {
        transform: translate3d(-50%, 0, 0);
      }

      .dzd-auth__slide {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
        padding-bottom: 4px;
        box-sizing: border-box;
      }

      .dzd-auth__panel[hidden] {
        display: block !important;
      }

      .dzd-auth__create {
        display: block;
        width: 100%;
        margin-top: 14px;
        border: 0;
        background: none;
        color: var(--dzd-color-accent);
        font-size: 14px;
        font-weight: 750;
        text-align: center;
        cursor: pointer;
      }

      /* Shared secondary text actions (OTP / forgot back) — register “Already have an account?” removed */
      .dzd-auth__have-account {
        display: block;
        width: 100%;
        margin-top: 14px;
        border: 0;
        background: none;
        color: var(--dzd-color-accent);
        font-size: 14px;
        font-weight: 750;
        text-align: center;
        cursor: pointer;
      }

      .dzd-auth__footer {
        flex: 0 0 auto;
        padding: 0 18px;
      }

      .dzd-auth__legal--mobile {
        display: block;
        margin-top: 14px;
      }
    }

    /* Always-on interactive mobile phone (any desktop viewport) */

    /* Desktop stage: keep tabs, no horizontal slider */
    @media (min-width: 768px) {
      .stage .dzd-auth__slider {
        display: block;
        width: auto;
        transform: none !important;
      }

      .stage .dzd-auth__slide {
        width: auto;
        max-width: none;
        flex: none;
      }

      .stage .dzd-auth__body,
      .stage .dzd-auth__footer {
        padding: 0;
      }

      .stage .dzd-auth__have-account {
        display: none !important;
      }
    }


/* —— Mobile bottom sheet (locked from auth-mobile-new.html) —— */
@media (max-width: 767px) {
  .dzd-auth { display: none !important; }
  .dzd-auth-m {
    --ink: #111322;
    --muted: #5b5f73;
    --line: #d8dae3;
    --wash: #f6f7fa;
    --accent: #5e43d6;
    --accent-deep: #4a32b8;
    --surface: #ffffff;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --spring: cubic-bezier(0.32, 0.72, 0, 1);
    position: fixed;
    inset: 0;
    z-index: 2147483001;
    font-family: var(--dzd-font-sans, "Inter", system-ui, sans-serif);
  }
  .dzd-auth-m[hidden] { display: none !important; }
}

@media (max-width: 767px) {
 .dzd-auth-m {
      /* Production: viewport overlay (preview used absolute inside a stage) */
      position: fixed;
      inset: 0;
      z-index: 2147483001;
      display: flex;
      align-items: flex-end;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      overflow: hidden; /* never show off-sheet panes */
      transition: opacity 200ms ease, visibility 200ms ease;
    }

     .dzd-auth-m.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

     .dzd-auth-m__scrim {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.58);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
    }

     .dzd-auth-m__sheet {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 100%;
      height: auto;
      max-height: calc(100dvh - 12px);
      display: flex;
      flex-direction: column;
      background: var(--surface);
      border-radius: 28px 28px 0 0;
      box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.28);
      transform: translateY(105%);
      transition: transform 480ms var(--spring);
      will-change: transform;
      overflow: hidden;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

     .dzd-auth-m.is-open  .dzd-auth-m__sheet {
      transform: translateY(0);
    }

     .dzd-auth-m__sheet.is-drag {
      transition: none;
    }

     .dzd-auth-m__grab {
      flex: 0 0 auto;
      padding: 12px 22px 0;
      cursor: grab;
      touch-action: none;
      user-select: none;
    }

     .dzd-auth-m__knob {
      width: 36px;
      height: 5px;
      margin: 0 auto 18px;
      border-radius: 999px;
      background: #dcd6ef;
    }

     .dzd-auth-m__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 36px;
      margin-bottom: 14px;
      padding: 0 4px;
      flex: 0 0 auto;
    }

     .dzd-auth-m__heading {
      margin: 0;
      font-size: 26px;
      font-weight: 800;
      letter-spacing: -0.045em;
    }

     .dzd-auth-m__nav {
      min-width: 40px;
      border: 0;
      background: none;
      color: var(--accent);
      font: inherit;
      font-size: var(--dzd-fs-sm, 15px);
      font-weight: 700;
      cursor: pointer;
      padding: 0;
      text-align: right;
    }

     .dzd-auth-m__nav[hidden] {
      visibility: hidden;
      pointer-events: none;
    }

     .dzd-auth-m__nav--back.dzd-auth__icon-back {
      min-width: 40px;
      width: 40px;
      height: 40px;
      text-align: center;
      justify-self: start;
    }

    /*
      Single-viewport carousel:
      - stream is exactly the sheet content width
      - each pane is 100% of stream
      - inactive pane sits fully off-screen
      - overflow:hidden + min-width:0 prevents side peeking
    */
     .dzd-auth-m__stream {
      /* Shrink when sheet hits max-height; do not grow into empty space. */
      flex: 0 1 auto;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      scrollbar-width: none;
      position: relative;
      display: flex;
      flex-direction: column;
    }

     .dzd-auth-m__stream::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

     .dzd-auth-m__track {
      display: flex;
      flex-wrap: nowrap;
      align-items: flex-start;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      direction: ltr;
      transition: transform 380ms var(--ease);
      will-change: transform;
      transform: translate3d(0, 0, 0);
    }

     .dzd-auth-m[data-panel="register"]  .dzd-auth-m__track {
      transform: translate3d(-100%, 0, 0);
    }

     .dzd-auth-m__pane {
      box-sizing: border-box;
      flex: 0 0 100%;
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      padding: 0 22px 10px;
      overflow: hidden;
      /* Inactive panes must not inflate sheet height to the tallest form. */
      height: 0;
      visibility: hidden;
      pointer-events: none;
    }

     .dzd-auth-m[data-panel="sign-in"] .dzd-auth-m__pane:nth-child(1),
     .dzd-auth-m[data-panel="register"] .dzd-auth-m__pane:nth-child(2),
     .dzd-auth-m[data-panel="otp"] .dzd-auth-m__pane:nth-child(3),
     .dzd-auth-m[data-panel="forgot"] .dzd-auth-m__pane:nth-child(4),
     .dzd-auth-m[data-panel="forgot-otp"] .dzd-auth-m__pane:nth-child(5),
     .dzd-auth-m[data-panel="forgot-password"] .dzd-auth-m__pane:nth-child(6) {
      height: auto;
      overflow: visible;
      visibility: visible;
      pointer-events: auto;
    }

    .stack {
      display: grid;
      gap: 12px;
      width: 100%;
      max-width: 100%;
    }

    .control {
      display: grid;
      gap: 8px;
    }

    .control span {
      font-size: var(--dzd-fs-sm, 14px);
      font-weight: 700;
      color: var(--muted);
      letter-spacing: 0.02em;
    }

    .box {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 54px;
      padding: 0 16px;
      border-radius: 16px;
      background: var(--wash);
      border: 1px solid transparent;
      transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
    }

    .box:focus-within {
      background: #fff;
      border-color: rgba(94, 67, 214, 0.35);
      box-shadow: 0 0 0 4px rgba(94, 67, 214, 0.12);
    }

    .box input {
      flex: 1 1 auto;
      min-width: 0;
      width: auto;
      border: 0;
      outline: none;
      background: transparent;
      font: inherit;
      font-size: var(--dzd-fs-base, 16px);
      font-weight: 600;
      color: var(--ink);
    }

    .box input::placeholder {
      color: #b0aac2;
      font-weight: 500;
    }

    .eye {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-inline-start: 4px;
      margin-inline-end: -4px;
      border: 0;
      background: none;
      color: var(--muted, #6b6580);
      cursor: pointer;
      padding: 0;
      min-height: 44px;
      min-width: 44px;
      line-height: 0;
    }

    .eye:hover,
    .eye:focus-visible {
      color: var(--accent);
      outline: none;
    }

    .dial {
      display: flex;
      align-items: stretch;
      min-height: 54px;
      border-radius: 16px;
      background: var(--wash);
      overflow: hidden;
      border: 1px solid transparent;
      transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
    }

    .dial:focus-within {
      background: #fff;
      border-color: rgba(94, 67, 214, 0.35);
      box-shadow: 0 0 0 4px rgba(94, 67, 214, 0.12);
    }

    .dial__cc {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0 14px;
      background: #efeaff;
      color: var(--ink);
      font-size: var(--dzd-fs-sm, 15px);
      font-weight: 700;
      white-space: nowrap;
    }

    .dial input {
      flex: 1;
      border: 0;
      outline: none;
      background: transparent;
      padding: 0 14px;
      font: inherit;
      font-size: var(--dzd-fs-base, 16px);
      font-weight: 600;
    }

    .cta {
      width: 100%;
      min-height: 54px;
      margin-top: 4px;
      padding: 12px 16px;
      border: 0;
      border-radius: 16px;
      background: linear-gradient(180deg, #6a51e0, var(--accent));
      color: #fff;
      font: inherit;
      font-size: var(--dzd-fs-base, 16px);
      font-weight: 800;
      letter-spacing: -0.01em;
      line-height: 1.35;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
      cursor: pointer;
      box-shadow: 0 14px 28px rgba(94, 67, 214, 0.28);
    }

    .cta:active {
      transform: translateY(1px);
    }

    .ghost {
      width: 100%;
      min-height: 50px;
      margin-top: 10px;
      padding: 12px 16px;
      border-radius: 16px;
      border: 1.5px solid #ddd5f5;
      background: transparent;
      color: var(--accent);
      font: inherit;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.35;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
      cursor: pointer;
    }

    .ghost:hover {
      background: var(--wash);
    }

     .dzd-auth-m__foot {
      flex: 0 0 auto;
      width: 100%;
      max-width: 100%;
      padding: 10px 22px 26px;
      box-sizing: border-box;
    }

    /* Keep social/legal out of the LTR carousel math. */
    html[dir="rtl"] .dzd-auth-m__foot {
      direction: rtl;
      text-align: start;
    }

    html[dir="ltr"] .dzd-auth-m__foot {
      direction: ltr;
      text-align: start;
    }

    .rule {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 12px;
      align-items: center;
      margin: 8px 0 16px;
      color: var(--muted);
      font-size: var(--dzd-fs-xs, 14px);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .rule::before,
    .rule::after {
      content: "";
      height: 1px;
      background: var(--line);
    }

    .orbits {
      display: flex;
      justify-content: center;
      gap: 16px;
    }

    .orbit {
      position: relative;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: #fff;
      display: grid;
      place-items: center;
      cursor: pointer;
      box-shadow: var(--dzd-shadow-card);
      transition: transform var(--dzd-ease), box-shadow var(--dzd-ease);
    }

    .orbit:hover,
    .orbit:focus-visible,
    .orbit.is-tip {
      transform: translateY(-2px);
      box-shadow: var(--dzd-shadow-hover);
      outline: none;
    }

    .orbit svg {
      width: 20px;
      height: 20px;
      display: block;
      flex-shrink: 0;
    }

    .orbit .dzd-auth__google-icon {
      width: 20px !important;
      height: 20px !important;
      max-width: 20px;
      max-height: 20px;
      aspect-ratio: 1 / 1;
    }

    .orbit--apple {
      background: #111;
      border-color: #111;
      color: #fff;
    }

    .orbit--facebook {
      background: #1877f2;
      border-color: #1877f2;
      color: #fff;
    }

    .bubble {
      position: absolute;
      left: 50%;
      bottom: calc(100% + 12px);
      transform: translateX(-50%) translateY(6px);
      padding: 7px 11px;
      border-radius: 10px;
      background: var(--ink);
      color: #fff;
      font-size: var(--dzd-fs-xs, 14px);
      font-weight: 700;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
    }

    .bubble::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: var(--ink);
    }

    .orbit:hover .bubble,
    .orbit:focus-visible .bubble,
    .orbit.is-tip .bubble {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    .fine {
      margin: 18px 0 0;
      text-align: center;
      font-size: var(--dzd-fs-xs, 14px);
      line-height: 1.55;
      color: var(--muted);
      font-weight: 500;
    }

    .fine a {
      color: var(--accent);
      font-weight: 700;
      text-decoration: none;
    }

    .fine a:hover {
      text-decoration: underline;
    }

    
 .dzd-auth-m__flash {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483646;
  transform: translateX(-50%) translateY(16px);
  padding: 12px 16px;
  border-radius: 14px;
  background: #16122a;
  color: #fff;
  font-size: var(--dzd-fs-sm, 15px);
  font-weight: 650;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  max-width: min(92vw, 360px);
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
 .dzd-auth-m__flash.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

}

/* —— Production overlay overrides (layout lock preserved) —— */
.dzd-auth {
  position: fixed !important;
  z-index: 2147483001 !important;
}
.dzd-auth[hidden] { display: none !important; }

/* Content-height safety for desktop/tablet auth dialog */
@media (min-width: 768px) {
  .dzd-auth__dialog {
    height: auto;
    max-height: calc(100dvh - 48px);
    overflow: hidden;
  }
  .dzd-auth__body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

@supports not (height: 100dvh) {
  .dzd-auth__dialog {
    max-height: calc(100vh - 48px);
  }
  .dzd-auth-m__sheet {
    max-height: calc(100vh - 12px);
  }
}

html.dzd-auth-open,
html.dzd-auth-open body {
  overflow: hidden !important;
}

/* Auth toast — centered in viewport so it is never buried under the sheet foot */
#dzdAuthMFlash.dzd-auth-m__flash {
  position: fixed !important;
  left: 50% !important;
  top: 42% !important;
  bottom: auto !important;
  z-index: 2147483646 !important;
  transform: translate(-50%, -50%) scale(0.96);
  padding: 14px 18px !important;
  border-radius: 14px !important;
  background: #16122a !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  max-width: min(92vw, 360px);
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
#dzdAuthMFlash.dzd-auth-m__flash.is-on {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

/* Persistent mobile auth error — stays until next success / close */
.dzd-auth-m__banner {
  flex: 0 0 auto;
  margin: 0 22px 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fdecee;
  color: #8a1f2b;
  font-size: var(--dzd-fs-sm, 15px);
  font-weight: 650;
  line-height: 1.35;
  border: 1px solid #f3c4cb;
}
.dzd-auth-m__banner[hidden] {
  display: none !important;
}

@media (max-width: 767px) {
  .dzd-auth { display: none !important; }
  .dzd-auth-m {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483001 !important;
  }
  .dzd-auth-m .stack,
  .dzd-auth-m .control,
  .dzd-auth-m .box,
  .dzd-auth-m .dial,
  .dzd-auth-m .cta,
  .dzd-auth-m .ghost,
  .dzd-auth-m .eye,
  .dzd-auth-m .rule,
  .dzd-auth-m .orbits,
  .dzd-auth-m .orbit,
  .dzd-auth-m .bubble,
  .dzd-auth-m .fine {
    /* keep preview rules; ensure they only apply inside mobile auth */
  }
}

@media (min-width: 768px) {
  .dzd-auth-m { display: none !important; }
}

/* Minimal OTP step — appears only after Create Account; same tokens */
.dzd-auth__otp {
  display: none;
}
/* Keep mobile OTP pane in the carousel flex track (display:none collapses transforms). */
.dzd-auth-m__otp {
  display: block;
}
.dzd-auth[data-step="otp"] .dzd-auth__slider,
.dzd-auth[data-step="otp"] .dzd-auth__tabs,
.dzd-auth[data-step="otp"] .dzd-auth__sheet-chrome .dzd-auth__forgot {
  display: none !important;
}
.dzd-auth[data-step="otp"] .dzd-auth__otp {
  display: block;
}
.dzd-auth-m[data-panel="otp"] .dzd-auth-m__track {
  transform: translate3d(-200%, 0, 0);
}
.dzd-auth-m[data-panel="forgot"] .dzd-auth-m__track {
  transform: translate3d(-300%, 0, 0);
}
.dzd-auth-m[data-panel="forgot-otp"] .dzd-auth-m__track {
  transform: translate3d(-400%, 0, 0);
}
.dzd-auth-m[data-panel="forgot-password"] .dzd-auth-m__track {
  transform: translate3d(-500%, 0, 0);
}
.dzd-auth__otp-title,
.dzd-auth-m__otp .auth__heading,
.dzd-auth-m__otp-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--dzd-color-text, #16122a);
  text-align: center;
}
.dzd-auth__step-head {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.dzd-auth__step-head .dzd-auth__otp-title {
  grid-column: 2;
  margin: 0;
}
.dzd-auth__icon-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--dzd-color-accent, #5e43d6);
  cursor: pointer;
  flex: 0 0 auto;
  justify-self: start;
}
.dzd-auth__icon-back:focus-visible {
  outline: 2px solid rgba(94, 67, 214, 0.45);
  outline-offset: 2px;
}
.dzd-auth__icon-back .dzd-auth-back-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
html[dir="rtl"] .dzd-auth__icon-back .dzd-auth-back-icon {
  transform: scaleX(-1);
}
.dzd-auth__otp-copy,
.dzd-auth-m__otp-copy {
  margin: 0 0 16px;
  text-align: center;
  font-size: var(--dzd-fs-sm, 15px);
  line-height: 1.45;
  color: var(--dzd-color-text-muted, #8b849f);
}
.dzd-auth__otp-code,
.dzd-auth-m__otp-code {
  letter-spacing: 0.35em;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
}
.dzd-auth__otp-boxes {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  direction: ltr;
  margin: 6px 0 12px;
}
.dzd-auth__otp-cell {
  position: relative;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 44px;
  height: 48px;
  flex: 0 0 44px;
  border: 1px solid var(--dzd-color-border, #d8dbe3);
  border-radius: 10px;
  background: var(--dzd-color-surface, #fff);
  overflow: hidden;
}
.dzd-auth__otp-cell:focus-within {
  border-color: var(--dzd-color-accent, #5e43d6);
  box-shadow: 0 0 0 2px rgba(94, 67, 214, 0.35);
}
.dzd-auth__otp-glyph {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--dzd-color-text, #1b1f2a);
  user-select: none;
}
.dzd-auth__otp-digit {
  grid-area: 1 / 1;
  box-sizing: border-box;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--dzd-color-accent, #5e43d6);
  font-size: 20px;
  font-weight: 700;
  font-family: inherit;
  /* Match the cell content box (48px − 2×1px border) so the caret is vertically centered. */
  line-height: 46px;
  letter-spacing: 0;
  text-align: center;
  text-indent: 0;
  direction: ltr;
  unicode-bidi: plaintext;
  -webkit-appearance: none;
  appearance: none;
}
.dzd-auth__otp-digit:focus {
  outline: none;
}
.dzd-auth__otp-timer {
  margin: 0 0 8px;
  font-size: var(--dzd-fs-sm, 15px);
  color: var(--dzd-color-text-muted, #8b849f);
  text-align: center;
}
@media (max-width: 767px) {
  .dzd-auth__otp-cell {
    width: 38px;
    height: 44px;
    flex-basis: 38px;
  }
  .dzd-auth__otp-digit {
    font-size: 18px;
    line-height: 42px;
  }
  .dzd-auth__otp-glyph {
    font-size: 18px;
  }
  .dzd-auth__otp-boxes {
    gap: 6px;
  }
}
.dzd-auth__otp {
  position: relative;
}

.dzd-auth__otp-top {
  position: relative;
  min-height: 44px;
  margin-bottom: 0.35rem;
}

.dzd-auth__otp .dzd-mobile-back--auth,
.dzd-mobile-back--auth {
  display: inline-flex;
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  z-index: 5;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(17, 19, 34, 0.12);
  border-radius: 50%;
  background: rgba(17, 19, 34, 0.06);
  color: #111322;
  box-shadow: 0 1px 6px rgba(17, 19, 34, 0.08);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  appearance: none;
}

html[dir="rtl"] .dzd-auth__otp .dzd-mobile-back--auth,
html[dir="rtl"] .dzd-mobile-back--auth,
.rtl .dzd-auth__otp .dzd-mobile-back--auth,
.rtl .dzd-mobile-back--auth {
  left: auto;
  right: 0;
}

html[dir="rtl"] .dzd-auth__otp .dzd-mobile-back--auth svg,
html[dir="rtl"] .dzd-mobile-back--auth svg,
.rtl .dzd-auth__otp .dzd-mobile-back--auth svg,
.rtl .dzd-mobile-back--auth svg {
  transform: scaleX(-1);
}

.dzd-auth__otp-actions,
.dzd-auth-m__otp-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.dzd-auth__otp-resend,
.dzd-auth-m__otp-resend {
  border: 0;
  background: none;
  color: var(--dzd-color-accent, #5e43d6);
  font: inherit;
  font-size: var(--dzd-fs-sm, 15px);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.dzd-auth__otp-resend:disabled,
.dzd-auth-m__otp-resend:disabled {
  opacity: 0.5;
  cursor: default;
}


/* Forgot / OTP / Recovery additive steps — hide Login/Register panes */
.dzd-auth[data-step="forgot"] .dzd-auth__slider,
.dzd-auth[data-step="forgot"] .dzd-auth__tabs,
.dzd-auth[data-step="forgot-reset"] .dzd-auth__slider,
.dzd-auth[data-step="forgot-reset"] .dzd-auth__tabs,
.dzd-auth[data-step="recovery"] .dzd-auth__slider,
.dzd-auth[data-step="recovery"] .dzd-auth__tabs,
.dzd-auth[data-step="recovery-otp"] .dzd-auth__slider,
.dzd-auth[data-step="recovery-otp"] .dzd-auth__tabs {
  display: none !important;
}
.dzd-auth__forgot-panel[hidden] { display: none !important; }
.dzd-auth[data-step="forgot"] #dzdAuthForgot,
.dzd-auth[data-step="forgot-reset"] #dzdAuthForgotReset,
.dzd-auth[data-step="recovery"] #dzdAuthRecovery,
.dzd-auth[data-step="recovery-otp"] #dzdAuthRecoveryOtp { display: block !important; }
#dzdForgotOtpStep[hidden],
#dzdForgotPasswordStep[hidden],
#dzdForgotResetForm[hidden] {
  display: none !important;
}

/* Hard-hide inactive mobile panes so Register never peeks */
@media (max-width: 767px) {
  .dzd-auth-m__stream {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    flex: 0 1 auto !important;
    scrollbar-width: none;
  }
  .dzd-auth-m__sheet {
    overflow: hidden !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 12px) !important;
  }
  .dzd-auth-m__track {
    direction: ltr !important;
    align-items: flex-start !important;
  }
  .dzd-auth-m__pane {
    overflow: hidden !important;
    height: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .dzd-auth-m[data-panel="sign-in"] .dzd-auth-m__pane:nth-child(1),
  .dzd-auth-m[data-panel="register"] .dzd-auth-m__pane:nth-child(2),
  .dzd-auth-m[data-panel="otp"] .dzd-auth-m__pane:nth-child(3),
  .dzd-auth-m[data-panel="forgot"] .dzd-auth-m__pane:nth-child(4),
  .dzd-auth-m[data-panel="forgot-otp"] .dzd-auth-m__pane:nth-child(5),
  .dzd-auth-m[data-panel="forgot-password"] .dzd-auth-m__pane:nth-child(6) {
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .dzd-auth-m[data-panel="sign-in"] .dzd-auth-m__pane:nth-child(n + 2),
  .dzd-auth-m[data-panel="register"] .dzd-auth-m__pane:nth-child(1),
  .dzd-auth-m[data-panel="register"] .dzd-auth-m__pane:nth-child(n + 3),
  .dzd-auth-m[data-panel="otp"] .dzd-auth-m__pane:nth-child(-n + 2),
  .dzd-auth-m[data-panel="otp"] .dzd-auth-m__pane:nth-child(n + 4),
  .dzd-auth-m[data-panel="forgot"] .dzd-auth-m__pane:not(:nth-child(4)),
  .dzd-auth-m[data-panel="forgot-otp"] .dzd-auth-m__pane:not(:nth-child(5)),
  .dzd-auth-m[data-panel="forgot-password"] .dzd-auth-m__pane:not(:nth-child(6)) {
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}