*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--brand-color-one: #ffba08;--brand-color-two: #faa307;--brand-color-three: #f48c06;--brand-color-four: #e85d04;--brand-color-five: #dc2f02;--brand-color-six: #9d0208;--brand-color-seven: #6a040f;--neutral-color-light: #f5f5f5;--neutral-color-dark: #333;--neutral-color-text-alt: #f5f5f5;--neutral-color-eight: #eeeeee;--gradient-primary: linear-gradient( 135deg, var(--brand-color-one) 0%, var(--brand-color-three) 25%, var(--brand-color-five) 50%, var(--brand-color-six) 75%, var(--brand-color-seven) 100% );--transparent-brand-one: rgba(255, 186, 8, .5);--font-family-content: "Zen Kaku Gothic New", sans-serif;--font-family-header: "Zen Maru Gothic", sans-serif;--text-color-primary: var(--neutral-color-dark);--text-color-secondary: var( --neutral-color-text-alt );--background-color-main: var(--neutral-color-light)}html[data-theme=dark]{--background-color-main: #2d3748;--text-color-primary: #f6f8f9;--text-color-secondary: #f5f5f5;--neutral-color-light: #e0e0e0;--neutral-color-dark: #e0e0e0;--brand-color-one: #db7c00;--brand-color-two: #b34b00;--brand-color-three: #e54202;--brand-color-four: #ffba08;--brand-color-five: #e00b00;--brand-color-six: #8b0005;--brand-color-seven: #59000a;--neutral-color-eight: #555555;--gradient-primary: linear-gradient( 135deg, var(--brand-color-one) 0%, var(--brand-color-three) 25%, var(--brand-color-five) 50%, var(--brand-color-six) 75%, var(--brand-color-seven) 100% );--transparent-brand-one: rgba( 224, 112, 0, .4 )}#root{background-color:var(--background-color-main);min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;line-height:1.6;letter-spacing:.5px;color:var(--text-color-primary);font-family:var(--font-family-content)}button:focus,a:focus,input:focus{outline:2px solid var(--brand-color-five);border-radius:4px;outline-offset:2px}.header-container{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-size:18px;padding:10px;background-color:var(--brand-color-one);box-shadow:0 2px 4px #0000001a;color:var(--text-color-primary);font-family:var(--font-family-header)}.link{text-decoration:none;color:var(--text-color-primary)}.link:hover{color:var(--brand-color-seven);transition:all .5s ease}@media screen and (max-width: 768px){.header-container{font-size:16px;padding:8px;height:100px}.link{font-size:14px}.link:hover{color:var(--brand-color-seven);transition:all .3s ease}}:root{--nav-width-desktop: 80%;--nav-width-lg: 90%;--nav-padding: 10px;--nav-padding-lg: 8px;--nav-padding-sm: 10px;--logo-width: 12rem;--logo-height: 4rem;--logo-width-lg: 10rem;--logo-height-lg: 3.5rem;--logo-width-sm: 6rem;--logo-height-sm: 2.8rem;--input-width: 16rem;--input-width-lg: 14rem;--input-width-sm: 70%;--input-height: 3.2rem;--input-height-lg: 2.8rem;--input-font-size: 20px;--input-font-size-lg: 18px;--input-font-size-sm: 16px;--input-padding: 0 10px 0 20px;--input-padding-lg: 0 8px 0 18px;--input-padding-sm: 0 6px 0 15px;--input-margin-right: 10px;--input-margin-right-sm: 5px;--search-size: 3.2rem;--search-size-lg: 2.8rem;--search-radius: .75rem;--search-radius-sm: .5rem;--icon-size: 3.5rem;--icon-size-lg: 3rem;--icon-size-sm: 2rem;--icon-svg-size: 1.5rem;--icon-svg-size-lg: 1.4rem;--icon-svg-size-sm: 1.2rem;--history-max-height: 150px;--history-max-height-lg: 120px;--history-max-height-sm: 100px;--history-font-size-sm: .9rem}nav{display:flex;justify-content:space-between;align-items:center;width:var(--nav-width-desktop);margin:10px auto;padding:var(--nav-padding);border-bottom:2px solid var(--neutral-color-eight);border-radius:10px;background-color:var(--brand-color-three)}.nav-container,.nav-icons{display:flex;align-items:center;position:relative}.nav-icons{flex-direction:row}.nav-logo{display:flex;align-items:center;justify-content:center;margin-right:10px}.nav-logo-image{width:var(--logo-width);height:var(--logo-height)}input{color:var(--text-color-primary);padding:var(--input-padding);border:none;border-radius:20px;background:var(--background-color-main);outline:none;margin-right:var(--input-margin-right);width:var(--input-width);height:var(--input-height);font-family:var(--font-family-content);font-size:var(--input-font-size);font-weight:600}input::placeholder{color:var(--text-color-primary);opacity:.6}.search-bar{display:flex;position:relative;height:var(--input-height)}.search-button{height:var(--search-size);width:var(--search-size);border-radius:var(--search-radius);border:none;background-color:var(--background-color-main);color:var(--text-color-primary);cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}.search-button svg{width:1.5rem;height:1.5rem}.search-button:hover svg,.nav-icon:hover{transform:scale(1.1)}.search-button.pulse{animation:pulse-once .8s}.nav-icon{display:flex;align-items:center;justify-content:center;width:var(--icon-size);height:var(--icon-size);margin:0 10px;color:var(--text-color-primary);background:transparent;border:none;cursor:pointer;transition:transform .3s ease}.nav-icon svg{width:var(--icon-svg-size);height:var(--icon-svg-size)}.search-history{position:absolute;top:100%;left:0;right:0;max-height:var(--history-max-height);overflow-y:auto;margin:4px 0 0;padding:0;border-radius:6px;background-color:var(--neutral-color-eight);color:var(--text-color-primary);box-shadow:0 2px 8px #00000026;list-style:none;z-index:10}.search-history li{padding:8px 12px;border-bottom:1px solid #ddd;cursor:pointer}.search-history li:last-child{border-bottom:none}.search-history li:hover,.search-history li.highlighted{background-color:var(--transparent-brand-one);color:var(--text-color-primary)}.search-history::-webkit-scrollbar{width:8px}.search-history::-webkit-scrollbar-thumb{background-color:var(--brand-color-five);border-radius:4px}.search-history::-webkit-scrollbar-track{background-color:var(--brand-color-one);border-radius:4px}.hamburger-menu-toggle{display:none;justify-content:center;align-items:center;background:none;border:none;color:var(--text-color-primary);cursor:pointer;padding:0 12px}@media (max-width: 1024px){nav{width:var(--nav-width-lg);padding:var(--nav-padding-lg)}input{width:var(--input-width-lg);height:var(--input-height-lg);font-size:var(--input-font-size-lg);padding:var(--input-padding-lg)}.search-button{height:var(--search-size-lg);width:var(--search-size-lg)}.search-bar{height:var(--input-height-lg)}.nav-icon{width:var(--icon-size-lg);height:var(--icon-size-lg);margin:0 8px}.nav-icon svg{width:var(--icon-svg-size-lg);height:var(--icon-svg-size-lg)}.nav-logo-image{width:var(--logo-width-lg);height:var(--logo-height-lg)}.search-history{max-height:var(--history-max-height-lg)}}@media (max-width: 768px){nav{padding:var(--nav-padding-sm)}input{width:var(--input-width-sm);height:var(--input-height-lg);font-size:var(--input-font-size-sm);margin-right:var(--input-margin-right-sm);padding:var(--input-padding-sm)}.search-button{border-radius:var(--search-radius-sm)}.hamburger-menu-toggle{display:flex;padding-left:5px}.nav-icons{display:none;flex-direction:column;position:absolute;top:20%;right:5%;padding:10px;border-radius:10px;border:1px solid #ddd;background-color:var(--neutral-color-eight);box-shadow:0 2px 12px #0003;transition:all .3s ease;z-index:10}.nav-icons.open{display:flex}.nav-icon{width:var(--icon-size-sm);height:var(--icon-size-sm);margin:0 5px}.nav-icon svg{width:var(--icon-svg-size-sm);height:var(--icon-svg-size-sm)}.nav-logo{margin-right:0;justify-content:center}.nav-logo-image{width:var(--logo-width-sm);height:var(--logo-height-sm);padding:0}.search-history{max-height:var(--history-max-height-sm);width:90%;font-size:var(--history-font-size-sm)}}.card-collapse{display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background-color:var(--transparent-brand-one);color:var(--text-color-primary);border:2px solid var(--brand-color-four);border-radius:.5rem;box-shadow:inset 0 0 12px #0000001a;transition:all .3s ease;font-family:var(--font-family-content);font-size:18px;position:relative}.card-collapse:hover{transform:translateY(-2px);box-shadow:inset 0 0 12px #00000026}.card-collapse .card-header{display:flex;justify-content:space-between;padding:8px 16px;background-color:var(--brand-color-eight);cursor:pointer}.card-collapse .card-title,.card-collapse .card-description{font-size:1.2rem;font-weight:700;margin-bottom:.5rem;overflow-y:auto;max-height:5.5rem;word-break:break-word;overflow-wrap:break-word;white-space:normal}.card-content-wrapper{max-height:500px;overflow:hidden;transition:max-height .3s ease,opacity .3s ease;opacity:1}.card-content-wrapper.closed{max-height:0;opacity:0;padding-top:0;padding-bottom:0}.card-content-wrapper.opened{display:block;padding:.5rem 1rem}.card-collapse .card-icons{display:flex;flex-direction:row;justify-content:space-around;margin-top:.5rem;padding:.5rem 0}.card-collapse .card-icon{background:transparent;border:none;cursor:pointer;transition:transform .2s ease,color .2s ease;color:var(--text-color-primary);flex-shrink:0}.card-collapse .card-icon:hover{transform:scale(1.1)}.card-collapse .favorite-button svg{height:1.75rem;width:1.75rem}.card-collapse.ghost-card{opacity:.8;background-color:var(--transparent-brand-one);font-style:italic;border:2px dashed var(--brand-color-five)}.card-collapse.ghost-card .card-header{background-color:var(--transparent-brand-one);pointer-events:auto}.empty-message.card-collapse{padding:12px 16px;text-align:center;border:2px solid var(--brand-color-four)}.card-grid{display:flex;flex-direction:column;justify-content:space-between;overflow:auto;padding:1rem;background-color:var(--neutral-color-eight);color:var(--text-color-primary);border:2px solid var(--brand-color-four);border-radius:10px;box-shadow:0 4px 8px #0000001a;font-family:var(--font-family-content);font-size:1.25rem;transition:transform .2s ease}.card-grid:hover{transform:scale(1.02)}.card-grid .card-header{display:flex;flex-direction:row;justify-content:space-between;padding:1rem 0;margin:0 1rem}.card-grid .card-title,.card-grid .card-description{word-break:break-word;overflow-wrap:break-word;white-space:normal;line-height:1.8rem;height:5.5rem;overflow-y:auto;padding-right:.5rem}.card-title{flex:1;font-weight:700;margin-right:.5rem}.add-card{display:flex;flex-direction:column;position:relative;overflow:hidden;align-items:center;justify-content:center;cursor:pointer;padding:7px;background-color:inherit;color:var(--color-text-primary);border:2px solid var(--brand-color-four);border-radius:10px;box-shadow:0 4px 8px #0000001a;transition:background-color .3s ease}.add-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gradient-primary);opacity:0;transition:opacity .3s ease;z-index:0}.add-card:hover:before{opacity:.6}.add-card>*{position:relative;z-index:1}.card-icons{display:flex;flex-direction:row;justify-content:space-between;margin:10px 0;gap:10px;align-items:center}.card-icon{width:1.5rem;height:1.5rem;color:var(--text-color-primary);background-color:transparent;border:none;cursor:pointer;transition:transform .2s ease,color .2s ease;flex-shrink:0}.card-icon.check:hover{color:#28a745}.card-icon.edit:hover{color:var(--brand-color-two)}.card-icon.trash:hover{color:var(--brand-color-six)}.card-icon.restore:hover{color:#28a745}.card-icon:hover{transform:scale(1.1)}.add-card svg{height:2.8rem;width:2.8rem}.add-card:hover svg{transform:scale(1.1)}.favorite-button{display:flex;flex-direction:column;align-items:center;justify-content:center;height:30px;flex-shrink:0;color:var(--text-color-primary);border:none;background:none;cursor:pointer;padding:0}.favorite-button:hover{color:var(--brand-color-four)}.favorite-button svg{height:2rem;width:2rem}.card-grid.ghost-card{opacity:.8;font-style:italic;border:2px dashed var(--brand-color-five);background-color:var(--transparent-brand-one);position:relative}.ghost-card:after{content:"Completed";position:absolute;top:.5rem;right:.5rem;font-size:.8rem;background:var(--brand-color-five);color:var(--text-color-secondary);padding:2px 6px;border-radius:.25rem}.ghost-card .card-content-wrapper,.ghost-card .favorite-button{pointer-events:none}.ghost-card .card-icons{pointer-events:auto;display:flex;justify-content:space-around}.card-title::-webkit-scrollbar,.card-description::-webkit-scrollbar{width:.5rem}.card-title::-webkit-scrollbar-thumb,.card-description::-webkit-scrollbar-thumb{background-color:var(--brand-color-five);border-radius:.25rem}.card-title::-webkit-scrollbar-track,.card-description::-webkit-scrollbar-track{background-color:var(--brand-color-one);border-radius:.25rem}@media screen and (max-width: 768px){.card-grid{width:100%;padding:.5rem}.card-collapse .card-description{min-height:55px}}.footer-container{background-color:var(--brand-color-one);margin-top:1rem;padding:20px;text-align:center;font-size:18px;color:var(--text-color-primary);font-family:var(--font-family-header);width:100%;box-shadow:0 -2px 4px #0000001a}.progress-bar{width:80%;height:.5rem;margin:.5rem auto;background:var(--background-color-main);border-radius:4px}.progress-fill{height:100%;background:linear-gradient(to right,#4caf50,#8bc34a);position:relative;transition:width .4s ease-in-out;box-shadow:0 0 5px var(--brand-color-seven)}.progress-bar.complete .progress-fill{background:linear-gradient(90deg,var(--brand-color-five),var(--brand-color-six),var(--brand-color-seven));animation:pulseGlow 30s infinite}@keyframes pulseGlow{0%{box-shadow:0 0 5px var(--brand-color-five)}50%{box-shadow:0 0 10px var(--brand-color-six)}to{box-shadow:0 0 5px var(--brand-color-seven)}}:root{--task-bg: var(--background-color-main);--task-text: var(--text-color-primary);--task-border: var(--brand-color-four);--task-hover: var(--brand-color-five);--task-error: #ca0101;--modal-overlay-bg: rgba(30, 30, 30, .5);--guide-backdrop-bg: rgba(0, 0, 0, .6);--textarea-bg: var(--transparent-brand-one);--textarea-scrollbar-thumb: var(--brand-color-five);--textarea-scrollbar-track: var(--brand-color-one);--task-grid-gap: .8rem;--task-list-gap: .5rem;--task-width-grid: 80%;--task-width-list: 50%;--task-radius: 8px;--modal-padding: 1rem;--modal-radius: 12px;--modal-min-width: 500px;--form-width: 70%;--form-padding: 10px;--modal-button-min-width: 100px;--form-font-size: 1.2rem;--error-font-size: 1.4rem;--modal-transition: transform .2s ease;--modal-hover-scale: 1.05}.task-list.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--task-grid-gap);width:var(--task-width-grid);margin:0 auto}.task-list.list{display:flex;flex-direction:column;gap:var(--task-list-gap);width:var(--task-width-list);margin:0 auto}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--modal-overlay-bg);display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:var(--task-bg);border:2px solid var(--task-border);min-width:var(--modal-min-width);padding:var(--modal-padding);border-radius:var(--modal-radius);box-shadow:0 10px 25px #0003}.modal-content-dialog{display:flex;flex-direction:column;align-items:center;justify-content:space-around;min-height:150px}form{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}form input,textarea{font-family:var(--font-family-content);background-color:var(--textarea-bg);border:1px solid var(--task-border);color:var(--task-text);width:var(--form-width);padding:var(--form-padding);font-size:var(--form-font-size);border-radius:var(--task-radius);outline:none;text-align:center;transition:border .2s ease}form input::placeholder,textarea::placeholder{color:var(--task-text);opacity:.5}textarea{min-height:100px;resize:none}form input:focus,textarea:focus{border-color:var(--brand-color-six);box-shadow:0 0 0 2px var(--neutral-color-eight)}textarea::-webkit-scrollbar{width:.5rem}textarea::-webkit-scrollbar-thumb{background-color:var(--textarea-scrollbar-thumb);border-radius:.25rem}textarea::-webkit-scrollbar-track{background-color:var(--textarea-scrollbar-track);border-radius:.25rem}.buttons{width:var(--form-width);display:flex;justify-content:space-around;margin:10px auto}.modal-button{font-size:var(--form-font-size);padding:5px;min-width:var(--modal-button-min-width);text-align:center;border-radius:5px;border:none;background-color:var(--brand-color-three);color:var(--task-text);transition:var(--modal-transition)}.modal-button:hover{background-color:var(--task-hover);transform:scale(var(--modal-hover-scale));cursor:pointer}.guide-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--guide-backdrop-bg);pointer-events:auto;z-index:998}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}.input-error{outline:3px solid var(--task-error);outline-offset:2px;border-radius:5px;animation:shake .5s ease-in-out}.error-message{font-family:var(--font-family-content);color:var(--task-error);font-size:var(--error-font-size);font-weight:600;margin:-7px 0 10px}.confirm-header{font-family:var(--font-family-content);color:var(--task-text)}@media screen and (max-width: 1024px){.task-list.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));width:90%}.task-list.list{width:70%}.modal-content{min-width:400px}form input,textarea,.buttons{width:85%}.modal-button{width:30%}}@media screen and (max-width: 768px){.task-list.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.task-list.list{width:80%}}.guide-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0000004d;z-index:9998}.guide-modal{font-family:var(--font-family-content);font-size:20px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--background-color-main);color:var(--text-color-primary);padding:1.5rem;border-radius:.8rem;box-shadow:0 0 20px var(--brand-color-one);border:2px solid var(--brand-color-five);z-index:10000;width:90%;max-width:500px;text-align:center;animation:fadeSlide .3s ease-out}@keyframes fadeSlide{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.guide-buttons{display:flex;justify-content:space-between;align-items:center;margin-top:1rem}.close-btn{position:absolute;top:12px;right:12px;background:transparent;border:none;cursor:pointer;color:var(--text-color-primary);z-index:2}.close-btn:hover{color:var(--brand-color-six)}.close-btn svg{width:30px;height:30px}.guide-buttons button{padding:6px 12px;border:2px solid var(--brand-color-five);background-color:var(--transparent-brand-one);color:var(--text-color-primary);border-radius:6px;cursor:pointer;font-weight:700}.guide-buttons button:hover{background-color:var(--brand-color-one);color:var(--text-color-primary)}.guide-buttons button:disabled{opacity:.4;cursor:not-allowed}.step-indicator{font-size:12px;color:var(--brand-color-four)}.guide-highlight-clone{position:absolute;outline:7px solid var(--text-color-secondary);box-shadow:0 0 50px var(--brand-color-five);transition:outline .3s ease;border-radius:10px;pointer-events:none;z-index:9999;background-color:transparent}@media screen and (max-width: 768px){.guide-modal{font-size:16px;height:200px;width:80%;max-width:500px}}