.button-base{font-size:var(--font-size-base);font-weight:600;padding:var(--space-sm) var(--space-xl);border-radius:var(--radius-pill);cursor:pointer;border:none;transition:all .2s ease-in-out}.button-base:active{transform:scale(.98)}.button-base.small{padding:var(--space-xs) var(--space-md);font-size:var(--font-size-sm)}.primary{background-color:var(--color-primary);color:var(--color-on-primary)}.primary:hover{background-color:var(--color-primary-hover);box-shadow:var(--shadow-sm)}.secondary{background-color:var(--color-secondary);color:var(--color-on-secondary)}.secondary:hover{background-color:var(--color-secondary-hover);box-shadow:var(--shadow-sm)}.neutral{background-color:var(--color-neutral);color:var(--color-on-neutral)}.neutral:hover{background-color:var(--color-neutral-hover);box-shadow:var(--shadow-sm)}.button-base:disabled{opacity:.5;pointer-events:none;transform:none}.selected{border:1px solid var(--color-primary)}.todo-form{flex-shrink:0;padding-top:var(--space-md)}.todo-form form{display:flex;flex-direction:row;align-items:center;border-radius:var(--radius-pill);border:1px solid var(--color-border-muted);width:100%;justify-self:center}.todo-form form:focus-within{border-color:var(--color-primary)}.todo-form input{flex:1;border:none}.todo-form button{padding:var(--space-xs) var(--space-lg);height:fit-content;margin-right:var(--space-xs)}.theme-toggle-content{display:flex;align-items:center;gap:var(--space-xs)}.theme-toggle-content svg{font-size:var(--font-size-lg);stroke-width:.5px}header{display:flex;flex-direction:column;background-color:var(--color-bg-surface);border-right:1px solid var(--color-border-muted);min-width:205px}.main-part{flex:1;padding:var(--space-lg) var(--space-md)}.theme-part{border-top:1px solid var(--color-border-muted);padding:var(--space-sm)}h1{font-size:var(--font-size-xl)}.nav-item{display:flex;text-decoration:none;padding:var(--space-xs);text-align:start;height:40px;transition:color .2s ease;color:var(--color-text-muted)}.nav-item:hover{cursor:pointer}.nav-item.active{color:var(--color-text);font-weight:500}.icon{margin-right:var(--space-md)}.icon svg{transform:translateY(2px);color:var(--color-primary)}.logo-container{display:flex;gap:var(--space-xs);align-items:center;margin-bottom:var(--space-md)}.logo{width:40px;height:40px}.grid-layout{display:grid;grid-template-columns:repeat(var(--columns),1fr);gap:var(--space-md);margin:var(--space-xs);max-width:1200px;width:100%}.grid-layout.full-height{flex:1;overflow:hidden;height:100%}.card-base{display:flex;flex-direction:column;padding:var(--space-lg);border-radius:var(--radius-md);border:1px solid var(--color-border-muted);text-align:left;background-color:var(--color-bg-surface);box-shadow:var(--shadow-md);max-width:100%;min-width:0}.card-base{display:flex;flex-direction:column;padding:var(--space-lg);border-radius:var(--radius-md);border:1px solid var(--color-border-muted);text-align:left;background-color:var(--color-bg-surface);box-shadow:var(--shadow-md);max-width:100%;min-width:0;height:100%;min-height:0}.card-content{color:var(--color-text-muted);flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0}.card-title{margin-top:0;margin-bottom:var(--space-md);font-size:var(--font-size-lg);font-weight:700;flex-shrink:0}.is-clickable{cursor:pointer;transition:transform .2s ease,inherit}.is-clickable:hover{background-color:var(--color-bg-surface-hover);border-color:var(--color-secondary);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.is-clickable:active{transform:scale(.98)}.todo-list{padding:0;flex:1;overflow-y:auto;min-height:0;overflow-anchor:none}@keyframes taskFadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.todo-item{display:flex;justify-content:left;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-md) var(--space-xs) 0;border-bottom:1px solid var(--color-border-muted);transition:opacity .2s ease;animation:taskFadeIn .3s ease-out;contain:layout}.todo-item p{display:flex;align-items:center;flex:1;gap:var(--space-xs);transition:all .3s ease;position:relative}.todo-item.completed p{opacity:.4;filter:grayscale(100%);transition:all .3s ease}.todo-checkbox button{background-color:transparent;border:none}.list-tag{font-size:var(--font-size-sm)}.todo-list::-webkit-scrollbar{width:6px}.todo-list::-webkit-scrollbar-track{background:transparent}.todo-list::-webkit-scrollbar-thumb{background-color:var(--color-neutral);border-radius:var(--radius-pill)}.todo-list::-webkit-scrollbar-thumb:hover{background-color:var(--color-neutral-hover)}.todo-button-wrapper{display:flex;gap:var(--space-md)}.edit-todo-button{opacity:0;transition:opacity .2s ease;background:none;border:none;padding:0;color:var(--color-text-muted)}.todo-item:hover .edit-todo-button{opacity:1}.edit-todo-button:hover{color:var(--color-primary);transform:scale(1.1)}.todo-edit-form{margin:0}.todo-edit-form input{background:var(--color-bg-surface);border:none;border-radius:0;font-size:var(--font-size-base);font-family:inherit;color:var(--color-text-muted);padding:0}.welcome-message{display:flex;flex-direction:column;text-align:start;letter-spacing:-.02em}.welcome-message span{color:var(--color-text-muted);font-weight:500;font-size:var(--font-size-md);text-transform:uppercase;letter-spacing:.05em}.graph-container{height:100%;min-height:250px;overflow:hidden}.recharts-cartesian-axis-line{stroke:var(--color-border-muted);transition:inherit}.recharts-cartesian-axis-tick-value{fill:var(--color-text-muted);font-size:var(--font-size-xs)}.recharts-cartesian-grid-horizontal line{stroke:var(--color-border-muted);stroke-dasharray:3 3}.recharts-cartesian-grid-vertical line{stroke:var(--color-border-muted);stroke-dasharray:3 3}.recharts-default-tooltip{background-color:var(--color-bg-surface)!important;border:1px solid var(--color-border-muted)!important;border-radius:var(--radius-sm)!important;color:var(--color-text)!important}.recharts-tooltip-label{color:var(--color-text)!important;margin-bottom:4px;font-weight:700}.recharts-legend-wrapper{top:0!important;margin-top:-4px!important}.recharts-legend-item{margin:0 var(--space-md)!important;display:inline-flex!important;align-items:center}.recharts-legend-item-text{margin-left:var(--space-xs)!important}.quote-container{display:flex;height:100%;align-items:center}.quote{font-size:var(--font-size-lg);color:var(--color-text);font-weight:600;padding-left:var(--space-md);border-left:3px solid var(--color-primary)}.quote.loading-text{font-size:var(--font-size-md);opacity:.7;letter-spacing:.05em}.dots span{animation:fadeDots 1.4s infinite both;display:inline-block;margin-left:2px}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}@keyframes fadeDots{0%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-1px)}to{opacity:.2;transform:translateY(0)}}.todo-container{display:flex;flex-direction:column;height:100%}.todo-title{margin-bottom:var(--space-xs)}.todo-stats{margin-bottom:var(--space-sm);font-size:var(--font-size-sm)}.nav-wrapper{display:flex;align-items:center;margin-bottom:var(--space-md)}.nav-arrow{background-color:transparent;border:none}.nav-arrow svg{stroke:var(--color-text-muted);transition:stroke .2s ease;opacity:.5;width:18px}.nav-arrow:hover svg{stroke:var(--color-primary);opacity:1;transform:scale(1.1)}.todo-nav{display:flex;gap:var(--space-sm);overflow-x:auto;scrollbar-width:none;width:100%}.todo-nav-item{display:flex;align-items:center;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-pill);font-size:var(--font-size-sm);color:var(--color-text-muted);transition:all .2s ease;border:1px solid transparent;text-decoration:none;white-space:nowrap}.todo-nav-item.active{background-color:var(--color-secondary);color:var(--color-primary);border-color:var(--color-primary);font-weight:500}.todo-nav-item:hover:not(.active){background-color:var(--color-border-muted)}.delete-list-button{display:inline-flex;justify-content:right;background-color:transparent;border:none;opacity:0;transition:all .2s ease;margin:0;width:0;padding:0}.delete-list-button svg{stroke:var(--color-text-muted);width:14px}.delete-list-btn:hover svg{stroke:var(--color-primary)}.todo-nav-item.active .delete-list-button,.todo-nav-item:hover .delete-list-button{opacity:1;margin-left:var(--space-md);width:24px}.delete-list-button:hover svg{stroke:var(--color-primary);transform:scale(1.1)}.add-list-button{padding:var(--space-xs) var(--space-sm);background-color:transparent;border:1px dashed var(--color-border-muted);border-radius:var(--radius-pill);color:var(--color-text-muted);transition:all .2s ease;min-width:45px;aspect-ratio:1 / 1;font-size:var(--font-size-lg)}.add-list-button:hover{background-color:var(--color-secondary);color:var(--color-primary);border-color:var(--color-primary);border-style:solid}.create-list-form{margin:0}.create-list-form input{height:45px;padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-sm);width:150px;animation:expandIn .2s ease-out}@keyframes expandIn{0%{width:45px;opacity:0}to{width:150px;opacity:1}}.timer{font-size:4rem;font-weight:400}.input-container{display:flex;flex-direction:column;gap:var(--space-xs)}input,select{background-color:var(--color-bg-surface);color:var(--color-text-muted);font-size:var(--font-size-sm);border-radius:var(--radius-pill);padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border-muted);outline:none}input:focus,select:focus{border-color:var(--color-primary)}label{color:var(--color-text-muted);font-size:var(--font-size-sm)}input::placeholder{color:var(--color-text-muted)}.select-container{position:relative;display:flex;align-items:center}select{width:100%;appearance:none;padding-right:var(--space-xl);text-overflow:ellipsis;cursor:pointer}.select-icon{position:absolute;right:var(--space-md);pointer-events:none;color:var(--color-text-muted)}input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{cursor:pointer;filter:invert(47%) sepia(7%) saturate(915%) hue-rotate(341deg) brightness(93%) contrast(85%)}.overlay{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;background-color:#0000004d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);height:100%;width:100%;z-index:1000}.container{background-color:var(--color-bg);padding:var(--space-lg);padding-top:var(--space-xl);box-shadow:0 10px 30px #0003;border:1px solid var(--color-border-muted);border-radius:var(--radius-md);min-width:300px;max-width:350px;position:relative;max-height:80vh;overflow-y:auto}.close-button{position:absolute;top:var(--space-md);right:var(--space-md);font-size:var(--font-size-md);background-color:transparent;border-color:transparent}.close-button svg{color:var(--color-text-muted)}.close-button svg:hover{color:var(--color-text);cursor:pointer}.container::-webkit-scrollbar{display:none}.productivity .button-group{display:flex;flex-direction:column;gap:var(--space-md);margin:var(--space-lg) 0}.productivity button{display:flex;align-items:center;justify-content:space-between;padding:var(--space-xs)}.productivity button:active{transform:none}.productivity-level{display:flex;justify-content:center;align-items:center;background-color:var(--color-primary);color:var(--color-bg);width:var(--space-xl);height:var(--space-xl);border-radius:var(--radius-pill)}.productivity-description{flex-grow:1}.container .productivity{max-width:320px}.timer-circle{display:flex;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:1 / 1;width:90%;max-width:500px;min-width:400px;border:6px solid var(--color-primary);border-radius:var(--radius-pill);box-shadow:0 0 20px #0000001a,inset 0 0 15px #0000000d;padding:var(--space-xl);gap:var(--space-lg)}.timer-circle>*{width:75%}.timer-circle input,.timer-circle select{background:var(--color-bg);border:none;border-bottom:2px solid var(--color-border-muted);border-radius:0;text-align:center;color:var(--color-text)}.timer-circle input:focus,.timer-circle select:focus{outline:none;border-bottom:2px solid var(--color-primary)}.timer-circle .select-icon{right:15%;opacity:.5}.timer-button-row{display:flex;gap:var(--space-md);margin-top:var(--space-xxl)}.timer-button-row .button-base{min-width:120px}.productivity-buttons{display:flex;justify-content:center;gap:var(--space-md)}form{display:flex;flex-direction:column;gap:var(--space-md);margin-top:var(--space-md)}.input-row{display:flex;gap:var(--space-md)}.input-row>*{flex:1}.required-info{color:var(--color-text-muted);font-size:var(--font-size-xs)}.session-list{display:flex;flex-direction:column;margin-top:var(--space-md);gap:var(--space-md)}.content{display:flex;flex-direction:column;text-align:center;gap:var(--space-sm)}.category-text{text-transform:uppercase;font-size:var(--font-size-sm)}.productivity-text{font-size:var(--font-size-sm)}.time-info{display:flex;gap:var(--space-xs);justify-content:center;font-size:var(--font-size-sm);background:var(--color-bg);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-pill)}.separator{opacity:.4}.active-time{font-size:var(--font-size-xs)}.button-row{display:flex;gap:var(--space-sm)}.button-row>*{flex:1}.empty-message{margin-top:var(--space-lg);color:var(--color-text-muted)}.time-edit-content{display:flex;flex-direction:column;background-color:var(--color-bg);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);gap:var(--space-md)}.time-edit-content .time-info>*{flex:1}.not-found-container{display:flex;justify-content:center;align-items:center;height:80vh;padding:var(--space-xl)}.not-found-content{max-width:400px}.not-found-icon{color:var(--color-primary);margin-bottom:var(--space-md)}.not-found-content h1{font-size:var(--font-size-xxl);margin:0;color:var(--color-text);line-height:1}.not-found-content h2{font-size:var(--font-size-xl);margin-bottom:var(--space-md)}.not-found-content p{color:var(--color-text-muted);margin-bottom:var(--space-lg)}.not-found-content a{color:var(--color-on-primary);text-decoration:none}#root{background-color:var(--color-bg);text-align:center}html,body,#root{height:100vh;margin:0}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;--color-bg: #f9f8f7;--color-bg-surface: #ffffff;--color-bg-surface-hover: #fcfaf9;--color-border-muted: #eceae7;--color-text: #3c3836;--color-text-muted: #7c6f64;--color-primary: #a65d43;--color-primary-hover: #8c4e38;--color-on-primary: #fcf9f7;--color-secondary: #eaddd7;--color-secondary-hover: #decbc3;--color-on-secondary: #6b3e2d;--color-neutral: #f0edea;--color-neutral-hover: #e6e2de;--color-on-neutral: #504945;--color-graph-1: #c35e0a;--color-graph-2: #6c782e;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-md: 1.125rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-xxl: 2rem;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-xxl: 2.5rem;--radius-sm: .75rem;--radius-md: 1rem;--radius-lg: 1.5rem;--radius-xl: 2rem;--radius-pill: 999px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 12px rgba(0, 0, 0, .05);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .1)}#root.dark{--color-bg: #1c1b1a;--color-bg-surface: #262423;--color-bg-surface-hover: #2e2c2b;--color-border-muted: #3c3836;--color-text: #ebdbb2;--color-text-muted: #a89984;--color-primary: #bd6e51;--color-primary-hover: #d18266;--color-on-primary: #1c1b1a;--color-secondary: #3c3836;--color-secondary-hover: #4a4440;--color-on-secondary: #ebdbb2;--color-neutral: #32302f;--color-neutral-hover: #3c3836;--color-on-neutral: #d5c4a1;--color-graph-1: #e78a4e;--color-graph-2: #a9b665;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .4);--shadow-md: 0 4px 12px rgba(0, 0, 0, .5);--shadow-lg: 0 12px 24px rgba(0, 0, 0, .6)}*{box-sizing:border-box;margin:0;transition:background-color .2s ease,border-color .2s ease,stroke .2s ease,fill .2s ease,box-shadow .2s ease}main{flex:1;padding:var(--space-lg)}.body-container{display:flex;text-align:center;height:100%}.main-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}h1,h2,h3{color:var(--color-text)}button{cursor:pointer}