:root{
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --bg-primary:#f8f9ff;
  --bg-card:#ffffff;
  --text-primary:#1e293b;
  --text-secondary:#64748b;
  --border-color:#e2e8f0;
  --success:#10b981;
  --danger:#ef4444;
  --warning:#f59e0b;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:22px;
  --shadow-md: 0 6px 20px rgba(0,0,0,.08);
  --shadow-lg: 0 15px 40px rgba(0,0,0,.15);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;}
a{color:inherit;}

.p-hero{background:var(--primary-gradient);color:#fff;padding:22px 18px 55px;text-align:center;position:relative;}
.p-hero h1{font-size:19px;margin-top:8px;}

.p-wrap{max-width:520px;margin:16px auto 40px;padding:0 16px;position:relative;z-index:1;}

.p-card{background:var(--bg-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:22px;margin-bottom:16px;}
.p-card h2{font-size:16px;margin-bottom:10px;}

.p-search{display:flex;gap:8px;}
.p-search input{flex:1;padding:13px 14px;border-radius:12px;border:1px solid #d1d5db;font-size:15px;}
.p-search button{padding:0 18px;border:none;border-radius:12px;background:var(--primary-gradient);color:#fff;font-size:16px;cursor:pointer;}

.p-profile-top{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.p-avatar{width:56px;height:56px;border-radius:50%;background:var(--primary-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;flex-shrink:0;}
.p-profile-text{min-width:0;flex:1;}
.p-name{font-size:17px;font-weight:700;overflow-wrap:anywhere;word-break:break-word;}
.p-sub{font-size:13px;color:var(--text-secondary);overflow-wrap:anywhere;word-break:break-word;}

.p-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border-color);font-size:14px;}
.p-row:last-child{border-bottom:none;}
.p-row .label{color:var(--text-secondary);}

.p-due-total{text-align:center;padding:14px;border-radius:var(--radius-md);background:#fef2f2;color:#b91c1c;font-size:22px;font-weight:800;margin:10px 0;}
.p-due-total.zero{background:#ecfdf5;color:#047857;}

.p-list-item{list-style:none;padding:12px;border:1px solid var(--border-color);border-radius:var(--radius-md);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;}
.p-list-item a{display:block;width:100%;}

.p-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.p-badge.paid{background:#d1fae5;color:#047857;}
.p-badge.partial{background:#fef3c7;color:#92400e;}
.p-badge.pending{background:#fee2e2;color:#b91c1c;}

.p-method{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border-color);border-radius:var(--radius-md);margin-bottom:10px;}
.p-method .icon{width:42px;height:42px;border-radius:10px;background:var(--primary-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.p-method .num{font-size:16px;font-weight:700;letter-spacing:0.5px;}
.p-method .lbl{font-size:12px;color:var(--text-secondary);}
.p-method .copy{margin-left:auto;background:#eef2ff;color:#4338ca;border:none;border-radius:8px;padding:8px 12px;font-size:12px;cursor:pointer;}

.p-btn{display:inline-block;width:100%;text-align:center;padding:13px;border-radius:12px;border:none;background:var(--primary-gradient);color:#fff;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;}
.p-btn.ghost{background:#eef2ff;color:#4338ca;}
.p-btn.outline{background:#fff;color:var(--text-primary);border:1px solid var(--border-color);}

.p-alert{padding:12px;border-radius:10px;font-size:13px;margin-bottom:14px;}
.p-alert.error{background:#fee2e2;color:#991b1b;}
.p-alert.success{background:#d1fae5;color:#047857;}
.p-alert.info{background:#eff6ff;color:#1e40af;}

.p-status-pill{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;background:#f1f5f9;font-size:13px;margin-top:12px;}
.p-spin{width:14px;height:14px;border:2px solid #cbd5e1;border-top-color:#667eea;border-radius:50%;animation:p-spin 0.8s linear infinite;}
@keyframes p-spin{to{transform:rotate(360deg);}}

.p-hint{font-size:12px;color:var(--text-secondary);margin-top:8px;text-align:center;}

@media (max-width:400px){
  .p-hero h1{font-size:17px;}
  .p-card{padding:16px;}
  .p-profile-top{gap:10px;}
  .p-avatar{width:44px;height:44px;font-size:18px;}
  .p-name{font-size:15px;}
}