@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root { --ink:#202d2b; --muted:#71807c; --line:#dfe2dc; --paper:#f4f0e8; --panel:#fbfaf6; --mint:#a8d2bd; --mint-dark:#376250; --coral:#ed8d70; --yellow:#f3c874; --blue:#9abbd5; --shadow:0 20px 50px rgba(40,55,48,.08); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans', sans-serif; font-size:15px; }
button, input, select { font:inherit; }
button { cursor:pointer; }
.app-shell { display:flex; min-height:100vh; background:linear-gradient(120deg, #f4f0e8 0%, #f7f5ee 55%, #e6f0e8 100%); }
.sidebar { width:260px; border-right:1px solid rgba(32,45,43,.1); padding:31px 24px 25px; display:flex; flex-direction:column; flex-shrink:0; }
.brand, .mobile-brand { color:var(--ink); display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; letter-spacing:-.03em; font-size:19px; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--ink); color:#e5f1e8; font-size:20px; font-weight:400; }
.sidebar-kicker { color:var(--muted); line-height:1.5; margin:68px 0 39px; font-size:13px; }
.nav { display:grid; gap:7px; }
.nav-item { color:var(--muted); background:transparent; border:0; border-radius:7px; display:flex; align-items:center; text-align:left; gap:12px; padding:11px 10px; font-size:14px; }
.nav-item:hover { color:var(--ink); background:rgba(255,255,255,.48); }.nav-item.is-active { color:var(--ink); background:#e4ede5; font-weight:600; }.nav-icon { width:18px; font-size:18px; text-align:center; }.nav-count { margin-left:auto; color:#8a9892; font-family:'Space Mono', monospace; font-size:11px; }
.sidebar-bottom { margin-top:auto; }.privacy-note { display:flex; gap:10px; border-top:1px solid var(--line); padding-top:19px; }.privacy-note strong { font-size:12px; font-weight:600; }.privacy-note p { margin:3px 0 0; color:var(--muted); font-size:11px; line-height:1.4; }.lock-icon { color:var(--mint-dark); font-size:20px; }.sidebar-actions { display:flex; gap:20px; margin:24px 0 34px; }.text-button { padding:0; border:0; background:transparent; color:var(--muted); font-size:12px; text-decoration:underline; text-underline-offset:3px; }.text-button:hover { color:var(--ink); }.version { color:#a4ada5; font:10px 'Space Mono', monospace; letter-spacing:.08em; }
.main-content { flex:1; max-width:1240px; margin:0 auto; padding:0 7.5%; }.topbar { height:91px; display:flex; align-items:center; justify-content:flex-end; }.mobile-brand { display:none; }.topbar-meta { color:var(--muted); display:flex; align-items:center; gap:9px; font:11px 'Space Mono', monospace; }.pulse { display:block; width:6px; height:6px; border-radius:50%; background:#64ae7f; box-shadow:0 0 0 4px rgba(100,174,127,.14); }.divider { width:1px; height:14px; margin:0 4px; background:var(--line); }
.hero { display:flex; align-items:end; justify-content:space-between; padding:62px 0 73px; max-width:980px; }.eyebrow { color:var(--mint-dark); font:11px 'Space Mono', monospace; letter-spacing:.1em; margin:0 0 17px; text-transform:uppercase; }.hero h1 { font-size:clamp(48px, 6vw, 75px); line-height:.94; letter-spacing:-.065em; margin:0; font-weight:500; }.hero h1 em { color:var(--mint-dark); font-family:Georgia, serif; font-weight:400; }.hero-copy { width:285px; color:var(--muted); line-height:1.55; padding-bottom:3px; }.hero-copy p { margin:0 0 22px; }.primary-button { align-items:center; background:var(--ink); border:0; border-radius:5px; color:#fff; display:inline-flex; gap:9px; padding:12px 16px; font-weight:600; font-size:13px; transition:transform .2s, background .2s; }.primary-button:hover { background:#304641; transform:translateY(-2px); }.primary-button span { font-size:20px; font-weight:400; line-height:12px; }
.board-section { position:relative; max-width:980px; padding-bottom:40px; }.section-heading { display:flex; align-items:end; justify-content:space-between; padding-bottom:20px; }.section-heading h2 { font-size:21px; letter-spacing:-.04em; margin:0 0 4px; }.section-heading p { color:var(--muted); margin:0; font-size:12px; }.board-tools { display:flex; gap:9px; }.search-box, .filter-button { background:rgba(255,255,255,.54); border:1px solid var(--line); border-radius:5px; color:var(--muted); display:flex; align-items:center; }.search-box { padding:0 10px; gap:6px; width:205px; }.search-box span { font-size:21px; }.search-box input { background:transparent; border:0; outline:0; width:100%; color:var(--ink); font-size:12px; }.filter-button { gap:8px; padding:8px 11px; font-size:12px; }.filter-button #filter-label { color:var(--ink); }.filter-menu { position:absolute; right:0; top:57px; z-index:2; padding:6px; border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); background:var(--panel); }.filter-menu button { display:block; width:130px; border:0; background:transparent; text-align:left; padding:8px 10px; color:var(--muted); font-size:12px; border-radius:4px; }.filter-menu button:hover, .filter-menu button.is-selected { background:#e7f0e8; color:var(--ink); }.list-header, .follow-up { display:grid; grid-template-columns:minmax(220px, 1.8fr) minmax(130px, .85fr) minmax(100px, .7fr) 30px; gap:22px; align-items:center; }.list-header { border-top:1px solid var(--ink); color:#8e9992; font:10px 'Space Mono', monospace; padding:13px 17px 9px; }.follow-up { min-height:78px; padding:13px 17px; border-top:1px solid var(--line); transition:background .2s; }.follow-up:hover { background:rgba(255,255,255,.47); }.follow-up-main { min-width:0; display:flex; align-items:center; gap:12px; }.category-dot { width:9px; height:9px; flex-shrink:0; border-radius:50%; }.category-dot.people { background:var(--coral); }.category-dot.work { background:var(--blue); }.category-dot.life { background:var(--yellow); }.follow-up-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:600; }.follow-up-person { color:var(--muted); font-size:11px; margin-top:3px; }.follow-up-date { color:var(--muted); font:11px 'Space Mono', monospace; }.follow-up-date.is-overdue { color:#b75740; }.date-note { color:#b75740; font:10px 'DM Sans', sans-serif; margin-left:4px; }.status-pill { width:max-content; border-radius:20px; padding:5px 9px; font-size:11px; background:#e9ece5; color:#637068; }.status-pill.today { color:#9c513c; background:#f8ded2; }.status-pill.soon { color:#78602d; background:#f8ebc9; }.row-actions { position:relative; }.more-button { border:0; border-radius:50%; background:transparent; color:var(--muted); font-size:18px; width:26px; height:26px; }.more-button:hover { background:#e2e8e0; color:var(--ink); }.row-menu { position:absolute; right:0; top:30px; z-index:3; background:var(--panel); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); padding:5px; width:130px; }.row-menu button { width:100%; padding:8px; background:transparent; border:0; text-align:left; font-size:12px; color:var(--muted); border-radius:4px; }.row-menu button:hover { background:#e7f0e8; color:var(--ink); }.row-menu button.delete:hover { color:#b75740; background:#f8ded2; }
.empty-state { border-top:1px solid var(--line); text-align:center; padding:60px 20px; }.empty-icon { display:grid; place-items:center; margin:auto; width:45px; height:45px; border-radius:50%; background:#e4ede5; color:var(--mint-dark); font-size:25px; }.empty-state h3 { margin:17px 0 7px; font-size:17px; }.empty-state p { margin:0 auto 19px; color:var(--muted); font-size:13px; }.secondary-button { border:1px solid #bdc8c0; background:transparent; color:var(--ink); border-radius:5px; padding:10px 14px; font-size:12px; }.secondary-button:hover { background:#e7f0e8; }.main-footer { border-top:1px solid var(--line); color:#98a19b; display:flex; justify-content:space-between; font:10px 'Space Mono', monospace; padding:22px 0; }.main-footer kbd { border:1px solid #cdd4cd; border-radius:3px; padding:2px 4px; font:10px 'Space Mono', monospace; color:var(--muted); }
.modal { border:0; border-radius:8px; box-shadow:0 24px 70px rgba(32,45,43,.2); color:var(--ink); padding:0; width:min(530px, calc(100% - 32px)); background:var(--panel); }.modal::backdrop { background:rgba(32,45,43,.35); backdrop-filter:blur(3px); }.modal form { padding:30px; }.modal-header { display:flex; justify-content:space-between; align-items:start; margin-bottom:27px; }.modal-header h2 { margin:0; font-size:25px; letter-spacing:-.04em; }.close-button { border:0; background:transparent; color:var(--muted); font-size:27px; line-height:1; }.field-label { display:block; color:var(--muted); font-size:11px; margin-bottom:18px; }.field-label span { color:#9da69f; }.field-label input, .field-label select { display:block; width:100%; border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--ink); padding:11px 12px; margin-top:7px; outline-color:var(--mint-dark); font-size:13px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.modal-actions { display:flex; justify-content:flex-end; gap:10px; border-top:1px solid var(--line); padding-top:20px; margin-top:4px; }.toast { position:fixed; bottom:23px; left:50%; transform:translate(-50%, 20px); opacity:0; pointer-events:none; border-radius:4px; background:var(--ink); color:white; padding:11px 16px; font-size:12px; transition:all .25s; }.toast.is-visible { opacity:1; transform:translate(-50%,0); }
@media (max-width:760px) { .app-shell { display:block; }.sidebar { width:auto; height:auto; padding:18px 20px 0; border:0; }.brand, .sidebar-kicker, .sidebar-bottom { display:none; }.nav { display:flex; overflow:auto; gap:4px; padding:22px 0 12px; border-bottom:1px solid var(--line); }.nav-item { flex-shrink:0; padding:8px 10px; }.nav-icon { display:none; }.main-content { padding:0 20px; }.topbar { height:57px; justify-content:space-between; }.mobile-brand { display:flex; font-size:16px; }.mobile-brand .brand-mark { width:25px; height:25px; font-size:17px; }.topbar-meta { font-size:9px; }.topbar-meta .divider, .topbar-meta .pulse { display:none; }.hero { display:block; padding:38px 0 48px; }.hero h1 { font-size:56px; }.hero-copy { width:auto; padding-top:28px; }.hero-copy p { max-width:370px; }.section-heading { display:block; }.board-tools { margin-top:17px; }.search-box { flex:1; width:auto; }.list-header { display:none; }.follow-up { grid-template-columns:minmax(0, 1fr) auto 24px; gap:10px; padding:17px 4px; }.follow-up-date { grid-column:2; grid-row:1; }.status-pill { grid-column:1; grid-row:2; margin-left:21px; }.row-actions { grid-column:3; grid-row:1 / span 2; }.follow-up-title { font-size:13px; }.follow-up-person { font-size:10px; }.main-footer { display:block; line-height:2; }.main-footer span { display:block; }.form-grid { grid-template-columns:1fr; gap:0; }.modal form { padding:23px; } }

.clear-search { flex-shrink:0; }
.follow-up-note { color:#9aa39d; }
.confirm-content { padding:30px; }
.confirm-content h2 { margin:0 0 9px; font-size:25px; letter-spacing:-.04em; }
.confirm-content > p:not(.eyebrow) { color:var(--muted); font-size:13px; line-height:1.5; margin:0; max-width:340px; }
.danger-button { border:1px solid #c96f58; border-radius:5px; background:#b95f49; color:#fff; padding:10px 14px; font-size:12px; font-weight:600; }
.danger-button:hover { background:#9f4d3b; }