#commitments-pane { overflow:auto; padding:22px; }
#commitments-pane.pane.on { display:block; }
.commitments-head { display:block; height:auto; min-height:0; padding:0; border:0; background:transparent; overflow:visible; margin-bottom:20px; }
.commitments-head h1 { margin:4px 0 6px; font-size:22px; }
.commitments-head p { margin:0; color:var(--muted); max-width:720px; }
.commitment-brief { display:grid; grid-template-columns:repeat(4,minmax(110px,1fr)); gap:10px; margin:0 0 16px; }
.commitment-stat { border:1px solid var(--line); border-radius:10px; background:var(--panel); padding:12px; }
.commitment-stat span { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.commitment-stat strong { display:block; margin-top:4px; font-size:22px; }
.commitment-stat.is-risk strong { color:var(--err); }
.commitment-create { display:grid; grid-template-columns:minmax(180px,2fr) minmax(130px,1fr) minmax(150px,1fr) auto; gap:10px; align-items:end; border:1px solid var(--line); border-radius:10px; padding:14px; background:var(--panel); }
.commitment-create label { display:grid; gap:5px; color:var(--muted); font-size:11px; }
.commitment-create input,.commitment-create select { width:100%; min-height:40px; }
.commitment-create .commitment-details { grid-column:1 / -1; }
.commitment-filters { display:flex; align-items:center; gap:8px; margin:16px 0 10px; flex-wrap:wrap; }
.commitment-filters button[aria-pressed="true"] { color:var(--text); border-color:var(--accent); }
#commitment-list { display:grid; gap:9px; }
.commitment-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.commitment-card.is-overdue { border-color:color-mix(in srgb,var(--err) 55%,var(--line)); }
.commitment-card h2 { margin:0 0 5px; font-size:15px; }
.commitment-card p { margin:0; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; }
.commitment-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; color:var(--muted); font-size:11px; }
.commitment-meta span { border:1px solid var(--line); border-radius:999px; padding:3px 7px; }
.commitment-actions { display:flex; gap:6px; align-items:flex-start; flex-wrap:wrap; justify-content:flex-end; }
.commitment-empty { border:1px dashed var(--line); border-radius:10px; padding:24px; color:var(--muted); text-align:center; }
#commitment-status { min-height:18px; margin:8px 0; color:var(--muted); }
@media (max-width:760px) {
  #commitments-pane { padding:14px 12px 24px; }
  .commitments-head { display:block; }
  .commitment-brief { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .commitment-create { grid-template-columns:1fr; }
  .commitment-create .commitment-details { grid-column:auto; }
  .commitment-card { grid-template-columns:1fr; }
  .commitment-actions { justify-content:flex-start; }
}