:root{--navy:#1b2a4a;--cream:#f7f5f0;--card:#fff;--gold:#b08d57;--gold-light:#e7dac3;--green:#3f6b4f;--green-bg:#e4eee7;--red:#b4443a;--red-bg:#f7e5e3;--muted:#6b6558;--border:#e4e0d6}*{box-sizing:border-box}body{margin:0;background:var(--cream);font-family:IBM Plex Sans Thai,Noto Sans Thai,sans-serif;color:#231f18;-webkit-font-smoothing:antialiased;font-size:21px}.display{font-family:"Noto Serif Thai",serif}.page{max-width:1040px}.page,.page-narrow{margin:0 auto;padding:20px 24px 64px}.page-narrow{max-width:460px}.topbar{background:var(--navy);color:#fff;border-radius:14px;padding:18px 24px;justify-content:space-between;margin-bottom:20px}.brand,.topbar{display:flex;align-items:center}.brand{gap:14px}.seal{width:44px;height:44px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--gold);flex-shrink:0}.brand-text .t1,.seal{font-family:"Noto Serif Thai",serif;font-weight:600}.brand-text .t1{font-size:16px;line-height:1.3}.brand-text .t2{font-size:12.5px;color:#c9d0de;margin-top:2px}.topbar-right{font-size:13.5px;color:#c9d0de;text-align:right}.topbar-right .name{color:#fff;font-weight:500;font-size:14.5px}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:14px;gap:14px;margin-bottom:20px}.stat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px}button.stat-card{font-family:inherit;width:100%;transition:box-shadow .15s,border-color .15s}button.stat-card:hover{box-shadow:0 2px 8px rgba(27,42,74,.1)}.stat-label{font-size:13px;color:var(--muted);margin-bottom:8px}.stat-value{font-family:"Noto Serif Thai",serif;font-size:26px;font-weight:600;color:var(--navy)}.stat-value.red{color:var(--red)}.stat-sub{font-size:12px;color:var(--muted);margin-top:4px}.panel{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}.panel-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.panel-title{font-family:"Noto Serif Thai",serif;font-size:17px;font-weight:600;color:var(--navy)}.btn-primary{background:var(--navy);color:#fff;border:none;border-radius:8px;font-family:inherit;font-size:13.5px;padding:9px 16px;cursor:pointer}.btn-outline{color:var(--navy);font-size:13px;padding:7px 13px}.btn-ghost,.btn-outline{background:transparent;border:1px solid var(--border);border-radius:8px;font-family:inherit;cursor:pointer}.btn-ghost{color:var(--muted);font-size:13.5px;padding:10px 18px}.btn-danger{background:var(--red);font-size:13px;padding:8px 14px}.btn-danger,.btn-gold{color:#fff;border:none;border-radius:8px;font-family:inherit;cursor:pointer}.btn-gold{background:var(--gold);font-size:13.5px;padding:9px 16px}.file-input{font-size:15px;padding:8px 0;width:130px;overflow:hidden;white-space:nowrap}.file-input::-webkit-file-upload-button{font-family:inherit;font-size:14px;padding:10px 16px;border-radius:8px;border:1px solid var(--border);background:var(--navy);color:#fff;cursor:pointer;margin-right:10px}.file-input::file-selector-button{font-family:inherit;font-size:14px;padding:10px 16px;border-radius:8px;border:1px solid var(--border);background:var(--navy);color:#fff;cursor:pointer;margin-right:10px}button:disabled{opacity:.5;cursor:not-allowed}.file-label{display:inline-block;font-family:inherit;font-size:14px;padding:10px 16px;border-radius:8px;border:1px solid var(--border);background:var(--navy);color:#fff;cursor:pointer}table{width:100%;border-collapse:collapse;font-size:13.8px}thead th{text-align:left;font-weight:500;color:var(--muted);font-size:12.5px;padding:11px 20px;background:#fbfaf7}tbody td,thead th{border-bottom:1px solid var(--border)}tbody td{padding:14px 20px}tbody tr:last-child td{border-bottom:none}.case-no{font-weight:500;color:var(--navy)}.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:4px 11px;border-radius:999px;font-weight:500}.badge-green{background:var(--green-bg);color:var(--green)}.badge-red{background:var(--red-bg);color:var(--red)}.badge-gold{background:var(--gold-light);color:#8a6b3d}.dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}.greet{margin-bottom:20px}.greet .hi{font-size:14px;color:var(--muted)}.greet .case{font-family:"Noto Serif Thai",serif;font-size:22px;font-weight:600;color:var(--navy);margin-top:2px}.alert-banner{background:var(--red-bg);border:1px solid #e4c3bf;border-radius:12px;padding:14px 18px;margin-bottom:18px;display:flex;gap:12px;align-items:flex-start}.alert-banner .icon{width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;font-weight:600}.alert-banner .body b{color:var(--red)}.alert-banner .body{font-size:13.8px;line-height:1.65;color:#4a2620}.balance-card{background:var(--navy);color:#fff;border-radius:16px;padding:26px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}.balance-card .label{font-size:13.5px;color:#c9d0de;margin-bottom:8px}.balance-card .value{font-family:"Noto Serif Thai",serif;font-size:34px;font-weight:600}.installment{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--border)}.installment:last-child{border-bottom:none}.inst-dot{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}.inst-dot.done{background:var(--green-bg);color:var(--green)}.inst-dot.due{background:var(--red-bg);color:var(--red)}.inst-dot.upcoming{background:#efede6;color:var(--muted)}.inst-body{flex:1 1}.inst-title{font-size:14px;font-weight:500}.inst-sub{font-size:12.5px;color:var(--muted);margin-top:2px}.inst-amount{font-size:14px;font-weight:500;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.form-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px 24px;margin-bottom:16px}.form-section-title{font-family:"Noto Serif Thai",serif;font-size:15.5px;font-weight:600;color:var(--navy);margin-bottom:14px}.form-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:14px;gap:14px}.field{margin-bottom:14px}.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}.field input,.field select{width:100%;font-family:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:#fbfaf7;color:#231f18}.field input:focus{outline:none;border-color:var(--navy);background:#fff}.field .hint{font-size:11.5px;color:var(--muted);margin-top:5px}.inst-table{width:100%;border-collapse:collapse;margin-top:6px}.inst-table th{text-align:right;font-size:11.5px;font-weight:500;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--border)}.inst-table td{padding:7px 10px}.sum-check{display:flex;justify-content:space-between;align-items:center;background:var(--green-bg);color:var(--green);border-radius:8px;padding:10px 14px;font-size:13px;margin-top:10px;flex-wrap:wrap;gap:6px}.sum-check.mismatch{background:var(--red-bg);color:var(--red)}.form-actions{display:flex;justify-content:flex-end;gap:10px}.login-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:32px 28px;margin-top:40px}.login-title{font-family:"Noto Serif Thai",serif;font-size:19px;font-weight:600;color:var(--navy);margin-bottom:4px}.login-sub{font-size:13px;color:var(--muted);margin-bottom:22px}.error-text{color:var(--red);font-size:13px;margin-top:10px}.foot-note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:24px}@media print{.no-print{display:none!important}body{background:#fff}.page,.page-narrow{max-width:100%;padding:0}.alert-banner,.form-card{border:1px solid #ccc;page-break-inside:avoid;break-inside:avoid}}@media (max-width:640px){.page,.page-narrow{padding:12px 14px 48px}.topbar{flex-direction:column;align-items:flex-start;gap:12px;padding:16px 18px}.topbar-right{text-align:left}.stats-row{grid-template-columns:repeat(2,1fr);gap:10px}.form-grid{grid-template-columns:1fr}.balance-card{flex-direction:column;align-items:flex-start;padding:20px}.balance-card .value{font-size:28px}.installment{flex-wrap:wrap}.installment .inst-amount{margin-left:44px}.panel{overflow-x:auto}table{min-width:560px}.inst-table{min-width:460px}.installment .btn-primary,.login-box .btn-primary{width:100%}.form-actions{flex-direction:column-reverse}.form-actions button{width:100%}}