/* ============================================================
   JCSPAY V69 — PREMIUM FINTECH REDESIGN
   Visual layer only. Existing app-card-v68.js remains untouched.
   Default = soft light-green fintech. Dark = deep navy/black.
   ============================================================ */

:root{
  --jp-bg:#eef8f2;
  --jp-surface:#ffffff;
  --jp-surface-2:#f5fbf7;
  --jp-text:#10251a;
  --jp-muted:#63766a;
  --jp-line:#dbeae0;
  --jp-green:#11a84f;
  --jp-green-2:#25cf6a;
  --jp-navy:#071a35;
  --jp-blue:#1768e8;
  --jp-red:#e51e3b;
  --jp-purple:#7438d1;
  --jp-orange:#f26b21;
  --jp-shadow:0 12px 30px rgba(28,78,48,.10);
}

html[data-jcspay-theme="dark"]{
  --jp-bg:#050b12;
  --jp-surface:#0c1722;
  --jp-surface-2:#111f2c;
  --jp-text:#f6fbff;
  --jp-muted:#9eacb7;
  --jp-line:#22313e;
  --jp-shadow:0 14px 32px rgba(0,0,0,.32);
  color-scheme:dark;
}

html,body{
  background:var(--jp-bg)!important;
  color:var(--jp-text)!important;
  transition:background .2s ease,color .2s ease;
}

.main{
  background:var(--jp-bg)!important;
}

.jcspay-premium-brand{display:none}
.jcspay-photo-edit{display:none}
.jcspay-me-photo-edit{display:none}

