:root{color-scheme:dark;font-family:DM Sans,system-ui,sans-serif;color:#e8edf8;background:#080c18;font-synthesis:none;--surface: rgba(18, 24, 42, .78);--surface-strong: #141b2f;--line: rgba(255, 255, 255, .09);--muted: #8d98af;--accent: #8b7cf6;--accent-bright: #a89cff;--cyan: #5dd8d1}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at 50% -20%,rgba(92,77,188,.22),transparent 42%),linear-gradient(160deg,#080c18,#0c1120 52%,#090d19)}button,input{font:inherit}button{color:inherit}.ambient{position:fixed;width:26rem;height:26rem;border-radius:50%;filter:blur(100px);pointer-events:none;opacity:.12}.ambient-one{background:#8b7cf6;top:15%;left:-16rem}.ambient-two{background:#46d5cf;right:-18rem;bottom:0}.app-shell{position:relative;width:min(880px,calc(100% - 36px));margin:0 auto;padding:72px 0 38px}.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:34px}.eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 18px;color:#aeb7ca;font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px #5dd8d11a,0 0 18px #5dd8d1b3}h1,h2,h3{font-family:Manrope,sans-serif}h1{margin:0;font-size:clamp(2.7rem,7vw,4.75rem);line-height:.98;letter-spacing:-.065em}h1 span{color:transparent;background:linear-gradient(100deg,#a89cff 5%,#70ddd7 92%);background-clip:text;-webkit-background-clip:text}.subtitle{margin:20px 0 0;color:var(--muted);font-size:1.02rem}.date-card{flex:0 0 auto;display:grid;justify-items:center;min-width:108px;padding:15px 18px;border:1px solid var(--line);border-radius:18px;background:#ffffff09;box-shadow:inset 0 1px #ffffff0d;text-transform:uppercase}.date-card span{color:var(--muted);font-size:.68rem;letter-spacing:.14em}.date-card strong{font:800 2rem/1.1 Manrope;color:#f6f7fc}.todo-card{overflow:hidden;border:1px solid var(--line);border-radius:26px;background:var(--surface);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:0 28px 80px #0000004d,inset 0 1px #ffffff0d}.create-form{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin:24px;padding:8px 8px 8px 19px;border:1px solid rgba(168,156,255,.22);border-radius:17px;background:#070b16ad;transition:border-color .18s ease,box-shadow .18s ease}.create-form:focus-within{border-color:#a89cff9e;box-shadow:0 0 0 4px #8b7cf61a}.plus{color:var(--accent-bright);font-size:1.65rem;font-weight:300;line-height:1}.create-form input{width:100%;padding:12px 0;border:0;outline:0;color:#f4f5fb;background:transparent;font-size:1rem}.create-form input::placeholder{color:#68738b}.create-form button{padding:11px 18px;border:0;border-radius:11px;background:linear-gradient(135deg,#8473f4,#6c5bd7);box-shadow:0 8px 22px #6c5bd747;font-weight:700;cursor:pointer;transition:transform .15s ease,filter .15s ease}.create-form button:hover{filter:brightness(1.1);transform:translateY(-1px)}.create-form button:disabled{opacity:.55;cursor:wait;transform:none}.toolbar{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:15px 26px 17px;border-bottom:1px solid var(--line)}.toolbar h2{margin:0 0 4px;font-size:1.1rem;letter-spacing:-.02em}.toolbar p{margin:0;color:var(--muted);font-size:.84rem}.filters{display:flex;gap:4px;padding:4px;border-radius:11px;background:#0000002e}.filter{padding:6px 11px;border:0;border-radius:8px;color:var(--muted);background:transparent;font-size:.78rem;font-weight:600;cursor:pointer}.filter:hover{color:#dfe3ed}.filter.active{color:#fff;background:#ffffff17;box-shadow:0 2px 8px #00000026}.todo-list{display:grid;margin:0;padding:0;list-style:none}.todo-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;min-height:70px;padding:12px 27px;border-bottom:1px solid rgba(255,255,255,.055);animation:item-in .26s ease both;transition:background .15s ease,opacity .18s ease,transform .18s ease}.todo-item:hover{background:#ffffff06}.todo-item.pending{opacity:.55}.todo-item.removing{opacity:0;transform:translate(18px)}.todo-item.completed .todo-title{color:#677187;text-decoration:line-through}.check-wrap{position:relative;width:24px;height:24px}.check-wrap input{position:absolute;inset:0;opacity:0;cursor:pointer}.checkmark{display:grid;place-items:center;width:24px;height:24px;border:1.5px solid #59647b;border-radius:8px;color:transparent;transition:all .17s ease}.check-wrap input:focus-visible+.checkmark{box-shadow:0 0 0 4px #8b7cf633}.check-wrap input:checked+.checkmark{border-color:var(--accent);color:#fff;background:linear-gradient(135deg,#8f7ff8,#6755d1);box-shadow:0 5px 14px #6755d14d}.checkmark:after{content:"✓";font-size:.8rem;font-weight:800}.todo-title{overflow:hidden;color:#e7eaf2;font-weight:500;text-overflow:ellipsis;transition:color .17s ease}.todo-meta{display:block;margin-top:4px;color:#657087;font-size:.7rem;font-weight:500}.delete-button{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:9px;color:#707a90;background:transparent;cursor:pointer;opacity:0;transition:opacity .15s ease,color .15s ease,background .15s ease}.todo-item:hover .delete-button,.delete-button:focus-visible{opacity:1}.delete-button:hover{color:#ff8f9e;background:#ff647a1a}.loading-list{display:grid;gap:1px}.skeleton{height:70px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.035),transparent);background-size:220% 100%;animation:shimmer 1.4s infinite}.empty-state{padding:56px 24px 62px;text-align:center}.empty-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;border:1px solid rgba(93,216,209,.23);border-radius:16px;color:var(--cyan);background:#5dd8d112;font-size:1.3rem}.empty-state h3{margin:0 0 7px;font-size:1rem}.empty-state p{margin:0;color:var(--muted);font-size:.84rem}.card-footer{display:grid;grid-template-columns:auto minmax(80px,1fr) auto;align-items:center;gap:14px;min-height:57px;padding:12px 26px;color:var(--muted);background:#00000021;font-size:.75rem}.progress-track{overflow:hidden;height:4px;border-radius:9px;background:#ffffff12}.progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--cyan));transition:width .3s ease}#clear-completed{padding:6px 8px;border:0;color:#8c96ac;background:transparent;font-size:.75rem;cursor:pointer}#clear-completed:hover{color:#dbe0eb}.powered{margin:18px 0 0;color:#586279;text-align:center;font-size:.72rem;letter-spacing:.02em}.powered strong{color:#7e8aa2}.toast{position:fixed;right:22px;bottom:22px;z-index:10;max-width:min(360px,calc(100vw - 44px));padding:12px 16px;border:1px solid rgba(255,130,145,.25);border-radius:12px;color:#ffd9de;background:#39131df0;box-shadow:0 15px 40px #00000059;font-size:.84rem;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}.toast.show{opacity:1;transform:translateY(0)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes item-in{0%{opacity:0;transform:translateY(8px)}}@keyframes shimmer{to{background-position:-220% 0}}@media(max-width:640px){.app-shell{width:min(100% - 22px,880px);padding-top:38px}.hero{align-items:center;margin-bottom:25px}.date-card{min-width:82px;padding:11px 12px}.subtitle{max-width:250px;font-size:.9rem}.todo-card{border-radius:21px}.create-form{margin:15px;grid-template-columns:auto 1fr}.create-form button{grid-column:1 / -1}.toolbar{align-items:flex-start;padding:14px 18px;flex-direction:column}.filters{width:100%}.filter{flex:1}.todo-item{padding:11px 19px}.delete-button{opacity:1}.card-footer{padding:12px 18px;grid-template-columns:auto 1fr}#clear-completed{grid-column:1 / -1;justify-self:end}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
