:root { --ink:#17203a; --muted:#6f7891; --line:#e8eaf0; --paper:#fff; --bg:#f5f6fa; --navy:#364b80; --lavender:#e8ebfa; --shadow:0 14px 35px rgba(28,42,80,.08); }
* { box-sizing:border-box; } body { margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--bg); color:var(--ink); } button,input,select,textarea { font:inherit; } button { cursor:pointer; }
.app-shell { max-width:1280px; margin:auto; min-height:100vh; padding:0 32px 44px; } .topbar { height:74px; display:flex; align-items:center; justify-content:space-between; } .brand { font-size:21px; font-weight:750; letter-spacing:-.4px; display:flex; gap:9px; align-items:center; } .brand-mark { color:#e29b55; font-size:25px; } .topbar-actions{display:flex;align-items:center;gap:16px}.date-block { font-size:14px; color:var(--muted); font-weight:600; }.install-button{border:1px solid #cbd2e7;border-radius:7px;background:#fff;color:#364b80;padding:7px 10px;font-size:12px;font-weight:800}
.hero { background:linear-gradient(119deg,#263662,#405897); color:white; border-radius:20px; padding:38px 42px; display:flex; align-items:center; justify-content:space-between; gap:30px; box-shadow:var(--shadow); } .eyebrow { color:#7d88a4; font-size:10px; letter-spacing:1.45px; font-weight:800; margin:0 0 7px; } .hero .eyebrow { color:#bfc9eb; } h1 { margin:0; font-size:34px; letter-spacing:-1.25px; } h2 { font-size:20px; letter-spacing:-.55px; margin:0; } .hero-copy { margin:9px 0 0; color:#e4e9fb; font-size:15px; max-width:520px; } .primary-button,.secondary-button { border:0; border-radius:9px; padding:12px 17px; font-weight:700; white-space:nowrap; } .primary-button { background:#fff; color:#293c70; } .secondary-button { background:#eff1f7; color:#414a63; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:20px 0; } .stats article { background:var(--paper); border-radius:14px; padding:18px 21px; box-shadow:0 3px 12px rgba(25,35,67,.03); color:var(--muted); font-size:13px; font-weight:600; } .stat-number { display:block; color:var(--ink); font-size:26px; font-weight:800; letter-spacing:-1px; margin-bottom:1px; }
.category-tabs { display:flex; gap:8px; overflow:auto; padding:3px 0 20px; } .category-tabs button { border:1px solid transparent; color:#59627b; background:transparent; padding:9px 12px; border-radius:8px; font-weight:700; font-size:13px; } .category-tabs button.active { background:white; border-color:#e4e7f0; color:var(--navy); box-shadow:0 3px 10px rgba(25,35,67,.05); } .dot { display:inline-block; width:8px;height:8px;border-radius:50%; margin-right:5px; } .work{background:#5d7dc7}.ministry{background:#c87968}.personal{background:#6aa983}.school{background:#a87bbd}.church{background:#d49b47}
.content-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr); gap:20px; }.panel { background:var(--paper); border-radius:15px; box-shadow:0 3px 13px rgba(25,35,67,.04); padding:25px; }.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }.text-button { border:0; background:transparent; color:#737d99; font-size:12px; font-weight:700; padding:4px; }.task-list { display:grid; gap:8px; }.task { border:1px solid var(--line); border-radius:10px; padding:13px 12px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; transition:.15s; }.task:hover{border-color:#cdd3e2}.task.done { opacity:.52; }.task.done .task-title{text-decoration:line-through}.check { appearance:none; height:20px;width:20px;border-radius:6px;border:1.5px solid #b9c0d1; display:grid; place-items:center; }.check:checked{background:var(--navy);border-color:var(--navy)}.check:checked::after{content:'✓';color:white;font-size:13px;font-weight:900}.task-title { font-size:14px; font-weight:750; }.task-meta { display:flex;gap:8px;align-items:center;color:var(--muted);font-size:11px;margin-top:3px }.tag { padding:3px 6px;border-radius:4px;font-size:10px;font-weight:800; }.tag.work{background:#e9effd;color:#4160a4}.tag.ministry{background:#f8ebe8;color:#a2564a}.tag.personal{background:#e6f4ed;color:#397b56}.tag.school{background:#f2e9f6;color:#89569a}.tag.church{background:#fff2dc;color:#a36b1e}.priority { width:8px;height:8px;border-radius:50%;}.priority.high{background:#d86662}.priority.medium{background:#e1ab55}.priority.low{background:#83b28d}.empty-state{display:none;color:var(--muted);font-size:14px;text-align:center;padding:42px 12px;border:1px dashed #dce0e9;border-radius:10px}.right-column{display:grid;gap:20px;align-content:start}.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.day{padding:9px 2px;text-align:center;border-radius:8px;color:var(--muted);font-size:11px;font-weight:700}.day strong{display:block;font-size:14px;color:var(--ink);margin-top:5px}.day.today{background:#e8ebfa;color:var(--navy)}.day.today strong{color:var(--navy)}.day.has-task::after{content:'';display:block;width:4px;height:4px;background:#d9954e;margin:5px auto 0;border-radius:50%}.intention-panel{background:#fffdf9}.intention-panel textarea{border:0;resize:vertical;width:100%;min-height:89px;outline:0;color:var(--ink);line-height:1.5;font-size:14px}.save-note{color:#969eb0;font-size:11px}
dialog{border:0;border-radius:15px;padding:0;box-shadow:0 25px 70px rgba(10,19,47,.24);width:min(450px,calc(100% - 30px));color:var(--ink)}dialog::backdrop{background:rgba(17,25,52,.45)}dialog form{padding:26px}.dialog-heading{display:flex;justify-content:space-between;margin-bottom:22px}.icon-button{border:0;background:transparent;color:#727b90;font-size:28px;line-height:20px}.dialog-heading h2{font-size:24px}label{display:grid;gap:7px;font-size:12px;font-weight:750;color:#59627b;margin-top:15px}input,select{border:1px solid #dfe3ec;border-radius:8px;padding:10px;color:var(--ink);background:white;outline-color:#8292c5}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}.dialog-actions .primary-button{background:var(--navy);color:white}
@media(max-width:760px){.app-shell{padding:0 15px 28px}.topbar{height:62px}.hero{padding:28px 23px;display:block}.hero .primary-button{margin-top:22px}h1{font-size:29px}.stats{gap:8px}.stats article{padding:14px 12px;font-size:11px}.content-grid{grid-template-columns:1fr}.panel{padding:20px}.right-column{grid-template-columns:1fr}.week-grid{gap:9px}.category-tabs{padding-bottom:14px}.task{padding:12px 10px}}