:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}body{font-family:Inter,Arial,sans-serif;margin:0;background:#e0e5ec;color:#1a1a1a;display:flex;justify-content:center;padding:20px;min-height:100vh;transition:background .3s,color .3s}.App{width:100%;max-width:500px;background:#e0e5ec;padding:30px;border-radius:20px;box-shadow:20px 20px 60px #bebebe,-20px -20px 60px #fff;position:relative;transition:background .3s,color .3s}.App.dark{background:#1c1c1c;color:#f1f1f1;box-shadow:20px 20px 60px #141414,-20px -20px 60px #252525}h1{text-align:center;margin-bottom:25px;font-size:2.2rem;letter-spacing:.5px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.mode-btn{padding:6px 14px;border-radius:12px;border:none;cursor:pointer;font-weight:500;background:linear-gradient(135deg,#6a11cb,#2575fc);color:#fff;box-shadow:5px 5px 15px #bebebe,-5px -5px 15px #fff;transition:transform .2s,box-shadow .2s}.mode-btn:hover{transform:translateY(-2px) rotate(-2deg);box-shadow:3px 3px 10px #bebebe,-3px -3px 10px #fff}.input-container{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-bottom:20px}.input-container input[type=text],.input-container input[type=date],.input-container select{padding:12px;border-radius:15px;border:none;background:#e0e5ec;box-shadow:inset 5px 5px 10px #bebebe,inset -5px -5px 10px #fff;flex:1;min-width:120px;transition:all .3s}.App.dark .input-container input[type=text],.App.dark .input-container input[type=date],.App.dark .input-container select{background:#1c1c1c;box-shadow:inset 5px 5px 10px #141414,inset -5px -5px 10px #252525;color:#f1f1f1}.input-container input:focus,.input-container select:focus{outline:none;box-shadow:inset 2px 2px 6px #bebebe,inset -2px -2px 6px #fff}.input-container button{flex-shrink:0;padding:12px 20px;border-radius:15px;border:none;cursor:pointer;background:linear-gradient(135deg,#6a11cb,#2575fc);color:#fff;font-weight:600;transition:all .2s;box-shadow:5px 5px 15px #bebebe,-5px -5px 15px #fff}.input-container button:hover{transform:translateY(-2px) scale(1.02);box-shadow:3px 3px 10px #bebebe,-3px -3px 10px #fff}.filters{display:flex;justify-content:space-between;margin-bottom:15px}.filters button{flex:1;margin:0 4px;padding:8px 0;border:none;border-radius:12px;background:#e0e5ec;color:#1a1a1a;font-weight:500;box-shadow:5px 5px 15px #bebebe,-5px -5px 15px #fff;transition:all .3s}.filters button.active{background:linear-gradient(135deg,#6a11cb,#2575fc);color:#fff;transform:scale(1.08) rotate(-1deg)}.App.dark .filters button{background:#1c1c1c;color:#f1f1f1;box-shadow:5px 5px 15px #141414,-5px -5px 15px #252525}.App.dark .filters button.active{background:linear-gradient(135deg,#6a11cb,#2575fc)}.export-btn{width:100%;margin-bottom:20px;padding:12px 0;border-radius:15px;border:none;cursor:pointer;font-weight:500;background:linear-gradient(135deg,#11998e,#38ef7d);color:#fff;box-shadow:5px 5px 15px #bebebe,-5px -5px 15px #fff;transition:all .2s}.export-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:3px 3px 10px #bebebe,-3px -3px 10px #fff}.tasks-list{display:flex;flex-direction:column;gap:15px}.task{display:flex;justify-content:space-between;align-items:center;padding:16px;border-radius:20px;background:#e0e5ec;box-shadow:8px 8px 20px #bebebe,-8px -8px 20px #fff;transition:all .3s;opacity:0;animation:fadeIn .3s forwards;transform-style:preserve-3d}.App.dark .task{background:#1c1c1c;box-shadow:8px 8px 20px #141414,-8px -8px 20px #252525}.task:hover{transform:translateY(-4px) rotateX(2deg) rotateY(2deg);box-shadow:0 15px 25px #0003}.task.completed span{text-decoration:line-through;color:gray}.task.dragging{transform:scale(1.05) rotate(1deg);box-shadow:0 12px 20px #00000040}.task.overdue{border-left:6px solid #ff1744;animation:pulse 1s infinite}.task-info{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.due-date{font-size:12px;color:#555;font-weight:500}.App.dark .due-date{color:#ccc}.priority{font-size:12px;font-weight:600;padding:3px 10px;border-radius:12px;color:#fff;transition:transform .2s}.priority.high{background:linear-gradient(135deg,#f44336,#e53935)}.priority.medium{background:linear-gradient(135deg,#ff9800,#fb8c00)}.priority.low{background:linear-gradient(135deg,#4caf50,#43a047)}.priority:hover{transform:scale(1.15) rotate(-2deg)}.delete-btn{background:transparent;border:none;color:#ff1744;font-size:20px;cursor:pointer;transition:all .2s}.delete-btn:hover{transform:scale(1.3) rotate(10deg);color:#d50000}.toast{position:absolute;top:-50px;left:50%;transform:translate(-50%);background:#4caf50;color:#fff;padding:10px 20px;border-radius:15px;font-weight:500;animation:slideDown .3s}@keyframes fadeIn{to{opacity:1}}@keyframes pulse{0%{background-color:#e0e5ec}50%{background-color:#ffe6e6}to{background-color:#e0e5ec}}@keyframes slideDown{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media (max-width: 520px){.input-container{flex-direction:column}input[type=text],input[type=date],select,button{width:100%}}