*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--primary: #ff8fa3;--primary-dark: #ff6b85;--primary-light: #ffe0e6;--secondary: #ffc4d6;--success: #ff9eb5;--warning: #ffa7c4;--danger: #ff758f;--info: #ffb8c9;--white: #ffffff;--gray-50: #fff5f7;--gray-100: #ffebef;--gray-200: #ffe0e6;--gray-300: #ffcdd7;--gray-400: #ffb3c1;--gray-500: #ff8fa3;--gray-600: #ff6b85;--gray-700: #000000;--gray-800: #000000;--gray-900: #000000;--gradient-primary: linear-gradient(135deg, #ff8fa3 0%, #ffb3c1 50%, #ffcdd7 100%);--gradient-background: linear-gradient(135deg, #fff0f3 0%, #ffe5ea 50%, #ffd6de 100%);--gradient-card: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,245,247,.99) 100%);--gradient-success: linear-gradient(135deg, #ff9eb5 0%, #ffb3c1 100%);--gradient-danger: linear-gradient(135deg, #ff758f 0%, #ff8fa3 100%);--shadow-xs: 0 1px 2px rgba(45, 31, 35, .05);--shadow-sm: 0 1px 3px rgba(45, 31, 35, .1), 0 1px 2px rgba(45, 31, 35, .06);--shadow-md: 0 4px 6px -1px rgba(45, 31, 35, .1), 0 2px 4px -1px rgba(45, 31, 35, .06);--shadow-lg: 0 10px 15px -3px rgba(45, 31, 35, .1), 0 4px 6px -2px rgba(45, 31, 35, .05);--shadow-xl: 0 20px 25px -5px rgba(45, 31, 35, .1), 0 10px 10px -5px rgba(45, 31, 35, .04);--shadow-glow: 0 0 20px rgba(255, 143, 163, .3);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace}body{font-family:var(--font-sans);background:var(--gradient-background);min-height:100vh;color:var(--gray-800);line-height:1.6}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}::selection{background:var(--primary-light);color:var(--gray-800)}.app{min-height:100vh;padding:var(--space-6);display:flex;justify-content:center;align-items:flex-start}.container{width:100%;max-width:720px;margin:0 auto}.header{text-align:center;margin-bottom:var(--space-8);animation:fadeInDown .6s ease}.header h1{font-size:3rem;font-weight:700;background:none;-webkit-background-clip:initial;-webkit-text-fill-color:var(--gray-900);background-clip:initial;color:var(--gray-900);letter-spacing:-.02em;margin-bottom:var(--space-3);text-shadow:none}.subtitle{font-size:1.125rem;color:var(--gray-900);font-weight:500}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-bottom:var(--space-8);animation:fadeInUp .6s ease .1s both}.stat-item{background:#ffffffb3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid var(--primary-light);border-radius:var(--radius-lg);padding:var(--space-5);text-align:center;color:var(--gray-700);font-size:.875rem;font-weight:600;transition:var(--transition-normal)}.stat-item:hover{background:#ffffffe6;transform:translateY(-2px);border-color:var(--primary)}.stat-item strong{display:block;font-size:2rem;font-weight:700;color:var(--primary-dark);margin-top:var(--space-2)}.add-todo-form{display:flex;gap:var(--space-3);margin-bottom:var(--space-8);background:var(--gradient-card);padding:var(--space-5);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl),var(--shadow-glow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fadeInUp .6s ease .2s both;border:2px solid var(--primary-light)}.add-todo-input{flex:1;padding:var(--space-4) var(--space-5);border:2px solid var(--gray-200);border-radius:var(--radius-lg);font-size:1rem;font-weight:400;color:var(--gray-700);background:var(--white);transition:var(--transition-normal)}.add-todo-input::placeholder{color:var(--gray-400)}.add-todo-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px #6366f11a}.btn-add,.btn-edit,.btn-delete,.btn-save,.btn-cancel{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border:none;border-radius:var(--radius-lg);font-size:.875rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.btn-add{background:var(--gradient-primary);color:var(--white);padding:var(--space-4) var(--space-6);font-size:1rem;box-shadow:var(--shadow-md)}.btn-add:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--shadow-glow)}.btn-add:active:not(:disabled){transform:translateY(0)}.btn-add:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.btn-edit{background:var(--gray-100);color:var(--gray-600)}.btn-edit:hover:not(:disabled){background:var(--warning);color:var(--white)}.btn-edit:disabled{opacity:.4;cursor:not-allowed}.btn-delete{background:var(--gray-100);color:var(--gray-600)}.btn-delete:hover{background:var(--gradient-danger);color:var(--white)}.btn-save{background:var(--gradient-success);color:var(--white)}.btn-save:hover{box-shadow:0 4px 12px #10b9814d}.btn-cancel{background:var(--gray-200);color:var(--gray-600)}.btn-cancel:hover{background:var(--gray-300)}.todo-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-3);animation:fadeInUp .6s ease .3s both}.todo-item{background:var(--gradient-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid var(--primary-light);transition:all var(--transition-normal);overflow:hidden}.todo-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.todo-item.completed{opacity:.75}.todo-item.completed .todo-text{text-decoration:line-through;color:var(--gray-400)}.todo-item.completed .todo-checkbox{background:var(--gradient-success);border-color:var(--success)}.todo-view-mode{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5);gap:var(--space-4)}.todo-content{display:flex;align-items:center;gap:var(--space-4);flex:1;min-width:0}.todo-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;border:2px solid var(--gray-300);border-radius:var(--radius-sm);cursor:pointer;position:relative;transition:all var(--transition-fast);flex-shrink:0}.todo-checkbox:checked{background:var(--gradient-success);border-color:var(--success)}.todo-checkbox:checked:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--white);font-size:14px;font-weight:700}.todo-checkbox:hover:not(:checked){border-color:var(--primary-dark)}.todo-text{flex:1;font-size:1rem;font-weight:600;color:var(--gray-800);cursor:pointer;word-break:break-word;line-height:1.5;transition:color var(--transition-fast)}.todo-text:hover{color:var(--primary-dark)}.todo-edit-mode{display:flex;align-items:center;padding:var(--space-4) var(--space-5);gap:var(--space-3);background:var(--gray-50)}.todo-edit-input{flex:1;padding:var(--space-3) var(--space-4);border:2px solid var(--primary);border-radius:var(--radius-md);font-size:1rem;font-weight:500;color:var(--gray-700);background:var(--white);transition:var(--transition-normal)}.todo-edit-input:focus{outline:none;box-shadow:0 0 0 4px #6366f11a}.todo-actions{display:flex;gap:var(--space-2);flex-shrink:0}.empty-state{text-align:center;padding:var(--space-16) var(--space-8);background:var(--gradient-card);border-radius:var(--radius-xl);border:2px dashed var(--primary);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fadeInUp .6s ease .3s both}.empty-state p{font-size:1.25rem;color:var(--gray-700);font-weight:600}.empty-state:before{content:"📝";display:block;font-size:4rem;margin-bottom:var(--space-4);opacity:.5}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@media screen and (max-width:1024px)and (min-width:769px){.app{padding:var(--space-6)}.container{max-width:680px}.header h1{font-size:2.5rem}.stats{gap:var(--space-3)}.stat-item{padding:var(--space-4)}.stat-item strong{font-size:1.75rem}}@media screen and (max-width:768px){.app{padding:var(--space-4);min-height:100vh;min-height:100dvh}.container{max-width:100%}.header{margin-bottom:var(--space-6)}.header h1{font-size:2rem}.subtitle{font-size:1rem}.stats{grid-template-columns:1fr;gap:var(--space-3);margin-bottom:var(--space-6)}.stat-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4) var(--space-5);text-align:left}.stat-item strong{margin-top:0;font-size:1.5rem}.add-todo-form{flex-direction:column;padding:var(--space-4);gap:var(--space-3);margin-bottom:var(--space-6)}.add-todo-input{width:100%;padding:var(--space-4);font-size:16px}.btn-add{width:100%;padding:var(--space-4);justify-content:center}.todo-view-mode{flex-direction:column;align-items:flex-start;padding:var(--space-4);gap:var(--space-4)}.todo-content{width:100%;gap:var(--space-3)}.todo-text{font-size:1rem;line-height:1.5}.todo-checkbox{width:22px;height:22px}.todo-actions{width:100%;justify-content:stretch;gap:var(--space-3)}.btn-edit,.btn-delete,.btn-save,.btn-cancel{flex:1;padding:var(--space-3) var(--space-4);font-size:.875rem}.todo-edit-mode{flex-direction:column;align-items:stretch;padding:var(--space-4);gap:var(--space-3)}.todo-edit-input{width:100%;font-size:16px}.empty-state{padding:var(--space-10) var(--space-6)}.empty-state p{font-size:1.125rem}}@media screen and (max-width:380px){.app{padding:var(--space-3)}.header h1{font-size:1.75rem}.add-todo-form,.todo-item,.stat-item,.empty-state{border-radius:var(--radius-md)}.todo-actions{flex-wrap:wrap}.btn-edit,.btn-delete{flex:1 1 calc(50% - var(--space-2))}}@media screen and (min-width:1440px){.container{max-width:800px}.header h1{font-size:3.5rem}.todo-text{font-size:1.125rem}}@media screen and (max-height:500px)and (orientation:landscape){.app{padding:var(--space-4)}.header{margin-bottom:var(--space-4)}.header h1{font-size:1.75rem}.stats{grid-template-columns:repeat(3,1fr);margin-bottom:var(--space-4)}.stat-item{padding:var(--space-3)}.add-todo-form{flex-direction:row;margin-bottom:var(--space-4)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}