@media(max-width:820px){
  body{padding-bottom:78px!important}

  /* Remove website-like announcement bar from the mobile app view. */
  .jcspay-live-announcement{display:none!important}
  .main > .topbar{top:0!important}

  .main{
    padding:0 10px 86px!important;
  }

  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:25!important;
    min-height:76px!important;
    padding:10px 2px!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) auto!important;
    grid-template-areas:
      "menu brand actions"
      "greet greet greet"!important;
    gap:5px 8px!important;
    background:color-mix(in srgb,var(--jp-bg) 92%,transparent)!important;
    border:0!important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:none!important;
  }

  .menu-btn{grid-area:menu!important}
  .jcspay-premium-brand{
    display:flex!important;
    grid-area:brand!important;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
    min-width:0;
  }
  .jcspay-premium-brand img{
    width:35px;height:35px;object-fit:contain;border-radius:50%;
  }
  .jcspay-premium-brand span{display:grid;line-height:1.02}
  .jcspay-premium-brand b{
    color:var(--jp-green)!important;
    font-size:1.02rem!important;
    letter-spacing:.02em;
  }
  .jcspay-premium-brand small{
    color:var(--jp-text)!important;
    font-size:.45rem!important;
    font-weight:900;
    letter-spacing:.08em;
  }

  .jcspay-greeting-block{
    grid-area:greet!important;
    padding:4px 3px 5px!important;
    display:block!important;
  }
  .jcspay-greeting-block .eyebrow{
    display:none!important;
  }
  .jcspay-greeting-block h1{
    margin:0!important;
    font-size:1.02rem!important;
    color:var(--jp-text)!important;
    font-weight:900!important;
  }
  .jcspay-greeting-block h1::before{
    content:"Good ";
    font-weight:500;
  }

  .top-actions{
    grid-area:actions!important;
    display:flex!important;
    gap:4px!important;
    align-items:center!important;
  }
  .top-actions .icon-btn{
    width:34px!important;height:34px!important;
    min-width:34px!important;border-radius:11px!important;
    background:var(--jp-surface)!important;
    color:var(--jp-text)!important;
    border:1px solid var(--jp-line)!important;
    box-shadow:0 5px 14px rgba(0,0,0,.05)!important;
    font-size:.9rem!important;
  }
  html[data-jcspay-theme="dark"] .top-actions .icon-btn{
    background:#101c28!important;
  }

  .profile-btn{
    width:42px!important;height:42px!important;min-width:42px!important;
    padding:0!important;border:0!important;background:transparent!important;
    box-shadow:none!important;
  }
  .profile-btn .profile-copy{display:none!important}
  .avatar{
    width:42px!important;height:42px!important;border-radius:50%!important;
    display:grid!important;place-items:center!important;
    overflow:hidden!important;
    background:linear-gradient(145deg,#0a57d6,#11a84f)!important;
    color:#fff!important;
    font-size:.8rem!important;
    font-weight:950!important;
    border:2px solid color-mix(in srgb,var(--jp-green) 60%,#fff)!important;
  }
  .avatar img,.jcspay-me-avatar img{
    width:100%!important;height:100%!important;
    object-fit:cover!important;display:block!important;
  }
  .jcspay-photo-edit{
    display:grid!important;place-items:center!important;
    position:absolute!important;
    right:1px!important;bottom:2px!important;
    width:18px!important;height:18px!important;
    min-width:18px!important;border-radius:50%!important;
    border:2px solid var(--jp-bg)!important;
    background:var(--jp-green)!important;color:#fff!important;
    font-size:.52rem!important;padding:0!important;
    z-index:2!important;
  }

  /* Wallet area */
  .home-wallet-grid{display:block!important}
  .wallet-card.jcspay-mobile-wallet{
    margin:5px 0 12px!important;
    border-radius:22px!important;
    padding:17px!important;
    color:#fff!important;
    background:
      radial-gradient(circle at 88% 12%,rgba(255,255,255,.16),transparent 30%),
      linear-gradient(135deg,#056b35,#12b75b 60%,#20cc68)!important;
    border:1px solid rgba(255,255,255,.18)!important;
    box-shadow:0 14px 28px rgba(6,108,53,.23)!important;
  }
  html[data-jcspay-theme="dark"] .wallet-card.jcspay-mobile-wallet{
    background:
      radial-gradient(circle at 90% 10%,rgba(41,209,107,.17),transparent 28%),
      linear-gradient(135deg,#052a23,#07583c 55%,#0c7649)!important;
  }

  .jcspay-wallet-label{color:rgba(255,255,255,.82)!important}
  #walletBalance{
    color:#fff!important;
    font-size:2rem!important;
    line-height:1.05!important;
    margin-top:4px!important;
  }
  .eye-btn{color:#fff!important;background:rgba(255,255,255,.12)!important}
  .jcspay-tier-pill{
    display:inline-flex!important;
    width:auto!important;
    margin:8px 0 14px!important;
    padding:6px 11px!important;
    border-radius:999px!important;
    background:rgba(0,0,0,.20)!important;
    color:#fff!important;
    font-size:.67rem!important;
    font-weight:900!important;
  }

  .jcspay-fintech-actions{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
    margin-top:5px!important;
  }
  .jcspay-fintech-actions button{
    min-height:86px!important;
    border-radius:16px!important;
    padding:9px 5px!important;
    display:grid!important;
    place-items:center!important;
    align-content:center!important;
    gap:5px!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.18)!important;
    box-shadow:0 8px 18px rgba(0,0,0,.17)!important;
  }
  .jcspay-fintech-actions button span{
    width:36px;height:36px;border-radius:12px;
    display:grid;place-items:center;
    background:rgba(255,255,255,.16);
    font-size:1.2rem!important;font-weight:950!important;
  }
  .jcspay-fintech-actions button strong{
    font-size:.61rem!important;line-height:1.08!important;
  }
  .jcspay-action-primary{background:linear-gradient(145deg,#0b923f,#17c65a)!important}
  .jcspay-action-transfer{background:linear-gradient(145deg,#0756bb,#1b78f1)!important}
  .jcspay-action-secondary{background:linear-gradient(145deg,#5b27b0,#8547df)!important}
  .jcspay-action-bills{background:linear-gradient(145deg,#d84f0c,#ff7a20)!important}
  .jcspay-wallet-trust{
    margin-top:12px!important;
    color:rgba(255,255,255,.78)!important;
    font-size:.56rem!important;
  }

  /* Promotional slider */
  .jcs-message-slider{
    margin:13px 0!important;
    border-radius:20px!important;
    overflow:hidden!important;
    background:var(--jp-surface)!important;
    box-shadow:var(--jp-shadow)!important;
  }
  .jcs-slide{
    min-height:154px!important;
    border-radius:20px!important;
    padding:17px!important;
  }
  .jcs-slide-blue{
    background:linear-gradient(135deg,#071c5c,#0c3d9e 55%,#098b50)!important;
  }
  .jcs-slide-green{
    background:linear-gradient(135deg,#076435,#14ae58)!important;
  }
  .jcs-slide-red{
    background:linear-gradient(135deg,#961829,#e43c47)!important;
  }
  .jcs-slide-copy h3{font-size:1.08rem!important}
  .jcs-slide-copy p{font-size:.67rem!important;line-height:1.35!important}
  .jcs-slide-picture{min-width:70px!important}
  .jcs-slide-picture img{
    width:70px!important;height:70px!important;border-radius:16px!important;object-fit:cover!important;
  }

  /* Section heading */
  .section-title{
    margin:18px 1px 9px!important;
    align-items:flex-end!important;
  }
  .section-title .eyebrow{color:var(--jp-green)!important}
  .section-title h3{font-size:1.05rem!important;color:var(--jp-text)!important}
  .live-badge{border-radius:999px!important}

  /* Service grid */
  .service-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .service-card{
    min-height:102px!important;
    padding:10px 5px!important;
    border-radius:17px!important;
    background:var(--jp-surface)!important;
    color:var(--jp-text)!important;
    border:1px solid var(--jp-line)!important;
    box-shadow:0 7px 17px rgba(25,63,39,.07)!important;
    display:grid!important;
    place-items:center!important;
    align-content:center!important;
    text-align:center!important;
    gap:5px!important;
  }
  .service-card .service-icon{
    width:43px!important;height:43px!important;
    border-radius:14px!important;
    display:grid!important;place-items:center!important;
    font-size:1.2rem!important;
    background:#eaf8ee!important;
    color:var(--jp-green)!important;
  }
  html[data-jcspay-theme="dark"] .service-card .service-icon{background:#10291d!important}
  .service-card:nth-child(2) .service-icon{background:#eaf2ff!important;color:#1768e8!important}
  .service-card:nth-child(3) .service-icon{background:#fff7df!important;color:#e5a300!important}
  .service-card:nth-child(4) .service-icon{background:#f5eaff!important;color:#8a3ee4!important}
  .service-card:nth-child(5) .service-icon{background:#fff0ea!important;color:#d76a18!important}
  .service-card:nth-child(6) .service-icon{background:#e6fbfb!important;color:#1b9fab!important}
  .service-card:nth-child(7) .service-icon{background:#eaf9ef!important;color:#20a752!important}
  .service-card:nth-child(8) .service-icon{background:#ffeaf6!important;color:#d43b98!important}
  .service-card b{font-size:.66rem!important}
  .service-card small{display:none!important}

  /* Security and activity */
  .home-security-card{
    margin:14px 0!important;
    border-radius:16px!important;
    padding:13px!important;
    background:linear-gradient(135deg,#e8f8ed,#d8f4e1)!important;
    border:1px solid #cbe9d3!important;
    color:#17442b!important;
  }
  html[data-jcspay-theme="dark"] .home-security-card{
    background:linear-gradient(135deg,#0d2c1d,#103823)!important;
    border-color:#1f5132!important;color:#e9fff0!important;
  }
  .security-icon{background:var(--jp-green)!important;color:#fff!important}

  .content-grid{display:block!important}
  .panel{
    margin:12px 0!important;
    border-radius:20px!important;
    background:var(--jp-surface)!important;
    border:1px solid var(--jp-line)!important;
    box-shadow:var(--jp-shadow)!important;
  }
  .promo-panel{display:none!important}
  .transaction-list>*,.transaction-item{
    border-radius:14px!important;
    background:var(--jp-surface-2)!important;
    border-color:var(--jp-line)!important;
  }

  /* Account/profile */
  .jcspay-me-profile{
    position:relative!important;
    border-radius:21px!important;
    background:linear-gradient(135deg,#075d34,#13ad57)!important;
    color:#fff!important;
    padding:18px!important;
  }
  .jcspay-me-avatar{
    width:72px!important;height:72px!important;border-radius:50%!important;
    overflow:hidden!important;background:#0a57d6!important;color:#fff!important;
    display:grid!important;place-items:center!important;
    border:3px solid rgba(255,255,255,.72)!important;
  }
  .jcspay-me-profile .eyebrow,.jcspay-me-profile h3,.jcspay-me-profile p{color:#fff!important}
  .jcspay-me-photo-edit{
    display:inline-flex!important;
    position:absolute!important;
    right:14px!important;bottom:14px!important;
    min-height:34px!important;
    align-items:center!important;gap:5px!important;
    padding:7px 10px!important;
    border-radius:999px!important;
    border:1px solid rgba(255,255,255,.30)!important;
    background:rgba(0,0,0,.18)!important;color:#fff!important;
    font-size:.64rem!important;font-weight:900!important;
  }
  .jcspay-me-item{
    background:var(--jp-surface)!important;
    color:var(--jp-text)!important;
    border-color:var(--jp-line)!important;
  }

  /* Modal surfaces */
  .modal,.page-card,.support-page{
    background:var(--jp-surface)!important;
    color:var(--jp-text)!important;
    border-color:var(--jp-line)!important;
  }

  /* Bottom navigation */
  .jcspay-premium-bottom{
    height:68px!important;
    padding:5px 7px calc(5px + env(safe-area-inset-bottom))!important;
    background:color-mix(in srgb,var(--jp-surface) 96%,transparent)!important;
    border-top:1px solid var(--jp-line)!important;
    box-shadow:0 -8px 26px rgba(0,0,0,.10)!important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  .mobile-nav-item{
    color:var(--jp-muted)!important;
    background:transparent!important;
  }
  .mobile-nav-item.active{color:var(--jp-green)!important}
  .mobile-nav-icon{font-size:1rem!important}
  .mobile-nav-main{
    width:58px!important;height:58px!important;
    min-height:58px!important;
    margin-top:-19px!important;
    border-radius:50%!important;
    background:linear-gradient(145deg,#12b453,#20d86b)!important;
    color:#fff!important;
    border:4px solid var(--jp-surface)!important;
    box-shadow:0 8px 20px rgba(16,173,79,.30)!important;
  }
  .mobile-nav-plus{font-size:1.35rem!important}

  /* Existing install button becomes a professional compact pill when Chrome enables it. */
  .install-app-btn{
    border-radius:999px!important;
    background:var(--jp-green)!important;
    color:#fff!important;
    border:0!important;
    padding:8px 10px!important;
    font-weight:900!important;
  }
}

@media(max-width:350px){
  .service-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .jcspay-fintech-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .jcspay-premium-brand small{display:none!important}
}


/* ============================================================
   JCSPAY V70 — EXACT DARK FINTECH THEME
   STEP 1
   When the customer switches to Dark, ALL visible JCSPAY
   surfaces use the approved black/navy/green fintech design.
   ============================================================ */

html[data-jcspay-theme="dark"]{
  --jp-bg:#03080e;
  --jp-surface:#0a141e;
  --jp-surface-2:#101d28;
  --jp-text:#f7fbff;
  --jp-muted:#9baab6;
  --jp-line:#24323e;
  --jp-green:#25d86d;
  --jp-green-2:#3be482;
  --jp-navy:#061426;
  --jp-blue:#1774f5;
  --jp-red:#ee2441;
  --jp-purple:#8d46e5;
  --jp-orange:#ff6b1a;
  --jp-shadow:0 14px 34px rgba(0,0,0,.42);
}

/* True app-dark background, not a white page with dark cards. */
html[data-jcspay-theme="dark"],
html[data-jcspay-theme="dark"] body,
html[data-jcspay-theme="dark"] .app-shell,
html[data-jcspay-theme="dark"] .main{
  background:
    radial-gradient(circle at 82% 0%,rgba(24,177,86,.08),transparent 28%),
    linear-gradient(180deg,#02070c 0%,#061019 48%,#03080e 100%)!important;
  color:var(--jp-text)!important;
}

/* All main views inherit the dark app canvas. */
html[data-jcspay-theme="dark"] .view{
  background:transparent!important;
  color:var(--jp-text)!important;
}

/* Typography everywhere. */
html[data-jcspay-theme="dark"] h1,
html[data-jcspay-theme="dark"] h2,
html[data-jcspay-theme="dark"] h3,
html[data-jcspay-theme="dark"] h4,
html[data-jcspay-theme="dark"] b,
html[data-jcspay-theme="dark"] strong,
html[data-jcspay-theme="dark"] label{
  color:var(--jp-text)!important;
}
html[data-jcspay-theme="dark"] p,
html[data-jcspay-theme="dark"] small,
html[data-jcspay-theme="dark"] .muted,
html[data-jcspay-theme="dark"] .form-note{
  color:var(--jp-muted)!important;
}
html[data-jcspay-theme="dark"] .eyebrow{
  color:var(--jp-green)!important;
}

/* Header exactly in the dark app family. */
@media(max-width:820px){
  html[data-jcspay-theme="dark"] .topbar{
    background:rgba(3,8,14,.94)!important;
    border-bottom:1px solid rgba(255,255,255,.04)!important;
    box-shadow:0 7px 22px rgba(0,0,0,.16)!important;
  }

  html[data-jcspay-theme="dark"] .jcspay-premium-brand b{
    color:#35db78!important;
  }
  html[data-jcspay-theme="dark"] .jcspay-premium-brand small{
    color:#b8c4cc!important;
  }

  html[data-jcspay-theme="dark"] .jcspay-greeting-block h1{
    color:#fff!important;
    font-size:1.12rem!important;
    letter-spacing:-.01em!important;
  }

  /* Premium two-state sun/moon control. */
  .top-actions #themeBtn{
    width:68px!important;
    min-width:68px!important;
    padding:3px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    border-radius:999px!important;
  }
  .top-actions #themeBtn .jp-theme-icon{
    width:28px!important;
    height:27px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:999px!important;
    font-style:normal!important;
    font-size:.82rem!important;
    color:var(--jp-muted)!important;
  }
  .top-actions #themeBtn .jp-theme-icon.active{
    background:var(--jp-green)!important;
    color:#fff!important;
    box-shadow:0 0 15px rgba(37,216,109,.32)!important;
  }

  html[data-jcspay-theme="dark"] .top-actions .icon-btn{
    background:#101922!important;
    color:#fff!important;
    border:1px solid #263540!important;
    box-shadow:0 5px 15px rgba(0,0,0,.22)!important;
  }

  html[data-jcspay-theme="dark"] .avatar{
    border-color:#59e78c!important;
    box-shadow:0 0 0 3px rgba(37,216,109,.10)!important;
  }

  /* Approved dark wallet treatment. */
  html[data-jcspay-theme="dark"] .wallet-card.jcspay-mobile-wallet{
    background:
      radial-gradient(circle at 88% 18%,rgba(52,226,121,.13),transparent 30%),
      linear-gradient(135deg,#043824,#075d38 52%,#087147)!important;
    border:1px solid #2aaf61!important;
    box-shadow:
      0 13px 28px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(255,255,255,.05)!important;
  }

  html[data-jcspay-theme="dark"] #walletBalance{
    color:#fff!important;
  }

  /* Eye button like the approved image: square dark glass button. */
  html[data-jcspay-theme="dark"] .eye-btn{
    width:50px!important;
    height:50px!important;
    border-radius:15px!important;
    display:grid!important;
    place-items:center!important;
    background:rgba(2,15,12,.36)!important;
    border:1px solid rgba(255,255,255,.18)!important;
    color:#fff!important;
    font-size:1.15rem!important;
    box-shadow:0 8px 18px rgba(0,0,0,.20)!important;
  }

  /* Strong coloured money actions from the approved screen. */
  html[data-jcspay-theme="dark"] .jcspay-action-primary{
    background:linear-gradient(145deg,#159841,#0fbc55)!important;
  }
  html[data-jcspay-theme="dark"] .jcspay-action-transfer{
    background:linear-gradient(145deg,#0756bd,#176fe7)!important;
  }
  html[data-jcspay-theme="dark"] .jcspay-action-secondary{
    background:linear-gradient(145deg,#6622b7,#9143df)!important;
  }
  html[data-jcspay-theme="dark"] .jcspay-action-bills{
    background:linear-gradient(145deg,#d83f0a,#f86b19)!important;
  }

  /* Slider: every slide remains premium and dark-friendly. */
  html[data-jcspay-theme="dark"] .jcs-message-slider{
    background:#08131d!important;
    border:1px solid #23323e!important;
    box-shadow:var(--jp-shadow)!important;
  }
  html[data-jcspay-theme="dark"] .jcs-slide{
    color:#fff!important;
  }
  html[data-jcspay-theme="dark"] .jcs-slide-copy span,
  html[data-jcspay-theme="dark"] .jcs-slide-copy h3,
  html[data-jcspay-theme="dark"] .jcs-slide-copy p{
    color:#fff!important;
  }
  html[data-jcspay-theme="dark"] .jcs-card-offer-btn{
    background:#e91e3b!important;
    color:#fff!important;
    border:1px solid #ff6074!important;
  }

  /* QUICK SERVICES exact dark tiles. */
  html[data-jcspay-theme="dark"] .service-grid{
    background:transparent!important;
  }
  html[data-jcspay-theme="dark"] .service-card{
    background:linear-gradient(180deg,#101922,#0b131a)!important;
    color:#fff!important;
    border:1px solid #2a3741!important;
    box-shadow:0 8px 17px rgba(0,0,0,.20)!important;
  }
  html[data-jcspay-theme="dark"] .service-card b{
    color:#fff!important;
  }

  html[data-jcspay-theme="dark"] .service-card .service-icon{
    background:#0c2b1c!important;color:#36df78!important;
  }
  html[data-jcspay-theme="dark"] .service-card:nth-child(2) .service-icon{
    background:#0c2143!important;color:#2d83ff!important;
  }
  html[data-jcspay-theme="dark"] .service-card:nth-child(3) .service-icon{
    background:#33290c!important;color:#ffc21e!important;
  }
  html[data-jcspay-theme="dark"] .service-card:nth-child(4) .service-icon{
    background:#26133d!important;color:#a75cff!important;
  }
  html[data-jcspay-theme="dark"] .service-card:nth-child(5) .service-icon{
    background:#3b190d!important;color:#ff7b30!important;
  }
  html[data-jcspay-theme="dark"] .service-card:nth-child(6) .service-icon{
    background:#0a3035!important;color:#35c8d8!important;
  }
  html[data-jcspay-theme="dark"] .service-card:nth-child(7) .service-icon{
    background:#0c2a18!important;color:#3ddd71!important;
  }
  html[data-jcspay-theme="dark"] .service-card:nth-child(8) .service-icon{
    background:#321327!important;color:#ff4baa!important;
  }

  /* Security, transaction and content panels. */
  html[data-jcspay-theme="dark"] .home-security-card{
    background:linear-gradient(135deg,#0b2819,#0c3420)!important;
    color:#eafff0!important;
    border:1px solid #225536!important;
    box-shadow:0 8px 18px rgba(0,0,0,.18)!important;
  }

  html[data-jcspay-theme="dark"] .panel,
  html[data-jcspay-theme="dark"] .page-card,
  html[data-jcspay-theme="dark"] .support-page,
  html[data-jcspay-theme="dark"] .bank-funding-card,
  html[data-jcspay-theme="dark"] .notification-modal,
  html[data-jcspay-theme="dark"] .jcspay-card-modal{
    background:linear-gradient(180deg,#0d1720,#091119)!important;
    color:#fff!important;
    border:1px solid #26343f!important;
    box-shadow:var(--jp-shadow)!important;
  }

  html[data-jcspay-theme="dark"] .transaction-list>*,
  html[data-jcspay-theme="dark"] .transaction-item,
  html[data-jcspay-theme="dark"] .beneficiary-grid>*,
  html[data-jcspay-theme="dark"] .support-option,
  html[data-jcspay-theme="dark"] .funding-method,
  html[data-jcspay-theme="dark"] .transfer-method,
  html[data-jcspay-theme="dark"] .account-action-btn,
  html[data-jcspay-theme="dark"] .jcspay-me-item{
    background:#101b24!important;
    color:#fff!important;
    border:1px solid #2a3944!important;
    box-shadow:0 6px 14px rgba(0,0,0,.15)!important;
  }

  /* Account profile page exact dark family. */
  html[data-jcspay-theme="dark"] .jcspay-me-shell{
    background:transparent!important;
  }
  html[data-jcspay-theme="dark"] .jcspay-me-profile{
    background:
      radial-gradient(circle at 90% 0%,rgba(42,225,113,.16),transparent 30%),
      linear-gradient(135deg,#073622,#0b6940)!important;
    border:1px solid #2aaf61!important;
    box-shadow:0 12px 26px rgba(0,0,0,.26)!important;
  }

  /* Bottom navigation exactly dark with green active state. */
  html[data-jcspay-theme="dark"] .jcspay-premium-bottom{
    background:rgba(9,17,24,.97)!important;
    border-top:1px solid #2a3640!important;
    box-shadow:0 -9px 28px rgba(0,0,0,.40)!important;
  }
  html[data-jcspay-theme="dark"] .mobile-nav-item{
    color:#a5b0ba!important;
  }
  html[data-jcspay-theme="dark"] .mobile-nav-item.active{
    color:#36df78!important;
  }
  html[data-jcspay-theme="dark"] .mobile-nav-main{
    background:linear-gradient(145deg,#11a64c,#1ed566)!important;
    color:#fff!important;
    border-color:#0b151c!important;
  }

  /* Inputs/forms/modals MUST also become dark. */
  html[data-jcspay-theme="dark"] .modal-backdrop{
    background:rgba(0,0,0,.72)!important;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
  }
  html[data-jcspay-theme="dark"] .modal{
    background:linear-gradient(180deg,#0e1821,#091119)!important;
    color:#fff!important;
    border:1px solid #2c3b46!important;
    box-shadow:0 22px 55px rgba(0,0,0,.52)!important;
  }
  html[data-jcspay-theme="dark"] .modal-close{
    background:#17232d!important;
    color:#fff!important;
    border:1px solid #30414d!important;
  }

  html[data-jcspay-theme="dark"] input,
  html[data-jcspay-theme="dark"] select,
  html[data-jcspay-theme="dark"] textarea{
    background:#0b151e!important;
    color:#f8fbff!important;
    border:1px solid #31414d!important;
    box-shadow:none!important;
  }
  html[data-jcspay-theme="dark"] input::placeholder,
  html[data-jcspay-theme="dark"] textarea::placeholder{
    color:#6f808d!important;
  }
  html[data-jcspay-theme="dark"] select option{
    background:#0b151e!important;
    color:#fff!important;
  }

  html[data-jcspay-theme="dark"] .summary-box,
  html[data-jcspay-theme="dark"] .success-receipt,
  html[data-jcspay-theme="dark"] .auth-security-note,
  html[data-jcspay-theme="dark"] .jcspay-card-fee-box,
  html[data-jcspay-theme="dark"] .jcspay-card-request-status,
  html[data-jcspay-theme="dark"] .jcspay-card-sandbox-note{
    background:#101b24!important;
    color:#fff!important;
    border:1px solid #2b3a45!important;
  }

  /* Login/Register modal must look like the same app, not a separate white site. */
  html[data-jcspay-theme="dark"] .auth-hero,
  html[data-jcspay-theme="dark"] .auth-form,
  html[data-jcspay-theme="dark"] .auth-field{
    background:#0d1720!important;
    color:#fff!important;
    border-color:#273844!important;
  }
  html[data-jcspay-theme="dark"] .auth-switch{
    background:#0a131b!important;
    border-color:#293844!important;
  }
  html[data-jcspay-theme="dark"] .auth-switch-btn{
    color:#9eabb5!important;
  }
  html[data-jcspay-theme="dark"] .auth-switch-btn.active{
    background:#14232d!important;
    color:#fff!important;
  }

  /* Card request design in same theme. */
  html[data-jcspay-theme="dark"] .jcspay-card-preview{
    background:linear-gradient(145deg,#071d45,#0a4088)!important;
    color:#fff!important;
    border-color:#295fa6!important;
  }

  /* Hide any old white strip/footer backgrounds. */
  html[data-jcspay-theme="dark"] footer,
  html[data-jcspay-theme="dark"] .sidebar,
  html[data-jcspay-theme="dark"] .sidebar-foot{
    background:#071019!important;
    color:#fff!important;
    border-color:#24323d!important;
  }

  html[data-jcspay-theme="dark"] .nav-item{
    color:#a9b6c0!important;
  }
  html[data-jcspay-theme="dark"] .nav-item.active{
    background:#0d2b1a!important;
    color:#36df78!important;
  }
}

/* Desktop/tablet dark should match too, not only Android. */
@media(min-width:821px){
  html[data-jcspay-theme="dark"] .topbar,
  html[data-jcspay-theme="dark"] .sidebar{
    background:#08121b!important;
    border-color:#25343f!important;
  }
  html[data-jcspay-theme="dark"] .panel,
  html[data-jcspay-theme="dark"] .page-card,
  html[data-jcspay-theme="dark"] .service-card{
    background:#0d1720!important;
    color:#fff!important;
    border-color:#263641!important;
  }
  html[data-jcspay-theme="dark"] input,
  html[data-jcspay-theme="dark"] select,
  html[data-jcspay-theme="dark"] textarea{
    background:#0b151e!important;
    color:#fff!important;
    border-color:#31414d!important;
  }
}


/* ============================================================
   JCSPAY V71 — FULL APPROVED PREMIUM REDESIGN
   Light mode deliberately uses mint / light-grey surfaces,
   NOT a plain white page. Dark mode is true black/navy.
   ============================================================ */

:root{
  --jp71-page:#e8f1ec;
  --jp71-card:#f4f8f5;
  --jp71-card-2:#edf5f0;
  --jp71-text:#0d2a1c;
  --jp71-muted:#66786d;
  --jp71-border:#cfddd4;
  --jp71-red:#e92732;
  --jp71-red2:#b70e18;
  --jp71-green:#0eae51;
  --jp71-blue:#126bd6;
  --jp71-purple:#7736c9;
  --jp71-orange:#f05018;
  --jp71-shadow:0 12px 28px rgba(25,61,42,.10);
}
html[data-jcspay-theme="dark"]{
  --jp71-page:#02070c;
  --jp71-card:#0b151e;
  --jp71-card-2:#101c26;
  --jp71-text:#f5f9fc;
  --jp71-muted:#9cabb5;
  --jp71-border:#25333d;
  --jp71-shadow:0 13px 31px rgba(0,0,0,.36);
}

html,body,.main{
  background:var(--jp71-page)!important;
  color:var(--jp71-text)!important;
}

.jcspay-greeting-block h1::before{content:none!important}

/* More premium normal mode: no large pure-white zones. */
html:not([data-jcspay-theme="dark"]) .topbar,
html:not([data-jcspay-theme="dark"]) .panel,
html:not([data-jcspay-theme="dark"]) .page-card,
html:not([data-jcspay-theme="dark"]) .service-card,
html:not([data-jcspay-theme="dark"]) .modal,
html:not([data-jcspay-theme="dark"]) .support-page{
  background:var(--jp71-card)!important;
  border-color:var(--jp71-border)!important;
}

/* HOME */
.jp71-home{max-width:1120px;margin:0 auto;padding:8px 0 34px}
.jp71-balance-fund-grid{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(230px,.75fr);
  gap:14px;
  align-items:stretch;
}
.jp71-balance-card{
  min-height:230px;
  padding:24px!important;
  border-radius:25px!important;
  background:
    radial-gradient(circle at 92% 12%,rgba(255,255,255,.14),transparent 28%),
    linear-gradient(135deg,var(--jp71-red),#e71d2b 52%,var(--jp71-red2))!important;
  border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:0 16px 30px rgba(164,20,30,.22)!important;
  color:#fff!important;
}
html[data-jcspay-theme="dark"] .jp71-balance-card{
  background:
    radial-gradient(circle at 88% 12%,rgba(255,72,86,.14),transparent 29%),
    linear-gradient(135deg,#5b0710,#870d18 55%,#3b050b)!important;
  border-color:#a92b34!important;
}
.jp71-balance-card .jcspay-wallet-label,
.jp71-balance-card .jcspay-wallet-trust,
.jp71-balance-card #walletBalance{color:#fff!important}
.jp71-balance-card #walletBalance{font-size:clamp(2rem,5vw,3rem)!important}
.jp71-balance-card .jcspay-tier-pill{
  background:rgba(62,0,5,.34)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.15)!important;
}
.jp71-eye-btn{
  width:58px!important;height:58px!important;
  display:grid!important;place-items:center!important;
  border-radius:17px!important;
  background:rgba(71,0,5,.24)!important;
  border:1px solid rgba(255,255,255,.30)!important;
  color:#fff!important;
}
.jp71-eye-btn svg{
  width:27px;height:27px;
  stroke:currentColor;fill:none;stroke-width:1.8;
}
.jp71-wallet-trust{
  margin-top:38px!important;
  display:flex!important;
  justify-content:space-between!important;
  gap:12px!important;
  font-size:.76rem!important;
  opacity:.9;
}

.jp71-fund-card{
  position:relative;
  overflow:hidden;
  border-radius:25px;
  padding:20px;
  border:1px solid var(--jp71-border);
  background:
    radial-gradient(circle at 85% 8%,rgba(20,183,87,.13),transparent 31%),
    var(--jp71-card);
  box-shadow:var(--jp71-shadow);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:9px;
}
.jp71-fund-card h3{margin:0;font-size:1.25rem}
.jp71-fund-card p{margin:0;color:var(--jp71-muted)}
.jp71-wallet-art{
  align-self:center;
  width:116px;height:88px;
  position:relative;margin-bottom:4px;
}
.jp71-wallet-art-card{
  position:absolute;
  width:72px;height:52px;border-radius:10px;
  background:linear-gradient(145deg,#164bb7,#2e8cf5);
  right:12px;top:4px;transform:rotate(7deg);
  box-shadow:0 6px 15px rgba(0,0,0,.18);
}
.jp71-wallet-art-card.two{
  background:linear-gradient(145deg,#0a9d48,#36d276);
  top:12px;right:23px;transform:rotate(-4deg);
}
.jp71-wallet-art-body{
  position:absolute;left:10px;bottom:2px;
  width:84px;height:58px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#0c7e3a,#17bd5b);
  color:#fff;font-size:1.8rem;font-weight:900;
  border:1px solid rgba(255,255,255,.3);
}
.jp71-fund-main-btn{
  width:100%;min-height:48px;border:0;border-radius:14px;
  background:linear-gradient(145deg,#07963e,#16bc58);
  color:#fff;font-weight:900;font-size:.95rem;
  box-shadow:0 8px 18px rgba(9,147,61,.18);
}

.jp71-action-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;margin:14px 0;
}
.jp71-action{
  min-height:82px;border:0;border-radius:20px;padding:12px 14px;
  color:#fff;display:flex;align-items:center;gap:11px;text-align:left;
  box-shadow:0 10px 22px rgba(0,0,0,.11);
}
.jp71-action strong{display:block;color:#fff!important;font-size:.88rem}
.jp71-action small{display:block;color:rgba(255,255,255,.78)!important;font-size:.62rem;margin-top:2px}
.jp71-action-icon{
  width:45px;height:45px;min-width:45px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.20);
  font-size:1.25rem;font-weight:900;
}
.jp71-action-green{background:linear-gradient(145deg,#0b963f,#16bd58)}
.jp71-action-blue{background:linear-gradient(145deg,#0756b6,#1676e9)}
.jp71-action-purple{background:linear-gradient(145deg,#5d25ae,#8643d9)}
.jp71-action-orange{background:linear-gradient(145deg,#d93b10,#f2671b)}

/* SAVINGS */
.jp71-savings-card{
  position:relative;
  display:grid;
  grid-template-columns:155px minmax(0,1fr) minmax(320px,1.25fr);
  gap:20px;
  align-items:center;
  border:1px solid var(--jp71-border);
  background:
    radial-gradient(circle at 95% 15%,rgba(22,184,87,.10),transparent 25%),
    var(--jp71-card);
  border-radius:25px;
  padding:18px 21px;
  box-shadow:var(--jp71-shadow);
  margin:14px 0;
}
.jp71-target-art{position:relative;height:128px;display:grid;place-items:center}
.jp71-target-ring{
  width:94px;height:94px;border-radius:50%;
  border:10px solid #1aa959;
  box-shadow:inset 0 0 0 12px #dfeee5;
  display:grid;place-items:center;
  font-size:3.5rem;color:#d39b20;background:#f4f0d3;
}
.jp71-target-arrow{
  position:absolute;right:22px;top:19px;
  transform:rotate(-45deg);font-size:2rem;color:#118c43;
}
.jp71-coins{
  position:absolute;bottom:1px;
  color:#d99c1a;font-size:1.4rem;letter-spacing:-8px;
  text-shadow:0 3px 0 #a46f09;
}
.jp71-section-label{display:flex;align-items:center;gap:9px;font-size:1.15rem}
.jp71-pig{width:12px;height:12px;border-radius:50%;background:#1bb25b;color:transparent}
.jp71-savings-copy p{color:var(--jp71-muted);line-height:1.45}
.jp71-progress-shell{margin-top:10px}
.jp71-progress-bar{
  height:8px;border-radius:999px;background:#d4dfd8;overflow:hidden
}
html[data-jcspay-theme="dark"] .jp71-progress-bar{background:#1c2a34}
.jp71-progress-bar i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,#e82732,#ff5961);border-radius:inherit
}
.jp71-progress-meta{display:flex;justify-content:space-between;margin-top:7px;font-size:.72rem}
.jp71-progress-meta span{color:var(--jp71-muted)}
.jp71-month-preview{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.jp71-month-preview>span{
  background:var(--jp71-card-2);border:1px solid var(--jp71-border);
  border-radius:13px;padding:9px 11px;display:grid
}
.jp71-month-preview small{font-size:.6rem;color:var(--jp71-muted)}
.jp71-month-preview b{font-size:.78rem}
.jp71-month-preview i{font-style:normal;color:var(--jp71-green)}
.jp71-saving-presets{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0}
.jp71-saving-presets button{
  border:1px solid var(--jp71-border);background:var(--jp71-card-2);
  color:var(--jp71-text);border-radius:999px;padding:7px 10px;
  font-size:.66rem;font-weight:800
}
.jp71-saving-presets button:hover,.jp71-saving-presets button.active{
  background:#e92732;color:#fff;border-color:#e92732
}
.jp71-target-btn{
  width:100%;min-height:46px;border:0;border-radius:14px;
  background:linear-gradient(145deg,#0b963f,#19bf5a);
  color:#fff;font-weight:900
}

/* PROMO SLIDER */
.jp71-promo-slider{
  position:relative;overflow:hidden;border-radius:24px;
  margin:15px 0 18px;border:1px solid var(--jp71-border);
  box-shadow:var(--jp71-shadow);background:#071c16
}
.jp71-promo-track{
  display:flex;transition:transform .55s cubic-bezier(.2,.75,.25,1);
  will-change:transform
}
.jp71-promo{
  min-width:100%;min-height:235px;padding:24px 27px;
  position:relative;overflow:hidden;display:flex;align-items:center;
  justify-content:space-between;gap:18px;color:#fff
}
.jp71-promo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.06),transparent 62%)
}
.jp71-promo-peace{
  background:
    radial-gradient(circle at 72% 55%,rgba(38,225,116,.21),transparent 24%),
    linear-gradient(135deg,#061f18,#063c2c 55%,#061912)
}
.jp71-promo-games{
  background:
    radial-gradient(circle at 65% 40%,rgba(127,52,255,.30),transparent 25%),
    linear-gradient(135deg,#0d1541,#1a0d48 58%,#07152c)
}
.jp71-promo-cards{
  background:
    radial-gradient(circle at 26% 42%,rgba(58,108,255,.30),transparent 28%),
    linear-gradient(135deg,#071c47,#0d2f72 55%,#071633)
}
.jp71-promo-copy{position:relative;z-index:2;max-width:55%}
.jp71-promo-copy>span{font-size:.63rem;font-weight:900;letter-spacing:.08em;color:#79eba1}
.jp71-promo-copy h3{margin:7px 0 7px;color:#fff!important;font-size:1.65rem;line-height:1.04}
.jp71-promo-copy h3 em{color:#4ce381;font-style:normal}
.jp71-promo-copy p{color:#c9d5cf!important;max-width:430px}
.jp71-promo-copy button{
  border:0;border-radius:12px;padding:10px 14px;
  font-weight:900;background:#55df86;color:#062111;margin-top:5px
}
.jp71-tech-art{position:relative;width:260px;height:170px;z-index:2}
.jp71-phone{
  position:absolute;right:43px;top:4px;width:104px;height:166px;
  border:7px solid #1a2630;border-radius:24px;
  background:#081316;box-shadow:0 19px 32px rgba(0,0,0,.35);
  transform:rotate(7deg);overflow:hidden
}
.jp71-phone-top{height:13px;width:44px;margin:auto;background:#1a2630;border-radius:0 0 8px 8px}
.jp71-phone-screen{
  height:100%;display:grid;place-items:center;align-content:center;gap:7px;
  background:radial-gradient(circle at 50% 30%,#126b47,#071a14)
}
.jp71-phone-screen span{font-size:2rem;color:#ffd22e}
.jp71-phone-screen b{color:#5cea8c!important;font-size:.7rem}
.jp71-wifi{
  position:absolute;left:18px;top:45px;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.10);
  font-size:2.25rem;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.12)
}
.jp71-shield{
  position:absolute;right:0;bottom:10px;width:82px;height:94px;
  display:grid;place-items:center;font-size:2.8rem;font-weight:900;
  color:#fff;background:linear-gradient(145deg,#ca9c35,#f0d37b);
  clip-path:polygon(50% 0,92% 16%,83% 73%,50% 100%,17% 73%,8% 16%);
  text-shadow:0 3px 0 rgba(0,0,0,.18)
}
.jp71-game-title{position:relative;z-index:2;min-width:260px}
.jp71-game-title small{font-weight:900;letter-spacing:.12em;color:#b6c0ff}
.jp71-game-title strong{
  display:block;font-size:3rem;line-height:.9;color:#f0f5ff!important;
  text-shadow:0 3px 0 #2e3e86,0 8px 22px rgba(0,0,0,.4)
}
.jp71-game-title strong span{color:#f7b82b}
.jp71-game-art{
  position:relative;z-index:2;font-size:5.5rem;filter:drop-shadow(0 12px 12px rgba(0,0,0,.4))
}
.jp71-game-copy{max-width:34%}
.jp71-game-copy button{background:#6c45eb;color:#fff}
.jp71-cards-art{position:relative;z-index:2;width:300px;height:170px}
.jp71-mini-card{
  position:absolute;width:190px;height:116px;border-radius:17px;padding:15px;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 18px 28px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.25)
}
.jp71-mini-card span{font-size:.65rem;font-weight:900}
.jp71-mini-card b{font-size:1.4rem;color:#fff!important;align-self:flex-end}
.jp71-mini-card.card-a{
  left:12px;top:24px;transform:rotate(-8deg);
  background:linear-gradient(145deg,#182337,#334d7c)
}
.jp71-mini-card.card-b{
  left:83px;top:11px;transform:rotate(7deg);
  background:linear-gradient(145deg,#0b1e52,#0d4e9f)
}
.jp71-promo-dots{
  position:absolute;z-index:4;bottom:11px;left:50%;transform:translateX(-50%);
  display:flex;gap:7px
}
.jp71-promo-dots button{
  width:8px;height:8px;border:0;border-radius:999px;padding:0;
  background:rgba(255,255,255,.35)
}
.jp71-promo-dots button.active{width:23px;background:#fff}

/* SERVICES */
.jp71-services-head{display:flex;justify-content:space-between;align-items:flex-end;margin:20px 4px 10px}
.jp71-services-head h3{margin:2px 0 0}
.jp71-services-head-actions{display:flex;align-items:center;gap:8px}
.jp71-more-link{
  border:0;background:transparent;color:#0f9f4a;font-weight:900;padding:6px
}
html[data-jcspay-theme="dark"] .jp71-more-link{color:#4ae37f}
.jp71-service-grid{
  background:var(--jp71-card);
  border:1px solid var(--jp71-border);
  border-radius:24px;padding:12px;
  box-shadow:var(--jp71-shadow)
}
.jp71-service-grid .service-card{
  box-shadow:none!important;border-radius:17px!important;
}
.jp71-more-tile .service-icon{background:#e9edf0!important;color:#5d6972!important}
html[data-jcspay-theme="dark"] .jp71-more-tile .service-icon{background:#1a2530!important;color:#c7d0d8!important}

.jp71-recent-panel{margin-top:15px!important;border-radius:22px!important}
.jp71-security-card{
  margin-top:14px!important;border-radius:20px!important;
  display:grid!important;grid-template-columns:auto 1fr auto!important;align-items:center!important;
}
.jp71-security-card button{
  border:1px solid #afd8bd;background:#e4f6ea;color:#0a7f39;
  border-radius:13px;padding:10px 13px;font-weight:900
}
html[data-jcspay-theme="dark"] .jp71-security-card button{
  background:#0b2b1a;border-color:#1d5834;color:#58e389
}

/* OVERLAYS / SAVINGS */
.jp71-overlay{
  position:fixed;inset:0;z-index:1200;
  display:none;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.68);padding:16px;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)
}
.jp71-overlay.open{display:flex}
.jp71-sheet{
  width:min(720px,100%);max-height:88vh;overflow:auto;
  position:relative;border-radius:27px;padding:23px;
  background:var(--jp71-card);color:var(--jp71-text);
  border:1px solid var(--jp71-border);box-shadow:0 24px 65px rgba(0,0,0,.34)
}
.jp71-small-sheet{width:min(460px,100%)}
.jp71-sheet-close{
  position:absolute;right:14px;top:14px;width:38px;height:38px;
  border-radius:50%;border:1px solid var(--jp71-border);
  background:var(--jp71-card-2);color:var(--jp71-text);font-size:1.3rem
}
.jp71-sheet-head{display:flex;align-items:center;gap:13px;padding-right:45px}
.jp71-sheet-icon{
  width:54px;height:54px;min-width:54px;border-radius:17px;
  display:grid;place-items:center;background:#e4f6e9;font-size:1.6rem
}
html[data-jcspay-theme="dark"] .jp71-sheet-icon{background:#0d2c1b}
.jp71-sheet h2,.jp71-sheet h3{margin:3px 0}
.jp71-sheet p{color:var(--jp71-muted)}
.jp71-sandbox-note{
  margin:14px 0;padding:11px 13px;border-radius:13px;
  background:#fff0d2;border:1px solid #e4bd65;color:#77520a;
  font-size:.68rem;font-weight:800;line-height:1.4
}
html[data-jcspay-theme="dark"] .jp71-sandbox-note{
  background:#2b210b;border-color:#5e4815;color:#ffd36b
}
.jp71-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0}
.jp71-form-grid label{display:grid;gap:6px;font-weight:800;font-size:.75rem}
.jp71-form-grid input{
  width:100%;min-height:46px;border-radius:12px;padding:0 12px;
  background:var(--jp71-card-2)!important;color:var(--jp71-text)!important;
  border:1px solid var(--jp71-border)!important
}
.jp71-primary-wide{
  grid-column:1/-1;min-height:48px;border:0;border-radius:14px;
  background:linear-gradient(145deg,#0b963f,#17bd58);color:#fff;font-weight:900
}
.jp71-savings-list-head{display:flex;justify-content:space-between;align-items:flex-end;margin-top:20px}
.jp71-refresh-btn{border:0;background:transparent;color:#0c9b46;font-weight:900}
.jp71-savings-list{display:grid;gap:10px;margin-top:10px}
.jp71-target-item{
  border:1px solid var(--jp71-border);background:var(--jp71-card-2);
  border-radius:17px;padding:13px
}
.jp71-target-item-top{display:flex;justify-content:space-between;gap:10px}
.jp71-target-item h4{margin:0}
.jp71-target-item small{color:var(--jp71-muted)}
.jp71-target-item-progress{height:7px;background:#d6dfd9;border-radius:999px;overflow:hidden;margin:10px 0 7px}
html[data-jcspay-theme="dark"] .jp71-target-item-progress{background:#1e2b35}
.jp71-target-item-progress i{display:block;height:100%;background:#e92732}
.jp71-target-money{display:flex;justify-content:space-between;font-size:.72rem}
.jp71-target-actions{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.jp71-target-actions button{
  border:1px solid var(--jp71-border);border-radius:10px;
  background:var(--jp71-card);color:var(--jp71-text);padding:8px 10px;font-weight:900
}
.jp71-target-actions .save{background:#0da24a;color:#fff;border-color:#0da24a}
.jp71-target-actions .mature{background:#e92732;color:#fff;border-color:#e92732}
.jp71-more-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px
}
.jp71-more-grid button{
  min-height:100px;border-radius:17px;border:1px solid var(--jp71-border);
  background:var(--jp71-card-2);color:var(--jp71-text);
  display:grid;place-items:center;align-content:center;gap:7px
}
.jp71-more-grid button span{font-size:1.5rem}
.jp71-more-grid button b{font-size:.75rem}

@media(max-width:820px){
  .jp71-home{padding:5px 0 20px}
  .jp71-balance-fund-grid{
    grid-template-columns:minmax(0,1fr) 116px;gap:8px
  }
  .jp71-balance-card{
    min-height:190px;padding:17px!important;border-radius:21px!important
  }
  .jp71-balance-card #walletBalance{font-size:1.95rem!important}
  .jp71-eye-btn{width:48px!important;height:48px!important;border-radius:14px!important}
  .jp71-eye-btn svg{width:23px;height:23px}
  .jp71-wallet-trust{margin-top:28px!important;font-size:.53rem!important}
  .jp71-fund-card{
    min-height:190px;border-radius:21px;padding:9px;
    justify-content:center;align-items:center;text-align:center
  }
  .jp71-fund-card .eyebrow,.jp71-fund-card h3,.jp71-fund-card p{display:none}
  .jp71-wallet-art{width:92px;height:76px;margin:0}
  .jp71-wallet-art-card{width:60px;height:43px}
  .jp71-wallet-art-body{width:69px;height:50px;font-size:1.45rem}
  .jp71-fund-main-btn{
    width:42px;height:42px;min-height:42px;border-radius:50%;font-size:0;padding:0
  }
  .jp71-fund-main-btn span{font-size:1.35rem}

  .jp71-action-grid{gap:7px;margin:9px 0 11px}
  .jp71-action{
    min-height:69px;padding:7px 5px;border-radius:15px;
    flex-direction:column;justify-content:center;text-align:center;gap:3px
  }
  .jp71-action-icon{width:33px;height:33px;min-width:33px;border-radius:11px;font-size:1rem}
  .jp71-action strong{font-size:.61rem}
  .jp71-action small{display:none!important}

  .jp71-savings-card{
    grid-template-columns:78px minmax(0,1fr);
    gap:11px;padding:13px;border-radius:20px;margin:10px 0
  }
  .jp71-target-art{height:86px}
  .jp71-target-ring{width:66px;height:66px;border-width:7px;box-shadow:inset 0 0 0 8px #dfeee5;font-size:2.4rem}
  .jp71-target-arrow{right:1px;top:5px;font-size:1.35rem}
  .jp71-coins{font-size:1rem;bottom:-3px}
  .jp71-section-label{font-size:.9rem}
  .jp71-savings-copy p{font-size:.65rem;margin:5px 0}
  .jp71-savings-controls{grid-column:1/-1}
  .jp71-month-preview{gap:5px}
  .jp71-month-preview>span{padding:7px 8px}
  .jp71-saving-presets{justify-content:space-between}
  .jp71-saving-presets button{padding:6px 8px;font-size:.58rem}
  .jp71-target-btn{min-height:42px;font-size:.72rem}

  .jp71-promo-slider{border-radius:20px;margin:11px 0 14px}
  .jp71-promo{min-height:173px;padding:16px 17px;gap:9px}
  .jp71-promo-copy{max-width:58%}
  .jp71-promo-copy>span{font-size:.48rem}
  .jp71-promo-copy h3{font-size:1.08rem;margin:5px 0}
  .jp71-promo-copy p{font-size:.61rem;line-height:1.35}
  .jp71-promo-copy button{padding:8px 10px;font-size:.63rem}
  .jp71-tech-art{width:150px;height:132px}
  .jp71-phone{width:72px;height:116px;border-width:5px;right:29px}
  .jp71-phone-screen span{font-size:1.4rem}
  .jp71-wifi{left:4px;top:38px;width:42px;height:42px;font-size:1.6rem}
  .jp71-shield{width:58px;height:67px;font-size:1.8rem}
  .jp71-game-title{min-width:120px}
  .jp71-game-title strong{font-size:1.85rem}
  .jp71-game-title small{font-size:.43rem}
  .jp71-game-art{font-size:3.3rem}
  .jp71-game-copy{max-width:40%}
  .jp71-cards-art{width:144px;height:112px}
  .jp71-mini-card{width:103px;height:65px;border-radius:10px;padding:8px}
  .jp71-mini-card.card-a{left:0;top:31px}
  .jp71-mini-card.card-b{left:35px;top:11px}
  .jp71-mini-card b{font-size:.82rem!important}
  .jp71-mini-card span{font-size:.42rem}

  .jp71-services-head{margin:14px 2px 8px}
  .jp71-services-head h3{font-size:1rem}
  .jp71-services-head-actions{gap:3px}
  .jp71-more-link{font-size:.64rem}
  .jp71-service-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;padding:8px;border-radius:19px
  }
  .jp71-service-grid .service-card{
    min-height:85px!important;padding:8px 4px!important;border-radius:14px!important
  }
  .jp71-service-grid .service-card .service-icon{
    width:37px!important;height:37px!important;border-radius:12px!important
  }
  .jp71-service-grid .service-card b{font-size:.58rem!important}
  .jp71-recent-panel{border-radius:18px!important}
  .jp71-security-card{
    grid-template-columns:auto 1fr auto!important;
    padding:11px!important;border-radius:16px!important
  }
  .jp71-security-card p{display:none!important}
  .jp71-security-card b{font-size:.68rem!important}
  .jp71-security-card button{font-size:.58rem;padding:8px}

  .jp71-overlay{padding:0;align-items:flex-end}
  .jp71-sheet{
    width:100%;max-height:91vh;border-radius:25px 25px 0 0;
    padding:19px 15px calc(19px + env(safe-area-inset-bottom))
  }
  .jp71-form-grid{grid-template-columns:1fr;gap:10px}
  .jp71-primary-wide{grid-column:1}
  .jp71-more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:360px){
  .jp71-balance-fund-grid{grid-template-columns:minmax(0,1fr) 98px}
  .jp71-wallet-trust span:nth-child(2){display:none}
  .jp71-service-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}


/* ============================================================
   JCSPAY V72 — COMPACT FIRST-SCREEN DASHBOARD
   Keeps the approved V71 design but reduces the vertical space
   used by Balance, Fund Wallet and Target Savings so the
   publicity slider remains visible on the main dashboard.
   ============================================================ */

@media(max-width:820px){

  /* Compact top area */
  .jp71-home{
    padding-top:2px!important;
  }

  .topbar{
    min-height:68px!important;
    padding-top:7px!important;
    padding-bottom:5px!important;
  }

  .jcspay-greeting-block{
    padding:1px 3px 2px!important;
  }

  .jcspay-greeting-block h1{
    font-size:.91rem!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Balance and side Add Money become shorter dashboard cards */
  .jp71-balance-fund-grid{
    grid-template-columns:minmax(0,1fr) 102px!important;
    gap:7px!important;
  }

  .jp71-balance-card{
    min-height:142px!important;
    padding:13px 14px!important;
    border-radius:19px!important;
    background:
      radial-gradient(circle at 92% 8%,rgba(255,255,255,.12),transparent 26%),
      linear-gradient(135deg,#08793c,#10a84f 58%,#16bf5b)!important;
    box-shadow:0 10px 21px rgba(7,107,51,.20)!important;
  }

  html[data-jcspay-theme="dark"] .jp71-balance-card{
    background:
      radial-gradient(circle at 88% 8%,rgba(54,221,112,.10),transparent 26%),
      linear-gradient(135deg,#05331f,#07533a 58%,#096541)!important;
    border-color:#1d8f50!important;
  }

  .jp71-balance-card .jcspay-wallet-label{
    font-size:.68rem!important;
    margin:0!important;
  }

  .jp71-balance-card #walletBalance{
    font-size:1.75rem!important;
    margin:3px 0 0!important;
    line-height:1!important;
  }

  .jp71-balance-card .jcspay-tier-pill{
    margin:7px 0 6px!important;
    padding:4px 9px!important;
    font-size:.58rem!important;
  }

  .jp71-eye-btn{
    width:43px!important;
    height:43px!important;
    border-radius:13px!important;
  }

  .jp71-eye-btn svg{
    width:20px!important;
    height:20px!important;
  }

  .jp71-wallet-trust{
    margin-top:13px!important;
    font-size:.47rem!important;
    gap:4px!important;
  }

  .jp71-wallet-trust span{
    white-space:nowrap!important;
  }

  .jp71-fund-card{
    min-height:142px!important;
    padding:7px!important;
    border-radius:19px!important;
    justify-content:center!important;
    gap:4px!important;
  }

  .jp71-wallet-art{
    width:76px!important;
    height:61px!important;
  }

  .jp71-wallet-art-card{
    width:48px!important;
    height:34px!important;
    border-radius:7px!important;
  }

  .jp71-wallet-art-body{
    width:56px!important;
    height:43px!important;
    border-radius:11px!important;
    font-size:1.2rem!important;
  }

  .jp71-fund-main-btn{
    width:36px!important;
    height:36px!important;
    min-height:36px!important;
    border-radius:50%!important;
  }

  .jp71-fund-main-btn span{
    font-size:1.15rem!important;
  }

  /* Four actions stay visible but compact */
  .jp71-action-grid{
    gap:6px!important;
    margin:7px 0 8px!important;
  }

  .jp71-action{
    min-height:57px!important;
    padding:5px 3px!important;
    border-radius:14px!important;
  }

  .jp71-action-icon{
    width:29px!important;
    height:29px!important;
    min-width:29px!important;
    border-radius:9px!important;
    font-size:.88rem!important;
  }

  .jp71-action strong{
    font-size:.56rem!important;
  }

  /* Savings becomes a compact dashboard strip, not a tall panel */
  .jp71-savings-card{
    grid-template-columns:58px minmax(0,1fr)!important;
    gap:8px!important;
    padding:9px 10px!important;
    margin:7px 0!important;
    border-radius:17px!important;
  }

  .jp71-target-art{
    height:59px!important;
  }

  .jp71-target-ring{
    width:50px!important;
    height:50px!important;
    border-width:5px!important;
    box-shadow:inset 0 0 0 6px #dfeee5!important;
    font-size:1.75rem!important;
  }

  .jp71-target-arrow{
    right:-1px!important;
    top:1px!important;
    font-size:1rem!important;
  }

  .jp71-coins{
    display:none!important;
  }

  .jp71-section-label{
    font-size:.75rem!important;
    gap:6px!important;
  }

  .jp71-savings-copy p{
    font-size:.53rem!important;
    margin:2px 0!important;
    line-height:1.28!important;
  }

  .jp71-progress-shell{
    margin-top:5px!important;
  }

  .jp71-progress-meta{
    margin-top:4px!important;
    font-size:.56rem!important;
  }

  .jp71-savings-controls{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:6px!important;
    align-items:center!important;
  }

  .jp71-month-preview{
    grid-template-columns:1fr auto 1fr!important;
    gap:4px!important;
  }

  .jp71-month-preview>span{
    padding:5px 7px!important;
    border-radius:10px!important;
  }

  .jp71-month-preview small{
    font-size:.46rem!important;
  }

  .jp71-month-preview b{
    font-size:.59rem!important;
  }

  .jp71-saving-presets{
    grid-column:1/-1!important;
    margin:1px 0!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;
  }

  .jp71-saving-presets button{
    padding:4px 4px!important;
    font-size:.48rem!important;
  }

  .jp71-target-btn{
    grid-column:1/-1!important;
    min-height:33px!important;
    border-radius:10px!important;
    font-size:.59rem!important;
  }

  /* Publicity becomes a compact but very visible dashboard slider */
  .jp71-promo-slider{
    margin:7px 0 10px!important;
    border-radius:17px!important;
  }

  .jp71-promo{
    min-height:128px!important;
    padding:11px 12px!important;
    gap:6px!important;
  }

  .jp71-promo-copy{
    max-width:61%!important;
  }

  .jp71-promo-copy>span{
    font-size:.39rem!important;
  }

  .jp71-promo-copy h3{
    font-size:.86rem!important;
    line-height:1.05!important;
    margin:3px 0!important;
  }

  .jp71-promo-copy p{
    font-size:.49rem!important;
    line-height:1.28!important;
    margin:3px 0!important;
  }

  .jp71-promo-copy button{
    padding:6px 8px!important;
    border-radius:8px!important;
    font-size:.50rem!important;
    margin-top:2px!important;
  }

  .jp71-tech-art{
    width:105px!important;
    height:96px!important;
  }

  .jp71-phone{
    width:52px!important;
    height:84px!important;
    border-width:4px!important;
    right:19px!important;
    border-radius:15px!important;
  }

  .jp71-phone-screen span{
    font-size:1rem!important;
  }

  .jp71-wifi{
    width:33px!important;
    height:33px!important;
    font-size:1.18rem!important;
    left:1px!important;
    top:28px!important;
  }

  .jp71-shield{
    width:42px!important;
    height:49px!important;
    font-size:1.3rem!important;
  }

  .jp71-game-title{
    min-width:82px!important;
  }

  .jp71-game-title strong{
    font-size:1.28rem!important;
  }

  .jp71-game-title small{
    font-size:.31rem!important;
  }

  .jp71-game-art{
    font-size:2.15rem!important;
  }

  .jp71-game-copy{
    max-width:43%!important;
  }

  .jp71-cards-art{
    width:102px!important;
    height:82px!important;
  }

  .jp71-mini-card{
    width:75px!important;
    height:48px!important;
    border-radius:8px!important;
    padding:6px!important;
  }

  .jp71-mini-card.card-a{
    top:24px!important;
  }

  .jp71-mini-card.card-b{
    left:25px!important;
    top:8px!important;
  }

  .jp71-mini-card b{
    font-size:.62rem!important;
  }

  .jp71-mini-card span{
    font-size:.30rem!important;
  }

  .jp71-promo-dots{
    bottom:6px!important;
    gap:5px!important;
  }

  .jp71-promo-dots button{
    width:6px!important;
    height:6px!important;
  }

  .jp71-promo-dots button.active{
    width:17px!important;
  }

  /* Keep service section close to the slider */
  .jp71-services-head{
    margin:9px 2px 6px!important;
  }

  .jp71-services-head .eyebrow{
    font-size:.50rem!important;
  }

  .jp71-services-head h3{
    font-size:.84rem!important;
  }

  .jp71-more-link{
    font-size:.55rem!important;
  }
}

/* Additional slider publicity artwork */
.jp72-promo-bills{
  background:
    radial-gradient(circle at 25% 55%,rgba(255,255,255,.08),transparent 28%),
    linear-gradient(135deg,#8f121b,#d92630 55%,#9e1118);
}

.jp72-bills-art{
  position:relative;
  z-index:2;
  width:260px;
  height:150px;
  display:grid;
  grid-template-columns:repeat(2,58px);
  grid-template-rows:repeat(2,58px);
  gap:10px;
  place-content:center;
}

.jp72-bills-art span{
  display:grid;
  place-items:center;
  border-radius:18px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  font-size:1.8rem;
  color:#fff;
  box-shadow:0 9px 18px rgba(0,0,0,.18);
}

.jp72-promo-momo{
  background:
    radial-gradient(circle at 28% 50%,rgba(65,224,125,.20),transparent 26%),
    linear-gradient(135deg,#062416,#0a5a31 58%,#07291a);
}

.jp72-momo-art{
  position:relative;
  z-index:2;
  width:245px;
  height:150px;
  display:grid;
  place-items:center;
}

.jp72-africa{
  font-size:5.2rem;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.30));
}

.jp72-momo-phone{
  position:absolute;
  right:25px;
  bottom:12px;
  width:82px;
  height:108px;
  border-radius:17px;
  border:5px solid #173126;
  background:linear-gradient(145deg,#0d8d49,#12c460);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:.78rem;
  font-weight:950;
  letter-spacing:.08em;
  transform:rotate(8deg);
  box-shadow:0 15px 24px rgba(0,0,0,.28);
}

@media(max-width:820px){
  .jp72-bills-art{
    width:100px!important;
    height:90px!important;
    grid-template-columns:repeat(2,34px)!important;
    grid-template-rows:repeat(2,34px)!important;
    gap:6px!important;
  }

  .jp72-bills-art span{
    border-radius:10px!important;
    font-size:1rem!important;
  }

  .jp72-momo-art{
    width:96px!important;
    height:88px!important;
  }

  .jp72-africa{
    font-size:3rem!important;
  }

  .jp72-momo-phone{
    width:48px!important;
    height:64px!important;
    right:1px!important;
    bottom:4px!important;
    border-width:3px!important;
    border-radius:10px!important;
    font-size:.42rem!important;
  }
}

/* ============================================================
   JCSPAY V73 — SAVINGS HUB / TARGET SAVINGS / GROUP MEETINGS
   ============================================================ */
.jp73-savings-hub{
  margin:14px 0 14px;
  padding:16px;
  border:1px solid var(--jp-line);
  border-radius:24px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--jp-surface) 88%,#d8f7e4),var(--jp-surface));
  box-shadow:var(--jp-shadow);
}
.jp73-hub-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.jp73-hub-head h3{margin:2px 0 0;font-size:1.22rem;color:var(--jp-text)}
.jp73-hub-lock{font-size:.72rem;font-weight:900;color:var(--jp-green);background:color-mix(in srgb,var(--jp-green) 10%,var(--jp-surface));padding:7px 10px;border-radius:999px}
.jp73-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.jp73-hub-tile{appearance:none;border:1px solid var(--jp-line);border-radius:18px;padding:13px;text-align:left;display:flex;gap:10px;align-items:flex-start;min-height:132px;background:var(--jp-surface);color:var(--jp-text);box-shadow:0 7px 18px rgba(23,78,45,.07);cursor:pointer}
.jp73-hub-tile:hover{transform:translateY(-1px)}
.jp73-hub-general{background:linear-gradient(145deg,#ecfff3,var(--jp-surface))}
.jp73-hub-target{background:linear-gradient(145deg,#eef5ff,var(--jp-surface))}
.jp73-hub-group{background:linear-gradient(145deg,#fff3e9,var(--jp-surface))}
.jp73-hub-icon{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;font-size:1.2rem;background:color-mix(in srgb,var(--jp-green) 12%,var(--jp-surface));flex:0 0 auto}
.jp73-hub-copy{display:grid;gap:4px;min-width:0}
.jp73-hub-copy small{font-size:.62rem;letter-spacing:.08em;font-weight:900;color:var(--jp-muted)}
.jp73-hub-copy strong{font-size:1.03rem;line-height:1.15;color:var(--jp-text);overflow-wrap:anywhere}
.jp73-hub-copy b{font-size:.73rem;line-height:1.25;color:var(--jp-text);font-weight:800}
.jp73-hub-copy em{font-style:normal;font-size:.67rem;color:var(--jp-green);font-weight:900}
.jp73-mini-progress{display:block;height:6px;border-radius:999px;background:var(--jp-line);overflow:hidden;margin-top:4px}.jp73-mini-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--jp-green),var(--jp-blue));border-radius:inherit;transition:width .25s ease}

.jp73-sheet{max-width:760px!important}
.jp73-balance-banner{margin:14px 0;padding:16px;border-radius:18px;background:linear-gradient(135deg,#06723c,#18c964);color:#fff;display:grid;gap:3px}.jp73-balance-banner span,.jp73-balance-banner small{font-size:.78rem;opacity:.9}.jp73-balance-banner strong{font-size:1.7rem}
.jp73-check{display:flex!important;align-items:flex-start!important;gap:10px!important;padding:12px!important;border:1px solid var(--jp-line)!important;border-radius:14px!important;background:var(--jp-surface-2)!important}.jp73-check input{width:20px!important;height:20px!important;min-width:20px!important;margin:2px 0 0!important}.jp73-check span{display:grid;gap:2px}.jp73-check small{color:var(--jp-muted);font-weight:600}
.jp73-two-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}.jp73-two-actions button{border:0;border-radius:14px;padding:13px 10px;font-weight:900;background:var(--jp-green);color:#fff}.jp73-two-actions .withdraw{background:var(--jp-red)}
.jp73-fee-note{padding:11px 13px;border-radius:12px;background:#fff4df;color:#7c4a00;font-size:.82rem;font-weight:800;margin:10px 0}
.jp73-quote{display:grid;gap:4px;padding:12px;border-radius:13px;background:var(--jp-surface-2);border:1px solid var(--jp-line)}.jp73-quote b,.jp73-quote strong{color:var(--jp-text)}.jp73-quote span,.jp73-quote small{font-size:.78rem;color:var(--jp-muted)}.jp73-quote strong{font-size:1.02rem}
.jp73-calc-btn{grid-column:1/-1;border:1px solid color-mix(in srgb,var(--jp-blue) 35%,var(--jp-line));background:color-mix(in srgb,var(--jp-blue) 8%,var(--jp-surface));color:var(--jp-blue);border-radius:14px;padding:12px;font-weight:900}
.jp73-target-quotes{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.jp73-target-quotes>span{grid-column:1/-1;padding:10px;color:var(--jp-muted);font-size:.8rem}.jp73-target-quotes button{border:1px solid var(--jp-line);background:var(--jp-surface-2);color:var(--jp-text);border-radius:15px;padding:12px 8px;display:grid;gap:4px;text-align:center}.jp73-target-quotes button.active{border:2px solid var(--jp-green);background:color-mix(in srgb,var(--jp-green) 9%,var(--jp-surface))}.jp73-target-quotes button strong{font-size:1rem}.jp73-target-quotes button small{font-size:.68rem;color:var(--jp-muted)}
.jp73-target-list{display:grid;gap:10px}.jp73-target-row{border:1px solid var(--jp-line);background:var(--jp-surface);border-radius:17px;padding:13px;display:grid;gap:9px}.jp73-target-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.jp73-target-head>div{display:grid;gap:2px}.jp73-target-head small{color:var(--jp-muted)}.jp73-target-head>span{font-size:.67rem;font-weight:900;color:var(--jp-green);background:color-mix(in srgb,var(--jp-green) 9%,var(--jp-surface));padding:5px 8px;border-radius:999px}.jp73-target-progress{height:7px;background:var(--jp-line);border-radius:999px;overflow:hidden}.jp73-target-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--jp-green),var(--jp-blue));border-radius:inherit}.jp73-target-numbers{display:flex;justify-content:space-between;gap:10px;align-items:center}.jp73-target-numbers span{font-size:.75rem;color:var(--jp-muted)}.jp73-target-plan{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.jp73-target-plan span{background:var(--jp-surface-2);border-radius:10px;padding:7px;font-size:.68rem;color:var(--jp-muted)}.jp73-target-plan b{display:block;color:var(--jp-text);font-size:.72rem;margin-top:2px}.jp73-target-actions{display:flex;gap:8px}.jp73-target-actions button{border:0;border-radius:11px;padding:9px 12px;background:var(--jp-green);color:#fff;font-weight:900}.jp73-target-actions .withdraw{background:var(--jp-red)}

.jp73-group-create{margin-bottom:18px}.jp73-group-section{margin-top:18px}.jp73-group-section h3{margin:3px 0 10px}.jp73-invites,.jp73-groups-list{display:grid;gap:10px}.jp73-invites article{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--jp-line);border-radius:14px;padding:11px;background:var(--jp-surface)}.jp73-invites article div{display:grid;gap:3px}.jp73-invites small{color:var(--jp-muted)}.jp73-invites button{border:0;border-radius:10px;padding:9px 12px;background:var(--jp-green);color:#fff;font-weight:900}
.jp73-group-card{border:1px solid var(--jp-line);background:var(--jp-surface);border-radius:18px;padding:13px;display:grid;gap:10px}.jp73-group-head{display:flex;justify-content:space-between;gap:10px}.jp73-group-head>div{display:grid;gap:2px}.jp73-group-head small{color:var(--jp-muted)}.jp73-group-head>span{font-size:.65rem;font-weight:900;padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--jp-purple) 10%,var(--jp-surface));color:var(--jp-purple);height:max-content}.jp73-round{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;padding:10px;border-radius:13px;background:var(--jp-surface-2)}.jp73-round b{grid-column:1/-1}.jp73-round span{font-size:.72rem;color:var(--jp-muted)}.jp73-member-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}.jp73-member-list li{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 9px;border:1px solid var(--jp-line);border-radius:11px}.jp73-member-list li span{display:grid;gap:1px}.jp73-member-list small{font-size:.68rem;color:var(--jp-muted)}.jp73-member-list button{width:29px;height:29px;border:0;border-radius:9px;background:#ffe9e9;color:#b00020;font-weight:900}.jp73-add-member-form{display:grid;grid-template-columns:1fr 1fr auto;gap:7px}.jp73-add-member-form input{min-width:0;border:1px solid var(--jp-line);background:var(--jp-surface-2);color:var(--jp-text);border-radius:10px;padding:9px}.jp73-add-member-form button,.jp73-activate-group,.jp73-contribute-group{border:0;border-radius:11px;padding:10px 12px;font-weight:900;color:#fff;background:var(--jp-blue)}.jp73-activate-group{background:var(--jp-green)}.jp73-contribute-group{background:linear-gradient(90deg,var(--jp-green),#08a85e)}.jp73-paid-note{font-size:.76rem;font-weight:900;color:var(--jp-green);padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--jp-green) 8%,var(--jp-surface))}

html[data-jcspay-theme="dark"] .jp73-savings-hub{background:linear-gradient(145deg,#08150f,#0b1720);border-color:#21352d}
html[data-jcspay-theme="dark"] .jp73-hub-tile{background:#0c1722!important;border-color:#20313e!important;box-shadow:0 8px 22px rgba(0,0,0,.26)}
html[data-jcspay-theme="dark"] .jp73-hub-general{background:linear-gradient(145deg,#08251a,#0c1722)!important}
html[data-jcspay-theme="dark"] .jp73-hub-target{background:linear-gradient(145deg,#081b32,#0c1722)!important}
html[data-jcspay-theme="dark"] .jp73-hub-group{background:linear-gradient(145deg,#2a170d,#0c1722)!important}
html[data-jcspay-theme="dark"] .jp73-balance-banner{background:linear-gradient(135deg,#075f38,#0ea35b)}
html[data-jcspay-theme="dark"] .jp73-fee-note{background:#352812;color:#ffd88b}
html[data-jcspay-theme="dark"] .jp73-member-list button{background:#3a171d;color:#ff8b9c}

@media(max-width:820px){
  .jp73-savings-hub{padding:12px;border-radius:20px;margin:10px 0 12px}
  .jp73-hub-grid{grid-template-columns:1fr;gap:8px}
  .jp73-hub-tile{min-height:82px;padding:10px 11px;align-items:center}
  .jp73-hub-icon{width:36px;height:36px}
  .jp73-hub-copy{grid-template-columns:auto 1fr;column-gap:8px;align-items:center;width:100%}
  .jp73-hub-copy small{grid-column:1}.jp73-hub-copy strong{grid-column:2;text-align:right;font-size:.95rem}.jp73-hub-copy b,.jp73-hub-copy em,.jp73-mini-progress{grid-column:1/-1}
  .jp73-hub-copy b{font-size:.69rem}.jp73-hub-copy em{font-size:.64rem}
  .jp73-target-quotes{grid-template-columns:1fr}.jp73-target-plan{grid-template-columns:1fr 1fr}.jp73-target-plan span:last-child{grid-column:1/-1}
  .jp73-two-actions{grid-template-columns:1fr}
  .jp73-add-member-form{grid-template-columns:1fr}.jp73-round{grid-template-columns:1fr}
  .jp73-round b{grid-column:auto}
}