@import "https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Inter:wght@300..700&family=Nunito:wght@400..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap";:root{--primary-color:#e8739a;--secondary-color:#ffb5d3;--accent-color:#ff6b9d;--bg-color:#fff5f8;--text-dark:#3d2b35;--text-muted:#9b8a92;--pink-light:#ffe4ee;--pink-glass:#ffe4ee59;--font-serif:"Playfair Display", serif;--font-sans:"Nunito", "Inter", sans-serif;--font-hand:"Caveat", cursive;--font-ui:"Nunito", "Inter", sans-serif;--shadow-sm:0 4px 12px #e8739a1a;--shadow-md:0 8px 28px #e8739a1f;--shadow-lg:0 20px 50px #e8739a26;--radius:18px}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-sans);background-color:var(--bg-color);color:var(--text-dark);cursor:default;min-height:100vh;line-height:1.6}.app-wrapper{min-height:100vh;position:relative}.desk-background{background:linear-gradient(135deg,#fff5f8 0%,#ffe4ee 50%,#fff0f5 100%) fixed;min-height:100vh;position:relative}a{color:inherit;text-decoration:none;transition:all .25s}h1,h2,h3,h4,h5,h6,.title{font-family:var(--font-serif);font-weight:700;line-height:1.2}.container{max-width:1200px;margin:0 auto;padding:0 20px}.btn{font-family:var(--font-ui);cursor:pointer;text-align:center;color:var(--text-dark);letter-spacing:.01em;background:#fff;border:1px solid #0000;border-radius:50px;padding:.65rem 1.6rem;font-size:.92rem;font-weight:700;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:inline-block}.btn:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)scale(1.02)}.btn-primary{background:linear-gradient(135deg, var(--primary-color), #f4a0bc);color:#fff;border:none;box-shadow:0 4px 18px #e8739a4d}.btn-primary:hover{color:#fff;background:linear-gradient(135deg,#d4607f,#e8739a);box-shadow:0 8px 28px #e8739a66}.form-input{border:2px solid var(--pink-light);width:100%;font-family:var(--font-sans);color:var(--text-dark);background:#fffffff2;border-radius:14px;margin-bottom:.8rem;padding:.9rem 1.2rem;font-size:.95rem;transition:border-color .3s,box-shadow .3s}.form-input:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 4px #e8739a1f}.form-input::placeholder{color:#c9a8b5}textarea.form-input{resize:vertical;min-height:140px;font-family:var(--font-hand);border-radius:16px;font-size:1.45rem;line-height:1.5}.navbar{justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding:1.5rem 0;display:flex}.navbar .logo{font-family:var(--font-hand);color:var(--primary-color);font-size:2.8rem;font-weight:700}.navbar .links{align-items:center;gap:1.2rem;display:flex}.masonry-grid{width:auto;margin-left:-16px;display:flex}.masonry-grid_column{background-clip:padding-box;padding-left:16px}.letter-card{border-radius:var(--radius);transform:translateY(var(--hover-lift,0px));cursor:default;background:#fffbfd;border:2px solid #ffb5d34d;line-height:1.6;transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s,border-color .3s;position:relative;overflow:hidden;box-shadow:0 3px 12px #e8739a14,0 8px 28px #e8739a0f}.letter-card:hover{border-color:#e8739a66;box-shadow:0 8px 24px #e8739a26,0 20px 48px #e8739a14}.letter-stripe{background:linear-gradient(90deg,#ffb5d3,#e8739a,#ff6b9d,#ffb5d3) 0 0/200% 100%;height:6px;animation:4s infinite stripeShimmer}@keyframes stripeShimmer{0%,to{background-position:0%}50%{background-position:100%}}.letter-card-inner{flex-direction:column;gap:.3rem;padding:1.5rem 1.6rem 1.3rem;display:flex}.letter-header{font-family:var(--font-ui);color:var(--text-muted);border-bottom:1px dashed #e8739a33;justify-content:space-between;align-items:baseline;margin-bottom:.6rem;padding-bottom:.5rem;font-size:.82rem;display:flex}.letter-to{color:var(--primary-color);font-size:.9rem;font-weight:700}.letter-date{opacity:.65;font-size:.76rem;font-style:italic}.letter-body{color:#3d2b35;white-space:pre-wrap;word-break:break-word;flex:1;margin-bottom:.5rem;font-family:Caveat,cursive;font-size:1.45rem;line-height:1.6}.letter-footer{font-family:var(--font-ui);color:var(--text-muted);border-top:1px dashed #e8739a33;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.4rem;padding-top:.8rem;font-size:.82rem;display:flex}.letter-author{font-style:italic}.letter-author-link{font-style:normal;font-weight:700;text-decoration:none;transition:color .2s;color:var(--primary-color)!important}.letter-author-link:hover{text-decoration:underline;color:var(--accent-color)!important}.delete-btn{color:var(--accent-color);cursor:pointer;font-size:.76rem;font-weight:700;font-family:var(--font-ui);background:0 0;border:1.5px solid #ff6b9d59;border-radius:20px;padding:.2rem .7rem;transition:all .25s}.delete-btn:hover{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.like-count{font-size:.82rem}.postcard{box-shadow:var(--shadow-md);color:var(--text-dark);box-sizing:border-box;border-radius:var(--radius);background:#fffbfd;border:2px solid #ffb5d340;flex-direction:column;padding:1.5rem 2rem;display:flex;position:relative}.postcard-header{color:var(--text-muted);font-size:.88rem;font-family:var(--font-ui);border-bottom:1px dashed #e8739a33;justify-content:space-between;margin-bottom:1.2rem;padding-bottom:.5rem;display:flex}.postcard-body{font-family:var(--font-hand);white-space:pre-wrap;color:var(--text-dark);margin-bottom:1.5rem;font-size:1.5rem;line-height:1.5}.postcard-footer{font-family:var(--font-ui);color:var(--text-muted);justify-content:space-between;align-items:center;margin-top:auto;font-size:.9rem;display:flex}.auth-card{background:#fffbfd;border:2px solid #ffb5d34d;border-radius:24px;max-width:440px;margin:3rem auto;padding:2.5rem;box-shadow:0 12px 40px #e8739a1f}.auth-tabs{background:var(--pink-light);border-radius:14px;gap:0;margin-bottom:2rem;padding:4px;display:flex}.auth-tab{text-align:center;font-family:var(--font-ui);cursor:pointer;color:var(--text-muted);background:0 0;border:none;border-radius:11px;flex:1;padding:.6rem;font-size:.85rem;font-weight:700;transition:all .25s}.auth-tab.active{color:var(--primary-color);background:#fff;box-shadow:0 2px 8px #e8739a26}.divider{color:var(--text-muted);align-items:center;gap:1rem;margin:1.5rem 0;font-size:.8rem;display:flex}.divider:before,.divider:after{content:"";background:#e8739a33;flex:1;height:1px}.profile-card{box-shadow:var(--shadow-md);background:#fffbfd;border:2px solid #ffb5d34d;border-radius:24px;padding:2rem}.profile-avatar{object-fit:cover;border:3px solid var(--secondary-color);cursor:pointer;border-radius:50%;width:90px;height:90px;transition:transform .3s,box-shadow .3s;box-shadow:0 4px 16px #e8739a33}.profile-avatar:hover{transform:scale(1.05);box-shadow:0 6px 24px #e8739a4d}.chat-container{height:75vh;box-shadow:var(--shadow-lg);background:#fffbfd;border:2px solid #ffb5d340;border-radius:24px;gap:0;display:flex;overflow:hidden}.chat-sidebar{background:#fff5f8f2;border-right:1px solid #ffb5d34d;flex-direction:column;width:300px;display:flex}.chat-sidebar-header{font-family:var(--font-ui);color:var(--text-dark);border-bottom:1px solid #ffb5d340;align-items:center;gap:.5rem;padding:1rem 1.2rem;font-weight:700;display:flex}.chat-user-item{cursor:pointer;font-family:var(--font-ui);border-bottom:1px solid #ffb5d31f;align-items:center;gap:.75rem;padding:.85rem 1.2rem;font-size:.92rem;transition:background .2s;display:flex}.chat-user-item:hover{background:#ffb5d326}.chat-user-item.active{color:var(--primary-color);background:#e8739a1f;font-weight:700}.chat-main{flex-direction:column;flex:1;display:flex}.chat-header{font-weight:700;font-family:var(--font-ui);background:#fffc;border-bottom:1px solid #ffb5d333;align-items:center;gap:.75rem;padding:1rem 1.5rem;display:flex}.chat-messages{flex-direction:column;flex:1;gap:.75rem;padding:1.2rem;display:flex;overflow-y:auto}.chat-bubble{max-width:72%;font-family:var(--font-ui);border-radius:18px;padding:.75rem 1.1rem;font-size:.92rem;line-height:1.45;box-shadow:0 2px 8px #0000000a}.chat-bubble.mine{background:linear-gradient(135deg, var(--primary-color), #f4a0bc);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}.chat-bubble.theirs{background:var(--pink-light);color:var(--text-dark);border-bottom-left-radius:6px;align-self:flex-start}.chat-time{color:var(--text-muted);margin-top:.2rem;font-size:.72rem}.chat-input-bar{background:#ffffffe6;border-top:1px solid #ffb5d333;gap:.75rem;padding:.8rem 1rem;display:flex}.typing-indicator{color:var(--text-muted);font-size:.78rem;font-style:italic;font-family:var(--font-ui);min-height:1.2rem;padding:0 1.2rem .3rem}.avatar-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#3d2b3580;justify-content:center;align-items:center;animation:.25s fadeIn;display:flex;position:fixed;inset:0}.avatar-modal{background:#fffbfd;border:2px solid #ffb5d34d;border-radius:28px;width:90%;max-width:560px;max-height:80vh;padding:2rem;animation:.3s cubic-bezier(.34,1.56,.64,1) scaleIn;overflow-y:auto;box-shadow:0 20px 60px #e8739a40}.avatar-grid{grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.5rem 0;display:grid}.avatar-option{aspect-ratio:1;cursor:pointer;background:var(--pink-light);border:3px solid #0000;border-radius:50%;justify-content:center;align-items:center;width:100%;font-size:2.5rem;transition:all .25s;display:flex;overflow:hidden}.avatar-option:hover{border-color:var(--secondary-color);transform:scale(1.1);box-shadow:0 4px 16px #e8739a33}.avatar-option.selected{border-color:var(--primary-color);transform:scale(1.05);box-shadow:0 0 0 4px #e8739a33}.modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1000;background:#3d2b3573;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-card{background:#fffbfd;border:2px solid #ffb5d34d;border-radius:24px;width:90%;max-width:480px;padding:2rem;animation:.3s cubic-bezier(.34,1.56,.64,1) scaleIn;box-shadow:0 20px 60px #e8739a33}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{opacity:0;transform:scale(0)}50%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}@keyframes heartFloat{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-80px)scale(.5)}}@media (width<=768px){.chat-container{flex-direction:column;height:auto;min-height:80vh}.chat-sidebar{border-bottom:1px solid #ffb5d34d;border-right:none;width:100%;height:auto;max-height:200px}.avatar-grid{grid-template-columns:repeat(3,1fr)}}