:root{--navy:#082a63;--navy2:#0d3f8f;--red:#e51f36;--green:#0f9f6e;--bg:#f4f7fb;--card:#fff;--text:#10213d;--muted:#71809a;--line:#e3e9f2;--shadow:0 20px 50px rgba(8,42,99,.10)}
*{box-sizing:border-box}html,body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}button,input,select{font:inherit}.app-shell{min-height:100vh;display:grid;grid-template-columns:250px 1fr}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#071f4a,#092d69);color:#fff;padding:24px 18px;display:flex;flex-direction:column;z-index:15}.brand{display:flex;align-items:center;gap:12px;padding:6px 8px 26px}.brand img{width:54px;height:54px;object-fit:contain;background:#fff;border-radius:16px;padding:4px}.brand strong,.brand span{display:block;letter-spacing:.05em}.brand strong{font-size:14px}.brand span{font-weight:900;color:#ff3b4e}.sidebar nav{display:grid;gap:8px}.nav-item{border:0;background:transparent;color:#cfdbef;padding:13px 14px;border-radius:14px;text-align:left;font-weight:750;cursor:pointer;display:flex;gap:12px;align-items:center}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.12);color:#fff}.nav-item span{font-size:20px}.sidebar-foot{margin-top:auto;display:grid;gap:14px;padding:12px 8px}.sidebar-foot small{color:#9db1d5;letter-spacing:.12em;font-weight:800}.mode-pill{display:flex;align-items:center;gap:8px;font-size:12px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);padding:9px 10px;border-radius:999px}.mode-pill i{width:8px;height:8px;background:#f4b740;border-radius:50%}.main{min-width:0}.topbar{min-height:94px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;padding:18px 30px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--red);margin:0 0 5px}.topbar h1{font-size:24px;margin:0}.top-actions{display:flex;align-items:center;gap:10px}.icon-btn{width:42px;height:42px;border-radius:13px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer}.menu-btn{display:none}.profile-btn{border:1px solid var(--line);background:#fff;border-radius:15px;padding:6px 10px 6px 6px;display:flex;align-items:center;gap:10px}.avatar{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--navy2),var(--green));color:#fff;font-weight:900;display:grid;place-items:center}.profile-copy{text-align:left}.profile-copy b,.profile-copy small{display:block}.profile-copy small{color:var(--muted)}.view{display:none;padding:30px}.view.active{display:block}.hero-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr);gap:20px}.wallet-card{background:linear-gradient(135deg,#082a63 0%,#0d448f 62%,#0b8f6a 150%);border-radius:26px;padding:28px;color:#fff;box-shadow:0 22px 60px rgba(8,42,99,.26);position:relative;overflow:hidden}.wallet-card:after{content:"";position:absolute;right:-100px;top:-120px;width:300px;height:300px;border:1px solid rgba(255,255,255,.16);border-radius:50%;box-shadow:0 0 0 45px rgba(255,255,255,.04),0 0 0 90px rgba(255,255,255,.03)}.wallet-head,.wallet-actions,.wallet-meta{position:relative;z-index:1}.wallet-head{display:flex;justify-content:space-between;align-items:flex-start}.wallet-head p{margin:0 0 8px;color:#c5d4ed}.wallet-head h2{font-size:36px;margin:0}.eye-btn{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;border-radius:12px;width:42px;height:42px}.wallet-actions{display:flex;gap:10px;margin-top:26px}.primary,.secondary{border:0;border-radius:13px;padding:12px 16px;font-weight:850;cursor:pointer}.primary{background:var(--red);color:#fff;box-shadow:0 10px 25px rgba(229,31,54,.26)}.wallet-card .primary{background:#fff;color:var(--navy)}.secondary{background:#eef3f9;color:var(--navy)}.wallet-card .secondary{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18)}.small{padding:9px 12px;font-size:12px}.wide{width:100%;margin-top:12px}.wallet-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;font-size:12px;color:#d6e1f3}.security-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:24px;display:flex;gap:16px;align-items:center;box-shadow:var(--shadow)}.security-icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:#e9f9f3;color:var(--green);font-size:28px;font-weight:900}.security-card b{font-size:16px}.security-card p{margin:6px 0 0;color:var(--muted);line-height:1.5}.section-title{display:flex;justify-content:space-between;align-items:end;margin:32px 2px 16px}.section-title h3,.panel h3,.page-card h3{margin:0;font-size:21px}.live-badge{font-size:11px;font-weight:900;letter-spacing:.12em;background:#fff4d8;color:#946200;padding:8px 11px;border-radius:999px;border:1px solid #f5df9f}.service-grid{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:14px}.service-card{border:1px solid var(--line);background:#fff;border-radius:20px;padding:20px 16px;text-align:left;cursor:pointer;transition:.2s;min-height:160px}.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cbd9eb}.service-icon{width:48px;height:48px;border-radius:15px;background:#eef4ff;color:var(--navy2);display:grid;place-items:center;font-size:24px;margin-bottom:18px;font-weight:900}.service-card:nth-child(2) .service-icon,.service-card:nth-child(6) .service-icon{background:#ebf9f4;color:var(--green)}.service-card:nth-child(3) .service-icon,.service-card:nth-child(5) .service-icon{background:#fff0f2;color:var(--red)}.service-card b,.service-card small{display:block}.service-card small{color:var(--muted);margin-top:7px;line-height:1.45}.content-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:20px;margin-top:22px}.panel,.page-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 12px 36px rgba(8,42,99,.05)}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.link-btn{border:0;background:transparent;color:var(--navy2);font-weight:850;cursor:pointer}.transaction-list{display:grid}.transaction-item{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:15px 2px;border-bottom:1px solid var(--line)}.transaction-item:last-child{border-bottom:0}.tx-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#eef4ff;color:var(--navy2);font-weight:900}.transaction-item b,.transaction-item small{display:block}.transaction-item small{color:var(--muted);margin-top:4px}.tx-amount{text-align:right}.tx-amount strong,.tx-amount span{display:block}.status{font-size:11px;font-weight:900;margin-top:5px}.status.success{color:var(--green)}.status.pending{color:#a06b00}.status.failed{color:var(--red)}.empty-state{padding:34px 12px;text-align:center;color:var(--muted)}.promo-panel{background:linear-gradient(145deg,#fff,#f3f7ff);position:relative;overflow:hidden}.promo-logo img{width:66px;height:66px;object-fit:contain}.promo-panel h3{font-size:26px;margin:16px 0 10px;max-width:360px}.promo-panel p{color:var(--muted);line-height:1.6}.trust-row{display:grid;gap:8px;margin-top:18px;color:var(--navy);font-weight:750;font-size:13px}.full .transaction-item{padding:18px 4px}.muted{color:var(--muted);line-height:1.7}.beneficiary-grid,.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}.beneficiary,.support-option{border:1px solid var(--line);border-radius:18px;padding:18px;background:#fafcff}.support-option{text-decoration:none;color:var(--text)}.support-option b,.support-option span{display:block}.support-option span{color:var(--muted);margin-top:7px}.modal-backdrop{position:fixed;inset:0;background:rgba(6,24,55,.58);display:none;place-items:center;padding:20px;z-index:40}.modal-backdrop.open{display:grid}.modal{width:min(620px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:26px;padding:26px;position:relative;box-shadow:0 30px 90px rgba(0,0,0,.28)}.modal.compact{width:min(470px,96vw)}.modal-close{position:absolute;right:18px;top:16px;border:0;background:#f0f4f9;width:36px;height:36px;border-radius:12px;font-size:22px;cursor:pointer}.modal-brand{display:flex;align-items:center;gap:13px;margin-bottom:20px}.modal-brand img{
    width:68px;
    height:68px;
    object-fit:contain
}.modal h2{margin:0}.form-row,label{display:grid;gap:8px;margin-top:14px;font-weight:800;font-size:13px}input,select{width:100%;border:1px solid #d6dfec;background:#fbfcfe;border-radius:13px;padding:13px 14px;color:var(--text);outline:0}input:focus,select:focus{border-color:#7ea4d9;box-shadow:0 0 0 4px rgba(13,63,143,.08)}.summary-box{background:#f5f8fc;border:1px solid var(--line);border-radius:18px;padding:14px;margin-top:18px}.summary-box div{display:flex;justify-content:space-between;gap:12px;padding:7px 2px}.summary-box span{color:var(--muted)}.form-note{font-size:12px;line-height:1.55;color:var(--muted)}.toast{position:fixed;right:24px;bottom:24px;max-width:380px;background:#0f203d;color:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 20px 50px rgba(0,0,0,.2);transform:translateY(30px);opacity:0;pointer-events:none;transition:.25s;z-index:60}.toast.show{opacity:1;transform:none}.toast.error{background:#8c1830}.toast.success{background:#075c45}.dark{--bg:#08101e;--card:#101b2c;--text:#eff5ff;--muted:#99a9bf;--line:#223149}.dark .topbar,.dark .panel,.dark .page-card,.dark .service-card,.dark .security-card,.dark .profile-btn,.dark .icon-btn,.dark .modal{background:#101b2c}.dark input,.dark select,.dark .summary-box,.dark .beneficiary,.dark .support-option{background:#0b1524;color:var(--text)}
@media(max-width:1180px){.service-grid{grid-template-columns:repeat(3,1fr)}.hero-grid,.content-grid{grid-template-columns:1fr}.security-card{min-height:130px}}
@media(max-width:820px){.app-shell{display:block}.sidebar{position:fixed;left:-280px;width:260px;transition:.25s}.sidebar.open{left:0}.menu-btn{display:inline-grid;place-items:center}.topbar{padding:14px 16px}.profile-copy{display:none}.view{padding:18px}.service-grid{grid-template-columns:repeat(2,1fr)}.beneficiary-grid,.support-grid{grid-template-columns:1fr}.wallet-head h2{font-size:30px}.wallet-actions{flex-wrap:wrap}}
@media(max-width:520px){.service-grid{grid-template-columns:1fr 1fr;gap:10px}.service-card{min-height:142px;padding:16px 13px}.service-icon{margin-bottom:12px}.topbar h1{font-size:20px}.wallet-card{padding:22px}.view{padding:14px}.modal{padding:22px 18px}.transaction-item{grid-template-columns:auto 1fr}.tx-amount{grid-column:2;text-align:left}}
/* JOHN CONNECT SERVICE - WALLET STATEMENT */

#view-wallet-statement .page-card{
    border-left:4px solid #e31c3d;
    border-right:4px solid #e31c3d;
    border-top:4px solid #0d3f8f;
    border-bottom:4px solid #0d3f8f;
}

/* =========================================================
   JCSPAY SAFE NUMBER INPUTS
   Prevent accidental amount changes from browser arrows
   while preserving numeric keyboards and validation.
   ========================================================= */

input[type="number"]{
    appearance:textfield;
    -moz-appearance:textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

.statement-filters{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:14px;
    align-items:end;
    margin:22px 0;
}

.statement-filters label{
    display:grid;
    gap:8px;
    font-weight:800;
}

.statement-filters input{
    width:100%;
    padding:14px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--card);
    color:var(--text);
}

#loadStatementBtn{
    border:0;
    border-radius:14px;
    padding:15px 22px;
    background:#0d3f8f;
    color:#fff;
    font-weight:800;
    cursor:pointer;
}

#loadStatementBtn:hover{
    background:#e31c3d;
}.statement-header{
    padding:20px;
    margin-bottom:18px;
    border-radius:18px;
    background:#fff;
    border-top:5px solid #0d3f8f;
    border-left:5px solid #e31c3d;
}

.statement-header h3{
    margin:0 0 6px;
    color:#0d3f8f;
}

.statement-summary{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
    margin:18px 0;
}

.statement-summary div{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:16px;
    border-top:4px solid #0d3f8f;
}

.statement-summary div:nth-child(even){
    border-top-color:#e31c3d;
}

.statement-summary span{
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-bottom:6px;
}

.statement-summary strong{
    display:block;
    font-size:17px;
}

.statement-table-wrap{
    width:100%;
    overflow-x:auto;
    border:1px solid var(--line);
    border-radius:16px;
}

.statement-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
}

.statement-table th{
    background:#0d3f8f;
    color:#fff;
    text-align:left;
    padding:13px;
    white-space:nowrap;
}

.statement-table td{
    padding:13px;
    border-bottom:1px solid var(--line);
    vertical-align:top;
}

.statement-table tbody tr:nth-child(even){
    background:#f7f9fc;
}

