body { margin: 0; background: var(--surface-100); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 20px; }
.ld-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-4); }
.ld-stack { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); max-width: 420px; }
:where(.ld-btn, .ld-lead, .ld-task-check):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Button */
.ld-btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; font: 600 14px/20px var(--font-sans); cursor: pointer; transition: background-color .2s, box-shadow .2s, transform .2s; }
.ld-btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-1); }
.ld-btn-primary:hover { background: var(--brand-hover); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.ld-btn-secondary { background: var(--surface-000); color: var(--ink); border-color: var(--line-strong); }
.ld-btn-secondary:hover { background: var(--surface-200); }
.ld-btn-ghost { background: transparent; color: var(--ink); }
.ld-btn-ghost:hover { background: var(--surface-200); }
.ld-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Badge */
.ld-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-pill); font: 700 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.ld-badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ld-badge-new { color: var(--brand-text); background: var(--brand-tint); }
.ld-badge-contacted { color: var(--info); background: var(--info-tint); }
.ld-badge-quoted { color: var(--warning); background: var(--warning-tint); }
.ld-badge-won { color: var(--success); background: var(--success-tint); }
.ld-badge-lost { color: var(--ink-muted); background: var(--neutral-tint); }
.ld-badge-panepal { color: var(--panepal); background: var(--panepal-tint); }
.ld-badge-hlc { color: var(--hlc); background: var(--hlc-tint); }
.ld-badge-source { color: var(--ink-muted); background: transparent; border: 1px solid var(--line); }

/* LeadRow */
.ld-lead { display: grid; grid-template-columns: 12px 1fr auto; gap: var(--space-1) var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface-000); border: 0; border-bottom: 1px solid var(--line); width: 100%; text-align: left; color: var(--ink); font: inherit; cursor: pointer; }
.ld-lead:hover { background: var(--surface-200); }
.ld-lead[aria-current="true"] { background: var(--surface-200); }
.ld-lead-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; }
.ld-lead-unread .ld-lead-dot { background: var(--brand); }
.ld-lead-name { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-lead-unread .ld-lead-name { font-weight: 600; }
.ld-lead-time { font-size: 12px; line-height: 16px; color: var(--ink-muted); text-align: right; white-space: nowrap; }
.ld-lead-late { color: var(--danger); font-weight: 600; }
.ld-lead-preview { grid-column: 2 / 4; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-lead-tags { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ld-hot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bulb); box-shadow: 0 0 0 2px var(--surface-000), 0 0 0 3px var(--warning); margin-left: var(--space-1); vertical-align: middle; }

/* Timeline */
.ld-timeline { list-style: none; margin: 0; padding: var(--space-4); max-width: 520px; }
.ld-tl-item { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); padding-bottom: var(--space-4); }
.ld-tl-item:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: var(--line); }
.ld-tl-icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-200); color: var(--ink-muted); }
.ld-tl-icon svg { width: 14px; height: 14px; }
.ld-tl-missed .ld-tl-icon { background: var(--danger-tint); color: var(--danger); }
.ld-tl-jobber .ld-tl-icon { background: var(--success-tint); color: var(--success); }
.ld-tl-head { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.ld-tl-title { font-weight: 600; }
.ld-tl-meta { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.ld-tl-body { margin-top: var(--space-1); padding: var(--space-2) var(--space-3); background: var(--surface-000); border: 1px solid var(--line); border-radius: var(--radius-md); }

/* TaskCard */
.ld-task { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-000); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.ld-task-check { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--success); }
.ld-task-title { font-weight: 600; }
.ld-task-done .ld-task-title { text-decoration: line-through; color: var(--ink-muted); font-weight: 400; }
.ld-task-meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.ld-task-due-today { color: var(--warning); background: var(--warning-tint); padding: 0 var(--space-2); border-radius: var(--radius-pill); font-weight: 600; }
.ld-task-due-late { color: var(--danger); background: var(--danger-tint); padding: 0 var(--space-2); border-radius: var(--radius-pill); font-weight: 600; }
.ld-avatar { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--surface-300); color: var(--ink); font: 700 10px/1 var(--font-sans); }