:root{--task-add-color: var(--accent-orange);--task-export-color: var(--secondary-600);--task-analysis-primary: var(--secondary-700);--task-analysis-secondary: var(--secondary-800)}.instructions-header{max-width:var(--container-2xl);margin:var(--spacing-4) auto var(--spacing-8);padding:0 var(--spacing-4);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-secondary)}.instructions-header summary{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-primary);cursor:pointer;outline:none;padding:var(--spacing-4);text-align:center}.instructions-header summary:hover{color:var(--primary-600)}.instructions-header .instructions-content{padding:0 var(--spacing-4) var(--spacing-4);border-top:1px solid var(--border-secondary);margin-top:0}.instructions-header .instructions-content h4{text-align:center;margin-bottom:var(--spacing-4);color:var(--text-primary);font-size:var(--text-base)}.instructions-header .instructions-content ul{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:var(--spacing-2);margin:0;list-style:none}.instructions-header .instructions-content ul li{background:var(--bg-tertiary);padding:var(--spacing-3);border-radius:var(--radius-base);border:1px solid var(--border-primary);text-align:center;font-size:var(--text-sm)}.instructions-header .instructions-content ul li::before{content:'✓';color:var(--success);margin-right:var(--spacing-2);font-weight:bold}.instructions-header .instructions-content .notice{text-align:center;margin-top:var(--spacing-4);font-size:var(--text-xs);color:var(--warning);font-style:italic}@media (max-width: 640px){.instructions-header{margin:var(--spacing-2) auto var(--spacing-4);padding:0 var(--spacing-2)}.instructions-header .instructions-content ul{grid-template-columns:1fr}}.taskspector-main{display:grid;grid-template-columns:494px 1fr;gap:var(--spacing-6);max-width:var(--container-2xl);margin:var(--spacing-8) auto;padding:0 var(--spacing-4)}@media (max-width: 1024px){.taskspector-main{grid-template-columns:1fr;gap:var(--spacing-4)}}@media (max-width: 768px){.taskspector-main{grid-template-columns:1fr;margin:var(--spacing-4) auto}}.taskspector-sidebar{background:var(--bg-tertiary);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--border-primary);padding:var(--spacing-6);height:80vh;max-height:800px;min-height:600px;position:sticky;top:var(--spacing-4);display:flex;flex-direction:column}@media (max-width: 1024px){.taskspector-sidebar{position:static;height:auto;min-height:auto;max-height:none}}.digital-clock-container{margin-bottom:var(--spacing-8);text-align:center;position:relative}@media (max-width: 768px){.digital-clock-container{margin-bottom:var(--spacing-6)}}@media (max-width: 480px){.digital-clock-container{margin-bottom:var(--spacing-4)}}.digital-clock{background:var(--bg-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--spacing-8) var(--spacing-6);box-shadow:var(--shadow-sm);position:relative;width:100%;margin:0 auto}.digital-clock .clock-time{font-size:4rem;font-weight:700;font-family:'Arial', 'Helvetica', sans-serif;color:var(--text-primary);letter-spacing:0.1em;line-height:1.1;margin-bottom:var(--spacing-4);text-align:center;word-break:keep-all;white-space:nowrap}@media (max-width: 768px){.digital-clock .clock-time{font-size:3.5rem;margin-bottom:var(--spacing-3)}}@media (max-width: 480px){.digital-clock .clock-time{font-size:2.8rem;letter-spacing:0.08em}}@media (max-width: 360px){.digital-clock .clock-time{font-size:2.4rem}}@media (max-width: 320px){.digital-clock .clock-time{font-size:2rem;letter-spacing:0.05em}}.digital-clock .clock-date{font-size:var(--text-xl);font-family:'Arial', 'Helvetica', sans-serif;color:var(--text-secondary);letter-spacing:0.05em;font-weight:500;text-align:center;word-break:keep-all;white-space:nowrap}@media (max-width: 768px){.digital-clock .clock-date{font-size:var(--text-lg)}}@media (max-width: 480px){.digital-clock .clock-date{font-size:var(--text-base)}}@media (max-width: 360px){.digital-clock .clock-date{font-size:var(--text-base)}}@media (max-width: 320px){.digital-clock .clock-date{font-size:var(--text-sm);letter-spacing:0.03em}}.timer-container{margin-bottom:var(--spacing-8);background:linear-gradient(145deg, #f8f9fa, #fff);border:1px solid #e9ecef;border-radius:16px;padding:var(--spacing-6);box-shadow:0 4px 12px rgba(0,0,0,0.05),inset 0 1px 2px rgba(255,255,255,0.8)}.timer-container h3{font-size:var(--text-lg);font-weight:600;margin-bottom:var(--spacing-6);color:#1a1a1a;text-align:center;font-family:'Arial', 'Helvetica', sans-serif;position:relative}.timer-container h3::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:40px;height:1px;background:linear-gradient(90deg, transparent, #adb5bd, transparent)}.timer-display-main{background:linear-gradient(145deg, #fff, #f8f9fa);padding:var(--spacing-6) var(--spacing-4);border-radius:12px;text-align:center;margin-bottom:var(--spacing-6);border:1px solid #e9ecef;box-shadow:inset 0 2px 4px rgba(0,0,0,0.03),0 1px 3px rgba(255,255,255,0.9);position:relative;overflow:hidden;min-height:80px}.timer-display-main::before{content:'';position:absolute;top:8px;right:8px;width:6px;height:6px;background:#28a745;border-radius:50%;box-shadow:0 0 4px rgba(40,167,69,0.4)}.timer-display-main span{font-size:2.2rem;font-family:'Arial', 'Helvetica', sans-serif;font-weight:700;color:#1a1a1a;text-shadow:none;letter-spacing:0.08em;display:block;word-break:keep-all;white-space:nowrap}@media (max-width: 768px){.timer-display-main span{font-size:1.8rem;letter-spacing:0.05em}}@media (max-width: 480px){.timer-display-main span{font-size:1.5rem}}.timer-controls-main{display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-6);justify-content:center}.timer-controls-main button{padding:var(--spacing-3) var(--spacing-4);font-size:var(--text-sm);font-family:'Arial', 'Helvetica', sans-serif;border-radius:8px;border:1px solid #dee2e6;background:linear-gradient(145deg, #fff, #f8f9fa);color:#1a1a1a;box-shadow:0 2px 4px rgba(0,0,0,0.05),inset 0 1px 2px rgba(255,255,255,0.8);transition:all var(--duration-200) var(--ease-out);min-width:80px;font-weight:500}.timer-controls-main button i{margin-right:var(--spacing-1);opacity:0.8}.timer-controls-main button:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,0.1),inset 0 1px 2px rgba(255,255,255,0.9);color:#000000}.timer-controls-main button:active{transform:translateY(0);box-shadow:0 2px 4px rgba(0,0,0,0.1),inset 0 2px 4px rgba(0,0,0,0.05)}.timer-preset{display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--spacing-3)}.timer-preset .preset-btn{padding:var(--spacing-3) var(--spacing-4);background:linear-gradient(145deg, #f8f9fa, #e9ecef);border:1px solid #dee2e6;border-radius:8px;color:#1a1a1a;font-size:var(--text-sm);font-family:'Arial', 'Helvetica', sans-serif;font-weight:600;cursor:pointer;transition:all var(--duration-200) var(--ease-out);box-shadow:0 2px 4px rgba(0,0,0,0.03),inset 0 1px 2px rgba(255,255,255,0.7);position:relative;text-align:center}.timer-preset .preset-btn:hover{background:linear-gradient(145deg, #fff, #f8f9fa);transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,0.08),inset 0 1px 2px rgba(255,255,255,0.9);color:#000000;border-color:#ced4da}.timer-preset .preset-btn:active{transform:translateY(0);box-shadow:0 2px 4px rgba(0,0,0,0.05),inset 0 2px 4px rgba(0,0,0,0.03)}.instructions-compact{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-3);margin-top:auto}.instructions-compact summary{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);cursor:pointer;outline:none}.instructions-compact .instructions-content{margin-top:var(--spacing-3);font-size:var(--text-sm);color:var(--text-tertiary)}.instructions-compact .instructions-content h4{font-size:var(--text-sm);font-weight:var(--font-semibold);margin-bottom:var(--spacing-2)}.instructions-compact .instructions-content ul{margin-left:var(--spacing-4)}.instructions-compact .instructions-content ul li{margin-bottom:var(--spacing-1)}.instructions-compact .instructions-content .notice{font-size:var(--text-xs);color:var(--warning);margin-top:var(--spacing-2)}.taskspector-content{background:var(--bg-tertiary);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--border-primary);padding:var(--spacing-6);height:80vh;max-height:800px;min-height:600px;display:flex;flex-direction:column;overflow:hidden}.task-tabs{display:flex;gap:var(--spacing-2);margin-bottom:var(--spacing-6);border-bottom:2px solid var(--border-secondary)}.task-tabs .tab-btn{padding:var(--spacing-3) var(--spacing-6);background:transparent;border:none;color:var(--text-secondary);font-size:var(--text-base);font-weight:var(--font-medium);cursor:pointer;position:relative;transition:all var(--duration-200) var(--ease-out)}.task-tabs .tab-btn:hover{color:var(--text-primary)}.task-tabs .tab-btn.active{color:var(--primary-600)}.task-tabs .tab-btn.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--primary-600)}.tab-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.tab-content .task-header{display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-6);flex-wrap:wrap;flex-shrink:0}.task-list{display:flex;flex-direction:column;gap:var(--spacing-4);flex:1;overflow-y:auto;padding-right:var(--spacing-2)}.task-list::-webkit-scrollbar{width:6px}.task-list::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:3px}.task-list::-webkit-scrollbar-thumb{background:var(--border-secondary);border-radius:3px}.task-list::-webkit-scrollbar-thumb:hover{background:var(--border-primary)}.task-item{background:var(--bg-secondary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-primary);padding:var(--spacing-4);transition:all var(--duration-200) var(--ease-out)}.task-item.completed{opacity:0.7;background:var(--neutral-50)}.task-item.completed .task-input,.task-item.completed .task-textarea{text-decoration:line-through;color:var(--text-tertiary)}.task-item:hover{box-shadow:var(--shadow-md);border-color:var(--primary-200)}.task-header-row{display:flex;align-items:center;gap:var(--spacing-3);width:100%}.task-header-row .task-input{flex:1;min-width:0}.task-header-row .subdivide-btn{flex-shrink:0;min-width:90px;font-size:var(--text-sm);padding:var(--spacing-2) var(--spacing-3);background:linear-gradient(145deg, #fff, #f8f9fa);color:#495057;border:1px solid #dee2e6;border-radius:8px;transition:all var(--duration-200) var(--ease-out)}.task-header-row .subdivide-btn i{margin-right:var(--spacing-1)}.task-header-row .subdivide-btn:hover{background:linear-gradient(145deg, #f8f9fa, #e9ecef);color:#2c3e50;transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,0.1)}.task-header-row .complete-btn{flex-shrink:0;min-width:80px;font-size:var(--text-sm);padding:var(--spacing-2) var(--spacing-3)}.task-header-row .complete-btn i{margin-right:var(--spacing-1)}.task-header-row .delete-btn{flex-shrink:0;padding:var(--spacing-2) var(--spacing-3);font-size:var(--text-sm);min-width:60px}.subtask-area{background:linear-gradient(145deg, #f1f5f9, #fff);border:2px solid #e2e8f0;border-radius:16px;margin-top:var(--spacing-4);padding:var(--spacing-6);box-shadow:inset 0 2px 4px rgba(0,0,0,0.05),0 2px 8px rgba(0,0,0,0.03);position:relative}.subtask-area::before{content:'子タスク';position:absolute;top:-12px;left:var(--spacing-4);background:#ffffff;color:#64748b;font-size:12px;font-weight:600;padding:0 var(--spacing-2);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.1)}.subtask-list{margin-bottom:var(--spacing-4)}.subtask-item{display:flex;align-items:center;gap:var(--spacing-3);margin-bottom:var(--spacing-3);padding:var(--spacing-2) var(--spacing-3);background:#ffffff;border:1px solid #e9ecef;border-radius:8px;transition:all var(--duration-200) var(--ease-out)}.subtask-item:hover{box-shadow:0 2px 4px rgba(0,0,0,0.05);border-color:#ced4da}.subtask-item.completed{opacity:0.8;background:#f1f5f9}.subtask-item.completed .subtask-input{text-decoration:line-through;color:#6b7280;background:#f9fafb;border-color:#e5e7eb}.subtask-item .subtask-checkbox{width:18px;height:18px;cursor:pointer;flex-shrink:0;border-radius:3px;border:2px solid #dee2e6;background:#ffffff;transition:all var(--duration-200) var(--ease-out);appearance:none;position:relative;display:flex;align-items:center;justify-content:center}.subtask-item .subtask-checkbox:checked{background:#28a745;border-color:#28a745}.subtask-item .subtask-checkbox:checked::after{content:'✓';color:white;font-size:12px;font-weight:bold;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);line-height:1}.subtask-item .subtask-checkbox:hover{border-color:#28a745}.subtask-item .subtask-input{flex:1;min-width:0;padding:var(--spacing-3) var(--spacing-4);font-size:var(--text-base);font-family:var(--font-primary);background:#ffffff;border:1px solid #d1d5db;border-radius:8px;transition:all var(--duration-200) var(--ease-out);min-height:40px}.subtask-item .subtask-input:focus{outline:none;background:#ffffff;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.subtask-item .subtask-input::placeholder{color:#9ca3af;font-style:normal}.subtask-item .delete-subtask-btn{flex-shrink:0;width:28px;height:28px;padding:0;font-size:10px;background:#ffffff;color:#9ca3af;border:1px solid #e5e7eb;border-radius:6px;transition:all var(--duration-200) var(--ease-out)}.subtask-item .delete-subtask-btn:hover{background:#ef4444;color:white;border-color:#ef4444;transform:scale(1.05)}.subtask-item .delete-subtask-btn:active{transform:scale(0.95)}.add-subtask-btn{width:100%;padding:var(--spacing-2) var(--spacing-3);font-size:var(--text-sm);background:#ffffff;color:#6b7280;border:1px dashed #d1d5db;border-radius:8px;transition:all var(--duration-200) var(--ease-out);min-height:36px}.add-subtask-btn i{margin-right:var(--spacing-1);color:#3b82f6;font-size:12px}.add-subtask-btn:hover{background:#f8fafc;border-color:#3b82f6;color:#374151;transform:translateY(-1px);box-shadow:0 1px 3px rgba(59,130,246,0.1)}.task-input{width:100%;padding:var(--spacing-3) var(--spacing-4);font-size:var(--text-base);font-family:var(--font-primary);background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-lg);transition:all var(--duration-200) var(--ease-out)}.task-input::placeholder{color:var(--text-tertiary)}.task-input:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px rgba(59,130,246,0.1);background:var(--bg-tertiary)}.task-input:disabled{background:var(--neutral-100);border-color:var(--border-primary);color:var(--text-tertiary);cursor:not-allowed}.task-textarea{width:100%;padding:var(--spacing-3) var(--spacing-4);font-size:var(--text-sm);font-family:var(--font-primary);background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-lg);transition:all var(--duration-200) var(--ease-out);resize:vertical;min-height:80px;line-height:var(--leading-relaxed)}.task-textarea::placeholder{color:var(--text-tertiary)}.task-textarea:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px rgba(59,130,246,0.1);background:var(--bg-tertiary)}.task-textarea:disabled{background:var(--neutral-100);border-color:var(--border-primary);color:var(--text-tertiary);cursor:not-allowed}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-primary);font-weight:var(--font-medium);text-decoration:none;border:1px solid transparent;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--duration-200) var(--ease-out);white-space:nowrap;user-select:none;position:relative;overflow:hidden;padding:var(--spacing-2-5) var(--spacing-6);font-size:var(--text-base);min-height:44px}.btn:focus{outline:none;box-shadow:0 0 0 3px rgba(59,130,246,0.3)}.btn:disabled{cursor:not-allowed;opacity:0.6;pointer-events:none}.btn-add-task{background-color:var(--task-add-color);color:white;border:none}.btn-add-task:hover{background-color:color-mix(in srgb, var(--task-add-color) 90%, black 10%)}.btn-analysis{background:linear-gradient(135deg, var(--task-analysis-primary), var(--task-analysis-secondary));color:white;border:none;font-weight:var(--font-medium);position:relative;overflow:hidden;min-width:160px}.btn-analysis i.fas.fa-robot{margin-right:var(--spacing-2);font-size:1.1em}.btn-analysis:hover{background:linear-gradient(135deg, var(--secondary-800), var(--secondary-900));box-shadow:0 6px 20px rgba(124,58,237,0.3)}.btn-success{background:linear-gradient(135deg, var(--success), #059669);color:white;border-color:var(--success)}.btn-success:hover{background:linear-gradient(135deg, #059669, #047857);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-danger{background:linear-gradient(135deg, var(--error), #dc2626);color:white;border-color:var(--error)}.btn-danger:hover{background:linear-gradient(135deg, #dc2626, #b91c1c);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-secondary);box-shadow:var(--shadow-sm)}.btn-secondary:hover{background:var(--neutral-50);border-color:var(--neutral-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}.analysis-result-section{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-6);margin-top:var(--spacing-8);border:1px solid var(--border-secondary);flex-shrink:0}.analysis-result-section h3{color:var(--text-primary);font-size:var(--text-lg);font-weight:var(--font-semibold);margin-bottom:var(--spacing-4);padding-bottom:var(--spacing-2);border-bottom:1px solid var(--border-secondary)}.analysis-result-section #analysis-result-content{font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text-secondary);max-height:300px;overflow-y:auto}.analysis-result-section #analysis-result-content::-webkit-scrollbar{width:6px}.analysis-result-section #analysis-result-content::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:3px}.analysis-result-section #analysis-result-content::-webkit-scrollbar-thumb{background:var(--border-secondary);border-radius:3px}.analysis-result-section #analysis-result-content::-webkit-scrollbar-thumb:hover{background:var(--border-primary)}.analysis-result-section #analysis-result-content h2,.analysis-result-section #analysis-result-content h3{color:var(--text-primary);margin:var(--spacing-4) 0 var(--spacing-2)}.analysis-result-section #analysis-result-content ul{margin-left:var(--spacing-6);margin-bottom:var(--spacing-3)}.analysis-result-section #analysis-result-content ul li{margin-bottom:var(--spacing-1)}.analysis-result-section #analysis-result-content table{width:100%;border-collapse:collapse;margin:var(--spacing-4) 0}.analysis-result-section #analysis-result-content table th,.analysis-result-section #analysis-result-content table td{padding:var(--spacing-2) var(--spacing-3);border:1px solid var(--border-primary)}.analysis-result-section #analysis-result-content table th{background:var(--bg-tertiary);font-weight:var(--font-semibold)}.analysis-result-section #analysis-result-content table tr:nth-child(even){background:var(--bg-tertiary)}.sidebar{background:var(--bg-tertiary);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--border-primary);overflow:hidden;transition:all var(--duration-300) var(--ease-out);width:100%;margin-left:auto;margin-right:auto;padding-left:var(--spacing-4);padding-right:var(--spacing-4);max-width:var(--container-2xl);margin:var(--spacing-8) auto}@media (min-width: 640px){.sidebar{padding-left:var(--spacing-6);padding-right:var(--spacing-6)}}@media (min-width: 768px){.sidebar{padding-left:var(--spacing-8);padding-right:var(--spacing-8)}}@media (max-width: 640px){.taskspector-main{padding:0 var(--spacing-2);grid-template-columns:1fr;gap:var(--spacing-4)}.taskspector-sidebar{padding:var(--spacing-4);height:auto;min-height:auto;max-height:none;position:static}.taskspector-content{padding:var(--spacing-4);height:auto;min-height:400px;max-height:none}.task-list{max-height:500px;overflow-y:auto}.task-tabs{flex-direction:row;flex-wrap:wrap;gap:var(--spacing-2)}.task-tabs .tab-btn{flex:1;min-width:140px;text-align:center;font-size:var(--text-sm);padding:var(--spacing-2) var(--spacing-3)}.task-header{flex-direction:column;gap:var(--spacing-3)}.task-header button{width:100%;min-height:40px;padding:var(--spacing-2) var(--spacing-4);font-size:var(--text-sm)}.task-header-row{flex-direction:column;gap:var(--spacing-3);align-items:stretch}.task-header-row .task-input{order:1}.task-header-row .subdivide-btn,.task-header-row .complete-btn,.task-header-row .delete-btn{order:2;min-width:auto;width:100%;min-height:40px;padding:var(--spacing-2) var(--spacing-3);font-size:var(--text-sm)}.subtask-item{flex-direction:column;gap:var(--spacing-2);align-items:stretch}.subtask-item .subtask-checkbox{align-self:flex-start}.subtask-item .subtask-input{order:1;min-height:44px}.subtask-item .delete-subtask-btn{order:2;align-self:flex-end;width:40px;height:40px}.timer-preset{grid-template-columns:repeat(2, 1fr);gap:var(--spacing-2)}.timer-preset .preset-btn{padding:var(--spacing-2);min-height:40px;font-size:var(--text-sm)}}@media (max-width: 768px) and (min-width: 641px){.taskspector-main{padding:0 var(--spacing-3)}.taskspector-sidebar,.taskspector-content{padding:var(--spacing-5)}.task-header-row{flex-wrap:wrap;gap:var(--spacing-2)}.task-header-row .task-input{flex:1;min-width:250px}.task-header-row .subdivide-btn,.task-header-row .complete-btn,.task-header-row .delete-btn{flex-shrink:0}.subtask-item{flex-wrap:wrap}.subtask-item .subtask-input{min-width:200px}}