*{box-sizing:border-box;margin:0;padding:0}:root{--font-display:"Playfair Display", Georgia, serif;--font-body:"Noto Sans SC", system-ui, -apple-system, sans-serif;--color-bg:#faf9f7;--color-surface:#fff;--color-text:#1a1a2e;--color-text-secondary:#6b7280;--color-primary:#4f46e5;--color-primary-light:#eef2ff;--color-success:#10b981;--color-success-light:#d1fae5;--color-danger:#ef4444;--color-danger-light:#fee2e2;--color-border:#e5e7eb;--color-shadow:#0000000f;--radius:16px;--radius-sm:10px;font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;font-size:16px;line-height:1.6}body{min-height:100dvh;overflow-x:hidden}#root{min-height:100dvh}input,button,textarea{font-family:inherit}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}*,:before,:after,::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 #0000;--un-ring-shadow:0 0 #0000;--un-shadow-inset: ;--un-shadow:0 0 #0000;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:#93c5fd80;--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.mx{margin-left:1rem;margin-right:1rem}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.todo-item{border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:0 1px 3px var(--color-shadow), 0 1px 2px var(--color-shadow);margin-bottom:10px;transition:box-shadow .3s,transform .2s;position:relative;overflow:hidden}.todo-item:hover{box-shadow:0 4px 12px #00000014}.todo-item .todo-item-bg{border-radius:var(--radius-sm);z-index:0;align-items:center;padding:0 20px;transition:background-color .3s;display:flex;position:absolute;inset:0}.todo-item .todo-item-bg.bg-delete{background:linear-gradient(135deg,#fee2e2,#fecaca);justify-content:flex-end}.todo-item .todo-item-bg.bg-complete{background:linear-gradient(135deg,#d1fae5,#a7f3d0);justify-content:flex-start}.todo-item .todo-item-bg .bg-label{letter-spacing:.5px;text-transform:uppercase;opacity:.8;font-size:13px;font-weight:600}.todo-item .todo-item-bg .bg-label-delete{color:var(--color-danger)}.todo-item .todo-item-bg .bg-label-complete{color:var(--color-success)}.todo-item .todo-item-content{z-index:1;background:var(--color-surface);border-radius:var(--radius-sm);touch-action:pan-y;-webkit-user-select:none;user-select:none;align-items:center;gap:14px;padding:16px 20px;transition:transform .15s,box-shadow .15s;display:flex;position:relative}.todo-item .todo-item-content.dragging{transition:box-shadow .15s;box-shadow:0 8px 25px #0000001f}.todo-item .todo-item-content.released{transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}.todo-item .todo-checkbox{border:2px solid var(--color-border);cursor:pointer;background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;transition:all .3s;display:flex}.todo-item .todo-checkbox:hover{border-color:var(--color-primary)}.todo-item .todo-checkbox.checked{background:var(--color-success);border-color:var(--color-success)}.todo-item .todo-checkbox.checked .check-icon{opacity:1;transform:scale(1)}.todo-item .todo-checkbox .check-icon{color:#fff;opacity:0;font-size:12px;transition:all .25s cubic-bezier(.34,1.56,.64,1);transform:scale(.5)}.todo-item .todo-text{color:var(--color-text);word-break:break-word;flex:1;font-size:15px;line-height:1.5;transition:all .3s}.todo-item .todo-text.completed{color:var(--color-success);text-decoration:line-through;text-decoration-thickness:2px;-webkit-text-decoration-color:var(--color-success);text-decoration-color:var(--color-success);opacity:.7}.todo-item .todo-text.deleted{color:var(--color-danger);text-decoration:line-through;text-decoration-thickness:2px;-webkit-text-decoration-color:var(--color-danger);text-decoration-color:var(--color-danger);opacity:.5;text-decoration-style:wavy}.todo-item .todo-time{color:var(--color-text-secondary);opacity:.6;flex-shrink:0;font-size:11px}.todo-item.removing{animation:.4s cubic-bezier(.4,0,1,1) forwards slideOutRight}.todo-item.completing{animation:.5s pulseGreen}@keyframes slideOutRight{0%{opacity:1;max-height:80px;margin-bottom:10px;transform:translate(0)}50%{opacity:.5;transform:translate(100%)}to{opacity:0;max-height:0;margin-bottom:0;padding:0;overflow:hidden;transform:translate(100%)}}@keyframes pulseGreen{0%{box-shadow:0 0 #10b98166}50%{box-shadow:0 0 0 8px #10b98100}to{box-shadow:0 0 #10b98100}}.todo-input-wrapper{background:var(--color-surface);border-radius:var(--radius);box-shadow:0 2px 8px var(--color-shadow), 0 1px 3px var(--color-shadow);align-items:center;gap:12px;padding:8px;transition:box-shadow .3s;display:flex}.todo-input-wrapper:focus-within{box-shadow:0 4px 16px #4f46e51f, 0 1px 3px var(--color-shadow)}.todo-input-wrapper .todo-input{color:var(--color-text);background:0 0;border:none;outline:none;flex:1;padding:12px 16px;font-size:15px;line-height:1.5}.todo-input-wrapper .todo-input::placeholder{color:var(--color-text-secondary);opacity:.5}.todo-input-wrapper .todo-submit-btn{background:var(--color-primary);color:#fff;cursor:pointer;border:none;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:20px;transition:all .25s;display:flex}.todo-input-wrapper .todo-submit-btn:hover{background:#4338ca;transform:scale(1.05)}.todo-input-wrapper .todo-submit-btn:active{transform:scale(.95)}.todo-input-wrapper .todo-submit-btn:disabled{background:var(--color-border);cursor:not-allowed;transform:none}.todo-list-container{width:100%;max-width:520px;margin:0 auto;padding:0 16px 40px}.todo-list-container .todo-header{text-align:center;padding:40px 0 32px}.todo-list-container .todo-header .todo-title{font-family:var(--font-display);color:var(--color-text);letter-spacing:-.5px;margin-bottom:6px;font-size:36px;font-weight:700;line-height:1.2}.todo-list-container .todo-header .todo-subtitle{color:var(--color-text-secondary);letter-spacing:1px;font-size:13px;font-weight:300}.todo-list-container .todo-stats{justify-content:space-between;align-items:center;margin-bottom:16px;padding:12px 4px;display:flex}.todo-list-container .todo-stats .stats-left{gap:16px;display:flex}.todo-list-container .todo-stats .stats-left .stat-item{color:var(--color-text-secondary);align-items:center;gap:6px;font-size:12px;display:flex}.todo-list-container .todo-stats .stats-left .stat-item .stat-dot{border-radius:50%;width:8px;height:8px}.todo-list-container .todo-stats .stats-left .stat-item .stat-dot-active{background:var(--color-primary)}.todo-list-container .todo-stats .stats-left .stat-item .stat-dot-done{background:var(--color-success)}.todo-list-container .todo-stats .stats-left .stat-item .stat-dot-del{background:var(--color-danger)}.todo-list-container .todo-stats .stats-left .stat-item .stat-count{color:var(--color-text);font-weight:600}.todo-list-container .todo-stats .stats-right .clear-btn{color:var(--color-danger);cursor:pointer;opacity:.7;background:0 0;border:none;border-radius:6px;padding:4px 8px;font-size:12px;transition:all .2s}.todo-list-container .todo-stats .stats-right .clear-btn:hover{background:var(--color-danger-light);opacity:1}.todo-list-container .todo-input-section{margin-bottom:24px}.todo-list-container .section-label{text-transform:uppercase;letter-spacing:1.5px;color:var(--color-text-secondary);opacity:.6;align-items:center;gap:8px;margin:20px 0 12px 4px;font-size:11px;font-weight:600;display:flex}.todo-list-container .section-label:after{content:"";background:var(--color-border);flex:1;height:1px}.todo-list-container .todo-list{min-height:100px}.todo-list-container .todo-empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:48px 20px;display:flex}.todo-list-container .todo-empty .empty-icon{opacity:.3;margin-bottom:16px;font-size:48px}.todo-list-container .todo-empty .empty-text{color:var(--color-text-secondary);opacity:.5;margin-bottom:4px;font-size:15px}.todo-list-container .todo-empty .empty-hint{color:var(--color-text-secondary);opacity:.3;font-size:12px}.todo-list-container .todo-loading{justify-content:center;align-items:center;padding:48px;display:flex}.todo-list-container .todo-loading .loading-spinner{border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}.todo-list-container .swipe-hint{color:var(--color-text-secondary);opacity:.4;justify-content:center;align-items:center;gap:16px;margin-top:8px;padding:16px;font-size:11px;display:flex}.todo-list-container .swipe-hint .hint-item{align-items:center;gap:4px;display:flex}.todo-list-container .swipe-hint .hint-arrow{font-size:14px}@keyframes spin{to{transform:rotate(360deg)}}.app-bg{z-index:-1;pointer-events:none;position:fixed;inset:0;overflow:hidden}.app-bg .bg-circle{filter:blur(80px);opacity:.15;border-radius:50%;position:absolute}.app-bg .bg-circle-1{background:var(--color-primary);width:400px;height:400px;top:-100px;right:-100px}.app-bg .bg-circle-2{background:var(--color-success);width:300px;height:300px;bottom:-50px;left:-80px}.app-bg .bg-circle-3{background:#f59e0b;width:200px;height:200px;top:50%;left:50%;transform:translate(-50%,-50%)}