:root{--bg:#0b0c10;--panel:#13151b;--panel2:#1a1d25;--border:#292d37;--text:#f2f3f5;--muted:#858b99;--accent:#a78bfa;--green:#6ee7b7;--red:#fb7185;--yellow:#fbbf24}
*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
button,input,select,textarea{font:inherit}button{cursor:pointer}.app{display:grid;grid-template-columns:235px 1fr;min-height:100vh}
.sidebar{background:#101116;border-right:1px solid var(--border);padding:26px 16px;display:flex;flex-direction:column;gap:30px}
.logo{font-size:21px;font-weight:800;letter-spacing:-1px;padding:0 10px}.logo span{color:var(--accent)}
.nav{display:flex;flex-direction:column;gap:6px}.nav button{background:transparent;border:0;color:var(--muted);padding:12px;text-align:left;border-radius:9px}.nav button.active,.nav button:hover{background:var(--panel2);color:white}
.sidebar-note{margin-top:auto;color:var(--muted);font-size:12px;line-height:1.7;padding:10px}
main{padding:35px;max-width:1500px;width:100%;margin:auto}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:30px}
h1{font-size:clamp(25px,4vw,36px);letter-spacing:-1.5px}.subtitle{color:var(--muted);margin-top:7px;font-size:13px}
.btn{border:1px solid var(--border);background:var(--panel2);color:white;border-radius:9px;padding:11px 15px}.btn.primary{background:var(--accent);color:#100b20;border-color:var(--accent);font-weight:700}.btn.danger{color:var(--red)}
.grid{display:grid;gap:16px}.stats{grid-template-columns:repeat(4,1fr);margin-bottom:20px}.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px}
.stat-label{color:var(--muted);font-size:12px}.stat-value{font-size:28px;font-weight:750;margin:13px 0 8px;letter-spacing:-1px}.stat-foot{color:var(--muted);font-size:11px}
.progress{height:7px;background:#292d37;border-radius:99px;overflow:hidden;margin-top:12px}.progress div{height:100%;background:var(--accent);transition:width .3s}
.columns{grid-template-columns:1.4fr 1fr;align-items:start}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px;gap:10px}.section-title h2{font-size:16px}.section-title small{color:var(--muted)}
.task{border-bottom:1px solid var(--border);padding:15px 0}.task:last-child{border-bottom:0}.task-main{display:flex;align-items:flex-start;gap:12px}.check{width:18px;height:18px;accent-color:var(--accent);margin-top:2px;flex-shrink:0}
.task-content{flex:1;min-width:0}.task-name{font-size:14px;font-weight:600;overflow-wrap:anywhere}.task.done .task-name{text-decoration:line-through;color:var(--muted)}
.task-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.tag{font-size:10px;color:var(--muted);background:var(--panel2);border-radius:5px;padding:5px 7px}.priority-high{color:var(--red)}.priority-medium{color:var(--yellow)}.priority-low{color:var(--green)}
.task-actions{display:flex;gap:5px}.icon-btn{background:transparent;border:0;color:var(--muted);padding:4px}.subtasks{margin:12px 0 0 30px;display:grid;gap:8px}.subtask{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}.subtask input{accent-color:var(--accent)}
.empty{color:var(--muted);font-size:13px;padding:25px 0;text-align:center}.page{display:none}.page.active{display:block}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;padding:15px;z-index:10}.modal.open{display:flex}.modal-content{background:var(--panel);border:1px solid var(--border);border-radius:15px;padding:25px;width:100%;max-width:540px;max-height:90vh;overflow-y:auto}.modal-content h2{margin-bottom:20px}
.field{display:grid;gap:7px;margin-bottom:15px}.field label{font-size:12px;color:var(--muted)}.field input,.field select,.field textarea{background:var(--bg);color:white;border:1px solid var(--border);padding:11px;border-radius:8px;width:100%}.field textarea{resize:vertical;min-height:75px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.analytics-grid{grid-template-columns:repeat(2,1fr)}.bar-row{display:grid;grid-template-columns:minmax(80px,130px) 1fr 55px;align-items:center;gap:10px;margin:15px 0;font-size:12px}.bar{background:var(--panel2);height:9px;border-radius:99px;overflow:hidden}.bar div{background:var(--accent);height:100%}.recommendation{border-left:3px solid var(--accent);background:var(--panel2);padding:14px;margin-top:12px;border-radius:0 8px 8px 0}.recommendation p{font-size:12px;line-height:1.7;color:var(--muted);margin-top:6px}
.counter{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.counter-number{font-size:30px;font-weight:800;letter-spacing:-1px}.counter-number span{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:0}
.range-select{background:var(--panel2);color:white;border:1px solid var(--border);padding:8px;border-radius:7px}
@media(max-width:850px){.app{grid-template-columns:1fr}.sidebar{position:sticky;top:0;z-index:5;padding:12px;border-right:0;border-bottom:1px solid var(--border);gap:12px}.logo{font-size:17px}.nav{flex-direction:row;overflow-x:auto}.nav button{white-space:nowrap;padding:9px 12px;font-size:12px}.sidebar-note{display:none}main{padding:20px 15px}.stats{grid-template-columns:repeat(2,1fr)}.columns,.analytics-grid{grid-template-columns:1fr}.topbar{align-items:flex-start}.bar-row{grid-template-columns:75px 1fr 45px}}
@media(max-width:440px){.stat-value{font-size:23px}.card{padding:15px}.form-row{grid-template-columns:1fr}}

/* LucidTracker — paper notebook visual direction */
:root{--bg:#f4f3ed;--panel:#fffefa;--panel2:#eeede6;--border:#292a2d;--text:#222327;--muted:#666873;--accent:#3544e8;--green:#23845d;--red:#c53e4e;--yellow:#e9ad22}
body{background-color:var(--bg);background-image:radial-gradient(#c9c8c0 .8px,transparent .8px);background-size:22px 22px;color:var(--text)}
.app{background:transparent}
.sidebar{background:rgba(248,247,241,.94);border-right:1px solid #d6d4cc}
.logo{color:#222327}.logo span{color:var(--accent)}
.nav button{color:#62636a}.nav button.active,.nav button:hover{background:#e8e7df;color:#202126;box-shadow:inset 0 0 0 1px #d0cfc7}
.sidebar-note{color:#666873}
.sidebar-note a{color:var(--accent);font-weight:750;text-decoration:none;border-bottom:1.5px solid var(--accent);transition:color .2s,border-color .2s}
.sidebar-note a:hover{color:#1724b8;border-color:#1724b8}
.card{background:rgba(255,254,250,.94);border:1px solid #292a2d;border-radius:13px;box-shadow:3px 3px 0 rgba(53,68,232,.12)}
.btn{background:#f5f4ee;color:#292a2d;border-color:#b9b8b0}.btn:hover{background:#e9e8e0}
.btn.primary{background:#25262a;color:#fff;border-color:#25262a}.btn.primary:hover{background:var(--accent);border-color:var(--accent)}
.stat-label,.stat-foot,.subtitle,.section-title small{color:var(--muted)}
.progress{background:#e4e3dc}.progress div{background:var(--accent)}
.task{border-bottom-color:#e3e1d9}.tag{background:#eeede6;color:#555761}
.priority-high{color:#c53e4e}.priority-medium{color:#a8750b}.priority-low{color:#23845d}
.check,.subtask input{accent-color:var(--accent)}
.modal{background:rgba(30,31,35,.48);backdrop-filter:blur(3px)}
.modal-content{background:#fffefa;border:1px solid #292a2d;box-shadow:5px 5px 0 rgba(53,68,232,.2)}
.field label{color:#666873}.field input,.field select,.field textarea{background:#f6f5ef;color:#222327;border-color:#d0cfc7}
.range-select{background:#fffefa;color:#222327;border-color:#b9b8b0}
.bar{background:#e5e4dc}.bar div{background:var(--accent)}
.recommendation{background:#f0efe8;border-left-color:var(--accent)}.recommendation p{color:#666873}
@media(max-width:850px){.sidebar{background:rgba(248,247,241,.97);border-bottom:1px solid #d6d4cc}}