*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1000px at 50% 120%,#0b0f2a 0%,#050716 60%,#02030a 100%);color:#e5e7eb;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.layout{min-height:100vh}
.loading-view{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;background:radial-gradient(1000px at 50% 120%,#0b0f2a 0%,#050716 60%,#02030a 100%)}
.loading-box{display:flex;flex-direction:column;align-items:center;gap:18px}
.loading-spinner{width:96px;height:96px;border-radius:50%;border:6px solid rgba(255,255,255,.2);border-top-color:#93c5fd;border-left-color:#a78bfa;animation:spin .9s linear infinite;filter:drop-shadow(0 0 10px rgba(147,197,253,.5))}
.loading-text{color:#cbd5e1;font-size:20px;letter-spacing:.6px;text-shadow:0 0 12px rgba(173,216,230,.4)}
[v-cloak]{display:none!important}
@keyframes spin{to{transform:rotate(360deg)}}
.header{display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,rgba(72,61,139,.3),rgba(199,21,133,.2));backdrop-filter:saturate(120%) blur(2px);border-bottom:1px solid rgba(255,255,255,.08)}
.header-title{font-size:clamp(18px,3vw,26px);letter-spacing:.8px;color:#cbd5e1;text-shadow:0 0 8px rgba(173,216,230,.5)}
.main{display:flex;flex-direction:column;align-items:center;gap:20px}
.spread{position:relative;width:calc(100vw - 24px);max-width:1100px;height:clamp(420px,60vw,740px);display:flex;gap:0;perspective:1200px}
.page-side{flex:1;height:100%}
.page-side.left{transform-origin:right center}
.page-side.right{transform-origin:left center}
.page-card{height:100%;background:#0d1121;border:1px solid rgba(255,255,255,.08)}
.page-inner{height:100%;padding:clamp(14px,3vw,30px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px}
.page-title{margin:0;color:#e0e9ff;font-weight:600;letter-spacing:.6px;text-shadow:0 2px 12px rgba(75,0,130,.45);font-size:clamp(18px,2.4vw,24px)}
.page-text{margin:0;color:#cbd5e1;font-size:clamp(14px,1.8vw,18px);text-align:center}
.controls{display:flex;align-items:center;gap:18px;margin-top:12px}
.page-indicator{color:#9aa7b1}
.letter-dialog{background:rgba(12,16,28,.92)!important}
.letter-image{width:100%;border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.5)}
.giftbox{position:relative;width:clamp(170px,26vw,300px);height:clamp(150px,22vw,240px);margin:8px auto 16px;transition:all .6s;filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
.box-body{position:absolute;bottom:0;width:100%;height:calc(100% - 64px);background:repeating-linear-gradient(45deg,#6a5acd 0,#6a5acd 14px,#4b3aa3 14px,#4b3aa3 28px);border-radius:10px 10px 18px 18px;border:2px solid rgba(255,255,255,.15)}
.box-top{position:absolute;top:0;width:100%;height:64px;background:linear-gradient(180deg,#d946ef,#b91c1c);border-radius:14px 14px 8px 8px;transform-origin:center;transition:transform .6s;border:2px solid rgba(255,255,255,.15)}
.ribbon{position:absolute;left:50%;top:0;transform:translateX(-50%);width:clamp(18px,3vw,26px);height:100%;background:linear-gradient(180deg,#ffd700,#ff9f1a);border-radius:10px;box-shadow:0 0 12px rgba(255,159,26,.45)}
.giftbox.opened .box-top{transform:translateY(-18px) rotateX(25deg)}
.cake-scene{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
.cake{position:relative;width:clamp(240px,36vw,380px);height:clamp(160px,26vw,220px)}
.cake{opacity:0;transform:translateY(30px) scale(.92);transition:opacity .6s ease,transform .6s ease}
.cake.appear{opacity:1;transform:translateY(0) scale(1)}
.cake-body{position:absolute;bottom:0;width:100%;height:calc(100% - 60px);background:linear-gradient(180deg,#ffe4e1,#ffc0cb);border-radius:18px;box-shadow:inset 0 10px 20px rgba(255,255,255,.6),inset 0 -10px 20px rgba(0,0,0,.08)}
.cake-top{position:absolute;bottom:calc(100% - 60px);left:50%;transform:translateX(-50%);width:85%;height:28px;background:linear-gradient(180deg,#fff,#f5f5f5);border-radius:12px;box-shadow:0 4px 8px rgba(0,0,0,.15)}
.candles{position:absolute;bottom:calc(100% - 58px);left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(16,1fr);gap:6px;width:82%}
.candle{height:44px;width:12px;background:linear-gradient(180deg,#87cefa,#4169e1);border-radius:6px;position:relative;justify-self:center;border:1px solid rgba(255,255,255,.4)}
.flame{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:10px;height:14px;background:radial-gradient(circle at 50% 40%,#fffacd 0%,#ffd700 60%,#ff8c00 100%);border-radius:50%;box-shadow:0 0 12px #ffa500;animation:flicker .9s infinite}
@keyframes flicker{0%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(.8)}100%{transform:translateX(-50%) scale(1)}}
.fireworks{width:100%;height:220px;border-radius:12px;background:transparent;filter:contrast(1.2) saturate(1.1)}
.wish-input .el-textarea__inner{background:rgba(20,24,40,.85);color:#e6f0ff;border:1px solid rgba(147,197,253,.35);box-shadow:0 0 12px rgba(147,197,253,.25)}
.wish-actions{margin-top:10px;display:flex;gap:10px}
.spread:before{content:"";position:absolute;inset:-10% -10%;background:radial-gradient(3px 3px at 20% 30%,rgba(255,255,255,.5),transparent 60%),radial-gradient(2px 2px at 80% 20%,rgba(255,255,255,.35),transparent 70%),radial-gradient(2px 2px at 60% 70%,rgba(255,255,255,.4),transparent 70%);animation:twinkle 6s infinite alternate;pointer-events:none}
@keyframes twinkle{0%{opacity:.2}100%{opacity:.6}}

@media (max-width: 1024px){
  .main{gap:16px}
}

@media (max-width: 768px){
  .spread{height:clamp(420px,80vw,680px)}
  .page-inner{gap:10px}
}

@media (max-width: 480px){
  .main{gap:12px}
  .spread{width:calc(100vw - 12px);height:clamp(420px,95vw,620px)}
  .candles{gap:4px}
}