:root{--forma-navy:#2b2d8e;--forma-red:#e8192c;--forma-bg:#fafaf8;--ok:#16a34a;--warn:#d97706;--muted:#6b7280}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Sarabun,-apple-system,Segoe UI,sans-serif;background:var(--forma-bg);color:#1f2937;-webkit-font-smoothing:antialiased}.container{max-width:1080px;margin:0 auto;padding:16px}.header{background:var(--forma-navy);color:#fff;padding:20px 16px;border-bottom:4px solid var(--forma-red)}.header h1{font-size:1.15rem;line-height:1.4}.header p{font-size:.8rem;opacity:.85;margin-top:4px}.grid{display:grid;grid-gap:12px;gap:12px;margin-top:16px}@media (min-width:720px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}}.card{background:#fff;border-radius:12px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.08);border:1px solid #eee}.card h2{font-size:.85rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}.card .big{font-size:1.8rem;font-weight:700;color:var(--forma-navy);margin-top:6px}.card .sub{font-size:.8rem;color:var(--muted);margin-top:4px}.progress-track{background:#e5e7eb;border-radius:999px;height:14px;overflow:hidden;margin-top:10px}.progress-fill{background:var(--forma-navy);height:100%;border-radius:999px;transition:width .6s ease}.milestone-mark{position:relative;height:0}.zone-row{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid #f0f0f0;gap:10px}.zone-row:last-child{border-bottom:none}.zone-code{font-weight:700;font-size:1.05rem;color:var(--forma-navy);min-width:42px}.zone-dates{font-size:.78rem;color:var(--muted)}.badge{padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:600;white-space:nowrap}.badge.pending{background:#f3f4f6;color:#6b7280}.badge.in_progress{background:#fef3c7;color:#92400e}.badge.completed{background:#dcfce7;color:#166534}.badge.hold{background:#fee2e2;color:#991b1b}.pay-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed #eee;gap:8px}.pay-row:last-child{border-bottom:none}.pay-amt{font-weight:700;white-space:nowrap}.penalty-safe{color:var(--ok);font-weight:700}.penalty-late{color:var(--forma-red);font-weight:700}button,select{font-family:inherit;font-size:.85rem;border-radius:8px;border:1px solid #d1d5db;padding:8px 12px;background:#fff;cursor:pointer}button.primary{background:var(--forma-navy);color:#fff;border:none}button.primary:disabled{opacity:.5;cursor:not-allowed}.footer{text-align:center;font-size:.72rem;color:var(--muted);padding:24px 0}.err{background:#fee2e2;color:#991b1b;border-radius:8px;padding:10px 14px;font-size:.85rem;margin-top:12px}