.app-dashboard { padding:clamp(.5rem,2vw,1.2rem); }
.app-dashboard > header h3 { margin:.75rem 0; }
.app-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin:1.5rem 0 1rem; }
.app-count { font-size:.8125rem; color:var(--muted); }
.app-search { flex-direction:column; gap:.4rem; max-width:420px; margin-bottom:1.25rem; }
.app-search label { color:var(--muted); font-size:.75rem; }
.app-search input { width:100%; min-width:0; min-height:44px; border:1px solid var(--muted); background:var(--ink); border-radius:10px; padding:.65rem .8rem; font-size:1rem; }
.app-workspace { display:grid; gap:1.2rem; align-items:start; }
.app-workspace.is-detail-open { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
.app-records { display:grid; gap:.75rem; }
.app-record { border:1px solid var(--line-strong); border-radius:12px; padding:1.2rem; background:var(--surface); }
.app-record-meta { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; font-size:.6875rem; color:var(--muted); margin-bottom:.65rem; }
.app-record h4 { font-size:1.1rem; }
.app-record p { font-size:.875rem; color:var(--muted); margin-top:.4rem; }
.app-record-badge { display:inline-block; font-size:.6875rem; border:1px solid var(--line-strong); color:var(--accent); padding:.2rem .5rem; border-radius:99px; margin-top:.8rem; }
.app-record[data-app-record="done"] .app-record-badge { color:var(--text); }
.app-record-actions { justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; margin-top:.85rem; }
.app-record-actions .demo-text-button { text-align:left; }
.app-empty { padding:1.2rem; border:1px dashed var(--line-strong); color:var(--muted); font-size:.875rem; }
.app-detail { margin-top:0; }
.app-detail > p { font-size:.875rem; color:var(--muted); }
.app-detail h3 { font-size:1.4rem; }
.app-checklist { display:grid; gap:.5rem; margin:1rem 0; }
.app-checklist label { display:flex; align-items:center; gap:.75rem; min-height:44px; font-size:.8125rem; cursor:pointer; }
.app-checklist input { width:20px; height:20px; flex:none; accent-color:var(--accent); }
.app-history-heading { margin-top:1.4rem; }
.app-note { margin-top:1rem; }
@container demo-screen (max-width:800px) { .app-workspace.is-detail-open { grid-template-columns:1fr; } }
@container demo-screen (max-width:560px) { .app-dashboard { padding:.6rem; } .app-record { padding:.9rem; } .app-record h4 { font-size:1rem; } }