:root{--bg-color: #FDF8F0;--primary-blue: #1B1B91;--terracotta: #D15E38;--accent-orange: #F06B42;--card-bg: #FAF3E8;--text-dark: #1B1B91;--shadow-soft: 0 8px 24px rgba(27, 27, 145, .08)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;background-color:#113;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;min-height:100dvh}::-webkit-scrollbar{display:none;width:0px;background:transparent}*{-ms-overflow-style:none;scrollbar-width:none}.app-container{width:100%;max-width:420px;min-height:100vh;min-height:100dvh;background-color:var(--bg-color);position:relative;overflow:hidden;box-shadow:0 12px 40px #0000004d;display:flex;flex-direction:column}.fullscreen-toggle-btn{position:absolute;top:16px;right:16px;z-index:99;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--primary-blue);background-color:#fdf8f0d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--primary-blue);display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #0000001a}.fullscreen-toggle-btn:active{transform:scale(.9)}.fullscreen-toggle-btn svg{width:18px;height:18px}.hidden-icon{display:none}.page{position:absolute;top:0;left:0;width:100%;height:100%;min-height:100%;padding:24px 16px 16px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;transition:opacity .5s ease,transform .5s ease;background-color:var(--bg-color);overflow-y:auto}.page.hidden{opacity:0;pointer-events:none;transform:translateY(20px);visibility:hidden}.page.active{opacity:1;pointer-events:auto;transform:translateY(0);visibility:visible}.abstract-bg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:0;background:linear-gradient(135deg,#faf3e8,#f5ebe0,#eae0d0);filter:blur(40px);opacity:.85;pointer-events:none}.abstract-bg .shape{position:absolute;border-radius:50%;filter:blur(20px);opacity:.7}.abstract-bg .shape-1{width:280px;height:280px;background-color:#f06b4259;top:-10%;left:-10%;animation:moveShape1 8s ease-in-out infinite alternate}.abstract-bg .shape-2{width:320px;height:320px;background-color:#1b1b9140;bottom:-15%;right:-10%;animation:moveShape2 10s ease-in-out infinite alternate}.abstract-bg .shape-3{width:240px;height:240px;background-color:#d15e384d;top:30%;left:20%;animation:7s ease-in-out infinite alternate}@keyframes moveShape1{0%{transform:translate(0) scale(1)}to{transform:translate(120px,150px) scale(1.2)}}@keyframes moveShape2{0%{transform:translate(0) scale(1)}to{transform:translate(-140px,-120px) scale(1.15)}}@keyframes moveShape3{0%{transform:translate(0) scale(.9) rotate(0)}to{transform:translate(-100px,100px) scale(1.25) rotate(180deg)}}.lock-header{z-index:5;margin-top:24px;flex-shrink:0}.lock-header h1{color:var(--primary-blue);font-size:1.45rem;font-weight:700;text-align:center}.lock-graphic-wrapper{width:100px;height:125px;margin-top:2px;margin-bottom:2px;display:flex;justify-content:center;align-items:center;flex-shrink:0;z-index:5}.heart-lock-svg{width:100%;height:100%;overflow:visible}.shackle-group{transform-origin:68px 210px;transition:transform .6s cubic-bezier(.34,1.4,.64,1)}.sparks-group{opacity:0;transition:opacity .3s ease .3s}.heart-lock-svg.unlocked .shackle-group{transform:translateY(-35px) rotate(-32deg)}.heart-lock-svg.unlocked .sparks-group{opacity:1}.pin-status-wrapper{display:flex;flex-direction:column;align-items:center;margin-top:2px;margin-bottom:6px;flex-shrink:0;z-index:5}.pin-dots-container{display:flex;gap:16px}.dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--primary-blue);transition:all .2s ease}.dot.filled{background-color:var(--primary-blue);transform:scale(1.2)}.error-msg{height:16px;color:var(--terracotta);font-weight:600;font-size:.85rem;text-align:center;margin-top:2px}.shake{animation:shakeKeypad .4s ease-in-out}@keyframes shakeKeypad{0%,to{transform:translate(0)}20%{transform:translate(-12px)}40%{transform:translate(12px)}60%{transform:translate(-8px)}80%{transform:translate(8px)}}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;max-width:260px;margin-bottom:6px;flex-shrink:0;z-index:5}.key-btn{width:60px;height:60px;margin:0 auto;border-radius:50%;border:none;background-color:#1b1b9114;color:var(--primary-blue);font-size:1.4rem;font-weight:700;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background-color .15s ease,transform .1s ease}.key-btn:active{background-color:#1b1b9133;transform:scale(.9)}.key-btn.action-btn{font-size:1.15rem;background-color:transparent;color:var(--terracotta);font-weight:700}.outside-photo-wrapper{margin-top:8px;margin-bottom:4px;display:flex;justify-content:center;align-items:center;z-index:5;flex-shrink:0}.photo-frame{width:280px;height:280px;border-radius:50%;border:4px solid var(--primary-blue);box-shadow:0 6px 18px #1b1b9126;overflow:hidden;display:flex;justify-content:center;align-items:center;background-color:#fff;margin-bottom:2px}.photo-img{width:100%;height:100%;object-fit:cover}.wedding-card{width:100%;flex:1;background-color:var(--card-bg);border-radius:16px;padding:12px 14px;position:relative;display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(27,27,145,.12);box-shadow:var(--shadow-soft);overflow:hidden;margin-bottom:6px;z-index:5}.corner-ornament{position:absolute;width:24px;height:24px;pointer-events:none}.corner-ornament.top-left{top:4px;left:4px}.corner-ornament.top-right{top:4px;right:4px;transform:scaleX(-1)}.corner-ornament.bottom-left{bottom:4px;left:4px;transform:scaleY(-1)}.corner-ornament.bottom-right{bottom:4px;right:4px;transform:scale(-1)}.card-content{text-align:center;z-index:2;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:space-between}.couple-names{font-size:1.35rem;color:var(--primary-blue);font-weight:800;margin-top:2px}.divider-svg{width:55%;height:8px}.greeting-highlight{font-size:1.1rem;font-weight:700;color:var(--terracotta);line-height:1.2}.wedding-wishes{font-size:.85rem;color:var(--terracotta);line-height:1.3;padding:0 4px;font-weight:500}.sender-section{width:100%;display:flex;justify-content:space-between;align-items:flex-end;padding:0 2px}.sender-info{display:flex;flex-direction:column;text-align:left;padding-left:12px}.from-label{font-size:.75rem;color:var(--primary-blue);font-weight:700}.from-name{font-size:.9rem;color:var(--primary-blue);font-weight:800}.card-actions{display:flex;gap:6px;margin-right:6px}.action-circle-btn{width:38px;height:38px;border-radius:50%;border:2px solid var(--primary-blue);background-color:#fff;color:var(--primary-blue);display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .2s ease}.action-circle-btn svg{width:16px;height:16px}.action-circle-btn.highlight-btn{background-color:var(--primary-blue);color:#fff}.action-circle-btn:active{transform:scale(.92)}.action-circle-btn.playing{background-color:var(--terracotta);border-color:var(--terracotta);color:#fff;animation:pulseMusic 1.5s infinite}@keyframes pulseMusic{0%{box-shadow:0 0 #d15e3866}70%{box-shadow:0 0 0 10px #d15e3800}to{box-shadow:0 0 #d15e3800}}#confetti-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.watermark{font-size:.65rem;color:var(--primary-blue);opacity:.4;margin-top:2px;text-align:center;z-index:5;flex-shrink:0}@media (min-width: 480px){.app-container{border-radius:28px;min-height:85vh;max-height:none;border:8px solid var(--primary-blue);margin:auto}.page{padding-top:18px;padding-bottom:12px}.wedding-card{margin-bottom:0;padding:8px 12px}.lock-header{margin-top:20px}.lock-header h1{font-size:1.25rem}.outside-photo-wrapper{margin-top:14px}.photo-frame{width:140px;height:140px}.keypad{max-width:180px;gap:6px}.key-btn{width:36px;height:36px;font-size:.95rem}.couple-names{font-size:1.05rem}.greeting-highlight{font-size:.85rem}.wedding-wishes{font-size:.68rem}.from-name{font-size:.72rem}.action-circle-btn{width:30px;height:30px}.action-circle-btn svg{width:13px;height:13px}}