:root { --ink:#202a27; --muted:#78807b; --line:#dfe4df; --paper:#f7f8f4; --white:#fff; --deep-sage:#315d4d; --coral:#e88669; font-family:"DM Sans",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 90% 5%,#e6f0e5 0,transparent 28rem),var(--paper); }
button,input { font:inherit; } button { cursor:pointer; }
.app-shell { width:min(100% - 48px,1040px); margin:0 auto; min-height:100vh; display:flex; flex-direction:column; }
.login-shell { width:min(100% - 48px,460px); min-height:100vh; margin:0 auto; display:grid; place-items:center; }
.login-card { width:100%; background:rgba(255,255,255,.78); border:1px solid rgba(207,216,208,.85); padding:42px clamp(24px,7vw,54px) 48px; box-shadow:0 22px 65px rgba(45,74,57,.08); }
.login-card .brand { margin-bottom:72px; }.login-card h1 { font-size:clamp(48px,10vw,68px); margin-bottom:18px; }.login-copy { color:var(--muted); font-size:15px; margin-bottom:28px; }.login-form { display:grid; gap:9px; }.login-form label { color:var(--muted); font-size:12px; font-weight:700; margin-top:8px; }.login-form input { border:1px solid var(--line); background:var(--white); padding:14px 15px; color:var(--ink); outline:none; }.login-form input:focus { border-color:var(--deep-sage); box-shadow:0 0 0 3px rgba(49,93,77,.1); }.login-form .add-button { min-height:50px; justify-content:center; margin-top:17px; }.login-form .add-button span { font-size:20px; }.login-error { color:#aa4f38; background:#fcede8; border-left:3px solid var(--coral); padding:11px 13px; font-size:13px; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:28px 0; }
.brand { display:inline-flex; gap:10px; align-items:center; color:var(--ink); text-decoration:none; font:700 18px "Space Grotesk",sans-serif; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; background:var(--deep-sage); color:#fff; border-radius:9px 9px 9px 2px; }
.date-stamp { color:var(--muted); font-size:13px; display:flex; align-items:center; gap:8px; }.status-dot { width:7px; height:7px; border-radius:50%; background:var(--coral); }
.date-stamp form { display:inline; }.logout-button { color:var(--muted); border:0; background:transparent; padding:0 0 0 12px; font-size:12px; text-decoration:underline; text-underline-offset:4px; }.logout-button:hover { color:var(--coral); }
.intro { padding:clamp(54px,10vh,106px) 0 74px; max-width:720px; }.eyebrow,.section-kicker { color:var(--deep-sage); text-transform:uppercase; letter-spacing:.13em; font-size:11px; font-weight:700; margin:0 0 18px; }
h1,h2,h3,p { margin-top:0; } h1 { font:600 clamp(44px,7vw,78px)/.99 "Space Grotesk",sans-serif; letter-spacing:-.065em; margin-bottom:24px; } h1 em { color:var(--deep-sage); font-style:normal; }.intro-copy { color:var(--muted); font-size:17px; line-height:1.5; }
.workspace { background:rgba(255,255,255,.72); border:1px solid rgba(207,216,208,.85); padding:34px clamp(20px,5vw,52px) 42px; box-shadow:0 22px 65px rgba(45,74,57,.07); }
.summary-row { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:27px; }.summary-row h2 { font:600 25px "Space Grotesk",sans-serif; letter-spacing:-.04em; margin:0; }.muted { color:var(--line); padding:0 4px; }.text-button { color:var(--muted); border:0; background:transparent; padding:6px 0; font-size:12px; text-decoration:underline; text-underline-offset:4px; }.text-button:hover { color:var(--coral); }
.add-form { display:flex; gap:10px; margin-bottom:26px; }.add-form input { min-width:0; flex:1; border:1px solid var(--line); background:var(--white); padding:15px 17px; color:var(--ink); outline:none; transition:border-color .2s,box-shadow .2s; }.add-form input:focus { border-color:var(--deep-sage); box-shadow:0 0 0 3px rgba(49,93,77,.1); }.add-form input::placeholder { color:#a0a8a2; }.add-button { border:0; background:var(--coral); color:#fff; padding:0 20px; font-weight:700; font-size:13px; display:inline-flex; align-items:center; gap:9px; transition:transform .2s,background .2s; }.add-button span { font-size:22px; line-height:1; font-weight:400; }.add-button:hover { background:#d87257; transform:translateY(-2px); }
.add-form select { border:1px solid var(--line); background:var(--white); color:var(--deep-sage); padding:0 12px; font-size:12px; font-weight:700; outline:none; }.add-form input:focus,.add-form select:focus { border-color:var(--deep-sage); box-shadow:0 0 0 3px rgba(49,93,77,.1); }
.filters { display:flex; gap:7px; border-bottom:1px solid var(--line); padding-bottom:16px; }.filter-button { color:var(--muted); border:0; background:transparent; font-size:12px; padding:6px 11px; }.filter-button span { color:#adb5af; margin-left:4px; }.filter-button.active { background:#e2eee5; color:var(--deep-sage); font-weight:700; }
.task-list { display:grid; }.task-item { display:flex; align-items:center; gap:14px; min-height:65px; border-bottom:1px solid var(--line); animation:rise .3s both; }.check-button { width:21px; height:21px; flex:0 0 21px; border:1.5px solid #a9b5ad; border-radius:50%; background:transparent; color:#fff; display:grid; place-items:center; padding:0; }.check-button:hover { border-color:var(--deep-sage); }.task-item.completed .check-button { background:var(--deep-sage); border-color:var(--deep-sage); }.check-button svg { width:13px; height:13px; }.task-label { flex:1; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }.task-item.completed .task-label { color:#a0aaa3; text-decoration:line-through; }.delete-button { opacity:0; color:#adb5af; border:0; background:transparent; font-size:20px; padding:8px; line-height:1; }.task-item:hover .delete-button,.delete-button:focus { opacity:1; }.delete-button:hover { color:var(--coral); }
.task-category { width:24px; height:24px; flex:0 0 24px; display:grid; place-items:center; border-radius:7px; font-size:11px; font-weight:700; }.category-A { color:#9b4c35; background:#f8d9cf; }.category-B { color:#7c6413; background:#f8edbd; }.category-C { color:var(--deep-sage); background:#dcebe1; }
.empty-state { text-align:center; padding:58px 20px 44px; }.empty-icon { color:var(--deep-sage); background:#e2eee5; width:43px; height:43px; display:grid; place-items:center; border-radius:50%; margin:0 auto 18px; font-size:20px; }.empty-state h3 { font:600 20px "Space Grotesk",sans-serif; margin-bottom:7px; }.empty-state p { color:var(--muted); font-size:13px; margin:0; }.footer { display:flex; justify-content:space-between; gap:20px; color:#9ba49d; font-size:11px; padding:24px 0 30px; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes rise { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:560px) { .app-shell { width:min(100% - 28px,1040px); }.topbar { padding-top:20px; }.intro { padding:55px 0 54px; }.workspace { padding:25px 17px 28px; }.summary-row { align-items:start; flex-direction:column; gap:13px; }.add-form { flex-direction:column; }.add-button { min-height:48px; justify-content:center; }.delete-button { opacity:1; }.footer { flex-direction:column; gap:7px; } }