/* Generated from libertyx-full-flow-v3.html - do not edit by hand.
   App-screen styles namespaced with fs- where they collide with site classes. */
  .fs-phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 36px;
    overflow: hidden;
    position: relative;
  }
  .sb {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 30px 0;
    z-index: 50;
    font-size: 13px;
    font-weight: 700;
    color: #000;
  }

  /* Lucide icon defaults */
  .ic-svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }
  .ic-svg-sm { width: 16px; height: 16px; }
  .ic-svg-md { width: 22px; height: 22px; }
  .ic-svg-lg { width: 28px; height: 28px; }
  .ic-svg-xl { width: 36px; height: 36px; }
  .ic-svg-2xl { width: 56px; height: 56px; }

  /* ===== Shared layout primitives ===== */
  .body-bg {
    background: #fafbff;
    height: 100%;
    position: relative;
    overflow: hidden;
    color: #0a1a4a;
    font-family: 'Archivo', sans-serif;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .body-bg::-webkit-scrollbar { display: none; }
  .fs-hero {
    background: linear-gradient(170deg, #1d3aff 0%, #0a1a8a 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
  }
  .fs-hero::before {
    content: '';
    position: absolute;
    top: -50px; right: -80px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 60%);
    pointer-events: none;
  }
  .hero-pad { padding: 60px 22px 28px; }
  .hero-pad-r { padding: 60px 22px 36px; }
  .hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
  }
  .fs-back-btn {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    backdrop-filter: blur(10px);
  }
  .step-pill {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .spacer-36 { width: 36px; }
  .wordmark {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -0.04em;
    color: #fff;
  }
  .wordmark .x { color: #8da4ff; font-style: italic; }
  .profile-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 5px 11px 5px 5px;
    border-radius: 28px;
    backdrop-filter: blur(10px);
  }
  .profile-pill .av {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #fff;
    color: #1d3aff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 11px;
  }
  .profile-pill .hi { font-size: 11px; font-weight: 600; color: #fff; }
  .hero-title { margin-top: 18px; position: relative; z-index: 2; }
  .hero-title h1 {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 30px;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 5px;
  }
  .hero-title p {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    font-weight: 500;
  }

  /* Bottom nav */
  .fs-nav {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 10px 10px 24px;
    display: flex;
    justify-content: space-around;
    background: rgba(250, 251, 255, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(10, 26, 74, 0.08);
    z-index: 10;
  }
  .nav-item {
    flex: 1;
    text-align: center;
    padding: 4px 4px;
    color: #6172a8;
  }
  .nav-item .ic-svg-nav {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin: 0 auto 3px;
    display: block;
  }
  .nav-item .lbl {
    font-size: 9px;
    color: currentColor;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .nav-item.fs-active { color: #1d3aff; }

  /* ============= 1. HOME ============= */
  .home .h-pad {
    padding: 60px 22px 32px;
    position: relative;
  }
  .home .h-pad::after {
    content: '$';
    position: absolute;
    right: -25px; bottom: -90px;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 280px;
    color: rgba(0,0,0,0.03);
    line-height: 1;
    pointer-events: none;
  }
  .home .b-label {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    margin: 24px 0 2px;
    font-weight: 500;
    position: relative;
    z-index: 2;
  }
  .home .b-amt {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 72px;
    letter-spacing: -0.06em;
    line-height: 0.95;
    color: #fff;
    position: relative;
    z-index: 2;
  }
  .home .b-amt .sign {
    font-size: 36px;
    color: rgba(255,255,255,0.6);
    margin-top: 10px;
    vertical-align: top;
    display: inline-block;
  }
  .home .b-amt .c { font-size: 36px; color: rgba(255,255,255,0.6); }
  .home .b-badge {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 5px 11px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 2;
  }
  .home .b-badge .dot {
    width: 5px; height: 5px;
    background: #6ee777;
    border-radius: 50%;
  }
  .home .actions {
    margin: -16px 16px 0;
    background: #fff;
    border-radius: 22px;
    padding: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4px;
    position: relative;
    z-index: 3;
    box-shadow: 0 10px 30px -10px rgba(10, 26, 138, 0.15);
  }
  .home .a {
    padding: 12px 4px;
    border-radius: 14px;
    text-align: center;
    background: #f0f3ff;
    color: #1d3aff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .home .a.fs-primary { background: #1d3aff; color: #fff; }
  .home .a .lbl {
    font-size: 10px;
    font-weight: 700;
    color: #0a1a4a;
  }
  .home .a.fs-primary .lbl { color: #fff; }
  .home .wallet { padding: 24px 22px 80px; }
  .home .ws-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }
  .home .ws-h h3 {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.02em;
    color: #0a1a4a;
  }
  .home .ws-h .lnk { font-size: 11px; font-weight: 700; color: #1d3aff; }
  .home .fs-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(10, 26, 74, 0.08);
  }
  .home .fs-row:last-child { border-bottom: 0; }
  .home .fs-row .ic {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 17px;
    margin-right: 12px;
    flex-shrink: 0;
    color: #fff;
  }
  .home .ic-usd { background: #1d3aff; }
  .home .ic-btc { background: #f7931a; }
  .home .ic-sol { background: linear-gradient(135deg, #9945ff, #14f195); font-size: 10px; letter-spacing: -0.02em; }
  .home .ic-eth { background: #627eea; }
  .home .info { flex: 1; }
  .home .info .n {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #0a1a4a;
  }
  .home .info .s { font-size: 11px; color: #6172a8; margin-top: 1px; font-weight: 500; }
  .home .val { text-align: right; }
  .home .val .v {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #0a1a4a;
  }
  .home .val .u { font-size: 10px; color: #6172a8; margin-top: 1px; font-weight: 600; }

  /* ============= GENERIC METHOD PICKER ============= */
  .pick { padding: 0 0 80px; }
  .pick .list { padding: 18px 16px 0; }
  .pick .opt {
    background: #fff;
    border: 1px solid rgba(10, 26, 74, 0.08);
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }
  .pick .opt.featured {
    background: linear-gradient(155deg, #f0f3ff 0%, #fafbff 100%);
    border-color: #1d3aff;
    box-shadow: 0 6px 18px -6px rgba(29, 58, 255, 0.25);
  }
  .pick .opt .ic-wrap {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
    color: #fff;
  }
  .pick .opt .ic-wrap.blue { background: #1d3aff; }
  .pick .opt .ic-wrap.green { background: #06854a; }
  .pick .body { flex: 1; }
  .pick .body .title {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #0a1a4a;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -0.01em;
  }
  .pick .body .title .tag {
    background: #6ee777;
    color: #0a1a4a;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 800;
    letter-spacing: 0.05em;
  }
  .pick .body .desc { font-size: 12px; color: #6172a8; font-weight: 500; line-height: 1.4; }
  .pick .body .fee { font-size: 11px; color: #0a1a4a; margin-top: 4px; font-weight: 700; }
  .pick .arr {
    color: #1d3aff;
    flex-shrink: 0;
  }

  /* ============= AMOUNT KEYPAD ============= */
  .amount { padding: 0 0 80px; }
  .amount-display { text-align: center; padding: 28px 22px 14px; }
  .amount-display .lbl {
    font-size: 11px;
    color: #6172a8;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .amount-display .amt {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 64px;
    letter-spacing: -0.06em;
    line-height: 1;
    color: #0a1a4a;
  }
  .amount-display .amt .sign {
    font-size: 32px;
    color: #6172a8;
    margin-top: 8px;
    vertical-align: top;
    display: inline-block;
    margin-right: -2px;
  }
  .amount-display .amt .dim { color: #c2c8d6; }
  .amount-display .ctx {
    font-size: 11px;
    color: #6172a8;
    margin-top: 8px;
    font-weight: 600;
  }
  .amount-display .ctx strong { color: #0a1a4a; }
  .quick-amts {
    display: flex;
    gap: 6px;
    padding: 0 16px;
    justify-content: center;
    margin-bottom: 14px;
  }
  .quick-amts .q {
    padding: 7px 13px;
    background: #f0f3ff;
    color: #1d3aff;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 800;
  }
  .keypad {
    padding: 0 16px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
  }
  .key {
    padding: 12px;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: #0a1a4a;
    text-align: center;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .continue-btn {
    margin: 14px 16px 0;
    background: #1d3aff;
    color: #fff;
    padding: 15px;
    border-radius: 16px;
    text-align: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 8px 22px -6px rgba(29, 58, 255, 0.45);
  }

  /* ============= TAP-TO-PAY SCREENS ============= */
  .tap-scan {
    background: linear-gradient(170deg, #0a1a8a 0%, #050a4a 100%);
    height: 100%;
    color: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .tap-scan::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 55%, rgba(141, 164, 255, 0.25), transparent 50%);
    pointer-events: none;
  }
  .tap-scan .top {
    padding: 60px 22px 0;
    position: relative;
    z-index: 2;
  }
  .tap-scan .top h1 {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 26px;
    letter-spacing: -0.03em;
    margin-top: 16px;
    text-align: center;
  }
  .tap-scan .top p {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    margin-top: 4px;
    text-align: center;
  }
  .tap-scan .scan-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    z-index: 2;
  }
  .tap-scan .phone-illust {
    width: 140px;
    height: 220px;
    border-radius: 24px;
    border: 3px solid rgba(255,255,255,0.5);
    position: relative;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
  }
  /* NFC wave rings */
  .wave-rings {
    position: absolute;
    inset: -20px -120px -20px auto;
    width: 200px;
    display: flex;
    align-items: center;
  }
  .wave {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 2px solid rgba(141, 164, 255, 0.6);
    border-radius: 50%;
    animation: nfcPulse 2s ease-out infinite;
  }
  .wave.w1 { width: 30px; height: 30px; left: 60px; animation-delay: 0s; }
  .wave.w2 { width: 60px; height: 60px; left: 60px; animation-delay: 0.3s; }
  .wave.w3 { width: 100px; height: 100px; left: 60px; animation-delay: 0.6s; }
  .wave.w4 { width: 150px; height: 150px; left: 60px; animation-delay: 0.9s; }
  @keyframes nfcPulse {
    0% { opacity: 0; transform: translateY(-50%) scale(0.5); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-50%) scale(1.4); }
  }
  .card-illust {
    width: 140px;
    height: 90px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1d3aff, #0a1a8a);
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 8px;
    box-shadow: 0 12px 30px -8px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.15);
    margin-top: 12px;
  }
  .card-illust::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 14px;
    width: 28px; height: 22px;
    background: linear-gradient(135deg, #fcdc7f, #d4a443);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
  }
  .card-illust .card-net {
    color: #fff;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 14px;
    font-style: italic;
    letter-spacing: -0.04em;
  }
  .tap-scan .instructions {
    text-align: center;
    color: rgba(255,255,255,0.85);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    margin-top: 12px;
  }
  .tap-scan .instructions strong { color: #fff; font-weight: 800; }
  .tap-scan .pending {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #8da4ff;
    letter-spacing: 0.1em;
  }
  .tap-scan .pending .pdot {
    width: 6px; height: 6px;
    background: #8da4ff;
    border-radius: 50%;
    animation: pulse 1.2s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }
  .tap-scan .summary {
    margin: 0 16px 30px;
    padding: 14px 18px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
  }
  .tap-scan .summary .l { font-size: 12px; color: rgba(255,255,255,0.7); font-weight: 600; }
  .tap-scan .summary .r {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 18px;
  }
  .tap-scan .cancel {
    color: rgba(255,255,255,0.6);
    text-align: center;
    padding: 8px;
    font-size: 13px;
    font-weight: 600;
  }

  /* Success state */
  .tap-success {
    background: linear-gradient(170deg, #1d3aff 0%, #0a1a8a 100%);
    height: 100%;
    color: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 22px;
  }
  .tap-success::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(110, 231, 119, 0.25), transparent 50%);
    pointer-events: none;
  }
  .tap-success .check-circle {
    width: 96px; height: 96px;
    background: #6ee777;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 110px;
    color: #0a1a4a;
    box-shadow: 0 0 50px rgba(110, 231, 119, 0.5);
    position: relative;
    z-index: 2;
  }
  .tap-success h1 {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 32px;
    letter-spacing: -0.04em;
    margin-top: 22px;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  .tap-success .amt-line {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 56px;
    letter-spacing: -0.04em;
    margin-top: 12px;
    position: relative;
    z-index: 2;
  }
  .tap-success .amt-line .s { font-size: 28px; color: rgba(255,255,255,0.6); vertical-align: top; margin-top: 8px; display: inline-block; }
  .tap-success .sub-line {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    margin-top: 6px;
    position: relative;
    z-index: 2;
  }
  .tap-success .receipt {
    margin-top: 28px;
    width: 100%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 14px 18px;
    position: relative;
    z-index: 2;
  }
  .tap-success .receipt .line {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
  }
  .tap-success .receipt .line .l { color: rgba(255,255,255,0.7); font-weight: 500; }
  .tap-success .receipt .line .r { color: #fff; font-weight: 700; }
  .tap-success .bottom-actions {
    margin-top: auto;
    margin-bottom: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 2;
  }
  .tap-success .b1 {
    background: #fff;
    color: #1d3aff;
    padding: 14px;
    border-radius: 14px;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 14px;
    text-align: center;
  }
  .tap-success .b2 {
    color: #fff;
    padding: 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
  }

  /* ============= BARCODE SCREEN (GreenDot) ============= */
  .barcode-screen {
    background: linear-gradient(170deg, #1d3aff 0%, #0a1a8a 100%);
    height: 100%;
    position: relative;
    color: #fff;
    overflow: hidden;
  }
  .barcode-screen::before {
    content: '';
    position: absolute;
    top: -50px; right: -80px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 60%);
    pointer-events: none;
  }
  .barcode-screen .top { padding: 60px 22px 0; position: relative; z-index: 2; }
  .barcode-screen .top h1 {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: -0.03em;
    margin-top: 14px;
  }
  .barcode-screen .top p {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    margin-top: 3px;
  }
  /* Location card (shared by barcode + readycode screens) */
  .fs-location-card {
    margin: 14px 16px 0;
    background: #fff;
    border-radius: 18px;
    padding: 12px 14px;
    color: #0a1a4a;
    position: relative;
    z-index: 2;
    box-shadow: 0 14px 30px -8px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .fs-location-card .loc-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: #f0f3ff;
    color: #1d3aff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .fs-location-card .loc-info {
    flex: 1;
    min-width: 0;
  }
  .fs-location-card .loc-name {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #0a1a4a;
    letter-spacing: -0.01em;
    margin-bottom: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fs-location-card .loc-addr {
    font-size: 11px;
    color: #6172a8;
    font-weight: 500;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fs-location-card .loc-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    flex-wrap: wrap;
  }
  .fs-location-card .loc-meta .dist { color: #0a1a4a; }
  .fs-location-card .loc-meta .fs-open { color: #06854a; }
  .fs-location-card .loc-meta .closing-soon { color: #b56a00; }
  .fs-location-card .loc-meta .dot { color: #c2c8d6; font-weight: 600; }
  .fs-location-card .directions-btn-loc {
    background: #1d3aff;
    color: #fff;
    padding: 10px 12px;
    border-radius: 12px;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px -3px rgba(29, 58, 255, 0.5);
  }
  .fs-location-card .change-link {
    font-size: 10px;
    font-weight: 700;
    color: #1d3aff;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 4px;
    display: inline-block;
  }

  .barcode-card {
    margin: 12px 16px 0;
    background: #fff;
    border-radius: 22px;
    padding: 18px 18px;
    color: #0a1a4a;
    position: relative;
    z-index: 2;
    box-shadow: 0 14px 30px -8px rgba(0,0,0,0.25);
  }
  .barcode-card .vendor { text-align: center; margin-bottom: 10px; }
  .barcode-card .vendor .fs-label {
    font-size: 9px;
    letter-spacing: 0.18em;
    color: #6172a8;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2px;
  }
  .barcode-card .vendor .name {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: -0.02em;
  }
  .barcode-card .amt-line {
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #d6dcef;
  }
  .barcode-card .amt-line .l {
    font-size: 9px;
    color: #6172a8;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 2px;
  }
  .barcode-card .amt-line .v {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 28px;
    letter-spacing: -0.03em;
    color: #0a1a4a;
  }
  .barcode-svg {
    width: 100%;
    height: 56px;
    background: #fff;
    margin: 2px 0 6px;
  }
  .barcode-num {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.15em;
    color: #0a1a4a;
    font-weight: 700;
  }
  .barcode-breakdown {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #d6dcef;
  }
  .barcode-breakdown .fs-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 2px 0;
    font-size: 11px;
  }
  .barcode-breakdown .fs-row .l { color: #6172a8; font-weight: 600; }
  .barcode-breakdown .fs-row .r { color: #0a1a4a; font-weight: 700; }
  .barcode-breakdown .fs-row.total {
    padding-top: 5px;
    margin-top: 3px;
    border-top: 1px solid rgba(10, 26, 74, 0.08);
  }
  .barcode-breakdown .fs-row.total .l {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    color: #0a1a4a;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .barcode-breakdown .fs-row.total .r {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 14px;
  }
  .barcode-help {
    margin: 10px 16px 0;
    padding: 10px 12px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 2;
  }
  .barcode-help h4 {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 11px;
    margin-bottom: 5px;
  }
  .barcode-help ol { list-style: none; counter-reset: step; }
  .barcode-help ol li {
    counter-increment: step;
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    line-height: 1.45;
    padding-left: 20px;
    position: relative;
    margin-bottom: 2px;
  }
  .barcode-help ol li::before {
    content: counter(step);
    position: absolute;
    left: 0; top: 1px;
    width: 14px; height: 14px;
    background: #6ee777;
    color: #0a1a4a;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .find-stores-btn {
    margin: 12px 16px 0;
    background: #fff;
    color: #1d3aff;
    padding: 12px;
    border-radius: 14px;
    text-align: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    z-index: 2;
  }

  /* ============= MAP SCREEN ============= */
  .map-screen {
    height: 100%;
    position: relative;
    overflow: hidden;
    font-family: 'Archivo', sans-serif;
    color: #0a1a4a;
    background: #fafbff;
  }
  .map-bg {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 62%;
    background: #e8eef9;
    overflow: hidden;
  }
  .map-bg svg { width: 100%; height: 100%; display: block; }
  .road { stroke: #fff; fill: none; }
  .road-major { stroke-width: 8; }
  .road-minor { stroke-width: 4; }
  .park { fill: #d4e8d8; }
  .water { fill: #c2d6f0; }
  .building { fill: #d8def0; opacity: 0.6; }

  .map-search {
    position: absolute;
    top: 56px;
    left: 14px;
    right: 14px;
    background: #fff;
    border-radius: 18px;
    padding: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 24px -8px rgba(10, 26, 138, 0.25);
    z-index: 10;
  }
  .map-search .back {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #f0f3ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d3aff;
    flex-shrink: 0;
  }
  .map-search .input {
    flex: 1;
    padding: 2px 4px;
    min-width: 0;
  }
  .map-search .fs-label {
    font-size: 9px;
    color: #6172a8;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .map-search .value {
    font-weight: 700;
    font-size: 14px;
    color: #0a1a4a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .map-search .filter-btn {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: #1d3aff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
  }
  .map-search .filter-btn .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #6ee777;
    color: #0a1a4a;
    width: 16px; height: 16px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fafbff;
  }

  .chip-row {
    position: absolute;
    top: 124px;
    left: 0;
    right: 0;
    padding: 0 14px 14px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    z-index: 9;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip {
    background: #fff;
    border: 1px solid rgba(10, 26, 74, 0.1);
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    color: #0a1a4a;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(10, 26, 138, 0.06);
  }
  .chip.fs-active {
    background: #1d3aff;
    color: #fff;
    border-color: #1d3aff;
  }
  .chip.category {
    background: #fff;
    color: #0a1a4a;
    border-color: rgba(29, 58, 255, 0.4);
    box-shadow: 0 2px 8px rgba(29, 58, 255, 0.12);
  }
  .chip.category .x-icon { color: #6172a8; }

  .pin {
    position: absolute;
    transform: translate(-50%, -100%);
    z-index: 3;
  }
  .pin-svg {
    width: 28px;
    height: 36px;
    color: #1d3aff;
    fill: currentColor;
    stroke: #fff;
    stroke-width: 1.5;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25));
  }
  .pin.fs-active .pin-svg {
    color: #0a1a4a;
    width: 34px;
    height: 44px;
  }
  .pin .pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 3px solid rgba(29, 58, 255, 0.3);
    animation: pulseRing 2s ease-out infinite;
  }
  @keyframes pulseRing {
    0% { transform: translate(-50%, -50%) scale(0.6); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
  }
  .me-dot {
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #1d3aff;
    border: 3px solid #fff;
    box-shadow: 0 0 0 4px rgba(29, 58, 255, 0.3);
    transform: translate(-50%, -50%);
    z-index: 4;
  }
  .recenter {
    position: absolute;
    right: 14px;
    bottom: 47%;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px -8px rgba(10, 26, 138, 0.3);
    z-index: 8;
    color: #1d3aff;
  }

  .fs-sheet {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-radius: 22px 22px 0 0;
    padding: 10px 0 70px;
    box-shadow: 0 -12px 30px -8px rgba(10, 26, 138, 0.15);
    z-index: 9;
    max-height: 48%;
    display: flex;
    flex-direction: column;
  }
  .sheet-handle {
    width: 38px; height: 4px;
    background: #d6dcef;
    border-radius: 2px;
    margin: 0 auto 10px;
  }
  .sheet-header {
    padding: 0 18px 12px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .sheet-header h2 {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #0a1a4a;
    letter-spacing: -0.02em;
  }
  .sheet-header h2 span {
    color: #6172a8;
    font-weight: 600;
    font-size: 12px;
    margin-left: 4px;
  }
  .sheet-header .sort { font-size: 11px; font-weight: 700; color: #1d3aff; }
  .sheet-scroll {
    overflow-y: auto;
    padding: 0 12px;
    flex: 1;
  }
  .result-card {
    padding: 12px;
    border-radius: 14px;
    margin-bottom: 6px;
    background: #fafbff;
    border: 1px solid rgba(10, 26, 74, 0.06);
  }
  .result-card.featured {
    background: linear-gradient(170deg, #f0f3ff 0%, #fafbff 100%);
    border-color: #1d3aff;
  }
  .result-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  .result-name-block { flex: 1; min-width: 0; }
  .result-name {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #0a1a4a;
    margin-bottom: 3px;
  }
  .result-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #6172a8;
    font-weight: 600;
    flex-wrap: wrap;
  }
  .result-meta .dist { color: #0a1a4a; font-weight: 800; }
  .result-meta .fs-open { color: #06854a; }
  .result-meta .closing-soon { color: #b56a00; }
  .result-meta .dot { color: #c2c8d6; }
  .directions-btn {
    background: #1d3aff;
    color: #fff;
    width: 38px; height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 10px;
  }
  .result-actions {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
  }
  .action-pill {
    background: #fff;
    border: 1px solid rgba(10, 26, 74, 0.1);
    padding: 4px 9px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    color: #0a1a4a;
    display: flex;
    align-items: center;
    gap: 3px;
  }
  .action-pill.cash {
    color: #1d3aff;
    border-color: rgba(29, 58, 255, 0.3);
    background: #f0f3ff;
  }
  .action-pill.atm {
    color: #1d3aff;
    border-color: rgba(29, 58, 255, 0.3);
    background: #f0f3ff;
  }

  /* ============= SEND - PICK RECIPIENT ============= */
  .recip-search {
    margin: 16px 16px 0;
    background: #fff;
    padding: 12px;
    border-radius: 18px;
    box-shadow: 0 10px 26px -10px rgba(10, 26, 138, 0.15);
    position: relative;
    z-index: 3;
  }
  .recip-search-input {
    background: #f0f3ff;
    padding: 13px 14px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6172a8;
    font-weight: 500;
  }
  .recent-h {
    padding: 18px 22px 8px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .recent-h h3 {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #0a1a4a;
  }
  .recent-h span { font-size: 10px; color: #6172a8; font-weight: 700; letter-spacing: 0.05em; }
  .recents {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 20px 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .recents::-webkit-scrollbar { display: none; }
  .recents .person {
    flex-shrink: 0;
    width: 64px;
    text-align: center;
  }
  .recents .av {
    width: 54px; height: 54px;
    border-radius: 50%;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #fff;
  }
  .recents .av.c1 { background: linear-gradient(135deg, #ff6b6b, #d83b3b); }
  .recents .av.c2 { background: linear-gradient(135deg, #ffa726, #f57c00); }
  .recents .av.c3 { background: linear-gradient(135deg, #66bb6a, #388e3c); }
  .recents .av.c4 { background: linear-gradient(135deg, #1d3aff, #0a1a8a); }
  .recents .av.c5 { background: linear-gradient(135deg, #8e7cc3, #5e35b1); }
  .recents .av.add {
    background: #f0f3ff;
    color: #1d3aff;
    border: 2px dashed #8da4ff;
  }
  .recents .name {
    font-size: 11px;
    font-weight: 700;
    color: #0a1a4a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .contacts-list { padding: 8px 16px 80px; }
  .contact {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid rgba(10, 26, 74, 0.06);
    border-radius: 16px;
    margin-bottom: 6px;
  }
  .contact .av {
    width: 38px; height: 38px;
    border-radius: 50%;
    margin-right: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #fff;
    flex-shrink: 0;
  }
  .contact .av.c1 { background: linear-gradient(135deg, #ff6b6b, #d83b3b); }
  .contact .av.c2 { background: linear-gradient(135deg, #ffa726, #f57c00); }
  .contact .av.c3 { background: linear-gradient(135deg, #66bb6a, #388e3c); }
  .contact .av.c4 { background: linear-gradient(135deg, #1d3aff, #0a1a8a); }
  .contact .info { flex: 1; min-width: 0; }
  .contact .info .n {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #0a1a4a;
  }
  .contact .info .s {
    font-size: 11px;
    color: #6172a8;
    margin-top: 1px;
  }
  .contact .badge-on {
    background: #e6f7ec;
    color: #06854a;
    padding: 3px 7px;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
  }
  .contact .badge-invite {
    color: #1d3aff;
    padding: 3px 7px;
    border: 1px solid #1d3aff;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
  }

  /* ============= INVITE ============= */
  .unreg-card {
    margin: 22px 16px 0;
    background: #fff;
    border-radius: 22px;
    padding: 22px 20px;
    box-shadow: 0 10px 26px -10px rgba(10, 26, 138, 0.15);
    text-align: center;
  }
  .unreg-card .icon-circle {
    width: 64px; height: 64px;
    background: #f0f3ff;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d3aff;
  }
  .unreg-card h3 {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #0a1a4a;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
  }
  .unreg-card p {
    font-size: 13px;
    color: #6172a8;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 18px;
  }
  .unreg-card .phone-display {
    background: #f0f3ff;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 18px;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #0a1a4a;
    letter-spacing: 0.05em;
  }
  .unreg-card .invite-cta {
    background: #1d3aff;
    color: #fff;
    padding: 14px;
    border-radius: 14px;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 8px;
  }
  .unreg-card .sub-cta {
    color: #6172a8;
    font-size: 12px;
    font-weight: 600;
  }

  /* ============= SPEED CHOICE ============= */
  .speed-options { padding: 18px 16px 0; }
  .speed-opt {
    background: #fff;
    border: 1px solid rgba(10, 26, 74, 0.08);
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 10px;
    position: relative;
  }
  .speed-opt.selected {
    border-color: #1d3aff;
    border-width: 2px;
    background: linear-gradient(155deg, #f0f3ff 0%, #fafbff 100%);
    box-shadow: 0 6px 18px -6px rgba(29, 58, 255, 0.25);
  }
  .speed-opt .checkmark {
    position: absolute;
    top: 14px; right: 14px;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid #d6dcef;
  }
  .speed-opt.selected .checkmark {
    background: #1d3aff;
    border-color: #1d3aff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  .speed-opt .badge-top {
    display: inline-block;
    background: #6ee777;
    color: #0a1a4a;
    font-size: 9px;
    padding: 3px 7px;
    border-radius: 6px;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
  }
  .speed-opt .badge-top.free {
    background: #f0f3ff;
    color: #1d3aff;
  }
  .speed-opt .title {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: #0a1a4a;
    margin-bottom: 4px;
    padding-right: 28px;
    letter-spacing: -0.02em;
  }
  .speed-opt .when {
    font-size: 12px;
    color: #6172a8;
    margin-bottom: 8px;
    font-weight: 500;
  }
  .speed-opt .price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 8px;
    border-top: 1px solid rgba(10, 26, 74, 0.08);
  }
  .speed-opt .price-row .l { font-size: 11px; color: #6172a8; font-weight: 600; }
  .speed-opt .price-row .r {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #0a1a4a;
  }
  .speed-opt .price-row .r.free { color: #06854a; }

  /* ============= CONFIRM ============= */
  .confirm-summary { padding: 18px 16px 0; }
  .confirm-row-block {
    background: #fff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 6px 16px -6px rgba(10, 26, 138, 0.1);
    margin-bottom: 10px;
  }
  .confirm-recipient {
    text-align: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(10, 26, 74, 0.08);
  }
  .confirm-recipient .av {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6b6b, #d83b3b);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 22px;
  }
  .confirm-recipient .n {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #0a1a4a;
  }
  .confirm-recipient .s {
    font-size: 12px;
    color: #6172a8;
    margin-top: 2px;
    font-weight: 500;
  }
  .confirm-amt { text-align: center; margin-bottom: 16px; }
  .confirm-amt .lbl {
    font-size: 10px;
    color: #6172a8;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .confirm-amt .v {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 48px;
    letter-spacing: -0.04em;
    color: #0a1a4a;
  }
  .confirm-line {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
  }
  .confirm-line .l { color: #6172a8; font-weight: 600; }
  .confirm-line .r { color: #0a1a4a; font-weight: 700; }
  .confirm-line.total {
    border-top: 1px solid rgba(10, 26, 74, 0.08);
    padding-top: 12px;
    margin-top: 4px;
  }
  .confirm-line.total .l, .confirm-line.total .r {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #0a1a4a;
  }
  .slide-confirm {
    margin: 14px 16px 0;
    padding: 4px;
    background: #1d3aff;
    border-radius: 60px;
    display: flex;
    align-items: center;
    box-shadow: 0 8px 22px -6px rgba(29, 58, 255, 0.45);
    overflow: hidden;
    position: relative;
  }
  .slide-confirm .handle {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d3aff;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  }
  .slide-confirm .fs-label {
    flex: 1;
    text-align: center;
    color: #fff;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 52px;
  }

  /* ============= SENT CONFIRMATION ============= */
  .sent-screen {
    background: linear-gradient(170deg, #1d3aff 0%, #0a1a8a 100%);
    height: 100%;
    position: relative;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 22px;
    overflow: hidden;
  }
  .sent-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.18), transparent 50%);
    pointer-events: none;
  }
  .sent-screen .check-circle {
    width: 96px; height: 96px;
    background: #6ee777;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    color: #0a1a4a;
    box-shadow: 0 0 50px rgba(110, 231, 119, 0.5);
    position: relative;
    z-index: 2;
  }
  .sent-screen h1 {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 36px;
    letter-spacing: -0.04em;
    margin-top: 24px;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  .sent-screen .amount-sent {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 56px;
    letter-spacing: -0.04em;
    margin-top: 14px;
    position: relative;
    z-index: 2;
  }
  .sent-screen .amount-sent .s { font-size: 28px; color: rgba(255,255,255,0.6); vertical-align: top; margin-top: 8px; display: inline-block; }
  .sent-screen .to-line {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    margin-top: 6px;
    position: relative;
    z-index: 2;
  }
  .sent-screen .to-line strong { color: #fff; font-weight: 700; }
  .sent-screen .ref-card {
    margin-top: 24px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 14px 18px;
    width: 100%;
    position: relative;
    z-index: 2;
  }
  .sent-screen .ref-card .line {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
  }
  .sent-screen .ref-card .line .l { color: rgba(255,255,255,0.7); font-weight: 500; }
  .sent-screen .ref-card .line .r { color: #fff; font-weight: 700; }
  .sent-screen .ref-card .line.green .r { color: #6ee777; }
  .sent-screen .actions-bottom {
    width: 100%;
    margin-top: auto;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 2;
  }
  .sent-screen .actions-bottom .b1 {
    background: #fff;
    color: #1d3aff;
    padding: 14px;
    border-radius: 14px;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 14px;
    text-align: center;
  }
  .sent-screen .actions-bottom .b2 {
    color: #fff;
    padding: 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
  }

  /* ============= SMS MESSAGE ============= */
  .sms-screen {
    background: #fff;
    height: 100%;
    color: #0a0a0a;
    font-family: -apple-system, 'SF Pro Text', 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }
  .sms-header {
    padding: 56px 16px 10px;
    background: rgba(248, 248, 248, 0.92);
    backdrop-filter: blur(20px);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 5;
  }
  .sms-header .top-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  .sms-back {
    color: #007aff;
    font-size: 17px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .sms-back svg {
    width: 14px;
    height: 22px;
    fill: none;
    stroke: #007aff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .sms-back-count {
    background: #007aff;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 9px;
    margin-left: -2px;
  }
  .sms-video-btn {
    width: 32px;
    height: 32px;
    color: #007aff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sms-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: -8px;
  }
  .sms-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1d3aff, #0a1a8a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: -0.04em;
    margin-bottom: 2px;
  }
  .sms-avatar .x { color: #8da4ff; font-style: italic; }
  .sms-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #0a0a0a;
    font-weight: 500;
  }
  .sms-name-row svg {
    width: 10px;
    height: 10px;
    fill: none;
    stroke: #8e8e93;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .sms-body {
    flex: 1;
    padding: 14px 12px 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .sms-timestamp {
    text-align: center;
    font-size: 10px;
    color: #8e8e93;
    font-weight: 500;
    padding: 8px 0;
  }
  .sms-timestamp strong {
    color: #8e8e93;
    font-weight: 700;
  }
  .sms-bubble-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    max-width: 78%;
    align-self: flex-start;
  }
  .sms-bubble {
    background: #e9e9eb;
    color: #0a0a0a;
    padding: 8px 13px;
    border-radius: 18px;
    font-size: 14.5px;
    line-height: 1.32;
    word-wrap: break-word;
    letter-spacing: -0.01em;
  }
  .sms-bubble .lib-link {
    color: #007aff;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
  }
  .sms-bubble .lib-link.no-decoration {
    text-decoration: none;
  }
  .sms-bubble strong { font-weight: 600; }
  .sms-link-preview {
    background: #e9e9eb;
    border-radius: 18px;
    overflow: hidden;
    margin-top: 2px;
  }
  .sms-link-preview .preview-img {
    height: 110px;
    background: linear-gradient(170deg, #1d3aff 0%, #0a1a8a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .sms-link-preview .preview-img::before {
    content: '$';
    position: absolute;
    right: -10px;
    bottom: -36px;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 160px;
    color: rgba(255, 255, 255, 0.1);
    line-height: 1;
  }
  .sms-link-preview .preview-img .big-amt {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 36px;
    color: #fff;
    letter-spacing: -0.04em;
    position: relative;
    z-index: 2;
  }
  .sms-link-preview .preview-img .big-amt .s {
    font-size: 20px;
    color: rgba(255,255,255,0.6);
    vertical-align: top;
    margin-top: 4px;
    display: inline-block;
  }
  .sms-link-preview .preview-meta {
    padding: 8px 12px;
    background: #e9e9eb;
  }
  .sms-link-preview .preview-meta .t {
    font-size: 12.5px;
    font-weight: 600;
    color: #0a0a0a;
    line-height: 1.2;
    margin-bottom: 1px;
  }
  .sms-link-preview .preview-meta .d {
    font-size: 11px;
    color: #6e6e72;
    line-height: 1.2;
  }
  .sms-meta-row {
    font-size: 10px;
    color: #8e8e93;
    margin-top: 3px;
    padding: 0 4px;
    font-weight: 500;
  }
  .sms-composer {
    padding: 8px 8px 30px;
    background: #fff;
    border-top: 0.5px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .sms-composer .plus-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e9e9eb;
    color: #8e8e93;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .sms-composer .input-box {
    flex: 1;
    background: #fff;
    border: 1px solid #d4d4d9;
    border-radius: 18px;
    padding: 7px 14px;
    color: #c4c4c9;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sms-composer .input-box .mic-icon {
    color: #8e8e93;
  }


  .magic {
    background: #fafbff;
    height: 100%;
    color: #0a1a4a;
    overflow: hidden;
    position: relative;
  }
  .magic .browser-bar {
    background: #f2f2f7;
    padding: 50px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .magic .browser-bar .url {
    background: #ffffff;
    color: #555;
    padding: 8px 14px;
    border-radius: 100px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .magic .browser-bar .url .lock { color: #6ee777; display: flex; }
  .magic .browser-bar .tabs {
    color: #555;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .magic .hero-mini {
    background: linear-gradient(170deg, #1d3aff 0%, #0a1a8a 100%);
    color: #fff;
    padding: 28px 22px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .magic .hero-mini .wordmark {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -0.04em;
    margin-bottom: 18px;
  }
  .magic .hero-mini .wordmark .x { color: #8da4ff; font-style: italic; }
  .magic .hero-mini .you-got {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    margin-bottom: 8px;
  }
  .magic .hero-mini .amt {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 64px;
    letter-spacing: -0.05em;
    line-height: 1;
  }
  .magic .hero-mini .amt .s { font-size: 32px; color: rgba(255,255,255,0.6); vertical-align: top; margin-top: 8px; display: inline-block; }
  .magic .hero-mini .from {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    margin-top: 10px;
    font-weight: 500;
  }
  .magic .hero-mini .from strong { color: #fff; font-weight: 800; }
  .magic .body { padding: 20px 16px; }
  .magic .body h2 {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 12px;
    text-align: center;
    letter-spacing: -0.02em;
  }
  .magic-opt {
    background: #fff;
    border: 1px solid rgba(10, 26, 74, 0.08);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
  }
  .magic-opt.featured {
    background: linear-gradient(155deg, #f0f3ff 0%, #fafbff 100%);
    border-color: #1d3aff;
    box-shadow: 0 6px 18px -6px rgba(29, 58, 255, 0.25);
  }
  .magic-opt .ic-circle {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: #1d3aff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
  }
  .magic-opt .ic-circle.green { background: #06854a; }
  .magic-opt .info { flex: 1; }
  .magic-opt .info .t {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #0a1a4a;
    margin-bottom: 2px;
  }
  .magic-opt .info .d {
    font-size: 11px;
    color: #6172a8;
    line-height: 1.4;
  }
  .magic-opt .arr {
    color: #1d3aff;
  }

  /* App-pitch card on magic link */
  .app-pitch {
    margin: 16px 16px 0;
    background: linear-gradient(170deg, #1d3aff 0%, #0a1a8a 100%);
    border-radius: 22px;
    padding: 18px 16px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 30px -8px rgba(29, 58, 255, 0.4);
  }
  .app-pitch::before {
    content: '';
    position: absolute;
    top: -50px; right: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
  }
  .app-pitch .pitch-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
  }
  .app-pitch .pitch-icon {
    width: 42px; height: 42px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
  }
  .app-pitch .pitch-headline {
    flex: 1;
  }
  .app-pitch .pitch-headline h3 {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 17px;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
  }
  .app-pitch .pitch-headline p {
    font-size: 11px;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
  }
  .app-pitch .pitch-perks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
  }
  .app-pitch .perk {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    color: rgba(255,255,255,0.95);
    font-weight: 600;
    line-height: 1.25;
  }
  .app-pitch .perk svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #6ee777;
  }
  .app-pitch .pitch-cta {
    background: #fff;
    color: #1d3aff;
    padding: 12px;
    border-radius: 12px;
    text-align: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
  }
  .app-pitch .pitch-stores {
    display: flex;
    gap: 6px;
    position: relative;
    z-index: 2;
  }
  .app-pitch .store-badge {
    flex: 1;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
  }
  .app-pitch .store-badge .badge-icon {
    flex-shrink: 0;
  }
  .app-pitch .store-badge .badge-text {
    line-height: 1.1;
    min-width: 0;
  }
  .app-pitch .store-badge .badge-text .top-line {
    font-size: 8px;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
    letter-spacing: 0.03em;
  }
  .app-pitch .store-badge .badge-text .bottom-line {
    font-family: 'Archivo', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  /* Secondary "just take the cash" option */
  .secondary-divider {
    margin: 16px 16px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6172a8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
  }
  .secondary-divider::before, .secondary-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(10, 26, 74, 0.1);
  }
  .guest-skip {
    margin: 0 16px 18px;
    background: #fff;
    border: 1px solid rgba(10, 26, 74, 0.1);
    border-radius: 16px;
    padding: 13px;
    display: flex;
    align-items: center;
  }
  .guest-skip .ic-circle {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: #f0f3ff;
    color: #1d3aff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
  }
  .guest-skip .info { flex: 1; }
  .guest-skip .info .t {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #0a1a4a;
    margin-bottom: 1px;
  }
  .guest-skip .info .d {
    font-size: 11px;
    color: #6172a8;
  }
  .guest-skip .arr { color: #6172a8; }

  /* ============= TOS / GUEST CONSENT ============= */
  .tos-screen {
    background: #fafbff;
    height: 100%;
    color: #0a1a4a;
    font-family: 'Archivo', sans-serif;
    position: relative;
    overflow-y: auto;
  }
  .tos-browser-bar {
    background: #f2f2f7;
    padding: 50px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .tos-browser-bar .url {
    background: #ffffff;
    color: #555;
    padding: 8px 14px;
    border-radius: 100px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .tos-browser-bar .url .lock { color: #6ee777; display: flex; }
  .tos-browser-bar .tabs {
    color: #555;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .tos-hero {
    background: linear-gradient(170deg, #1d3aff 0%, #0a1a8a 100%);
    color: #fff;
    padding: 24px 22px 22px;
    position: relative;
    overflow: hidden;
  }
  .tos-hero::before {
    content: '';
    position: absolute;
    top: -50px; right: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 60%);
    pointer-events: none;
  }
  .tos-hero h1 {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 24px;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 6px;
    position: relative;
    z-index: 2;
  }
  .tos-hero p {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
    position: relative;
    z-index: 2;
  }
  .tos-progress {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
    backdrop-filter: blur(10px);
  }
  .tos-progress .dot-active { width: 5px; height: 5px; background: #6ee777; border-radius: 50%; }
  .tos-body { padding: 18px 16px 24px; }
  .tos-block {
    background: #fff;
    border: 1px solid rgba(10, 26, 74, 0.08);
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 10px;
  }
  .tos-block h4 {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #0a1a4a;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .tos-block h4 .num {
    width: 22px; height: 22px;
    background: #1d3aff;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 11px;
    flex-shrink: 0;
  }
  .tos-block p {
    font-size: 12px;
    color: #4a5680;
    line-height: 1.55;
    font-weight: 500;
    margin-left: 30px;
  }
  .tos-block p a, .tos-block p .link {
    color: #1d3aff;
    text-decoration: underline;
    font-weight: 700;
  }
  .tos-checks {
    background: #fff;
    border: 1px solid rgba(10, 26, 74, 0.08);
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 12px;
  }
  .tos-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(10, 26, 74, 0.06);
  }
  .tos-check:last-child { border-bottom: 0; }
  .tos-check .checkbox {
    width: 22px; height: 22px;
    border-radius: 6px;
    border: 2px solid #d6dcef;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    color: #fff;
  }
  .tos-check.checked .checkbox {
    background: #1d3aff;
    border-color: #1d3aff;
  }
  .tos-check .fs-label {
    flex: 1;
    font-size: 12px;
    color: #0a1a4a;
    line-height: 1.4;
    font-weight: 500;
  }
  .tos-check .fs-label strong { font-weight: 700; }
  .tos-check .fs-label a, .tos-check .fs-label .link {
    color: #1d3aff;
    text-decoration: underline;
    font-weight: 700;
  }
  .tos-accept {
    background: #1d3aff;
    color: #fff;
    padding: 15px;
    border-radius: 16px;
    text-align: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 8px 22px -6px rgba(29, 58, 255, 0.45);
    margin-bottom: 8px;
  }
  .tos-decline {
    color: #6172a8;
    text-align: center;
    padding: 10px;
    font-size: 12px;
    font-weight: 600;
  }
  .tos-footnote {
    text-align: center;
    font-size: 10px;
    color: #6172a8;
    line-height: 1.5;
    padding: 8px 8px 0;
    font-weight: 500;
  }

  /* ============= VERIFY (OTP) ============= */
  .verify-screen {
    background: #fafbff;
    height: 100%;
    color: #0a1a4a;
    font-family: 'Archivo', sans-serif;
    position: relative;
    overflow: hidden;
  }
  .verify-hero {
    background: linear-gradient(170deg, #1d3aff 0%, #0a1a8a 100%);
    color: #fff;
    padding: 24px 22px;
    position: relative;
    overflow: hidden;
  }
  .verify-hero::before {
    content: '';
    position: absolute;
    top: -50px; right: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 60%);
    pointer-events: none;
  }
  .verify-hero h1 {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 24px;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 6px;
    position: relative;
    z-index: 2;
  }
  .verify-hero p {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
    position: relative;
    z-index: 2;
  }
  .verify-hero p strong { color: #fff; font-weight: 700; }
  .verify-body {
    padding: 26px 22px 20px;
  }
  .otp-display {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 18px;
  }
  .otp-digit {
    width: 44px;
    height: 56px;
    background: #fff;
    border: 2px solid #d6dcef;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 28px;
    color: #0a1a4a;
    letter-spacing: -0.02em;
  }
  .otp-digit.filled {
    border-color: #1d3aff;
    background: #f0f3ff;
  }
  .otp-digit.fs-active {
    border-color: #1d3aff;
    background: #fff;
    position: relative;
  }
  .otp-digit.fs-active::after {
    content: '';
    width: 2px;
    height: 28px;
    background: #1d3aff;
    animation: blink 1s ease-in-out infinite;
  }
  @keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
  }
  .verify-resend {
    text-align: center;
    font-size: 12px;
    color: #6172a8;
    margin-bottom: 24px;
    font-weight: 500;
  }
  .verify-resend strong {
    color: #1d3aff;
    font-weight: 700;
  }
  .verify-resend .grey { color: #c2c8d6; }
  .verify-info {
    background: #f0f3ff;
    border: 1px solid rgba(29, 58, 255, 0.15);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .verify-info .ic-wrap {
    color: #1d3aff;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .verify-info .txt {
    font-size: 11px;
    color: #0a1a4a;
    line-height: 1.45;
    font-weight: 600;
  }
  .verify-info .txt strong { font-weight: 800; }
  .verify-keypad {
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
  }
  .verify-keypad .key {
    padding: 12px;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: #0a1a4a;
    text-align: center;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ============= GUEST READYCODE ============= */
  .guest-banner {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 5px 11px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 2;
  }
  .guest-banner .dot {
    width: 5px; height: 5px;
    background: #6ee777;
    border-radius: 50%;
  }
  .guest-footer {
    margin: 12px 16px 0;
    padding: 12px 14px;
    background: rgba(255,255,255,0.08);
    border: 1px dashed rgba(255,255,255,0.25);
    border-radius: 14px;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  .guest-footer .gf-text {
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 6px;
  }
  .guest-footer .gf-text strong { color: #fff; font-weight: 800; }
  .guest-footer .gf-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #8da4ff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: underline;
  }

  /* ============= READYCODE WITHDRAWAL ============= */
  .readycode {
    background: linear-gradient(170deg, #1d3aff 0%, #0a1a8a 100%);
    height: 100%;
    position: relative;
    color: #fff;
    overflow: hidden;
  }
  .readycode::before {
    content: '';
    position: absolute;
    top: -50px; right: -80px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 60%);
    pointer-events: none;
  }
  .readycode .top { padding: 60px 22px 0; position: relative; z-index: 2; }
  .readycode .top h1 {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: -0.03em;
    margin-top: 14px;
  }
  .readycode .top p {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    margin-top: 3px;
  }
  .rc-card {
    margin: 12px 16px 0;
    background: #fff;
    border-radius: 22px;
    padding: 18px 18px;
    color: #0a1a4a;
    position: relative;
    z-index: 2;
    box-shadow: 0 14px 30px -8px rgba(0,0,0,0.25);
  }
  .rc-card .fs-label {
    font-size: 9px;
    letter-spacing: 0.2em;
    color: #6172a8;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 3px;
  }
  .rc-card .amt {
    text-align: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 32px;
    letter-spacing: -0.03em;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #d6dcef;
  }
  .rc-field { margin-bottom: 10px; }
  .rc-field .fs-label {
    text-align: left;
    margin-bottom: 5px;
  }
  .rc-field .value {
    background: #f0f3ff;
    padding: 10px 12px;
    border-radius: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 16px;
    color: #0a1a4a;
    letter-spacing: 0.08em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .rc-field .value .copy {
    background: #1d3aff;
    color: #fff;
    padding: 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Archivo', sans-serif;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .rc-card .expires {
    text-align: center;
    font-size: 11px;
    color: #6172a8;
    margin-top: 8px;
    font-weight: 600;
  }
  .rc-card .expires strong { color: #b56a00; }
  .rc-help {
    margin: 12px 16px 0;
    padding: 10px 12px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 2;
  }
  .rc-help h4 {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 11px;
    margin-bottom: 5px;
  }
  .rc-help ol { list-style: none; counter-reset: step; }
  .rc-help ol li {
    counter-increment: step;
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    line-height: 1.45;
    padding-left: 20px;
    position: relative;
    margin-bottom: 2px;
  }
  .rc-help ol li::before {
    content: counter(step);
    position: absolute;
    left: 0; top: 1px;
    width: 14px; height: 14px;
    background: #6ee777;
    color: #0a1a4a;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ============= TRADE ============= */
  .trade-toggle {
    margin: 14px 16px 0;
    display: flex;
    background: #f0f3ff;
    padding: 4px;
    border-radius: 12px;
  }
  .trade-toggle .t {
    flex: 1;
    text-align: center;
    padding: 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #6172a8;
  }
  .trade-toggle .t.fs-active {
    background: #1d3aff;
    color: #fff;
  }
  .trade-list { padding: 14px 16px 80px; }
  .trade-coin {
    display: flex;
    align-items: center;
    padding: 12px;
    background: #fff;
    border: 1px solid rgba(10, 26, 74, 0.06);
    border-radius: 16px;
    margin-bottom: 6px;
  }
  .trade-coin .ic {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 17px;
    margin-right: 11px;
    flex-shrink: 0;
    color: #fff;
  }
  .trade-coin .ic.btc { background: #f7931a; }
  .trade-coin .ic.sol { background: linear-gradient(135deg, #9945ff, #14f195); font-size: 10px; letter-spacing: -0.02em; }
  .trade-coin .ic.eth { background: #627eea; }
  .trade-coin .ic.ltc { background: #345d9d; }
  .trade-coin .ic.doge { background: #c2a633; }
  .trade-coin .info { flex: 1; }
  .trade-coin .info .n {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #0a1a4a;
  }
  .trade-coin .info .s { font-size: 11px; color: #6172a8; margin-top: 1px; font-weight: 500; }
  .trade-coin .price { text-align: right; }
  .trade-coin .price .p {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #0a1a4a;
  }
  .trade-coin .price .ch { font-size: 11px; margin-top: 1px; font-weight: 700; }
  .trade-coin .price .ch.up { color: #06854a; }
  .trade-coin .price .ch.down { color: #b03030; }

  /* ============= TRADE BUY ============= */
  .trade-buy-hero { text-align: center; padding: 12px 22px 4px; }
  .trade-buy-hero .coin-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .trade-buy-hero .coin-row .ic {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #f7931a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 16px;
  }
  .trade-buy-hero .coin-row span {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #0a1a4a;
  }
  .trade-buy-hero .price-tick {
    font-size: 11px;
    color: #06854a;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .trade-buy-amt { text-align: center; padding: 18px 22px 6px; }
  .trade-buy-amt .fs-label {
    font-size: 11px;
    color: #6172a8;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .trade-buy-amt .amt {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 56px;
    letter-spacing: -0.05em;
    line-height: 1;
    color: #0a1a4a;
  }
  .trade-buy-amt .amt .sign {
    font-size: 28px;
    color: #6172a8;
    margin-top: 6px;
    vertical-align: top;
    display: inline-block;
  }
  .trade-buy-amt .equiv {
    font-size: 13px;
    color: #6172a8;
    font-weight: 600;
    margin-top: 4px;
  }
  .trade-buy-amt .equiv strong { color: #0a1a4a; }
  .trade-buy-fee {
    margin: 12px 16px 0;
    padding: 10px 14px;
    background: #f0f3ff;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
  }
  .trade-buy-fee .l { color: #6172a8; font-weight: 600; }
  .trade-buy-fee .r { color: #0a1a4a; font-weight: 800; }
  .trade-buy-fee .r .pct {
    color: #6172a8;
    font-weight: 600;
    margin-left: 4px;
  }

  /* ============= RECEIVE ============= */
  .receive {
    background: #fafbff;
    height: 100%;
    color: #0a1a4a;
    position: relative;
    overflow: hidden;
  }
  .receive .notif-banner {
    margin: 70px 16px 0;
    background: linear-gradient(155deg, #1d3aff 0%, #0a1a8a 100%);
    border-radius: 22px;
    padding: 18px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 30px -8px rgba(29, 58, 255, 0.3);
  }
  .receive .notif-banner::before {
    content: '$';
    position: absolute;
    right: -20px; bottom: -80px;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 240px;
    color: rgba(255,255,255,0.06);
    line-height: 1;
  }
  .receive .nb-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
  }
  .receive .nb-tag {
    background: rgba(110, 231, 119, 0.2);
    border: 1px solid rgba(110, 231, 119, 0.4);
    color: #6ee777;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .receive .nb-tag .dot {
    width: 5px; height: 5px;
    background: #6ee777;
    border-radius: 50%;
  }
  .receive .nb-time { font-size: 11px; color: rgba(255,255,255,0.7); font-weight: 600; }
  .receive .nb-amt {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 48px;
    letter-spacing: -0.04em;
    line-height: 1;
    position: relative;
    z-index: 2;
  }
  .receive .nb-amt .s { font-size: 24px; color: rgba(255,255,255,0.6); vertical-align: top; margin-top: 6px; display: inline-block; }
  .receive .nb-from {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    margin-top: 6px;
    font-weight: 500;
    position: relative;
    z-index: 2;
  }
  .receive .nb-from strong { color: #fff; font-weight: 800; }
  .receive .nb-msg {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    margin-top: 4px;
    font-style: italic;
    position: relative;
    z-index: 2;
  }
  .receive .nb-actions {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    position: relative;
    z-index: 2;
  }
  .receive .nb-actions .a {
    padding: 11px;
    border-radius: 12px;
    text-align: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 12px;
  }
  .receive .nb-actions .a1 { background: #fff; color: #1d3aff; }
  .receive .nb-actions .a2 {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
  }
  .receive h2 {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #0a1a4a;
    padding: 22px 22px 10px;
    letter-spacing: -0.01em;
  }
  .receive .opts { padding: 0 16px 80px; }
  .receive .opt {
    background: #fff;
    border: 1px solid rgba(10, 26, 74, 0.08);
    border-radius: 16px;
    padding: 13px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
  }
  .receive .opt .ic {
    width: 38px; height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-right: 11px;
    flex-shrink: 0;
  }
  .receive .opt .ic.blue { background: #1d3aff; }
  .receive .opt .ic.green { background: #06854a; }
  .receive .opt .ic.orange { background: #f7931a; }
  .receive .opt .info { flex: 1; }
  .receive .opt .info .t {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #0a1a4a;
    margin-bottom: 1px;
  }
  .receive .opt .info .s {
    font-size: 11px;
    color: #6172a8;
    line-height: 1.4;
  }
  .receive .opt .arr {
    color: #6172a8;
  }

/* ---- embedding shell: scales a fixed 360x780 screen into any phone frame ---- */
.lxs-shell { position: absolute; inset: 0; overflow: hidden; background: transparent; }
.lxs {
  width: 360px; height: 780px; position: relative; overflow: hidden;
  transform-origin: top left; transform: scale(var(--fs-scale, 1));
  font-family: 'DM Sans', sans-serif; color: #1a1a1a; text-align: left;
}
.screen-slide.lxs-slide, .wallet-story-screen.lxs-slide { padding: 0; }