.app{display:flex;flex-direction:column;height:100vh;height:calc(var(--vh, 1vh) * 100);width:100%;max-width:100vw;background-color:#f5f5f5;overflow:hidden}.app-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background-color:#fff;border-bottom:1px solid #e0e0e0;flex-shrink:0;min-height:60px}.app-header h1{font-size:1.5rem;font-weight:600;color:#333;margin:0}.header-actions{display:flex;align-items:center;gap:.75rem}.dark-mode-toggle{font-size:1.5rem;padding:.5rem;background:none;border:none;cursor:pointer;border-radius:6px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;transition:background-color .2s,color .2s;color:#666}.dark-mode-toggle:hover{background-color:#0000000d;color:#333}.dark-mode-toggle:active{background-color:#0000001a}.recurring-task-toggle{font-size:1rem;font-weight:700;padding:.5rem;background:none;border:none;cursor:pointer;border-radius:6px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;transition:background-color .2s,color .2s;color:#666}.recurring-task-toggle:hover{background-color:#0000000d;color:#333}.recurring-task-toggle:active{background-color:#0000001a}.import-export{display:flex;gap:.5rem}.export-btn,.import-btn{padding:.5rem;background-color:transparent;color:#666;border-radius:6px;font-size:1.25rem;font-weight:400;min-height:44px;min-width:44px;transition:background-color .2s,color .2s;display:flex;align-items:center;justify-content:center}.export-btn:hover,.import-btn:hover{background-color:#0000000d;color:#333}.export-btn:active,.import-btn:active{background-color:#0000001a}.app-main{flex:1;overflow-y:auto;overflow-x:hidden;padding:1rem;-webkit-overflow-scrolling:touch}.task-list{display:flex;flex-direction:column;gap:.75rem}.task-list-empty{display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:1rem}.task-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;border-radius:8px;transition:transform .2s;min-height:36px}.task-item:active{transform:scale(.98)}.task-content{flex:1;min-width:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.task-title{font-size:1rem;font-weight:500;margin-bottom:0;word-wrap:break-word;overflow-wrap:break-word}.task-meta{display:flex;flex-direction:column;gap:.25rem;font-size:.875rem;opacity:.9;margin-top:.25rem;animation:fadeIn .2s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:.9;transform:translateY(0)}}.task-due{font-size:.875rem}.task-tags{display:flex;flex-wrap:wrap;gap:.25rem}.task-tag{padding:.125rem .375rem;background-color:#0000001a;border-radius:4px;font-size:.75rem}.task-recurring-badge{display:inline-block;margin-right:.375rem;font-size:.9rem;opacity:.85;font-weight:600}.task-actions{display:flex;align-items:center;gap:.25rem;margin-left:.5rem}.task-complete,.task-delete{font-size:1.25rem;font-weight:400;padding:.25rem .5rem;line-height:1;opacity:.7;transition:opacity .2s;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer}.task-complete:hover,.task-delete:hover{opacity:1}.app-footer{flex-shrink:0;padding:1rem;background-color:#fff;border-top:1px solid #e0e0e0}.task-input-form{width:100%}.task-input{width:100%;padding:.875rem 1rem;font-size:1rem;border:2px solid #e0e0e0;border-radius:8px;outline:none;transition:border-color .2s;min-height:50px;-webkit-appearance:none}.task-input:focus{border-color:#007bff}.task-input.filter-mode{border-color:#28a745;background-color:#f0fff4}.task-input.filter-mode:focus{border-color:#28a745}@media(min-width:768px){.app{max-width:800px;margin:0 auto;border-left:1px solid #e0e0e0;border-right:1px solid #e0e0e0}.app-header h1{font-size:1.75rem}.task-meta{flex-direction:row;gap:1rem}.task-item{min-height:auto}.export-btn,.import-btn{font-size:1rem}}@media(min-width:1024px){.app{max-width:1000px}.app-main{padding:1.5rem}.task-list{gap:1rem}.task-item{padding:.625rem 1rem}}.app.dark-mode{background-color:#1a1a1a}.app.dark-mode .app-header{background-color:#2d2d2d;border-bottom:1px solid #404040}.app.dark-mode .app-header h1{color:#e0e0e0}.app.dark-mode .dark-mode-toggle{color:#999}.app.dark-mode .dark-mode-toggle:hover{background-color:#ffffff1a;color:#e0e0e0}.app.dark-mode .dark-mode-toggle:active{background-color:#ffffff26}.app.dark-mode .recurring-task-toggle{color:#999}.app.dark-mode .recurring-task-toggle:hover{background-color:#ffffff1a;color:#e0e0e0}.app.dark-mode .recurring-task-toggle:active{background-color:#ffffff26}.app.dark-mode .export-btn,.app.dark-mode .import-btn{background-color:transparent;color:#999}.app.dark-mode .export-btn:hover,.app.dark-mode .import-btn:hover{background-color:#ffffff1a;color:#e0e0e0}.app.dark-mode .export-btn:active,.app.dark-mode .import-btn:active{background-color:#ffffff26}.app.dark-mode .task-list-empty{color:#666}.app.dark-mode .task-tag{background-color:#ffffff26}.app.dark-mode .task-recurring-badge{opacity:.75}.app.dark-mode .app-footer{background-color:#2d2d2d;border-top:1px solid #404040}.app.dark-mode .task-input{background-color:#1a1a1a;border:2px solid #404040;color:#e0e0e0}.app.dark-mode .task-input:focus{border-color:#0d6efd;background-color:#1a1a1a}.app.dark-mode .task-input.filter-mode{border-color:#198754;background-color:#0d2818;color:#e0e0e0}.app.dark-mode .task-input.filter-mode:focus{border-color:#198754}.app.dark-mode .task-input::placeholder{color:#888}@media(min-width:768px){.app.dark-mode{border-left:1px solid #404040;border-right:1px solid #404040}}.modal-overlay{position:fixed;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;padding:1rem;z-index:1000;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background-color:#fff;border-radius:12px;max-width:600px;width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 10px 40px #0003;animation:slideUp .2s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid #e0e0e0}.modal-header h2{margin:0;font-size:1.5rem;font-weight:600;color:#333}.close-button{font-size:2rem;font-weight:300;background:none;border:none;cursor:pointer;color:#666;line-height:1;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s,color .2s}.close-button:hover{background-color:#0000000d;color:#333}.modal-body{flex:1;overflow-y:auto;padding:1.5rem;-webkit-overflow-scrolling:touch}.modal-body section{margin-bottom:1.75rem}.modal-body section:last-child{margin-bottom:0}.modal-body h3{margin:0 0 .75rem;font-size:1.125rem;font-weight:600;color:#333}.modal-body p{margin:0 0 .75rem;color:#555;line-height:1.5}.modal-body ul{margin:0;padding-left:1.5rem;color:#555}.modal-body li{margin-bottom:.5rem;line-height:1.5}.example{background-color:#f8f9fa;padding:.75rem 1rem;border-radius:6px;margin-bottom:.5rem;display:flex;flex-direction:column;gap:.375rem}.example code{font-family:Monaco,Courier New,monospace;font-size:.9rem;color:#007bff;font-weight:500}.example .explanation{font-size:.875rem;color:#666}.note{font-size:.875rem;color:#666;font-style:italic;margin-top:.5rem}.color-future{color:#28a745}.color-today{color:#ffc107}.color-overdue{color:#dc3545}.modal-footer{padding:1rem 1.5rem;border-top:1px solid #e0e0e0;display:flex;justify-content:flex-end}.primary-button{padding:.75rem 1.5rem;background-color:#007bff;color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .2s;min-height:44px}.primary-button:hover{background-color:#0056b3}.primary-button:active{background-color:#004494}.app.dark-mode .modal-content{background-color:#2d2d2d}.app.dark-mode .modal-header{border-bottom:1px solid #404040}.app.dark-mode .modal-header h2{color:#e0e0e0}.app.dark-mode .close-button{color:#999}.app.dark-mode .close-button:hover{background-color:#ffffff1a;color:#e0e0e0}.app.dark-mode .modal-body h3{color:#e0e0e0}.app.dark-mode .modal-body p,.app.dark-mode .modal-body ul,.app.dark-mode .modal-body li{color:#b0b0b0}.app.dark-mode .example{background-color:#1a1a1a}.app.dark-mode .example code{color:#4da6ff}.app.dark-mode .example .explanation,.app.dark-mode .note{color:#888}.app.dark-mode .modal-footer{border-top:1px solid #404040}.app.dark-mode .primary-button{background-color:#0d6efd}.app.dark-mode .primary-button:hover{background-color:#0b5ed7}.app.dark-mode .primary-button:active{background-color:#0a58ca}@media(max-width:480px){.modal-content{max-height:95vh;border-radius:12px 12px 0 0;margin-top:auto}.modal-header{padding:1rem}.modal-header h2{font-size:1.25rem}.modal-body{padding:1rem}.example{padding:.625rem .875rem}}.context-menu-overlay{position:fixed;inset:0;z-index:2000;pointer-events:none}.context-menu{position:fixed;background-color:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:180px;padding:.5rem 0;z-index:2001;pointer-events:all;animation:contextMenuFadeIn .15s ease-out}@keyframes contextMenuFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu-item{width:100%;padding:.75rem 1rem;background:none;border:none;text-align:left;font-size:.9rem;cursor:pointer;color:#333;transition:background-color .15s;display:block}.context-menu-item:hover{background-color:#0000000d}.context-menu-item:active{background-color:#0000001a}.context-menu-item.danger{color:#dc3545}.context-menu-item.danger:hover{background-color:#dc35451a}.app.dark-mode .context-menu{background-color:#2d2d2d;border-color:#404040;box-shadow:0 4px 12px #0006}.app.dark-mode .context-menu-item{color:#e0e0e0}.app.dark-mode .context-menu-item:hover{background-color:#ffffff1a}.app.dark-mode .context-menu-item:active{background-color:#ffffff26}.app.dark-mode .context-menu-item.danger{color:#ff6b7a}.app.dark-mode .context-menu-item.danger:hover{background-color:#ff6b7a33}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.5;background-color:#f5f5f5;transition:background-color .3s ease}body.dark-mode{background-color:#1a1a1a}#root{width:100%;height:100%}button{font-family:inherit;cursor:pointer;border:none;background:none}input{font-family:inherit;font-size:inherit}