@media(max-width:820px){
    .statement-filters{
        grid-template-columns:1fr;
    }

    #loadStatementBtn{
        width:100%;
    }

    .statement-summary{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:520px){
    .statement-summary{
        grid-template-columns:1fr;
    }

    .statement-table-wrap{
        border:0;
        overflow:visible;
    }

    .statement-table,
    .statement-table tbody,
    .statement-table tr,
    .statement-table td{
        display:block;
        width:100%;
    }

    .statement-table thead{
        display:none;
    }

    .statement-table tr{
        background:#fff;
        border:1px solid var(--line);
        border-left:4px solid #e31c3d;
        border-top:4px solid #0d3f8f;
        border-radius:14px;
        margin-bottom:14px;
        padding:10px;
    }

    .statement-table td{
        display:grid;
        grid-template-columns:95px 1fr;
        gap:10px;
        border:0;
        border-bottom:1px solid var(--line);
        overflow-wrap:anywhere;
    }

    .statement-table td:last-child{
        border-bottom:0;
    }

    .statement-table td:nth-child(1)::before{content:"Date";font-weight:800;}
    .statement-table td:nth-child(2)::before{content:"Reference";font-weight:800;}
    .statement-table td:nth-child(3)::before{content:"Description";font-weight:800;}
    .statement-table td:nth-child(4)::before{content:"Credit";font-weight:800;}
    .statement-table td:nth-child(5)::before{content:"Debit";font-weight:800;}
    .statement-table td:nth-child(6)::before{content:"Balance";font-weight:800;}
    .statement-table td:nth-child(7)::before{content:"Status";font-weight:800;}
}
.success-receipt{
    margin-top:18px;
}

#purchaseSuccessDetails{
    margin-top:18px;
}

.waec-code-row{
    margin-top:12px;
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#f8fbff;
    line-height:1.6;
}

.waec-code-row div:first-child{
    font-weight:700;
    color:var(--navy);
}

.waec-code-row div:last-child{
    margin-top:4px;
    font-weight:800;
    letter-spacing:.02em;
}

.transaction-receipt-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    padding:16px 0;
    border-bottom:1px solid var(--line);
}

.transaction-receipt-row:last-child{
    border-bottom:none;
}

.transaction-receipt-row span{
    color:var(--muted);
    font-size:14px;
}

.transaction-receipt-row strong{
    color:var(--navy);
    font-size:15px;
    text-align:right;
    word-break:break-word;
}

#transactionReceiptDetails{
    margin-top:18px;
    padding:6px 20px;
    border:1px solid var(--line);
    border-radius:22px;
    background:#f8fbff;
}

@media(max-width:600px){
    .transaction-receipt-row{
        flex-direction:column;
        gap:6px;
    }

    .transaction-receipt-row strong{
        text-align:left;
    }
}
/* =========================================================
   JCSPAY MOBILE BOTTOM NAVIGATION
   ========================================================= */

.mobile-bottom-nav{
    display:none;
}

@media(max-width:820px){

    .main{
        padding-bottom:96px;
    }

    .mobile-bottom-nav{
        position:fixed;
        left:12px;
        right:12px;
        bottom:12px;

        z-index:35;

        display:grid;
        grid-template-columns:
            1fr
            1fr
            1.15fr
            1fr
            1fr;

        align-items:end;

        min-height:72px;

        padding:
            8px
            8px
            calc(8px + env(safe-area-inset-bottom));

        background:rgba(255,255,255,.97);

        border:1px solid var(--line);
        border-radius:24px;

        box-shadow:
            0 18px 50px rgba(8,42,99,.20);

        backdrop-filter:blur(14px);
    }

    .mobile-nav-item,
    .mobile-nav-main{
        border:0;
        background:transparent;
        cursor:pointer;

        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;

        gap:4px;

        min-height:56px;

        color:var(--muted);

        font-size:11px;
        font-weight:800;
    }

    .mobile-nav-icon{
        display:grid;
        place-items:center;

        width:30px;
        height:30px;

        font-size:21px;
        line-height:1;
    }

    .mobile-nav-item.active{
        color:var(--navy);
    }

    .mobile-nav-main{
        color:var(--navy);
        transform:translateY(-12px);
    }

    .mobile-nav-plus{
        width:54px;
        height:54px;

        display:grid;
        place-items:center;

        margin-bottom:2px;

        border-radius:18px;

        background:var(--red);
        color:#fff;

        font-size:30px;
        font-weight:900;

        box-shadow:
            0 12px 28px rgba(229,31,54,.32);
    }

    .mobile-nav-main > span:last-child{
        font-size:11px;
        font-weight:900;
    }

    .dark .mobile-bottom-nav{
        background:rgba(16,27,44,.97);
    }
}

@media(max-width:420px){

    .mobile-bottom-nav{
        left:8px;
        right:8px;
        bottom:8px;
        border-radius:22px;
    }

    .mobile-nav-item,
    .mobile-nav-main{
        font-size:10px;
    }

    .mobile-nav-plus{
        width:50px;
        height:50px;
    }
}
/* =========================================================
   JCSPAY MOBILE WALLET CARD
   ========================================================= */

.jcspay-mobile-wallet{
    position:relative;
}

.jcspay-wallet-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    position:relative;
    z-index:2;
}

.jcspay-wallet-label{
    margin:0 0 8px;
    color:#dbe7ff;
    font-size:13px;
    font-weight:700;
}

.jcspay-tier-pill{
    display:inline-flex;
    align-items:center;
    margin-top:14px;
    padding:7px 11px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    position:relative;
    z-index:2;
}

.jcspay-wallet-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:20px;
    position:relative;
    z-index:2;
}

.jcspay-action-primary,
.jcspay-action-secondary{
    min-height:52px;
    border:0;
    border-radius:16px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:900;
    cursor:pointer;
}

.jcspay-action-primary{
    background:#e51f36;
    color:#fff;
    box-shadow:0 10px 24px rgba(229,31,54,.30);
}

.jcspay-action-secondary{
    background:rgba(255,255,255,.12);
    color:#fff;
    border:1px solid rgba(255,255,255,.18);
}

.jcspay-action-primary span,
.jcspay-action-secondary span{
    font-size:20px;
    line-height:1;
}

.jcspay-wallet-trust{
    display:flex;
    flex-wrap:wrap;
    gap:10px 14px;
    margin-top:18px;
    position:relative;
    z-index:2;
    color:#d9e5f7;
    font-size:11px;
    font-weight:700;
}

.jcspay-freeze-banner{
    margin-top:16px;
    padding:14px 15px;
    border-radius:16px;
    background:#fff1f1;
    border:1px solid #ffb7c1;
    color:#8f1d1d;
    position:relative;
    z-index:3;
}

.jcspay-freeze-banner strong{
    display:block;
    margin-bottom:6px;
}

.jcspay-freeze-banner span{
    display:block;
    line-height:1.5;
}

.jcspay-freeze-reason{
    margin-top:8px;
    font-weight:800;
}

@media(max-width:820px){

    .jcspay-mobile-wallet{
        border-radius:24px;
        padding:22px;
        background:
            linear-gradient(
                145deg,
                #071f4a 0%,
                #0b3476 58%,
                #0d5ea4 100%
            );
        box-shadow:
            0 18px 38px rgba(8,42,99,.22);
    }

    .jcspay-mobile-wallet:before{
        content:"";
        position:absolute;
        width:180px;
        height:180px;
        right:-70px;
        top:-65px;
        border-radius:50%;
        background:rgba(229,31,54,.12);
    }

    .jcspay-mobile-wallet #walletBalance{
        font-size:32px;
        line-height:1.05;
        margin:0;
        color:#fff;
    }

    .jcspay-mobile-wallet .eye-btn{
        background:rgba(255,255,255,.10);
        border:1px solid rgba(255,255,255,.20);
    }

    .security-card{
        margin-top:14px;
        padding:18px;
        border-radius:20px;
        min-height:auto;
    }

    .security-card .security-icon{
        width:46px;
        height:46px;
        border-radius:15px;
        flex:0 0 46px;
    }

    .security-card p{
        margin-top:3px;
        font-size:13px;
    }
}

@media(max-width:420px){

    .jcspay-mobile-wallet{
        padding:20px 18px;
    }

    .jcspay-wallet-actions{
        gap:8px;
    }

    .jcspay-action-primary,
    .jcspay-action-secondary{
        min-height:48px;
        padding:10px 12px;
        border-radius:14px;
    }

    .jcspay-wallet-trust{
        gap:8px 10px;
        font-size:10px;
    }
}

/* =========================================================
   JCSPAY MOBILE QUICK SERVICES
   ========================================================= */
   @media(max-width:820px){

    .section-title{
        margin:20px 2px 10px;
        align-items:center;
    }

    .section-title .eyebrow{
        margin-bottom:3px;
        font-size:10px;
    }

    .section-title h3{
        font-size:17px;
        line-height:1.25;
    }

    .live-badge{
        padding:6px 8px;
        font-size:9px;
    }

    .service-grid{
        grid-template-columns:repeat(3,1fr);
        gap:9px;
        padding:12px;
        background:#fff;
        border:1px solid var(--line);
        border-radius:22px;
        box-shadow:0 12px 30px rgba(8,42,99,.07);
    }

    .service-card{
        min-height:92px;
        padding:12px 6px 10px;
        border:0;
        border-radius:16px;
        background:transparent;
        text-align:center;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        box-shadow:none;
    }

    .service-card:hover{
        transform:none;
        box-shadow:none;
        border-color:transparent;
    }

    .service-icon{
        width:42px;
        height:42px;
        margin:0 auto 8px;
        border-radius:14px;
        font-size:20px;
    }

    .service-card b{
        font-size:12px;
        line-height:1.2;
        color:var(--navy);
    }

    .service-card small{
        display:none;
    }

    .service-card:nth-child(1) .service-icon,
    .service-card:nth-child(4) .service-icon{
        background:#eef4ff;
        color:#0d3f8f;
    }

    .service-card:nth-child(2) .service-icon,
    .service-card:nth-child(6) .service-icon{
        background:#fff0f2;
        color:#e51f36;
    }

    .service-card:nth-child(3) .service-icon,
    .service-card:nth-child(5) .service-icon{
        background:#edf8ff;
        color:#0d5ea4;
    }

    .dark .service-grid{
        background:#101b2c;
    }

    .dark .service-card b{
        color:#eff5ff;
    }
}

@media(max-width:420px){

    .service-grid{
        gap:5px;
        padding:10px 7px;
    }

    .service-card{
        min-height:86px;
        padding:10px 3px 8px;
    }

    .service-icon{
        width:39px;
        height:39px;
        font-size:19px;
    }

    .service-card b{
        font-size:11px;
    }
}
/* =========================================================
   JCSPAY MOBILE TOP HEADER
   ========================================================= */

@media(max-width:820px){

    .topbar{
        margin:10px 10px 0;
        min-height:78px;
        padding:12px 14px;
        border:1px solid #dde3ea;
        border-radius:20px;
        background:#eef1f5;
        box-shadow:0 10px 28px rgba(8,42,99,.08);
    }

    .topbar > div:nth-child(2){
        flex:1;
        min-width:0;
    }

    .topbar .eyebrow{
        margin:0 0 3px;
        font-size:10px;
        font-weight:900;
        color:#e51f36;
        letter-spacing:.13em;
    }

    .topbar h1{
        margin:0;
        font-size:19px;
        line-height:1.1;
        font-weight:900;
        color:#082a63;
    }

    .menu-btn,
    .topbar .icon-btn,
    .profile-btn{
        background:#fff;
        border:1px solid #dbe2ec;
        box-shadow:0 4px 12px rgba(8,42,99,.06);
    }

    .menu-btn,
    .topbar .icon-btn{
        width:42px;
        height:42px;
        border-radius:13px;
        font-weight:900;
    }

    .profile-btn{
        padding:5px;
        border-radius:14px;
    }

    .avatar{
        width:36px;
        height:36px;
        border-radius:12px;
        background:linear-gradient(
            135deg,
            #082a63,
            #0d5ea4
        );
        color:#fff;
        font-weight:900;
    }

    .top-actions{
        gap:7px;
    }
}

@media(max-width:420px){

    .topbar{
        margin:8px 8px 0;
        padding:10px 11px;
        min-height:72px;
    }

    .topbar h1{
        font-size:17px;
    }

    .topbar .eyebrow{
        font-size:9px;
    }

    .menu-btn,
    .topbar .icon-btn{
        width:38px;
        height:38px;
    }

    .avatar{
        width:34px;
        height:34px;
    }
}
/* =========================================================
   JCSPAY MOBILE SURFACE TONE
   ========================================================= */

@media(max-width:820px){

    body{
        background:#e9edf3;
    }

    .topbar{
        background:#e3e8ef;
        border-color:#d2d9e3;
    }

    .security-card{
        background:#f6f8fb;
        border-color:#dbe2eb;
    }

    .service-grid,
    .panel,
    .page-card{
        background:#f8fafc;
    }
}

