@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";*,:before,:after{box-sizing:border-box}body{margin:0}:root{--clr-bg:#0d0f18;--clr-surface:#13162b;--clr-border:#ffffff14;--clr-text:#c8cfe8;--clr-text-dim:#6b7280;--clr-heading:#f0f4ff;--clr-accent:#7c3aed;--clr-accent-2:#a855f7;--clr-glow:#7c3aed59;--clr-glow-2:#a855f733;--clr-error:#ef444426;--clr-error-text:#fca5a5;--glass-bg:#13162bb8;--glass-blur:18px;--shadow-card:0 8px 32px #0000008c, 0 1px 0 #ffffff0a inset;--shadow-btn:0 4px 20px #7c3aed66;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--font-sans:"Inter", system-ui, sans-serif;--font-mono:ui-monospace, "Cascadia Code", monospace;font-family:var(--font-sans);color:var(--clr-text);background-color:var(--clr-bg);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:radial-gradient(ellipse 80% 60% at 20% -10%, #7c3aed33 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 110%, #a855f726 0%, transparent 55%), var(--clr-bg);min-height:100svh}#root{justify-content:center;align-items:center;min-height:100svh;display:flex}h1,h2{letter-spacing:-.02em;color:var(--clr-heading);font-weight:700}.app-container{flex-direction:column;gap:24px;width:min(760px,100% - 32px);margin:40px auto;display:flex}.glass-card{background:var(--glass-bg);border:1px solid var(--clr-border);box-shadow:var(--shadow-card);-webkit-backdrop-filter:blur(var(--glass-blur));animation:fadeUp .55s var(--ease-out) both;border-radius:20px;padding:40px;position:relative;overflow:hidden}.glass-card:nth-child(2){animation-delay:.1s}@keyframes fadeUp{0%{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}.glass-card:before{content:"";border-radius:inherit;pointer-events:none;opacity:0;background:linear-gradient(135deg,#7c3aed0f 0%,#0000 50%);transition:opacity .4s;position:absolute;inset:0}.glass-card:hover:before{opacity:1}.hero-card{text-align:center}.hero-glow{background:radial-gradient(ellipse, var(--clr-glow) 0%, transparent 70%);pointer-events:none;width:380px;height:220px;animation:4s ease-in-out infinite pulse;position:absolute;top:-80px;left:50%;transform:translate(-50%)}@keyframes pulse{0%,to{opacity:.7;transform:translate(-50%)scale(1)}50%{opacity:1;transform:translate(-50%)scale(1.12)}}.hero-title{background:linear-gradient(135deg,#c4b5fd 0%,#818cf8 50%,#7c3aed 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:8px;font-size:clamp(2rem,5vw,3rem);position:relative}.hero-subtitle{color:var(--clr-text-dim);letter-spacing:.02em;margin-bottom:32px;font-size:.95rem}.status-row{flex-direction:column;align-items:center;gap:16px;display:flex}.output-box{font-family:var(--font-mono);color:var(--clr-text);border:1px solid var(--clr-border);text-align:left;white-space:pre-wrap;background:#00000059;border-radius:10px;width:100%;min-height:48px;padding:14px 18px;font-size:.82rem;transition:border-color .3s}.btn{font-family:var(--font-sans);cursor:pointer;transition:transform .18s var(--ease-spring), box-shadow .25s, opacity .2s;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:10px 22px;font-size:.92rem;font-weight:600;display:inline-flex}.btn:disabled{opacity:.55;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(.96)}.btn-primary{background:linear-gradient(135deg, var(--clr-accent), var(--clr-accent-2));color:#fff;box-shadow:var(--shadow-btn)}.btn-primary:not(:disabled):hover{transform:translateY(-2px)scale(1.02);box-shadow:0 8px 28px #7c3aed99}.btn-accent{color:#fff;background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 18px #10b98159}.btn-accent:not(:disabled):hover{transform:translateY(-2px)scale(1.02);box-shadow:0 8px 24px #10b98180}.btn-ghost{border:1px solid var(--clr-border);color:var(--clr-text-dim);background:0 0}.btn-ghost:not(:disabled):hover{color:var(--clr-text);background:#ffffff0d;border-color:#ffffff2e}.spinner{border:2px solid #ffffff40;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin;display:inline-block}.spinner.large{border-width:3px;border-top-color:var(--clr-accent-2);width:32px;height:32px}@keyframes spin{to{transform:rotate(360deg)}}.section-title{align-items:center;gap:8px;margin-bottom:20px;font-size:1.3rem;display:flex}.section-title:before{content:"✦";color:var(--clr-accent-2);font-size:.9rem}.error-banner{background:var(--clr-error);color:var(--clr-error-text);border:1px solid #ef44444d;border-radius:8px;margin-bottom:16px;padding:10px 14px;font-size:.87rem;animation:.4s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.add-row{gap:10px;margin-bottom:20px;display:flex}.todo-input{border:1px solid var(--clr-border);font-family:var(--font-sans);color:var(--clr-heading);background:#0000004d;border-radius:10px;outline:none;flex:1;padding:10px 16px;font-size:.92rem;transition:border-color .25s,box-shadow .25s}.todo-input::placeholder{color:var(--clr-text-dim)}.todo-input:focus{border-color:var(--clr-accent-2);box-shadow:0 0 0 3px #a855f726}.loader-row{justify-content:center;padding:24px 0;display:flex}.empty-state{text-align:center;color:var(--clr-text-dim);padding:24px 0;font-size:.9rem}.todo-list{flex-direction:column;gap:8px;margin-bottom:20px;list-style:none;display:flex}.todo-item{border:1px solid var(--clr-border);transition:background .2s, border-color .2s, transform .2s var(--ease-spring);animation:slideIn .3s var(--ease-out) both;background:#ffffff09;border-radius:10px;align-items:center;gap:12px;padding:10px 14px;display:flex}@keyframes slideIn{0%{opacity:0;transform:translate(-14px)}to{opacity:1;transform:translate(0)}}.todo-item:hover{background:#ffffff0f;border-color:#ffffff24;transform:translate(2px)}.todo-item.done .todo-title{opacity:.5;text-decoration:line-through}.todo-check{cursor:pointer;transition:transform .2s var(--ease-spring);background:0 0;border:none;flex-shrink:0;font-size:1.1rem;line-height:1}.todo-check:hover{transform:scale(1.25)}.todo-title{color:var(--clr-text);text-align:left;flex:1;font-size:.92rem;transition:opacity .25s,color .25s}.todo-delete{cursor:pointer;color:var(--clr-text-dim);background:0 0;border:none;border-radius:6px;flex-shrink:0;padding:2px 6px;font-size:.85rem;transition:color .2s,background .2s,transform .15s}.todo-delete:hover{color:var(--clr-error-text);background:var(--clr-error);transform:scale(1.15)}@media (width<=600px){.glass-card{border-radius:14px;padding:24px 18px}.add-row{flex-direction:column}.hero-title{font-size:1.8rem}}