:root{--color-primary-400: hsl(12 36% 52%);--color-primary-500: hsl(11 42% 42%);--color-primary-600: hsl(10 45% 35%);--color-primary-700: hsl(9 48% 28%);--color-secondary-200: hsl(43 85% 75%);--color-secondary-300: hsl(42 82% 62%);--color-secondary-400: hsl(40 80% 52%);--color-secondary-500: hsl(38 78% 45%);--color-accent-400: hsl(155 30% 40%);--color-accent-500: hsl(158 35% 30%);--color-neutral-200: hsl(35 20% 86%);--color-neutral-300: hsl(32 18% 75%);--color-neutral-400: hsl(28 15% 60%);--color-neutral-500: hsl(25 12% 48%);--color-neutral-600: hsl(22 14% 38%);--color-neutral-700: hsl(20 18% 28%);--color-neutral-800: hsl(18 22% 20%);--color-star: hsl(45 95% 72%);--color-paper: hsl(42 35% 94%);--color-paper-lines: hsl(210 40% 75% / .4);--color-ink: hsl(220 25% 25%)}*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;font-family:Nunito,sans-serif;color:var(--color-neutral-800);line-height:1.6;background:radial-gradient(ellipse at 30% 20%,hsl(11 30% 22% / .2) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,hsl(40 50% 40% / .12) 0%,transparent 50%),linear-gradient(170deg,#34241d,#221a16);background-attachment:fixed}.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;position:relative}.page:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(1.5px 1.5px at 15% 25%,var(--color-star) 50%,transparent 50%),radial-gradient(2px 2px at 85% 20%,var(--color-secondary-300) 50%,transparent 50%),radial-gradient(1px 1px at 25% 75%,var(--color-star) 50%,transparent 50%),radial-gradient(1.5px 1.5px at 75% 65%,var(--color-secondary-200) 50%,transparent 50%),radial-gradient(1px 1px at 50% 45%,var(--color-secondary-300) 50%,transparent 50%);animation:twinkle 5s ease-in-out infinite;pointer-events:none;opacity:.7}@keyframes twinkle{0%,to{opacity:.5}50%{opacity:.8}}.postcard{position:relative;width:100%;max-width:600px;z-index:1;transform:rotate(-1deg);animation:float 6s ease-in-out infinite}@keyframes float{0%,to{transform:rotate(-1deg) translateY(0)}50%{transform:rotate(-.5deg) translateY(-8px)}}.postcard-front{position:relative;border-radius:8px 8px 0 0;overflow:hidden;box-shadow:0 2px 8px #0003,0 0 0 1px #e0d9d1}.postcard-front img{width:100%;height:auto;display:block}.postcard-back{background:repeating-linear-gradient(to bottom,transparent 0px,transparent 31px,var(--color-paper-lines) 31px,var(--color-paper-lines) 32px),linear-gradient(135deg,#f9f6f1,#f3efe7,#efeae1);background-size:100% 32px,100% 100%;background-position:0 20px,0 0;border-radius:0 0 8px 8px;padding:1.5rem 2rem 2rem;box-shadow:0 25px 50px #00000040,0 10px 20px #00000026,inset 0 1px #fcfbf7,0 0 0 1px #e0d9d1;position:relative}.postcard-back:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");opacity:.03;pointer-events:none;border-radius:0 0 8px 8px}.postcard-stamp{position:absolute;top:1rem;right:1.5rem;width:50px;height:60px;background:linear-gradient(145deg,#d1475e,#b23449);border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 2px 4px #0003,inset 0 1px #e08594;border:2px dashed hsl(350 40% 75% / .5);transform:rotate(3deg)}.postcard-intro{margin-bottom:1rem;padding-right:70px}.postcard-intro p{font-family:Cormorant Garamond,serif;font-size:1.05rem;line-height:1.7;color:var(--color-neutral-600);margin-bottom:.25rem}.postcard-intro .note{font-size:.95rem;font-style:italic;color:var(--color-neutral-500)}.message-area{margin-bottom:1.25rem}.message-textarea{width:100%;min-height:128px;padding:0;font-family:Marck Script,cursive;font-size:1.35rem;line-height:32px;color:var(--color-ink);background:transparent;border:none;resize:none;outline:none}.message-textarea::placeholder{color:var(--color-neutral-400);font-family:Marck Script,cursive}.signature-area{display:flex;align-items:baseline;gap:.75rem;padding-top:.5rem}.signature-label{font-family:Cormorant Garamond,serif;font-size:.95rem;color:var(--color-neutral-500);white-space:nowrap}.signature-input{flex:1;padding:.25rem 0;font-family:Marck Script,cursive;font-size:1.3rem;color:var(--color-ink);background:transparent;border:none;outline:none}.signature-input::placeholder{color:var(--color-neutral-400);font-family:Cormorant Garamond,serif;font-size:1rem;font-style:italic}.send-button{position:relative;width:100%;margin-top:1.5rem;padding:.9rem 2rem;font-family:Nunito,sans-serif;font-size:1rem;font-weight:600;letter-spacing:.02em;color:#f6f4ee;background:linear-gradient(145deg,var(--color-primary-500),var(--color-primary-600));border:none;border-radius:8px;cursor:pointer;transition:all .25s ease;box-shadow:0 4px 12px #6b392e4d,inset 0 1px #b474644d;z-index:1}.send-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #6b392e59,inset 0 1px #b474644d}.send-button:active:not(:disabled){transform:translateY(0)}.send-button:disabled{opacity:.5;cursor:not-allowed}.error-message{margin-top:1rem;padding:.75rem 1rem;font-size:.9rem;color:#a32929;background:#f9ecec;border:1px solid hsl(0 40% 85%);border-radius:6px;text-align:center}.success-state{text-align:center;padding:2.5rem 1rem;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.success-state .icon{font-size:3.5rem;margin-bottom:1rem;display:block}.success-state h2{font-family:Marck Script,cursive;font-size:1.8rem;font-weight:400;color:var(--color-accent-500);margin-bottom:.5rem}.success-state p{font-family:Cormorant Garamond,serif;font-size:1.1rem;font-style:italic;color:var(--color-neutral-500)}.footer-note{margin-top:2rem;text-align:center;font-family:Cormorant Garamond,serif;font-size:.9rem;font-style:italic;color:#c9ba9c99;z-index:1;position:relative}@media (max-width: 640px){.page{padding:1.5rem .75rem}.postcard{transform:rotate(0)}@keyframes float{0%,to{transform:rotate(0) translateY(0)}50%{transform:rotate(0) translateY(-5px)}}.postcard-back{padding:1.25rem 1.5rem 1.5rem}.postcard-stamp{width:42px;height:52px;font-size:1.25rem;top:.75rem;right:1rem}.postcard-intro{padding-right:55px}.postcard-intro p{font-size:.95rem}.message-textarea{font-size:1.2rem;line-height:32px;min-height:96px}.signature-input{font-size:1.15rem}}.mailbox-page{min-height:100vh;background:radial-gradient(ellipse at 30% 20%,hsl(11 30% 22% / .2) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,hsl(40 50% 40% / .12) 0%,transparent 50%),linear-gradient(170deg,#34241d,#221a16);font-family:Nunito,sans-serif;color:#ede8de}.login-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:380px;padding:2.5rem;background:linear-gradient(145deg,#372c25,#2a221d);border-radius:20px;box-shadow:0 25px 60px #0006,inset 0 1px #4d4033;text-align:center}.login-icon{font-size:4rem;margin-bottom:1rem}.login-box h1{font-family:Cormorant Garamond,serif;font-size:1.8rem;font-weight:600;color:#e8dec9;margin-bottom:.5rem}.login-subtitle{font-size:.95rem;color:#9d8c7b;margin-bottom:2rem}.login-input{width:100%;padding:1rem 1.25rem;font-size:1rem;font-family:inherit;color:#ede8de;background:#231d1a;border:2px solid hsl(25 15% 25%);border-radius:12px;outline:none;transition:border-color .2s,box-shadow .2s}.login-input:focus{border-color:var(--color-secondary-500);box-shadow:0 0 0 3px #b88a2e33}.login-input::placeholder{color:#70645c}.login-error{margin-top:1rem;padding:.75rem;font-size:.9rem;color:#e08585;background:#471f1f80;border-radius:8px}.login-button{width:100%;margin-top:1.5rem;padding:1rem;font-size:1rem;font-weight:600;font-family:inherit;color:#f6f4ee;background:linear-gradient(145deg,var(--color-primary-500),var(--color-primary-600));border:none;border-radius:12px;cursor:pointer;transition:transform .2s,box-shadow .2s}.login-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #59302666}.login-button:disabled{opacity:.5;cursor:not-allowed}.back-link{display:inline-block;margin-top:1.5rem;font-size:.9rem;color:#9d8c7b;text-decoration:none;transition:color .2s}.back-link:hover{color:#d1bd94}.mailbox-container{max-width:1000px;margin:0 auto;padding:2rem 1.5rem}.mailbox-header{display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid hsl(25 15% 25%)}.mailbox-title{display:flex;align-items:center;gap:.75rem;flex:1}.mailbox-icon{font-size:2rem}.mailbox-title h1{font-family:Cormorant Garamond,serif;font-size:1.5rem;font-weight:600;color:#e8dec9}.mailbox-stats{display:flex;align-items:baseline;gap:.4rem}.stat-count{font-size:1.75rem;font-weight:700;color:var(--color-secondary-400)}.stat-label{font-size:.9rem;color:#9d8c7b}.logout-button{padding:.6rem 1.2rem;font-size:.85rem;font-family:inherit;color:#a8998a;background:transparent;border:1px solid hsl(25 15% 30%);border-radius:8px;cursor:pointer;transition:all .2s}.logout-button:hover{color:#e08585;border-color:#8f3d3d;background:#471f1f4d}.loading{text-align:center;padding:4rem;color:#9d8c7b;font-size:1.1rem}.empty-mailbox{text-align:center;padding:4rem 2rem}.empty-icon{font-size:4rem;margin-bottom:1rem;opacity:.6}.empty-mailbox p{font-family:Cormorant Garamond,serif;font-size:1.3rem;color:#ad9985;margin-bottom:.5rem}.empty-mailbox span{font-size:.9rem;color:#7e7167}.envelopes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.envelope{position:relative;background:linear-gradient(145deg,#f1ece4,#e8e2d9);border-radius:4px;cursor:pointer;transition:transform .3s,box-shadow .3s;animation:slideIn .4s ease-out both;overflow:hidden}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.envelope:hover{transform:translateY(-5px) rotate(1deg);box-shadow:0 15px 40px #0000004d,0 5px 15px #0003}.envelope-flap{position:absolute;top:0;left:0;right:0;height:60px;background:linear-gradient(180deg,#e6dbcb,#dfd5c3);clip-path:polygon(0 0,50% 100%,100% 0);z-index:1}.envelope-body{padding:70px 1.25rem 1.25rem;min-height:160px}.envelope-stamp{position:absolute;top:12px;right:12px;font-size:1.5rem;z-index:2}.envelope-from{font-family:Marck Script,cursive;font-size:1.2rem;color:#3d475c;margin-bottom:.25rem}.envelope-date{font-size:.75rem;color:#937c6c;margin-bottom:.75rem}.envelope-preview{font-size:.85rem;color:#756357;line-height:1.5}.card-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;padding:1rem;z-index:100;animation:fadeIn .2s ease}.card-content{position:relative;width:100%;max-width:500px;max-height:80vh;overflow-y:auto;background:repeating-linear-gradient(transparent,transparent 31px,hsl(210 40% 75% / .3) 31px,hsl(210 40% 75% / .3) 32px),linear-gradient(135deg,#f9f6f1,#f3efe7);border-radius:8px;padding:2.5rem 2rem;box-shadow:0 25px 60px #00000080;animation:scaleIn .3s ease}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.card-close{position:absolute;top:.75rem;right:.75rem;width:32px;height:32px;font-size:1.5rem;color:#937c6c;background:transparent;border:none;cursor:pointer;transition:color .2s}.card-close:hover{color:#bf4040}.card-stamp{position:absolute;top:1rem;right:3rem;font-size:2rem}.card-message{font-family:Marck Script,cursive;font-size:1.4rem;line-height:32px;color:#303a50;white-space:pre-wrap;margin-bottom:1.5rem}.card-signature{font-family:Marck Script,cursive;font-size:1.3rem;color:#47536b;text-align:right;margin-bottom:.5rem}.card-date{font-family:Cormorant Garamond,serif;font-size:.9rem;color:#937c6c;text-align:right;font-style:italic}.header-buttons{display:flex;gap:.75rem;align-items:center}.export-button{padding:.6rem 1rem;font-size:.85rem;font-family:inherit;color:#e8dec9;background:linear-gradient(145deg,var(--color-accent-500),hsl(158 35% 25%));border:none;border-radius:8px;cursor:pointer;transition:all .2s}.export-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #1f473866}.card-actions{margin-top:1.5rem;padding-top:1rem;border-top:1px solid hsl(25 15% 85%);text-align:center}.delete-button{padding:.5rem 1rem;font-size:.85rem;font-family:inherit;color:#a14545;background:transparent;border:1px solid hsl(0 30% 75%);border-radius:6px;cursor:pointer;transition:all .2s}.delete-button:hover{color:#933;background:#f7eded;border-color:#c98282}.delete-confirm{display:flex;align-items:center;justify-content:center;gap:.75rem}.delete-confirm span{font-size:.9rem;color:#8f3d3d}.confirm-yes,.confirm-no{padding:.4rem 1rem;font-size:.85rem;font-family:inherit;border-radius:6px;cursor:pointer;transition:all .2s}.confirm-yes{color:#fff;background:#bf4040;border:none}.confirm-yes:hover{background:#b23434}.confirm-no{color:#756357;background:#e8e6e3;border:1px solid hsl(25 10% 80%)}.confirm-no:hover{background:#ddd9d5}@media (max-width: 640px){.mailbox-container{padding:1.5rem 1rem}.mailbox-header{flex-wrap:wrap;gap:1rem}.mailbox-title h1{font-size:1.25rem}.header-buttons{width:100%;justify-content:flex-end}.export-button{font-size:.8rem;padding:.5rem .75rem}.envelopes-grid{grid-template-columns:1fr}.login-box{margin:1rem;padding:2rem 1.5rem}.card-content{padding:2rem 1.5rem}.card-message{font-size:1.2rem}}