*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--primary: #6366f1;--primary-light: #818cf8;--primary-dark: #4f46e5;--accent: #06b6d4;--surface: #ffffff;--surface-2: #f8fafc;--surface-3: #f1f5f9;--border: #e2e8f0;--text: #0f172a;--text-2: #475569;--text-3: #94a3b8;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--radius: 12px;--radius-sm: 8px;--shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);--shadow-lg: 0 8px 32px rgba(99,102,241,.12)}body{font-family:Hiragino Sans,Noto Sans JP,Yu Gothic,sans-serif;background:linear-gradient(135deg,#f0f4ff,#fafafa);color:var(--text);min-height:100vh;line-height:1.6}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 1px 12px #0000000f}.header-content{max-width:800px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between}.week-nav{max-width:800px;margin:0 auto;padding:0 16px 12px;display:flex;align-items:center;gap:4px}.week-arrow{background:none;border:1.5px solid var(--border);border-radius:8px;width:32px;height:32px;font-size:1.25rem;color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,border-color .15s;line-height:1}.week-arrow:hover{background:var(--surface-3);border-color:var(--primary-light)}.week-days{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.day-btn{background:none;border:1.5px solid transparent;border-radius:10px;padding:6px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;transition:background .15s,border-color .15s}.day-btn:hover{background:var(--surface-3)}.day-name{font-size:.6875rem;font-weight:600;color:var(--text-3);letter-spacing:.03em}.day-num{font-size:.9375rem;font-weight:700;color:var(--text-2);line-height:1}.day-dot{width:4px;height:4px;border-radius:50%;background:var(--primary-light);position:absolute;bottom:4px}.day-btn.today .day-num{color:var(--primary)}.day-btn.today .day-name{color:var(--primary-light)}.day-btn.selected{background:var(--primary);border-color:var(--primary)}.day-btn.selected .day-name,.day-btn.selected .day-num{color:#fff}.day-btn.selected .day-dot{background:#ffffffb3}.week-days .day-btn:first-child .day-name{color:#f87171}.week-days .day-btn:last-child .day-name{color:#60a5fa}.day-btn.selected:first-child .day-name,.day-btn.selected:last-child .day-name{color:#ffffffe6}.header-content h1{font-size:1.25rem;font-weight:700;background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-right{display:flex;align-items:center;gap:12px}.data-actions{display:flex;gap:6px}.data-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:var(--radius-sm);font-size:.8rem;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:var(--surface);color:var(--text-2);transition:all .15s;white-space:nowrap}.data-btn:hover{border-color:var(--primary);color:var(--primary);background:#f0f4ff}.current-time{display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:600;color:var(--text-2);background:var(--surface-3);padding:6px 12px;border-radius:20px}.time-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 2px #10b9814d;animation:pulse 2s infinite}@keyframes pulse{0%,to{box-shadow:0 0 0 2px #10b9814d}50%{box-shadow:0 0 0 5px #10b9811a}}.app-main{max-width:800px;margin:0 auto;padding:32px 24px;width:100%;display:flex;flex-direction:column;gap:32px}.form-section{background:var(--surface);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);border:1px solid var(--border)}.form-section h2,.timeline-section h2{font-size:1rem;font-weight:700;color:var(--text-2);letter-spacing:.04em;text-transform:uppercase;margin-bottom:20px}.task-form{display:flex;flex-direction:column;gap:16px}.form-row{display:flex;gap:16px}.form-group{display:flex;flex-direction:column;gap:6px;flex:1}.form-group.full{width:100%}.form-group label{font-size:.8125rem;font-weight:600;color:var(--text-2)}.form-group input{padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.9375rem;font-family:inherit;color:var(--text);background:var(--surface-2);transition:border-color .2s,box-shadow .2s;outline:none}.form-group input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #6366f11f;background:var(--surface)}.form-group input::placeholder{color:var(--text-3)}.error-msg{font-size:.8125rem;color:var(--danger);background:#fef2f2;border:1px solid #fecaca;border-radius:var(--radius-sm);padding:8px 12px}.form-actions{display:flex;gap:10px}.btn-primary{padding:10px 24px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.9375rem;font-weight:600;font-family:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 2px 8px #6366f159}.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}.btn-primary:active{transform:translateY(0)}.btn-secondary{padding:10px 20px;background:var(--surface-3);color:var(--text-2);border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.9375rem;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s}.btn-secondary:hover{background:var(--border)}.timeline-section{display:flex;flex-direction:column}.empty-state{text-align:center;padding:64px 24px;color:var(--text-3);background:var(--surface);border-radius:var(--radius);border:1.5px dashed var(--border)}.empty-icon{font-size:2.5rem;margin-bottom:12px}.empty-state p{font-size:1rem;font-weight:500;color:var(--text-2)}.empty-sub{font-size:.875rem!important;color:var(--text-3)!important;margin-top:6px;font-weight:400!important}.timeline{display:flex;flex-direction:column}.timeline-item{display:flex;gap:0}.timeline-connector{display:flex;flex-direction:column;align-items:center;width:36px;flex-shrink:0}.timeline-dot{width:14px;height:14px;border-radius:50%;background:var(--border);border:2.5px solid var(--surface);box-shadow:0 0 0 2px var(--border);z-index:1;flex-shrink:0;margin-top:18px;transition:background .2s,box-shadow .2s}.timeline-line{width:2px;flex:1;background:linear-gradient(to bottom,var(--border) 0%,var(--border) 100%);min-height:16px;margin:4px 0}.timeline-item.active .timeline-dot{background:var(--primary);box-shadow:0 0 0 3px #6366f140;animation:pulse-primary 2s infinite}.timeline-item.active .timeline-line{background:linear-gradient(to bottom,var(--primary-light),var(--border))}.timeline-item.done .timeline-dot{background:var(--success);box-shadow:0 0 0 2px #10b98133}.timeline-item.done .timeline-line{background:var(--success);opacity:.3}.timeline-item.upcoming .timeline-dot{background:var(--surface-3);box-shadow:0 0 0 2px var(--border)}@keyframes pulse-primary{0%,to{box-shadow:0 0 0 3px #6366f140}50%{box-shadow:0 0 0 6px #6366f11a}}.timeline-card{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin:8px 0 8px 8px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}.timeline-card:hover{transform:translate(2px);box-shadow:0 4px 20px #00000014}.timeline-item.active .timeline-card{border-color:var(--primary-light);background:linear-gradient(135deg,#fafbff,#f5f3ff);box-shadow:0 2px 16px #6366f11f}.timeline-item.done .timeline-card{opacity:.7;background:var(--surface-2)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.card-time{display:flex;align-items:center;gap:8px}.time-range{font-size:.8125rem;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums}.duration-badge{font-size:.75rem;color:var(--text-3);background:var(--surface-3);padding:2px 8px;border-radius:10px;font-weight:500}.card-actions{display:flex;gap:4px;opacity:0;transition:opacity .15s}.timeline-card:hover .card-actions{opacity:1}.icon-btn{background:none;border:none;cursor:pointer;font-size:.875rem;padding:4px 6px;border-radius:6px;transition:background .15s;line-height:1}.icon-btn:hover{background:var(--surface-3)}.card-body{display:flex;align-items:center;justify-content:space-between;gap:12px}.task-name{font-size:1rem;font-weight:600;color:var(--text)}.timeline-item.done .task-name{text-decoration:line-through;color:var(--text-3)}.status-badge{font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:10px;white-space:nowrap;letter-spacing:.04em;flex-shrink:0}.status-badge.active{background:#6366f11f;color:var(--primary)}.status-badge.done{background:#10b9811a;color:var(--success)}.status-badge.upcoming{background:var(--surface-3);color:var(--text-3)}.history-section{display:flex;flex-direction:column;gap:8px}.history-label{font-size:.75rem;font-weight:600;color:var(--text-3);letter-spacing:.04em;text-transform:uppercase}.history-tags{display:flex;flex-wrap:wrap;gap:6px}.history-tag-wrap{display:flex;align-items:center}.history-tag{padding:4px 12px;background:var(--surface-3);border:1.5px solid var(--border);font-size:.8125rem;font-weight:500;color:var(--text-2);cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,color .15s;border-right:none;border-radius:20px 0 0 20px}.history-tag:hover{background:#6366f11a;border-color:var(--primary-light);color:var(--primary)}.history-tag.active{background:#6366f11f;border-color:var(--primary-light);color:var(--primary);font-weight:600}.history-remove{padding:4px 7px;background:var(--surface-3);border:1.5px solid var(--border);border-left:none;border-radius:0 20px 20px 0;font-size:.75rem;color:var(--text-3);cursor:pointer;font-family:inherit;line-height:1;transition:background .15s,color .15s}.history-remove:hover{background:#fee2e2;color:var(--danger)}.duration-section{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--radius-sm)}.duration-label{font-size:.75rem;font-weight:600;color:var(--text-3);letter-spacing:.04em;text-transform:uppercase}.duration-presets{display:flex;flex-wrap:wrap;gap:6px}.preset-btn{padding:5px 12px;background:var(--surface);border:1.5px solid var(--border);border-radius:20px;font-size:.8125rem;font-weight:500;color:var(--text-2);cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,color .15s}.preset-btn:hover{background:#6366f114;border-color:var(--primary-light);color:var(--primary)}.preset-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}.duration-custom{display:flex;align-items:center;gap:6px}.duration-input{width:56px;padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.9375rem;font-family:inherit;color:var(--text);background:var(--surface);text-align:center;outline:none;transition:border-color .2s,box-shadow .2s}.duration-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #6366f11f}.duration-unit{font-size:.875rem;color:var(--text-2);font-weight:500}.duration-select{padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.875rem;font-family:inherit;color:var(--text);background:var(--surface);outline:none;cursor:pointer;transition:border-color .2s}.duration-select:focus{border-color:var(--primary)}.header-title-area{display:flex;flex-direction:column;gap:8px}.tab-switcher{display:flex;gap:4px}.tab-btn{padding:5px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--surface-3);color:var(--text-2);font-size:.8rem;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.tab-btn:hover{background:#6366f114;border-color:var(--primary-light);color:var(--primary)}.tab-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}.todo-container{display:flex;flex-direction:column;gap:24px}.todo-select{padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.9375rem;font-family:inherit;color:var(--text);background:var(--surface-2);outline:none;cursor:pointer;transition:border-color .2s}.todo-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #6366f11f}.todo-category-section{background:var(--surface);border-radius:var(--radius);border:1.5px solid var(--cat-border, var(--border));padding:20px 24px;box-shadow:var(--shadow)}.todo-category-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.todo-category-title{font-size:1rem;font-weight:700;color:var(--cat-color, var(--text));letter-spacing:.02em;text-transform:none;margin-bottom:0}.todo-count-badge{font-size:.75rem;font-weight:700;background:var(--cat-bg, var(--surface-3));color:var(--cat-color, var(--text-2));border:1.5px solid var(--cat-border, var(--border));padding:2px 10px;border-radius:12px}.todo-empty{font-size:.875rem;color:var(--text-3);padding:12px 0;text-align:center}.todo-list{list-style:none;display:flex;flex-direction:column;gap:8px}.todo-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);transition:background .15s}.todo-item:hover{background:var(--cat-bg, var(--surface-3))}.todo-item:hover .todo-item-actions{opacity:1}.todo-item.done{opacity:.6;background:var(--surface-3)}.todo-check{width:22px;height:22px;flex-shrink:0;border-radius:6px;border:2px solid var(--cat-color, var(--border));background:var(--surface);cursor:pointer;font-size:.75rem;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}.todo-check.checked{background:var(--cat-color, var(--success));border-color:var(--cat-color, var(--success))}.todo-item-body{flex:1;display:flex;align-items:center;gap:10px;min-width:0}.todo-item-name{font-size:.9375rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.todo-item.done .todo-item-name{text-decoration:line-through;color:var(--text-3)}.todo-item-tag{font-size:.75rem;font-weight:600;color:var(--text-3);background:var(--surface-3);border:1px solid var(--border);padding:2px 8px;border-radius:10px;white-space:nowrap}.todo-item-actions{opacity:0;transition:opacity .15s;flex-shrink:0}@media(max-width:600px){.app-main,.form-section{padding:20px 16px}.form-row{flex-direction:column;gap:12px}.header-content h1{font-size:1.1rem}}