@font-face {
      font-family: "Vazir";
      src: url("/static/fonts/Vazir-Regular.woff2") format("woff2");
      font-style: normal;
      font-weight: 400;
      font-display: swap;
    }
    @font-face {
      font-family: "Vazir";
      src: url("/static/fonts/Vazir-Bold.woff2") format("woff2");
      font-style: normal;
      font-weight: 700 900;
      font-display: swap;
    }

    /* ===== Paydakht Wallet App UI — v8.1.0 ===== */
    .wallet-app { width:min(1120px, calc(100% - 34px)); margin:18px auto 90px; }
    .wallet-header {
      position:sticky; top:10px; z-index:160; min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:18px;
      padding:10px 12px 10px 16px; border:1px solid rgba(216,232,225,.92); border-radius:24px;
      background:rgba(250,253,251,.92); box-shadow:0 10px 35px rgba(11,58,43,.08); backdrop-filter:blur(18px);
    }
    .wallet-user-block,.wallet-header-actions,.wallet-greeting { display:flex; align-items:center; }
    .wallet-user-block { gap:11px; min-width:0; }
    .wallet-avatar { width:48px; height:48px; display:grid; place-items:center; flex:0 0 auto; border-radius:16px; background:#e9f7f1; }
    .wallet-avatar img { width:38px; height:38px; object-fit:contain; }
    .wallet-greeting { align-items:flex-start; flex-direction:column; min-width:0; }
    .wallet-greeting span { color:var(--muted); font-size:12px; }
    .wallet-greeting strong { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#173c31; font-size:18px; }
    .wallet-header-actions { gap:7px; }
    .wallet-sync { margin-left:4px; }
    .wallet-logout { color:#8f3340; }

    .wallet-home { display:grid; gap:16px; margin-top:18px; }
    .purchase-power-card {
      position:relative; overflow:hidden; min-height:300px; display:flex; flex-direction:column; justify-content:space-between;
      padding:28px 30px; border-radius:34px; color:#fff;
      background:linear-gradient(145deg,#075944 0%,#087a59 54%,#11a876 100%);
      box-shadow:0 25px 65px rgba(4,92,65,.24);
    }
    .purchase-power-card::before { content:""; position:absolute; width:280px; height:280px; left:-85px; top:-110px; border-radius:50%; background:rgba(255,255,255,.07); }
    .purchase-power-card::after { content:""; position:absolute; width:190px; height:190px; right:-58px; bottom:-80px; border-radius:50%; background:rgba(255,255,255,.055); }
    .purchase-power-top,.purchase-power-breakdown,.purchase-power-foot,.purchase-power-value { position:relative; z-index:1; }
    .purchase-power-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
    .purchase-power-label { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:900; }
    .purchase-power-top small { display:block; margin-top:5px; color:rgba(255,255,255,.72); font-size:12px; }
    .wallet-visibility { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:15px; color:#fff; background:rgba(255,255,255,.1); cursor:pointer; }
    .purchase-power-value { display:flex; align-items:baseline; gap:9px; margin:18px 0 21px; direction:ltr; justify-content:flex-end; text-align:right; }
    .purchase-power-value #purchasePowerAmount { font-size:54px; line-height:1; font-weight:950; letter-spacing:-1.5px; }
    .purchase-power-value > span:last-child { font-size:15px; opacity:.82; }
    .purchase-power-breakdown { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
    .power-part { padding:14px 16px; border:1px solid rgba(255,255,255,.16); border-radius:20px; background:rgba(255,255,255,.09); backdrop-filter:blur(8px); }
    .power-part > span { display:flex; align-items:center; gap:7px; color:rgba(255,255,255,.76); font-size:12px; }
    .power-part strong { display:block; margin-top:5px; color:#fff; font-size:18px; }
    .wallet-credit-part { background:rgba(238,255,248,.15); }
    .purchase-power-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:17px; padding-top:14px; border-top:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.78); font-size:12px; }
    .purchase-power-foot > span { direction:ltr; }
    .purchase-power-foot button { display:flex; align-items:center; gap:7px; color:#fff; background:transparent; cursor:pointer; font-size:12px; }

    .wallet-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; }
    .wallet-action { min-height:112px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:12px 8px; border:1px solid #dfece6; border-radius:24px; color:#29463b; background:#fff; box-shadow:0 10px 28px rgba(11,58,43,.055); cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; }
    .wallet-action:hover { transform:translateY(-2px); box-shadow:0 15px 34px rgba(11,58,43,.09); }
    .wallet-action-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:17px; color:#087a55; background:#e9f7f1; font-size:19px; }
    .wallet-action strong { font-size:14px; }
    .wallet-action small { color:#84928c; font-size:10px; }
    .wallet-action.primary-action .wallet-action-icon { color:#fff; background:linear-gradient(145deg,#087a55,#11a876); box-shadow:0 9px 20px rgba(8,122,85,.2); }

    .bnpl-wallet-card,.wallet-content-card,.wallet-loyalty .loyalty-panel { padding:22px; border:1px solid #e0ebe6; border-radius:28px; background:#fff; box-shadow:0 12px 32px rgba(12,57,43,.055); }
    .wallet-section-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:17px; }
    .wallet-section-head h2 { margin:0; color:#1c3a30; font-size:21px; }
    .wallet-section-head p { margin:3px 0 0; color:#84928c; font-size:12px; }
    .compact-head { margin-bottom:14px; }
    .wallet-eyebrow { color:#168360; font-size:11px; font-weight:900; }
    .wallet-status-dot { display:flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; color:#08704f; background:#e8f8f1; font-size:11px; font-weight:800; }
    .wallet-status-dot i { font-size:7px; }
    .bnpl-wallet-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
    .wallet-column { display:flex; flex-direction:column; gap:14px; }
    .bnpl-wallet-stat { min-height:104px; display:flex; flex-direction:column; justify-content:flex-start; padding:15px 17px; border:1px solid #e2eee9; border-radius:20px; background:#f8fbf9; }
    .bnpl-wallet-stat > span { color:#7b8b84; font-size:12px; }
    .bnpl-wallet-stat strong { display:block; margin-top:5px; color:#203e34; font-size:20px; }
    .bnpl-wallet-stat small { margin-top:2px; color:#77877f; font-size:11px; }
    .next-installment-stat { background:linear-gradient(145deg,#f3fbf7,#eaf8f1); }
    .next-installment-stat strong { color:#087a55; }
    .wallet-inline-action { width:100%; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:9px; margin-top:11px; padding:0 13px; border-radius:15px; color:#456157; background:#f3f7f5; cursor:pointer; font-size:12px; }
    .wallet-inline-action span { flex:1; text-align:right; }
    .wallet-content-card { scroll-margin-top:95px; }
    .wallet-loyalty { margin:0; scroll-margin-top:95px; }
    #bnplSection,#mainContent { scroll-margin-top:95px; }

    .wallet-app .request-item,.wallet-app .transaction-item { border:1px solid #e6efeb; background:#fbfdfc; box-shadow:none; }
    .wallet-app .transaction-item { border-radius:18px; }
    .wallet-app #transactionsList { max-height:440px; }
    .wallet-app .loyalty-org-card { background:#fbfdfc; box-shadow:none; }

    .wallet-bottom-nav { grid-template-columns:repeat(5,1fr); }
    .wallet-bottom-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border-radius:15px; color:#708078; text-decoration:none; font-size:11px; }
    .wallet-bottom-nav a i { font-size:17px; }
    .wallet-bottom-nav .bottom-qr { position:relative; overflow:visible; background:transparent !important; }
    .wallet-bottom-nav .bottom-qr > span { width:52px; height:52px; display:grid; place-items:center; margin-top:-28px; border:5px solid #f5faf7; border-radius:20px; color:#fff; background:linear-gradient(145deg,#087a55,#11a876); box-shadow:0 10px 24px rgba(8,122,85,.28); font-size:20px; }
    .wallet-bottom-nav .bottom-qr small { margin-top:1px; color:#087a55; font-size:10px; font-weight:800; }

    @media (min-width: 901px) {
      .wallet-home { grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); align-items:start; }
      .purchase-power-card { grid-column:1; grid-row:1 / span 2; }
      .wallet-actions { grid-column:2; grid-row:1; grid-template-columns:repeat(2,1fr); }
      .bnpl-wallet-card { grid-column:2; grid-row:2; }
      #paymentRequestsSection,#loyaltySection,#transactionsSection { grid-column:1 / -1; }
    }

    @media (max-width: 640px) {
      body { background:#f5f8f6; }
      .wallet-app { width:100%; margin:0 0 92px; padding:0 12px; }
      .wallet-header { top:0; min-height:66px; margin:0 -12px; padding:max(8px, env(safe-area-inset-top)) 14px 8px; border-width:0 0 1px; border-radius:0; box-shadow:0 8px 28px rgba(11,58,43,.06); }
      .wallet-avatar { width:40px; height:40px; border-radius:14px; }
      .wallet-avatar img { width:31px; height:31px; }
      .wallet-greeting strong { max-width:130px; font-size:16px; }
      .wallet-sync { display:none; }
      .wallet-header-actions { gap:4px; }
      .wallet-logout { display:none; }
      .wallet-home { gap:12px; margin-top:12px; }
      .purchase-power-card { min-height:282px; padding:22px 20px; border-radius:28px; }
      .purchase-power-value { margin:14px 0 18px; }
      .purchase-power-value #purchasePowerAmount { font-size:42px; }
      .purchase-power-breakdown { gap:8px; }
      .power-part { padding:12px; border-radius:17px; }
      .power-part strong { font-size:15px; }
      .purchase-power-foot button span { display:none; }
      .wallet-actions { grid-template-columns:repeat(4,1fr); gap:7px; }
      .wallet-action { min-height:93px; padding:9px 3px; border-radius:20px; box-shadow:none; }
      .wallet-action-icon { width:43px; height:43px; border-radius:15px; }
      .wallet-action strong { font-size:12px; }
      .wallet-action small { display:none; }
      .bnpl-wallet-card,.wallet-content-card,.wallet-loyalty .loyalty-panel { padding:16px; border-radius:24px; box-shadow:none; }
      .wallet-section-head { margin-bottom:13px; }
      .wallet-section-head h2 { font-size:18px; }
      .bnpl-wallet-stat { min-height:92px; padding:13px; border-radius:18px; }
      .bnpl-wallet-stat strong { font-size:16px; }
      .wallet-bottom-nav { right:10px; left:10px; grid-template-columns:repeat(5,1fr); height:68px; padding:7px 5px; border-radius:22px; }
      .wallet-bottom-nav button,.wallet-bottom-nav a { font-size:10px; }
      .wallet-bottom-nav .bottom-qr > span { width:50px; height:50px; }
      .install-pwa-btn { bottom:88px; }
      .toast { bottom:94px; }
    }

    @media (max-width: 390px) {
      .wallet-app { padding:0 8px; }
      .wallet-header { margin:0 -8px; }
      .purchase-power-card { padding:20px 17px; }
      .purchase-power-value #purchasePowerAmount { font-size:36px; }
      .power-part > span { font-size:10px; }
      .power-part strong { font-size:14px; }
      .wallet-action { min-height:88px; }
      .bnpl-wallet-grid { grid-template-columns:1fr; }
      .wallet-column { gap:12px; }
    }
    /* v8.1.0.1 quick actions fixed bottom */
    .wallet-bottom-nav { display:none !important; }
    .wallet-app { margin-bottom: 128px; }
    .wallet-home { padding-bottom: 10px; }
    .wallet-actions {
      position: fixed; right: 10px; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
      z-index: 220;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      padding: 8px;
      border: 1px solid rgba(216,232,225,.95);
      border-radius: 24px;
      background: rgba(250,253,251,.96);
      box-shadow: 0 16px 42px rgba(11,58,43,.12);
      backdrop-filter: blur(14px);
    }
    .wallet-action {
      min-height: 84px;
      padding: 10px 4px 8px;
      border-radius: 20px;
      box-shadow: none;
      background: transparent;
      border-color: transparent;
    }
    .wallet-action:hover { transform:none; box-shadow:none; }
    .wallet-action-icon {
      width: 46px; height: 46px; border-radius: 16px;
    }
    .wallet-action strong { font-size: 12px; }
    .wallet-action small { color:#7f8f88; font-size: 10px; }
    .wallet-action.primary-action {
      background: linear-gradient(180deg, rgba(8,122,85,.08), rgba(8,122,85,.02));
      border-color: rgba(8,122,85,.12);
    }
    @media (min-width: 901px) {
      .wallet-home { grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); align-items:start; }
      .purchase-power-card { grid-column:1; grid-row:1 / span 2; }
      .bnpl-wallet-card { grid-column:2; grid-row:1; }
      #paymentRequestsSection,#loyaltySection,#transactionsSection { grid-column:1 / -1; }
      .wallet-actions {
        width: min(920px, calc(100% - 40px));
        margin: 0 auto;
      }
    }
    @media (max-width: 640px) {
      .wallet-app { margin:0 0 118px; }
      .wallet-actions {
        right: 8px; left: 8px; bottom: calc(8px + env(safe-area-inset-bottom));
        gap: 4px; padding: 6px; border-radius: 22px;
      }
      .wallet-action { min-height: 76px; padding: 8px 2px 6px; border-radius: 18px; }
      .wallet-action-icon { width: 42px; height: 42px; }
      .wallet-action strong { font-size: 11px; }
      .wallet-action small { font-size: 9px; }
      .toast { bottom: 110px; }
      .install-pwa-btn { bottom: 104px; }
    }
    @media (max-width: 390px) {
      .wallet-actions { gap: 2px; }
      .wallet-action strong { font-size: 10px; }
      .wallet-action-icon { width: 38px; height: 38px; font-size: 16px; }
    }

:root {
      --primary: #087a55;
      --primary-strong: #07583f;
      --primary-soft: #e9f8f1;
      --accent: #12b981;
      --ink: #10231c;
      --muted: #64746d;
      --surface: #ffffff;
      --surface-soft: #f6f9f8;
      --line: #dce7e2;
      --danger: #dc3f4d;
      --warning: #db8b12;
      --success: #087a55;
      --shadow-sm: 0 8px 24px rgba(15, 50, 38, .07);
      --shadow-lg: 0 28px 80px rgba(9, 56, 41, .14);
      --radius-sm: 16px;
      --radius-md: 24px;
      --radius-lg: 34px;
      --font: "Vazir", Tahoma, Arial, sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      min-height: 100vh;
      padding: 0;
      overflow-x: hidden;
      direction: rtl;
      color: var(--ink);
      font-family: var(--font);
      font-size: 18px;
      line-height: 1.65;
      background:
        radial-gradient(circle at 92% 3%, rgba(18, 185, 129, .14), transparent 30rem),
        radial-gradient(circle at 5% 90%, rgba(8, 122, 85, .09), transparent 32rem),
        #f4f8f6;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    button, input, select, textarea { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button { border: 0; }
    a { color: inherit; }
    [hidden] { display: none !important; }

    .skip-link {
      position: fixed;
      top: -80px;
      right: 20px;
      z-index: 5000;
      padding: 10px 18px;
      border-radius: 0 0 14px 14px;
      color: #fff;
      background: var(--primary-strong);
      text-decoration: none;
      transition: top .2s ease;
    }
    .skip-link:focus { top: 0; }

    .ambient-shape {
      position: fixed;
      z-index: -1;
      border-radius: 999px;
      filter: blur(2px);
      pointer-events: none;
    }
    .ambient-shape.one {
      width: 220px; height: 220px; top: -80px; right: -70px;
      background: rgba(18, 185, 129, .11);
    }
    .ambient-shape.two {
      width: 280px; height: 280px; bottom: -120px; left: -90px;
      background: rgba(8, 122, 85, .08);
    }

    /* Login */
    .login-shell {
      width: min(1160px, calc(100% - 36px));
      min-height: min(760px, calc(100vh - 48px));
      margin: 24px auto;
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.85);
      border-radius: 40px;
      background: rgba(255,255,255,.82);
      box-shadow: var(--shadow-lg);
      backdrop-filter: blur(18px);
    }

    .login-showcase {
      position: relative;
      isolation: isolate;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100%;
      padding: clamp(34px, 5vw, 62px);
      overflow: hidden;
      color: #fff;
      background: linear-gradient(145deg, #064934 0%, #087a55 58%, #13a673 100%);
    }
    .login-showcase::before,
    .login-showcase::after {
      content: "";
      position: absolute;
      z-index: -1;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.13);
    }
    .login-showcase::before { width: 470px; height: 470px; top: -235px; left: -120px; }
    .login-showcase::after { width: 310px; height: 310px; bottom: -150px; right: -80px; }

    .brand-lockup { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 28px; }
    .brand-lockup img { width: 54px; height: 54px; object-fit: contain; padding: 7px; border-radius: 18px; background: rgba(255,255,255,.94); }
    .brand-lockup small { display: block; margin-top: -4px; opacity: .72; font-size: 14px; font-weight: 400; }

    .showcase-copy { max-width: 570px; margin: 54px 0; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 7px 13px; border: 1px solid rgba(255,255,255,.22);
      border-radius: 999px; background: rgba(255,255,255,.09);
      font-size: 15px;
    }
    .showcase-copy h1 { margin: 20px 0 14px; font-size: clamp(40px, 5vw, 66px); line-height: 1.18; letter-spacing: -.7px; }
    .showcase-copy p { margin: 0; max-width: 500px; color: rgba(255,255,255,.82); font-size: 21px; }

    .showcase-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .showcase-feature {
      min-height: 112px; padding: 17px;
      border: 1px solid rgba(255,255,255,.14); border-radius: 22px;
      background: rgba(255,255,255,.08); backdrop-filter: blur(8px);
    }
    .showcase-feature i { font-size: 21px; margin-bottom: 9px; }
    .showcase-feature strong { display: block; font-size: 17px; }
    .showcase-feature span { display: block; margin-top: 3px; color: rgba(255,255,255,.67); font-size: 13px; line-height: 1.5; }

    .login-panel { display: flex; align-items: center; padding: clamp(30px, 5vw, 68px); background: rgba(255,255,255,.9); }
    .login-card { width: 100%; max-width: 430px; margin: auto; }
    .mobile-brand { display: none; margin-bottom: 32px; color: var(--primary-strong); }
    .login-card h2 { margin: 0 0 8px; font-size: 34px; line-height: 1.3; }
    .login-card > p { margin: 0 0 30px; color: var(--muted); font-size: 17px; }

    .form-group { margin-bottom: 17px; }
    .form-group label { display: block; margin: 0 3px 8px; color: #40554c; font-size: 15px; font-weight: 700; }
    .input-wrap { position: relative; }
    .input-wrap > i {
      position: absolute; top: 50%; right: 17px; transform: translateY(-50%);
      z-index: 1; color: #809088; font-size: 17px; pointer-events: none;
    }
    .input-wrap input {
      width: 100%; height: 56px; padding: 0 48px 0 48px;
      border: 1px solid var(--line); border-radius: 18px;
      color: var(--ink); background: #fbfdfc; outline: none;
      transition: border-color .2s, box-shadow .2s, background .2s;
    }
    .input-wrap input::placeholder { color: #9aa8a2; }
    .input-wrap input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgba(18,185,129,.12); }
    .password-toggle {
      position: absolute; top: 50%; left: 7px; transform: translateY(-50%);
      width: 34px; height: 34px; display: grid; place-items: center;
      border-radius: 13px; color: #718179; background: transparent; cursor: pointer;
    }
    .password-toggle:hover { background: var(--primary-soft); color: var(--primary); }

    .primary-btn, .secondary-btn, .danger-btn, .ghost-btn {
      min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      padding: 11px 20px; border-radius: 16px; cursor: pointer; text-decoration: none;
      font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    }
    .primary-btn { color: #fff; background: linear-gradient(135deg, var(--primary), #10a873); box-shadow: 0 14px 28px rgba(8,122,85,.2); }
    .primary-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 32px rgba(8,122,85,.28); }
    .primary-btn:active, .secondary-btn:active, .danger-btn:active, .ghost-btn:active { transform: scale(.98); }
    .primary-btn:disabled { opacity: .62; cursor: wait; transform: none; }
    .secondary-btn { color: var(--primary-strong); background: var(--primary-soft); }
    .danger-btn, button.danger { color: #fff; background: var(--danger); }
    .ghost-btn { color: #42564e; background: #f0f4f2; }
    .wide-btn { width: 100%; }

    .server-status {
      margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 7px;
      color: var(--muted); font-size: 14px;
    }
    .security-note {
      margin-top: 25px; display: flex; align-items: flex-start; gap: 8px;
      padding: 14px 15px; border-radius: 16px; color: #52665d; background: var(--surface-soft); font-size: 14px;
    }
    .security-note i { margin-top: 5px; color: var(--primary); }

    /* App */
    .app-shell { width: min(1120px, calc(100% - 32px)); margin: 18px auto 110px; }
    .app-header {
      position: sticky; top: 12px; z-index: 100;
      min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
      padding: 10px 14px 10px 20px; border: 1px solid rgba(255,255,255,.88); border-radius: 24px;
      background: rgba(255,255,255,.86); box-shadow: var(--shadow-sm); backdrop-filter: blur(18px);
    }
    .app-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
    .app-brand img { width: 48px; height: 48px; object-fit: contain; padding: 6px; border-radius: 16px; background: var(--primary-soft); }
    .app-brand strong { display: block; font-size: 21px; line-height: 1.2; }
    .app-brand span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
    .header-actions { display: flex; align-items: center; gap: 8px; }
    .icon-button {
      width: 46px; height: 46px; display: grid; place-items: center;
      border-radius: 15px; color: #40534b; background: #f3f7f5; cursor: pointer;
      transition: .18s ease;
    }
    .icon-button:hover { color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); }
    .notification-button{position:relative}.notification-badge{position:absolute;top:-5px;left:-5px;min-width:19px;height:19px;padding:0 5px;display:none;place-items:center;border:2px solid #fff;border-radius:999px;color:#fff;background:#dc3f4d;font-size:10px;font-weight:900;line-height:1}.notification-badge.show{display:grid}
    .notification-layer{position:fixed;inset:0;z-index:2600;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(3,25,22,.42);backdrop-filter:blur(6px)}.notification-layer.show{display:flex}
    .notification-panel{width:min(430px,100%);max-height:min(720px,calc(100vh - 40px));display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.9);border-radius:26px;background:#fff;box-shadow:0 28px 80px rgba(0,0,0,.24)}
    .notification-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 18px;border-bottom:1px solid var(--line)}.notification-head h2{margin:0;font-size:20px}.notification-head p{margin:2px 0 0;color:var(--muted);font-size:12px}.notification-head-actions{display:flex;gap:7px}.notification-head-actions button{min-height:36px;padding:7px 10px;border-radius:12px;color:#486057;background:#f1f6f3;cursor:pointer}
    .notification-list{overflow:auto;padding:10px}.notification-item{position:relative;padding:14px 14px 13px;margin-bottom:8px;border:1px solid #e3ebe7;border-radius:17px;background:#fbfdfc;cursor:pointer}.notification-item.unread{border-color:#a9dec9;background:#f2fbf7;box-shadow:inset -3px 0 0 var(--primary)}.notification-item.warning{border-color:#f1c6ca;background:#fff8f8}.notification-item.important{border-color:#f0dba9;background:#fffdf6}
    .notification-item-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.notification-item-title{display:flex;align-items:flex-start;gap:9px}.notification-item-icon{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border-radius:12px;color:var(--primary);background:var(--primary-soft)}.notification-item.warning .notification-item-icon{color:#a72b38;background:#fff0f2}.notification-item.important .notification-item-icon{color:#9a6710;background:#fff5dc}.notification-item h3{margin:0;font-size:15px}.notification-item p{margin:5px 0 0;color:#607169;font-size:12px;line-height:1.8}.notification-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;color:#829089;font-size:10px}.notification-unread-dot{width:8px;height:8px;border-radius:50%;background:var(--primary)}
    @media(max-width:640px){.notification-layer{align-items:flex-end;padding:0}.notification-panel{width:100%;max-height:82vh;border-radius:28px 28px 0 0}.notification-head{padding:15px 16px}.notification-list{padding:8px}}


    .dashboard-head {
      display: flex; align-items: center; justify-content: space-between; gap: 18px;
      margin: 28px 3px 18px;
    }
    .welcome-copy h1 { margin: 0; font-size: clamp(28px, 4vw, 38px); line-height: 1.3; }
    .welcome-copy p { margin: 3px 0 0; color: var(--muted); font-size: 15px; }
    .sync-pill {
      display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
      padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px;
      color: #40544b; background: rgba(255,255,255,.75); font-size: 14px;
    }
    .sync-status { width: 9px; height: 9px; display: inline-block; border-radius: 999px; }
    .sync-connected { background: var(--success); box-shadow: 0 0 0 4px rgba(8,122,85,.12); }
    .sync-disconnected { background: var(--danger); box-shadow: 0 0 0 4px rgba(220,63,77,.10); }
    .sync-connecting { background: var(--warning); animation: pulse 1s infinite alternate; }
    @keyframes pulse { from { opacity: .38; } to { opacity: 1; } }

    .hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); gap: 18px; }
    .balance-box {
      position: relative; isolation: isolate; min-height: 258px; overflow: hidden;
      display: flex; flex-direction: column; justify-content: space-between;
      padding: clamp(25px, 4vw, 38px); border-radius: 32px; color: #fff;
      background: linear-gradient(135deg, #063e2e 0%, #087a55 60%, #12a873 100%);
      box-shadow: 0 26px 54px rgba(7,88,63,.21);
    }
    .balance-box::before,
    .balance-box::after { content: ""; position: absolute; z-index: -1; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); }
    .balance-box::before { width: 310px; height: 310px; top: -185px; left: -65px; }
    .balance-box::after { width: 220px; height: 220px; bottom: -135px; right: -60px; }
    .balance-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .balance-label { display: flex; align-items: center; gap: 8px; font-size: 15px; color: rgba(255,255,255,.82); }
    .balance-label i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: rgba(255,255,255,.12); }
    .balance-toggle { width: 40px; height: 40px; border-radius: 13px; color: #fff; background: rgba(255,255,255,.12); cursor: pointer; }
    .balance-amount { margin: 10px 0 0; font-size: clamp(42px, 7vw, 64px); font-weight: 900; line-height: 1.1; letter-spacing: -.7px; }
    .balance-unit { margin-right: 6px; color: rgba(255,255,255,.72); font-size: 18px; font-weight: 400; }
    .credit-power { margin-top: 14px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:13px; }
    .credit-power strong { font-size:15px; color:#fff; }
    .card-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; color: rgba(255,255,255,.75); font-size: 14px; }
    #cardNumber { direction: ltr; unicode-bidi: isolate; letter-spacing: 1.7px; }

    .quick-card {
      padding: 22px; border: 1px solid rgba(255,255,255,.9); border-radius: 30px;
      background: rgba(255,255,255,.9); box-shadow: var(--shadow-sm);
    }
    .quick-card h2 { margin: 0 0 4px; font-size: 22px; }
    .quick-card > p { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
    .scan-main {
      width: 100%; min-height: 94px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
      padding: 18px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, var(--primary), #10a873); cursor: pointer;
      box-shadow: 0 15px 30px rgba(8,122,85,.2); transition: .2s ease;
    }
    .scan-main:hover { transform: translateY(-2px); }
    .scan-main i { font-size: 26px; }
    .scan-main span { font-size: 18px; font-weight: 800; }
    .quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
    .quick-row button {
      min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 7px;
      border-radius: 15px; color: #385048; background: #f1f6f3; cursor: pointer;
    }
    .quick-row button:hover { color: var(--primary); background: var(--primary-soft); }


    /* Loyalty card */
    .loyalty-section { margin-top: 0; }
    .loyalty-panel {
      padding: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.92); border-radius: 30px;
      background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,249,244,.96)); box-shadow: var(--shadow-sm);
    }
    .loyalty-panel-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
    .loyalty-title { display:flex; align-items:center; gap:11px; }
    .loyalty-title-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:16px; color:#8b6714; background:#fff5cf; font-size:19px; }
    .loyalty-title h2 { margin:0; font-size:22px; }
    .loyalty-title p { margin:2px 0 0; color:var(--muted); font-size:13px; }
    .loyalty-rule-pill { padding:8px 12px; border-radius:999px; color:#76570e; background:#fff5cf; font-size:12px; font-weight:800; white-space:nowrap; }
    .loyalty-org-card { padding:18px; border:1px solid #dfece6; border-radius:24px; background:rgba(255,255,255,.88); }
    .loyalty-org-card + .loyalty-org-card { margin-top:12px; }
    .loyalty-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:15px; }
    .loyalty-org-name { font-size:17px; font-weight:900; color:#183c2f; }
    .loyalty-cycle { margin-top:3px; color:var(--muted); font-size:12px; }
    .loyalty-next { min-width:180px; text-align:left; }
    .loyalty-next strong { display:block; color:var(--primary); font-size:17px; }
    .loyalty-next span { display:block; margin-top:2px; color:var(--muted); font-size:12px; }
    .loyalty-stamps { display:grid; grid-template-columns:repeat(5, minmax(54px,1fr)); gap:8px; }
    .loyalty-stamp {
      position:relative; min-height:74px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
      border:1px dashed #c9d8d1; border-radius:17px; color:#718178; background:#f8fbf9;
    }
    .loyalty-stamp .stamp-index { font-size:12px; font-weight:900; }
    .loyalty-stamp .stamp-reward { font-size:11px; font-weight:900; color:#8b6714; }
    .loyalty-stamp.completed { border-style:solid; border-color:#91d2b8; color:#fff; background:linear-gradient(145deg, #087a55, #10a873); box-shadow:0 8px 18px rgba(8,122,85,.14); }
    .loyalty-stamp.completed .stamp-reward { color:#fff4c7; }
    .loyalty-stamp .stamp-check { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:#718178; background:#eaf1ed; font-size:11px; }
    .loyalty-stamp.completed .stamp-check { color:#087a55; background:#fff; }
    .loyalty-card-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:13px; padding-top:12px; border-top:1px dashed #dce7e2; color:#66776f; font-size:12px; }
    .loyalty-card-foot strong { color:#2d453c; }

    .content-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
    .content-stack { display:grid; gap:18px; min-width:0; }
    #transactionsSection { min-width:0; }
    .content-card {
      padding: 22px; border: 1px solid rgba(255,255,255,.92); border-radius: 30px;
      background: rgba(255,255,255,.9); box-shadow: var(--shadow-sm);
    }
    .section-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
    .section-title-wrap { display: flex; align-items: center; gap: 11px; }
    .section-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; color: var(--primary); background: var(--primary-soft); }
    .section-header h2 { margin: 0; font-size: 22px; line-height: 1.25; }
    .section-header p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
    .count-badge { min-width: 30px; height: 30px; display: grid; place-items: center; padding: 0 8px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 14px; font-weight: 800; }

    .request-item, .transaction-item {
      position: relative; padding: 17px; margin-bottom: 12px;
      border: 1px solid #e6eeea; border-radius: 21px; background: #fbfdfc;
      transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }
    .request-item:hover, .transaction-item:hover { transform: translateY(-1px); border-color: #bce4d4; box-shadow: 0 10px 22px rgba(13,77,56,.06); }
    .request-item:last-child, .transaction-item:last-child { margin-bottom: 0; }
    .merchant-name { display: flex; align-items: center; gap: 8px; color: #183c2f; font-size: 18px; font-weight: 800; }
    .merchant-name i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; color: var(--primary); background: var(--primary-soft); font-size: 14px; }
    .amount-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; color: #687871; font-size: 14px; }
    .amount-row span:last-child { color: #2d453c; text-align: left; }
    .final-amount { color: var(--primary) !important; font-size: 18px; font-weight: 900; }
    .transaction-item .amount { color: var(--danger) !important; font-size: 18px; font-weight: 900; }
    .transaction-date { margin-top: 11px; padding-top: 10px; border-top: 1px dashed #dce7e2; color: #839088; font-size: 12px; }

    /* سوابق خرید: حداکثر حدود ۳ تراکنش در دید و ادامه به صورت اسکرول */
    #transactionsList {
      max-height: 430px;
      overflow-y: auto;
      overflow-x: hidden;
      padding-inline-start: 4px;
      padding-inline-end: 2px;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: #b8cec4 transparent;
    }
    #transactionsList::-webkit-scrollbar { width: 6px; }
    #transactionsList::-webkit-scrollbar-track { background: transparent; }
    #transactionsList::-webkit-scrollbar-thumb { background: #b8cec4; border-radius: 999px; }
    #transactionsList::-webkit-scrollbar-thumb:hover { background: #8fb5a5; }
    .button-group { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 9px; margin-top: 15px; }
    .button-group button { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 14px; color: #fff; background: var(--primary); cursor: pointer; font-weight: 800; }
    .button-group button.danger { background: #fff0f1; color: var(--danger); }

    .empty-state { padding: 28px 16px; text-align: center; color: #87968f; }
    .empty-state i { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 17px; color: var(--primary); background: var(--primary-soft); font-size: 20px; }
    .empty-state strong { display: block; color: #52665d; font-size: 15px; }
    .empty-state span { display: block; margin-top: 3px; font-size: 13px; }

    .status { margin-top: 12px; padding: 9px 12px; border-radius: 13px; text-align: center; font-size: 13px; }
    .status.success { color: #17613f; background: #e5f7ee; }
    .status.error { color: #9b2733; background: #ffecee; }

    .loading { width: 18px; height: 18px; display: inline-block; vertical-align: middle; border: 2px solid currentColor; border-top-color: transparent; border-radius: 999px; animation: spin .7s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Scanner */
    .qr-scanner {
      position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
      padding: 22px; background: rgba(2,16,11,.82); backdrop-filter: blur(12px);
    }
    .qr-scanner-box { width: min(500px, 100%); overflow: hidden; border-radius: 30px; background: #fff; box-shadow: 0 30px 90px rgba(0,0,0,.35); }
    .qr-scanner-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 19px; border-bottom: 1px solid var(--line); }
    .qr-scanner-header strong { font-size: 20px; }
    .close-scanner { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 14px; color: #55685f; background: #f0f4f2; cursor: pointer; }
    .scanner-stage { position: relative; margin: 18px; overflow: hidden; border-radius: 22px; background: #07130f; }
    .qr-reader { min-height: 310px; width: 100%; position: relative; }
    .qr-reader video { width: 100%; min-height: 310px; display: block; object-fit: cover; background: #000; }
    .scanner-frame { position: absolute; inset: 18%; z-index: 3; pointer-events: none; border: 2px solid rgba(255,255,255,.7); border-radius: 22px; box-shadow: 0 0 0 999px rgba(0,0,0,.25); }
    .scanner-frame::after { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: #2ef2ab; box-shadow: 0 0 12px #2ef2ab; animation: scanline 2s ease-in-out infinite alternate; }
    @keyframes scanline { from { transform: translateY(-62px); } to { transform: translateY(62px); } }
    .scanner-help { padding: 0 20px 20px; text-align: center; color: var(--muted); font-size: 14px; }

    /* Payment confirmation */
    .payment-modal {
      position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center;
      padding: 22px; background: rgba(2,16,11,.72); backdrop-filter: blur(10px);
    }
    .payment-modal-card {
      width: min(440px, 100%); padding: 24px; border-radius: 28px; background: #fff;
      box-shadow: 0 30px 90px rgba(0,0,0,.32); animation: modalIn .22s ease-out;
    }
    @keyframes modalIn { from { opacity: 0; transform: translateY(15px) scale(.98); } to { opacity: 1; transform: none; } }
    .payment-modal-icon {
      width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto 14px;
      border-radius: 20px; color: var(--primary); background: var(--primary-soft); font-size: 25px;
    }
    .payment-modal-card h2 { margin: 0; text-align: center; font-size: 25px; }
    .payment-modal-card > p { margin: 5px 0 20px; text-align: center; color: var(--muted); font-size: 14px; }
    .payment-summary { overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: #fbfdfc; }
    .payment-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
    .payment-summary-row:last-child { border-bottom: 0; }
    .payment-summary-row span { color: var(--muted); font-size: 14px; }
    .payment-summary-row strong { color: #263e35; text-align: left; }
    .payment-summary-row.total strong { color: var(--primary); font-size: 22px; }
    .payment-note { margin-top: 13px; display: flex; align-items: flex-start; gap: 8px; color: #697a72; font-size: 13px; }
    .payment-note i { margin-top: 5px; color: var(--primary); }
    .payment-modal-actions { display: grid; grid-template-columns: 1fr .72fr; gap: 9px; margin-top: 20px; }


    /* BNPL offer modal */
    .bnpl-offer-modal {
      position: fixed; inset: 0; z-index: 2200; display: flex; align-items: center; justify-content: center;
      padding: 22px; background: rgba(4, 20, 14, .72); backdrop-filter: blur(14px);
    }
    .bnpl-offer-card {
      width: min(420px, calc(100% - 28px)); overflow: hidden; border-radius: 26px;
      border: 1px solid rgba(255,255,255,.7);
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,249,.97));
      box-shadow: 0 32px 90px rgba(0,0,0,.30); animation: modalIn .24s ease-out;
    }
    .bnpl-offer-hero {
      position: relative; padding: 18px 18px 15px; color: #fff;
      background: linear-gradient(140deg, #054b35 0%, #087a55 52%, #19b982 100%);
      overflow: hidden;
    }
    .bnpl-offer-hero::before,
    .bnpl-offer-hero::after {
      content: ""; position: absolute; border-radius: 999px; pointer-events: none;
      background: rgba(255,255,255,.10);
    }
    .bnpl-offer-hero::before { width: 180px; height: 180px; top: -90px; left: -40px; }
    .bnpl-offer-hero::after { width: 120px; height: 120px; bottom: -48px; right: 18px; }
    .bnpl-offer-topline {
      display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px;
    }
    .bnpl-badge {
      display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px;
      background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); font-size: 14px; font-weight: 700;
    }
    .bnpl-close {
      width: 34px; height: 34px; display: grid; place-items: center; border-radius: 15px;
      color: #fff; background: rgba(255,255,255,.12); cursor: pointer;
    }
    .bnpl-close:hover { background: rgba(255,255,255,.20); }
    .bnpl-offer-hero h2 { margin: 0 0 5px; font-size: 25px; line-height: 1.2; }
    .bnpl-offer-hero p { margin: 0; color: rgba(255,255,255,.86); font-size: 13px; line-height:1.55; }
    .bnpl-offer-body { padding: 14px 16px 16px; }
    .bnpl-merchant-pill {
      display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px 10px;
      border-radius: 999px; color: var(--primary-strong); background: var(--primary-soft); font-size: 14px; font-weight: 700;
    }
    .bnpl-summary-grid {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 9px;
    }
    .bnpl-stat {
      padding: 10px 11px 9px; border: 1px solid var(--line); border-radius: 16px;
      background: linear-gradient(180deg, #fff, #f8fcfa);
    }
    .bnpl-stat span { display: block; color: var(--muted); font-size: 13px; }
    .bnpl-stat strong { display: block; margin-top: 6px; color: var(--ink); font-size: 18px; line-height: 1.3; }
    .bnpl-stat.primary { border-color: rgba(18,185,129,.22); background: linear-gradient(180deg, #f5fffb, #ebfaf3); }
    .bnpl-stat.primary strong { color: var(--primary); }
    .bnpl-breakdown {
      margin: 9px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff;
    }
    .bnpl-breakdown-row {
      display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px;
      border-bottom: 1px solid var(--line);
    }
    .bnpl-breakdown-row:last-child { border-bottom: 0; }
    .bnpl-breakdown-row span { color: var(--muted); font-size: 14px; }
    .bnpl-breakdown-row strong { text-align: left; color: #204137; font-size: 17px; }
    .bnpl-breakdown-row.total { background: linear-gradient(180deg, #fbfefc, #f4fbf8); }
    .bnpl-breakdown-row.total strong { color: var(--primary); font-size: 19px; }
    .bnpl-installments {
      display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin-top: 9px;
    }
    .bnpl-installment-item {
      display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px;
      border-radius: 14px; border: 1px solid rgba(18,185,129,.16); background: rgba(233,248,241,.62);
    }
    .bnpl-installment-item strong { display: block; color: #1f3c33; font-size: 15px; }
    .bnpl-installment-item span { display: block; color: var(--muted); font-size: 13px; }
    .bnpl-installment-badge {
      min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 14px;
      color: var(--primary); background: rgba(18,185,129,.14); font-weight: 800;
    }
    .bnpl-trust-note {
      display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 9px 10px;
      border-radius: 14px; color: #54675f; background: #f4f8f6; font-size: 14px;
    }
    .bnpl-trust-note i { margin-top: 4px; color: var(--primary); }
    .bnpl-offer-actions {
      display: grid; grid-template-columns: 1fr .66fr; gap: 8px; margin-top: 11px;
    }
    .bnpl-confirm-btn { min-height: 48px; font-size: 15px; }
    .bnpl-subcopy { margin-top: 6px; text-align: center; color: var(--muted); font-size: 11px; }

    /* Toast & PWA */
    .toast {
      position: fixed; right: 50%; bottom: 28px; z-index: 3000;
      max-width: min(420px, calc(100% - 28px)); display: flex; align-items: center; gap: 9px;
      padding: 12px 18px; border-radius: 17px; color: #fff; background: #173b2e;
      box-shadow: 0 18px 46px rgba(0,0,0,.22); opacity: 0; pointer-events: none;
      transform: translate(50%, 30px); transition: opacity .24s ease, transform .24s ease;
      font-size: 15px; line-height: 1.5;
    }
    .toast.error { background: #9e2935; }
    .toast.show { opacity: 1; transform: translate(50%, 0); }
    .kyc-entry-notice {
      position: fixed; right: 50%; bottom: 28px; z-index: 3050;
      width: min(460px, calc(100% - 28px)); display: grid; grid-template-columns: auto 1fr auto;
      align-items: center; gap: 12px; padding: 14px; border: 1px solid #cfe6dc; border-radius: 20px;
      background: #fff; box-shadow: 0 20px 54px rgba(0,0,0,.20); transform: translate(50%, 18px);
      opacity: 0; transition: opacity .22s ease, transform .22s ease; direction: rtl;
    }
    .kyc-entry-notice.show { opacity: 1; transform: translate(50%, 0); }
    .kyc-entry-notice-icon {
      width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px;
      color: var(--primary); background: var(--primary-soft); font-size: 18px;
    }
    .kyc-entry-notice-copy { min-width: 0; }
    .kyc-entry-notice-copy strong { display: block; color: #173b2e; font-size: 14px; }
    .kyc-entry-notice-copy span { display: block; margin-top: 3px; color: #65766f; font-size: 12px; line-height: 1.7; }
    .kyc-entry-notice-actions { display: flex; align-items: center; gap: 7px; }
    .kyc-entry-notice-action {
      min-height: 38px; padding: 8px 11px; border-radius: 12px; color: #fff; background: var(--primary);
      font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap;
    }
    .kyc-entry-notice-close {
      width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px;
      color: #708078; background: #f2f6f4; cursor: pointer;
    }
    @media(max-width:640px){
      .kyc-entry-notice { bottom: 96px; grid-template-columns: auto 1fr; gap: 10px; padding: 12px; }
      .kyc-entry-notice-actions { grid-column: 1 / -1; width: 100%; }
      .kyc-entry-notice-action { flex: 1; }
    }
    .install-pwa-btn {
      position: fixed; left: 18px; bottom: 18px; z-index: 1200;
      min-height: 48px; display: flex; align-items: center; gap: 8px;
      padding: 10px 18px; border-radius: 16px; color: #fff; background: var(--primary);
      box-shadow: 0 14px 32px rgba(8,122,85,.25); cursor: pointer;
    }

    .bottom-nav { display: none; }

    :focus-visible { outline: 3px solid rgba(18,185,129,.32); outline-offset: 3px; }

    @media (max-width: 900px) {
      .login-shell { grid-template-columns: 1fr; width: min(620px, calc(100% - 28px)); }
      .login-showcase { min-height: 300px; padding: 32px; }
      .showcase-copy { margin: 35px 0 12px; }
      .showcase-copy h1 { font-size: 42px; }
      .showcase-copy p { font-size: 18px; }
      .showcase-features { display: none; }
      .login-panel { padding: 38px 28px; }
      .hero-grid { grid-template-columns: 1fr; }
      .quick-card { display: grid; grid-template-columns: minmax(200px, .65fr) minmax(0, 1.35fr); column-gap: 16px; align-items: center; }
      .quick-card h2, .quick-card > p { grid-column: 1; }
      .scan-main { grid-column: 2; grid-row: 1 / span 3; min-height: 130px; }
      .quick-row { grid-column: 1; }
      .content-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 640px) {
      body { font-size: 17px; }
      .ambient-shape { display: none; }
      .login-shell { width: 100%; min-height: 100vh; margin: 0; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
      .login-showcase { display: none; }
      .login-panel { min-height: 100vh; padding: max(28px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom)); }
      .mobile-brand { display: flex; align-items: center; gap: 11px; }
      .mobile-brand img { width: 50px; height: 50px; object-fit: contain; padding: 6px; border-radius: 16px; background: var(--primary-soft); }
      .mobile-brand strong { display: block; font-size: 23px; }
      .mobile-brand span { display: block; margin-top: -3px; color: var(--muted); font-size: 13px; }
      .login-card h2 { font-size: 31px; }

      .app-shell { width: min(100% - 20px, 620px); margin: 10px auto 100px; }
      .app-header { top: 6px; min-height: 64px; padding: 8px 9px 8px 13px; border-radius: 20px; }
      .app-brand img { width: 44px; height: 44px; }
      .app-brand strong { font-size: 18px; }
      .app-brand span { display: none; }
      #headerRefreshBtn { display: none; }
      .icon-button { width: 34px; height: 34px; border-radius: 13px; }
      .dashboard-head { align-items: flex-end; margin: 22px 3px 14px; }
      .welcome-copy h1 { font-size: 24px; }
      .welcome-copy p { font-size: 13px; }
      .sync-pill { padding: 7px 10px; font-size: 12px; }
      .balance-box { min-height: 225px; padding: 25px 22px; border-radius: 27px; }
      .balance-amount { font-size: 46px; }
      .card-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
      .quick-card { display: block; padding: 18px; border-radius: 25px; }
      .quick-card h2, .quick-card > p { display: none; }
      .scan-main { min-height: 82px; flex-direction: row; }
      .quick-row { margin-top: 9px; }
      .loyalty-section { margin-top: 13px; }
      .loyalty-panel { padding: 17px; border-radius: 25px; }
      .loyalty-panel-head { align-items:flex-start; }
      .loyalty-rule-pill { display:none; }
      .loyalty-org-card { padding:14px; border-radius:20px; }
      .loyalty-card-top { display:block; }
      .loyalty-next { min-width:0; margin-top:8px; text-align:right; }
      .loyalty-stamps { grid-template-columns:repeat(5, 1fr); gap:7px; }
      .loyalty-stamp { min-height:68px; border-radius:15px; }
      .loyalty-card-foot { align-items:flex-start; flex-direction:column; gap:3px; }
      .content-grid { gap: 13px; margin-top: 13px; }
      .content-card { padding: 17px; border-radius: 25px; }
      .section-header h2 { font-size: 20px; }
      .section-icon { width: 40px; height: 40px; }
      .request-item, .transaction-item { padding: 15px; border-radius: 19px; }
      #transactionsList { max-height: 390px; }
      .button-group { grid-template-columns: 1fr 80px; }
      .qr-scanner { align-items: flex-end; padding: 0; }
      .qr-scanner-box { max-height: 94vh; border-radius: 28px 28px 0 0; }
      .scanner-stage { margin: 14px; }
      .qr-reader, .qr-reader video { min-height: 330px; }
      .bottom-nav {
        position: fixed; right: 10px; left: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 500;
        height: 66px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
        padding: 7px; border: 1px solid rgba(255,255,255,.9); border-radius: 22px;
        background: rgba(255,255,255,.91); box-shadow: 0 18px 50px rgba(9,46,34,.18); backdrop-filter: blur(18px);
      }
      .bottom-nav button {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
        border-radius: 15px; color: #708078; background: transparent; cursor: pointer; font-size: 11px;
      }
      .bottom-nav button i { font-size: 17px; }
      .bottom-nav button.active { color: var(--primary); background: var(--primary-soft); }
      .install-pwa-btn { bottom: 86px; left: 12px; }
      .toast { bottom: 91px; }
      .bnpl-offer-modal { align-items: center; justify-content:center; padding: 14px; }
      .bnpl-offer-card { width:min(400px, calc(100% - 12px)); max-height:none; border-radius:24px; }
      .bnpl-offer-hero { padding: 16px 16px 13px; }
      .bnpl-offer-hero h2 { font-size: 23px; }
      .bnpl-offer-body { padding: 12px 14px 14px; }
      .bnpl-summary-grid { grid-template-columns: 1fr 1fr; }
      .bnpl-offer-actions { grid-template-columns: 1fr .62fr; }
    }

    @media (max-width: 380px) {
      .app-shell { width: calc(100% - 14px); }
      .dashboard-head { gap: 8px; }
      .sync-pill span:last-child { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
      .balance-amount { font-size: 40px; }
      .content-card { padding: 14px; }
      .amount-row { font-size: 13px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }

/* v8.1.0.2 — Desktop card cleanup only */
    @media (min-width: 901px) {
      body { background:#f5f8f6; }
      .wallet-app {
        width:min(1240px, calc(100% - 48px));
        margin:22px auto 132px;
      }
      .wallet-header {
        top:14px;
        min-height:68px;
        padding:9px 12px 9px 14px;
        border-radius:20px;
        border-color:#dfe9e5;
        background:rgba(255,255,255,.94);
        box-shadow:0 8px 24px rgba(10,58,43,.055);
      }
      .wallet-home {
        grid-template-columns:minmax(0,1.28fr) minmax(330px,.72fr);
        gap:18px;
        margin-top:18px;
        align-items:stretch;
      }
      .purchase-power-card {
        grid-column:1;
        grid-row:1;
        min-height:292px;
        padding:26px 28px;
        border-radius:28px;
        box-shadow:0 18px 42px rgba(4,92,65,.18);
      }
      .bnpl-wallet-card {
        grid-column:2;
        grid-row:1;
        min-height:292px;
        display:flex;
        flex-direction:column;
        padding:20px;
        border-radius:24px;
        border-color:#e2ebe7;
        box-shadow:0 8px 24px rgba(12,57,43,.045);
      }
      .bnpl-wallet-grid { flex:1; align-content:center; }
      .bnpl-wallet-stat {
        min-height:96px;
        border-radius:17px;
        background:#fafcfb;
      }
      .next-installment-stat { background:#f2faf6; }

      #paymentRequestsSection {
        grid-column:1;
        grid-row:2;
      }
      #loyaltySection {
        grid-column:2;
        grid-row:2;
      }
      #transactionsSection {
        grid-column:1 / -1;
        grid-row:3;
      }

      .wallet-content-card,
      .wallet-loyalty .loyalty-panel {
        height:100%;
        padding:20px;
        border-radius:24px;
        border:1px solid #e2ebe7;
        background:#fff;
        box-shadow:0 8px 24px rgba(12,57,43,.045);
      }
      .wallet-section-head {
        margin-bottom:14px;
        padding-bottom:12px;
        border-bottom:1px solid #edf2ef;
      }
      .wallet-section-head h2 { font-size:19px; }
      .wallet-section-head p { font-size:11px; }
      .section-icon,
      .loyalty-title-icon {
        width:40px;
        height:40px;
        border-radius:13px;
      }
      .count-badge,
      .loyalty-rule-pill {
        box-shadow:none;
      }
      .wallet-app .request-item,
      .wallet-app .transaction-item,
      .wallet-app .loyalty-org-card {
        border-color:#e7eeeb;
        border-radius:17px;
        background:#fcfdfd;
        box-shadow:none;
      }
      .wallet-app .request-item:hover,
      .wallet-app .transaction-item:hover {
        transform:none;
        border-color:#cfe1d9;
        box-shadow:none;
      }
      #transactionsList {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        max-height:390px;
        padding:0 2px 0 4px;
      }
      #transactionsList .transaction-item { margin-bottom:0; }
      .loyalty-card-top { gap:10px; }
      .loyalty-next { min-width:150px; }
      .loyalty-stamps { gap:6px; }
      .loyalty-stamp { min-height:66px; border-radius:14px; }

      /* fixed quick actions: compact desktop dock */
      .wallet-actions {
        width:min(760px, calc(100% - 48px));
        right:50%;
        left:auto;
        transform:translateX(50%);
        bottom:16px;
        padding:7px 10px;
        gap:6px;
        border-radius:22px;
        background:rgba(255,255,255,.96);
        border-color:#dfe9e5;
        box-shadow:0 14px 36px rgba(11,58,43,.12);
      }
      .wallet-action {
        min-height:70px;
        padding:7px 5px 6px;
        border-radius:16px;
      }
      .wallet-action-icon {
        width:38px;
        height:38px;
        border-radius:13px;
        font-size:16px;
      }
      .wallet-action strong { font-size:11px; }
      .wallet-action small { font-size:9px; }
      .wallet-action.primary-action { border-radius:16px; }

      .toast { bottom:104px; }
      .install-pwa-btn { bottom:102px; }
    }

/* v8.1.1 — installment payment choice */
  .next-installment-stat {
    width:100%; text-align:right; cursor:pointer; font-family:inherit;
    transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .next-installment-stat:hover { border-color:#9fd9c1; transform:translateY(-1px); box-shadow:0 8px 18px rgba(8,122,85,.07); }
  .next-installment-stat:disabled { cursor:default; opacity:.72; transform:none; box-shadow:none; }
  .installment-pay-hint { display:flex !important; align-items:center; gap:5px; margin-top:5px !important; color:#087a55 !important; font-weight:800; }
  .installment-payment-card { width:min(430px,100%); }
  .installment-choice-summary { display:grid; gap:8px; margin-top:14px; }
  .installment-choice-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; border:1px solid var(--line); border-radius:15px; background:#fbfdfc; }
  .installment-choice-row span { color:var(--muted); font-size:13px; }
  .installment-choice-row strong { color:#203e34; text-align:left; font-size:15px; }
  .installment-choice-actions { display:grid; gap:9px; margin-top:14px; }
  .installment-choice-btn { width:100%; min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-radius:16px; cursor:pointer; text-align:right; }
  .installment-choice-btn .choice-copy { flex:1; min-width:0; }
  .installment-choice-btn strong { display:block; font-size:14px; }
  .installment-choice-btn small { display:block; margin-top:2px; font-size:11px; font-weight:400; opacity:.76; }
  .installment-choice-btn.wallet { color:#fff; background:linear-gradient(135deg,#087a55,#10a873); box-shadow:0 10px 22px rgba(8,122,85,.18); }
  .installment-choice-btn.gateway { color:#29463b; background:#eef6f2; border:1px solid #d8e9e1; }
  .installment-choice-btn.gateway .mock-pill { padding:4px 7px; border-radius:999px; color:#8a5e0c; background:#fff4d6; font-size:10px; font-weight:900; }
  .installment-choice-btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
  .installment-choice-cancel { width:100%; min-height:42px; margin-top:9px; border-radius:14px; color:#617169; background:#f3f6f4; cursor:pointer; }

  /* v8.1.3 — citizen installments list modal */
  .installments-list-card { width:min(560px,100%); max-height:min(720px,calc(100vh - 44px)); padding:20px; display:flex; flex-direction:column; overflow:hidden; }
  .installments-modal-head { display:flex; align-items:center; gap:11px; margin-bottom:6px; }
  .installments-modal-head .head-icon { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:14px; color:var(--primary); background:var(--primary-soft); font-size:18px; }
  .installments-modal-head .head-copy { min-width:0; flex:1; }
  .installments-modal-head h2 { margin:0; text-align:right; font-size:21px; }
  .installments-modal-head p { margin:2px 0 0; color:var(--muted); font-size:12px; }
  .installments-modal-close { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border-radius:13px; color:#607269; background:#f0f5f2; cursor:pointer; }
  .installments-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:10px 0 12px; }
  .installments-overview-item { padding:9px 10px; border:1px solid var(--line); border-radius:14px; background:#fbfdfc; text-align:center; }
  .installments-overview-item span { display:block; color:var(--muted); font-size:10px; }
  .installments-overview-item strong { display:block; margin-top:2px; color:#244137; font-size:15px; }
  .installments-list { min-height:120px; overflow-y:auto; overscroll-behavior:contain; padding-inline-start:3px; scrollbar-width:thin; scrollbar-color:#b8cec4 transparent; }
  .installments-list::-webkit-scrollbar { width:5px; }
  .installments-list::-webkit-scrollbar-thumb { background:#b8cec4; border-radius:999px; }
  .installment-list-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px; margin-bottom:8px; border:1px solid #e0ebe6; border-radius:16px; background:#fff; }
  .installment-list-item:last-child { margin-bottom:0; }
  .installment-list-number { width:38px; height:38px; display:grid; place-items:center; border-radius:13px; color:#087a55; background:#ecf8f2; font-weight:900; font-size:13px; }
  .installment-list-copy { min-width:0; }
  .installment-list-copy strong { display:block; overflow:hidden; color:#233f35; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
  .installment-list-copy span { display:block; margin-top:3px; color:#74847c; font-size:11px; }
  .installment-list-side { text-align:left; white-space:nowrap; }
  .installment-list-side strong { display:block; color:#263f36; font-size:13px; }
  .installment-status-pill { display:inline-flex; align-items:center; gap:4px; margin-top:4px; padding:3px 7px; border-radius:999px; font-size:9px; font-weight:900; }
  .installment-status-pill.upcoming { color:#087a55; background:#e8f8f1; }
  .installment-status-pill.overdue { color:#a66208; background:#fff3d8; }
  .installment-status-pill.paid { color:#607269; background:#eef3f0; }
  .installment-status-pill.cancelled { color:#8b5260; background:#f8ecef; }
  .installments-empty { padding:26px 12px; text-align:center; color:#819087; }
  .installments-empty i { display:block; margin-bottom:8px; color:#98aaa1; font-size:25px; }
  .installments-empty strong { display:block; color:#50655b; font-size:14px; }
  .installments-empty span { display:block; margin-top:3px; font-size:11px; }
  @media(max-width:640px){
    .installment-payment-card{width:min(400px,calc(100% - 12px));padding:20px 17px;}
    .installments-list-card{width:calc(100% - 8px);max-height:calc(100vh - 22px);padding:15px 13px;border-radius:22px;}
    .installments-modal-head h2{font-size:18px;}
    .installments-overview{gap:5px;margin:8px 0 10px;}
    .installments-overview-item{padding:7px 5px;}
    .installment-list-item{grid-template-columns:auto minmax(0,1fr);gap:8px;padding:9px;}
    .installment-list-side{grid-column:2;text-align:right;display:flex;align-items:center;justify-content:space-between;gap:8px;}
  }

  /* v8.1.2 — explicit purchase funding source */
  .purchase-source-title{margin:0 0 7px;color:#496159;font-size:12px;font-weight:900;}
  .purchase-source-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0 0 10px;}
  .purchase-source-option{min-width:0;min-height:72px;padding:9px 7px;border:1px solid #dfe9e5;border-radius:15px;background:#fbfdfc;color:#355047;cursor:pointer;text-align:center;transition:.16s ease;}
  .purchase-source-option i{display:block;margin-bottom:5px;color:#087a55;font-size:17px;}
  .purchase-source-option strong{display:block;font-size:11px;line-height:1.5;}
  .purchase-source-option small{display:block;margin-top:2px;color:#7d8c85;font-size:9px;line-height:1.45;}
  .purchase-source-option.selected{border-color:#57c49d;background:#ecfaf4;box-shadow:0 0 0 2px rgba(18,185,129,.08);}
  .purchase-source-option:disabled{opacity:.45;cursor:not-allowed;background:#f4f6f5;}
  .purchase-source-helper{min-height:18px;margin:-2px 0 8px;color:#71827a;font-size:10px;line-height:1.6;}
  .bnpl-breakdown-row[hidden],#bnplOfferInstallments[hidden]{display:none!important;}
  .bnpl-confirm-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;}
  @media(max-width:390px){
    .purchase-source-options{gap:5px;}
    .purchase-source-option{min-height:67px;padding:7px 4px;}
    .purchase-source-option strong{font-size:10px;}
  }


  /* v8.1.2.1 — compact purchase funding modal on phones */
  @media (max-width:640px){
    .bnpl-offer-modal{padding:8px;align-items:center;justify-content:center;}
    .bnpl-offer-card{
      width:min(380px,calc(100% - 8px));
      max-height:calc(100dvh - 16px);
      border-radius:21px;
    }
    .bnpl-offer-hero{padding:11px 13px 9px;}
    .bnpl-offer-topline{margin-bottom:5px;}
    .bnpl-badge{padding:4px 8px;gap:5px;font-size:11px;}
    .bnpl-close{width:30px;height:30px;border-radius:12px;font-size:13px;}
    .bnpl-offer-hero h2{margin:0 0 2px;font-size:20px;line-height:1.25;}
    .bnpl-offer-hero p{font-size:10px;line-height:1.45;}
    .bnpl-offer-body{padding:9px 11px 10px;}
    .bnpl-merchant-pill{margin-bottom:6px;padding:4px 8px;gap:5px;font-size:11px;}

    .purchase-source-title{margin-bottom:4px;font-size:10px;}
    .purchase-source-options{gap:5px;margin-bottom:5px;}
    .purchase-source-option{min-height:54px;padding:5px 3px;border-radius:12px;}
    .purchase-source-option i{margin-bottom:2px;font-size:14px;}
    .purchase-source-option strong{font-size:9.5px;line-height:1.35;}
    .purchase-source-option small{margin-top:1px;font-size:7.5px;line-height:1.3;}
    .purchase-source-helper{min-height:12px;margin:0 0 4px;font-size:8px;line-height:1.35;}

    .bnpl-summary-grid{gap:5px;margin-bottom:5px;}
    .bnpl-stat{padding:6px 8px 5px;border-radius:12px;}
    .bnpl-stat span{font-size:10px;}
    .bnpl-stat strong{margin-top:2px;font-size:14px;}

    .bnpl-breakdown{margin:5px 0;border-radius:12px;}
    .bnpl-breakdown-row{padding:5px 8px;gap:5px;}
    .bnpl-breakdown-row span{font-size:10.5px;}
    .bnpl-breakdown-row strong{font-size:12px;}
    .bnpl-breakdown-row.total strong{font-size:14px;}

    .bnpl-installments{gap:4px;margin-top:5px;}
    .bnpl-installment-item{gap:4px;padding:5px 6px;border-radius:11px;}
    .bnpl-installment-badge{min-width:26px;width:26px;height:26px;border-radius:10px;font-size:12px;}
    .bnpl-installment-item strong{font-size:10.5px !important;line-height:1.25;}
    .bnpl-installment-item span{font-size:8.5px !important;line-height:1.25;}
    .bnpl-installment-item > strong{white-space:nowrap;font-size:10.5px !important;}

    .bnpl-trust-note{margin-top:5px;padding:5px 7px;gap:5px;border-radius:11px;font-size:9.5px;line-height:1.45;}
    .bnpl-trust-note i{margin-top:2px;font-size:11px;}
    .bnpl-offer-actions{gap:6px;margin-top:6px;grid-template-columns:1fr .58fr;}
    .bnpl-confirm-btn,.bnpl-offer-actions .ghost-btn{min-height:42px;padding:7px 9px;border-radius:13px;font-size:11.5px;}
    .bnpl-subcopy{display:none;}
  }

  @media (max-width:380px){
    .bnpl-offer-card{width:calc(100% - 4px);}
    .bnpl-offer-hero{padding:9px 11px 8px;}
    .bnpl-offer-body{padding:8px 9px 9px;}
    .purchase-source-option{min-height:50px;}
    .bnpl-installment-item{padding:4px 5px;}
    .bnpl-installment-badge{min-width:24px;width:24px;height:24px;}
  }


  /* v8.1.2.2 — desktop BNPL modal fit */
  @media (min-width:641px){
    .bnpl-offer-modal{
      padding:16px;
      align-items:center;
      justify-content:center;
    }
    .bnpl-offer-card{
      width:min(760px,calc(100% - 32px));
      max-height:calc(100vh - 32px);
      overflow:hidden;
      border-radius:24px;
    }
    .bnpl-offer-hero{
      padding:14px 18px 12px;
    }
    .bnpl-offer-topline{margin-bottom:6px;}
    .bnpl-offer-hero h2{
      margin:0 0 3px;
      font-size:22px;
      line-height:1.25;
    }
    .bnpl-offer-hero p{
      font-size:11px;
      line-height:1.5;
    }
    .bnpl-offer-body{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      gap:7px 12px;
      padding:10px 14px 12px;
      overflow:visible;
    }
    .bnpl-merchant-pill{
      grid-column:1/-1;
      width:max-content;
      max-width:100%;
      margin:0;
      padding:5px 9px;
      font-size:11px;
    }
    .purchase-source-title{
      grid-column:1/-1;
      margin:0;
      font-size:10px;
    }
    .purchase-source-options{
      grid-column:1/-1;
      gap:7px;
      margin:0;
    }
    .purchase-source-option{
      min-height:60px;
      padding:6px 6px;
      border-radius:13px;
    }
    .purchase-source-option i{margin-bottom:2px;font-size:15px;}
    .purchase-source-option strong{font-size:10.5px;line-height:1.35;}
    .purchase-source-option small{margin-top:1px;font-size:8.5px;line-height:1.3;}
    .purchase-source-helper{
      grid-column:1/-1;
      min-height:12px;
      margin:0;
      font-size:8.5px;
      line-height:1.35;
    }
    .bnpl-summary-grid{
      grid-column:1;
      align-self:stretch;
      gap:6px;
      margin:0;
    }
    .bnpl-stat{
      min-height:58px;
      padding:7px 9px;
      border-radius:13px;
    }
    .bnpl-stat span{font-size:10px;}
    .bnpl-stat strong{margin-top:2px;font-size:14px;}
    .bnpl-breakdown{
      grid-column:2;
      align-self:stretch;
      margin:0;
      border-radius:13px;
    }
    .bnpl-breakdown-row{
      min-height:34px;
      padding:6px 9px;
    }
    .bnpl-breakdown-row span{font-size:10px;}
    .bnpl-breakdown-row strong{font-size:12px;}
    .bnpl-breakdown-row.total strong{font-size:14px;}
    .bnpl-installments{
      grid-column:1/-1;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:6px;
      margin:0;
    }
    .bnpl-installment-item{
      min-width:0;
      padding:6px 7px;
      border-radius:12px;
    }
    .bnpl-installment-badge{
      min-width:26px;
      width:26px;
      height:26px;
      border-radius:10px;
      font-size:11px;
    }
    .bnpl-installment-item strong{font-size:10px !important;line-height:1.25;}
    .bnpl-installment-item span{font-size:8px !important;line-height:1.25;}
    .bnpl-installment-item > strong{font-size:10px !important;white-space:nowrap;}
    .bnpl-trust-note{
      grid-column:1/-1;
      margin:0;
      padding:6px 8px;
      border-radius:11px;
      font-size:9px;
      line-height:1.4;
    }
    .bnpl-trust-note i{margin-top:2px;font-size:10px;}
    .bnpl-offer-actions{
      grid-column:1/-1;
      width:min(470px,100%);
      justify-self:end;
      gap:7px;
      margin:0;
      grid-template-columns:1fr .5fr;
    }
    .bnpl-confirm-btn,
    .bnpl-offer-actions .ghost-btn{
      min-height:42px;
      padding:7px 11px;
      border-radius:13px;
      font-size:12px;
    }
    .bnpl-subcopy{
      grid-column:1/-1;
      margin:0;
      font-size:9px;
    }
  }

.support-center-card{padding:16px!important}.support-center-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.support-center-head>div{display:grid;gap:3px}.support-center-head span{font-weight:900;color:#173f33}.support-center-head small{color:#70847b;line-height:1.7}.support-center-head>i{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#e9f7f1;color:#0d8c63}.support-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.support-center-card input,.support-center-card textarea,.support-center-card select,.support-reply-box textarea{width:100%;box-sizing:border-box;margin-top:7px;padding:10px 11px;border:1px solid #dfe9e4;border-radius:11px;background:#fff;font:inherit;color:#183c31;outline:none}.support-center-card textarea{min-height:88px;resize:vertical}.support-center-card input:focus,.support-center-card textarea:focus,.support-center-card select:focus,.support-reply-box textarea:focus{border-color:#25a87b;box-shadow:0 0 0 3px rgba(37,168,123,.1)}.support-submit{justify-content:center;gap:7px}.support-list-head{display:flex;justify-content:space-between;align-items:center;margin:15px 0 7px;color:#355a4d}.support-list-head span{min-width:24px;height:24px;display:grid;place-items:center;border-radius:999px;background:#edf6f2;font-size:12px}.support-ticket-list{display:grid;gap:7px;max-height:280px;overflow:auto;padding-left:2px}.support-ticket-item{width:100%;border:1px solid #e3ece8;border-radius:12px;background:#fff;padding:10px 11px;text-align:right;cursor:pointer;display:grid;gap:6px;color:#25483c}.support-ticket-item:hover{border-color:#b9ddd0;background:#f9fcfb}.support-ticket-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.support-ticket-title{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ticket-status{font-size:11px;font-weight:800;padding:4px 7px;border-radius:999px;background:#edf3f0;color:#526e64;white-space:nowrap}.ticket-status.open{background:#fff5db;color:#86610d}.ticket-status.in_progress{background:#e7f2ff;color:#245f9a}.ticket-status.waiting_user{background:#f1eaff;color:#6c45a2}.ticket-status.resolved{background:#e8f7ef;color:#17704d}.ticket-status.closed{background:#eef0f2;color:#667078}.support-ticket-meta{display:flex;justify-content:space-between;gap:8px;color:#809088;font-size:11px}.support-ticket-modal{position:fixed;inset:0;z-index:12000;background:rgba(12,34,27,.48);display:none;align-items:center;justify-content:center;padding:18px}.support-ticket-modal.show{display:flex}.support-ticket-dialog{width:min(680px,100%);max-height:min(760px,92vh);background:#fff;border-radius:22px;box-shadow:0 24px 70px rgba(8,40,30,.2);display:flex;flex-direction:column;overflow:hidden}.support-ticket-dialog-head{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px;border-bottom:1px solid #edf2ef;gap:12px}.support-ticket-dialog-head h3{margin:0;color:#173f33;font-size:18px}.support-ticket-dialog-head p{margin:5px 0 0;color:#73857e;font-size:12px}.support-ticket-dialog-head button{border:0;background:#eef5f2;width:34px;height:34px;border-radius:10px;cursor:pointer}.support-thread{padding:16px 18px;display:flex;flex-direction:column;gap:10px;overflow:auto;background:#f7faf8;min-height:220px}.support-message{max-width:86%;padding:10px 12px;border-radius:15px;line-height:1.8;font-size:13px;white-space:pre-wrap}.support-message.mine{align-self:flex-start;background:#dff3ea;color:#1d4f3e;border-bottom-right-radius:5px}.support-message.admin{align-self:flex-end;background:#fff;border:1px solid #e1e9e5;color:#334d44;border-bottom-left-radius:5px}.support-message small{display:block;margin-top:5px;opacity:.65;font-size:10px}.support-reply-box{padding:14px 18px;border-top:1px solid #edf2ef}.support-reply-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.support-reply-actions button{border:0;border-radius:11px;padding:9px 15px;font:inherit;font-weight:800;cursor:pointer}.support-reply-actions .send{background:#0d8c63;color:#fff}.support-reply-actions .close{background:#edf3f0;color:#315044}.ltr-input{direction:ltr;text-align:left}@media(max-width:640px){.support-form-grid{grid-template-columns:1fr}.support-ticket-dialog{border-radius:18px}.support-message{max-width:93%}}

.services-button{position:relative}.services-layer{position:fixed;inset:0;z-index:11500;background:rgba(8,31,24,.5);display:none;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(4px)}.services-layer.show{display:flex}.services-dialog{width:min(880px,100%);max-height:min(820px,92vh);display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.9);border-radius:24px;box-shadow:0 26px 80px rgba(8,40,30,.22)}.services-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid #edf2ef}.services-dialog-head h2{margin:0;color:#173f33;font-size:19px}.services-dialog-head p{margin:5px 0 0;color:#71857c;font-size:12px}.services-head-actions{display:flex;align-items:center;gap:7px}.services-refresh,.services-close{border:0;border-radius:11px;min-height:36px;font:inherit;cursor:pointer}.services-refresh{display:flex;align-items:center;gap:6px;background:#edf7f3;color:#176d51;padding:7px 11px;font-weight:800}.services-close{width:36px;background:#eef4f1;color:#36594d}.services-tabs{display:flex;gap:8px;padding:12px 18px;border-bottom:1px solid #edf2ef;background:#fbfdfc;overflow:auto}.services-tab{display:flex;align-items:center;gap:7px;border:1px solid #dfeae5;background:#fff;color:#5b7068;border-radius:11px;padding:9px 13px;font:inherit;font-weight:800;white-space:nowrap;cursor:pointer}.services-tab.active{background:#e8f6f0;border-color:#a9d9c7;color:#0d7956}.services-tab-badge{min-width:20px;height:20px;display:grid;place-items:center;border-radius:999px;background:#d7eee5;color:#0e7455;font-size:10px}.services-body{padding:18px;overflow:auto;background:#f7faf8}.services-pane[hidden]{display:none!important}.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.services-card{background:#fff;border:1px solid #e2ebe7;border-radius:16px;padding:14px}.services-card-wide{grid-column:1/-1}.services-card-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.services-card-title span{font-weight:900;color:#244c3e}.services-card-title small{color:#83938d;text-align:left}.services-card input{width:100%;box-sizing:border-box;margin-top:7px;padding:10px 11px;border:1px solid #dfe9e4;border-radius:11px;background:#fff;font:inherit;outline:none}.services-card input:focus{border-color:#25a87b;box-shadow:0 0 0 3px rgba(37,168,123,.1)}.services-primary-action{justify-content:center;margin-top:9px}.services-data-list{display:grid;gap:7px}.services-support-layout{display:grid;grid-template-columns:minmax(300px,.95fr) minmax(300px,1.05fr);gap:12px;align-items:start}.services-ticket-list{max-height:390px}@media(max-width:700px){.services-layer{align-items:flex-end;padding:0}.services-dialog{max-height:88vh;border-radius:24px 24px 0 0}.services-dialog-head{padding:15px 16px}.services-dialog-head p{display:none}.services-refresh span{display:none}.services-tabs{padding:10px 12px}.services-body{padding:12px}.services-grid,.services-support-layout{grid-template-columns:1fr}.services-card-wide{grid-column:auto}.services-card-title{display:grid}.services-card-title small{text-align:right}.services-button{display:grid}}