:root{--primary-white:#fff;--beige-paper:#f8f5f0;--love-red:#c02626;--text-dark:#333;--text-muted:#777;--transition-speed:.8s}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--primary-white);color:var(--text-dark);min-height:100svh;font-family:Outfit,sans-serif}body:has(.envelope-section){height:100svh;overflow:hidden}#app{flex-direction:column;width:100%;height:100%;display:flex}.main-wrapper{flex-direction:column;flex:1;justify-content:center;align-items:center;padding:24px;display:flex}.envelope-section{flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.elegant-title{color:var(--text-dark);margin-bottom:2rem;font-family:Playfair Display,serif;font-size:1.6rem;font-weight:700;transition:opacity .5s ease-in-out}.envelope-container{perspective:1500px;width:320px;height:220px;transform-style:preserve-3d;margin-bottom:1.5rem;position:relative}.envelope{width:100%;height:100%;transform-style:preserve-3d;background-color:#fff;border:1px solid #eee;border-radius:4px;position:relative;box-shadow:0 4px 30px #0000000d}.envelope-front{z-index:10;pointer-events:none;width:100%;height:100%;transition:opacity .4s ease-in-out;position:absolute;top:0;left:0}.envelope-front-svg{width:100%;height:100%;display:block}.envelope-flap{z-index:14;transform-origin:top;width:100%;height:135px;transition:transform var(--transition-speed) ease-in-out, z-index 0s var(--transition-speed);transform-style:preserve-3d;will-change:transform;position:absolute;top:0;left:0}.flap-svg{width:100%;height:100%;display:block}.heart-path{fill:#c02626;pointer-events:none;opacity:1}@keyframes heartOpeningFade{0%{opacity:1}10%{opacity:1}40%{opacity:0}to{opacity:0}}.envelope.open .heart-path{animation:.7s ease-in-out .18s forwards heartOpeningFade}@keyframes heartClosingFade{0%{opacity:0}55%{opacity:0}to{opacity:1}}.envelope:not(.open) .heart-path{animation:.9s ease-in-out forwards heartClosingFade}.envelope.open .envelope-flap{z-index:1;transform:rotateX(180deg)}.input-overlay{text-align:center;z-index:100;width:100%;transition:opacity .5s ease-in-out}#code-input{letter-spacing:.4rem;text-align:center;color:#000;background:0 0;border:none;border-bottom:2px solid #c0262626;outline:none;width:120px;padding:.5rem;font-size:1.5rem;transition:border-color .3s}#code-input::placeholder{letter-spacing:.3rem;opacity:.3;text-transform:uppercase;font-family:Outfit,sans-serif;font-size:.9rem;transition:opacity .2s}#code-input:focus::placeholder{opacity:0}#code-input:focus{border-color:var(--love-red)}.hollow-btn{color:var(--love-red);border:1.5px solid var(--love-red);cursor:pointer;pointer-events:none;text-transform:uppercase;letter-spacing:.1em;opacity:1;z-index:101;background:#fff;border-radius:50px;margin-top:1.5rem;padding:.8rem 3rem;font-size:.8rem;font-weight:600;transition:background .4s,color .4s,opacity .4s}.hollow-btn:not(:disabled){background:var(--love-red);color:#fff;pointer-events:auto;box-shadow:0 4px 15px #c0262626}.hollow-btn.is-close{opacity:1!important;pointer-events:auto!important}.envelope.open~.elegant-title,.envelope.open~.input-overlay,.envelope.open~.hollow-btn:not(.is-close){opacity:0;pointer-events:none}.envelope-letter{background:var(--beige-paper);z-index:2;visibility:hidden;will-change:transform;border-radius:4px;width:100%;height:420px;padding:50px 35px;transition:transform .6s ease-in-out,z-index 0s .6s,visibility 0s .6s;position:absolute;top:10px;left:0;right:0;transform:translateY(0);box-shadow:0 10px 60px #0000001a}@keyframes letterEmergeCenter{0%{z-index:2;visibility:visible;transform:translateY(0)}50%{z-index:2;transform:translateY(-110%)}51%{z-index:25}to{z-index:25;visibility:visible;transform:translateY(-170px)}}.envelope.open .envelope-letter{animation:1.6s cubic-bezier(.19,1,.22,1) forwards letterEmergeCenter;animation-delay:calc(var(--transition-speed) * .8);transition:none}.letter-inner{text-align:center;flex-direction:column;justify-content:center;height:100%;padding:20px 0;display:flex}.elegant-message{color:#1a1a1a;text-align:center;font-family:Libre Baskerville,serif;font-size:1.15rem;font-style:italic;line-height:1.65}.letter-footer{color:#1a1a1a;text-align:center;opacity:.9;margin-top:2rem;font-family:Libre Baskerville,serif;font-size:1.15rem;font-style:italic}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.shake{animation:.4s ease-in-out shake;border-color:var(--love-red)!important}.dashboard-wrapper{max-width:840px;min-height:100svh;margin:0 auto;padding:60px 24px}.dash-header{justify-content:space-between;align-items:center;margin-bottom:60px;display:flex}.dash-title{align-items:flex-end;gap:12px;font-family:Playfair Display,serif;font-size:2.2rem;font-weight:700;display:flex}.hollow-heart{width:34px;height:34px;margin-bottom:4px}.header-actions{align-items:center;gap:16px;display:flex}.secondary-btn{color:var(--text-dark);border:1.5px solid var(--text-dark);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;background:0 0;border-radius:4px;padding:10px 20px;font-size:.8rem;font-weight:600;transition:all .2s}.secondary-btn:hover{background:var(--text-dark);color:#fff}.plus-btn{background:var(--text-dark);color:#fff;cursor:pointer;border:none;border-radius:4px;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.8rem;transition:transform .2s;display:flex}.plus-btn:hover{transform:scale(1.05)}.notes-list{flex-direction:column;display:flex}.notes-list.preview-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:40px;padding-bottom:100px;display:grid}.table-header{border-bottom:2px solid var(--text-dark);align-items:center;gap:32px;margin-bottom:8px;padding-bottom:12px;display:flex}.header-label{text-transform:uppercase;letter-spacing:.15em;color:var(--text-muted);font-size:.75rem;font-weight:700}.code-label{text-align:center;flex:0 0 100px}.message-label{text-align:center;flex:1}.from-label{text-align:center;flex:0 0 110px}.note-card{border-bottom:1px solid #f0f0f0;align-items:center;gap:32px;padding:40px 0;display:flex}.note-code-col{flex:0 0 100px;justify-content:center;align-items:center;display:flex;position:relative}.note-code{color:var(--love-red);letter-spacing:.05em;text-align:center;font-size:1.4rem;font-weight:700}.note-actions{justify-content:center;gap:12px;margin-top:20px;display:flex;position:absolute;top:100%;left:50%;transform:translate(-50%)}.note-body{color:#222;text-align:center;flex:1;font-family:Libre Baskerville,serif;font-size:1rem;line-height:1.5}.note-author{color:var(--text-dark);text-transform:capitalize;text-align:center;flex:0 0 110px;font-size:1rem;font-weight:600}.edit-btn,.delete-btn{cursor:pointer;color:#ccc;background:0 0;border:none;justify-content:center;align-items:center;padding:2px;transition:color .2s,transform .2s;display:flex}.edit-btn:hover{color:var(--text-dark);transform:scale(1.1)}.delete-btn:hover{color:var(--love-red);transform:scale(1.1)}.preview-letter-card{background:var(--beige-paper);border-radius:4px;flex-direction:column;width:320px;height:420px;padding:50px 35px;display:flex;position:relative;box-shadow:0 10px 40px #00000014}.preview-letter-inner{flex-direction:column;flex:1;justify-content:center;padding:20px 0;display:flex;overflow-y:hidden}.preview-meta{color:var(--text-muted);font-size:.7rem;font-weight:700;position:absolute;bottom:20px;left:20px}.modal-overlay{z-index:1000;background:#fffffffa;justify-content:center;align-items:center;width:100%;height:100%;padding:24px;display:flex;position:fixed;top:0;left:0}.modal-content{background:#fff;width:100%;max-width:440px}.modal-title{margin-bottom:32px;font-family:Playfair Display,serif;font-size:1.8rem}.input-group{margin-bottom:24px}.input-group label{text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);margin-bottom:10px;font-size:.7rem;display:block}.input-group input,.input-group textarea{border:1px solid #eee;border-radius:4px;outline:none;width:100%;padding:14px;font-family:Outfit,sans-serif;font-size:1rem;transition:border-color .2s}.input-group input:focus,.input-group textarea:focus{border-color:var(--text-dark)}.input-group textarea{resize:none;height:160px}.modal-actions{justify-content:flex-end;gap:16px;margin-top:40px;display:flex}.cancel-btn,.create-btn{cursor:pointer;text-transform:uppercase;letter-spacing:.05em;border:none;border-radius:4px;padding:14px 32px;font-size:.9rem;font-weight:600;transition:all .2s}.cancel-btn{color:var(--text-dark);background:#f5f5f5}.create-btn{background:var(--text-dark);color:#fff}.create-btn:hover{background:#000}.hidden{display:none!important}