:root{
    --pb-bg:#f4f7fb;
    --pb-card:#ffffff;
    --pb-text:#172033;
    --pb-muted:#6e7788;
    --pb-line:#e6eaf1;
    --pb-primary:#175cd3;
    --pb-primary-dark:#124ba9;
    --pb-bkash:#e2136e;
    --pb-bkash-dark:#bc0f5b;
    --pb-success:#067647;
    --pb-success-bg:#ecfdf3;
    --pb-error:#b42318;
    --pb-error-bg:#fef3f2;
    --pb-info:#175cd3;
    --pb-info-bg:#eff8ff;
    --pb-shadow:0 22px 70px rgba(23,32,51,.12);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
    margin:0;
    color:var(--pb-text);
    background:
        radial-gradient(circle at 10% 0%,rgba(23,92,211,.08),transparent 32rem),
        radial-gradient(circle at 100% 100%,rgba(226,19,110,.07),transparent 30rem),
        var(--pb-bg);
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}
button,input{font:inherit}
.paybill-shell{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px 18px;
}
.paybill-card{
    width:min(780px,100%);
    background:var(--pb-card);
    border:1px solid rgba(220,226,236,.95);
    border-radius:24px;
    box-shadow:var(--pb-shadow);
    overflow:hidden;
}
.paybill-header{
    min-height:78px;
    padding:17px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    border-bottom:1px solid var(--pb-line);
}
.paybill-brand{display:flex;align-items:center;gap:12px;min-width:0}
.paybill-logo-text,.paybill-logo-image{
    width:44px;height:44px;border-radius:13px;flex:0 0 44px;
}
.paybill-logo-text{
    display:grid;place-items:center;
    background:linear-gradient(145deg,#1e66df,#134aa5);
    color:#fff;font-weight:800;letter-spacing:.02em;
}
.paybill-logo-image{object-fit:contain;background:#fff;border:1px solid var(--pb-line);padding:3px}
.paybill-company{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paybill-brand-sub{margin-top:2px;color:var(--pb-muted);font-size:12px}
.paybill-secure{
    display:inline-flex;align-items:center;gap:7px;
    color:#344054;font-size:12px;font-weight:700;
    background:#f8fafc;border:1px solid var(--pb-line);border-radius:999px;padding:7px 10px;
}
.paybill-lock{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#ecfdf3;color:#067647;font-weight:900}
.paybill-body{padding:30px 32px 28px}
.paybill-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:24px}
.paybill-eyebrow{display:block;color:var(--pb-primary);font-size:11px;font-weight:800;letter-spacing:.11em;margin-bottom:8px}
.paybill-title-row h1{font-size:29px;line-height:1.18;margin:0 0 9px;letter-spacing:-.03em}
.paybill-title-row p{margin:0;color:var(--pb-muted);line-height:1.6;font-size:14px;max-width:540px}
.paybill-bkash{
    flex:0 0 auto;color:#fff;background:var(--pb-bkash);font-size:15px;font-weight:800;
    padding:9px 14px;border-radius:10px;box-shadow:0 8px 20px rgba(226,19,110,.18);
}
.paybill-alert{
    display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;margin:0 0 18px;
    font-size:13px;line-height:1.5;border:1px solid transparent;
}
.paybill-alert.compact{margin:18px 0 0}
.paybill-alert.success{color:var(--pb-success);background:var(--pb-success-bg);border-color:#abefc6}
.paybill-alert.error{color:var(--pb-error);background:var(--pb-error-bg);border-color:#fecdca}
.paybill-alert.info{color:var(--pb-info);background:var(--pb-info-bg);border-color:#b2ddff}
.paybill-alert-icon{
    width:20px;height:20px;display:grid;place-items:center;flex:0 0 20px;border-radius:50%;
    background:currentColor;color:#fff;font-weight:800;font-size:12px;
}
.paybill-form label{display:block;font-size:13px;font-weight:750;margin-bottom:8px;color:#344054}
.paybill-input-wrap{position:relative}
.paybill-input-icon{
    position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#98a2b3;font-weight:800;pointer-events:none;
}
.paybill-input-wrap input{
    width:100%;height:52px;border:1px solid #d0d5dd;border-radius:12px;background:#fff;color:var(--pb-text);
    padding:0 14px 0 37px;outline:none;transition:border-color .18s,box-shadow .18s;
}
.paybill-input-wrap input:focus{border-color:#84adf4;box-shadow:0 0 0 4px rgba(23,92,211,.10)}
.paybill-input-wrap input::placeholder{color:#98a2b3}
.paybill-btn{
    width:100%;border:0;border-radius:12px;min-height:50px;padding:0 18px;margin-top:13px;
    cursor:pointer;color:#fff;font-weight:800;transition:transform .14s,box-shadow .14s,background .14s;
}
.paybill-btn:hover{transform:translateY(-1px)}
.paybill-btn:active{transform:translateY(0)}
.paybill-btn.primary{background:var(--pb-primary);box-shadow:0 9px 20px rgba(23,92,211,.16)}
.paybill-btn.primary:hover{background:var(--pb-primary-dark)}
.paybill-btn.bkash{
    background:var(--pb-bkash);box-shadow:0 10px 22px rgba(226,19,110,.18);
    display:flex;align-items:center;justify-content:center;gap:10px;font-size:15px;
}
.paybill-btn.bkash:hover{background:var(--pb-bkash-dark)}
.paybill-arrow{font-size:21px;line-height:1}
.paybill-help-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px;
}
.paybill-help-grid>div{
    border:1px solid var(--pb-line);background:#fafbfc;border-radius:12px;padding:13px 12px;
    display:flex;align-items:center;gap:9px;color:#475467;font-size:12px;line-height:1.35;
}
.paybill-help-grid strong{
    width:25px;height:25px;display:grid;place-items:center;flex:0 0 25px;border-radius:8px;background:#eaf2ff;color:var(--pb-primary);font-size:11px;
}
.paybill-account{border:1px solid var(--pb-line);border-radius:16px;padding:20px;background:#fcfdff}
.paybill-account-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:17px;border-bottom:1px solid var(--pb-line)}
.paybill-small-label{display:block;color:var(--pb-muted);font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.paybill-account h2{margin:0;font-size:18px;letter-spacing:-.01em}
.paybill-account p{margin:5px 0 0;color:var(--pb-muted);font-size:12px}
.paybill-change{color:var(--pb-primary);font-size:12px;font-weight:750;text-decoration:none;white-space:nowrap;padding:5px 0}
.paybill-change:hover{text-decoration:underline}
.paybill-amount-panel{text-align:center;padding:24px 10px 20px}
.paybill-amount-panel span{display:block;color:var(--pb-muted);font-size:12px;font-weight:650}
.paybill-amount-panel strong{display:block;font-size:38px;line-height:1.15;margin:7px 0 5px;letter-spacing:-.045em}
.paybill-amount-panel small{color:#98a2b3;font-size:11px}
.paybill-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.paybill-breakdown>div{padding:11px 12px;background:#fff;border:1px solid var(--pb-line);border-radius:11px}
.paybill-breakdown span{display:block;color:var(--pb-muted);font-size:10.5px;margin-bottom:4px}
.paybill-breakdown strong{font-size:13px}
.paybill-pay-form{margin-top:8px}
.paybill-note{text-align:center!important;color:#98a2b3!important;font-size:11px!important;line-height:1.5!important;margin-top:9px!important}
.paybill-footer{
    min-height:50px;padding:13px 24px;border-top:1px solid var(--pb-line);background:#fafbfc;
    color:#7f8898;font-size:10.5px;display:flex;justify-content:space-between;gap:14px;align-items:center;
}
@media (max-width:640px){
    .paybill-shell{align-items:flex-start;padding:14px 10px}
    .paybill-card{border-radius:17px}
    .paybill-header{padding:13px 15px;min-height:68px}
    .paybill-logo-text,.paybill-logo-image{width:39px;height:39px;flex-basis:39px;border-radius:11px}
    .paybill-brand-sub{display:none}
    .paybill-secure{font-size:10px;padding:6px 8px}
    .paybill-body{padding:23px 17px 21px}
    .paybill-title-row{gap:12px;margin-bottom:19px}
    .paybill-title-row h1{font-size:25px}
    .paybill-title-row p{font-size:13px}
    .paybill-bkash{font-size:12px;padding:8px 10px}
    .paybill-help-grid{grid-template-columns:1fr;margin-top:18px}
    .paybill-account{padding:15px}
    .paybill-amount-panel strong{font-size:33px}
    .paybill-breakdown{grid-template-columns:1fr}
    .paybill-breakdown>div{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .paybill-breakdown span{margin:0}
    .paybill-footer{padding:11px 15px;display:block;line-height:1.6}
    .paybill-footer span{display:block}
}
@media (max-width:390px){
    .paybill-secure{display:none}
    .paybill-title-row{display:block}
    .paybill-bkash{display:inline-block;margin-top:13px}
}

/* =========================================================
   PUBLIC PAY BILL — PORTAL-MATCHED PAYMENT RESULT
   ========================================================= */
.paybill-payment-card{
    border:1px solid var(--pb-line);
    border-radius:16px;
    padding:24px 14px 18px;
    background:#fff;
}
.paybill-payment-hero{text-align:center;padding:0 18px 8px}
.paybill-payment-icon{
    width:66px;height:66px;border-radius:20px;margin:0 auto 12px;
    display:grid;place-items:center;background:#e61767;color:#fff;
    box-shadow:0 8px 20px rgba(230,23,103,.18)
}
.paybill-payment-icon svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.paybill-payment-hero h2{margin:0;font-size:20px;color:#2d333a;letter-spacing:-.01em}
.paybill-payment-hero p{margin:5px 0 0;color:#7b8188;font-size:11px}
.paybill-payment-amount{font-size:30px;font-weight:900;color:#2d333a;margin:17px 0 4px;letter-spacing:-.035em}
.paybill-btn.portal-primary{
    min-height:40px;margin-top:12px;border-radius:10px;background:#4e7db3;
    box-shadow:none;display:flex;align-items:center;justify-content:center;gap:8px;
    text-decoration:none;font-size:12px;color:#fff
}
.paybill-btn.portal-primary:hover{background:#416fa5;transform:none}
.paybill-card-icon{width:14px;height:14px;display:inline-grid;place-items:center}
.paybill-card-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:640px){
    .paybill-payment-card{padding:21px 12px 16px}
    .paybill-payment-hero{padding:0 10px 7px}
    .paybill-payment-icon{width:62px;height:62px;border-radius:18px}
    .paybill-payment-icon svg{width:29px;height:29px}
    .paybill-payment-amount{font-size:29px}
}