:root{color-scheme:light dark;--bg:#eff5f8;--surface:#fff;--text:#202b2e;--muted:#52656b;--accent:#006e68;--line:#d7e3e6;--soft:#e5f5f1;--paid:#076d47;--paid-bg:#e6f6ee;--due:#98460b;--due-bg:#fff8e5}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,sans-serif}main{max-width:960px;margin:auto;padding:0 20px 24px;min-height:100dvh}header{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:30px 24px;margin:0 -20px 24px;border-radius:0 0 28px 28px;background:linear-gradient(110deg,#005b54,#087c89 65%,#247faa);color:#fff}header img{object-fit:contain;flex-shrink:0}header strong{font-size:23px;line-height:1.2;position:relative;z-index:1}header p{margin:3px 0 0;font-weight:600;color:#e2f4f4}.brand-mark{position:absolute;right:14px;bottom:-20px;font-size:135px;opacity:.09;transform:rotate(-15deg)}h1{font-size:25px;margin:0 0 16px;line-height:1.25}h2{font-size:18px;margin:22px 0 5px}.layout{display:grid;gap:20px}section{min-width:0;background:var(--surface);border-radius:22px;padding:22px}.hint{font-size:13px;color:var(--muted);margin:4px 0 16px}.table-wrap{overflow:auto;isolation:isolate;border-radius:10px;overscroll-behavior-x:contain}table{border-collapse:separate;border-spacing:0;width:100%;font-size:14px;font-variant-numeric:tabular-nums}th,td{padding:9px 6px;text-align:center;vertical-align:middle;min-width:116px}thead th{font-weight:750;white-space:nowrap;padding-bottom:14px}th:first-child{position:sticky;left:0;z-index:1;background:var(--surface);text-align:left;min-width:160px;max-width:180px;width:180px;box-shadow:8px 0 10px -10px #43555c}tbody th{font-weight:550}small{display:block;font-size:12px;color:var(--muted);font-weight:400;line-height:1.5;margin-top:3px}.fee{padding:12px 8px;border-radius:12px;white-space:nowrap;font-weight:650;margin:3px 0}.fee small{color:inherit}.paid{color:var(--paid)}.fee.paid{background:var(--paid-bg)}.due{color:var(--due)}.fee.due{background:var(--due-bg)}.empty{color:var(--muted)}.total{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:14px;margin-top:14px;font-size:16px}.total strong{white-space:nowrap;font-variant-numeric:tabular-nums}.older{margin-top:16px;border-top:1px solid var(--line);padding-top:12px;font-size:13px}.older summary{cursor:pointer;color:var(--due);font-weight:600}.older p{margin:12px 0}.payment{text-align:center;scroll-margin-top:16px}.payment h2{margin-top:0}.qr{display:block;width:100%;height:auto;max-width:340px;margin:auto;background:#fff;border-radius:12px}.amount{font-size:27px;font-weight:750;margin:8px 0}.content{overflow-wrap:anywhere;background:var(--bg);padding:12px;border-radius:12px}.payment p{font-size:13px}.notice{padding:14px;border-radius:12px;background:var(--soft);color:var(--text)}button{width:100%;min-height:48px;padding:12px 16px;border:0;border-radius:12px;background:var(--accent);color:#fff;font:inherit;font-weight:650;cursor:pointer}button i{margin-right:6px}button:active{transform:scale(.99)}button:disabled{opacity:.65;cursor:default}a{color:var(--accent)}a:focus-visible,button:focus-visible,summary:focus-visible,.table-wrap:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.refresh{display:inline-block;margin-top:14px;font-size:13px}nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}nav a{padding:8px;background:var(--soft);border-radius:8px}nav a[aria-current]{font-weight:750;text-decoration:underline}footer{margin:20px 4px 0;font-size:12px;color:var(--muted)}
@media(min-width:768px){header{padding:34px 32px}section{padding:28px}.payment{max-width:540px;width:100%;justify-self:center}}
@media(max-width:480px){main{padding:0 12px 20px}header{margin:0 -12px 18px;padding:24px 18px}header strong{font-size:21px}header img{width:52px;height:52px}section{padding:18px 12px;border-radius:20px}th:first-child{min-width:135px;width:135px;max-width:135px}th,td{min-width:110px;font-size:13px}.total{font-size:14px}button{font-size:14px}}
@media(prefers-color-scheme:dark){:root{--bg:#11232c;--surface:#1a303a;--text:#e8f2f5;--muted:#b5c7cf;--accent:#087f77;--line:#3b555e;--soft:#23473f;--paid:#a0e7c6;--paid-bg:#204638;--due:#ffcc95;--due-bg:#4b3723}a{color:#8de0d5}}