:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;color:#f5fbff;background:#0d1527;font-synthesis:none;text-rendering:optimizeLegibility;--cyan: #78e8dd;--cyan-deep: #1fbcae;--ink: #f5fbff;--muted: #aab7cb;--faint: #71809a;--line: rgba(207, 230, 255, .12);--line-strong: rgba(207, 239, 255, .2);--glass: rgba(20, 31, 54, .72);--glass-soft: rgba(255, 255, 255, .045);--danger: #ff8f9c}*{box-sizing:border-box}html{min-width:320px;min-height:100%;background:#0d1527}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden}button,input,textarea{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid rgba(120,232,221,.8);outline-offset:3px}button:disabled,input:disabled,textarea:disabled{cursor:not-allowed;opacity:.6}.page-shell{position:relative;isolation:isolate;min-height:100vh;padding:clamp(22px,4vw,54px) 18px;overflow:hidden;background:radial-gradient(circle at 50% -20%,rgba(69,105,159,.26),transparent 42%),linear-gradient(145deg,#09111f,#121c34 48%,#17182f)}.page-shell:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.26;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E")}.aurora{position:fixed;z-index:-1;border-radius:50%;filter:blur(14px);pointer-events:none;animation:drift 13s ease-in-out infinite alternate}.aurora-one{width:min(54vw,680px);height:min(54vw,680px);left:-18vw;top:5vh;background:radial-gradient(circle,rgba(72,226,209,.19),rgba(49,119,175,.08) 52%,transparent 72%)}.aurora-two{width:min(58vw,720px);height:min(58vw,720px);right:-20vw;bottom:-12vh;background:radial-gradient(circle,rgba(164,112,255,.17),rgba(78,55,153,.08) 48%,transparent 72%);animation-duration:17s}.todo-capsule{width:min(100%,860px);min-height:680px;margin:0 auto;overflow:hidden;border:1px solid var(--line-strong);border-radius:30px;background:linear-gradient(145deg,#1f2e4bc4,#0e192eb8);box-shadow:0 34px 100px #00000059,inset 0 1px #ffffff1c;-webkit-backdrop-filter:blur(30px) saturate(125%);backdrop-filter:blur(30px) saturate(125%);animation:capsule-in .52s cubic-bezier(.2,.8,.2,1) both}.app-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 30px;border-bottom:1px solid var(--line)}.brand-lockup{display:flex;align-items:center;gap:12px}.brand-mark{position:relative;width:37px;height:37px;flex:none}.brand-mark span{position:absolute;border:2px solid var(--cyan);border-radius:50%;transform:rotate(-32deg);box-shadow:0 0 18px #78e8dd52}.brand-mark span:first-child{width:31px;height:20px;left:1px;top:4px;border-left-color:transparent}.brand-mark span:last-child{width:29px;height:18px;right:0;bottom:3px;border-right-color:transparent}.brand-name{margin:0;font-size:18px;font-weight:750;letter-spacing:-.04em;line-height:1}.brand-tagline{margin:5px 0 0;color:var(--muted);font-size:11px;letter-spacing:.08em}.date-chip{display:inline-flex;align-items:center;gap:9px;color:#ced9e8;font-size:12px;white-space:nowrap}.date-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.hero-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:44px;padding:42px 42px 30px}.eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:13px;color:var(--cyan);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.hero-copy h1{max-width:550px;margin:0;font-size:clamp(29px,5vw,47px);font-weight:720;letter-spacing:-.055em;line-height:1.11;text-wrap:balance}.hero-copy p{margin:15px 0 0;color:var(--muted);font-size:14px;line-height:1.7}.progress-orbit{--progress: 0deg;display:grid;place-items:center;width:112px;height:112px;border-radius:50%;flex:none;background:conic-gradient(var(--cyan) 0deg var(--progress),rgba(255,255,255,.09) var(--progress) 360deg);box-shadow:0 0 36px #34d7c81a;position:relative}.progress-orbit:before{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:50%;background:#16243d;border:1px solid rgba(255,255,255,.07)}.progress-inner{position:relative;z-index:1;display:grid;justify-items:center;gap:1px}.progress-inner strong{font-size:24px;font-variant-numeric:tabular-nums;letter-spacing:-.04em}.progress-inner span{color:var(--muted);font-size:10px;letter-spacing:.08em}.composer{margin:0 30px;padding:18px;border:1px solid rgba(188,224,255,.12);border-radius:20px;background:linear-gradient(135deg,#ffffff13,#ffffff06);box-shadow:inset 0 1px #ffffff0e}.composer-label{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:#dce9f7;font-size:12px;font-weight:650}.composer-label svg{color:var(--cyan)}.composer-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}.field-shell{display:block}.field-shell input,.details-field textarea,.modal-field input,.modal-field textarea{width:100%;border:1px solid transparent;color:var(--ink);background:#060d1b52;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}.field-shell input{height:48px;border-radius:12px;padding:0 15px}.field-shell input::placeholder,.details-field textarea::placeholder,.modal-field input::placeholder,.modal-field textarea::placeholder{color:#71809a}.field-shell input:hover,.details-field textarea:hover,.modal-field input:hover,.modal-field textarea:hover{background:#060d1b75}.field-shell input:focus,.details-field textarea:focus,.modal-field input:focus,.modal-field textarea:focus{outline:none;border-color:#78e8dd8c;box-shadow:0 0 0 3px #78e8dd14;background:#060d1b8c}.primary-button,.secondary-button,.delete-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:12px;padding:0 17px;border:0;font-size:13px;font-weight:720;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.primary-button{color:#09221f;background:linear-gradient(135deg,#91f0e7,#61d8cc);box-shadow:0 9px 24px #48d6c933,inset 0 1px #ffffff8c}.primary-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 13px 30px #48d6c945}.details-field{position:relative;display:block;margin-top:9px}.details-field textarea{min-height:40px;resize:vertical;border-radius:11px;padding:10px 70px 9px 13px;line-height:1.5}.character-count{position:absolute;right:12px;top:12px;color:var(--faint);font-size:10px;font-variant-numeric:tabular-nums;pointer-events:none}.form-error{margin:10px 2px 0;color:#ffadb6;font-size:12px}.list-section{padding:31px 30px 22px}.list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.section-heading{display:flex;align-items:center;gap:9px}.section-heading svg{color:var(--cyan)}.section-heading h2{margin:0;font-size:15px;font-weight:680;letter-spacing:-.01em}.section-heading>span{display:grid;place-items:center;min-width:24px;height:20px;padding:0 7px;border-radius:20px;color:var(--muted);background:#ffffff12;font-size:10px}.icon-button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid transparent;border-radius:9px;color:var(--muted);background:transparent;cursor:pointer;transition:color .16s ease,background .16s ease,border-color .16s ease}.icon-button:hover:not(:disabled){color:var(--ink);background:#ffffff13;border-color:#ffffff0f}.icon-button.danger:hover:not(:disabled){color:var(--danger);background:#ff6c8017}.refresh-button{border-color:var(--line);background:#ffffff06}.filters{display:inline-flex;gap:3px;padding:4px;margin-bottom:17px;border:1px solid var(--line);border-radius:11px;background:#040b1845}.filters button{display:inline-flex;align-items:center;gap:6px;height:31px;padding:0 12px;border:0;border-radius:8px;color:var(--muted);background:transparent;font-size:11px;cursor:pointer;transition:color .16s ease,background .16s ease,box-shadow .16s ease}.filters button span{color:var(--faint);font-size:9px;font-variant-numeric:tabular-nums}.filters button:hover{color:var(--ink)}.filters button.active{color:#0d2724;background:var(--cyan);box-shadow:0 5px 16px #3dcabe29;font-weight:700}.filters button.active span{color:#1c665e}.task-list{display:grid;gap:9px;min-height:180px}.task-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:72px;padding:13px 12px 13px 14px;border:1px solid rgba(204,229,255,.09);border-radius:15px;background:#ffffff09;transition:transform .18s ease,background .18s ease,border-color .18s ease;animation:task-in .26s ease-out both}.task-row:hover{transform:translateY(-1px);background:#ffffff0e;border-color:#cce5ff26}.completion-toggle{display:grid;place-items:center;width:25px;height:25px;padding:0;border:1.5px solid #768aa6;border-radius:50%;color:#0f3430;background:#050c192e;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}.completion-toggle:hover:not(:disabled){transform:scale(1.06);border-color:var(--cyan)}.task-row.completed .completion-toggle{border-color:var(--cyan);background:var(--cyan);box-shadow:0 0 18px #78e8dd33}.task-content{min-width:0}.task-content h3{margin:0;overflow-wrap:anywhere;color:#edf7fc;font-size:14px;font-weight:570;line-height:1.45;transition:color .16s ease}.task-content p{margin:4px 0 0;overflow-wrap:anywhere;color:var(--muted);font-size:12px;line-height:1.55}.task-content>span{display:block;margin-top:6px;color:var(--faint);font-size:9px;letter-spacing:.04em}.task-row.completed .task-content h3{color:#8090a7;text-decoration:line-through;text-decoration-color:#58657a}.task-row.completed .task-content p{color:#66758b}.task-actions{display:flex;align-items:center;gap:2px;opacity:.62;transition:opacity .16s ease}.task-row:hover .task-actions,.task-actions:focus-within{opacity:1}.empty-state{display:grid;justify-items:center;padding:38px 24px 30px;text-align:center}.empty-orbit{display:grid;place-items:center;width:54px;height:54px;margin-bottom:15px;border:1px solid rgba(120,232,221,.24);border-radius:50%;color:var(--cyan);background:#78e8dd12;box-shadow:0 0 30px #78e8dd14}.empty-state h3{margin:0;font-size:15px}.empty-state p{max-width:310px;margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.65}.loading-stack{display:grid;gap:9px}.skeleton-row{display:grid;grid-template-columns:25px 1fr;align-items:center;gap:14px;height:72px;padding:13px 14px;border:1px solid rgba(204,229,255,.06);border-radius:15px;background:#ffffff06;overflow:hidden}.skeleton-row>span,.skeleton-row i{display:block;background:linear-gradient(90deg,#ffffff0a,#ffffff1a,#ffffff0a);background-size:220% 100%;animation:shimmer 1.4s linear infinite}.skeleton-row>span{width:25px;height:25px;border-radius:50%}.skeleton-row div{display:grid;gap:9px}.skeleton-row i{width:50%;height:9px;border-radius:8px}.skeleton-row i:last-child{width:28%;height:7px}.app-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 30px 22px;border-top:1px solid var(--line);color:var(--faint);font-size:10px}.app-footer>span:first-child{display:inline-flex;align-items:center;gap:7px;color:#90a0b7}.status-light{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.modal-backdrop{position:fixed;z-index:20;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:20px;background:#020710ad;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:fade-in .18s ease-out both}.modal-card{width:min(100%,470px);padding:24px;border:1px solid rgba(211,235,255,.18);border-radius:22px;background:linear-gradient(145deg,#1f2d48fa,#0d182cfa);box-shadow:0 28px 80px #00000080,inset 0 1px #ffffff14;animation:modal-in .22s cubic-bezier(.2,.8,.2,1) both}.modal-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:22px}.modal-kicker{display:block;margin-bottom:5px;color:var(--cyan);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.modal-heading h2,.confirm-card h2{margin:0;font-size:21px;letter-spacing:-.035em}.modal-field{display:grid;gap:8px;margin-bottom:16px;color:#cdd8e8;font-size:11px;font-weight:650}.modal-field small{color:var(--faint);font-size:9px;font-weight:500}.modal-field input,.modal-field textarea{border-color:var(--line);border-radius:11px;padding:12px 13px}.modal-field input{height:44px}.modal-field textarea{resize:vertical;line-height:1.55}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}.modal-actions .primary-button,.secondary-button,.delete-button{height:42px}.secondary-button{color:#c8d5e5;background:#ffffff0e;border:1px solid var(--line)}.secondary-button:hover:not(:disabled){color:#fff;background:#ffffff16}.delete-button{color:#2b0b10;background:linear-gradient(135deg,#ff9ca8,#ff7d8d);box-shadow:0 8px 22px #ff5c732e}.delete-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 11px 26px #ff5c7340}.confirm-card{text-align:center}.confirm-card p{max-width:360px;margin:10px auto 0;color:var(--muted);font-size:13px;line-height:1.65;overflow-wrap:anywhere}.confirm-card .modal-actions{justify-content:center}.danger-icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 16px;border-radius:50%;color:var(--danger);background:#ff6c801a;border:1px solid rgba(255,133,150,.16)}.toast{position:fixed;z-index:30;right:24px;bottom:24px;display:flex;align-items:center;gap:10px;width:min(calc(100% - 36px),360px);min-height:48px;padding:10px 10px 10px 14px;border:1px solid var(--line-strong);border-radius:13px;color:#eaf6ff;background:#121f35f2;box-shadow:0 18px 50px #00000061;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:toast-in .24s cubic-bezier(.2,.8,.2,1) both;font-size:12px}.toast.success>svg{color:var(--cyan)}.toast.error>svg{color:var(--danger)}.toast span{flex:1}.toast button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:8px;color:var(--muted);background:transparent;cursor:pointer}.toast button:hover{color:#fff;background:#ffffff12}.spin{animation:spin .8s linear infinite}.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 capsule-in{0%{opacity:0;transform:translateY(14px) scale(.992)}to{opacity:1;transform:none}}@keyframes task-in{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-in{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes drift{0%{transform:translate3d(-3%,-2%,0) scale(.96)}to{transform:translate3d(4%,3%,0) scale(1.04)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{to{background-position:-220% 0}}@media(max-width:680px){.page-shell{padding:0;overflow:visible;background:linear-gradient(155deg,#09111f,#111a30 58%,#16162b)}.todo-capsule{min-height:100vh;border-width:0;border-radius:0;box-shadow:none}.app-header{padding:19px 18px}.date-chip{font-size:10px}.brand-tagline{display:none}.hero-row{gap:20px;padding:31px 20px 24px}.hero-copy h1{font-size:clamp(27px,9vw,38px)}.hero-copy p{font-size:12px}.progress-orbit{width:82px;height:82px}.progress-inner strong{font-size:19px}.progress-inner span{font-size:8px}.composer{margin:0 14px;padding:15px}.composer-main{grid-template-columns:1fr}.primary-button{width:100%}.list-section{padding:27px 14px 18px}.filters{display:flex;width:100%}.filters button{flex:1;justify-content:center;padding:0 6px}.task-row{gap:11px;padding-left:12px}.task-actions{opacity:.9}.app-footer{flex-direction:column;align-items:flex-start;padding:17px 18px 22px}.toast{right:18px;bottom:18px}}@media(max-width:420px){.date-chip .date-dot{display:none}.hero-row{align-items:flex-end}.progress-orbit{width:72px;height:72px}.progress-inner strong{font-size:17px}.hero-copy h1{font-size:29px}.hero-copy p{max-width:230px}.task-row{grid-template-columns:auto minmax(0,1fr)}.task-actions{grid-column:2;justify-self:end;margin-top:-2px}.modal-card{padding:20px;border-radius:18px}.modal-actions{flex-direction:column-reverse}.modal-actions button{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}