:root { --ink:#24213a; --muted:#76728e; --line:#e9e6f1; --paper:#fff; --canvas:#f8f7fc; --purple:#705bf6; --purple-dark:#5542d5; --lilac:#ece8ff; --mint:#e3f8ee; --yellow:#fff5ce; --pink:#fde8f0; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--canvas); font:15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button,input,select { font:inherit; } button { cursor:pointer; } .app-shell { max-width:1280px; padding:0 28px 48px; margin:auto; }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; }.brand { display:flex; gap:9px; align-items:center; color:var(--ink); text-decoration:none; font-size:22px; font-weight:800; letter-spacing:-.7px; }.brand-mark { display:grid; place-items:center; width:30px; height:30px; color:white; background:var(--purple); border-radius:10px; font-size:17px; }.status { display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border-radius:99px; background:#f0eff5; color:var(--muted); font-size:12px; font-weight:700; }.status-dot { width:7px; height:7px; border-radius:50%; background:#a7a3b6; }.status.ready { background:var(--mint); color:#26734e; }.status.ready .status-dot { background:#34b676; }
.hero { display:flex; justify-content:space-between; gap:30px; align-items:end; padding:49px 0 38px; }.eyebrow { margin:0 0 8px; color:var(--purple); font-size:11px; font-weight:800; letter-spacing:1.2px; }.hero h1 { max-width:700px; margin:0; font-size:clamp(34px,5vw,58px); line-height:1.04; letter-spacing:-2.8px; }.hero em { color:var(--purple); font-style:normal; }.hero-copy { max-width:570px; margin:17px 0 0; color:var(--muted); font-size:17px; }.primary-button { border:0; border-radius:12px; padding:13px 18px; color:#fff; background:var(--purple); box-shadow:0 8px 20px #705bf633; font-weight:750; transition:.2s ease; white-space:nowrap; }.primary-button:hover { background:var(--purple-dark); transform:translateY(-1px); }.plan-button { margin-bottom:4px; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.stat-card { min-height:151px; padding:17px 18px; border:1px solid var(--line); border-radius:18px; background:var(--paper); }.stat-icon { float:right; display:grid; place-items:center; width:31px; height:31px; border-radius:9px; font-size:17px; }.accent-lilac .stat-icon { background:var(--lilac); color:var(--purple); }.accent-mint .stat-icon { background:var(--mint); color:#299361; }.accent-yellow .stat-icon { background:var(--yellow); color:#a57e00; }.accent-pink .stat-icon { background:var(--pink); color:#cc5781; }.stat-card p { margin:3px 0 9px; color:var(--muted); font-size:13px; font-weight:600; }.stat-card strong { display:block; margin-bottom:4px; font-size:29px; letter-spacing:-1px; }.stat-card small { color:var(--muted); font-size:12px; }.mini-progress { height:6px; margin:7px 0 5px; overflow:hidden; background:#eeeaf6; border-radius:10px; }.mini-progress span { display:block; height:100%; width:0; background:#dc5d8a; border-radius:inherit; transition:width .3s; }
.content-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,.8fr); align-items:start; gap:18px; margin-top:25px; }.panel { border:1px solid var(--line); border-radius:18px; background:var(--paper); }.task-panel { min-height:410px; padding:24px; }.panel-heading { display:flex; justify-content:space-between; align-items:start; margin-bottom:20px; }.panel-heading h2 { margin:0; font-size:21px; letter-spacing:-.7px; }.task-total { padding:5px 9px; border-radius:8px; background:#f3f1f8; color:var(--muted); font-size:12px; font-weight:700; }.task-list { display:grid; gap:9px; }.task-item { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid #eeeaf4; border-radius:13px; transition:.2s; }.task-item:hover { border-color:#dcd5ff; background:#fcfbff; }.check-button { flex:0 0 22px; width:22px; height:22px; border:2px solid #cfcadc; border-radius:50%; background:white; }.check-button:hover { border-color:var(--purple); }.task-item.completed { opacity:.55; background:#fbfafa; }.task-item.completed .check-button { border-color:#48af79; background:#48af79; }.task-item.completed .check-button::after { content:'✓'; color:white; font-size:13px; }.task-item.completed h3 { text-decoration:line-through; }.task-main { min-width:0; flex:1; }.task-main h3 { margin:0 0 5px; overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }.task-meta { display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:12px; }.task-meta span + span::before { content:'·'; margin-right:8px; color:#bdb8ca; }.priority { padding:5px 8px; border-radius:7px; font-size:11px; font-weight:800; }.priority.high { color:#b83e62; background:var(--pink); }.priority.medium { color:#8a6800; background:var(--yellow); }.priority.low { color:#287d58; background:var(--mint); }.delete-button { width:25px; height:25px; border:0; border-radius:6px; color:#928da2; background:transparent; font-size:22px; line-height:1; }.delete-button:hover { color:#c84367; background:var(--pink); }.empty-state { display:grid; place-items:center; min-height:270px; color:var(--muted); text-align:center; }.empty-state span { font-size:36px; }.empty-state h3 { margin:12px 0 4px; color:var(--ink); }.empty-state p { margin:0; }
.sidebar { display:grid; gap:18px; }.add-panel,.plan-panel { padding:22px; }.add-panel .panel-heading,.plan-panel .panel-heading { margin-bottom:17px; } form { display:grid; gap:13px; } label { display:grid; gap:6px; color:#545068; font-size:12px; font-weight:750; } input,select { width:100%; padding:10px 11px; border:1px solid #dfdbe8; border-radius:9px; outline:none; color:var(--ink); background:#fff; font-size:14px; } input:focus,select:focus { border-color:var(--purple); box-shadow:0 0 0 3px #705bf61c; }.form-row { display:grid; grid-template-columns:1.2fr 1fr; gap:10px; }.form-button { width:100%; margin-top:3px; }.form-button span { margin-left:7px; }.plan-panel { min-height:180px; }.plan-empty { min-height:89px; display:grid; place-items:center; color:var(--muted); text-align:center; }.plan-empty span { font-size:25px; }.plan-empty p { max-width:220px; margin:7px 0 0; font-size:13px; }.plan-list { display:grid; gap:9px; }.plan-step { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #f0eef5; }.plan-step:last-child { border-bottom:0; }.step-number { display:grid; place-items:center; flex:0 0 23px; width:23px; height:23px; border-radius:50%; color:var(--purple); background:var(--lilac); font-size:11px; font-weight:800; }.plan-step strong { display:block; font-size:13px; }.plan-step small { color:var(--muted); font-size:11px; }
@media (max-width:850px) { .stats-grid { grid-template-columns:repeat(2,1fr); }.content-grid { grid-template-columns:1fr; }.sidebar { grid-template-columns:1fr 1fr; }.hero { align-items:start; flex-direction:column; }.plan-button { margin:0; } }
@media (max-width:560px) { .app-shell { padding:0 16px 32px; }.topbar { height:63px; }.status { font-size:10px; }.hero { padding:30px 0 28px; }.hero h1 { letter-spacing:-1.7px; }.hero-copy { font-size:15px; }.stats-grid,.sidebar { grid-template-columns:1fr; }.task-panel,.add-panel,.plan-panel { padding:17px; }.task-item { gap:9px; padding:11px; }.priority { display:none; }.task-meta { gap:5px; }.form-row { grid-template-columns:1fr; } }