*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background:linear-gradient(135deg,#fdf2f8,#fce7f3,#f3e8ff);color:#4a3548;min-height:100vh}.app{max-width:900px;margin:0 auto;padding:2rem 1rem}.app-header{text-align:center;margin-bottom:3rem}.app-header h1{font-family:Caveat,cursive;font-size:3rem;color:#be185d}.subtitle{color:#9ca3af;margin:.5rem 0 1.5rem;font-weight:300}.add-btn{background:linear-gradient(135deg,#ec4899,#f472b6);color:#fff;border:none;padding:.7rem 1.5rem;border-radius:2rem;font-size:1rem;font-weight:500;cursor:pointer;transition:transform .2s,box-shadow .2s}.add-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #ec48994d}.loading,.empty-state{text-align:center;padding:4rem 0;color:#9ca3af;font-size:1.1rem}.timeline{position:relative;padding:2rem 0}.timeline-line{position:absolute;left:50%;top:0;bottom:0;width:3px;background:linear-gradient(to bottom,#f9a8d4,#f472b688,#f9a8d4);transform:translate(-50%)}.timeline-item{position:relative;margin-bottom:3rem;display:flex;justify-content:center}.timeline-dot{position:absolute;left:50%;top:2rem;width:14px;height:14px;background:#ec4899;border:3px solid #fdf2f8;border-radius:50%;transform:translate(-50%) scale(0);z-index:2;box-shadow:0 0 8px #ec48994d;transition:transform .4s ease .3s}.timeline-item:has(.scroll-visible) .timeline-dot{transform:translate(-50%) scale(1)}.memory-card{width:42%;transition:opacity .7s ease,transform .7s ease}.memory-card.scroll-hidden{opacity:0}.memory-card.scroll-hidden.left{transform:translate(-40px)}.memory-card.scroll-hidden.right{transform:translate(40px)}.memory-card.scroll-visible{opacity:1;transform:translate(0)}.memory-card.left{margin-right:auto;margin-left:0;padding-right:2rem}.memory-card.right{margin-left:auto;margin-right:0;padding-left:2rem}.card-content{background:#fff;border-radius:3px;overflow:visible;box-shadow:0 3px 15px #be185d1a,0 1px 3px #0000000f;transition:transform .4s,box-shadow .4s;padding:.7rem .7rem 2.8rem}.memory-card.left .card-content{transform:rotate(-1.5deg)}.memory-card.right .card-content{transform:rotate(1.5deg)}.memory-card.left .card-content:hover,.memory-card.right .card-content:hover{transform:rotate(0) translateY(-6px);box-shadow:0 12px 30px #ec489926}.card-content img{width:100%;height:230px;object-fit:cover;display:block}.card-img-wrapper{position:relative}.card-actions{position:absolute;top:.4rem;right:.4rem;display:flex;gap:.3rem;opacity:0;transition:opacity .2s}.card-content:hover .card-actions{opacity:1}.card-action-btn{background:#ffffffe6;border:none;border-radius:50%;width:30px;height:30px;font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s}.card-action-btn:hover{transform:scale(1.1)}.edit-preview{width:100%;max-height:180px;object-fit:cover;border-radius:8px;margin-bottom:.5rem}.card-info{padding:.6rem .2rem 0;text-align:center}.card-date{font-family:Caveat,cursive;font-size:1.2rem;color:#be185d}.card-caption{margin-top:.2rem;color:#78716c;font-family:Caveat,cursive;font-size:1.2rem;font-weight:400}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#be185d26;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:#fff;border-radius:20px;padding:2rem;width:90%;max-width:450px;position:relative;box-shadow:0 12px 40px #be185d1f;border:1px solid rgba(244,114,182,.2)}.modal-close{position:absolute;top:.8rem;right:1rem;background:none;border:none;color:#9ca3af;font-size:1.5rem;cursor:pointer}.modal h2{font-family:Caveat,cursive;font-size:1.8rem;color:#be185d;margin-bottom:1.2rem}.modal form{display:flex;flex-direction:column;gap:.8rem}.modal label{font-size:.85rem;color:#9ca3af}.modal input[type=date],.modal input[type=text]{padding:.6rem .8rem;border-radius:10px;border:1px solid #f9a8d4;background:#fdf2f8;color:#4a3548;font-size:.95rem}.modal input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;padding:.4rem;transform:scale(1.5)}.modal input[type=date]:focus,.modal input[type=text]:focus{outline:none;border-color:#ec4899;box-shadow:0 0 0 3px #ec48991a}.modal button[type=submit]{margin-top:.5rem;background:linear-gradient(135deg,#ec4899,#f472b6);color:#fff;border:none;padding:.7rem;border-radius:10px;font-size:1rem;font-weight:500;cursor:pointer;transition:transform .2s,box-shadow .2s}.modal button[type=submit]:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #ec48994d}.modal button[type=submit]:disabled{opacity:.5;cursor:not-allowed}.drop-zone{border:2px dashed #f9a8d4;border-radius:14px;padding:2rem;text-align:center;cursor:pointer;color:#9ca3af;transition:border-color .2s,background .2s}.drop-zone:hover{border-color:#ec4899;background:#fce7f380}.preview-img{max-height:180px;max-width:100%;border-radius:10px;object-fit:contain}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 640px){.timeline-line,.timeline-dot{left:1.5rem}.memory-card,.memory-card.left,.memory-card.right{width:100%;margin-left:3rem;padding-left:1rem;padding-right:0}}.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;overflow:hidden;position:relative;background:linear-gradient(135deg,#fdf2f8,#fce7f3,#f3e8ff)}.floating-emojis{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.floating-emoji{position:absolute;font-size:1.5rem;opacity:0;animation:floatUp 8s ease-in infinite;animation-delay:calc(var(--i) * .7s);left:calc(5% + var(--i) * 7.5%);bottom:-2rem}@keyframes floatUp{0%{opacity:0;transform:translateY(0) rotate(0) scale(.8)}10%{opacity:.6}90%{opacity:.6}to{opacity:0;transform:translateY(-100vh) rotate(360deg) scale(1.2)}}.login-card{background:#ffffffd9;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:24px;padding:2.5rem 2rem;width:100%;max-width:360px;text-align:center;position:relative;z-index:1;border:1px solid rgba(244,114,182,.2);box-shadow:0 8px 40px #be185d1a;animation:cardAppear .6s ease-out}@keyframes cardAppear{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.greeting-wave{font-size:2.5rem;animation:wave 1.5s ease-in-out infinite;display:inline-block;transform-origin:70% 70%}@keyframes wave{0%,to{transform:rotate(0)}25%{transform:rotate(20deg)}50%{transform:rotate(-10deg)}75%{transform:rotate(15deg)}}.greeting-text{font-family:Caveat,cursive;font-size:2.8rem;color:#be185d;margin:.3rem 0 .2rem;animation:fadeInText .8s ease-out .3s both}@keyframes fadeInText{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.login-subtitle{color:#9ca3af;font-weight:300;margin-bottom:1.5rem;font-size:.9rem;animation:fadeInText .8s ease-out .5s both}.login-card form{display:flex;flex-direction:column;gap:.8rem}.pin-dots{display:flex;justify-content:center;gap:.6rem;margin-bottom:.3rem}.pin-dot{width:12px;height:12px;border-radius:50%;border:2px solid #f9a8d4;transition:all .2s ease}.pin-dot.filled{background:#ec4899;border-color:#ec4899;box-shadow:0 0 8px #ec489966;transform:scale(1.1)}.login-card input{padding:.8rem 1rem;border-radius:12px;border:1px solid #f9a8d4;background:#fdf2f8;color:#4a3548;font-size:1.2rem;text-align:center;letter-spacing:.3rem;transition:border-color .2s}.login-card input:focus{outline:none;border-color:#ec4899;box-shadow:0 0 0 3px #ec489926}.login-card input::-webkit-inner-spin-button,.login-card input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.login-card input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.login-card button{background:linear-gradient(135deg,#ec4899,#f472b6);color:#fff;border:none;padding:.8rem;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.login-card button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #ec48994d}.login-card button:disabled{opacity:.5;cursor:not-allowed}.login-error{color:#e11d48;font-size:.85rem;animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.header-actions{display:flex;gap:.8rem;justify-content:center}.logout-btn{background:transparent;color:#9ca3af;border:1px solid #e5e7eb;padding:.7rem 1.5rem;border-radius:2rem;font-size:1rem;cursor:pointer;transition:color .2s,border-color .2s}.logout-btn:hover{color:#e11d48;border-color:#e11d48}.welcome-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#fdf2f8d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem}.welcome-modal{background:#fff;border-radius:24px;padding:2.5rem 2rem;max-width:400px;width:100%;text-align:center;position:relative;overflow:hidden;border:1px solid rgba(244,114,182,.2);box-shadow:0 12px 50px #be185d1a;animation:welcomeAppear .6s ease-out}@keyframes welcomeAppear{0%{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.welcome-hearts{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.welcome-heart{position:absolute;font-size:1.2rem;opacity:0;animation:heartFloat 4s ease-in-out infinite;animation-delay:calc(var(--j) * .6s)}.welcome-heart:nth-child(1){left:10%;top:15%}.welcome-heart:nth-child(2){right:12%;top:10%}.welcome-heart:nth-child(3){left:5%;bottom:25%}.welcome-heart:nth-child(4){right:8%;bottom:20%}.welcome-heart:nth-child(5){left:25%;top:5%}.welcome-heart:nth-child(6){right:25%;bottom:10%}@keyframes heartFloat{0%,to{opacity:.3;transform:translateY(0) scale(1)}50%{opacity:.7;transform:translateY(-10px) scale(1.2)}}.welcome-emoji{font-size:3rem;margin-bottom:.5rem;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.welcome-title{font-family:Caveat,cursive;font-size:2.4rem;color:#be185d;margin-bottom:1rem}.welcome-message{color:#78716c;font-weight:300;line-height:1.7;font-size:.95rem;margin-bottom:1rem}.welcome-sign{color:#9ca3af;font-style:italic;font-size:.9rem;margin-bottom:1.5rem}.welcome-btn{background:linear-gradient(135deg,#ec4899,#f472b6);color:#fff;border:none;padding:.8rem 2rem;border-radius:2rem;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.welcome-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #ec48994d}.confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#fdf2f8b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:300;padding:1rem}.confirm-modal{background:#fff;border-radius:16px;padding:2rem;max-width:320px;width:100%;text-align:center;border:1px solid rgba(244,114,182,.2);box-shadow:0 8px 30px #be185d1a;animation:welcomeAppear .3s ease-out}.confirm-message{font-size:1.1rem;color:#4a3548;margin-bottom:1.5rem}.confirm-actions{display:flex;gap:.8rem;justify-content:center}.confirm-cancel{background:transparent;color:#9ca3af;border:1px solid #e5e7eb;padding:.6rem 1.5rem;border-radius:8px;font-size:.95rem;cursor:pointer;transition:border-color .2s,color .2s}.confirm-cancel:hover{color:#4a3548;border-color:#9ca3af}.confirm-delete{background:#e11d48;color:#fff;border:none;padding:.6rem 1.5rem;border-radius:8px;font-size:.95rem;cursor:pointer;transition:background .2s}.confirm-delete:hover{background:#be123c}