@media(max-width:420px){

    body{
        background:#e7ebf1;
    }

    .topbar{
        background:#e1e6ed;
    }
}/* =========================================================
   JCSPAY MOBILE CONTENT SAFE AREA
   ========================================================= */

@media(max-width:820px){

    .main{
        padding-bottom:120px;
    }

    #view-home{
        padding-bottom:28px;
    }

    .content-grid{
        margin-bottom:24px;
    }
}

@media(max-width:420px){

    .main{
        padding-bottom:126px;
    }

    #view-home{
        padding-bottom:32px;
    }
}/* =========================================================
   JCSPAY MOBILE COMPACT HOME SPACING
   ========================================================= */

@media(max-width:820px){

    .jcspay-mobile-wallet{
        padding-top:18px;
        padding-bottom:16px;
    }

    .jcspay-tier-pill{
        margin-top:10px;
    }

    .jcspay-wallet-actions{
        margin-top:14px;
    }

    .jcspay-wallet-trust{
        margin-top:12px;
    }

    .security-card{
        margin-top:10px;
        padding:14px 16px;
    }

    .section-title{
        margin-top:14px;
    }
}

@media(max-width:420px){

    .jcspay-mobile-wallet{
        padding-top:16px;
        padding-bottom:14px;
    }

    .security-card{
        padding:13px 14px;
    }

    .section-title{
        margin-top:12px;
    }
}/* =========================================================
   JCSPAY MOBILE ACCOUNT PANEL
   ========================================================= */

@media(max-width:820px){

    #accountPanel{
        background:#eef2f6;
        border-radius:22px;
        padding:16px;
    }

    #accountPanel > .eyebrow{
        margin-bottom:4px;
        font-size:10px;
        font-weight:900;
        color:#e51f36;
    }

    #accountPanelName{
        margin:0;
        color:#082a63;
        font-size:22px;
        font-weight:900;
    }

    #accountPanelEmail{
        margin:4px 0 14px;
        color:#71809a;
        font-size:12px;
    }

    #accountPanel > button.primary.wide{
        margin-top:8px;
        min-height:48px;
        border-radius:15px;
        background:#ffffff;
        color:#082a63;
        border:1px solid #dbe2ec;
        box-shadow:0 5px 14px rgba(8,42,99,.06);
        text-align:left;
        padding:13px 15px;
    }

    #accountPanel > button.primary.wide:hover{
        background:#f8fafc;
    }

    #accountPanel > #logoutBtn{
        background:#fff0f2;
        color:#c91e34;
        border-color:#ffcbd2;
        margin-top:16px;
        text-align:center;
    }

    #accountPanel form,
    #identityVerifyPanel,
    #selfieLivenessPanel,
    #kycStatusPanel{
        margin-top:12px;
        padding:15px;
        background:#ffffff;
        border:1px solid #dfe6ef;
        border-radius:18px;
        box-shadow:0 8px 20px rgba(8,42,99,.05);
    }

    #accountPanel form h3,
    #identityVerifyPanel h3,
    #selfieLivenessPanel h3,
    #kycStatusPanel h3{
        margin-top:0;
        color:#082a63;
    }
}

@media(max-width:420px){

    #accountPanel{
        padding:13px;
        border-radius:19px;
    }

    #accountPanel > button.primary.wide{
        min-height:46px;
        padding:12px 13px;
        font-size:13px;
    }

    #accountPanel form,
    #identityVerifyPanel,
    #selfieLivenessPanel,
    #kycStatusPanel{
        padding:13px;
        border-radius:16px;
    }
}/* =========================================================
   JCSPAY PROFESSIONAL ACCOUNT ACTION ROWS
   ========================================================= */

@media(max-width:820px){

    #accountPanel > button.primary.wide{
        position:relative;

        display:grid;
        grid-template-columns:40px 1fr 18px;
        align-items:center;
        gap:12px;

        min-height:58px;
        padding:9px 14px;

        background:#ffffff;
        color:#082a63;

        border:1px solid #dce3ec;
        border-radius:17px;

        font-size:14px;
        font-weight:850;
        text-align:left;

        box-shadow:
            0 5px 15px rgba(8,42,99,.055);
    }

    #accountPanel > button.primary.wide::before{
        width:38px;
        height:38px;

        display:grid;
        place-items:center;

        border-radius:12px;

        background:#edf4ff;
        color:#0d3f8f;

        font-size:17px;
        font-weight:900;
    }

    #accountPanel > button.primary.wide::after{
        content:"›";

        color:#9aa8ba;
        font-size:25px;
        font-weight:600;

        text-align:right;
    }


    /* APP PIN */

    #showAppPinBtn::before{
        content:"🔐";
    }

    #showVerifyAppPinBtn::before{
        content:"✓";
        background:#e9f9f3;
        color:#0f9f6e;
    }


    /* TRANSACTION SECURITY */

    #showTransactionPinBtn::before{
        content:"🔒";
        background:#fff0f2;
        color:#e51f36;
    }

    #showVerifyTransactionPinBtn::before{
        content:"✓";
        background:#e9f9f3;
        color:#0f9f6e;
    }


    /* KYC */

    #showKycProfileBtn::before{
        content:"ID";
        background:#edf4ff;
        color:#0d3f8f;
        font-size:12px;
    }

    #showKycUploadBtn::before{
        content:"↑";
        background:#fff0f2;
        color:#e51f36;
        font-size:22px;
    }


    /* LOGOUT */

    #accountPanel > #logoutBtn{
        grid-template-columns:40px 1fr;
        margin-top:20px;

        background:#fff2f4;
        color:#c91e34;

        border-color:#ffcbd2;
    }

    #accountPanel > #logoutBtn::before{
        content:"↪";
        background:#ffe2e7;
        color:#c91e34;
    }

    #accountPanel > #logoutBtn::after{
        display:none;
    }


    /* Verification cards */

    #identityVerifyPanel,
    #selfieLivenessPanel,
    #kycStatusPanel{
        position:relative;

        border:1px solid #dce4ee;
        border-top:4px solid #0d3f8f;

        background:#ffffff;

        border-radius:19px;
        box-shadow:
            0 8px 22px rgba(8,42,99,.055);
    }

    #identityVerifyPanel{
        border-top-color:#e51f36;
    }

    #selfieLivenessPanel{
        border-top-color:#0f9f6e;
    }

    #accountPanel h3{
        font-weight:900;
    }
}

@media(max-width:420px){

    #accountPanel > button.primary.wide{
        min-height:56px;
        grid-template-columns:36px 1fr 16px;
        gap:10px;

        padding:9px 12px;

        font-size:13px;
        border-radius:16px;
    }

    #accountPanel > button.primary.wide::before{
        width:35px;
        height:35px;
        border-radius:11px;
        font-size:15px;
    }
}/* =========================================================
   JCSPAY ACCOUNT VERIFICATION ACTION ROW FIX
   ========================================================= */

@media(max-width:820px){

    #showIdentityVerifyBtn,
    #showSelfieLivenessBtn,
    #showKycStatusBtn{
        display:grid;
        grid-template-columns:38px minmax(0,1fr) 18px;
        align-items:center;
        gap:11px;

        width:100%;
        min-height:58px;

        padding:9px 13px;

        background:#ffffff;
        color:#082a63;

        border:1px solid #dce3ec;
        border-radius:17px;

        font-size:13px;
        font-weight:850;
        line-height:1.2;
        text-align:left;

        box-shadow:0 5px 15px rgba(8,42,99,.055);
    }

    #showIdentityVerifyBtn{
        white-space:nowrap;
    }

    #showSelfieLivenessBtn{
        white-space:nowrap;
    }

    #showKycStatusBtn{
        white-space:nowrap;
    }

    #showIdentityVerifyBtn::before,
    #showSelfieLivenessBtn::before,
    #showKycStatusBtn::before{
        width:36px;
        height:36px;

        display:grid;
        place-items:center;

        border-radius:11px;

        font-size:13px;
        font-weight:900;
    }

    #showIdentityVerifyBtn::before{
        content:"ID";
        background:#fff0f2;
        color:#e51f36;
    }

    #showSelfieLivenessBtn::before{
        content:"◉";
        background:#e9f9f3;
        color:#0f9f6e;
        font-size:18px;
    }

    #showKycStatusBtn::before{
        content:"✓";
        background:#edf4ff;
        color:#0d3f8f;
        font-size:17px;
    }

    #showIdentityVerifyBtn::after,
    #showSelfieLivenessBtn::after,
    #showKycStatusBtn::after{
        content:"›";
        color:#9aa8ba;
        font-size:24px;
        font-weight:600;
        text-align:right;
    }
}

@media(max-width:420px){

    #showIdentityVerifyBtn,
    #showSelfieLivenessBtn,
    #showKycStatusBtn{
        grid-template-columns:34px minmax(0,1fr) 14px;
        gap:9px;

        min-height:54px;
        padding:8px 11px;

        font-size:12px;
        border-radius:15px;
    }

    #showIdentityVerifyBtn::before,
    #showSelfieLivenessBtn::before,
    #showKycStatusBtn::before{
        width:33px;
        height:33px;
        border-radius:10px;
    }
}
/* =========================================================
   JCSPAY PROFESSIONAL WALLET FUNDING MODAL
   ========================================================= */

.funding-methods{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:18px;
}

.funding-method{
    border:1px solid #dce3ec;
    background:#f8fafc;
    border-radius:18px;
    padding:14px;

    display:flex;
    align-items:center;
    gap:11px;

    text-align:left;
    cursor:pointer;

    color:#082a63;
}

.funding-method.active{
    border-color:#0d3f8f;
    background:#eef4ff;
    box-shadow:0 0 0 3px rgba(13,63,143,.07);
}

.funding-method-icon{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    flex:0 0 42px;

    border-radius:14px;

    background:#ffffff;
    font-size:20px;
}

.funding-method b,
.funding-method small{
    display:block;
}

.funding-method b{
    font-size:13px;
    font-weight:900;
    line-height:1.2;
}

.funding-method small{
    margin-top:4px;
    color:#71809a;
    font-size:10px;
    line-height:1.3;
}

#bankTransferFundingPanel{
    margin-top:18px;
    padding:17px;

    border:1px solid #dce4ee;
    border-top:4px solid #0d3f8f;
    border-radius:19px;

    background:#f8fafc;
}

#bankTransferFundingPanel h3{
    margin:0 0 6px;
    color:#082a63;
    font-size:18px;
}

.bank-funding-card{
    margin-top:16px;

    background:#ffffff;
    border:1px solid #dce3ec;
    border-radius:18px;

    overflow:hidden;
}

.bank-funding-card > div{
    padding:14px 15px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    border-bottom:1px solid #e6ebf2;
}

.bank-funding-card > div:last-child{
    border-bottom:0;
}

.bank-funding-card span{
    color:#71809a;
    font-size:11px;
    font-weight:750;
}

.bank-funding-card strong{
    color:#082a63;
    font-size:14px;
    font-weight:900;
    text-align:right;
    word-break:break-word;
}

#copyFundingAccountBtn{
    min-height:48px;
    border-radius:14px;

    background:#082a63;
    color:#ffffff;

    font-weight:900;
}

#fundForm{
    margin-top:18px;
}

#fundForm > .primary{
    min-height:50px;
    border-radius:15px;
}

.dark .funding-method{
    background:#0b1524;
    border-color:#223149;
    color:#eff5ff;
}

.dark .funding-method.active{
    background:#13233b;
    border-color:#4b79b8;
}

.dark .funding-method-icon,
.dark .bank-funding-card{
    background:#101b2c;
}

.dark #bankTransferFundingPanel{
    background:#0b1524;
    border-color:#223149;
}

.dark .bank-funding-card{
    border-color:#223149;
}

.dark .bank-funding-card > div{
    border-bottom-color:#223149;
}

.dark .bank-funding-card strong{
    color:#eff5ff;
}

@media(max-width:520px){

    .funding-methods{
        grid-template-columns:1fr;
        gap:9px;
    }

    .funding-method{
        padding:11px 12px;
        border-radius:15px;
    }

    .funding-method-icon{
        width:38px;
        height:38px;
        flex-basis:38px;
        border-radius:12px;
        font-size:18px;
    }

    #bankTransferFundingPanel{
        padding:14px;
        border-radius:17px;
    }

    .bank-funding-card > div{
        padding:12px 13px;
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }

    .bank-funding-card strong{
        text-align:left;
        font-size:15px;
    }
}/* =========================================================
   JCSPAY WALLET SEND MONEY ACTION
   ========================================================= */

.jcspay-action-transfer{
    grid-column:1 / -1;

    min-height:52px;
    border:0;
    border-radius:16px;
    padding:12px 14px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    background:#ffffff;
    color:#082a63;

    font-weight:900;
    cursor:pointer;

    box-shadow:0 8px 20px rgba(8,42,99,.12);
}

