:root{color:#303b33;font-synthesis:none;--green:#496c55;--line:#e9ece5;background:#f7f8f5;font-family:Inter,Noto Sans SC,PingFang SC,Microsoft YaHei,system-ui,sans-serif;font-size:14px}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent;background:0 0;border:0}button:disabled{opacity:.45;cursor:default}input{min-width:0}button:focus-visible{outline-offset:3px;outline:3px solid #a3bda3}input:focus{outline:none}svg{vertical-align:middle;flex-shrink:0}h1,h2,p{margin:0}.todo-app{max-width:640px;margin:75px auto;padding:0 24px}.app-header{justify-content:space-between;align-items:center;margin-bottom:26px;display:flex}.app-header h1{letter-spacing:2px;align-items:center;gap:10px;font-size:21px;font-weight:600;display:flex}.logo{background:var(--green);color:#fff;border-radius:10px;place-items:center;width:33px;height:33px;display:grid}.account{align-items:center;gap:17px;display:flex}.sync-status{color:#919b8e;align-items:center;gap:5px;padding:4px 0;font-size:11px;display:flex}.sync-status.warning{color:#b17f63}.login{color:#63795b;padding:5px 0;font-size:12px}.login:hover{color:#365343}.todo-list{background:#fff;border:1px solid #e4e9df;border-radius:13px;overflow:hidden;box-shadow:0 5px 25px #34442d03}.add-form{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:17px 19px;display:flex}.add-form input{color:#3e4e36;background:0 0;border:0;flex:1;width:100%;padding:7px 0;font-size:14px}.add-form input::placeholder{color:#a4ae9c}.primary{background:var(--green);color:#fff;border-radius:8px;transition:background .15s}.primary:hover{background:#385641}.primary:disabled:hover{background:var(--green)}.add-button{flex-shrink:0;place-items:center;width:33px;height:33px;padding:0;display:grid}.tasks{padding:3px 20px}.task{border-bottom:1px solid #f0f2eb;align-items:center;gap:13px;min-height:65px;padding:12px 0;display:flex}.task:last-child{border:0}.checkbox{color:#fff;border:1.4px solid #c9d4c3;border-radius:6px;flex-shrink:0;place-items:center;width:19px;height:19px;padding:0;transition:background .15s,border-color .15s;display:grid}.checkbox:disabled{color:#8da580}.task.completed .checkbox:disabled{color:#fff}.checkbox:hover{background:#f0f5eb;border-color:#77946c}.task-title{overflow-wrap:anywhere;color:#475440;flex:1;min-width:0;font-size:14px;line-height:1.7}.task.completed .checkbox{background:#8da580;border-color:#8da580}.task.completed .task-title{color:#acb4a5;-webkit-text-decoration:line-through #c0caba;text-decoration:line-through #c0caba}.icon-button{color:#a8b19f;border-radius:6px;flex-shrink:0;place-items:center;width:30px;height:30px;padding:0;display:inline-grid}.icon-button:hover{color:#6c845f;background:#f1f5ed}.delete:hover{color:#b87965;background:#fcf0ea}.empty{letter-spacing:1px;color:#b3bca9;justify-content:center;align-items:center;min-height:145px;font-size:12px;display:flex}.error{color:#ad7664;overflow-wrap:anywhere;background:#fcf5f0;border-radius:6px;margin:10px 15px;padding:9px 11px;font-size:12px;line-height:1.8}.auth-dialog{color:#48583e;background:#fff;border:1px solid #dfe7d8;border-radius:13px;width:min(350px,100% - 32px);padding:24px;box-shadow:0 25px 90px #24341b20}.auth-dialog::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#1b2a1640}.dialog-head{justify-content:space-between;align-items:center;margin-bottom:23px;display:flex}.dialog-head h2{letter-spacing:1px;font-size:18px;font-weight:600}.auth-dialog form{flex-direction:column;gap:18px;display:flex}.auth-dialog label{color:#7c8c70;font-size:12px}.auth-dialog label input{color:#4f6242;background:#fdfefb;border:1px solid #dee6d6;border-radius:6px;width:100%;margin-top:7px;padding:10px 11px;font-size:13px;display:block}.auth-dialog input:focus{border-color:#8ca67d;box-shadow:0 0 0 3px #567b4510}.auth-dialog input::placeholder{color:#b3bda9}.auth-submit{height:39px;margin-top:3px}.auth-links{justify-content:space-between;align-items:center;margin-top:20px;display:flex}.auth-links button{color:#93a184;padding:0;font-size:11px}.auth-links button:hover{color:#57714a}.notice{color:#8b9c7b;background:#f4f7ef;border-radius:6px;margin-bottom:16px;padding:9px 11px;font-size:11px;line-height:1.8}.auth-dialog form .notice{margin:0}.form-error{color:#b47965;overflow-wrap:anywhere;font-size:11px;line-height:1.8}.spin{animation:1.2s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=600px){.todo-app{margin:36px auto;padding:0 20px}.app-header{margin-bottom:23px}.app-header h1{font-size:20px}.add-form{padding:16px}.tasks{padding:3px 16px}.task{gap:12px;min-height:65px}.task-title{font-size:14px}.account{gap:14px}.empty{min-height:135px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}html[data-widget=true],html[data-widget=true] body,html[data-widget=true] #root{background:#f7f8f5;height:100%;overflow:hidden}html[data-widget=true] .todo-app{flex-direction:column;max-width:none;height:100%;margin:0;padding:14px;display:flex}html[data-widget=true] .app-header{-webkit-app-region:drag;app-region:drag;-webkit-user-select:none;user-select:none;flex-shrink:0;margin:0 0 13px}html[data-widget=true] .app-header h1{letter-spacing:1px;gap:8px;font-size:16px}html[data-widget=true] .logo{border-radius:8px;width:26px;height:26px}html[data-widget=true] .logo svg{width:16px}html[data-widget=true] .account{-webkit-app-region:no-drag;app-region:no-drag;gap:10px}html[data-widget=true] .account .icon-button{width:23px;height:25px}html[data-widget=true] .pin.pinned{color:#6c855f}html[data-widget=true] .todo-list{border-radius:10px;flex-direction:column;flex:1;min-height:0;display:flex}html[data-widget=true] .add-form{flex-shrink:0;padding:12px 14px}html[data-widget=true] .add-form input,html[data-widget=true] .task-title{font-size:13px}html[data-widget=true] .add-button{width:29px;height:29px}html[data-widget=true] .tasks{flex:1;min-height:0;padding:0 14px;overflow-y:auto}html[data-widget=true] .task{gap:10px;min-height:55px}html[data-widget=true] .empty{height:100%;min-height:90px}html[data-widget=true] .auth-dialog{max-height:calc(100vh - 24px);overflow-y:auto}
