@import "https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&family=Lexend:wght@400;700&display=swap";:root{--font-primary:"Josefin Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;--font-secondary:"Lexend", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;--font-weight-regular:400;--font-weight-bold:700;--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:40px;--space-6:48px;--space-7:56px;--space-8:64px;--ivory:#fef8f5;--sand:#efe9e3;--stone:#d9cfc7;--tan:#c9b59c;--charcoal:#222831;--slate:#393e46;--taupe:#948979;--oat:#dfd0b8;--white:#fff;--brown:#6b5c47;--important-flag-bg:#ffdad6;--normal-flag-bg:#ccf2b4;--normal-flag-text:#327606;--not-important-flag-bg:#fff2b4;--not-important-flag-text:#a18500;--important-flag-text:#ba1a1a;--color-bg:var(--ivory);--color-surface:var(--sand);--color-accent-1:var(--stone);--color-accent-2:var(--tan);--color-text:var(--charcoal);--color-logo:var(--brown);--color-button-bg:var(--brown);--color-button-text:var(--ivory);--color-header-border:#e7e5e4;--color-stat-card-text:var(--brown);--color-add-task-bg:var(--white);--color-check-box-bg:var(--brown);--color-subtext:var(--brown)}[data-theme=dark]{--color-bg:var(--charcoal);--color-surface:var(--slate);--color-accent-1:var(--taupe);--color-accent-2:var(--oat);--color-text:var(--ivory);--color-logo:var(--oat);--color-header-border:#393e46;--color-button-bg:var(--oat);--color-button-text:var(--charcoal);--color-stat-card-text:var(--oat);--color-add-task-bg:var(--slate);--color-check-box-bg:var(--taupe);--color-subtext:var(--oat)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-primary);font-weight:var(--font-weight-regular);background-color:var(--color-bg);overflow-x:hidden}input,textarea{outline:none}button{background-color:#0000;border:none}.container{width:80%;margin-inline:auto}@media screen and (width<=768px){.container{width:95%}}.desktop-only{display:block}@media screen and (width<=768px){.desktop-only{display:none}}.overlay{opacity:.7;background-color:#000;position:absolute;inset:0}.button{background-color:var(--color-button-bg);font-family:var(--font-primary);font-size:1rem;font-weight:var(--font-weight-regular);color:var(--color-button-text);justify-content:center;align-items:center;gap:var(--space-1);cursor:pointer;border:none;border-radius:12px;width:150px;height:40px;transition:all .2s;display:flex}.button:hover{opacity:.9}.button.disabled{opacity:.2;pointer-events:none}.app{width:100%;height:100vh}.header{background-color:var(--color-bg);border-bottom:1px solid var(--color-header-border);width:100%;padding-block:var(--space-4);box-shadow:0 2px 15px #00000015}.header .header__container{justify-content:space-between;align-items:center;display:flex}.header .header__logo{align-items:center;gap:var(--space-1);color:var(--color-text);font-size:1.7rem;display:flex}.header .header__logo span{font-weight:var(--font-weight-bold)}.header .header__logo .header__logo-icon{color:var(--color-logo)}.header .header__buttons{align-items:center;gap:var(--space-5);display:flex}.header .header__toggle-view-btns{align-items:center;gap:var(--space-2);display:flex}@media screen and (width<=768px){.header .header__toggle-view-btns{display:none}}.header .header__button{cursor:pointer;color:var(--color-text);background-color:#0000;border:none;font-size:1.4rem}.add-task{width:100%;height:100vh;padding-block:var(--space-3);color:var(--color-text);z-index:10;background-color:#000000b0;transition:transform .3s;position:fixed;top:0;left:0;transform:translate(-100%)}.add-task.add-task--active{transform:translate(0)}.add-task .add-task__container{justify-content:center;height:100%;display:flex}.add-task .add-task__card{isolation:isolate;width:min(100%,42rem);padding:var(--space-4);background-color:var(--color-add-task-bg);border-radius:var(--space-2);box-shadow:0 var(--space-1) var(--space-4) color-mix(in srgb, var(--charcoal) 4%, transparent);position:relative;overflow:hidden}.add-task .add-task__header,.add-task .add-task__actions,.add-task .add-task__priority-grid,.add-task .add-task__priority-name{align-items:center;display:flex}.add-task .add-task__header,.add-task .add-task__actions{justify-content:space-between}.add-task .add-task__title,.add-task .add-task__label,.add-task .add-task__submit{font-family:var(--font-primary);font-weight:var(--font-weight-bold)}.add-task .add-task__input,.add-task .add-task__priority-card{border:1px solid var(--color-accent-2)}.add-task .add-task__form,.add-task .add-task__field,.add-task .add-task__priority,.add-task .add-task__priority-card{flex-direction:column;display:flex}.add-task .add-task__form{gap:var(--space-3);margin-top:var(--space-4)}.add-task .add-task__fields{gap:var(--space-3);flex-direction:column;display:flex}.add-task .add-task__field{gap:var(--space-1)}.add-task .add-task__title{letter-spacing:0;font-size:2.5rem;line-height:1.2}.add-task .add-task__label{letter-spacing:.044em;font-size:1rem;line-height:.875}.add-task .add-task__icon-button{cursor:pointer;color:var(--color-text);justify-content:center;align-items:center;font-size:2rem;display:flex}.add-task .add-task__input{min-height:2.625rem;padding:.75rem var(--space-2);color:var(--color-stat-card-text);background-color:var(--color-bg);border-radius:var(--space-1);font-family:var(--font-secondary);font-size:.875rem;line-height:1.25}.add-task .add-task__input::placeholder{color:var(--color-stat-card-text);opacity:.5}.add-task .add-task__input--textarea{resize:none;min-height:7rem}.add-task .add-task__priority{gap:var(--space-2);padding-top:var(--space-1);border:0}.add-task .add-task__priority-grid{gap:var(--space-1);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.add-task .add-task__priority-card{justify-content:center;align-items:center;gap:calc(var(--space-1) / 2);min-height:5.25rem;padding:var(--space-2);border-radius:var(--space-2);text-align:center;cursor:pointer;opacity:.5;transition:all .2s;position:relative;scale:.9}.add-task .add-task__priority-card:has(:checked){opacity:1;scale:1}.add-task .add-task__priority-card--important{color:var(--important-flag-text);background-color:var(--important-flag-bg)}.add-task .add-task__priority-card--normal{color:var(--normal-flag-text);background-color:var(--normal-flag-bg)}.add-task .add-task__priority-card--low{color:var(--not-important-flag-text);background-color:var(--not-important-flag-bg);opacity:.7}.add-task .add-task__priority-input{opacity:0;cursor:pointer;position:absolute;inset:0}.add-task .add-task__priority-name{justify-content:center;gap:var(--space-1);font-family:var(--font-secondary);font-size:1rem;line-height:1.6}.add-task .add-task__priority-dot{width:var(--space-1);aspect-ratio:1;background-color:currentColor;border-radius:50%}.add-task .add-task__priority-note{font-family:var(--font-secondary);font-size:.75rem;line-height:1.4}.add-task .add-task__actions{padding-top:var(--space-4);justify-content:flex-end}.add-task .add-task__submit-icon{width:.875rem;height:.875rem}@media screen and (width<=768px){.add-task .add-task__card{padding:var(--space-3)}.add-task .add-task__title{font-size:1.8rem}.add-task .add-task__priority-grid{grid-template-columns:1fr}.add-task .add-task__label,.add-task .add-task__priority-name{font-size:.9rem}.add-task .add-task__field--textarea{display:none}.add-task .add-task__submit{width:100%}}.todos{width:100%;padding-block:var(--space-3)}.todos .todos__container{gap:var(--space-5);flex-direction:column;display:flex}.todos .todos__control{justify-content:space-between;align-items:center;display:flex}@media screen and (width<=768px){.todos .todos__control .todos__control-button--toggle{display:block}.todos .todos__control .todos__control-buttons-list{z-index:3;background-color:var(--color-surface);width:200px;padding:var(--space-2);border-radius:8px;flex-direction:column;align-items:flex-start;display:none;position:absolute;top:50px;right:0}.todos .todos__control .todos__control-buttons-list.todos__control-buttons-list--active{display:flex}.todos .todos__control .todos__control-buttons-list .todos__control-button{text-align:left;width:100%}.todos .todos__control .todos__control-buttons-list .todos__control-button--active,.todos .todos__control .todos__control-buttons-list .todos__control-button:hover{background-color:var(--color-bg)}.todos .todos__control .todos__task{align-items:flex-start;gap:var(--space-2);flex-direction:column}}.todos .todos__title{font-size:2rem;font-weight:var(--font-weight-bold);color:var(--color-text)}.todos .todos__control-buttons{border:2px solid var(--color-header-border);background-color:var(--color-bg);border-radius:8px;align-items:center;padding:4px;display:flex;position:relative}.todos .todos__control-buttons-list{align-items:center;gap:var(--space-1);display:flex}.todos .todos__control-button{cursor:pointer;font-weight:var(--font-weight-bold);font-family:var(--font-primary);color:var(--color-text);background:0 0;border:none;border-radius:4px;padding:8px 14px;transition:all .3s}.todos .todos__control-button:hover{background-color:var(--color-header-border)}.todos .todos__control-button--active{background-color:var(--color-header-border)}.todos .todos__control-button--toggle{padding:6px;font-size:1.1rem;display:none}.todos .todos__list.todos__list--list{gap:var(--space-1);flex-direction:column;display:flex}.todos .todos__list.todos__list--grid{gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));display:grid}.todos .todos__list.todos__list--grid .todos__task{gap:var(--space-2);flex-direction:column;align-items:flex-start}.todos .todos__list.todos__list--grid .todos__task-check{position:absolute;top:16px;right:16px}.todos .todos__task{background-color:var(--color-bg);padding:var(--space-2);border:1px solid var(--color-header-border);border-radius:8px;justify-content:space-between;align-items:center;display:flex;position:relative}@media screen and (width<=768px){.todos .todos__task{align-items:flex-start;gap:var(--space-2);flex-direction:column}.todos .todos__task .todos__task-check{position:absolute;top:16px;right:16px}}.todos .todos__task--completed{opacity:.6}.todos .todos__task--completed .todos__task-title{text-decoration:line-through}.todos .todos__task--completed .todos__task-button--start{pointer-events:none;opacity:.5}.todos .todos__task--active{background-color:#6b5c4734}.todos .todos__task--not-started .todos__task-check{pointer-events:none;opacity:.5}.todos .todos__task-left{align-items:flex-start;gap:var(--space-2);display:flex}.todos .todos__task-check{border:2px solid var(--color-check-box-bg);cursor:pointer;border-radius:4px;justify-content:center;align-items:center;width:20px;height:20px;display:flex}.todos .todos__task-check.todos__task-check--checked{background-color:var(--color-check-box-bg)}.todos .todos__task-check.todos__task-check--checked:after{content:"";border-bottom:2px solid #fff;border-right:2px solid #fff;width:5px;height:9px;transform:rotate(45deg)}.todos .todos__task-title{font-size:1.3rem;font-weight:var(--font-weight-bold);color:var(--color-text);margin-bottom:var(--space-1);text-transform:capitalize}.todos .todos__task-description{text-transform:capitalize;font-size:.9rem;font-weight:var(--font-weight-regular);color:var(--color-subtext)}@media screen and (width<=768px){.todos .todos__task-description{display:none}}.todos .todos__task-date{font-size:.8rem;font-weight:var(--font-weight-regular);color:var(--color-subtext);margin-top:var(--space-1)}.todos .todos__task-right{align-items:center;gap:var(--space-2);display:flex}.todos .todos__task-buttons{align-items:center;gap:var(--space-1);order:2;display:flex}.todos .todos__task-button{color:var(--white);cursor:pointer;padding:var(--space-1);border:1px solid #0000;border-radius:10px;justify-content:center;align-items:center;font-size:.8rem;transition:all .2s;display:flex}.todos .todos__task-button--delete{background-color:var(--important-flag-text);border-color:var(--important-flag-text)}.todos .todos__task-button--delete:hover{background-color:var(--white);color:var(--important-flag-text)}.todos .todos__task-button--start{background-color:var(--color-check-box-bg);border-color:var(--color-check-box-bg)}.todos .todos__task-button--start:hover{background-color:var(--white);color:var(--color-check-box-bg)}.user-name{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.user-name .user-name__container{z-index:4;width:400px;height:fit-content;padding:var(--space-2);gap:var(--space-2);background-color:var(--sand);border-radius:12px;flex-direction:column;display:flex;position:relative}.user-name .user-name__title{color:var(--charcoal);font-size:2rem;font-weight:var(--font-weight-bold)}.user-name .user-name__input-container{align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2);background-color:var(--taupe);border-radius:12px;display:flex}.user-name .user-name__input-icon{color:var(--sand);font-size:1.3rem}.user-name .user-name__input{font-size:.9rem;font-weight:var(--font-weight-regular);font-family:var(--font-secondary);color:var(--sand);background-color:#0000;border:none;outline:none;flex:1}.user-name .user-name__input::placeholder{font-size:.9rem;font-weight:var(--font-weight-regular);font-family:var(--font-secondary);color:var(--sand)}.stats{padding-block:var(--space-4);color:var(--color-text)}.stats .stats__container{gap:var(--space-4);flex-direction:column;display:flex}.stats .stats__welcome-message{justify-content:space-between;align-items:flex-end;gap:var(--space-3);flex-wrap:wrap;display:flex}.stats .stats__welcome-copy{align-items:flex-start;gap:var(--space-1);flex-direction:column;flex:1;display:flex}.stats .stats__date,.stats .stats__summary{font-family:var(--font-secondary);font-weight:var(--font-weight-regular);color:var(--color-logo)}.stats .stats__date{font-size:.875rem;line-height:1.5}.stats .stats__greeting{font-family:var(--font-primary);font-size:clamp(1.75rem,4vw,2.5rem);font-weight:var(--font-weight-bold);color:var(--color-text);line-height:1.2}.stats .stats__summary{font-size:1rem;line-height:1.6}.stats .stats__cta{justify-content:center;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);border-radius:var(--space-1);font-family:var(--font-primary);font-size:.875rem;font-weight:var(--font-weight-bold);letter-spacing:.044em;color:var(--color-button-text);background-color:var(--color-button-bg);cursor:pointer;border:none;transition:opacity .2s;display:inline-flex}.stats .stats__cta:hover{opacity:.92}.stats .stats__cta-icon{flex-shrink:0;width:1rem;height:1rem}.stats .stats__cta-label{line-height:1}.stats .stats__stats-container{gap:var(--space-2);grid-template-columns:repeat(3,minmax(0,1fr));width:100%;display:grid}.stats .stats__card{min-height:10.1875rem;padding:var(--space-3);border:1px solid var(--color-header-border);border-radius:var(--space-2);isolation:isolate;flex-direction:column;display:flex;position:relative;overflow:hidden}.stats .stats__card-inner{z-index:1;justify-content:space-between;gap:var(--space-2);flex-direction:column;flex:1;display:flex;position:relative}.stats .stats__card-header{justify-content:space-between;align-items:center;gap:var(--space-2);padding-bottom:var(--space-3);display:flex}.stats .stats__card-label{font-family:var(--font-primary);font-size:.875rem;font-weight:var(--font-weight-bold);letter-spacing:.05em;text-transform:uppercase;line-height:1}.stats .stats__card-icon{flex-shrink:0;width:1.25rem;height:1.25rem}.stats .stats__card-body{flex-direction:column;align-items:flex-start;gap:.21875rem;display:flex}.stats .stats__card-value{font-family:var(--font-primary);font-size:clamp(2rem,5vw,2.5rem);font-weight:var(--font-weight-bold);line-height:1.2}.stats .stats__card-description{font-family:var(--font-secondary);font-size:.9rem;font-weight:var(--font-weight-regular);line-height:1.6}.stats .stats__card-accent{pointer-events:none;z-index:0;opacity:.25;border-radius:50%;width:6.25rem;height:6.25rem;position:absolute;bottom:-1.25rem;right:-1.25rem}.stats .stats__card--not-started,.stats .stats__card--completed{background-color:var(--color-header-border)}.stats .stats__card--in-progress{background-color:var(--color-accent-2)}.stats .stats__card--not-started .stats__card-label,.stats .stats__card--not-started .stats__card-icon,.stats .stats__card--not-started .stats__card-description,.stats .stats__card--completed .stats__card-label,.stats .stats__card--completed .stats__card-description,.stats .stats__card--completed .stats__card-icon{color:var(--color-stat-card-text)}.stats .stats__card--not-started .stats__card-value,.stats .stats__card--completed .stats__card-value{color:var(--color-text)}.stats .stats__card--in-progress .stats__card-label,.stats .stats__card--in-progress .stats__card-icon,.stats .stats__card--in-progress .stats__card-value,.stats .stats__card--in-progress .stats__card-description{color:#554633}.stats .stats__card--not-started .stats__card-accent{background-color:var(--stone);opacity:.35}.stats .stats__card--in-progress .stats__card-accent{background-color:var(--brown)}.stats .stats__card--completed .stats__card-accent{background-color:var(--oat);opacity:.35}@media screen and (width<=768px){.stats .stats__stats-container{grid-template:"not-started progress"1fr"completed completed"1fr/1fr 1fr}.stats .stats__card--completed{grid-area:completed}.stats .stats__card--in-progress{grid-area:progress}.stats .stats__card--not-started{grid-area:not-started}.stats .stats__cta{width:100%}}@media screen and (width<=991px){.stats .stats__welcome-message{flex-direction:column;align-items:stretch}}