:root{--color-bg-1: #667eea;--color-bg-2: #764ba2;--color-card-bg: rgba(255, 255, 255, .85);--color-text: #2d2d3a;--color-text-muted: #6b6b7b;--color-accent: #6c5ce7;--color-accent-soft: #a29bfe;--color-success: #00b894;--color-danger: #ff6b6b;--color-border: rgba(45, 45, 58, .08);--radius-lg: 20px;--radius-md: 12px;--radius-sm: 8px;--shadow-card: 0 20px 60px rgba(45, 20, 90, .25);--transition-fast: .16s ease;--transition-base: .25s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Hiragino Sans,Yu Gothic,Noto Sans JP,Helvetica Neue,Arial,sans-serif;color:var(--color-text);-webkit-font-smoothing:antialiased}button{font-family:inherit}.app{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden}.app__background{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background:linear-gradient(135deg,var(--color-bg-1) 0%,var(--color-bg-2) 100%);background-size:200% 200%;animation:gradientShift 16s ease infinite}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.app__card{width:100%;max-width:560px;background:var(--color-card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:36px;animation:cardEnter .5s cubic-bezier(.16,1,.3,1)}@keyframes cardEnter{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.app__header{text-align:center;margin-bottom:28px}.app__title{margin:0;font-size:2rem;font-weight:800;letter-spacing:-.02em;background:linear-gradient(135deg,var(--color-accent),var(--color-accent-soft));-webkit-background-clip:text;background-clip:text;color:transparent}.app__subtitle{margin:6px 0 0;font-size:.9rem;color:var(--color-text-muted)}.todo-form{display:flex;gap:10px;margin-bottom:20px}.todo-input{flex:1;padding:14px 16px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:#fff;font-size:1rem;color:var(--color-text);transition:box-shadow var(--transition-fast),border-color var(--transition-fast)}.todo-input:focus{outline:none;border-color:var(--color-accent-soft);box-shadow:0 0 0 4px #6c5ce726}.todo-add-button{padding:0 22px;border:none;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--color-accent),var(--color-accent-soft));color:#fff;font-weight:700;font-size:.95rem;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast),opacity var(--transition-fast);box-shadow:0 8px 20px #6c5ce759}.todo-add-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 24px #6c5ce773}.todo-add-button:active:not(:disabled){transform:translateY(0)}.todo-add-button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.filter-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:18px}.filter-bar__tabs{display:flex;gap:4px;background:#2d2d3a0f;padding:4px;border-radius:var(--radius-md)}.filter-bar__tab{border:none;background:transparent;padding:7px 14px;border-radius:var(--radius-sm);font-size:.85rem;color:var(--color-text-muted);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.filter-bar__tab--active{background:#fff;color:var(--color-accent);font-weight:700;box-shadow:0 2px 8px #2d145a1f}.filter-bar__meta{display:flex;align-items:center;gap:12px;font-size:.82rem;color:var(--color-text-muted)}.filter-bar__clear{border:none;background:none;color:var(--color-danger);cursor:pointer;font-size:.82rem;padding:0;text-decoration:underline;text-underline-offset:2px}.todo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow-y:auto}.todo-empty{text-align:center;padding:48px 16px;color:var(--color-text-muted)}.todo-empty p{margin:0}.todo-empty__sub{font-size:.82rem;margin-top:6px!important}.todo-item{display:flex;align-items:center;gap:10px;padding:12px;background:#fff;border-radius:var(--radius-md);border:1px solid var(--color-border);animation:itemEnter .28s cubic-bezier(.16,1,.3,1);transition:transform var(--transition-fast),box-shadow var(--transition-fast),opacity var(--transition-base),background var(--transition-fast);cursor:grab}.todo-item:active{cursor:grabbing}.todo-item--dragging{opacity:.5;transform:scale(.98);box-shadow:0 10px 24px #2d145a33}.todo-item--priority{border-color:#fdcb6e99;background:linear-gradient(0deg,#fdcb6e14,#fdcb6e14),#fff}@keyframes itemEnter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.todo-item__handle{color:var(--color-text-muted);font-size:1rem;-webkit-user-select:none;user-select:none}.todo-item__checkbox{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--color-accent-soft);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}.todo-item__checkbox:hover{transform:scale(1.08)}.todo-item--completed .todo-item__checkbox{background:var(--color-success);border-color:var(--color-success)}.todo-item__check{color:#fff;font-size:.75rem;font-weight:700}.todo-item__priority{flex-shrink:0;width:26px;height:26px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-size:1.15rem;color:var(--color-text-muted);transition:transform var(--transition-fast),color var(--transition-fast)}.todo-item__priority:hover{transform:scale(1.12)}.todo-item--priority .todo-item__priority{color:#fdcb6e}.todo-item__text{flex:1;font-size:.95rem;word-break:break-word;transition:color var(--transition-fast),opacity var(--transition-fast)}.todo-item--completed .todo-item__text{text-decoration:line-through;color:var(--color-text-muted);opacity:.7}.todo-item__edit-input{flex:1;padding:6px 8px;border-radius:var(--radius-sm);border:1px solid var(--color-accent-soft);font-size:.95rem;outline:none}.todo-item__actions{display:flex;gap:4px;opacity:0;transform:translate(4px);transition:opacity var(--transition-fast),transform var(--transition-fast)}.todo-item:hover .todo-item__actions,.todo-item:focus-within .todo-item__actions{opacity:1;transform:translate(0)}.todo-item__icon-button{border:none;background:transparent;cursor:pointer;font-size:.95rem;padding:6px;border-radius:var(--radius-sm);color:var(--color-text-muted);transition:background var(--transition-fast),color var(--transition-fast)}.todo-item__icon-button:hover{background:#6c5ce71a;color:var(--color-accent)}.todo-item__icon-button--delete:hover{background:#ff6b6b1f;color:var(--color-danger)}.confetti-canvas{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;pointer-events:none}@media(max-width:520px){.app{padding:12px}.app__card{padding:24px 18px;border-radius:var(--radius-md)}.app__title{font-size:1.6rem}.todo-form{flex-direction:column}.todo-add-button{padding:12px}.filter-bar{flex-direction:column;align-items:stretch}.filter-bar__meta{justify-content:space-between}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}