body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}:root{--text:#374151;--text-h:#111827;--bg:#f9fafb;--card-bg:#fff;--border:#e5e7eb;--accent:#3b82f6;--accent-hover:#2563eb;--accent-bg:#3b82f61a;--success:#10b981;--warning:#f59e0b;--danger:#ef4444;--danger-hover:#dc2626;--shadow:0 1px 3px #0000001a;--shadow-lg:0 4px 6px #0000001a;--radius:8px;--sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.6}#root{min-height:100vh}.app{flex-direction:column;min-height:100vh;display:flex}.navbar{background:var(--card-bg);border-bottom:1px solid var(--border);z-index:100;justify-content:space-between;align-items:center;height:60px;padding:0 24px;display:flex;position:sticky;top:0}.navbar-brand{color:var(--accent);cursor:pointer;font-size:20px;font-weight:700}.navbar-links{gap:8px;display:flex}.navbar-links button{color:var(--text);cursor:pointer;border-radius:var(--radius);background:0 0;border:none;padding:8px 16px;font-size:14px;transition:background .2s}.navbar-links button:hover{background:var(--accent-bg)}.navbar-links button.active{background:var(--accent);color:#fff}.main-content{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:24px}h1{color:var(--text-h);margin-bottom:24px;font-size:28px;font-weight:700}h2{color:var(--text-h);margin-bottom:16px;font-size:20px;font-weight:600}.btn{border-radius:var(--radius);cursor:pointer;border:1px solid var(--border);background:var(--card-bg);color:var(--text);padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s}.btn:hover{box-shadow:var(--shadow)}.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-primary:hover{background:var(--accent-hover)}.btn-edit{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}.btn-delete{color:var(--danger);border-color:var(--danger);background:#ef44441a}.btn-delete:hover{background:var(--danger);color:#fff}.btn-cancel{background:var(--card-bg)}.badge{color:#fff;border-radius:12px;padding:2px 8px;font-size:12px;font-weight:500;display:inline-block}.stats-grid{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px;display:grid}.stat-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);text-align:center;padding:20px}.stat-card h3{color:var(--text-h);font-size:32px;font-weight:700}.stat-card p{color:var(--text);margin-top:4px;font-size:14px}.stat-todo h3{color:#6b7280}.stat-progress h3{color:#f59e0b}.stat-completed h3{color:#10b981}.recent-tasks{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:24px}.task-list{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.task-list-item{border:1px solid var(--border);border-radius:var(--radius);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.task-title{font-weight:500}.tasks-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.tasks-header h1{margin-bottom:0}.task-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;display:grid}.task-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:20px}.task-header{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;display:flex}.task-header h3{color:var(--text-h);margin:0;font-size:16px;font-weight:600}.task-badges{flex-shrink:0;gap:6px;display:flex}.task-description{color:var(--text);margin-bottom:12px;font-size:14px;line-height:1.5}.task-due{color:var(--text);margin-bottom:12px;font-size:13px}.task-actions{border-top:1px solid var(--border);gap:8px;padding-top:12px;display:flex}.modal-overlay{z-index:200;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--card-bg);border-radius:var(--radius);width:90%;max-width:500px;max-height:90vh;padding:24px;overflow-y:auto}.modal h2{margin-bottom:20px}.form-group{margin-bottom:16px}.form-group label{color:var(--text-h);margin-bottom:6px;font-size:14px;font-weight:500;display:block}.form-group input,.form-group textarea,.form-group select{border:1px solid var(--border);border-radius:var(--radius);width:100%;font-size:14px;font-family:var(--sans);padding:10px 12px;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--accent);outline:none}.form-row{grid-template-columns:1fr 1fr;gap:16px;display:grid}.form-actions{justify-content:flex-end;gap:8px;margin-top:24px;display:flex}.error-message{color:var(--danger);border-radius:var(--radius);background:#ef44441a;margin-bottom:16px;padding:12px 16px;font-size:14px}.success-message{color:var(--success);border-radius:var(--radius);background:#10b9811a;margin-bottom:16px;padding:12px 16px;font-size:14px}.empty-state{text-align:center;color:var(--text);padding:40px 20px}.loading{flex-direction:column;justify-content:center;align-items:center;padding:60px 20px;display:flex}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading p{color:var(--text);margin-top:16px}.not-found{text-align:center;padding:80px 20px}.not-found h1{color:var(--text);margin-bottom:8px;font-size:72px}.not-found p{color:var(--text);font-size:18px}@media (width<=768px){.stats-grid{grid-template-columns:repeat(2,1fr)}.task-grid,.form-row{grid-template-columns:1fr}}@media (width<=480px){.stats-grid{grid-template-columns:1fr}.navbar{padding:0 16px}.main-content{padding:16px}}