*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--purple:#7c3aed;--purple-light:#a855f7;--blue:#3b82f6;--blue-light:#60a5fa;--pink:#ec4899;--pink-light:#f472b6;--cyan:#06b6d4;--cyan-light:#22d3ee;--green:#10b981;--green-light:#34d399;--bg:#0a0a1a;--surface:#ffffff0d;--surface-hover:#ffffff14;--border:#ffffff1a;--border-focus:#a855f799;--text:#e2e8f0;--text-muted:#e2e8f080;--blur:blur(20px);--radius:16px;--radius-sm:8px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.6}body{min-height:100vh;overflow-x:hidden}#root{min-height:100vh}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,textarea{font-family:inherit}h1,h2,h3{line-height:1.2}.bg-effect{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.bg-orb{filter:blur(80px);opacity:.35;border-radius:50%;position:absolute}.bg-orb-1{background:radial-gradient(circle,#7c3aed,#3b82f6);width:600px;height:600px;animation:12s ease-in-out infinite float1;top:-200px;left:-150px}.bg-orb-2{background:radial-gradient(circle,#ec4899,#7c3aed);width:500px;height:500px;animation:15s ease-in-out infinite float2;bottom:-150px;right:-100px}.bg-orb-3{background:radial-gradient(circle,#06b6d4,#10b981);width:400px;height:400px;animation:10s ease-in-out infinite float3;top:50%;left:50%;transform:translate(-50%,-50%)}.bg-grid{background-image:linear-gradient(#ffffff08 1px,#0000 1px),linear-gradient(90deg,#ffffff08 1px,#0000 1px);background-size:40px 40px;position:absolute;inset:0}@keyframes float1{0%,to{transform:translate(0)scale(1)}33%{transform:translate(60px,40px)scale(1.05)}66%{transform:translate(-30px,60px)scale(.95)}}@keyframes float2{0%,to{transform:translate(0)scale(1)}50%{transform:translate(-50px,-60px)scale(1.08)}}@keyframes float3{0%,to{transform:translate(-50%,-50%)scale(1)}50%{opacity:.2;transform:translate(-50%,-50%)scale(1.15)}}.app{min-height:100vh;position:relative}.app-content{z-index:1;max-width:900px;margin:0 auto;padding:48px 24px 80px;position:relative}.app-header{text-align:center;margin-bottom:40px}.header-title{justify-content:center;align-items:center;gap:12px;margin-bottom:10px;display:flex}.title-sparkle{font-size:28px;animation:3s ease-in-out infinite sparkle}.title-sparkle:last-child{animation-delay:1.5s}.title-text{letter-spacing:-2px;background:linear-gradient(135deg,#a855f7,#60a5fa,#f472b6);-webkit-text-fill-color:transparent;background-size:200% 200%;-webkit-background-clip:text;background-clip:text;font-size:52px;font-weight:800;animation:5s infinite gradient-shift}.header-subtitle{color:var(--text-muted);letter-spacing:.5px;font-size:15px}@keyframes sparkle{0%,to{opacity:1;transform:scale(1)rotate(0)}50%{opacity:.8;transform:scale(1.3)rotate(15deg)}}@keyframes gradient-shift{0%,to{background-position:0%}50%{background-position:100%}}.memo-form{background:var(--surface);-webkit-backdrop-filter:var(--blur);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:40px;padding:24px;transition:border-color .3s,box-shadow .3s,transform .2s;position:relative;overflow:hidden}.memo-form--focused{border-color:var(--border-focus);transform:translateY(-2px);box-shadow:0 0 0 1px #a855f74d,0 0 30px #a855f726,0 20px 40px #0006}.form-glow{border-radius:var(--radius);opacity:0;pointer-events:none;z-index:-1;background:linear-gradient(135deg,#a855f733,#60a5fa33);transition:opacity .3s;position:absolute;inset:-1px}.memo-form--focused .form-glow{opacity:1}.form-title-input{width:100%;color:var(--text);border:none;border-bottom:1px solid var(--border);background:0 0;outline:none;margin-bottom:16px;padding:0 0 12px;font-size:18px;font-weight:600;transition:border-color .3s}.form-title-input::placeholder{color:var(--text-muted)}.memo-form--focused .form-title-input{border-color:#a855f766}.form-content-input{width:100%;color:var(--text);resize:none;background:0 0;border:none;outline:none;margin-bottom:20px;font-size:15px;line-height:1.7;display:block}.form-content-input::placeholder{color:var(--text-muted)}.form-footer{justify-content:flex-end;display:flex}.add-btn{color:#fff;opacity:.4;background:linear-gradient(135deg,#7c3aed,#3b82f6);border-radius:100px;align-items:center;gap:8px;padding:10px 24px;font-size:15px;font-weight:600;transition:opacity .2s,transform .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.add-btn--active{opacity:1;cursor:pointer}.add-btn--active:hover{transform:translateY(-2px)scale(1.03);box-shadow:0 8px 24px #7c3aed80}.add-btn--active:active{transform:scale(.97)}.add-btn-icon{font-size:18px;font-weight:300}.add-btn-shimmer{background:linear-gradient(90deg,#0000 0%,#ffffff40 50%,#0000 100%);position:absolute;inset:0;transform:translate(-100%)}.add-btn--active:hover .add-btn-shimmer{animation:.6s forwards shimmer}@keyframes shimmer{to{transform:translate(100%)}}.memo-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;display:grid}.memo-card{background:var(--surface);-webkit-backdrop-filter:var(--blur);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:transform .25s,box-shadow .25s,opacity .38s,scale .38s;animation:.4s cubic-bezier(.34,1.56,.64,1) both card-enter;position:relative;overflow:hidden}.memo-card:hover{transform:translateY(-6px)}.memo-card--charging{z-index:10;animation:.15s ease-out forwards card-charge,.15s ease-in-out card-shake}@keyframes card-charge{0%{filter:brightness();transform:scale(1);box-shadow:0 0 #fff0}to{filter:brightness(1.6)saturate(1.4);transform:scale(1.08);box-shadow:0 0 30px #fffc,0 0 60px #fff6}}@keyframes card-shake{0%,to{margin-left:0}20%{margin-left:-4px}40%{margin-left:4px}60%{margin-left:-3px}80%{margin-left:3px}}.memo-card--exploding{pointer-events:none;z-index:10;animation:.65s cubic-bezier(.4,0,.6,1) forwards card-explode}@keyframes card-explode{0%{opacity:1;filter:brightness(1.8)blur();transform:scale(1.1)rotate(0)}30%{opacity:.7;filter:brightness(2)blur(4px);transform:scale(1.05)rotate(5deg)}to{opacity:0;filter:brightness(.5)blur(20px);transform:scale(.2)rotate(25deg)translateY(20px)}}.shockwave{opacity:0;pointer-events:none;z-index:5;border:3px solid;border-radius:50%;width:100px;height:100px;margin:-50px 0 0 -50px;animation:.6s ease-out forwards shockwave;position:absolute;top:50%;left:50%}.memo-card--purple .shockwave{color:#a855f7}.memo-card--blue .shockwave{color:#60a5fa}.memo-card--pink .shockwave{color:#f472b6}.memo-card--cyan .shockwave{color:#22d3ee}.memo-card--green .shockwave{color:#34d399}@keyframes shockwave{0%{opacity:1;border-width:4px;transform:scale(0)}to{opacity:0;border-width:1px;transform:scale(4)}}.particles{pointer-events:none;z-index:6;width:0;height:0;position:absolute;top:50%;left:50%}.particle{opacity:0;width:10px;height:10px;animation:.7s cubic-bezier(.2,.6,.4,1) forwards particle-fly;animation-delay:var(--delay,0s);background:currentColor;border-radius:50%;position:absolute;top:-5px;left:-5px;box-shadow:0 0 12px,0 0 24px}.memo-card--purple .particle{color:#a855f7}.memo-card--blue .particle{color:#60a5fa}.memo-card--pink .particle{color:#f472b6}.memo-card--cyan .particle{color:#22d3ee}.memo-card--green .particle{color:#34d399}@keyframes particle-fly{0%{opacity:1;transform:rotate(var(--angle)) translateX(0) scale(1)}60%{opacity:1}to{opacity:0;transform:rotate(var(--angle)) translateX(160px) scale(.2)}}@keyframes card-enter{0%{opacity:0;transform:translateY(20px)scale(.92)}to{opacity:1;transform:translateY(0)scale(1)}}.card-glow{filter:blur(30px);opacity:.4;border-radius:50%;width:120px;height:120px;transition:opacity .3s;position:absolute;top:-40px;right:-40px}.memo-card:hover .card-glow{opacity:.65}.memo-card--purple{border-color:#a855f740}.memo-card--purple .card-glow{background:#7c3aed}.memo-card--purple:hover{border-color:#a855f780;box-shadow:0 20px 40px #7c3aed33}.memo-card--blue{border-color:#60a5fa40}.memo-card--blue .card-glow{background:#3b82f6}.memo-card--blue:hover{border-color:#60a5fa80;box-shadow:0 20px 40px #3b82f633}.memo-card--pink{border-color:#f472b640}.memo-card--pink .card-glow{background:#ec4899}.memo-card--pink:hover{border-color:#f472b680;box-shadow:0 20px 40px #ec489933}.memo-card--cyan{border-color:#22d3ee40}.memo-card--cyan .card-glow{background:#06b6d4}.memo-card--cyan:hover{border-color:#22d3ee80;box-shadow:0 20px 40px #06b6d433}.memo-card--green{border-color:#34d39940}.memo-card--green .card-glow{background:#10b981}.memo-card--green:hover{border-color:#34d39980;box-shadow:0 20px 40px #10b98133}.card-title{color:var(--text);margin-bottom:8px;font-size:16px;font-weight:700;line-height:1.4}.card-content{color:var(--text-muted);white-space:pre-wrap;word-break:break-word;margin-bottom:16px;font-size:14px;line-height:1.7}.card-footer{justify-content:space-between;align-items:center;display:flex}.card-date{color:var(--text-muted);opacity:.7;font-size:12px}.delete-btn{opacity:0;background:0 0;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:background .2s,transform .2s;display:flex}.memo-card:hover .delete-btn{opacity:1}.delete-btn:hover{background:#ef444433;transform:scale(1.15)}.delete-btn:active{transform:scale(.9)}.delete-icon{font-size:14px}.empty-state{text-align:center;padding:80px 24px;animation:.6s fade-in}.empty-icon{opacity:.6;margin-bottom:16px;font-size:56px;animation:4s ease-in-out infinite float3;display:block}.empty-text{color:var(--text-muted);font-size:16px}@keyframes fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (width<=600px){.app-content{padding:32px 16px 60px}.title-text{font-size:36px}.memo-grid{grid-template-columns:1fr}}