:root{--text: #6b6375;--text-h: #08060d;--bg: #fff;--border: #e5e4e7;--code-bg: #f4f3ec;--accent: #aa3bff;--accent-bg: rgba(170, 59, 255, .1);--accent-border: rgba(170, 59, 255, .5);--social-bg: rgba(244, 243, 236, .5);--shadow: rgba(0, 0, 0, .1) 0 10px 15px -3px, rgba(0, 0, 0, .05) 0 4px 6px -2px;--sans: system-ui, "Segoe UI", Roboto, sans-serif;--heading: system-ui, "Segoe UI", Roboto, sans-serif;--mono: ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (max-width: 1024px){:root{font-size:16px}}@media (prefers-color-scheme: dark){:root{--text: #9ca3af;--text-h: #f3f4f6;--bg: #16171d;--border: #2e303a;--code-bg: #1f2028;--accent: #c084fc;--accent-bg: rgba(192, 132, 252, .15);--accent-border: rgba(192, 132, 252, .5);--social-bg: rgba(47, 48, 58, .5);--shadow: rgba(0, 0, 0, .4) 0 10px 15px -3px, rgba(0, 0, 0, .25) 0 4px 6px -2px}#social .button-icon{filter:invert(1) brightness(2)}}body{margin:0}#root{width:1126px;max-width:100%;margin:0 auto;text-align:center;border-inline:1px solid var(--border);min-height:100svh;display:flex;flex-direction:column;box-sizing:border-box}h1,h2{font-family:var(--heading);font-weight:500;color:var(--text-h)}h1{font-size:56px;letter-spacing:-1.68px;margin:32px 0}@media (max-width: 1024px){h1{font-size:36px;margin:20px 0}}h2{font-size:24px;line-height:118%;letter-spacing:-.24px;margin:0 0 8px}@media (max-width: 1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);display:inline-flex;border-radius:4px;color:var(--text-h)}code{font-size:15px;line-height:135%;padding:4px 8px;background:var(--code-bg)}:root{--primary-blue: #2563eb;--primary-hover: #1d4ed8;--primary-light: #eff6ff;--primary-light-border: #bfdbfe;--status-pending-bg: #fef3c7;--status-pending-color: #b45309;--status-pending-border: #fde68a;--status-completed-bg: #d1fae5;--status-completed-color: #065f46;--status-completed-border: #a7f3d0;--text-main: #1e293b;--text-sub: #64748b;--text-muted: #94a3b8;--bg-app: #f8fafc;--bg-card: #ffffff;--bg-input: #ffffff;--border-light: #e2e8f0;--border-focus: #3b82f6;--border-error: #ef4444;--bg-error-light: #fef2f2;--shadow-card: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-hover: 0 10px 20px -3px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04);--shadow-header: 0 1px 3px rgba(0, 0, 0, .05);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--transition-fast: .15s ease;--transition-normal: .25s ease}@media (prefers-color-scheme: dark){:root{--primary-blue: #3b82f6;--primary-hover: #60a5fa;--primary-light: rgba(59, 130, 246, .15);--primary-light-border: rgba(59, 130, 246, .3);--status-pending-bg: rgba(245, 158, 11, .15);--status-pending-color: #f59e0b;--status-pending-border: rgba(245, 158, 11, .3);--status-completed-bg: rgba(16, 185, 129, .15);--status-completed-color: #10b981;--status-completed-border: rgba(16, 185, 129, .3);--text-main: #f1f5f9;--text-sub: #94a3b8;--text-muted: #64748b;--bg-app: #0f172a;--bg-card: #1e293b;--bg-input: #0f172a;--border-light: #334155;--border-focus: #60a5fa;--shadow-card: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 2px 4px -2px rgba(0, 0, 0, .2);--shadow-hover: 0 10px 20px -3px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .3)}}body{background-color:var(--bg-app);color:var(--text-main);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;transition:background-color var(--transition-normal)}#root{width:100%!important;max-width:1300px!important;border-inline:none!important;padding:0 1.5rem}.app-container{display:flex;flex-direction:column;min-height:100vh;padding:2rem 0;box-sizing:border-box}.app-main{flex-grow:1;margin:2.5rem 0}.app-footer{text-align:center;padding:1.5rem 0 0;border-top:1px solid var(--border-light);color:var(--text-muted);font-size:.9rem}.toast-notification{position:fixed;top:24px;right:24px;z-index:1000;display:flex;align-items:center;justify-content:space-between;min-width:320px;padding:1rem;background-color:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-hover);border-left:5px solid transparent;animation:slideIn .3s cubic-bezier(.16,1,.3,1);box-sizing:border-box}.toast-success{border-left-color:#10b981}.toast-error{border-left-color:var(--border-error)}.toast-content{display:flex;align-items:center;gap:.75rem}.toast-icon{display:flex;align-items:center;justify-content:center}.toast-svg{width:20px;height:20px}.toast-success .toast-icon{color:#10b981}.toast-error .toast-icon{color:var(--border-error)}.toast-text{font-weight:500;font-size:.95rem;color:var(--text-main)}.toast-close{background:none;border:none;font-size:1.25rem;cursor:pointer;color:var(--text-muted);padding:0 0 0 1rem;transition:color var(--transition-fast)}.toast-close:hover{color:var(--text-main)}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.app-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:2rem;border-bottom:1px solid var(--border-light);padding-bottom:2rem}.header-brand{text-align:left}.header-brand h1{margin:0;font-size:2.25rem;font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,var(--primary-blue),#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-brand .subtitle{margin:.25rem 0 0;color:var(--text-sub);font-size:1.05rem}.stats-dashboard{display:flex;gap:1rem;flex-wrap:wrap}.stat-card{background-color:var(--bg-card);padding:1rem 1.5rem;border-radius:var(--radius-md);box-shadow:var(--shadow-card);border:1px solid var(--border-light);display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:110px;text-align:center;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}.stat-value{font-size:1.75rem;font-weight:700;color:var(--text-main);line-height:1.2}.stat-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-top:.25rem}.text-blue{color:var(--primary-blue)}.text-green{color:#10b981}.completion-progress-card{background:var(--primary-light);border-color:var(--primary-light-border)}.completion-progress-card .stat-value{color:var(--primary-blue)}.dashboard-grid{display:grid;grid-template-columns:360px 1fr;gap:2rem;align-items:start}.task-form-container{background-color:var(--bg-card);padding:2rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-card);border:1px solid var(--border-light);text-align:left}.task-form-container h2{margin:0 0 1.5rem;font-size:1.4rem;font-weight:700;color:var(--text-main)}.task-form{display:flex;flex-direction:column;gap:1.25rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-size:.9rem;font-weight:600;color:var(--text-main)}.form-group label .required{color:var(--border-error)}.form-group input,.form-group textarea,.form-group select{background-color:var(--bg-input);color:var(--text-main);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:.75rem;font-size:.95rem;font-family:inherit;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--primary-light)}.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-muted)}.form-group .input-error{border-color:var(--border-error)}.form-group .input-error:focus{box-shadow:0 0 0 3px var(--bg-error-light)}.error-text{color:var(--border-error);font-size:.8rem;font-weight:500}.status-select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:40px!important}.form-actions{display:flex;gap:.75rem;margin-top:.5rem}.btn{padding:.75rem 1.5rem;border-radius:var(--radius-md);font-size:.95rem;font-weight:600;cursor:pointer;border:none;outline:none;display:inline-flex;align-items:center;justify-content:center;transition:background-color var(--transition-fast),transform var(--transition-fast)}.btn:active{transform:scale(.98)}.btn-primary{background-color:var(--primary-blue);color:#fff;flex-grow:1}.btn-primary:hover{background-color:var(--primary-hover)}.btn-secondary{background-color:var(--border-light);color:var(--text-main)}.btn-secondary:hover{background-color:var(--text-muted);color:#fff}.btn-error{background-color:var(--border-error);color:#fff}.btn-error:hover{background-color:#dc2626}.task-list-container{display:flex;flex-direction:column;gap:1.5rem}.task-list-header{text-align:left}.task-list-header h2{margin:0;font-size:1.4rem;font-weight:700;color:var(--text-main)}.task-list{display:flex;flex-direction:column;gap:1rem}.task-item{background-color:var(--bg-card);padding:1.25rem 1.5rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-card);border:1px solid var(--border-light);display:flex;flex-direction:row;align-items:flex-start;gap:1rem;text-align:left;transition:transform var(--transition-normal),box-shadow var(--transition-normal),border-color var(--transition-normal)}.task-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--primary-light-border)}.checkbox-btn{width:24px;height:24px;border-radius:50%;border:2px solid var(--text-muted);background-color:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;padding:0;flex-shrink:0;margin-top:.15rem;transition:border-color var(--transition-fast),background-color var(--transition-fast)}.checkbox-btn:hover{border-color:var(--primary-blue);background-color:var(--primary-light)}.checkbox-btn.checked{background-color:var(--primary-blue);border-color:var(--primary-blue)}.check-icon{width:14px;height:14px;color:#fff}.task-item-content{flex-grow:1;display:flex;flex-direction:column;gap:.35rem}.task-title{margin:0;font-size:1.15rem;font-weight:600;color:var(--text-main);line-height:1.4;word-break:break-word;transition:color var(--transition-fast)}.task-description{margin:0;font-size:.95rem;color:var(--text-sub);line-height:1.5;white-space:pre-wrap;word-break:break-word}.task-completed .task-title{text-decoration:line-through;color:var(--text-muted)}.task-completed .task-description{color:var(--text-muted)}.status-badge{display:inline-flex;align-self:flex-start;padding:.2rem .6rem;border-radius:50px;font-size:.75rem;font-weight:600;letter-spacing:.02em;margin-top:.5rem;border:1px solid transparent}.badge-pending{background-color:var(--status-pending-bg);color:var(--status-pending-color);border-color:var(--status-pending-border)}.badge-completed{background-color:var(--status-completed-bg);color:var(--status-completed-color);border-color:var(--status-completed-border)}.task-item-actions{display:flex;gap:.5rem;flex-shrink:0}.icon-btn{width:36px;height:36px;border-radius:50%;border:none;background-color:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;color:var(--text-sub);transition:background-color var(--transition-fast),color var(--transition-fast)}.icon-btn svg{width:18px;height:18px}.edit-btn:hover{background-color:var(--primary-light);color:var(--primary-blue)}.delete-btn:hover{background-color:var(--bg-error-light);color:var(--border-error)}.task-list-empty{background-color:var(--bg-card);padding:4rem 2rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-card);border:1px solid var(--border-light);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.empty-icon-container{width:64px;height:64px;border-radius:50%;background-color:var(--primary-light);color:var(--primary-blue);display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem}.empty-icon{width:32px;height:32px}.task-list-empty h3{margin:0;font-size:1.3rem;font-weight:700;color:var(--text-main)}.task-list-empty p{margin:.5rem 0 0;color:var(--text-sub);max-width:320px;line-height:1.5;font-size:.95rem}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;color:var(--text-sub)}.spinner{width:40px;height:40px;border:4px solid var(--border-light);border-top:4px solid var(--primary-blue);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-banner{background-color:var(--bg-error-light);border:1px solid #fee2e2;border-radius:var(--radius-lg);padding:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;text-align:center;max-width:600px;margin:2rem auto;box-shadow:var(--shadow-card)}.error-icon{color:var(--border-error)}.error-icon svg{width:48px;height:48px}.error-message h3{margin:0;color:#991b1b;font-size:1.25rem}.error-message p{margin:.5rem 0 0;color:#b91c1c;line-height:1.5;font-size:.95rem}@media (max-width: 1024px){#root{padding:0 1rem}.app-container{padding:1.5rem 0}.app-header{flex-direction:column;align-items:flex-start;gap:1.5rem}.stats-dashboard{width:100%;display:grid;grid-template-columns:repeat(2,1fr)}.stat-card{min-width:0;padding:1rem}.dashboard-grid{grid-template-columns:1fr;gap:2rem}}@media (max-width: 480px){.stats-dashboard{grid-template-columns:1fr}.task-item{padding:1rem;position:relative;flex-wrap:wrap}.task-item-actions{position:absolute;top:1rem;right:1rem}.task-item-content{margin-right:5rem}.status-badge{margin-top:.75rem}.toast-notification{left:16px;right:16px;min-width:0}}