:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;padding:0;min-width:320px;min-height:100vh}#root{margin:0;padding:0;min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column;background-color:#f8fafc}.app-header{background-color:#1e293b;color:#fff;padding:.75rem 2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 4px #0000001a}.app-header h1{margin:0;font-size:1.75rem;font-weight:600}.app-main{flex:1;padding:2rem;max-width:1200px;width:100%;margin:0 auto}.btn{padding:.5rem 1rem;border:none;border-radius:.375rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:.5rem}.btn:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.btn-primary{background-color:#3b82f6;color:#fff}.btn-primary:hover{background-color:#2563eb}.btn-secondary{background-color:#e2e8f0;color:#475569}.btn-secondary:hover{background-color:#cbd5e1}.btn-icon{background:none;border:none;padding:.5rem;cursor:pointer;font-size:1.25rem;border-radius:.25rem;transition:background-color .2s}.btn-icon:hover{background-color:#f1f5f9}.filter-bar{display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.select-trigger{padding:.5rem 1rem;background-color:#fff;border:1px solid #e2e8f0;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;min-width:150px;justify-content:space-between}.select-trigger:hover{border-color:#cbd5e1}.select-icon{font-size:.75rem;color:#64748b;cursor:pointer}.select-content{background-color:#fff;border:1px solid #e2e8f0;border-radius:.375rem;box-shadow:0 4px 6px #0000001a;margin-top:.25rem}.select-item{padding:.5rem 1rem;cursor:pointer;transition:background-color .2s}.select-item:hover{background-color:#f8fafc}.tag-filter{padding:.5rem 1rem;border:1px solid #e2e8f0;border-radius:.375rem;font-size:.875rem;min-width:200px}.tag-filter:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.todo-list{display:flex;flex-direction:column;gap:1rem}.todo-item{background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;padding:1rem;display:flex;gap:1rem;align-items:flex-start;transition:all .2s}.todo-item:hover{box-shadow:0 2px 4px #0000000d}.todo-item.completed{opacity:.7}.todo-item.completed .todo-title{text-decoration:line-through;color:#94a3b8}.checkbox{width:1.25rem;height:1.25rem;border:2px solid #cbd5e1;border-radius:.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.125rem}.checkbox[data-state=checked]{background-color:#3b82f6;border-color:#3b82f6}.checkbox-indicator{color:#fff;font-size:.875rem;font-weight:700}.todo-content{flex:1}.todo-title{margin:0 0 .25rem;font-size:1rem;font-weight:500;color:#1e293b}.todo-description{margin:0 0 .5rem;font-size:.875rem;color:#64748b;line-height:1.5}.todo-meta{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;font-size:.75rem}.due-date{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background-color:#f1f5f9;border-radius:.25rem;color:#475569;cursor:pointer}.due-date.overdue{background-color:#fee2e2;color:#dc2626}.due-date.due-today{background-color:#fef3c7;color:#d97706}.due-date.due-tomorrow{background-color:#dbeafe;color:#2563eb}.status-badge{padding:.25rem .5rem;border-radius:.25rem;font-weight:500;font-size:.75rem}.status-未着手{background-color:#e2e8f0;color:#475569}.status-進行中{background-color:#dbeafe;color:#2563eb}.status-完了{background-color:#d1fae5;color:#059669}.tags{display:flex;gap:.25rem;flex-wrap:wrap}.tag{padding:.125rem .5rem;background-color:#f3f4f6;border-radius:9999px;font-size:.75rem;color:#4b5563}.todo-actions{display:flex;gap:.25rem}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;animation:overlayShow .15s cubic-bezier(.16,1,.3,1)}.dialog-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;border-radius:.5rem;box-shadow:0 10px 25px #0000001a;width:90vw;max-width:500px;max-height:85vh;padding:1.5rem;animation:contentShow .15s cubic-bezier(.16,1,.3,1);overflow-y:auto}.dialog-title{margin:0 0 1.5rem;font-size:1.25rem;font-weight:600;color:#1e293b}.task-form{display:flex;flex-direction:column;gap:1rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-size:.875rem;font-weight:500;color:#475569}.form-group input,.form-group textarea,.form-group select{padding:.5rem;border:1px solid #e2e8f0;border-radius:.375rem;font-size:.875rem;font-family:inherit}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.dialog-actions{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.5rem}.error-message{background-color:#fee2e2;color:#dc2626;padding:.75rem;border-radius:.375rem;font-size:.875rem}.loading,.error,.empty-state{text-align:center;padding:3rem}.empty-state h2{margin:0 0 .5rem;color:#475569}.empty-state p{margin:0;color:#94a3b8}.export-import{display:flex;gap:.75rem}.menu-trigger{padding:.5rem;display:flex;align-items:center;justify-content:center}.dropdown-content{min-width:180px;background-color:#fff;border-radius:.375rem;padding:.25rem;box-shadow:0 10px 38px -10px #16171859,0 10px 20px -15px #16171833;animation:slideDownAndFade .4s cubic-bezier(.16,1,.3,1)}.dropdown-item{font-size:.875rem;line-height:1;color:#1e293b;border-radius:.25rem;display:flex;align-items:center;padding:.5rem .75rem;position:relative;-webkit-user-select:none;user-select:none;outline:none;cursor:pointer;gap:.75rem}.dropdown-item:hover{background-color:#f1f5f9}.dropdown-icon{flex-shrink:0}.dropdown-arrow{fill:#fff}@keyframes slideDownAndFade{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@keyframes overlayShow{0%{opacity:0}to{opacity:1}}@keyframes contentShow{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@media (max-width: 768px){.app-header{padding:.5rem 1rem}.app-header h1{font-size:1.25rem}.app-main{padding:1rem}.filter-bar{flex-direction:column}.select-trigger,.tag-filter{width:100%}.todo-item{flex-direction:column}.todo-actions{align-self:flex-end}}