:root{--bg:#f6f7f9;--surface:#fff;--border:#d7dbe0;--border-strong:#b6bcc4;--text:#16191d;--text-dim:#5b636c;--text-faint:#868e97;--st-pending:#6b7280;--st-partial:#1d4ed8;--st-paid:#15803d;--st-note:#b45309;--st-void:#9ca3af;--danger:#b91c1c;--danger-bg:#fef2f2;--ok-bg:#f0fdf4;--warn-bg:#fffbeb;--radius:3px;--fs:1;--row-h:30px;--cell-pad-y:4px}:root[data-font=sm]{--fs:.9}:root[data-font=md]{--fs:1}:root[data-font=lg]{--fs:1.15}:root[data-font=xl]{--fs:1.32}:root[data-density=compact]{--row-h:24px;--cell-pad-y:2px}:root[data-density=normal]{--row-h:30px;--cell-pad-y:4px}:root[data-density=roomy]{--row-h:38px;--cell-pad-y:8px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-size:calc(13px * var(--fs));font-variant-numeric:tabular-nums;font-family:system-ui,Noto Sans TC,Microsoft JhengHei,sans-serif;line-height:1.45}a{color:#1d4ed8;text-decoration:none}a:hover{text-decoration:underline}h1{font-size:calc(17px * var(--fs));margin:0 0 2px}h2{font-size:calc(14px * var(--fs));margin:0 0 8px}.app{grid-template-columns:180px 1fr;min-height:100vh;display:grid}.nav{color:#e5e7eb;background:#1f2937;height:100vh;padding:12px 0;position:sticky;top:0;overflow-y:auto}.nav-brand{font-weight:600;font-size:calc(13px * var(--fs));color:#fff;border-bottom:1px solid #374151;margin-bottom:8px;padding:0 14px 12px}.nav a{color:#d1d5db;padding:6px 14px;display:block}.nav a:hover{color:#fff;background:#374151;text-decoration:none}.nav a[aria-current=page]{color:#fff;background:#111827;box-shadow:inset 3px 0 #60a5fa}.nav-foot{font-size:calc(12px * var(--fs));color:#9ca3af;border-top:1px solid #374151;margin-top:16px;padding:10px 14px 0}.main{min-width:0;padding:16px 20px 48px}.page-head{justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:12px;display:flex}.subtle{color:var(--text-dim);font-size:calc(12px * var(--fs))}.faint{color:var(--text-faint)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;padding:12px 14px}.grid-2{grid-template-columns:1fr 1fr;gap:14px;display:grid}.grid-3{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.split{grid-template-columns:1fr 300px;align-items:start;gap:14px;display:grid}table.grid{border-collapse:collapse;background:var(--surface);border:1px solid var(--border);width:100%}table.grid th,table.grid td{padding:var(--cell-pad-y) 8px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap;height:var(--row-h)}table.grid th{font-weight:600;font-size:calc(12px * var(--fs));color:var(--text-dim);border-bottom:1px solid var(--border-strong);z-index:1;background:#eef1f4;position:sticky;top:0}table.grid th .th-sub{font-weight:400;font-size:calc(11px * var(--fs));margin-top:2px;display:block}table.grid tbody tr:hover{background:#f0f6ff}table.grid td.num,table.grid th.num{text-align:right}table.grid tr.overdue td{background:var(--danger-bg)}table.grid tr.overdue:hover td{background:#fde8e8}table.grid tr.settled td{background:var(--ok-bg)}table.grid tr.settled:hover td{background:#dcfce7}table.grid tr.voided td{color:var(--text-faint)}.date-field{align-items:stretch;gap:0;display:flex;position:relative}.date-field>input[type=text]{border-top-right-radius:0;border-bottom-right-radius:0;flex:1;min-width:0}.date-field .date-pick{border:1px solid var(--border-strong);color:var(--text-dim);cursor:pointer;background:#f2f4f6;border-top-left-radius:0;border-bottom-left-radius:0;flex:none;margin-left:-1px;padding:0 7px;line-height:1}.date-field .date-pick:hover:not(:disabled){color:var(--text);background:#e6eaee}.date-field .date-pick:disabled{cursor:default;opacity:.5}.date-field .date-native{opacity:0;pointer-events:none;border:0;width:1px;height:1px;padding:0;position:absolute;bottom:0;right:0}table.grid td.note-cell{text-overflow:ellipsis;white-space:nowrap;max-width:260px;overflow:hidden}.file-list{flex-direction:column;gap:4px;margin:6px 0 0;padding:0;list-style:none;display:flex}.file-list li{border:1px solid var(--border);background:var(--surface);align-items:center;gap:8px;padding:3px 8px;display:flex}.file-list .fname{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.legend{font-size:calc(12px * var(--fs));color:var(--text-dim);align-items:center;gap:14px;margin-bottom:8px;display:flex}.legend span{align-items:center;gap:5px;display:inline-flex}.legend .sw{border:1px solid var(--border-strong);width:12px;height:12px;display:inline-block}.legend .sw.late{background:var(--danger-bg)}.legend .sw.open{background:var(--surface)}.legend .sw.done{background:var(--ok-bg)}.due-days{font-size:calc(11px * var(--fs));white-space:nowrap;margin-left:6px}.due-days.late{color:var(--danger);font-weight:600}.due-days.soon{color:var(--st-note)}.due-days.later{color:var(--text-faint)}.overview{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px;margin-bottom:14px;display:grid}.card.ov{padding:12px 14px}.ov-head{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.ov-head h2{font-size:calc(13px * var(--fs));margin:0}.ov-big{font-size:calc(26px * var(--fs));font-variant-numeric:tabular-nums;margin:2px 0 10px;font-weight:600}.ov-stats{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;display:grid}.ov-stats .stat{background:var(--surface-alt,#f7f8fa);border:1px solid var(--border);flex-direction:column;gap:1px;padding:6px 8px;display:flex}.ov-stats .stat.bad{background:var(--danger-bg);border-color:#f3c9c9}.ov-stats .stat.warn{background:#fffbeb;border-color:#f0e0b0}.ov-stats .k{font-size:calc(11px * var(--fs));color:var(--text-dim)}.ov-stats .v{font-size:calc(15px * var(--fs));font-variant-numeric:tabular-nums;font-weight:600}.ov-stats .sub{font-size:calc(11px * var(--fs));color:var(--text-faint)}.ov-bar{border:1px solid var(--border-strong);height:14px;display:flex;overflow:hidden}.ov-bar .seg{height:100%}.ov-legend{font-size:calc(11px * var(--fs));color:var(--text-dim);flex-wrap:wrap;gap:10px;margin-top:6px;display:flex}.ov-legend span{align-items:center;gap:4px;display:inline-flex}.ov-legend .seg{border:1px solid var(--border-strong);width:10px;height:10px;display:inline-block}.seg.not_due{background:#cfe3d4}.seg.d1_30{background:#fde68a}.seg.d31_60{background:#fbbf77}.seg.d61_90{background:#f08a6a}.seg.d90_plus{background:#c2413a}table.grid th a.sort,table.grid th button.sort{color:inherit;white-space:nowrap;align-items:center;gap:3px;text-decoration:none;display:inline-flex}table.grid th button.sort{font:inherit;cursor:pointer;background:0 0;border:0;padding:0}table.grid th a.sort:hover,table.grid th button.sort:hover{text-decoration:underline}table.grid th .caret{font-size:calc(9px * var(--fs));color:var(--text-faint)}table.grid th .caret.on{color:var(--accent,#1d4ed8)}table.grid th[aria-sort=ascending],table.grid th[aria-sort=descending]{background:#e3e9f0}.empty{text-align:center;color:var(--text-faint);background:var(--surface);border:1px solid var(--border);padding:24px}.badge{font-size:calc(11px * var(--fs));border:1px solid;border-radius:2px;padding:0 6px;font-weight:600;line-height:17px;display:inline-block}.badge.pending{color:var(--st-pending)}.badge.partially_paid{color:var(--st-partial)}.badge.paid{color:var(--st-paid)}.badge.settled_by_note{color:var(--st-note)}.badge.void{color:var(--st-void)}.flag{font-size:calc(11px * var(--fs));color:#92400e;background:#fef3c7;border-radius:2px;margin-left:4px;padding:0 4px;line-height:16px;display:inline-block}.flag.danger{color:var(--danger);background:#fee2e2}label{font-size:calc(12px * var(--fs));color:var(--text-dim);margin-bottom:2px;display:block}input,select,textarea,button{font:inherit;font-variant-numeric:inherit}input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{border:1px solid var(--border-strong);border-radius:var(--radius);width:100%;color:var(--text);background:#fff;padding:4px 6px}input:disabled,select:disabled,textarea:disabled{color:var(--text-faint);cursor:not-allowed;background:#eef1f4}input:focus,select:focus,textarea:focus{outline-offset:-1px;outline:2px solid #93c5fd}input.num{text-align:right}.field{margin-bottom:8px}.field-row{flex-wrap:wrap;align-items:flex-end;gap:10px;display:flex}.field-row>*{flex:none}button,.btn{border:1px solid var(--border-strong);border-radius:var(--radius);cursor:pointer;color:var(--text);background:#fff;padding:4px 12px}button:hover:not(:disabled),.btn:hover{background:#f0f2f5;text-decoration:none}button:disabled{opacity:.5;cursor:not-allowed}button.primary{color:#fff;background:#1d4ed8;border-color:#1d4ed8;font-weight:600}button.primary:hover:not(:disabled){background:#1e40af}button.danger{background:var(--danger);border-color:var(--danger);color:#fff}button.link{color:#1d4ed8;background:0 0;border:0;padding:0}button.link:hover{background:0 0;text-decoration:underline}.chips{flex-wrap:wrap;gap:6px;display:flex}.chips a{border:1px solid var(--border-strong);color:var(--text-dim);font-size:calc(12px * var(--fs));background:#fff;border-radius:11px;padding:2px 10px}.chips a[aria-current=true]{color:#fff;background:#1f2937;border-color:#1f2937}.chips button.chip{border:1px solid var(--border-strong);color:var(--text-dim);font-size:calc(12px * var(--fs));cursor:pointer;background:#fff;border-radius:11px;padding:2px 10px}.chips button.chip.on{color:#fff;background:#1f2937;border-color:#1f2937}.pager{font-size:calc(12px * var(--fs));align-items:center;gap:8px;margin-top:8px;display:flex}.msg{border-radius:var(--radius);border:1px solid;margin-bottom:8px;padding:6px 10px}.msg.error{background:var(--danger-bg);color:#7f1d1d;border-color:#fca5a5}.msg.warn{background:var(--warn-bg);color:#78350f;border-color:#fcd34d}.msg.ok{color:#14532d;background:#f0fdf4;border-color:#86efac}.stat-row{border-bottom:1px solid var(--border);flex-wrap:wrap;gap:18px;margin-bottom:12px;padding:8px 0 12px;display:flex}.stat{font-size:calc(12px * var(--fs));color:var(--text-dim)}.stat b{font-size:calc(15px * var(--fs));color:var(--text);margin-right:3px}.todo-list{margin:0;padding:0;list-style:none}.todo-list li{border-bottom:1px solid var(--border);justify-content:space-between;gap:12px;padding:5px 0;display:flex}.todo-list li:last-child{border-bottom:0}.timeline{border-left:2px solid var(--border);margin:0;padding:0 0 0 14px;list-style:none}.timeline li{padding:0 0 12px 12px;position:relative}.timeline li:before{content:"";background:var(--border-strong);border:2px solid var(--surface);border-radius:50%;width:8px;height:8px;position:absolute;top:5px;left:-19px}.timeline li.reversal:before{background:var(--danger)}.timeline .when{color:var(--text-faint);font-size:calc(11px * var(--fs))}.calc{position:sticky;top:16px}.calc dl{grid-template-columns:1fr auto;gap:3px 10px;margin:0;display:grid}.calc dt{color:var(--text-dim)}.calc dd{text-align:right;margin:0}.calc .total{border-top:1px solid var(--border-strong);margin-top:4px;padding-top:4px;font-weight:600}.login-wrap{place-items:center;min-height:100vh;display:grid}.login-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:320px;padding:22px}