@import "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Nunito:wght@300;400;500;600;700&display=swap";@import "https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap";:root{--void:#080704;--obsidian:#0f0e0b;--onyx:#161410;--charcoal:#1e1c17;--border:#d4af3726;--gold:#d4af37;--gold-lt:#f0d060;--gold-dk:#9a7d1e;--amber:#b8860b;--cream:#f5e6c0;--parchment:#c9b67a;--white:#fdf6e3;--grad-gold:linear-gradient(135deg, #f0d060 0%, #b8860b 100%);--grad-gold2:linear-gradient(135deg, #d4af37 0%, #7a5c00 100%);--grad-bg:radial-gradient(ellipse 70% 50% at 20% 10%, #d4af371a, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 90%, #b8860b14, transparent 60%), linear-gradient(160deg, #0a0804 0%, #100e08 60%, #080704 100%);--shadow-sm:0 4px 16px #d4af3714, 0 1px 4px #00000080;--shadow-md:0 8px 32px #d4af371f, 0 2px 8px #0009;--shadow-lg:0 20px 60px #d4af3729, 0 6px 20px #000000b3;--shadow-glow:0 0 0 3px #d4af3733, 0 8px 28px #d4af3733;--radius-card:24px;--radius-btn:16px;--radius-input:16px;--radius-pill:50px;--ease-float:cubic-bezier(.34,1.56,.64,1);--ease-drift:cubic-bezier(.22,1,.36,1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{color:var(--cream);background:var(--grad-bg);justify-content:center;min-height:100vh;padding:70px 24px 90px;font-family:Nunito,sans-serif;font-size:15px;line-height:1.8;display:flex;position:relative;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle,#d4af3724,#0000 70%);border-radius:50%;width:500px;height:500px;animation:12s ease-in-out infinite driftOrb1;position:fixed;top:-100px;left:-100px}body:after{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle,#b8860b1f,#0000 70%);border-radius:50%;width:400px;height:400px;animation:15s ease-in-out infinite driftOrb2;position:fixed;bottom:-80px;right:-80px}.custom:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle,#f0d06014,#0000 70%);border-radius:50%;width:300px;height:300px;animation:18s ease-in-out infinite driftOrb3;position:fixed;top:40%;left:60%}.custom{z-index:1;justify-content:center;width:100%;display:flex;position:relative}.todo-container{-webkit-backdrop-filter:blur(28px)saturate(1.4);width:100%;max-width:900px;box-shadow:0 1px 0 #d4af3726 inset, var(--shadow-lg);animation:floatIn .9s var(--ease-drift) both, containerBob 7s ease-in-out 1s infinite;background:#0f0e0bbf;border:1px solid #d4af3738;border-top:1.5px solid #f0d06066;border-radius:36px;padding:64px 64px 72px}h1{letter-spacing:-1px;text-align:center;color:var(--white);margin-bottom:56px;font-family:Playfair Display,serif;font-size:54px;font-style:italic;font-weight:700;position:relative}h1 span{background:var(--grad-gold);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;animation:4s ease-in-out infinite wordFloat;display:inline-block}h1:after{content:"";background:var(--gold);opacity:.7;border-radius:50%;width:8px;height:8px;margin:18px auto 0;animation:2.5s ease-in-out infinite dotPulse;display:block}.user-input-container{align-items:center;gap:20px;margin-bottom:60px;display:flex}.input{border-radius:var(--radius-input);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:100%;height:62px;color:var(--cream);transition:border-color .25s, box-shadow .25s, transform .35s var(--ease-float);box-shadow:var(--shadow-sm);background:#161410cc;border:1.5px solid #d4af372e;outline:none;flex:1;padding:0 24px;font-size:15px;font-weight:500}.input::placeholder{color:var(--parchment);opacity:.6;font-style:italic}.input:focus{border-color:var(--gold);box-shadow:var(--shadow-glow);transform:translateY(-4px)}.update-input-box{border-radius:var(--radius-input);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:100%;height:44px;color:var(--cream);transition:border-color .25s, box-shadow .25s, transform .3s var(--ease-float);box-shadow:var(--shadow-sm);background:#161410e6;border:1.5px solid #d4af3759;outline:none;margin-top:8px;margin-bottom:4px;padding:0 16px;font-family:Nunito,sans-serif;font-size:14px;font-weight:500;display:inline-block}.update-input-box::placeholder{color:var(--parchment);opacity:.5;font-style:italic}.update-input-box:focus{border-color:var(--gold);box-shadow:var(--shadow-glow);transform:translateY(-2px)}.btn{cursor:pointer;border-radius:var(--radius-btn);transition:transform .32s var(--ease-float), box-shadow .28s ease, background .28s ease;border:none;outline:none;padding:13px 28px;font-size:14px;font-weight:700}.btn-green{background:var(--grad-gold);color:#1a1400;min-width:120px;height:52px;position:relative;overflow:hidden;box-shadow:0 8px 24px #d4af374d}.btn-green:before{content:"";background:#ffffff1a;border-radius:50%;width:120px;height:120px;animation:3s ease-in-out infinite btnOrb;position:absolute;top:-60px;left:-60px}.btn-green:hover{transform:translateY(-5px)scale(1.03);box-shadow:0 16px 40px #d4af3773}.user-input-container .btn-green{min-width:180px;height:62px}.btn-red{color:#e07060;background:#b43c281f;border:1.5px solid #b43c2833;min-width:120px;height:52px;padding:13px 28px}.btn-red:hover{background:#b43c2838;transform:translateY(-3px);box-shadow:0 8px 20px #b43c282e}.update-btn{color:var(--parchment);border-radius:var(--radius-btn);cursor:pointer;transition:transform .32s var(--ease-float), box-shadow .28s ease, background .28s ease, color .28s ease;background:#d4af3714;border:1.5px solid #d4af3740;padding:10px 22px;font-size:13px;font-weight:700}.update-btn:hover{color:var(--gold-lt);background:#d4af372e;transform:translateY(-3px);box-shadow:0 6px 18px #d4af3733}.todo-top{justify-content:space-between;align-items:center;gap:20px;margin-bottom:38px;display:flex}h2{letter-spacing:3px;text-transform:uppercase;color:var(--parchment);font-size:13px;font-weight:700}.status-filter{align-items:center;gap:12px;display:flex}.status-filter select{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-input);min-width:170px;color:var(--cream);cursor:pointer;appearance:none;box-shadow:var(--shadow-sm);background:#161410cc right 14px center no-repeat;border:1.5px solid #d4af372e;outline:none;padding:13px 40px 13px 18px;font-size:13px;font-weight:600}.card-content{-webkit-backdrop-filter:blur(16px);border-radius:var(--radius-card);width:100%;box-shadow:var(--shadow-md);transition:transform .35s var(--ease-float), box-shadow .35s ease, border-color .25s;background:#161410b3;border:1px solid #d4af372e;margin-bottom:28px;padding:32px 28px 28px;position:relative;overflow:hidden}.card-content:hover{box-shadow:var(--shadow-lg);border-color:#d4af3759;transform:translateY(-6px)}.card-content p{color:var(--cream);margin-bottom:14px;font-size:14px;line-height:1.6}.card-content p span{color:var(--parchment);letter-spacing:1px;text-transform:uppercase;margin-right:6px;font-size:12px;font-weight:700}.card-content p:last-of-type{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.card-content select{border-radius:var(--radius-pill);letter-spacing:1px;text-transform:uppercase;color:var(--cream);cursor:pointer;appearance:none;box-shadow:var(--shadow-sm);background:#161410d9;border:1.5px solid #d4af3740;outline:none;padding:8px 16px;font-size:11px;font-weight:800;transition:border-color .2s,box-shadow .2s}.card-content select:focus{border-color:var(--gold);box-shadow:var(--shadow-glow)}.buttons{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:14px;margin-top:24px;display:flex}.buttons .btn,.buttons button{margin:0}.completed{background:var(--grad-gold);color:#1a1400;box-shadow:0 4px 16px #d4af3766}.notCompleted{background:var(--grad-gold2);color:var(--cream);box-shadow:0 4px 14px #b8860b4d}.msg{text-align:center;color:var(--parchment);opacity:.6;margin-top:110px;font-size:17px;font-style:italic}@keyframes floatIn{0%{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}@keyframes containerBob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes wordFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes dotPulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.8)}}@keyframes btnOrb{0%{transform:translate(0)}33%{transform:translate(180px,40px)}66%{transform:translate(120px,-20px)}to{transform:translate(0)}}@keyframes driftOrb1{0%,to{transform:translate(0)scale(1)}33%{transform:translate(60px,80px)scale(1.1)}66%{transform:translate(-30px,40px)scale(.95)}}@keyframes driftOrb2{0%,to{transform:translate(0)scale(1)}40%{transform:translate(-80px,-60px)scale(1.15)}70%{transform:translate(40px,-30px)scale(.9)}}@keyframes driftOrb3{0%,to{transform:translate(0)}50%{transform:translate(-60px,80px)}}@media (width<=768px){.todo-container{border-radius:28px;padding:36px 24px 44px}h1{margin-bottom:40px;font-size:38px}.user-input-container{flex-direction:column;gap:16px}.user-input-container .btn-green{width:100%}.todo-top{flex-direction:column;align-items:flex-start;gap:18px}.status-filter,.status-filter select{width:100%}.buttons{flex-direction:column;align-items:stretch;gap:12px;margin-top:20px}.buttons .btn,.buttons button,.update-btn{text-align:center;width:100%}.update-input-box{width:100%}}@media (width<=400px){h1{font-size:30px}.todo-container{border-radius:24px;padding:24px 16px 34px}}*{box-sizing:border-box;margin:0;padding:0;font-family:Nunito Sans,sans-serif\;}#root{justify-content:center;align-items:center;width:auto;height:auto;display:flex}@media screen and (width<=1200px){#root{height:auto}}