.jcspay-action-transfer span{
    font-size:22px;
    font-weight:900;
}

.jcspay-action-transfer strong{
    font-size:15px;
    font-weight:900;
}

.jcspay-action-primary strong,
.jcspay-action-secondary strong{
    font-size:15px;
    font-weight:900;
}

.jcspay-wallet-trust{
    font-size:12px;
    font-weight:850;
}

@media(max-width:420px){

    .jcspay-action-transfer{
        min-height:49px;
        padding:10px 12px;
    }

    .jcspay-action-transfer strong,
    .jcspay-action-primary strong,
    .jcspay-action-secondary strong{
        font-size:14px;
        font-weight:900;
    }

    .jcspay-wallet-trust{
        font-size:11px;
        font-weight:850;
    }
}/* =========================================================
   JCSPAY MOBILE READABILITY UPGRADE
   ========================================================= */

@media(max-width:820px){

    /* Wallet action text */
    .jcspay-action-primary strong,
    .jcspay-action-secondary strong,
    .jcspay-action-transfer strong{
        font-size:16px;
        font-weight:900;
        line-height:1.2;
    }

    /* Wallet action icons */
    .jcspay-action-primary span,
    .jcspay-action-secondary span,
    .jcspay-action-transfer span{
        font-size:24px;
        font-weight:900;
    }

    /* Quick service icons */
    .service-icon{
        width:48px;
        height:48px;
        border-radius:15px;
        font-size:23px;
        margin-bottom:9px;
    }

    /* Quick service names */
    .service-card b{
        font-size:14px;
        font-weight:900;
        line-height:1.25;
    }

    /* Section heading */
    .section-title h3{
        font-size:19px;
        font-weight:900;
    }

    .section-title .eyebrow{
        font-size:11px;
        font-weight:900;
    }

    /* Wallet trust text */
    .jcspay-wallet-trust{
        font-size:12px;
        font-weight:850;
        line-height:1.35;
    }

    /* Security section */
    .security-card b{
        font-size:16px;
        font-weight:900;
    }

    .security-card p{
        font-size:13px;
        line-height:1.45;
    }

    .security-card .security-icon{
        width:50px;
        height:50px;
        flex:0 0 50px;
        font-size:28px;
    }

    /* Bottom navigation */
    .mobile-nav-item,
    .mobile-nav-main{
        font-size:12px;
        font-weight:850;
    }

    .mobile-nav-icon{
        width:34px;
        height:34px;
        font-size:23px;
    }

    /* Funding method icons and text */
    .funding-method-icon{
        width:46px;
        height:46px;
        flex-basis:46px;
        font-size:22px;
    }

    .funding-method b{
        font-size:14px;
        font-weight:900;
    }

    .funding-method small{
        font-size:11px;
        line-height:1.35;
    }
}

@media(max-width:420px){

    .jcspay-action-primary strong,
    .jcspay-action-secondary strong,
    .jcspay-action-transfer strong{
        font-size:15px;
    }

    .service-icon{
        width:46px;
        height:46px;
        font-size:22px;
    }

    .service-card b{
        font-size:13px;
    }

    .section-title h3{
        font-size:18px;
    }

    .mobile-nav-item,
    .mobile-nav-main{
        font-size:11px;
    }

    .funding-method b{
        font-size:13px;
    }
}/* =========================================================
   JCSPAY SEND MONEY / TRANSFER
   ========================================================= */

#transferModal .modal {
  width: min(94vw, 520px);
  max-height: 92vh;
  overflow-y: auto;
  padding: 22px 18px 24px;
}

#transferModal .eyebrow {
  color: #ed1b2f;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.2px;
  margin-bottom: 4px;
}

#transferModal h2 {
  color: #082a63;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 900;
  margin: 0 0 12px;
}

#transferModal > .modal > .form-note {
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
  color: #68758b;
}


/* TRANSFER METHOD CARDS */

.transfer-methods {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.transfer-method {
  width: 100%;
  min-height: 76px;
  border: 0;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 7px 16px rgba(8, 42, 99, 0.12);
}

.transfer-method:nth-child(1) {
  background: #ed1b2f;
}

.transfer-method:nth-child(2) {
  background: #1261d8;
}

.transfer-method:nth-child(3) {
  background: #08a957;
}

.transfer-method-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #fff;
  color: inherit;
  font-size: 23px;
  font-weight: 900;
}

.transfer-method:nth-child(1) .transfer-method-icon {
  color: #ed1b2f;
}

.transfer-method:nth-child(2) .transfer-method-icon {
  color: #1261d8;
}

.transfer-method:nth-child(3) .transfer-method-icon {
  color: #08a957;
}

.transfer-method b {
  display: block;
  color: #fff;
  font-size: 17px;
  line-height: 1.15;
  font-weight: 900;
}

.transfer-method small {
  display: block;
  color: rgba(255, 255, 255, 0.96);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  margin-top: 3px;
}

.transfer-method.active {
  transform: scale(1.01);
  box-shadow: 0 8px 20px rgba(8, 42, 99, 0.22);
}


/* TRANSFER FORMS */

#bankTransferForm,
#mobileWalletTransferForm,
#jcspayTransferForm {
  margin-top: 16px;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e1e7ef;
}

#bankTransferForm label,
#mobileWalletTransferForm label,
#jcspayTransferForm label {
  display: block;
  color: #082a63;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 900;
  margin-bottom: 14px;
}

#bankTransferForm input,
#bankTransferForm select,
#mobileWalletTransferForm input,
#mobileWalletTransferForm select,
#jcspayTransferForm input,
#jcspayTransferForm select {
  width: 100%;
  min-height: 52px;
  margin-top: 7px;
  padding: 0 14px;
  border: 1.5px solid #cbd6e5;
  border-radius: 14px;
  background: #fff;
  color: #082a63;
  font-size: 16px;
  font-weight: 700;
}

#bankTransferForm input::placeholder,
#mobileWalletTransferForm input::placeholder,
#jcspayTransferForm input::placeholder {
  color: #8995a8;
  font-size: 15px;
  font-weight: 600;
}


/* ACCOUNT NAME */

.transfer-account-name {
  margin: 2px 0 16px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1.5px solid #f2bcc3;
  background: #fff7f8;
}

.transfer-account-name span {
  display: block;
  color: #6c778a;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 4px;
}

.transfer-account-name strong {
  display: block;
  color: #082a63;
  font-size: 17px;
  font-weight: 900;
}


/* REVIEW BUTTON */

#reviewTransferBtn {
  min-height: 54px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 900;
  background: #ed1b2f;
  box-shadow: 0 7px 16px rgba(237, 27, 47, 0.22);
}


/* SANDBOX NOTE */

#transferModal form .form-note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  color: #778399;
}


/* SMALL PHONE ADJUSTMENT */

@media (max-width: 420px) {
  #transferModal .modal {
    width: 96vw;
    padding: 18px 14px 22px;
  }

  #transferModal h2 {
    font-size: 27px;
  }

  .transfer-method {
    min-height: 72px;
    padding: 11px 12px;
  }

  .transfer-method b {
    font-size: 16px;
  }

  .transfer-method small {
    font-size: 12.5px;
  }

  #bankTransferForm,
  #mobileWalletTransferForm,
  #jcspayTransferForm {
    padding: 14px;
  }
}/* =========================================================
   JCSPAY BANK ACCOUNT VERIFY ROW
   ========================================================= */

.transfer-account-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    align-items:stretch;
    margin-top:7px;
}

.transfer-account-row input {
    margin-top:0 !important;
}

.transfer-verify-btn {
    min-width:96px;
    border:0;
    border-radius:14px;
    padding:0 16px;

    background:#ed1b2f;
    color:#ffffff;

    font-size:15px;
    font-weight:900;

    cursor:pointer;

    box-shadow:
        0 7px 16px rgba(237,27,47,.22);
}

.transfer-verify-btn:disabled {
    opacity:.6;
    cursor:not-allowed;
}

@media(max-width:420px) {

    .transfer-account-row {
        grid-template-columns:minmax(0,1fr) 88px;
        gap:7px;
    }

    .transfer-verify-btn {
        min-width:88px;
        padding:0 10px;
        font-size:14px;
    }
}/* JCSPAY MOBILE MODAL STABILITY */

body.modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.modal-backdrop.open {
    touch-action: none;
    overflow: hidden;
}

.modal-backdrop.open .modal {
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}/* =========================================================
   JCSPAY FUNDING COLOR UPGRADE
   Card = Red
   Bank Transfer = Green
   ========================================================= */

#fundCardMethodBtn {
    background:#e51f36;
    color:#ffffff;
    border-color:#e51f36;
}

#fundCardMethodBtn .funding-method-icon {
    background:#ffffff;
    color:#e51f36;
}

#fundCardMethodBtn b,
#fundCardMethodBtn small {
    color:#ffffff;
}

#fundBankMethodBtn {
    background:#0f9f6e;
    color:#ffffff;
    border-color:#0f9f6e;
}

#fundBankMethodBtn .funding-method-icon {
    background:#ffffff;
    color:#0f9f6e;
}

#fundBankMethodBtn b,
#fundBankMethodBtn small {
    color:#ffffff;
}

#fundCardMethodBtn.active {
    box-shadow:0 8px 20px rgba(229,31,54,.25);
}

#fundBankMethodBtn.active {
    box-shadow:0 8px 20px rgba(15,159,110,.25);
}/* JCSPAY WALLET PILL GREEN */

.jcspay-tier-pill {
    background:#0f9f6e;
    border-color:#0f9f6e;
    color:#ffffff;
    box-shadow:0 6px 14px rgba(15,159,110,.22);
}/* =========================================================
   JCSPAY MOBILE MODAL WIDTH FIX
   Keep modal fully inside phone screen
   ========================================================= */

.modal-backdrop {
    padding: 12px;
    box-sizing: border-box;
}

.modal-backdrop .modal {
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .modal-backdrop {
        padding: 10px;
        align-items: flex-start;
    }

    .modal-backdrop .modal {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        margin: 10px auto;
        left: auto;
        right: auto;
        transform: none;
    }
}/* =========================================================
   JCSPAY MOBILE HORIZONTAL OVERFLOW FIX
   Keep entire app inside phone viewport
   ========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.app-shell,
.main,
.view {
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 820px) {

    body {
        position: relative;
        overflow-x: hidden;
    }

    .app-shell,
    .main,
    .view,
    #view-home {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .modal-backdrop {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    #transferModal .modal {
        width: calc(100% - 20px);
        max-width: 420px;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
        overflow-x: hidden;
    }

    .transfer-methods,
    .transfer-method,
    #bankTransferForm,
    #mobileWalletTransferForm,
    #jcspayTransferForm {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .transfer-method > div {
        min-width: 0;
    }

    .transfer-method b,
    .transfer-method small {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .transfer-account-row {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}/* =========================================================
   JCSPAY NOTIFICATION CENTER
   ========================================================= */

.notification-btn{
    position:relative;
}

.notification-badge{
    position:absolute;
    top:-5px;
    right:-5px;

    min-width:20px;
    height:20px;

    padding:0 5px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    background:#e51f36;
    color:#ffffff;

    border:2px solid #ffffff;

    font-size:10px;
    font-weight:950;
    line-height:1;

    box-shadow:
        0 5px 12px rgba(229,31,54,.30);
}

.notification-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;

    padding-right:38px;
    margin-bottom:18px;
}

.notification-header h2{
    color:#082a63;
    font-size:25px;
    font-weight:950;
}

.notification-header .link-btn{
    white-space:nowrap;
    margin-top:4px;
}

.notification-list{
    display:grid;
    gap:10px;
}

.notification-item{
    position:relative;

    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    gap:12px;

    padding:14px;

    border:1px solid #e1e8f1;
    border-radius:17px;

    background:#ffffff;

    box-shadow:
        0 6px 18px rgba(8,42,99,.045);
}

.notification-item.unread{
    background:#f4f8ff;
    border-color:#cbdcf4;
}

.notification-item.unread::after{
    content:"";

    position:absolute;
    top:12px;
    right:12px;

    width:8px;
    height:8px;

    border-radius:50%;
    background:#e51f36;
}

.notification-icon{
    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    border-radius:15px;

    background:#eef4ff;
    color:#0d3f8f;

    font-size:21px;
    font-weight:900;
}

.notification-item.success .notification-icon{
    background:#e8fff2;
    color:#0f9f6e;
}

.notification-item.warning .notification-icon{
    background:#fff7df;
    color:#a06b00;
}

.notification-item.error .notification-icon{
    background:#fff0f2;
    color:#e51f36;
}

.notification-copy{
    min-width:0;
}

