.cp-wrap{max-width:900px;margin:0 auto;padding:24px 16px 100px;}
.cp-app-shell{display:flex;flex-direction:column;gap:18px;}
.cp-topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:12px 4px;}
.cp-topbar h1{margin:0;font-size:2rem;line-height:1.05;}
.cp-kicker{margin:0 0 6px;color:var(--cp-primary);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;}
.cp-userbox{background:#e8f1f8;color:var(--cp-primary-2);padding:10px 14px;border-radius:999px;font-weight:600;}
.cp-nav-tabs,.cp-bottom-nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.cp-nav-tabs a,.cp-bottom-nav a{padding:12px 14px;border-radius:14px;background:#eef3f8;color:var(--cp-muted);font-weight:600;}
.cp-nav-tabs a.is-active,.cp-bottom-nav a.is-active{background:var(--cp-primary);color:#fff;}
.cp-nav-add{margin-left:auto;}
.cp-card{background:var(--cp-card);border:1px solid var(--cp-border);border-radius:var(--cp-radius);box-shadow:var(--cp-shadow);padding:18px;}
.cp-section{display:flex;flex-direction:column;gap:12px;}
.cp-section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.cp-section-head h2,.cp-card h2,.cp-card h3{margin:0;}
.cp-grid{display:grid;gap:14px;}
.cp-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.cp-two{grid-template-columns:repeat(2,minmax(0,1fr));}
.cp-stat span{display:block;color:var(--cp-muted);margin-bottom:10px;font-size:.95rem;}
.cp-stat strong{font-size:1.9rem;}
.cp-overdue{border-left:5px solid var(--cp-danger);}
.cp-today{border-left:5px solid var(--cp-warning);}
.cp-upcoming{border-left:5px solid var(--cp-primary);}
.cp-paid{border-left:5px solid var(--cp-success);}
.cp-alert{background:#ecfdf5;border:1px solid #bbf7d0;color:#166534;padding:14px 16px;border-radius:14px;font-weight:600;}
.cp-payment-card{display:flex;flex-direction:column;gap:14px;}
.cp-payment-main,.cp-payment-meta,.cp-card-actions,.cp-history-item,.cp-detail-row,.cp-form-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.cp-payment-main h3{margin:0 0 4px;font-size:1.15rem;}
.cp-payment-main p,.cp-empty p,.cp-empty-small,.cp-note{margin:0;color:var(--cp-muted);}
.cp-status-badge{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;font-size:.85rem;font-weight:700;}
.cp-status-badge.cp-overdue{background:#fee2e2;color:#b91c1c;}
.cp-status-badge.cp-today{background:#fef3c7;color:#b45309;}
.cp-status-badge.cp-upcoming{background:#dbeafe;color:#1d4ed8;}
.cp-status-badge.cp-paid{background:#dcfce7;color:#15803d;}
.cp-link{font-weight:700;color:var(--cp-primary);}
.cp-btn{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:14px;padding:12px 16px;font-weight:700;cursor:pointer;}
.cp-btn-primary{background:var(--cp-primary);color:#fff;}
.cp-btn-secondary{background:#e2e8f0;color:var(--cp-text);}
.cp-btn-danger{background:#fee2e2;color:#b91c1c;}
.cp-form{display:flex;flex-direction:column;gap:16px;}
.cp-field{display:flex;flex-direction:column;gap:8px;}
.cp-field label{font-size:.95rem;font-weight:700;}
.cp-field input,.cp-field select,.cp-field textarea{width:100%;padding:14px 15px;border:1px solid var(--cp-border);border-radius:14px;background:#fff;font:inherit;color:inherit;}
.cp-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.cp-check,.cp-switch{display:flex;align-items:center;gap:10px;background:#f8fafc;padding:12px 14px;border-radius:14px;border:1px solid var(--cp-border);font-weight:600;}
.cp-amount-wrap{display:none;flex-direction:column;gap:16px;padding:16px;border-radius:16px;background:#f8fafc;border:1px dashed #cbd5e1;}
.cp-amount-wrap.is-visible{display:flex;}
.cp-empty{text-align:center;padding:34px 24px;display:flex;flex-direction:column;gap:12px;align-items:center;}
.cp-empty-small{text-align:center;padding:18px;}
.cp-detail-grid,.cp-history-list{display:flex;flex-direction:column;gap:12px;}
.cp-detail-row{padding:14px 0;border-bottom:1px solid var(--cp-border);}
.cp-detail-row:last-child{border-bottom:none;}
.cp-history-item{padding:14px 0;border-bottom:1px solid var(--cp-border);}
.cp-history-item:last-child{border-bottom:none;}
.cp-history-block{margin-top:18px;padding-top:6px;}
.cp-bottom-nav{position:sticky;bottom:10px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);padding:10px;border:1px solid rgba(226,232,240,.9);border-radius:20px;justify-content:space-between;box-shadow:var(--cp-shadow);}
@media (max-width:640px){
  .cp-summary-grid,.cp-two,.cp-check-grid{grid-template-columns:1fr;}
  .cp-topbar{flex-direction:column;align-items:flex-start;}
  .cp-nav-add{margin-left:0;width:100%;}
  .cp-bottom-nav{gap:8px;}
  .cp-bottom-nav a{flex:1;text-align:center;padding:10px;}
}

.cp-auth-links{margin-top:12px;text-align:center;color:var(--cp-muted);font-weight:600;}
.cp-auth-links .cp-link{color:var(--cp-primary);}
.cp-hp{display:none !important;}

.cp-brand{display:flex;align-items:center;gap:14px;}
.cp-brand img{width:58px;height:58px;border-radius:18px;box-shadow:0 10px 20px rgba(15,76,129,.18);background:#fff;object-fit:cover;}
.cp-brand h1{margin:0;font-size:2rem;line-height:1.05;}
.cp-brand p{margin:4px 0 0;color:var(--cp-muted);font-weight:500;}

.cp-auth-shell{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:18px;align-items:stretch;}
.cp-auth-hero{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;background:linear-gradient(145deg,#0f4c81,#0b395f);color:#fff;min-height:100%;}
.cp-auth-logo{width:96px;height:96px;border-radius:26px;background:rgba(255,255,255,.12);padding:8px;object-fit:cover;box-shadow:0 12px 28px rgba(0,0,0,.18);}
.cp-auth-hero h2{margin:0;font-size:1.9rem;}
.cp-auth-hero p{margin:0;color:rgba(255,255,255,.88);line-height:1.55;}
.cp-form-card{min-height:100%;}

@media (max-width:760px){
  .cp-auth-shell{grid-template-columns:1fr;}
  .cp-auth-hero{align-items:center;text-align:center;}
  .cp-brand img{width:50px;height:50px;border-radius:16px;}
}