:root{font-family:Inter,PingFang SC,Microsoft YaHei,sans-serif;color:#222;background-color:#f5f6f8;line-height:1.5;font-weight:400}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(180deg,#f9fafc,#f2f3f7)}#root{min-height:100vh}.app{min-height:100vh;padding:24px 16px;display:flex;justify-content:center;align-items:flex-start}.todo-card{width:min(100%,720px);background:#fff;border-radius:18px;padding:22px;box-shadow:0 14px 34px #161c2d14;border:1px solid #eceef4}.todo-header h1{margin:0;font-size:1.6rem;font-weight:700;letter-spacing:.01em}.todo-header p{margin:6px 0 16px;color:#667085;font-size:.94rem}.todo-input{display:flex;gap:10px}.todo-input input{flex:1;border:1px solid #dde1ea;border-radius:12px;padding:12px 14px;font-size:1rem;outline:none;transition:border-color .2s,box-shadow .2s}.todo-input input:focus{border-color:#7c8cff;box-shadow:0 0 0 3px #7c8cff26}.todo-input button{border:none;border-radius:12px;background:#7c8cff;color:#fff;font-weight:600;font-size:.95rem;padding:0 18px;cursor:pointer;transition:transform .15s,opacity .2s}.todo-input button:hover{opacity:.92}.todo-input button:active{transform:scale(.97)}.todo-list-wrap{margin-top:16px;border-top:1px solid #eff1f6;padding-top:14px}.todo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.todo-list.scrollable{max-height:320px;overflow-y:auto;padding-right:4px}.todo-list.scrollable::-webkit-scrollbar{width:8px}.todo-list.scrollable::-webkit-scrollbar-thumb{background:#d3d8e6;border-radius:999px}.todo-item-shell{position:relative;border-radius:12px;overflow:hidden}.todo-item-delete{position:absolute;right:0;top:0;bottom:0;width:88px;border:none;background:#ff5a66;color:#fff;font-weight:600;cursor:pointer}.todo-item{position:relative;display:flex;align-items:center;gap:10px;background:#fbfcff;border:1px solid #edf0f7;border-radius:12px;padding:12px;transition:transform .2s ease;touch-action:pan-y;-webkit-user-select:none;user-select:none}.todo-item input[type=checkbox]{width:18px;height:18px;accent-color:#7c8cff;cursor:pointer;flex-shrink:0}.todo-item__text{position:relative;display:inline-block;color:#24324b;transition:color .25s ease,opacity .25s ease}.todo-item__text:after{content:"";position:absolute;left:0;top:50%;width:0;height:2px;background:#677189;transform:translateY(-50%);transition:width .26s ease}.todo-item.completed .todo-item__text{color:#7f8aa3;opacity:.58}.todo-item.completed .todo-item__text:after{width:100%}.empty-state{margin-top:22px;border:1px dashed #dfe3ee;border-radius:14px;padding:28px 20px;text-align:center;color:#7c879f}.empty-illustration{width:88px;height:88px;margin:0 auto 10px;border-radius:24px;background:linear-gradient(150deg,#eef1ff,#f6f7ff);box-shadow:inset 0 0 0 1px #dfe4ff;display:grid;place-items:center}.empty-illustration:before{content:"";width:44px;height:44px;border-radius:12px;border:2px solid #b8c2ff;box-shadow:0 8px 16px #7c8cff2e}.context-menu{position:fixed;z-index:20;background:#fff;border:1px solid #e3e8f4;border-radius:10px;box-shadow:0 12px 26px #1319282e;padding:6px}.context-menu button{border:none;background:transparent;padding:8px 12px;border-radius:8px;cursor:pointer;color:#d43f4d;font-size:.93rem}.context-menu button:hover{background:#fff1f2}@media (max-width: 640px){.todo-card{padding:16px;border-radius:14px}.todo-input button{padding:0 14px}}