.notification-copy strong{
    display:block;

    color:#082a63;

    font-size:14px;
    font-weight:950;
    line-height:1.3;
}

.notification-copy p{
    margin:5px 0 0;

    color:#71809a;

    font-size:12px;
    line-height:1.5;
}

.notification-time{
    display:block;

    margin-top:7px;

    color:#9aa8ba;

    font-size:10px;
    font-weight:750;
}

.dark .notification-item{
    background:#101b2c;
    border-color:#223149;
}

.dark .notification-item.unread{
    background:#13233b;
    border-color:#38557c;
}

.dark .notification-copy strong{
    color:#eff5ff;
}

.dark .notification-copy p,
.dark .notification-time{
    color:#99a9bf;
}

.dark .notification-badge{
    border-color:#101b2c;
}

@media(max-width:520px){

    .notification-header{
        gap:10px;
    }

    .notification-header h2{
        font-size:22px;
    }

    .notification-header .link-btn{
        font-size:11px;
    }

    .notification-item{
        grid-template-columns:42px minmax(0,1fr);
        gap:10px;

        padding:12px;
        border-radius:15px;
    }

    .notification-icon{
        width:42px;
        height:42px;

        border-radius:13px;

        font-size:19px;
    }
}/* Hide notification badge when there are no unread notifications */
.notification-badge[hidden]{
    display:none !important;
}/* =========================================================
   JCSPAY PROFESSIONAL LOGIN / REGISTER
   ========================================================= */

#authModal .modal{
    width:min(94vw,520px);
    padding:24px;
}

.auth-hero{
    display:flex;
    align-items:center;
    gap:16px;

    padding:18px;

    margin-bottom:18px;

    border:1px solid #e4eaf2;
    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #eef4ff 100%
        );
}

.auth-logo-wrap{
    width:68px;
    height:68px;

    flex:0 0 68px;

    display:grid;
    place-items:center;

    border-radius:20px;

    background:#ffffff;

    border:1px solid #e2e8f0;

    box-shadow:
        0 8px 20px rgba(8,42,99,.08);
}

.auth-logo{
    width:54px;
    height:54px;

    object-fit:contain;
}

.auth-brand-copy{
    min-width:0;
}

.auth-brand-copy .eyebrow{
    margin-bottom:5px;

    color:#e51f36;

    font-size:10px;
    font-weight:950;
    letter-spacing:.13em;
}

#authTitle{
    margin:0;

    color:#082a63;

    font-size:23px;
    font-weight:950;
    line-height:1.15;
}

.auth-subtitle{
    margin:7px 0 0;

    color:#71809a;

    font-size:12px;
    line-height:1.45;
}

.auth-form{
    padding:18px;

    border:1px solid #e4eaf2;
    border-radius:20px;

    background:#ffffff;

    box-shadow:
        0 8px 24px rgba(8,42,99,.045);
}

.auth-section-heading{
    margin-bottom:15px;
}

.auth-section-heading strong{
    display:block;

    color:#082a63;

    font-size:17px;
    font-weight:950;
}

.auth-section-heading span{
    display:block;

    margin-top:5px;

    color:#71809a;

    font-size:12px;
    line-height:1.45;
}

.auth-field{
    margin-top:13px;
}

.auth-field > span{
    color:#233b63;

    font-size:12px;
    font-weight:850;
}

.auth-field input{
    min-height:50px;

    border-radius:15px;

    background:#f9fbfd;

    border:1px solid #dbe3ed;

    color:#10213d;

    font-size:14px;
}

.auth-field input:focus{
    border-color:#0d3f8f;

    box-shadow:
        0 0 0 4px rgba(13,63,143,.08);
}

.auth-primary-btn{
    min-height:52px;

    margin-top:18px;

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #0d3f8f,
            #082a63
        );

    color:#ffffff;

    font-size:14px;
    font-weight:950;

    box-shadow:
        0 10px 24px rgba(8,42,99,.20);
}

.auth-security-note{
    margin-top:12px;

    padding:10px 12px;

    border-radius:13px;

    background:#ecfff4;

    color:#0b7d44;

    font-size:11px;
    font-weight:800;
    line-height:1.4;
}

.auth-switch{
    margin:16px 0 0;

    text-align:center;

    color:#71809a;
}

.auth-switch-btn{
    margin-left:4px;

    border:0;
    background:transparent;

    color:#e51f36;

    font-weight:950;

    cursor:pointer;
}

.auth-switch-btn:hover{
    text-decoration:underline;
}


/* =========================
   DARK THEME
   ========================= */

.dark .auth-hero{
    background:
        linear-gradient(
            135deg,
            #111d30,
            #14243c
        );

    border-color:#223149;
}

.dark .auth-logo-wrap{
    background:#101b2c;
    border-color:#26364f;
}

.dark #authTitle,
.dark .auth-section-heading strong,
.dark .auth-field > span{
    color:#eff5ff;
}

.dark .auth-subtitle,
.dark .auth-section-heading span,
.dark .auth-switch{
    color:#99a9bf;
}

.dark .auth-form{
    background:#101b2c;
    border-color:#223149;
}

.dark .auth-field input{
    background:#0b1524;
    border-color:#2a3a52;
    color:#eff5ff;
}

.dark .auth-security-note{
    background:#0d2c22;
    color:#8be6b5;
}


/* =========================
   MOBILE
   ========================= */

@media(max-width:520px){

    #authModal .modal{
        width:96vw;
        padding:18px;
        border-radius:22px;
    }

    .auth-hero{
        padding:14px;
        gap:12px;
        border-radius:18px;
    }

    .auth-logo-wrap{
        width:58px;
        height:58px;
        flex-basis:58px;
        border-radius:17px;
    }

    .auth-logo{
        width:46px;
        height:46px;
    }

    #authTitle{
        font-size:20px;
    }

    .auth-subtitle{
        font-size:11px;
    }

    .auth-form{
        padding:15px;
        border-radius:18px;
    }

    .auth-section-heading strong{
        font-size:16px;
    }

    .auth-field input{
        min-height:48px;
        padding:12px 13px;
    }

    .auth-primary-btn{
        min-height:50px;
    }

.auth-security-note{
        font-size:10px;
    }
}

/* =========================================================
   JCSPAY MOBILE APP VISUAL REFRESH — V28
   Presentation only: all existing IDs and payment actions remain intact.
   ========================================================= */

