*{box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;max-width:600px;margin:40px auto;padding:0 20px;line-height:1.6;color:#1a1a1a;background:linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);min-height:100vh}h1{margin-bottom:20px;font-size:32px;font-weight:700;letter-spacing:-0.5px;background:linear-gradient(135deg, #000000 0%, #434343 100%);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);background-clip:text;position:relative}h1::after{content:"";position:absolute;bottom:-8px;left:0;width:60px;height:3px;background:linear-gradient(90deg, #000000 0%, transparent 100%)}.input-group{display:flex;gap:8px;margin-bottom:40px;position:relative}#newItem{flex:1;padding:14px 16px;font-size:15px;border:2px solid #d4d4d4;border-radius:8px;outline:none;transition:all .3s ease;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.04)}#newItem:focus{border-color:#1a1a1a;box-shadow:0 4px 16px rgba(0,0,0,.12);transform:translateY(-1px)}#newItem::-moz-placeholder{color:#999}#newItem::placeholder{color:#999}button{padding:8px 16px;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background .2s;background:#1a1a1a;font-weight:600;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:all .2s ease}button:hover{background:#000}button:active{transform:translateY(1px)}button:hover{background:#000;box-shadow:0 4px 12px rgba(0,0,0,.25);transform:translateY(-2px)}button:active{transform:translateY(0);box-shadow:0 2px 4px rgba(0,0,0,.2)}button.secondary{background:#4a4a4a;box-shadow:0 2px 6px rgba(0,0,0,.1)}button.secondary:hover{background:#2a2a2a;box-shadow:0 4px 10px rgba(0,0,0,.2);transform:translateY(-2px)}button.danger{background:#2a2a2a;padding:6px 12px;font-size:12px;box-shadow:0 2px 6px rgba(0,0,0,.1)}button.danger:hover{background:#000;box-shadow:0 3px 8px rgba(0,0,0,.2);transform:translateY(-1px)}#list{list-style:none;padding:0;margin:0 0 20px 0;background:#fff;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.08);overflow:hidden}#list li{padding:18px 20px;border-bottom:1px solid #efefef;display:flex;align-items:center;gap:14px;transition:all .3s ease;position:relative;background:#fff}#list li::before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:#1a1a1a;transform:scaleY(0);transition:transform .3s ease}#list li:hover{background:#fafafa;transform:translateX(4px)}#list li:hover::before{transform:scaleY(1)}#list li:last-child{border-bottom:none}#list li.done{opacity:.5}#list li.done .task-text{text-decoration:line-through;color:#999}#list li.done::before{background:#999}.task-text{flex:1;word-break:break-word;font-size:15px;line-height:1.5;font-weight:500}input[type=checkbox]{width:22px;height:22px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #d4d4d4;border-radius:6px;position:relative;transition:all .3s ease;flex-shrink:0}input[type=checkbox]:hover{border-color:#1a1a1a;transform:scale(1.1)}input[type=checkbox]:checked{background:#1a1a1a;border-color:#1a1a1a}input[type=checkbox]:checked::after{content:"✓";position:absolute;color:#fff;font-size:14px;font-weight:bold;top:50%;left:50%;transform:translate(-50%, -50%)}.actions{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}.notification{position:fixed;top:20px;right:20px;padding:16px 24px;background:#1a1a1a;color:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:slideIn .3s ease-out;z-index:1000;max-width:320px;font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:2000;align-items:center;justify-content:center}.modal.active{display:flex}.modal-content{background:#fff;padding:40px;border-radius:16px;max-width:420px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.4);animation:modalSlideIn .3s ease-out}.modal-content p{margin:0 0 32px 0;font-size:18px;font-weight:500;color:#1a1a1a;text-align:center;line-height:1.5}.modal-actions{display:flex;gap:12px;justify-content:center}.modal-actions button{flex:1;max-width:160px;padding:12px 24px;font-size:15px}@keyframes modalSlideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideIn{from{transform:translateX(400px);opacity:0}to{transform:translateX(0);opacity:1}}@media(max-width: 600px){body{margin:20px auto;padding:0 15px}h1{font-size:24px}.actions{flex-direction:column}.actions button{width:100%}.notification{right:15px;left:15px;max-width:none}}