:root{color:#263238;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f7fb;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input,textarea{font-family:inherit}button{cursor:pointer}#app{width:min(100% - 40px,900px);margin:0 auto;padding:48px 0}.app-header{margin-bottom:32px}.app-header h1{color:#1e293b;margin:0 0 8px;font-size:36px}.app-header p{color:#64748b;margin:0;font-size:14px}.summary{grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px;display:grid}.summary-card{border:1px solid #0000;border-radius:12px;padding:22px}.summary-card p{margin:0;font-size:14px;font-weight:600}.summary-card h2{margin:10px 0 0;font-size:32px}.total{color:#315da8;background:#e8f0fe}.unfinished{color:#98651a;background:#fff4df}.completed{color:#287548;background:#e5f5ec}.task-header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.task-header h2{color:#334155;margin:0;font-size:24px}.search-container{margin-bottom:20px;position:relative}.search-input{color:#263238;background:#fff;border:1px solid #cbd5e1;border-radius:10px;outline:none;width:100%;padding:14px 45px 14px 16px;font-size:14px;transition:border .2s,box-shadow .2s}.search-input:focus{border-color:#315da8;box-shadow:0 0 0 3px #bfdbfe}.search-input::placeholder{color:#94a3b8}.clear-search{color:#64748b;cursor:pointer;background:0 0;border:none;font-size:21px;display:none;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.clear-search.visible{display:block}.search-empty{text-align:center;background:#fff;border:1px dashed #cbd5e1;border-radius:12px;padding:40px 20px}.search-empty p{color:#334155;margin:0 0 8px;font-weight:600}.search-empty span{color:#64748b;font-size:14px}.btn-primary,.btn-secondary{border:none;border-radius:8px;padding:11px 18px;font-size:14px;font-weight:600;transition:background .2s}.btn-primary{color:#fff;background:#315da8}.btn-primary:hover{background:#234b91}.btn-secondary{color:#334155;background:#e2e8f0}.btn-secondary:hover{background:#cbd5e1}button:disabled{opacity:.6;cursor:not-allowed}.task-form,.inline-edit-form,.complete-form{background:#fff;border:1px solid #e2e8f0;border-radius:12px;margin-bottom:24px;padding:24px}.task-form[hidden]{display:none}.task-form h3,.inline-edit-form h3,.complete-form h3{color:#1e293b;margin:0 0 20px;font-size:19px}.task-form label,.inline-edit-form label,.complete-form label{margin:14px 0 7px;font-size:14px;font-weight:600;display:block}.task-form input,.task-form textarea,.inline-edit-form input,.inline-edit-form textarea,.complete-form input{color:#263238;background:#fff;border:1px solid #cbd5e1;border-radius:8px;outline:none;width:100%;padding:12px;font-size:14px;transition:border .2s,box-shadow .2s}.task-form input:focus,.task-form textarea:focus,.inline-edit-form input:focus,.inline-edit-form textarea:focus,.complete-form input:focus{border-color:#315da8;box-shadow:0 0 0 3px #bfdbfe}.task-form textarea,.inline-edit-form textarea{resize:vertical;min-height:90px}.form-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:22px;display:flex}.form-info{color:#64748b;margin:-8px 0 18px;font-size:14px;line-height:1.6}.task-list{gap:16px;margin:0;padding:0;list-style:none;display:grid}.task-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;min-width:0;padding:18px;box-shadow:0 2px 8px #0f172a0a}.empty-state{text-align:center;background:#fff;border:1px dashed #cbd5e1;border-radius:12px;padding:48px 20px}.empty-state p{color:#334155;margin:0 0 8px;font-weight:600}.empty-state span{color:#64748b;font-size:14px}.task-card-header{justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:12px;display:flex}.task-course{color:#315da8;margin:0 0 8px;font-size:13px;font-weight:600}.task-card-header h3{color:#1e293b;margin:0;font-size:19px;line-height:1.4}.status-badge{border-radius:20px;flex-shrink:0;padding:6px 12px;font-size:12px;font-weight:600}.status-unfinished{color:#98651a;background:#fff4df}.status-completed{color:#287548;background:#e5f5ec}.task-description{color:#64748b;margin:0;font-size:15px;line-height:1.6}.btn-complete,.btn-result{border:none;border-radius:8px;justify-content:center;align-items:center;gap:7px;width:100%;margin-top:10px;padding:12px 15px;font-size:14px;font-weight:600;text-decoration:none;transition:background .2s;display:flex}.btn-complete{color:#287548;background:#e5f5ec}.btn-complete:hover{background:#ccebd9}.btn-result{color:#315da8;background:#e8f0fe}.btn-result:hover{background:#d5e4fc}.complete-form{background:#f8fafc;margin:20px 0 0;padding:20px}.complete-form h3{margin-bottom:14px}.task-footer{border-top:1px solid #f1f5f9;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding-top:10px;display:flex}.task-footer p{color:#334155;margin:0;font-size:13px;font-weight:600}.task-footer p span{color:#94a3b8;margin-bottom:5px;font-size:11px;font-weight:400;display:block}.task-actions{align-items:center;gap:8px;display:flex}.btn-edit,.btn-delete{border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;transition:background .2s;display:flex}.btn-edit{color:#315da8;background:#e8f0fe}.btn-edit:hover{background:#d5e4fc}.btn-delete{color:#dc2626;background:#fee2e2}.btn-delete:hover{background:#fecaca}@media (width<=600px){#app{width:min(100% - 28px,900px);padding:32px 0}.app-header h1{font-size:28px}.summary{grid-template-columns:1fr;gap:10px;margin-bottom:32px}.summary-card{padding:16px}.summary-card h2{font-size:28px}.task-header{flex-direction:column;align-items:flex-start}.task-header h2{font-size:21px}.task-form,.inline-edit-form,.task-card{padding:18px}.task-card-header{flex-direction:column}.status-badge{align-self:flex-start}.form-actions{flex-direction:column-reverse}.form-actions button{width:100%}.task-footer{align-items:flex-end}}@media (width<=400px){.task-footer{gap:8px}.task-actions{gap:6px}}.technology-section{background:#fff;border:1px solid #e2e8f0;border-radius:16px;margin-top:48px;padding:28px}.technology-heading{margin-bottom:22px}.technology-heading h2{color:#263238;margin:0 0 8px;font-size:22px}.technology-heading p{color:#64748b;margin:0;font-size:14px;line-height:1.6}.technology-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.technology-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:20px}.technology-card h3{color:#315da8;margin:0 0 10px;font-size:16px}.technology-card p{color:#475569;text-align:justify;margin:0;font-size:14px;line-height:1.7}@media (width<=600px){.technology-section{margin-top:32px;padding:20px}.technology-grid{grid-template-columns:1fr}.technology-heading h2{font-size:20px}}