@media (max-width:820px){
    :root{
        --mobile-blue:#0739c7;
        --mobile-blue-deep:#062d96;
        --mobile-cyan:#008ddd;
        --mobile-red:#f01836;
        --mobile-green:#08b64b;
    }

    html{
        background:#f4f7fc;
    }

    body{
        background:
            radial-gradient(circle at 12% 4%,rgba(25,109,255,.06),transparent 26%),
            #f7f9fd;
    }

    .main{
        padding-bottom:104px;
    }

    .topbar{
        position:sticky;
        top:0;
        z-index:20;
        min-height:82px;
        margin:0;
        padding:13px 15px;
        border:0;
        border-bottom:1px solid #edf1f7;
        border-radius:0;
        background:rgba(255,255,255,.96);
        box-shadow:0 8px 30px rgba(8,42,99,.06);
        backdrop-filter:blur(18px);
    }

    .topbar .menu-btn,
    .topbar .icon-btn,
    .topbar .profile-btn{
        border:0;
        background:#fff;
        box-shadow:0 7px 22px rgba(8,42,99,.08);
    }

    .topbar .menu-btn{
        width:46px;
        height:46px;
        border-radius:15px;
        color:#073bb7;
        font-size:23px;
    }

    .topbar .eyebrow{
        color:#f01836;
        font-size:9px;
        letter-spacing:.18em;
    }

    .topbar h1{
        color:#0a36a8;
        font-size:20px;
        letter-spacing:-.02em;
    }

    .top-actions{
        gap:8px;
    }

    #themeBtn{
    display:grid;
}

    .topbar .notification-btn,
    .topbar .profile-btn{
        width:44px;
        height:44px;
        min-width:44px;
        padding:4px;
        border-radius:15px;
    }

    .topbar .notification-btn{
        color:#0637b0;
        font-size:18px;
    }

    .topbar .avatar{
        width:36px;
        height:36px;
        border-radius:12px;
        background:linear-gradient(145deg,#073bc8,#1127a4);
        box-shadow:0 6px 15px rgba(4,53,181,.24);
    }

    .view{
        padding:18px 14px 24px;
    }

    .hero-grid{
        gap:15px;
    }

    .jcspay-mobile-wallet{
        padding:22px 18px 18px;
        border-radius:27px;
        background:
            radial-gradient(circle at 96% 5%,rgba(126,27,225,.72) 0 22%,transparent 48%),
            radial-gradient(circle at 55% 48%,rgba(0,170,239,.23),transparent 48%),
            linear-gradient(145deg,#0634b5 0%,#073ed5 52%,#008ddd 120%);
        box-shadow:0 20px 44px rgba(4,55,174,.25);
    }

    .jcspay-mobile-wallet:before{
        width:220px;
        height:220px;
        right:-105px;
        top:-105px;
        background:transparent;
        border:1px solid rgba(255,255,255,.13);
        box-shadow:0 0 0 42px rgba(255,255,255,.035),0 0 0 84px rgba(255,255,255,.025);
    }

    .jcspay-mobile-wallet:after{
        display:none;
    }

    .jcspay-wallet-label{
        margin-bottom:8px;
        color:#e8f3ff;
        font-size:12px;
        font-weight:800;
    }

    .jcspay-mobile-wallet #walletBalance{
        font-size:38px;
        font-weight:950;
        letter-spacing:-.045em;
    }

    .jcspay-mobile-wallet .eye-btn{
        width:50px;
        height:50px;
        border-radius:17px;
        background:rgba(255,255,255,.13);
        border:1px solid rgba(255,255,255,.23);
        font-size:19px;
    }

    .jcspay-tier-pill{
        margin-top:15px;
        padding:8px 13px;
        border:0;
        background:linear-gradient(135deg,#05c658,#00a842);
        font-size:10px;
        box-shadow:0 8px 18px rgba(0,170,66,.30);
    }

    .jcspay-wallet-actions{
        gap:11px;
        margin-top:22px;
    }

    .jcspay-action-primary,
    .jcspay-action-secondary,
    .jcspay-action-transfer{
        min-height:58px;
        border-radius:18px;
    }

    .jcspay-action-primary{
        background:linear-gradient(145deg,#ff2540,#ef1232);
        box-shadow:0 12px 26px rgba(239,18,50,.34);
    }

    .jcspay-action-secondary{
        background:rgba(26,132,236,.52);
        border:1px solid rgba(255,255,255,.23);
    }

    .jcspay-action-transfer{
        min-height:60px;
        margin-top:1px;
        background:#fff;
        color:#0635ae;
        box-shadow:0 12px 25px rgba(1,24,89,.18);
    }

    .jcspay-action-primary strong,
    .jcspay-action-secondary strong,
    .jcspay-action-transfer strong{
        font-size:15px;
    }

    .jcspay-wallet-trust{
        justify-content:space-between;
        gap:6px;
        margin-top:18px;
        color:#fff;
        font-size:10px;
        font-weight:850;
    }

    .security-card{
        min-height:104px;
        margin-top:0;
        padding:18px;
        border:0;
        border-radius:25px;
        background:#fff;
        box-shadow:0 15px 34px rgba(8,42,99,.08);
    }

    .security-card .security-icon{
        width:56px;
        height:56px;
        flex:0 0 56px;
        border-radius:18px;
        background:#eafff1;
        color:#03ad4b;
        font-size:30px;
    }

    .security-card b{
        color:#0a36a8;
        font-size:16px;
    }

    .security-card p{
        color:#73819a;
        font-size:12px;
    }

    .section-title{
        margin:25px 4px 13px;
        align-items:flex-end;
    }

    .section-title .eyebrow{
        color:#f01836;
        font-size:10px;
        letter-spacing:.14em;
    }

    .section-title h3{
        color:#0a36a8;
        font-size:19px;
        letter-spacing:-.02em;
    }

    .live-badge{
        padding:7px 10px;
        background:#fff8dd;
        border-color:#f3dc86;
        color:#a26c00;
        font-size:8px;
    }

    .service-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:7px;
        padding:14px 9px 12px;
        border:0;
        border-radius:26px;
        background:#fff;
        box-shadow:0 16px 38px rgba(8,42,99,.09);
    }

    .service-card{
        min-height:91px;
        padding:9px 2px 7px;
        border-radius:17px;
    }

    .service-icon{
        width:45px;
        height:45px;
        margin-bottom:8px;
        border-radius:15px;
        font-size:21px;
        box-shadow:0 7px 17px rgba(8,42,99,.08);
    }

    .service-card b{
        color:#092e91;
        font-size:10px;
        font-weight:900;
        white-space:normal;
    }

    .service-card:nth-child(1) .service-icon{background:#efffee;color:#23c738}
    .service-card:nth-child(2) .service-icon{background:#eef5ff;color:#1672ef}
    .service-card:nth-child(3) .service-icon{background:#fffbea;color:#f0b400}
    .service-card:nth-child(4) .service-icon{background:#f6efff;color:#8525e8}
    .service-card:nth-child(5) .service-icon{background:#fff2e9;color:#f26b18}
    .service-card:nth-child(6) .service-icon{background:#eafcff;color:#05afcc}
    .service-card:nth-child(7) .service-icon{background:#effff8;color:#08a35d}

    .content-grid{
        margin-top:18px;
    }

    .mobile-bottom-nav{
        left:10px;
        right:10px;
        bottom:calc(9px + env(safe-area-inset-bottom));
        min-height:75px;
        padding:8px 7px;
        border:1px solid rgba(255,255,255,.34);
        border-radius:25px;
        background:linear-gradient(145deg,rgba(4,137,65,.98),rgba(5,183,79,.98));
        box-shadow:0 18px 45px rgba(3,119,55,.28);
    }

    .mobile-nav-item,
    .mobile-nav-main{
        min-height:57px;
        color:rgba(255,255,255,.82);
        font-size:9px;
        font-weight:850;
    }

    .mobile-nav-item.active{
        color:#ffffff;
    }

    .mobile-nav-icon{
        width:29px;
        height:29px;
        font-size:20px;
    }

    .mobile-nav-main{
        transform:translateY(-15px);
        color:#ffffff;
    }

    .mobile-nav-plus{
        width:58px;
        height:58px;
        border-radius:19px;
        background:linear-gradient(145deg,#ff2440,#ef1232);
        box-shadow:0 13px 27px rgba(239,18,50,.34);
    }
}

@media (max-width:380px){
    .topbar{
        padding:11px 10px;
    }

    .topbar h1{
        font-size:17px;
    }

    .topbar .menu-btn,
    .topbar .notification-btn,
    .topbar .profile-btn{
        width:40px;
        min-width:40px;
        height:40px;
    }

    .top-actions{
        gap:5px;
    }

    .view{
        padding:14px 10px 22px;
    }

    .jcspay-mobile-wallet{
        padding:19px 14px 16px;
        border-radius:24px;
    }

    .jcspay-mobile-wallet #walletBalance{
        font-size:32px;
    }

    .jcspay-action-primary,
    .jcspay-action-secondary{
        min-height:52px;
        padding:9px 7px;
    }

    .jcspay-action-primary strong,
    .jcspay-action-secondary strong{
        font-size:13px;
    }

    .jcspay-wallet-trust{
        font-size:9px;
    }

    .service-grid{
        padding-left:6px;
        padding-right:6px;
        gap:3px;
    }

    .service-icon{
        width:41px;
        height:41px;
    }

    .service-card b{
        font-size:9px;
    }
}

/* =========================================================
   JCSPAY HOME ORDER + AUTOMATIC MESSAGE SLIDER — V30
   ========================================================= */

.home-wallet-grid{
    grid-template-columns:1fr;
}

.home-security-card{
    margin-top:18px;
}

.jcs-message-slider{
    position:relative;
    width:100%;
    margin-top:20px;
    overflow:hidden;
    border-radius:26px;
    background:#082a63;
    box-shadow:0 18px 42px rgba(8,42,99,.16);
}

.jcs-slider-track{
    display:flex;
    width:400%;
    animation:jcsSliderMove 24s infinite ease-in-out;
}

.jcs-slide{
    width:25%;
    min-height:190px;
    padding:25px 28px;
    display:flex;
    align-items:center;
    gap:24px;
    color:#fff;
    overflow:hidden;
    position:relative;
}

.jcs-slide:after{
    content:"";
    position:absolute;
    width:230px;
    height:230px;
    right:-115px;
    top:-120px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 0 0 38px rgba(255,255,255,.035),0 0 0 76px rgba(255,255,255,.025);
}

.jcs-slide-blue{
    background:linear-gradient(135deg,#062e9c,#0753e2 65%,#00a0d9);
}

.jcs-slide-green{
    background:linear-gradient(135deg,#04773a,#08b85c 68%,#27c981);
}

.jcs-slide-red{
    background:linear-gradient(135deg,#a50c28,#ef1938 68%,#ff6a35);
}

.jcs-slide-picture{
    width:112px;
    height:112px;
    flex:0 0 112px;
    display:grid;
    place-items:center;
    border-radius:30px;
    background:rgba(255,255,255,.94);
    color:#079d4e;
    font-size:47px;
    font-weight:950;
    box-shadow:0 16px 34px rgba(0,0,0,.14);
    position:relative;
    z-index:1;
}

.jcs-slide-red .jcs-slide-picture{
    color:#e71936;
    font-size:25px;
}

.jcs-slide-picture img{
    width:90px;
    height:90px;
    object-fit:contain;
}

.jcs-slide-copy{
    position:relative;
    z-index:1;
}

.jcs-slide-copy span{
    display:block;
    margin-bottom:7px;
    font-size:10px;
    font-weight:950;
    letter-spacing:.14em;
    color:#eaffef;
}

.jcs-slide-copy h3{
    max-width:620px;
    margin:0;
    font-size:25px;
    line-height:1.15;
    font-weight:950;
}

.jcs-slide-copy p{
    margin:9px 0 0;
    color:rgba(255,255,255,.84);
    font-size:13px;
    line-height:1.45;
}

.jcs-slider-dots{
    position:absolute;
    left:50%;
    bottom:10px;
    z-index:3;
    transform:translateX(-50%);
    display:flex;
    gap:6px;
}

.jcs-slider-dots i{
    width:7px;
    height:7px;
    border-radius:999px;
    background:rgba(255,255,255,.52);
}

.jcs-slider-dots i:first-child{
    width:18px;
    background:#fff;
}

@keyframes jcsSliderMove{
    0%,20%{transform:translateX(0)}
    25%,45%{transform:translateX(-25%)}
    50%,70%{transform:translateX(-50%)}
    75%,95%{transform:translateX(-75%)}
    100%{transform:translateX(0)}
}

@media(max-width:820px){
    #view-home .section-title{
        margin-top:17px;
    }

    .jcs-message-slider{
        margin-top:17px;
        border-radius:24px;
    }

    .jcs-slide{
        min-height:160px;
        padding:20px 18px 27px;
        gap:15px;
    }

    .jcs-slide-picture{
        width:76px;
        height:76px;
        flex-basis:76px;
        border-radius:22px;
        font-size:36px;
    }

    .jcs-slide-red .jcs-slide-picture{
        font-size:19px;
    }

    .jcs-slide-picture img{
        width:62px;
        height:62px;
    }

    .jcs-slide-copy span{
        font-size:8px;
        letter-spacing:.11em;
    }

    .jcs-slide-copy h3{
        font-size:17px;
        line-height:1.18;
    }

    .jcs-slide-copy p{
        margin-top:6px;
        font-size:10px;
    }

    .home-security-card{
        margin-top:15px;
    }
}

@media(max-width:380px){
    .jcs-slide{
        min-height:148px;
        padding:17px 13px 25px;
        gap:11px;
    }

    .jcs-slide-picture{
        width:66px;
        height:66px;
        flex-basis:66px;
        border-radius:19px;
    }

    .jcs-slide-picture img{
        width:54px;
        height:54px;
    }

    .jcs-slide-copy h3{
        font-size:15px;
    }
}

@media(prefers-reduced-motion:reduce){
    .jcs-slider-track{
        animation:none;
    }
}

/* JCSPAY SECRETARY PUBLICITY SLIDE — V31 */

.jcs-slide-secretary .jcs-slide-picture{
    height:136px;
    border-radius:24px;
    overflow:hidden;
    background:#ffffff;
}

.jcs-slide-secretary .jcs-slide-picture img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 20%;
}

@media(max-width:820px){
    .jcs-slide-secretary .jcs-slide-picture{
        height:102px;
        border-radius:18px;
    }
}

@media(max-width:380px){
    .jcs-slide-secretary .jcs-slide-picture{
        height:92px;
    }
}

/* =========================================================
   JCSPAY FINAL MOBILE READABILITY + LARGE SERVICE ICONS
   2026-08-22
   Purpose:
   - Keep existing colors/design unchanged
   - Make important mobile text easier to read
   - Make service icons/logos larger and easier to tap
   - Override later compact rules that reduced text to 9-10px
   ========================================================= */

@media (max-width: 820px){

    /* Main mobile headings */
    .topbar h1{
        font-size:21px;
        line-height:1.15;
        font-weight:950;
    }

    .topbar .eyebrow,
    .section-title .eyebrow{
        font-size:12px;
        font-weight:900;
        line-height:1.2;
    }

    .section-title h3,
    .panel h3,
    .page-card h3{
        font-size:21px;
        line-height:1.2;
        font-weight:950;
    }

    /* Wallet readability */
    .jcspay-wallet-label{
        font-size:14px;
        font-weight:850;
    }

    .jcspay-mobile-wallet #walletBalance{
        font-size:40px;
        line-height:1.05;
        font-weight:950;
    }

    .jcspay-tier-pill{
        font-size:12px;
        font-weight:900;
    }

    .jcspay-action-primary,
    .jcspay-action-secondary,
    .jcspay-action-transfer{
        min-height:60px;
    }

    .jcspay-action-primary strong,
    .jcspay-action-secondary strong,
    .jcspay-action-transfer strong{
        font-size:17px;
        line-height:1.2;
        font-weight:950;
    }

    .jcspay-action-primary span,
    .jcspay-action-secondary span,
    .jcspay-action-transfer span{
        font-size:27px;
        line-height:1;
    }

    .jcspay-wallet-trust{
        font-size:13px;
        line-height:1.45;
        font-weight:850;
    }

    /* Security card */
    .security-card b{
        font-size:17px;
        line-height:1.25;
        font-weight:950;
    }

    .security-card p{
        font-size:14px;
        line-height:1.5;
    }

    .security-card .security-icon{
        width:58px;
        height:58px;
        flex:0 0 58px;
        font-size:31px;
    }

    /* Quick Services: larger cards, icons and labels */
    .service-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:11px;
        padding:14px 11px;
    }

    .service-card{
        min-height:126px;
        padding:12px 7px 11px;
        justify-content:flex-start;
    }

    .service-icon{
        width:60px;
        height:60px;
        flex:0 0 60px;
        margin:0 auto 10px;
        border-radius:18px;
        font-size:29px;
        line-height:1;
    }

    /* Real PNG/SVG/logo images inside service icons */
    .service-icon img,
    .service-icon svg{
        display:block;
        width:46px;
        height:46px;
        max-width:46px;
        max-height:46px;
        object-fit:contain;
    }

    .service-card b{
        font-size:15px;
        line-height:1.25;
        font-weight:950;
        letter-spacing:0;
        white-space:normal;
        overflow-wrap:anywhere;
    }

    /* Bottom navigation */
    .mobile-bottom-nav{
        min-height:82px;
    }

    .mobile-nav-item,
    .mobile-nav-main{
        min-height:60px;
        font-size:12px;
        line-height:1.15;
        font-weight:900;
    }

    .mobile-nav-icon{
        width:36px;
        height:36px;
        font-size:25px;
    }

    .mobile-nav-plus{
        width:62px;
        height:62px;
        font-size:32px;
    }

    .mobile-nav-main > span:last-child{
        font-size:12px;
        font-weight:900;
    }

    /* Transaction/history readability */
    .transaction-item b{
        font-size:15px;
        line-height:1.3;
    }

    .transaction-item small{
        font-size:13px;
        line-height:1.4;
    }

    .tx-amount strong{
        font-size:15px;
    }

    .status{
        font-size:12px;
    }

    /* Account and verification actions */
    #accountPanelName{
        font-size:24px;
    }

    #accountPanelEmail{
        font-size:14px;
    }

    #accountPanel > button.primary.wide,
    #showIdentityVerifyBtn,
    #showSelfieLivenessBtn,
    #showKycStatusBtn{
        font-size:15px;
        line-height:1.25;
    }

    /* Forms/modals */
    .modal h2{
        font-size:24px;
        line-height:1.2;
    }

    .form-row,
    label{
        font-size:14px;
    }

    input,
    select{
        min-height:50px;
        font-size:16px;
    }

    .form-note{
        font-size:13px;
    }

    .funding-method b{
        font-size:15px;
    }

    .funding-method small{
        font-size:12px;
    }

    .funding-method-icon{
        width:50px;
        height:50px;
        flex-basis:50px;
        font-size:24px;
    }
}

/* Small Android / narrow phones:
   use two columns so larger icons/text are not squeezed. */
@media (max-width: 430px){

    .topbar h1{
        font-size:19px;
    }

    .service-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        padding:12px 9px;
    }

    .service-card{
        min-height:128px;
        padding:12px 8px 10px;
    }

    .service-icon{
        width:60px;
        height:60px;
        flex-basis:60px;
        font-size:29px;
    }

    .service-icon img,
    .service-icon svg{
        width:46px;
        height:46px;
        max-width:46px;
        max-height:46px;
    }

    .service-card b{
        font-size:15px;
    }

    .jcspay-mobile-wallet #walletBalance{
        font-size:36px;
    }

    .jcspay-action-primary strong,
    .jcspay-action-secondary strong,
    .jcspay-action-transfer strong{
        font-size:16px;
    }

    .jcspay-wallet-trust{
        font-size:12px;
    }

    .mobile-nav-item,
    .mobile-nav-main,
    .mobile-nav-main > span:last-child{
        font-size:11px;
    }

    .mobile-nav-icon{
        width:34px;
        height:34px;
        font-size:24px;
    }
}

/* Very narrow devices: keep readable rather than reverting to 9px text. */
@media (max-width: 380px){

    .service-card b{
        font-size:14px;
    }

    .service-icon{
        width:56px;
        height:56px;
        flex-basis:56px;
        font-size:27px;
    }

    .service-icon img,
    .service-icon svg{
        width:43px;
        height:43px;
        max-width:43px;
        max-height:43px;
    }

    .jcspay-action-primary strong,
    .jcspay-action-secondary strong,
    .jcspay-action-transfer strong{
        font-size:15px;
    }

    .jcspay-wallet-trust{
        font-size:11px;
    }

    .mobile-nav-item,
    .mobile-nav-main,
    .mobile-nav-main > span:last-child{
        font-size:10.5px;
    }
}

/* =========================================================
   JCSPAY CARD REQUESTS - ISSUER PENDING
   No real PAN/CVV/expiry is created by this interface.
   ========================================================= */

.jcs-slide-card{
    background:linear-gradient(135deg,#04152f 0%,#082a63 58%,#9a6d12 145%);
}

.jcs-card-art{
    width:190px;
    min-width:190px;
    height:118px;
    padding:16px;
    border-radius:20px;
    background:linear-gradient(145deg,#071f4a,#0d3f8f 62%,#b88724 150%);
    border:1px solid rgba(255,255,255,.26);
    box-shadow:0 16px 36px rgba(0,0,0,.22);
    color:#fff;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.jcs-card-chip{
    width:35px;
    height:25px;
    border-radius:7px;
    background:linear-gradient(135deg,#f2d48a,#c79b35);
    border:1px solid rgba(255,255,255,.35);
}

.jcs-card-brand{
    position:absolute;
    right:15px;
    top:14px;
    font-size:12px;
    font-weight:950;
    letter-spacing:.10em;
}

.jcs-card-number{
    margin-top:auto;
    font-size:14px;
    font-weight:850;
    letter-spacing:.08em;
    white-space:nowrap;
}

.jcs-card-foot{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:10px;
    margin-top:10px;
    font-size:9px;
    font-weight:850;
    letter-spacing:.08em;
}

.jcs-card-foot strong{
    font-size:17px;
    font-style:italic;
    letter-spacing:-.04em;
}

.jcs-card-offer-btn{
    margin-top:14px;
    border:1px solid rgba(255,255,255,.32);
    background:#fff;
    color:#082a63;
    border-radius:12px;
    padding:10px 14px;
    font-weight:900;
    cursor:pointer;
}

.jcspay-card-modal h2{
    color:#082a63;
}

.jcspay-card-preview{
    min-height:205px;
    margin-top:18px;
    padding:22px;
    border-radius:24px;
    background:linear-gradient(145deg,#061a3d 0%,#0b3b83 64%,#9b711d 145%);
    color:#fff;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 20px 45px rgba(8,42,99,.22);
    display:flex;
    flex-direction:column;
}

.jcspay-card-preview-top,
.jcspay-card-preview-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.jcspay-card-preview-top strong{
    font-size:18px;
    letter-spacing:.08em;
}

.jcspay-card-preview-top span{
    font-size:10px;
    font-weight:900;
    letter-spacing:.14em;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    padding:6px 9px;
}

.jcspay-card-preview-chip{
    width:48px;
    height:34px;
    margin-top:24px;
    border-radius:9px;
    background:linear-gradient(135deg,#f4dc96,#bd8e2f);
    border:1px solid rgba(255,255,255,.34);
}

.jcspay-card-preview-number{
    margin-top:25px;
    font-size:20px;
    font-weight:850;
    letter-spacing:.08em;
    white-space:nowrap;
}

.jcspay-card-preview-bottom{
    margin-top:auto;
    padding-top:22px;
}

.jcspay-card-preview-bottom span{
    font-size:10px;
    font-weight:850;
    letter-spacing:.08em;
}

.jcspay-card-preview-bottom strong{
    font-size:25px;
    font-style:italic;
    letter-spacing:-.06em;
}

.jcspay-card-fee-box{
    margin-top:17px;
    padding:14px 15px;
    border:1px solid #dce4ee;
    background:#f7faff;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.jcspay-card-fee-box span{
    color:#71809a;
    font-size:12px;
    font-weight:800;
}

.jcspay-card-fee-box strong{
    color:#082a63;
    font-size:18px;
    font-weight:950;
}

.jcspay-card-feature-list{
    display:grid;
    gap:8px;
    margin-top:16px;
    color:#10213d;
    font-size:12px;
    font-weight:800;
}

.jcspay-card-sandbox-note{
    margin-top:17px;
    padding:14px 15px;
    border:1px solid #f2d68d;
    background:#fff8df;
    border-radius:16px;
}

.jcspay-card-sandbox-note strong{
    display:block;
    color:#8b6200;
    font-size:11px;
    font-weight:950;
    letter-spacing:.06em;
}

.jcspay-card-sandbox-note p{
    margin:7px 0 0;
    color:#6f5a25;
    font-size:11px;
    line-height:1.5;
}

.jcspay-card-request-status{
    margin-top:14px;
    padding:13px 14px;
    border-radius:14px;
    background:#e9f9f3;
    border:1px solid #b9ead9;
    color:#075c45;
    font-size:12px;
    font-weight:800;
    line-height:1.5;
}

.dark .jcspay-card-modal h2,
.dark .jcspay-card-fee-box strong,
.dark .jcspay-card-feature-list{
    color:#eff5ff;
}

.dark .jcspay-card-fee-box{
    background:#0b1524;
    border-color:#223149;
}

.dark .jcspay-card-sandbox-note{
    background:#2a230f;
    border-color:#6b5720;
}

.dark .jcspay-card-sandbox-note p{
    color:#e5d69d;
}

@media(max-width:820px){
    .jcs-slide-card{
        align-items:center;
    }

    .jcs-card-art{
        width:145px;
        min-width:145px;
        height:92px;
        padding:12px;
        border-radius:17px;
    }

    .jcs-card-chip{
        width:29px;
        height:20px;
    }

    .jcs-card-brand{
        right:11px;
        top:10px;
        font-size:9px;
    }

    .jcs-card-number{
        font-size:10px;
    }

    .jcs-card-foot{
        margin-top:7px;
        font-size:7px;
    }

    .jcs-card-foot strong{
        font-size:13px;
    }

    .jcs-card-offer-btn{
        margin-top:10px;
        padding:8px 11px;
        font-size:11px;
    }
}

@media(max-width:520px){
    .jcs-slide-card{
        align-items:flex-start;
    }

    .jcs-card-art{
        width:112px;
        min-width:112px;
        height:74px;
        padding:9px;
        border-radius:14px;
    }

    .jcs-card-chip{
        width:23px;
        height:16px;
        border-radius:5px;
    }

    .jcs-card-brand{
        font-size:7px;
        right:8px;
        top:8px;
    }

    .jcs-card-number{
        font-size:7px;
        letter-spacing:.03em;
    }

    .jcs-card-foot span{
        display:none;
    }

    .jcs-card-foot strong{
        margin-left:auto;
        font-size:11px;
    }

    .jcspay-card-preview{
        min-height:175px;
        padding:18px;
    }

    .jcspay-card-preview-number{
        font-size:15px;
        letter-spacing:.04em;
    }
}

/* =========================================================
   JCSPAY FINTECH STRUCTURE — V35
   Approved familiar wallet structure using JCSPAY branding.
   Keeps existing service/payment logic unchanged.
   ========================================================= */

.jcspay-greeting-block{
    min-width:0;
}

.jcspay-greeting-block .eyebrow{
    margin-bottom:2px;
}

.jcspay-greeting-block h1{
    color:var(--navy);
    font-size:22px;
    line-height:1.15;
    letter-spacing:-.02em;
}

.jcspay-support-headset{
    font-size:18px;
}

/* Four primary wallet actions: Add, Transfer, History, Bills */
.jcspay-fintech-actions{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
}

.jcspay-fintech-actions .jcspay-action-primary,
.jcspay-fintech-actions .jcspay-action-secondary,
.jcspay-fintech-actions .jcspay-action-transfer,
.jcspay-fintech-actions .jcspay-action-bills{
    grid-column:auto;
    min-width:0;
    min-height:68px;
    padding:9px 6px;
    border-radius:15px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    text-align:center;
    border:0;
    cursor:pointer;
    font-weight:900;
}

.jcspay-fintech-actions .jcspay-action-primary{
    background:var(--red);
    color:#fff;
    box-shadow:0 9px 20px rgba(229,31,54,.28);
}

.jcspay-fintech-actions .jcspay-action-transfer{
    background:#fff;
    color:var(--navy);
    box-shadow:0 9px 20px rgba(3,24,76,.14);
}

.jcspay-fintech-actions .jcspay-action-secondary{
    background:rgba(255,255,255,.13);
    color:#fff;
    border:1px solid rgba(255,255,255,.19);
    box-shadow:none;
}

.jcspay-fintech-actions .jcspay-action-bills{
    background:var(--green);
    color:#fff;
    box-shadow:0 9px 20px rgba(15,159,110,.25);
}

.jcspay-fintech-actions .jcspay-action-primary span,
.jcspay-fintech-actions .jcspay-action-secondary span,
.jcspay-fintech-actions .jcspay-action-transfer span,
.jcspay-fintech-actions .jcspay-action-bills span{
    font-size:21px;
    line-height:1;
}

.jcspay-fintech-actions .jcspay-action-primary strong,
.jcspay-fintech-actions .jcspay-action-secondary strong,
.jcspay-fintech-actions .jcspay-action-transfer strong,
.jcspay-fintech-actions .jcspay-action-bills strong{
    font-size:11px;
    line-height:1.15;
    font-weight:900;
    white-space:normal;
}

/* Make the familiar service area denser and easier to scan. */
#serviceGrid{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.jcspay-card-service .service-icon{
    background:#f2efff;
    color:#6f35d5;
}

.home-security-card{
    margin-top:16px;
}

/* =========================================================
   JCSPAY ME / PROFILE PAGE
   ========================================================= */

.jcspay-me-shell{
    max-width:860px;
    margin:0 auto;
}

.jcspay-me-profile{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    gap:16px;
    padding:22px;
    border-radius:25px;
    background:linear-gradient(140deg,#071f4a 0%,#0b3476 58%,#0d5ea4 100%);
    color:#fff;
    box-shadow:0 18px 40px rgba(8,42,99,.22);
}

.jcspay-me-profile:after{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    right:-72px;
    top:-92px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 0 0 34px rgba(255,255,255,.035),0 0 0 68px rgba(255,255,255,.025);
}

.jcspay-me-avatar{
    position:relative;
    z-index:1;
    width:58px;
    height:58px;
    flex:0 0 58px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:#fff;
    color:var(--navy);
    font-size:15px;
    font-weight:950;
    box-shadow:0 9px 22px rgba(0,0,0,.12);
}

.jcspay-me-copy{
    position:relative;
    z-index:1;
    min-width:0;
}

.jcspay-me-copy .eyebrow{
    color:#ffbec7;
    margin-bottom:3px;
}

.jcspay-me-copy h3{
    margin:0;
    color:#fff;
    font-size:20px;
    line-height:1.15;
}

.jcspay-me-copy p:last-child{
    margin:5px 0 0;
    color:#d9e5f7;
    font-size:12px;
    font-weight:700;
}

.jcspay-me-menu{
    margin-top:15px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:22px;
    background:var(--card);
    box-shadow:0 13px 34px rgba(8,42,99,.07);
}

.jcspay-me-item{
    width:100%;
    min-height:68px;
    padding:12px 14px;
    border:0;
    border-bottom:1px solid var(--line);
    background:var(--card);
    color:var(--text);
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    text-align:left;
    cursor:pointer;
}

.jcspay-me-item:last-child{
    border-bottom:0;
}

.jcspay-me-item:hover{
    background:#f8fbff;
}

.jcspay-me-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:#eef4ff;
    color:var(--navy2);
    font-size:18px;
    font-weight:900;
}

.jcspay-me-item:nth-child(4) .jcspay-me-icon{
    background:#eafff1;
    color:var(--green);
}

.jcspay-me-item:nth-child(5) .jcspay-me-icon{
    background:#fff4e9;
    color:#dc6c15;
}

.jcspay-me-item:nth-child(6) .jcspay-me-icon{
    background:#f2efff;
    color:#7138d5;
}

.jcspay-me-item > span:nth-child(2){
    min-width:0;
}

.jcspay-me-item b,
.jcspay-me-item small{
    display:block;
}

.jcspay-me-item b{
    color:var(--navy);
    font-size:14px;
    font-weight:900;
}

.jcspay-me-item small{
    margin-top:3px;
    color:var(--muted);
    font-size:11px;
    line-height:1.35;
    font-weight:650;
}

.jcspay-me-item i{
    color:#9aa8ba;
    font-style:normal;
    font-size:22px;
}

.jcspay-me-logout b{
    color:var(--red);
}

.jcspay-me-logout .jcspay-me-icon{
    background:#fff0f2;
    color:var(--red);
}

.dark .jcspay-me-item:hover{
    background:#0c1728;
}

.dark .jcspay-me-item b{
    color:#eff5ff;
}

/* =========================================================
   MOBILE FINTECH LAYOUT
   ========================================================= */

@media(max-width:820px){
    .menu-btn{
        display:none !important;
    }

    .topbar{
        min-height:72px;
        padding:11px 12px;
        gap:8px;
    }

    .jcspay-greeting-block{
        flex:1 1 auto;
        min-width:110px;
    }

    .jcspay-greeting-block .eyebrow{
        font-size:8px;
        letter-spacing:.11em;
    }

    .jcspay-greeting-block h1{
        font-size:17px;
        max-width:150px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .top-actions{
        gap:5px;
        flex:0 0 auto;
    }

    .topbar #themeBtn{
        display:none;
    }

    .topbar .icon-btn,
    .topbar .profile-btn{
        width:39px;
        min-width:39px;
        height:39px;
        padding:0;
        border-radius:13px;
        display:grid;
        place-items:center;
    }

    .topbar .profile-btn .avatar{
        width:35px;
        height:35px;
        border-radius:11px;
    }

    .topbar .profile-copy{
        display:none;
    }

    #view-home{
        padding-top:13px;
    }

    .jcspay-mobile-wallet{
        padding:19px 14px 15px;
        border-radius:24px;
    }

    .jcspay-mobile-wallet #walletBalance{
        font-size:30px;
    }

    .jcspay-fintech-actions{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:6px;
        margin-top:16px;
    }

    .jcspay-fintech-actions .jcspay-action-primary,
    .jcspay-fintech-actions .jcspay-action-secondary,
    .jcspay-fintech-actions .jcspay-action-transfer,
    .jcspay-fintech-actions .jcspay-action-bills{
        min-height:62px;
        padding:7px 3px;
        border-radius:13px;
    }

    .jcspay-fintech-actions .jcspay-action-primary span,
    .jcspay-fintech-actions .jcspay-action-secondary span,
    .jcspay-fintech-actions .jcspay-action-transfer span,
    .jcspay-fintech-actions .jcspay-action-bills span{
        font-size:19px;
    }

    .jcspay-fintech-actions .jcspay-action-primary strong,
    .jcspay-fintech-actions .jcspay-action-secondary strong,
    .jcspay-fintech-actions .jcspay-action-transfer strong,
    .jcspay-fintech-actions .jcspay-action-bills strong{
        font-size:9px;
    }

    .jcspay-wallet-trust{
        justify-content:space-between;
        margin-top:14px;
        gap:5px;
        font-size:9px;
    }

    .jcs-message-slider{
        margin-top:14px;
        border-radius:20px;
    }

    .section-title{
        margin:18px 3px 9px;
    }

    .section-title h3{
        font-size:17px;
    }

    #serviceGrid{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:4px;
        padding:10px 4px;
        border-radius:20px;
    }

    #serviceGrid .service-card{
        min-height:80px;
        padding:8px 1px 6px;
    }

    #serviceGrid .service-icon{
        width:40px;
        height:40px;
        margin-bottom:6px;
        border-radius:13px;
        font-size:18px;
    }

    #serviceGrid .service-card b{
        font-size:9px;
        line-height:1.15;
    }

    #serviceGrid .service-card small{
        display:none;
    }

    .home-security-card{
        min-height:auto;
        margin-top:12px;
        padding:14px;
        border-radius:18px;
    }

    .home-security-card .security-icon{
        width:42px;
        height:42px;
        flex:0 0 42px;
        border-radius:13px;
        font-size:23px;
    }

    .home-security-card b{
        font-size:13px;
    }

    .home-security-card p{
        font-size:10px;
        line-height:1.4;
    }

    .content-grid{
        display:block;
        margin-top:12px;
    }

    .content-grid .panel{
        margin-bottom:12px;
        border-radius:19px;
        padding:14px;
    }

    .content-grid .promo-panel{
        margin-bottom:0;
    }

    .mobile-bottom-nav{
        left:8px;
        right:8px;
        bottom:calc(8px + env(safe-area-inset-bottom));
        min-height:72px;
        padding:7px 6px;
        border:1px solid rgba(255,255,255,.25);
        border-radius:23px;
        background:linear-gradient(145deg,#087d45,#0f9f6e);
        box-shadow:0 17px 42px rgba(3,119,55,.28);
    }

    .mobile-nav-item,
    .mobile-nav-main{
        min-height:55px;
        color:rgba(255,255,255,.78);
        font-size:9px;
        font-weight:850;
    }

    .mobile-nav-item.active{
        color:#fff;
    }

    .mobile-nav-main{
        color:#fff;
    }

    .mobile-nav-plus{
        width:52px;
        height:52px;
        border-radius:17px;
        background:var(--red);
        box-shadow:0 12px 26px rgba(229,31,54,.34);
    }

    .jcspay-me-shell{
        max-width:none;
    }

    .jcspay-me-profile{
        padding:17px;
        border-radius:21px;
    }

    .jcspay-me-avatar{
        width:50px;
        height:50px;
        flex-basis:50px;
        border-radius:15px;
        font-size:13px;
    }

    .jcspay-me-copy h3{
        font-size:17px;
    }

    .jcspay-me-menu{
        margin-top:12px;
        border-radius:19px;
    }

    .jcspay-me-item{
        min-height:62px;
        grid-template-columns:38px minmax(0,1fr) auto;
        gap:10px;
        padding:10px 12px;
    }

    .jcspay-me-icon{
        width:38px;
        height:38px;
        border-radius:12px;
        font-size:16px;
    }

    .jcspay-me-item b{
        font-size:12px;
    }

    .jcspay-me-item small{
        font-size:9.5px;
    }
}

