:root { color-scheme: light; --accent:#5b5ce2; --ink:#181820; --muted:#858590; --line:#e9e8ef; --card:#fff; }
* { box-sizing:border-box; }
html { background:#f4f3f8; }
body { max-width:760px; min-height:100vh; margin:auto; padding:calc(env(safe-area-inset-top) + 18px) 18px calc(env(safe-area-inset-bottom) + 122px); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
button,input,select { font:inherit; }
button { border:0; cursor:pointer; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:8px 4px 18px; }
.topbar small { color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.18em; }
h1 { margin:5px 0 0; font-size:32px; letter-spacing:-.05em; }
#refresh { width:42px; height:42px; border-radius:50%; background:#fff; color:#555; font-size:23px; box-shadow:0 8px 24px #25234a12; }
.summary { display:flex; align-items:center; gap:14px; margin-bottom:20px; padding:15px 17px; border-radius:17px; background:#fff; box-shadow:0 8px 30px #25234a0d; color:#666673; font-size:12px; }
.bar { flex:1; height:5px; overflow:hidden; border-radius:5px; background:#e7e6ed; }.bar i { display:block; width:0; height:100%; background:var(--accent); transition:width .2s; }
.category { margin:0 0 20px; }.category-title { display:flex; justify-content:space-between; margin:0 2px 9px; color:#5e5e6a; font-size:13px; font-weight:800; }
.stage-title { margin:17px 5px 8px; color:#9796a2; font-size:11px; font-weight:800; letter-spacing:.1em; }
.project { margin-bottom:12px; overflow:hidden; border:1px solid var(--line); border-radius:17px; background:var(--card); box-shadow:0 8px 24px #25234a0a; }
.project-head { display:grid; grid-template-columns:28px minmax(0,1fr) auto auto; gap:7px; align-items:center; min-height:52px; padding:9px 11px; border-bottom:1px solid var(--line); }
.check { width:24px; height:24px; padding:0; border:1.5px solid #bbb9c6; border-radius:8px; background:white; color:white; }.done>.project-head .check,.todo.done .check { border-color:var(--accent); background:var(--accent); }
.project-name { overflow:hidden; text-overflow:ellipsis; font-weight:800; white-space:nowrap; }.done>.project-head .project-name,.todo.done .todo-text { color:#a09fab; text-decoration:line-through; }
.rename { padding:6px 9px; border-radius:9px; background:#f1f0fb; color:var(--accent); }
.project-head select,.todo select { min-width:0; max-width:104px; border:0; border-radius:8px; padding:6px; background:#f3f2f6; color:#777681; font-size:11px; }
.todo { display:grid; grid-template-columns:28px minmax(0,1fr) 30px; gap:8px; align-items:start; padding:13px 12px; border-bottom:1px solid var(--line); }.todo:last-child { border-bottom:0; }
.todo-text { line-height:1.5; word-break:break-word; }.meta { display:flex; align-items:center; gap:5px; margin-top:7px; }.badge { padding:3px 7px; border-radius:8px; background:#f2f1f5; color:#888793; font-size:9px; }
.details { margin:8px 0 0; padding-left:18px; color:#85848f; font-size:12px; line-height:1.6; }
.delete { width:28px; height:28px; border-radius:50%; background:transparent; color:#b0aeb9; font-size:20px; }
.empty-project,.loading { padding:28px; color:#aaa8b2; text-align:center; font-size:13px; }
.composer { position:fixed; right:0; bottom:0; left:0; z-index:5; max-width:760px; margin:auto; padding:12px 18px calc(env(safe-area-inset-bottom) + 12px); border-top:1px solid #ffffffaa; background:#f8f7fbd9; backdrop-filter:blur(20px); }
.fields { display:grid; grid-template-columns:72px 90px minmax(0,1fr); gap:7px; margin-bottom:7px; }.fields input,.fields select,.todo-input input { width:100%; min-width:0; border:1px solid var(--line); border-radius:11px; outline:none; padding:10px; background:#fff; }
.todo-input { display:grid; grid-template-columns:minmax(0,1fr) 64px; gap:7px; }.todo-input button,#token-form button { border-radius:11px; background:var(--accent); color:#fff; font-weight:800; }.secondary { width:100%; margin-top:7px; padding:7px; background:transparent; color:var(--accent); font-size:11px; }
footer { padding:5px 3px 20px; color:#9695a0; font-size:11px; text-align:center; }
dialog { width:min(380px,calc(100% - 36px)); border:0; border-radius:20px; padding:24px; box-shadow:0 24px 80px #1f1d3a40; }dialog::backdrop{background:#22223a55;backdrop-filter:blur(5px)}#token-form{display:grid;gap:13px}#token-form h2{margin:0}#token-form p{margin:0;color:#85848f;font-size:13px;line-height:1.6}#token-form input{border:1px solid var(--line);border-radius:11px;padding:12px}#token-form button{padding:12px}
body.life-mode #stage,body.life-mode #project { opacity:.35; pointer-events:none; }
@media (min-width:700px){ body{padding-top:36px}.composer{border-radius:20px 20px 0 0}.project{border-radius:20px} }