:root { --bg:#f7fbff; --card:#fff; --primary:#0b63e6; --muted:#6b7280;}
.payppo-wrap{max-width:920px;margin:0 auto;padding:24px;background:var(--bg);color:#0f172a;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.payppo-card{background:var(--card);border-radius:16px;box-shadow:0 6px 24px rgba(2,6,23,.06);padding:20px}
h2{margin:0 0 12px 0}
.payppo-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{font-size:14px;color:#111827}
input, select{width:100%;padding:12px;border:1px solid #e5e7eb;border-radius:10px;font-size:16px}
.payppo-row{display:flex;gap:12px;align-items:end}
.payppo-btn{background:var(--primary);color:#fff;border:0;border-radius:12px;padding:12px 16px;font-weight:600;cursor:pointer}
.payppo-muted{color:var(--muted);font-size:13px}
.payppo-results{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.payppo-kpi{background:#f9fafb;border:1px solid #eef2f7;border-radius:12px;padding:12px}
.payppo-kpi div:first-child{font-size:12px;color:#64748b}
.payppo-kpi div:last-child{font-size:20px;font-weight:700;margin-top:6px}
details{margin-top:16px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px;border-bottom:1px solid #eef2f7;text-align:right}
th:first-child, td:first-child {text-align:left}
.payppo-error{color:#b91c1c;font-size:14px;margin-top:6px}
@media (max-width:800px){
  .payppo-grid{grid-template-columns:1fr}
  .payppo-results{grid-template-columns:1fr 1fr}
}