@media(max-width:380px){
    .jcspay-greeting-block h1{
        max-width:128px;
        font-size:16px;
    }

    .topbar .icon-btn,
    .topbar .profile-btn{
        width:37px;
        min-width:37px;
        height:37px;
    }

    .jcspay-fintech-actions{
        gap:4px;
    }

    .jcspay-fintech-actions .jcspay-action-primary,
    .jcspay-fintech-actions .jcspay-action-secondary,
    .jcspay-fintech-actions .jcspay-action-transfer,
    .jcspay-fintech-actions .jcspay-action-bills{
        min-height:59px;
    }

    #serviceGrid .service-icon{
        width:37px;
        height:37px;
        font-size:17px;
    }

    #serviceGrid .service-card b{
        font-size:8.4px;
    }
}


/* =========================================================
   JCSPAY MOBILE READABILITY + CONTROL FIXES — V36
   Bigger mobile characters, visible Theme button
   ========================================================= */

@media(max-width:820px){

    /* Keep Theme visible on Android/mobile. */
    .topbar #themeBtn{
        display:grid !important;
    }

    .topbar{
        min-height:78px;
        padding:12px 10px;
        gap:7px;
    }

    .jcspay-greeting-block{
        min-width:104px;
    }

    .jcspay-greeting-block .eyebrow{
        font-size:9.5px;
        line-height:1.15;
        letter-spacing:.09em;
    }

    .jcspay-greeting-block h1{
        max-width:145px;
        font-size:18px;
        line-height:1.18;
    }

    .top-actions{
        gap:4px;
    }

    .topbar .icon-btn,
    .topbar .profile-btn{
        width:38px;
        min-width:38px;
        height:38px;
        border-radius:12px;
        font-size:18px;
    }

    .topbar .profile-btn .avatar{
        width:34px;
        height:34px;
        font-size:15px;
    }

    /* Wallet text */
    .jcspay-mobile-wallet{
        padding:21px 16px 17px;
    }

    .jcspay-wallet-label{
        font-size:12px;
    }

    .jcspay-mobile-wallet #walletBalance{
        font-size:34px;
        line-height:1.08;
    }

    .jcspay-tier-pill{
        font-size:10px;
        padding:6px 10px;
    }

    /* Main four actions */
    .jcspay-fintech-actions{
        gap:7px;
    }

    .jcspay-fintech-actions .jcspay-action-primary,
    .jcspay-fintech-actions .jcspay-action-secondary,
    .jcspay-fintech-actions .jcspay-action-transfer,
    .jcspay-fintech-actions .jcspay-action-bills{
        min-height:70px;
        padding:9px 3px;
        border-radius:15px;
    }

    .jcspay-fintech-actions .jcspay-action-primary span,
    .jcspay-fintech-actions .jcspay-action-secondary span,
    .jcspay-fintech-actions .jcspay-action-transfer span,
    .jcspay-fintech-actions .jcspay-action-bills span{
        font-size:22px;
    }

    .jcspay-fintech-actions .jcspay-action-primary strong,
    .jcspay-fintech-actions .jcspay-action-secondary strong,
    .jcspay-fintech-actions .jcspay-action-transfer strong,
    .jcspay-fintech-actions .jcspay-action-bills strong{
        font-size:11px;
        line-height:1.15;
    }

    .jcspay-wallet-trust{
        font-size:10px;
        line-height:1.25;
    }

    /* Section headings */
    .section-title .eyebrow{
        font-size:10px;
    }

    .section-title h3{
        font-size:18px;
        line-height:1.2;
    }

    .live-badge{
        font-size:9px;
    }

    /* Main service icons and labels */
    #serviceGrid{
        gap:6px;
        padding:12px 5px;
    }

    #serviceGrid .service-card{
        min-height:94px;
        padding:10px 2px 8px;
    }

    #serviceGrid .service-icon{
        width:45px;
        height:45px;
        margin-bottom:8px;
        border-radius:14px;
        font-size:21px;
    }

    #serviceGrid .service-card b{
        font-size:11.5px;
        line-height:1.2;
        font-weight:900;
    }

    /* Security card */
    .home-security-card{
        padding:16px;
    }

    .home-security-card .security-icon{
        width:48px;
        height:48px;
        flex:0 0 48px;
        font-size:26px;
    }

    .home-security-card b{
        font-size:14px;
    }

    .home-security-card p{
        font-size:11px;
        line-height:1.45;
    }

    /* Bottom nav */
    .mobile-bottom-nav{
        min-height:78px;
        padding:8px 5px;
    }

    .mobile-nav-item,
    .mobile-nav-main{
        min-height:60px;
        font-size:10.5px;
        line-height:1.15;
    }

    .mobile-nav-icon{
        font-size:22px;
    }

    .mobile-nav-plus{
        width:56px;
        height:56px;
        font-size:27px;
    }

    /* Me / settings page */
    .jcspay-me-copy h3{
        font-size:19px;
    }

    .jcspay-me-item{
        min-height:68px;
        grid-template-columns:42px minmax(0,1fr) auto;
        padding:11px 13px;
    }

    .jcspay-me-icon{
        width:42px;
        height:42px;
        font-size:18px;
    }

    .jcspay-me-item b{
        font-size:13px;
    }

    .jcspay-me-item small{
        font-size:10.5px;
        line-height:1.35;
    }
}

@media(max-width:380px){
    .jcspay-greeting-block h1{
        max-width:118px;
        font-size:17px;
    }

    .topbar .icon-btn,
    .topbar .profile-btn{
        width:35px;
        min-width:35px;
        height:35px;
    }

    #serviceGrid .service-card b{
        font-size:10.5px;
    }

    .mobile-nav-item,
    .mobile-nav-main{
        font-size:10px;
    }
}