:root{font-family:Sora,sans-serif;color:#10213a;background:radial-gradient(circle at top right,#f9f3d5,#f4f8ff 45%,#d9eef4);line-height:1.5}*{box-sizing:border-box}body{margin:0;min-height:100vh}.page-shell{min-height:100vh;display:grid;place-items:center;padding:1.2rem}.card{width:min(920px,100%);background:#ffffffd9;border:1px solid #c3d7e4;border-radius:20px;padding:1.2rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 24px 48px -36px #10213aa6}.card-header h1{margin:0;font-family:Space Grotesk,sans-serif;font-size:clamp(1.4rem,2vw,2.2rem)}.card-header p{margin:.45rem 0 1rem;color:#3c4b64}.header-actions{display:flex;gap:.6rem;flex-wrap:wrap}button{border:none;border-radius:10px;padding:.7rem 1rem;background:linear-gradient(120deg,#f97316,#ef4444);color:#fff;font-weight:600;cursor:pointer;transition:transform .12s ease,opacity .12s ease}button:hover:not(:disabled){transform:translateY(-1px)}button:disabled{opacity:.65;cursor:not-allowed}.task-form{margin-top:1rem}.form-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.35rem}input{flex:1 1 260px;border:1px solid #b7c7d8;border-radius:10px;padding:.75rem;font:inherit}.task-list-section{margin-top:1rem}.task-list{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}.task-list li{border:1px solid #d6e2ec;border-radius:12px;padding:.75rem;display:flex;justify-content:space-between;gap:.8rem;align-items:center}.task-list li p{margin:.3rem 0 0}.task-list li.done{background:#ecfdf3}.task-list li.pending{background:#fffdf5}.progress-wrap{margin-top:1rem}.progress-wrap p{margin:0 0 .4rem}.progress-track{width:100%;background:#e8edf4;border-radius:999px;height:10px;overflow:hidden}.progress-indicator{display:block;height:100%;width:45%;border-radius:999px;background:linear-gradient(120deg,#14b8a6,#06b6d4);animation:slide 1s infinite ease-in-out}@keyframes slide{0%{transform:translate(-110%)}to{transform:translate(230%)}}.status-bar{margin-top:1rem;border-top:1px solid #dce5ef;padding-top:.8rem;color:#334155;font-size:.95rem}.empty{color:#56637d}@media (max-width: 640px){.card{padding:1rem;border-radius:14px}.task-list li{flex-direction:column;align-items:flex-start}}