html,body,#root{height:100%}body{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:24px 14px;background:#f6f7fb}#root{width:min(560px,94vw);background:#fff;border:1px solid #e6e8f0;border-radius:14px;padding:18px;box-shadow:0 10px 28px #0a0c141f}.DeleteAll{width:100%;height:38px;border:1px solid #d9ddea;border-radius:12px;background:#f3f5fb;color:#1f2a44;cursor:pointer;transition:transform .12s ease,background .12s ease}.DeleteAll:hover{background:#eceff8}.DeleteAll:active{transform:translateY(1px)}.Delete-button{width:110px;height:32px;border:1px solid #e5e8f2;border-radius:12px;background:#fff;color:#1f2a44;cursor:pointer;transition:transform .12s ease,background .12s ease}.Delete-button:hover{background:#f3f5fb}.Delete-button:active{transform:translateY(1px)}.input{width:min(360px,62vw);height:40px;border-top-left-radius:12px;border-bottom-left-radius:12px;padding:0 12px;border:1px solid #d9ddea;background:#fff;color:#1f2a44;outline:none}.input::placeholder{color:#97a0b4}.input:focus{box-shadow:0 0 0 4px #465aff29}.Add-to-list{height:40px;padding:0 14px;border-top-right-radius:12px;border-bottom-right-radius:12px;background:#465aff;color:#fff;border:1px solid #3b4df0;cursor:pointer;font-weight:600;transition:transform .12s ease,filter .12s ease}.Add-to-list:hover{filter:brightness(1.03)}.Add-to-list:active{transform:translateY(1px)}.Paragraph{color:#55607a;margin:14px 0 10px}ul{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:10px}li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid #eef0f6;background:#fafbff}li span{flex:1;line-height:1.35;word-break:break-word}li input[type=checkbox]{width:18px;height:18px;accent-color:#22c55e}