/* material2-override — Premium warm aesthetic redesign */

   ============================================================

      :root {
        --orange: var(--md-primary);
        --orange-hot: color-mix(in srgb, var(--md-primary) 85%, white);
        --orange-dim: rgba(255, 77, 0, 0.12);
        --orange-glow: rgba(255, 77, 0, 0.24);
        --ink: #1C0E06;
        --ink-2: #180D05;
        --mid: #6E5D59;
        --muted: #857370;
        --fog: #FEF1EE;
        --cream: #FFF8F6;
        --white: #FFF8F6;
        --border: rgba(120, 75, 40, 0.12);
        --border-input: rgba(120, 75, 40, 0.22);
        --success: #1B8A4B;
        --error: #C5192D;
        --font-d: "Instrument Serif", Georgia, serif;
        --font-b: "DM Sans", sans-serif;
        --dur-fast: 180ms;
        --dur: 280ms;
        --dur-slow: 520ms;
        --ease: cubic-bezier(0.32, 0.72, 0, 1);
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        --ease-out: cubic-bezier(0, 0, 0.2, 1);
      }

      /* -- Screen transitions -- */

      .screen {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        bottom: 0;
        width: 430px;

        flex-direction: column;

        opacity: 0;

        pointer-events: none;

        transition:
          opacity var(--dur) var(--ease),
          transform var(--dur) var(--ease);

        will-change: opacity, transform;

        overflow: hidden;

        background: var(--cream);

        margin: 0;
        
        box-shadow: 0 0 0 1px rgba(0,0,0,.15);
      }

      .screen.active {
        opacity: 1;

        pointer-events: all;

        display: flex;

        z-index: 5;
      }

      .screen.exit-left {
        transform: translateX(-32px);

        opacity: 0;

        pointer-events: none;

        z-index: 4;
      }

      /* -- Scrollable body -- */

      .auth-scroll {
        flex: 1;

        overflow-y: auto;

        overflow-x: hidden;
      }

      .auth-scroll::-webkit-scrollbar {
        display: none;
      }

      /* Buttons */

      .btn {
        width: 100%;

        height: 56px;

        border: none;

        border-radius: 16px;

        font-family: var(--font-b);

        font-size: 15px;

        font-weight: 600;

        cursor: pointer;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

        letter-spacing: 0.05px;

        transition:
          background var(--dur-fast),
          transform var(--dur-fast),
          box-shadow var(--dur-fast),
          border-color var(--dur-fast);

        position: relative;

        overflow: hidden;

        flex-shrink: 0;
      }

      .btn::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0);
        transition: background var(--dur-fast);
      }

      .btn:active::after {
        background: rgba(255, 255, 255, 0.08);
      }

      .btn:active {
        transform: scale(0.974);
      }

      .btn-pri {
        background: var(--md-primary);
        color: var(--md-on-primary);
        box-shadow:
          0 6px 28px var(--orange-glow),
          0 1px 3px rgba(255, 77, 0, 0.2);
      }

      .btn-pri::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          160deg,
          rgba(255, 255, 255, 0.14) 0%,
          transparent 55%
        );
        pointer-events: none;
        border-radius: inherit;
      }

      .btn-pri:hover {
        background: var(--orange-hot);
      }

      .btn-pri:active {
        box-shadow: 0 2px 10px var(--orange-dim);
      }

      .btn-ghost {
        background: transparent;
        color: var(--md-on-surface);
        border: 1.5px solid var(--border-input);
      }

      .btn-ghost:hover {
        background: var(--md-surface-1);
        border-color: rgba(120, 75, 40, 0.3);
      }

      .btn-text {
        background: transparent;
        color: var(--md-primary);
        height: 44px;
        font-weight: 600;
      }

      .btn-text:hover {
        background: var(--orange-dim);
      }

      .btn-sm {
        height: 44px;
        width: auto;
        padding: 0 20px;
        font-size: 14px;
        border-radius: 12px;
      }

      /* Form fields */

      .field-wrap {
        margin-bottom: 16px;
      }

      .field-label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--md-on-surface-var);
        text-transform: uppercase;
        letter-spacing: 0.9px;
        margin-bottom: 8px;
      }

      .field {
        width: 100%;
        height: 56px;
        background: var(--md-surface-1);
        border: 1.5px solid transparent;
        border-radius: 14px;
        padding: 0 18px;
        font-family: var(--font-b);
        font-size: 15px;
        color: var(--md-on-surface);
        outline: none;
        transition:
          border-color var(--dur-fast),
          background var(--dur-fast),
          box-shadow var(--dur-fast);
      }

      .field:focus {
        background: white;
        border-color: var(--md-primary);
        box-shadow: 0 0 0 4px var(--orange-dim);
      }

      .field::placeholder {
        color: var(--md-on-surface-var);
        font-size: 14px;
      }

      .field.error {
        border-color: var(--error);
        box-shadow: 0 0 0 4px rgba(197, 25, 45, 0.08);
      }

      .field.success {
        border-color: var(--success);
      }

      .field-ta {
        height: auto;
        padding: 16px 18px;
        resize: none;
        line-height: 1.55;
      }

      /* Phone field */

      .phone-field {
        display: flex;
        background: var(--md-surface-1);
        border: 1.5px solid transparent;
        border-radius: 14px;
        overflow: hidden;
        transition:
          border-color var(--dur-fast),
          background var(--dur-fast),
          box-shadow var(--dur-fast);
      }

      .phone-field:focus-within {
        background: white;
        border-color: var(--md-primary);
        box-shadow: 0 0 0 4px var(--orange-dim);
      }

      .phone-prefix {
        padding: 0 16px;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 600;
        color: var(--md-on-surface-var);
        border-right: 1.5px solid var(--border-input);
        background: rgba(120, 88, 64, 0.06);
        white-space: nowrap;
        flex-shrink: 0;
        gap: 6px;
      }

      .phone-prefix span {
        font-size: 16px;
      }

      .phone-inp {
        flex: 1;
        border: none;
        background: transparent;
        padding: 0 16px;
        height: 54px;
        font-family: var(--font-b);
        font-size: 15px;
        color: var(--md-on-surface);
        outline: none;
      }

      .phone-inp::placeholder {
        color: var(--md-on-surface-var);
      }

      /* OTP input */

      .otp-wrap {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin: 8px 0;
      }

      .otp-digit {
        width: 52px;
        height: 62px;
        background: var(--md-surface-1);
        border: 2px solid transparent;
        border-radius: 14px;
        text-align: center;
        font-family: var(--font-b);
        font-size: 24px;
        font-weight: 700;
        color: var(--md-on-surface);
        outline: none;
        transition:
          border-color 160ms,
          background 160ms,
          box-shadow 160ms,
          transform 160ms;
        caret-color: var(--md-primary);
      }

      .otp-digit:focus {
        background: white;
        border-color: var(--md-primary);
        box-shadow: 0 0 0 4px var(--orange-dim);
        transform: scale(1.04);
      }

      .otp-digit.filled {
        background: var(--orange-dim);
        border-color: var(--md-primary);
        color: var(--md-primary);
      }

      /* PIN dots */

      .pin-wrap {
        display: flex;
        gap: 14px;
        justify-content: center;
        margin: 12px 0 8px;
      }

      .pin-dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid var(--border-input);
        background: transparent;
        transition:
          background 160ms,
          border-color 160ms,
          transform 200ms var(--ease-spring);
      }

      .pin-dot.filled {
        background: var(--md-primary);
        border-color: var(--md-primary);
        transform: scale(1.2);
      }

      .pin-dot.shake {
        animation: pinShake 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
      }

      @keyframes pinShake {
        0%,
        100% {
          transform: translateX(0);
        }
        20% {
          transform: translateX(-6px) scale(1.1);
        }
        40% {
          transform: translateX(6px) scale(1.1);
        }
        60% {
          transform: translateX(-4px);
        }
        80% {
          transform: translateX(4px);
        }
      }

      /* Numpad */

      .numpad {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 8px 0;
      }

      .numpad-key {
        height: 64px;
        background: var(--md-surface-1);
        border: none;
        border-radius: 14px;
        font-family: var(--font-b);
        font-size: 22px;
        font-weight: 500;
        color: var(--md-on-surface);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 1px;
        transition:
          background var(--dur-fast),
          transform var(--dur-fast);
        position: relative;
        overflow: hidden;
      }

      .numpad-key sub {
        font-size: 8px;
        letter-spacing: 1.2px;
        color: var(--md-on-surface-var);
        font-weight: 600;
        text-transform: uppercase;
      }

      .numpad-key:active {
        transform: scale(0.93);
        background: var(--orange-dim);
      }

      .numpad-key.special {
        background: transparent;
        font-size: 14px;
        color: var(--md-on-surface-var);
        font-weight: 600;
      }

      .numpad-key.del {
        background: transparent;
      }

      .numpad-key.del:active {
        background: var(--md-surface-1);
      }

      /* Progress stepper */

      .step-bar {
        display: flex;
        align-items: center;
        gap: 0;
        padding: 0 28px;
        margin-bottom: 32px;
      }

      .step-item {
        display: flex;
        align-items: center;
        flex: 1;
        gap: 0;
      }

      .step-circle {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        flex-shrink: 0;
        transition:
          background var(--dur),
          border-color var(--dur),
          color var(--dur);
        border: 2px solid var(--border-input);
        color: var(--md-on-surface-var);
        background: transparent;
      }

      .step-circle.done {
        background: var(--md-primary);
        border-color: var(--md-primary);
        color: var(--md-on-primary);
      }

      .step-circle.active {
        background: var(--md-on-surface);
        border-color: var(--md-on-surface);
        color: var(--md-on-primary);
      }

      .step-line {
        flex: 1;
        height: 2px;
        background: var(--border-input);
        transition: background var(--dur-slow);
      }

      .step-line.done {
        background: var(--md-primary);
      }

      .step-item:last-child .step-line {
        display: none;
      }

      /* Error message */

      .field-error {
        font-size: 12px;
        color: var(--error);
        margin-top: 6px;
        display: flex;
        align-items: center;
        gap: 5px;
        font-weight: 500;
      }

      /* Divider */

      .divider {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 20px 0;
      }

      .divider::before,
      .divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--border);
      }

      .divider span {
        font-size: 12px;
        color: var(--md-on-surface-var);
        font-weight: 500;
        white-space: nowrap;
      }



      /* =====================================================
         TOAST — IPOO floating white notification
         ===================================================== */
      #snack-wrap{
        position:fixed;
        top:20px;
        left:50%;
        transform:translateX(-50%);
        z-index:9999;
        display:flex;
        flex-direction:column;
        gap:8px;
        pointer-events:none;
        width:calc(100% - 32px);
        max-width:430px;
        align-items:stretch;
      }
      .snack{
        background:#fff;
        border-radius:20px;
        padding:16px 18px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        color:#231815 !important;
        box-shadow:0 10px 30px rgba(0,0,0,.10);
        pointer-events:all;
        min-height:68px;
        width:100%;
        border:1px solid rgba(35,24,21,0.04);
        transform:translateY(-20px);
        opacity:0;
        transition:opacity .25s ease, transform .25s ease;
        touch-action: pan-y;
      }
      .snack.show {
        opacity:1;
        transform:translateY(0);
      }
      .snack.dismiss {
        opacity:0;
        transform:translateY(-20px);
        transition:opacity .2s ease, transform .2s ease;
      }
      .snack.success .snack-icon{ background:#22C55E; color:#F97316 !important; }
      .snack.success .snack-icon svg,
      .snack.success .snack-icon svg path {
        color:#F97316 !important;
        fill:#F97316 !important;
      }
      .snack.error .snack-icon{ background:#EF4444; color:#fff; }
      .snack.info .snack-icon, .snack.loading .snack-icon{ background:#F59E0B; color:#fff; }
      .snack.default .snack-icon{ background:#1F2937; color:#fff; }
      .snack, .snack * {
        color:#231815 !important;
        fill:#231815 !important;
      }
      .snack-icon{
        width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
        font-size:20px;font-weight:800;flex-shrink:0;line-height:1;
      }
      .snack-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;flex:1;min-width:0;gap:2px;background:#fff;border-radius:14px;padding:8px 12px;}
      .snack-text strong{font-size:16px;font-weight:700;line-height:1.2;color:#231815;}
      .snack-text span{font-size:14px;font-weight:500;line-height:1.25;color:#6B6B6B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
      .snack-action{font-size:15px;font-weight:600;cursor:pointer;padding:8px 12px;border:none;border-radius:12px;background:#FFF1E8;color:#FF6B00 !important;white-space:nowrap;line-height:1;transition:background .2s ease, transform .2s ease;}
      .snack-action:hover{background:#FFE2CF;}
      .snack-action:active{ opacity:.9; }

      /* ============= UNIFIED BACK BUTTON SYSTEM ============= */

      .back-btn {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: var(--fog);
        border: none;
        cursor: pointer;

        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink);

        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        flex-shrink: 0;

        position: relative;
        overflow: hidden;
        font-size: 20px;
        font-weight: 600;
      }

      .back-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.4),
          transparent
        );

        opacity: 0;
        transition: opacity 0.2s;
        border-radius: 14px;
      }

      .back-btn:hover {
        background: var(--border-input);
        transform: translateX(-2px);
      }

      .back-btn:hover::before {
        opacity: 1;
      }

      .back-btn:active {
        transform: scale(0.94) translateX(-2px);
        background: var(--border-input);
      }

      .back-btn svg {
        width: 22px;
        height: 22px;
        stroke-width: 2.5;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .back-btn:hover svg {
        transform: translateX(-2px);
      }

      /* Light variant for dark backgrounds */

      .back-btn.light {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.15);
      }

      .back-btn.light:hover {
        background: rgba(255, 255, 255, 0.18);
        border-color: rgba(255, 255, 255, 0.25);
        transform: translateX(-2px);
      }

      .back-btn.light:active {
        transform: scale(0.94) translateX(-2px);
        background: rgba(255, 255, 255, 0.22);
      }

      /* Icon button variant (for top app bar) */

      .icon-btn {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: transparent;
        border: none;
        cursor: pointer;

        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink);

        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        flex-shrink: 0;
        position: relative;
      }

      .icon-btn:hover {
        background: rgba(0, 0, 0, 0.04);
        transform: translateX(-2px);
      }

      .icon-btn:active {
        transform: scale(0.94) translateX(-2px);
        background: rgba(0, 0, 0, 0.08);
      }

      .icon-btn svg {
        width: 24px;
        height: 24px;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .icon-btn:hover svg {
        transform: translateX(-2px);
      }

      /* Order topbar button */

      .ord-topbar-btn {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: transparent;
        border: none;
        cursor: pointer;

        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink);

        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        font-size: 18px;
        font-weight: 600;
      }

      .ord-topbar-btn:hover {
        background: var(--fog);
        transform: translateX(-2px);
      }

      .ord-topbar-btn:active {
        transform: scale(0.94) translateX(-2px);
        background: var(--border-input);
      }

      .ord-topbar-btn svg {
        width: 20px;
        height: 20px;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .ord-topbar-btn:hover svg {
        transform: translateX(-2px);
      }

      /* Top bar icon button variant */

      .top-app-bar .icon-btn {
        color: var(--ink);
      }

      .top-app-bar .icon-btn:hover {
        background: rgba(0, 0, 0, 0.05);
      }

      /* Dark topbar variant */

      .tbar .ibtn {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: transparent;
        border: none;
        cursor: pointer;

        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;

        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        flex-shrink: 0;
      }

      .tbar .ibtn:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: translateX(-2px);
      }

      .tbar .ibtn:active {
        transform: scale(0.94) translateX(-2px);
        background: rgba(255, 255, 255, 0.15);
      }

      .tbar .ibtn svg {
        width: 22px;
        height: 22px;
        stroke-width: 2.5;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .tbar .ibtn:hover svg {
        transform: translateX(-2px);
      }

      /* Auth screens styling moved below */

      /* SUCCESS SCREEN - REMOVED */
        background: #1a1a1a;
        justify-content: flex-end;
        padding-top: env(safe-area-inset-top);
      }

      .wl-bg {
        display: none;
      }

      .wl-grid {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(255, 77, 0, 0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 77, 0, 0.05) 1px, transparent 1px);
        background-size: 44px 44px;
        -webkit-mask-image: radial-gradient(
          ellipse 100% 80% at 60% 0%,
          black 20%,
          transparent 100%
        );
        mask-image: radial-gradient(
          ellipse 100% 80% at 60% 0%,
          black 20%,
          transparent 100%
        );
      }

      .wl-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(70px);
      }

      .wl-orb-1 {
        width: 480px;
        height: 480px;
        background: radial-gradient(
          circle,
          rgba(255, 77, 0, 0.32) 0%,
          transparent 68%
        );
        top: -180px;
        right: -160px;
        animation: orbFloat 8s ease-in-out infinite alternate;
      }

      .wl-orb-2 {
        width: 320px;
        height: 320px;
        background: radial-gradient(
          circle,
          rgba(255, 120, 40, 0.18) 0%,
          transparent 65%
        );
        bottom: 200px;
        left: -100px;
        animation: orbFloat 11s ease-in-out infinite alternate-reverse;
      }

      @keyframes orbFloat {
        from {
          transform: translate(0, 0) scale(1);
        }
        to {
          transform: translate(20px, -30px) scale(1.08);
        }
      }

      .wl-ring {
        display: none;
      }

      .wl-ring-1 {
        width: 560px;
        height: 560px;
        top: -220px;
        right: -220px;
      }

      .wl-ring-2 {
        width: 380px;
        height: 380px;
        top: -130px;
        right: -140px;
      }

      .wl-ring-3 {
        width: 240px;
        height: 240px;
        top: -60px;
        right: -70px;
        border-color: rgba(255, 77, 0, 0.2);
      }

      .wl-float-badge {
        position: absolute;
        top: 26%;
        left: 24px;
        background: rgba(255, 255, 255, 0.06);
        -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        animation: badgeIn 0.8s var(--ease) 0.4s both;
      }

      @keyframes badgeIn {
        from {
          opacity: 0;
          transform: translateY(16px) scale(0.9);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .wl-float-badge-icon {
        width: 36px;
        height: 36px;
        background: var(--md-primary);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
      }

      .wl-float-badge-text strong {
        display: block;
        font-size: 13px;
        font-weight: 700;
        color: var(--md-on-primary);
        margin-bottom: 2px;
      }

      .wl-float-badge-text span {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.5);
      }

      .wl-float-badge-2 {
        position: absolute;
        top: 42%;
        right: 20px;
        background: var(--md-primary);
        border-radius: 14px;
        padding: 10px 14px;
        display: none;
        align-items: center;
        gap: 8px;
        animation: badgeIn 0.8s var(--ease) 0.7s both;
        box-shadow: 0 8px 24px rgba(255, 77, 0, 0.4);
      }

      .wl-float-badge-2 span {
        font-size: 12px;
        font-weight: 700;
        color: var(--md-on-primary);
      }

      .wl-hero {
        position: relative;
        z-index: 3;
        padding-bottom: 56px;
        padding: 0 28px 56px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background: #1a1a1a;
        overflow: visible;
      }

      .wl-hero::after {
        content: "";
        position: absolute;
        bottom: -24px;
        left: 0;
        right: 0;
        height: 48px;
        background: var(--md-surface);
        border-radius: 28px 28px 0 0;
        z-index: 2;
      }

      .wl-orb {
        position: absolute;
        width: 350px;
        height: 350px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(255, 77, 0, 0.2) 0%,
          transparent 65%
        );
        filter: blur(70px);
        top: -120px;
        right: -120px;
        pointer-events: none;
      }

      .wl-hero-bar {
        display: flex;
        align-items: center;
        height: 64px;
        position: relative;
        z-index: 2;
        justify-content: flex-start;
      }

      .wl-hero-content {
        position: relative;
        z-index: 2;
        padding-top: 8px;
      }

      .wl-avatar {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(
          135deg,
          var(--md-primary),
          var(--orange-hot)
        );
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 800;
        color: var(--md-on-primary);
        margin-bottom: 14px;
        border: 3px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 8px 24px rgba(255, 77, 0, 0.35);
      }

      .wl-greeting {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 4px;
        font-weight: 500;
      }

      .wl-name {
        font-family: var(--font-display);
        font-size: 28px;
        color: var(--md-on-primary);
        font-style: normal;
        margin-bottom: 32px;
      }

      .wl-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 24px;
        animation: fadeUp 0.7s var(--ease) 0.1s both;
        position: relative;
        z-index: 2;
      }

      .wl-logo-mark {
        width: 42px;
        height: 42px;
        background: var(--md-primary);
        border-radius: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 20px rgba(255, 77, 0, 0.5);
      }

      .wl-logo-mark span {
        font-family: var(--font-display);
        font-size: 20px;
        color: var(--md-on-primary);
        font-style: normal;
      }

      .wl-logo-name {
        font-family: var(--font-display);
        font-size: 24px;
        color: var(--md-on-primary);
        letter-spacing: 4px;
        font-style: normal;
      }

      .wl-headline {
        font-family: var(--font-display);
        font-size: clamp(28px, 10vw, 40px);
        line-height: 1.06;
        color: var(--md-on-primary);
        margin-bottom: 20px;
        animation: fadeUp 0.7s var(--ease) 0.2s both;
        position: relative;
        z-index: 2;
      }

      .wl-headline em {
        font-style: normal;
        color: var(--orange-hot);
      }

      .wl-stats {
        display: flex;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 18px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.03);
        -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
        animation: fadeUp 0.7s var(--ease) 0.3s both;
        position: relative;
        z-index: 2;
      }

      .wl-stat {
        flex: 1;
        padding: 14px 8px;
        text-align: center;
        border-right: 1px solid rgba(255, 255, 255, 0.07);
      }

      .wl-stat:last-child {
        border-right: none;
      }

      .wl-stat-num {
        display: block;
        font-family: var(--font-display);
        font-size: 18px;
        font-weight: 700;
        color: var(--md-on-primary);
        margin-bottom: 2px;
      }

      .wl-stat-lbl {
        display: block;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.5);
        line-height: 1.4;
        font-weight: 500;
      }

      .wl-hero::after {
        content: "";
        position: absolute;
        bottom: -24px;
        left: 0;
        right: 0;
        height: 48px;
        background: var(--md-surface);
        border-radius: 28px 28px 0 0;
      }

      .wl-logo-mark {
        width: 42px;
        height: 42px;
        background: var(--md-primary);
        border-radius: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 20px rgba(255, 77, 0, 0.5);
      }

      .wl-logo-mark span {
        font-family: var(--font-display);
        font-size: 20px;
        color: var(--md-on-primary);
        font-style: normal;
      }

      .wl-logo-name {
        font-family: var(--font-display);
        font-size: 24px;
        color: var(--md-on-primary);
        letter-spacing: 4px;
        font-style: normal;
      }

      .wl-headline {
        font-family: var(--font-display);
        font-size: clamp(40px, 12vw, 52px);
        line-height: 1.06;
        color: var(--md-on-primary);
        margin-bottom: 16px;
        animation: fadeUp 0.7s var(--ease) 0.2s both;
        position: relative;
        z-index: 2;
      }

      .wl-headline em {
        font-style: normal;
        color: var(--orange-hot);
      }

      .wl-sub {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.48);
        line-height: 1.75;
        font-weight: 400;
        max-width: 280px;
        margin-bottom: 36px;
        animation: fadeUp 0.7s var(--ease) 0.3s both;
      }

      .wl-stats {
        display: flex;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 18px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.03);
        -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
        animation: fadeUp 0.7s var(--ease) 0.4s both;
        position: relative;
        z-index: 2;
      }

      .wl-stat {
        flex: 1;
        padding: 14px 8px;
        text-align: center;
        border-right: 1px solid rgba(255, 255, 255, 0.07);
      }

      .wl-stat:last-child {
        border-right: none;
      }

      .wl-stat-num {
        display: block;
        font-family: var(--font-display);
        font-size: 18px;
        color: var(--orange-hot);
        font-style: normal;
        margin-bottom: 3px;
      }

      .wl-stat-lbl {
        font-size: 9px;
        color: rgba(255, 255, 255, 0.32);
        text-transform: uppercase;
        letter-spacing: 0.9px;
        font-weight: 600;
      }

      .wl-cta {
        background: var(--md-surface);
        border-radius: 0;
        padding: 30px 28px 44px;
        position: relative;
        z-index: 4;
        flex-shrink: 0;
        margin-top: 24px;
      }

      .wl-cta::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: var(--border-input);
        border-radius: 2px;
      }

      .wl-cta-eyebrow {
        font-size: 11px;
        font-weight: 600;
        color: var(--md-on-surface-var);
        text-transform: uppercase;
        letter-spacing: 1.4px;
        text-align: center;
        margin-bottom: 20px;
      }

      .wl-legal {
        font-size: 12px;
        color: var(--md-on-surface-var);
        text-align: center;
        margin-top: 16px;
        line-height: 1.65;
      }

      .wl-legal a {
        color: var(--md-primary);
        text-decoration: none;
        font-weight: 500;
      }

      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(18px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* AUTH TOPBAR */

      .auth-bar {
        display: flex;
        align-items: center;
        padding: 16px 20px 12px;
        gap: 12px;
        flex-shrink: 0;
        background: var(--md-surface);
        z-index: 10;
      }

      .auth-bar.dark {
        background: var(--md-on-surface);
      }

      .auth-bar-title {
        flex: 1;
        font-size: 16px;
        font-weight: 600;
        color: var(--md-on-surface);
      }

      .auth-bar.dark .auth-bar-title {
        color: var(--md-on-primary);
      }

      .auth-bar-action {
        font-size: 13px;
        font-weight: 700;
        color: var(--md-primary);
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px 4px;
      }

      /* Deleted LOGIN screen CSS — using lightweight auth sheet instead */

      /* Deleted PIN screen CSS — using lightweight auth sheet instead */

      /* REGISTER STEPS */
      /* Deleted orphaned registration screen CSS — using lightweight auth sheet instead */
      
      /* Deleted orphaned registration, OTP, location, and PIN CSS — using lightweight auth sheet instead */

      @media (max-height: 680px) {
        .login-title {
          font-size: 30px;
        }

        .reg-title {
          font-size: 28px;
        }

        .numpad-key {
          height: 56px;
        }
      }

      /* Auth screens CSS removed - legacy multi-screen auth flow eliminated */