*,:before,:after{box-sizing:border-box}html{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;font:inherit}summary{display:list-item}:root{--color-bg-dark: #111;--color-bg-light: #fff;--color-bg-gray: #f1f1f1;--color-bg-accent: #03793b;--color-bg-accent-hover: #026b35;--color-bg-accent-active: #015a2c;--color-bg-disabled: #ccc;--color-bg-gray-hover: #ddd;--color-text-light: #fff;--color-text-dark: #111;--color-text-muted: #8d8888;--color-text-disabled: #666;--border-radius-large: 30px;--border-radius-medium: 10px;--transition-fast: .2s ease-in-out;--font-main: sans-serif}*{margin:0;padding:0;box-sizing:border-box}.todo{min-height:100vh;background-color:var(--color-bg-dark);font-family:var(--font-main);padding:20px}.todo__box{max-width:600px;border-radius:var(--border-radius-medium);background-color:var(--color-bg-light);margin:100px auto 20px;padding:30px 40px 70px}.todo__title{font-weight:300;text-align:center;font-size:20px;text-transform:uppercase;margin-bottom:30px}.todo__row{display:flex;justify-content:space-between;align-items:center;background-color:var(--color-bg-gray);border-radius:var(--border-radius-large);margin-bottom:30px;padding-left:10px}.todo__input{background-color:transparent;padding:10px;border:none;outline:none;font-size:16px;width:100%}.todo__btn{border:none;background-color:var(--color-bg-accent);color:var(--color-text-light);padding:10px 45px;border-radius:var(--border-radius-large);cursor:pointer;font-size:18px;transition:background-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}.todo__btn:hover{background-color:var(--color-bg-accent-hover)}.todo__btn:active{background-color:var(--color-bg-accent-active);transform:scale(.97);box-shadow:inset 0 2px 4px #0000004d}.todo__btn:focus{outline:2px solid var(--color-bg-accent);outline-offset:2px}.todo__btn:disabled{background-color:var(--color-bg-disabled);color:var(--color-text-disabled);cursor:not-allowed;opacity:.6}.todo__list{list-style-type:none}.todo__item{cursor:pointer;font-size:18px;padding:12px 70px 12px 50px;position:relative;color:var(--color-text-dark);overflow-wrap:break-word;white-space:normal}.todo__item:before{content:"";position:absolute;width:25px;height:25px;background-color:var(--color-bg-gray);border-radius:50%;border:1px solid var(--color-text-dark);top:9px;left:10px}.todo__item--checked{color:var(--color-text-muted);text-decoration:line-through}.todo__item--checked:before{background-color:var(--color-bg-accent);border-color:var(--color-bg-accent)}.todo__item--checked:after{content:"✔";position:absolute;top:11px;left:15px;color:var(--color-text-light)}.todo__remove{position:absolute;top:5px;right:10px;width:40px;height:40px;border-radius:50%;background-color:var(--color-bg-gray);display:flex;justify-content:center;align-items:center;cursor:pointer;transition:background-color var(--transition-fast)}.todo__remove:hover{background-color:var(--color-bg-gray-hover)}.todo__error{color:red;margin-top:8px;font-size:.9rem}@media (width <= 768px){.todo__box{margin:40px 10px;padding:20px 25px 40px}.todo__row{flex-direction:column;align-items:stretch;gap:10px;padding:10px}.todo__btn{width:100%;padding:10px}.todo__input{font-size:16px}.todo__title{font-size:18px}.todo__item{font-size:16px;padding:10px 45px}.todo__remove{width:32px;height:32px;top:8px;right:6px}}@media (width <= 480px){.todo__title{font-size:16px}.todo__input{font-size:14px}.todo__btn{font-size:16px}.todo__item{font-size:14px;padding:10px 40px}.todo__remove{width:28px;height:28px}}