:root{--primary: #8b5cf6;--primary-hover: #7c3aed;--primary-light: rgba(139, 92, 246, .1);--bg-app: #f8fafc;--bg-card: #ffffff;--text-main: #1e293b;--text-muted: #64748b;--border-light: #e2e8f0;--accent-purple: #a855f7;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--glass-bg: rgba(255, 255, 255, .7);--glass-border: rgba(255, 255, 255, .5);--glass-blur: blur(12px);--font-heading: "Outfit", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--font-mono: ui-monospace, Consolas, monospace;font:16px/1.6 var(--font-body);color-scheme:light dark;color:var(--text-main);background:var(--bg-app);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme: dark){:root{--bg-app: #0f172a;--bg-card: #1e293b;--text-main: #f1f5f9;--text-muted: #94a3b8;--border-light: #334155;--primary: #a78bfa;--primary-hover: #c4b5fd;--primary-light: rgba(167, 139, 250, .15);--glass-bg: rgba(30, 41, 59, .7);--glass-border: rgba(255, 255, 255, .1)}}body{margin:0;min-height:100vh}#root{width:100%;max-width:1100px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:40px 20px;box-sizing:border-box}h1,h2,h3{font-family:var(--font-heading);font-weight:700;color:var(--text-main);margin-top:0}h1{font-size:3rem;letter-spacing:-.04em;margin-bottom:.5rem;background:linear-gradient(135deg,var(--primary),var(--accent-purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}h2{font-size:1.5rem;letter-spacing:-.02em}p{margin:0;color:var(--text-muted)}code{font-family:var(--font-mono);font-size:.9em;padding:.2em .4em;background:var(--border-light);border-radius:4px}.app-header{text-align:center;margin-bottom:24px}.app-subtitle{font-size:1.1rem;color:var(--text-muted);margin-top:4px;font-weight:500}.task-card{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:16px;margin-bottom:12px;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.task-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary)}.task-card--done{opacity:.7;background:var(--bg-app)}.task-card--done .task-card__title{text-decoration:line-through;color:var(--text-muted)}.task-card__checkbox{width:22px;height:22px;cursor:pointer;accent-color:var(--primary);border-radius:6px}.task-card__info{flex:1;min-width:0;text-align:left}.task-card__title{font-size:1.1rem;font-weight:600;color:var(--text-main);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task-card__description{font-size:.9rem;color:var(--text-muted);margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.task-card__priority{font-size:12px;font-weight:700;text-transform:uppercase;padding:4px 12px;border-radius:99px;letter-spacing:.05em;margin-left:auto;white-space:nowrap}.task-card__priority--high{background:#fee2e2;color:#991b1b}.task-card__priority--medium{background:#fef3c7;color:#92400e}.task-card__priority--low{background:#dcfce7;color:#166534}@media (prefers-color-scheme: dark){.task-card__priority--high{background:#ef444433;color:#fca5a5}.task-card__priority--medium{background:#f59e0b33;color:#fcd34d}.task-card__priority--low{background:#10b98133;color:#6ee7b7}}.task-card__actions{display:flex;gap:8px}.task-card__action{background:none;border:none;padding:8px;border-radius:8px;color:var(--text-muted);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.task-card__action:hover{background:var(--primary-light);color:var(--primary)}.task-card__action--delete:hover{background:#fee2e2;color:#ef4444}.task-card__action--confirm{background:#ef4444;color:#fff;font-weight:600;font-size:13px;padding:6px 12px;border-radius:8px;border:none;cursor:pointer}.task-card__action--cancel{background:var(--border-light);color:var(--text-main);font-weight:600;font-size:13px;padding:6px 12px;border-radius:8px;border:none;cursor:pointer}.task-form{background:var(--bg-card);border:1px solid var(--border-light);border-radius:20px;padding:24px;margin-bottom:0;width:100%;box-sizing:border-box;box-shadow:var(--shadow-md)}.task-form__header-row{display:flex;gap:16px;margin-bottom:20px;align-items:flex-end}.task-form__field{display:flex;flex-direction:column}.task-form__field:first-child{flex:3}.task-form__field:last-child{flex:1;min-width:140px}.task-form__field label{margin-bottom:8px;font-size:14px;font-weight:600;color:var(--text-main);text-align:left}.task-form__field input,.task-form__field select,.task-form__field textarea{width:100%;padding:12px 16px;border:1px solid var(--border-light);border-radius:12px;font-size:15px;background-color:var(--bg-app);color:var(--text-main);box-sizing:border-box;transition:all .2s}.task-form__field input:focus,.task-form__field select:focus,.task-form__field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.task-form__submit{width:100%;padding:14px;background:linear-gradient(135deg,var(--primary),var(--accent-purple));color:#fff;border:none;border-radius:12px;font-weight:700;font-size:16px;cursor:pointer;margin-top:10px;transition:all .2s;box-shadow:0 4px 12px #8b5cf633}.task-form__submit:hover{transform:translateY(-1px);box-shadow:0 6px 16px #8b5cf64d;filter:brightness(1.1)}.task-form__submit:active{transform:translateY(0)}.progress{background:var(--bg-card);padding:20px;border-radius:16px;border:1px solid var(--border-light);box-shadow:var(--shadow-sm)}.progress__header{display:flex;justify-content:space-between;margin-bottom:12px;align-items:baseline}.progress__label{font-size:.95rem;font-weight:500;color:var(--text-muted)}.progress__percentage{font-size:1.25rem;font-weight:800;color:var(--primary);font-family:var(--font-heading)}.progress__track{height:8px;background:var(--bg-app);border-radius:99px;overflow:hidden}.progress__bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent-purple));border-radius:99px;transition:width .6s cubic-bezier(.34,1.56,.64,1)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a99;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}.modal{background:var(--bg-card);border:1px solid var(--border-light);border-radius:24px;padding:32px;width:100%;max-width:500px;box-shadow:0 25px 50px -12px #00000040;box-sizing:border-box;animation:modalScale .3s cubic-bezier(.34,1.56,.64,1)}@keyframes modalScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}.modal__title{margin:0;font-size:1.5rem;font-family:var(--font-heading);font-weight:700;color:var(--text-main)}.modal__close{background:var(--bg-app);border:1px solid var(--border-light);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:all .2s;padding:0}.modal__close:hover{background:#fee2e2;color:#ef4444;border-color:#fca5a5}.modal__field{margin-bottom:20px}.modal__field label{display:block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--text-main)}.modal__field input,.modal__field select,.modal__field textarea{width:100%;padding:12px 16px;border:1px solid var(--border-light);border-radius:12px;font-size:15px;font-family:var(--font-body);background:var(--bg-app);color:var(--text-main);box-sizing:border-box;transition:all .2s}.modal__field input:focus,.modal__field select:focus,.modal__field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.modal__footer{display:flex;justify-content:flex-end;gap:12px;margin-top:32px}.modal__btn{padding:12px 24px;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;border:none;transition:all .2s}.modal__btn--cancel{background:var(--bg-app);color:var(--text-main);border:1px solid var(--border-light)}.modal__btn--cancel:hover{background:var(--border-light)}.modal__btn--save{background:linear-gradient(135deg,var(--primary),var(--accent-purple));color:#fff;box-shadow:0 4px 12px #8b5cf633}.modal__btn--save:hover{transform:translateY(-1px);box-shadow:0 6px 16px #8b5cf64d;filter:brightness(1.1)}.app-container{display:flex;flex-direction:column;gap:20px}.main-content{display:flex;gap:32px;align-items:stretch}.sidebar{flex:1;position:sticky;top:24px}.tasks-section{flex:1.5;display:flex;flex-direction:column}@media (max-width: 950px){.main-content{flex-direction:column}.sidebar{position:static;width:100%}}.full-width-container{width:100%}.text-center{text-align:center}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.mt-2{margin-top:.5rem}.text-gray-500{color:var(--text-muted)}.text-lg{font-size:1.125rem}.text-purple-600{color:var(--primary)}.hover\:underline:hover{text-decoration:underline}.text-sm{font-size:.875rem}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;background:var(--bg-card);border:2px dashed var(--border-light);border-radius:24px;height:100%;box-sizing:border-box;transition:all .3s ease}.empty-state:hover{border-color:var(--primary);background:var(--primary-light)}.empty-state__icon{font-size:64px;margin-bottom:20px;filter:drop-shadow(0 10px 15px rgba(139,92,246,.2))}.empty-state__title{margin:0;font-size:1.25rem;font-family:var(--font-heading);font-weight:700;color:var(--text-main)}.empty-state__description{margin:8px 0 0;font-size:1rem;color:var(--text-muted)}.search-container{position:relative;width:100%;max-width:100%;margin:0}.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;z-index:1}.search-input{width:100%;padding:14px 16px 14px 48px;font-size:1rem;font-family:var(--font-body);border:1px solid var(--border-light);border-radius:16px;background-color:var(--bg-card);transition:all .3s cubic-bezier(.4,0,.2,1);outline:none;box-sizing:border-box;color:var(--text-main);box-shadow:var(--shadow-sm)}.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light),var(--shadow-md);transform:translateY(-1px)}.search-input::placeholder{color:var(--text-muted);opacity:.7}