.installment-section,.installment-list{display:grid;gap:10px;min-width:0}
.installment-card{display:grid;gap:12px;min-width:0;padding:15px;border:1px solid #cbd5e1;border-radius:16px;background:#fff;box-shadow:0 8px 22px #0f172a12}
.installment-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0}
.installment-card-head h3{min-width:0;overflow-wrap:anywhere;color:#0f172a}
.installment-card-head .person-tag{flex:none;white-space:normal;text-align:center}
.installment-card-amount{display:flex;align-items:baseline;gap:5px;color:#0f766e}
.installment-card-amount strong{font-size:clamp(1.5rem,6vw,2rem);line-height:1.2;overflow-wrap:anywhere}
.installment-card-amount span,.installment-next,.installment-finish{font-size:.78rem;color:#64748b}
.installment-current{justify-self:start;padding:4px 8px;border-radius:99px;background:#fff7ed;color:#9a3412;font-size:.72rem;font-weight:700}
.installment-current.is-paid{background:#ecfdf5;color:#047857}
.installment-progress-label{display:flex;justify-content:space-between;gap:8px;color:#334155;font-size:.78rem;font-weight:700}
.installment-progress-label b{color:#0f766e}
.installment-progress-track{height:12px;overflow:hidden;border-radius:99px;background:#e2e8f0}
.installment-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#14b8a6,#10b981);transition:width .25s ease}
.installment-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.installment-stats>div{min-width:0;padding:10px;border-radius:10px;background:#ecfdf5}
.installment-stats>div+div{background:#fff7ed}
.installment-stats span{display:block;color:#475569;font-size:.72rem}
.installment-stats strong{display:block;margin-top:4px;color:#047857;font-size:1rem;overflow-wrap:anywhere}
.installment-stats>div+div strong{color:#b45309}
.installment-finish{padding-top:10px;border-top:1px solid #e2e8f0}
.installment-card-actions{display:flex;flex-wrap:wrap;gap:8px}
.installment-card-actions .btn{flex:1 1 auto;min-height:44px}
.installment-card-actions .installment-pay{background:#0f766e}
.installment-complete{display:flex;align-items:center;min-height:44px;color:#047857;font-weight:700}
.installment-inline{color:#0f766e;font-weight:700}
.installment-toggle{display:flex!important;align-items:center;gap:10px;min-height:44px}
.installment-toggle input{flex:none;width:22px!important;min-height:22px!important;accent-color:#0f766e}
@media(max-width:420px){.installment-card{padding:12px}.installment-card-head{flex-wrap:wrap}.installment-stats strong{font-size:.9rem}.installment-card-actions{flex-direction:column}.installment-card-actions .btn{width:100%}}

/* The list is a glanceable contract index; detailed milestones live in the sheet. */
.installment-card.compact,.obligation-card.compact{display:flex;align-items:center;gap:8px;min-height:65px;padding:8px 10px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}
.obligation-card.compact.is-pending{border-color:#fcd34d}
.installment-open,.obligation-open{display:flex;align-items:center;gap:9px;flex:1;min-width:0;min-height:48px;padding:0;border:0;background:transparent;text-align:left;color:inherit}
.installment-open .feed-icon,.obligation-open .feed-icon{flex:none;width:34px;height:34px;font-size:16px}
.installment-brief,.obligation-open .obligation-copy{display:grid;gap:4px;flex:1;min-width:0}
.installment-brief>strong,.obligation-open .obligation-copy>strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#1e293b;font-size:14px}
.installment-brief small,.obligation-open .obligation-copy small{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#475569;font-size:12px}
.installment-card.compact>.settle-check-btn,.obligation-card.compact>.settle-check-btn,.compact-paid{display:grid;place-items:center;flex:none;width:44px;height:44px;min-height:44px;padding:0;border:2px solid #cbd5e1;border-radius:10px;background:#fff;color:#94a3b8;font-size:23px}
.obligation-card.compact>.settle-check-btn.checked,.compact-paid{border-color:#10b981;background:#10b981;color:#fff}
.obligation-card.compact>.settle-check-btn.locked{opacity:.4}
.contract-management{padding:12px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}
.contract-management>summary{min-height:44px;display:flex;align-items:center;font-size:12px;font-weight:700;cursor:pointer;color:#0f766e}
.contract-management .commitment-list{margin-top:10px}
.annual-settlement{display:flex;flex-wrap:wrap;gap:7px 14px;margin:12px 0;color:#e2e8f0;font-size:12px}
.annual-settlement span{white-space:nowrap}
.history-note{font-size:11px;color:#64748b;line-height:1.45}
.feed-card>div:nth-child(2) small{white-space:normal;overflow-wrap:anywhere}

#obligation-detail-sheet{position:fixed;inset:auto 0 0;width:min(100%,414px);max-width:414px;max-height:88dvh;margin:0 auto;padding:17px 16px calc(20px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;border:0;border-radius:24px 24px 0 0;background:#fff;color:#1e293b;box-shadow:0 -18px 50px #0f172a44}
#obligation-detail-sheet::backdrop{background:#0f172a9c;backdrop-filter:blur(3px)}
#obligation-detail-sheet::before{display:none}
.animate-slide-up{animation:detail-slide-up .25s ease-out}
@keyframes detail-slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.detail-grip{width:48px;height:5px;margin:0 auto 14px;border-radius:99px;background:#cbd5e1}
.detail-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.detail-head>div{min-width:0}
.detail-head h2{margin:7px 0 2px;font-size:17px;overflow-wrap:anywhere}
.detail-amount,.detail-progress,.detail-finish,.detail-history{margin-top:13px;padding:12px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc}
.detail-amount small{margin:0}.detail-amount strong{display:block;color:#0f766e;font-size:1.6rem;overflow-wrap:anywhere}
.detail-progress{background:#fff}.detail-progress b{font-size:12px;color:#047857}
.milestone-dots{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;max-height:130px;overflow-y:auto}
.milestone-dot{display:grid;place-items:center;min-width:40px;min-height:34px;padding:4px;border-radius:8px;background:#f1f5f9;color:#64748b;font-size:11px;font-weight:700}
.milestone-dot.paid{background:#d1fae5;color:#047857}
.detail-finish{background:#fffbeb;border-color:#fde68a;color:#78350f;font-size:12px}
.detail-history{background:#fff}.detail-history h3{font-size:12px}.detail-history ul{max-height:160px;overflow-y:auto;margin:8px 0 0;padding:0;list-style:none}
.detail-history li{display:flex;justify-content:space-between;gap:9px;padding:7px 0;border-top:1px solid #f1f5f9;color:#475569;font-size:11px}.detail-history li strong{flex:none;color:#0f172a}
#obligation-detail-sheet>.btn{margin-top:14px}
.toast-notification.with-undo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.toast-undo{min-width:90px;min-height:44px;padding:7px 9px;border:1px solid #fcd34d77;border-radius:10px;background:#1e293b;color:#fcd34d;font-size:11px;font-weight:800}
@media(max-width:428px){.bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr));max-width:100vw}.bottom-nav a{min-width:0}.bottom-nav small{max-width:100%;overflow:hidden;text-overflow:ellipsis}}