.payment-obligation-dashboard,.payment-obligation-page{display:grid;gap:10px}.obligation-dashboard-board,.payment-obligation-page{border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-surface);overflow:hidden}.obligation-dashboard-board>header,.payment-obligation-page>header{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--border-subtle)}.obligation-dashboard-board>header .svg-icon{color:var(--accent-primary)}.obligation-dashboard-board>header h2{font-size:11px}.obligation-dashboard-board>:not(header){margin:10px}.payment-obligation-page>header{justify-content:space-between}.payment-obligation-page>header small{color:var(--accent-primary);font-size:7px}.payment-obligation-page>header h2{font-size:15px}.payment-obligation-page>header p{margin-top:3px;color:var(--text-muted);font-size:8px}.payment-obligation-page>.obligation-board-list,.payment-obligation-page>.installment-summary{margin:10px}.payment-obligation-page>footer{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-top:1px solid var(--border-subtle);color:var(--text-muted);font-size:8px}.obligation-hero{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(220px,1.5fr);gap:8px}.obligation-hero article,.obligation-metrics article,.obligation-cashflow article{display:grid;align-content:center;min-height:72px;padding:10px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--bg-subtle)}.obligation-hero small,.obligation-metrics small,.obligation-cashflow small{color:var(--text-muted);font-size:7px}.obligation-hero strong,.obligation-metrics strong,.obligation-cashflow strong{margin-top:4px;font-size:13px}.obligation-hero .danger{border-color:color-mix(in srgb,var(--color-danger) 45%,var(--border-subtle))}.obligation-hero .ai{border-color:color-mix(in srgb,var(--accent-primary) 45%,var(--border-subtle))}.obligation-hero .ai span{margin-top:4px;color:var(--accent-primary);font-size:7px}.obligation-metrics,.obligation-cashflow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}@media(max-width:1200px){.obligation-hero{grid-template-columns:repeat(2,1fr)}.obligation-hero .ai{grid-column:1/-1}.obligation-metrics,.obligation-cashflow{grid-template-columns:repeat(3,1fr)}}@media(max-width:620px){.obligation-hero,.obligation-metrics,.obligation-cashflow{grid-template-columns:1fr}.obligation-hero .ai{grid-column:auto}.payment-obligation-page>header{align-items:flex-start;flex-direction:column}}
