:root{--main-font: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;--main-bg: linear-gradient(135deg, #0f2027, #203a43, #2c5364);--text-color: #fff;--accent-color: #00f5a0;--hover-color: #2ad8ff;--active-color: #f4a3ff;--completed-color: #6c757d;--input-bg: #1c1c1c;--input-border: #00f5a0;--input-focus-border: #00ffcc;--btn-bg: #00f5a0;--btn-color: #000;--btn-secondary-bg: #c3c2c2;--btn-hover-bg: wheat;--list-bg: #1c1c1c;--list-border: #00f5a0;--btn-delete-bg: #fdcace;--btn-edit-bg: #f7e3bd}*{box-sizing:border-box;margin:0;padding:0}body,html{margin:0;padding:0;height:100%;width:100%}.main-app{display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--main-font);background:var(--main-bg);background-attachment:fixed;min-height:100vh;color:var(--text-color)}h1{font-size:2rem;margin:1rem;color:var(--accent-color)}header a{color:var(--accent-color);text-decoration:none;border:1px solid #00f59f2e;padding:.5rem 1rem}header a:hover{color:var(--hover-color)}.input-container{display:flex;justify-content:center}input[type=text]{padding:1rem;font-size:1rem;border:1px solid var(--input-border);border-radius:.25rem;margin-right:.5rem;background-color:var(--input-bg);color:var(--text-color);transition:border-color .3s}input[type=text]:focus{border-color:var(--input-focus-border)}button{width:5rem;font-size:1rem;border:none;border-radius:.25rem;cursor:pointer;background-color:var(--btn-bg);color:var(--btn-color);transition:background-color .3s,transform .2s}button:hover{background-color:var(--hover-color)}button:active{transform:scale(.9)}.undo-button,.redo-button,.trash-button{background-color:var(--btn-secondary-bg);color:#333;font-size:1.2rem;font-weight:700;border:1px solid #494949;border-radius:4px;width:5rem;height:2.5rem;margin-right:1rem}.undo-button:hover,.redo-button:hover,.trash-button:hover{background-color:var(--btn-hover-bg)}.undo-button:active,.redo-button:active,.trash-button:active{background-color:var(--active-color);transform:scale(.9)}ul{list-style:none;display:flex;flex-direction:column;align-items:center;width:95%;margin-bottom:5rem;padding:0;position:relative}li{background-color:var(--list-bg);font-size:15px;border:1px solid var(--list-border);border-radius:.25rem;padding:.8rem 0;display:flex;justify-content:center;align-items:center;box-shadow:0 2px 4px #0000001a;transition:transform .3s,box-shadow .3s;color:var(--text-color);cursor:pointer;margin-bottom:.3rem}li:hover{transform:scale(1.01);box-shadow:0 4px 8px #0003}li.completed{text-decoration:line-through;color:var(--completed-color)}li span{flex:1;cursor:pointer}li button{font-size:.5rem;background-color:var(--btn-delete-bg);transition:background-color .3s;border:none;margin-left:.25rem;padding:.25rem .5rem;border-radius:.25rem}li button:first-of-type{background-color:var(--btn-edit-bg)}li button:hover{background-color:var(--hover-color)}.history-controls{margin:.5rem 0}.sortable-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .8rem;transition:transform .18s cubic-bezier(.2,.8,.2,1),opacity .12s linear,margin .18s ease;-webkit-user-select:none;user-select:none}.drag-handle{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-right:.5rem;background:transparent;border:none;cursor:grab;font-size:1.1rem}.drag-handle:active{cursor:grabbing}.dnd-grabbing,.dnd-grabbing *{cursor:grabbing!important;cursor:-webkit-grabbing!important}.sortable-item>span{flex:1 1 auto;text-align:left;padding:0 .25rem}.checkbox{margin:0 .5rem}.button-group{display:flex;gap:.35rem;align-items:center;justify-content:flex-end}.drag-overlay{pointer-events:none;display:flex;justify-content:center}.drag-overlay .sortable-item{width:auto;max-width:100%;box-shadow:0 10px 18px #0000002e;background-color:var(--list-bg);border-radius:6px;transform:translateZ(0) scale(1.02);transition:box-shadow .14s ease,transform .14s ease;opacity:1!important;border:1px solid rgba(255,255,255,.03)}.drag-overlay .sortable-item:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:6px;box-shadow:-8px 0 8px #fffbfb80,8px 0 8px #fffbfb80}@media(max-width:768px){h1{font-size:1.5rem}input[type=text]{width:100%}.checkbox,.button-group button{width:1.5rem;height:1.5rem;margin-right:.5rem}li{width:100%}}@media(min-width:769px){input[type=text]{width:25rem}.checkbox,.button-group button{width:2rem;height:2rem;margin-right:.5rem}li{width:30rem}}