body{margin:0;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}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--main-color: #4caf50;--main-hover-color: #388e3c;--accent-color: #ff5722;--accent-hover-color: #e64a19;--reset-color: #ff9800;--reset-hover-color: #f57c00;--secondary-color: #607d8b;--secondary-hover-color: #455a64;--text-color: #333333;--background-color: #ffffff;--border-color: #dddddd;--shadow-color: rgba(0, 0, 0, .1);--dark-background-color: #121212;--dark-text-color: #ffffff}body{margin:0;font-family:Arial,sans-serif;background-color:var(--background-color);color:var(--text-color);transition:background-color .3s,color .3s}body.dark-mode{background-color:var(--dark-background-color);color:var(--dark-text-color)}.App{display:flex;flex-direction:column;align-items:center;min-height:100vh;min-width:80vw;padding:0 .5rem}.App.dark-mode .timer-container,.App.dark-mode .task-list,.App.dark-mode .modal-content,.App.dark-mode .task-item{background-color:#1e1e1e;color:var(--dark-text-color)}.App.dark-mode .task-text,.App.dark-mode .task-input,.App.dark-mode .task-input-edit{color:var(--dark-text-color);background-color:#2a2a2a;border-color:#444}.App.dark-mode .modal-input input{background-color:#2a2a2a;color:var(--dark-text-color);border-color:#444}.App.dark-mode .task-buttons button{color:var(--dark-text-color);border-color:#444}.App.dark-mode .timer-stats,.App.dark-mode .shortcut-hint,.App.dark-mode .sound-icon{color:var(--dark-text-color)}.header{display:flex;justify-content:space-between;align-items:center;min-width:96%;margin-bottom:1.25rem}.logo-title{display:flex;align-items:center;gap:.625rem;flex-grow:1}.logo{width:2.5rem;height:2.5rem}.toggle-button{background-color:var(--dark-background-color);color:var(--background-color);border:none;border-radius:4rem;padding:.625rem .9375rem;cursor:pointer}.header-actions{display:flex;align-items:center;gap:.5rem}.lang-button{background-color:transparent;color:var(--text-color);border:1px solid var(--border-color);border-radius:4rem;padding:.5rem .75rem;min-width:2.75rem;font-weight:600;cursor:pointer}.lang-button:hover{background-color:var(--main-color);color:#fff;border-color:var(--main-color)}.App.dark-mode .lang-button{color:var(--dark-text-color);border-color:#555}.toggle-button:hover{background-color:#444}.main-content{display:flex;flex-wrap:wrap;justify-content:center;width:100%;max-width:calc(100% - 10vh);min-height:80vh;gap:1.5rem}.timer-container,.task-list{flex:1;max-width:48%;background-color:var(--background-color);border-radius:1rem;padding:.5rem;box-shadow:0 .125rem .25rem var(--shadow-color)}.timer-container{display:flex;flex-direction:column;align-items:center}.task-list-container{max-height:calc(100vh - 12.5rem);overflow-y:auto;padding-left:0}button{font-size:1rem;color:var(--background-color);cursor:pointer;border:none;border-radius:4rem;padding:.625rem .9375rem;margin:.3125rem;box-shadow:0 .25rem .375rem #0000001a;transition:all .3s ease}button:disabled{opacity:.45;cursor:not-allowed}.timer-controls{margin-top:1rem;padding:.25rem}.timer-status{font-size:.85rem;color:var(--main-color);margin:.3rem 0 0}.start-button{background-color:var(--main-color)}.start-button:hover{background-color:var(--main-hover-color)}.pause-button{background-color:var(--secondary-color)}.pause-button:hover:not(:disabled){background-color:var(--secondary-hover-color)}.reset-button{background-color:var(--reset-color)}.reset-button:hover{background-color:var(--reset-hover-color)}.set-time-button{background-color:transparent;color:var(--text-color);border:.0625rem solid var(--border-color);box-shadow:none}.set-time-button:hover{background-color:#0000000d}.App.dark-mode .set-time-button{color:var(--dark-text-color);border-color:#444}.App.dark-mode .set-time-button:hover{background-color:#ffffff14}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:var(--background-color);border-radius:1rem;padding:1rem 1.2rem 1.2rem;box-shadow:0 .25rem .625rem var(--shadow-color);width:18.75rem;max-width:90%;position:relative}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}.modal-header h3{margin:0;font-size:1.1rem}.modal-footer{display:flex;justify-content:flex-end;margin-top:1rem}.modal-input{display:flex;justify-content:space-between;align-items:center;margin:.625rem 0}.modal-input label{font-size:.875rem}.modal-input input{width:5rem;padding:.3125rem;border:.0625rem solid var(--border-color);text-align:center;border-radius:.25rem}.input-with-buttons{display:flex;align-items:center;gap:.3125rem}.input-with-buttons input{width:3.75rem;text-align:center;border:.0625rem solid var(--border-color);padding:.3125rem;border-radius:.25rem}.adjust-button{width:1.8rem;height:1.8rem;display:flex;justify-content:center;align-items:center;background-color:var(--main-color);color:var(--background-color);border:none;border-radius:50%;cursor:pointer;font-size:1rem;padding:0;margin:0;box-shadow:none}.adjust-button:hover{background-color:var(--main-hover-color)}.save-button{background-color:var(--main-color);color:var(--background-color);border:none;border-radius:.5rem;padding:.45rem 1.1rem;font-size:.95rem;cursor:pointer;margin:0;box-shadow:0 .125rem .25rem var(--shadow-color)}.save-button:hover{background-color:var(--main-hover-color)}.close-button{width:1.8rem;height:1.8rem;background-color:var(--accent-color);color:#fff;font-size:.85rem;display:flex;justify-content:center;align-items:center;border:none;border-radius:50%;cursor:pointer;padding:0;margin:0;box-shadow:none;flex-shrink:0}.close-button:hover{background-color:var(--accent-hover-color)}.task-input-container{display:flex;justify-content:space-between;margin-bottom:.625rem;gap:.625rem}.task-input{font-size:1rem;padding:.6rem 1rem;border:.0625rem solid var(--border-color);border-radius:1rem;width:calc(100% - 5rem);box-shadow:0 .0625rem .1875rem #0000001a}.task-input:focus{outline:none;border-color:var(--main-color);box-shadow:0 0 .375rem #4caf5080}.task-input-edit{border:.0625rem solid var(--border-color);padding:.3125rem;width:100%;border-radius:.25rem;font-size:.95rem}.task-progress{font-size:.8rem;color:var(--main-color);margin:0 0 .5rem;text-align:right}.add-button{font-size:1rem;border:none;background-color:var(--main-color);color:var(--text-color);cursor:pointer;transition:all .3s ease}.add-button:hover{background-color:var(--main-hover-color)}.add-button:disabled{background-color:var(--border-color);cursor:not-allowed}.task-item{display:flex;align-items:center;justify-content:space-between;padding:.625rem;margin-bottom:.625rem;border-radius:1rem;background-color:var(--background-color);box-shadow:0 .125rem .25rem var(--shadow-color);transition:all .3s ease;cursor:pointer;position:relative}.task-item:hover{box-shadow:0 .25rem .5rem var(--border-color);background-color:var(--shadow-color);transform:scale(1.02)}.task-empty{text-align:center;color:var(--border-color);list-style:none;padding:1rem 0;font-size:.95rem}.task-content{display:flex;align-items:center;width:100%;gap:.3rem;cursor:pointer}.task-content.completed .task-text{text-decoration:line-through;opacity:.55}.task-text{font-size:1rem;color:var(--text-color);flex-grow:1;margin:0 .5rem;word-wrap:break-word;white-space:normal;overflow-wrap:break-word;cursor:pointer}.task-checkbox{flex-shrink:0;margin-right:.2rem}.task-checkbox input[type=checkbox]{width:1.25rem;height:1.25rem;accent-color:var(--main-color);cursor:pointer}.task-buttons{display:flex;gap:.2rem;justify-content:flex-end;flex-shrink:0}.task-buttons button{background-color:transparent;border:.0625rem solid var(--border-color);border-radius:50%;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;padding:0;margin:0;box-shadow:none;color:var(--text-color)}.task-buttons .edit-button:hover{background-color:#ff9800;color:#fff;border-color:#ff9800}.task-buttons .delete-button:hover{background-color:#f44;color:#fff;border-color:#f44}@media (min-width: 1024px){html{font-size:1.2rem}.main-content{flex-direction:row;gap:2rem}.timer-container,.task-list{max-width:45%}}@media (max-width: 768px){html{font-size:.9rem}.main-content{flex-direction:column;align-items:flex-start;gap:1.25rem}.timer-container,.task-list{min-width:100%}.timer-controls{text-align:center}.task-input-container{flex-direction:row;gap:.625rem}.task-item{flex-direction:row;align-items:center}.task-buttons{justify-content:flex-end;align-self:flex-end}.task-input{width:95%}}@media (max-width: 480px){html{font-size:.8rem}.main-content{flex-direction:column;align-items:stretch}.timer-container,.task-list{max-width:100%}.task-input{font-size:.8rem}.modal-content{width:90vw}}.timer-active-task{font-size:.82rem;color:var(--main-color);background-color:#4caf501a;border:1px solid rgba(76,175,80,.3);border-radius:2rem;padding:.3rem .9rem;margin-bottom:.6rem;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.sound-controls{display:flex;align-items:center;gap:.5rem;margin-top:.75rem}.sound-icon{color:var(--text-color);opacity:.6;flex-shrink:0}.sound-select{font-size:.82rem;padding:.25rem .5rem;border:1px solid var(--border-color);border-radius:.5rem;background-color:var(--background-color);color:var(--text-color);cursor:pointer}.App.dark-mode .sound-select{background-color:#2a2a2a;color:var(--dark-text-color);border-color:#444}.timer-stats{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--text-color);opacity:.65;margin-top:.5rem}.stats-sep{opacity:.4}.shortcut-hint{font-size:.7rem;color:var(--text-color);opacity:.4;margin:.3rem 0 0;letter-spacing:.01em}.task-progress-wrap{margin-bottom:.75rem}.task-progress-track{height:.45rem;background-color:var(--border-color);border-radius:1rem;overflow:hidden;margin-bottom:.25rem}.task-progress-bar{height:100%;background-color:var(--main-color);border-radius:1rem;transition:width .4s ease}.task-progress-label{display:block;text-align:right;font-size:.72rem;color:var(--text-color);opacity:.6}.completed-section{margin-top:.75rem;border-top:1px dashed var(--border-color);padding-top:.5rem}.toggle-completed-btn{background:none;border:none;box-shadow:none;font-size:.8rem;color:var(--text-color);opacity:.6;cursor:pointer;padding:.2rem 0;margin:0}.toggle-completed-btn:hover{opacity:1}.completed-list{opacity:.65}.task-item--completed{background-color:transparent!important;box-shadow:none!important;transform:none!important}.clear-completed-btn{font-size:.75rem;background:none;box-shadow:none;border:1px solid #ff4444;color:#f44;padding:.25rem .7rem;margin:.4rem 0 0;border-radius:.5rem}.clear-completed-btn:hover{background-color:#f44;color:#fff}.focus-button{background-color:transparent;border:1px solid var(--border-color);border-radius:50%;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0;margin:0;box-shadow:none;color:var(--text-color)}.focus-button:hover,.focus-button--active{background-color:var(--main-color);color:#fff;border-color:var(--main-color)}.focus-button--active:hover{background-color:var(--accent-color);border-color:var(--accent-color)}.task-content--active .task-text{font-weight:600;color:var(--main-color)}.App.dark-mode .task-content--active .task-text{color:#66bb6a}.focus-history{width:100%;max-width:calc(100% - 10vh);box-sizing:border-box;margin-top:1.5rem;padding:1rem 1.25rem 1.25rem;background-color:var(--background-color);border-radius:1rem;box-shadow:0 .125rem .25rem var(--shadow-color)}.App.dark-mode .focus-history{background-color:#1e1e1e;color:var(--dark-text-color)}.focus-history-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.75rem}.focus-history-title{font-size:1rem;font-weight:600;margin:0}.focus-history-sub{font-size:.85rem;opacity:.7}.focus-history-chart{display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem;height:96px}.fh-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:.4rem;height:100%}.fh-bar-track{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}.fh-bar{width:60%;max-width:1.75rem;min-height:2px;background-color:var(--main-color);border-radius:.25rem .25rem 0 0;transition:height .3s ease}.fh-bar--empty{background-color:var(--border-color);opacity:.5}.fh-col--today .fh-bar{background-color:var(--accent-color)}.fh-label{font-size:.75rem;opacity:.65}.fh-col--today .fh-label{font-weight:700;opacity:1;color:var(--accent-color)}.focus-history-empty{margin:0;padding:1rem 0;text-align:center;font-size:.9rem;opacity:.6}button:focus-visible,select:focus-visible,a:focus-visible,input:focus-visible,[role=button]:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--main-color);outline-offset:2px;border-radius:4px}.task-input:focus-visible{outline:2px solid var(--main-color);outline-offset:2px}.App.dark-mode :focus-visible{outline-color:#8ce68f}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.app-loading{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:2rem 0;opacity:.7;font-size:.9rem}.app-loading:before{content:"";width:1.1rem;height:1.1rem;border:2px solid var(--border-color);border-top-color:var(--main-color);border-radius:50%;animation:app-spin .8s linear infinite}@keyframes app-spin{to{transform:rotate(360deg)}}.CircularProgressbar{width:100%;vertical-align:middle}.CircularProgressbar .CircularProgressbar-path{stroke:#3e98c7;stroke-linecap:round;-webkit-transition:stroke-dashoffset .5s ease 0s;transition:stroke-dashoffset .5s ease 0s}.CircularProgressbar .CircularProgressbar-trail{stroke:#d6d6d6;stroke-linecap:round}.CircularProgressbar .CircularProgressbar-text{fill:#3e98c7;font-size:20px;dominant-baseline:middle;text-anchor:middle}.CircularProgressbar .CircularProgressbar-background{fill:#d6d6d6}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background{fill:#3e98c7}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text{fill:#fff}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path{stroke:#fff}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail{stroke:transparent}