*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f8f8f8;--bg-secondary: #ffffff;--text: #1a1a1a;--text-secondary: #888888;--accent: #333333;--border: #e8e8e8;--input-bg: #ffffff;--task-bg: #ffffff;--task-hover: #f0f0f0;--archive-bg: #ffffff;--overlay-bg: rgba(0, 0, 0, .3);--shadow: 0 1px 3px rgba(0, 0, 0, .06);--theme-btn-bg: #f0f0f0;--theme-btn-active: #e0e0e0}html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:var(--bg);color:var(--text);transition:background .25s,color .25s;min-height:100dvh}.app{max-width:520px;margin:0 auto;padding:24px 16px 80px;min-height:100dvh}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.header-actions{display:flex;align-items:center;gap:8px}.sign-out-btn{all:unset;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:var(--text-secondary);background:var(--theme-btn-bg);transition:background .15s,transform .15s}.sign-out-btn:hover{transform:scale(1.1);color:var(--text)}.sign-out-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.logo{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;color:var(--text)}.theme-switcher{display:flex;gap:4px}.theme-btn{all:unset;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;font-size:14px;background:var(--theme-btn-bg);transition:background .15s,transform .15s}.theme-btn:hover{transform:scale(1.1)}.theme-btn.active{background:var(--theme-btn-active);box-shadow:inset 0 0 0 1.5px var(--accent)}.theme-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.task-input-wrap{margin-bottom:20px}.task-input{width:100%;padding:14px 16px;font-size:1rem;font-family:inherit;border:none;border-radius:12px;background:var(--input-bg);color:var(--text);box-shadow:var(--shadow);outline:none;transition:box-shadow .2s,background .25s}.task-input::placeholder{color:var(--text-secondary)}.task-input:focus{box-shadow:var(--shadow),0 0 0 2px var(--accent)}.task-list{display:flex;flex-direction:column;gap:6px}.task-drag-wrap{border-radius:12px;transition:transform .15s ease;cursor:grab}.task-drag-wrap:active{cursor:grabbing}.task-drag-wrap.dragging{opacity:.4}.task-drag-wrap.drag-over-above{transform:translateY(4px);box-shadow:0 -2px 0 0 var(--accent)}.task-drag-wrap.drag-over-below{transform:translateY(-4px);box-shadow:0 2px 0 0 var(--accent)}.task-item{all:unset;display:flex;align-items:center;width:100%;padding:0;font-size:1rem;border-radius:12px;background:var(--task-bg);color:var(--text);box-shadow:var(--shadow);transition:background .15s,transform .15s,opacity .2s;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;overflow:hidden}.task-item:hover{background:var(--task-hover)}.task-text-btn{all:unset;cursor:pointer;display:flex;align-items:center;flex:1;min-width:0;padding:14px 0 14px 16px}.task-text-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:8px}.task-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-check{display:inline-block;width:0;overflow:hidden;opacity:0;color:var(--text-secondary);font-size:.85rem;flex-shrink:0;transition:width .2s ease,opacity .15s}.task-item:hover .task-check{width:22px;opacity:1}.task-date-area{display:flex;align-items:center;gap:4px;padding-right:12px;flex-shrink:0;position:relative}.task-calendar-btn{all:unset;cursor:pointer;display:grid;place-items:center;width:28px;height:28px;border-radius:6px;color:var(--text-secondary);opacity:0;transition:opacity .15s,background .15s}.task-item:hover .task-calendar-btn{opacity:1}.task-calendar-btn:hover{background:var(--border)}.task-calendar-btn:focus-visible{opacity:1;outline:2px solid var(--accent);outline-offset:2px}.task-date{font-family:Space Mono,monospace;font-size:.75rem;color:var(--text-secondary);white-space:nowrap}.task-date-clear{all:unset;cursor:pointer;display:grid;place-items:center;width:20px;height:20px;border-radius:4px;font-size:.8rem;color:var(--text-secondary);transition:background .15s,color .15s}.task-date-clear:hover{background:var(--border);color:var(--text)}.task-date-clear:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.task-date-input{position:absolute;right:12px;width:28px;height:28px;opacity:0;pointer-events:none}.task-promoted{animation:promote .45s cubic-bezier(.22,1,.36,1) both}@keyframes promote{0%{opacity:.5;transform:translateY(20px) scale(.97)}50%{transform:translateY(-4px) scale(1.015)}to{opacity:1;transform:translateY(0) scale(1)}}.task-enter{animation:slideIn .2s ease-out both}@keyframes slideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.task-exit{animation:slideOut .35s ease-in forwards}@keyframes slideOut{to{opacity:0;transform:translate(40px) scale(.96)}}.confetti-container{position:absolute;z-index:10;pointer-events:none}.confetti-particle{position:absolute;animation:confettiBurst .6s cubic-bezier(.2,.8,.3,1) forwards;opacity:1}@keyframes confettiBurst{0%{transform:translate(0) rotate(0) scale(1);opacity:1}to{transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(.3);opacity:0}}.empty-state{text-align:center;padding:48px 16px;color:var(--text-secondary)}.empty-state p{font-size:1rem}.empty-hint{font-size:.85rem!important;margin-top:4px;opacity:.7}.archive-toggle{all:unset;cursor:pointer;position:fixed;bottom:20px;right:20px;width:48px;height:48px;border-radius:14px;background:var(--task-bg);box-shadow:0 2px 12px #0000001f;display:grid;place-items:center;color:var(--text);transition:transform .15s,background .25s}.archive-toggle:hover{transform:scale(1.08)}.archive-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.archive-badge{position:absolute;top:-4px;right:-4px;background:var(--accent);color:var(--bg);font-size:.65rem;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px}.archive-overlay{position:fixed;inset:0;background:var(--overlay-bg);opacity:0;pointer-events:none;transition:opacity .25s;z-index:90}.archive-overlay.open{opacity:1;pointer-events:auto}.archive-drawer{position:fixed;bottom:0;left:0;right:0;max-height:70dvh;background:var(--archive-bg);border-radius:20px 20px 0 0;box-shadow:0 -4px 30px #0000001f;transform:translateY(100%);transition:transform .3s cubic-bezier(.22,1,.36,1);z-index:100;display:flex;flex-direction:column;overflow:hidden}.archive-drawer.open{transform:translateY(0)}.archive-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 12px;flex-shrink:0}.archive-header h2{font-size:1.1rem;font-weight:700;color:var(--text)}.archive-close{all:unset;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:var(--text-secondary);font-size:1rem;transition:background .15s}.archive-close:hover{background:var(--task-hover)}.archive-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.archive-list{overflow-y:auto;padding:0 20px 24px;-webkit-overflow-scrolling:touch}.archive-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.archive-item:last-child{border-bottom:none}.archive-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);text-decoration:line-through;font-size:.95rem}.archive-date{flex-shrink:0;font-size:.75rem;color:var(--text-secondary);opacity:.7}.archive-empty{padding:32px 20px;text-align:center;color:var(--text-secondary);font-size:.9rem}.auth-screen{display:flex;align-items:center;justify-content:center;min-height:100dvh;background:var(--bg);padding:24px}.auth-card{text-align:center;max-width:340px;width:100%}.auth-brand{font-size:2rem;font-weight:700;letter-spacing:-.04em;color:var(--text);margin-bottom:8px}.auth-tagline{color:var(--text-secondary);font-size:1rem;margin-bottom:32px}.auth-google-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border-radius:12px;background:var(--task-bg);color:var(--text);font-size:.95rem;font-weight:500;font-family:inherit;box-shadow:var(--shadow),0 0 0 1px var(--border);transition:transform .15s,box-shadow .15s}.auth-google-btn:hover{transform:scale(1.03);box-shadow:var(--shadow),0 0 0 1px var(--accent)}.auth-google-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.auth-spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;margin:0 auto;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:600px){.archive-drawer{max-width:520px;left:50%;transform:translate(-50%) translateY(100%);border-radius:20px 20px 0 0}.archive-drawer.open{transform:translate(-50%) translateY(0)}}