/* Instant loading indicator - shows before JS loads */
#appLoader{position:fixed;top:0;left:0;right:0;bottom:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#f0eaf5,#e4daf0 50%,#ece5f5);z-index:99999;transition:opacity .5s ease-out}

/* Envelope animation */
#appLoader .env-wrap{position:relative;width:80px;height:64px;perspective:200px}
#appLoader .env-body{width:80px;height:50px;background:linear-gradient(160deg,#f5f0fa,#ece5f5);border:1.5px solid rgba(160,130,200,.3);border-radius:0 0 6px 6px;position:absolute;bottom:0;box-shadow:0 4px 20px rgba(120,80,180,.1)}
#appLoader .env-flap{width:80px;height:40px;position:absolute;top:0;left:0;transform-origin:top center;transform:rotateX(0deg);transition:transform .6s cubic-bezier(.4,0,.2,1) .2s;z-index:2}
#appLoader .env-flap::before{content:'';position:absolute;top:0;left:0;right:0;height:100%;background:linear-gradient(160deg,#ebe0f5,#ddd0f0);clip-path:polygon(0 0,50% 100%,100% 0);border:1.5px solid rgba(160,130,200,.3);border-top:none}
#appLoader .env-letter{width:68px;height:42px;background:#fff;position:absolute;bottom:8px;left:6px;border-radius:3px;box-shadow:0 2px 8px rgba(120,80,180,.08);transform:translateY(0);transition:transform .7s cubic-bezier(.4,0,.2,1);z-index:1}
#appLoader .env-letter::before{content:'';position:absolute;top:10px;left:12px;right:12px;height:2px;background:rgba(160,130,200,.2);box-shadow:0 8px 0 rgba(160,130,200,.15),0 16px 0 rgba(160,130,200,.1)}
#appLoader .env-seal{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#a080c0,#8060a0);box-shadow:0 1px 4px rgba(100,60,160,.2);z-index:3}

/* Phase 1: envelope appears (0-1s) */
#appLoader.phase1 .env-wrap{animation:envAppear .6s ease-out both}

/* Phase 2: flap opens (1-2s) */
#appLoader.phase2 .env-flap{transform:rotateX(180deg)}
#appLoader.phase2 .env-letter{transform:translateY(-18px)}

/* Phase 3: letter rises out (2-3s) */
#appLoader.phase3 .env-flap{transform:rotateX(180deg)}
#appLoader.phase3 .env-letter{transform:translateY(-30px);animation:letterRise .5s ease-out both}

/* Text animation */
#appLoader .loader-text{margin-top:28px;color:#7a5a9a;font-size:14px;letter-spacing:4px;opacity:0;transition:opacity .3s;font-family:'Noto Serif SC',serif}
#appLoader.phase1 .loader-text{opacity:1;animation:loaderPulse 1.5s ease-in-out infinite}

/* Dots animation */
#appLoader .loader-dots{display:inline-block;min-width:20px}
#appLoader .loader-dots::after{content:'';animation:dots 1.5s steps(4,end) infinite}

/* Floating particles */
#appLoader .particles{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none}
#appLoader .particle{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(160,130,200,.15);animation:particleFloat 3s ease-in-out infinite}
#appLoader .particle:nth-child(1){left:20%;top:30%;animation-delay:0s;animation-duration:3.5s}
#appLoader .particle:nth-child(2){left:70%;top:20%;animation-delay:.5s;animation-duration:2.8s;width:3px;height:3px}
#appLoader .particle:nth-child(3){left:40%;top:70%;animation-delay:1s;animation-duration:3.2s;width:5px;height:5px;background:rgba(160,130,200,.1)}
#appLoader .particle:nth-child(4){left:80%;top:60%;animation-delay:1.5s;animation-duration:2.5s}
#appLoader .particle:nth-child(5){left:15%;top:55%;animation-delay:.8s;animation-duration:3s;width:3px;height:3px}
#appLoader .particle:nth-child(6){left:55%;top:80%;animation-delay:1.2s;animation-duration:2.6s;width:6px;height:6px;background:rgba(160,130,200,.08)}

@keyframes envAppear{from{opacity:0;transform:scale(.7) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes letterRise{from{transform:translateY(-18px)}to{transform:translateY(-30px)}}
@keyframes loaderPulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
@keyframes particleFloat{0%,100%{transform:translateY(0) scale(1);opacity:.3}50%{transform:translateY(-20px) scale(1.3);opacity:.7}}

.app-ready #appLoader{opacity:0;pointer-events:none;display:none!important}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;font-family:'Noto Serif SC',serif}
.letter-page{width:100%;height:100%;display:flex;flex-direction:column;position:relative}
.envelope-top{padding:16px 24px 12px;position:relative;box-shadow:0 4px 16px rgba(0,0,0,.15);z-index:2}
.envelope-top .flap-deco{position:absolute;top:0;left:0;right:0;height:6px}
.envelope-top .stripe-bar{position:absolute;bottom:0;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0px,rgba(0,0,0,.08) 4px,transparent 4px,transparent 8px)}
.envelope-top .stripe-bar-top{position:absolute;top:0;bottom:auto;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0px,rgba(0,0,0,.08) 4px,transparent 4px,transparent 8px)}
.envelope-recipient{font-size:20px;font-weight:400;margin-bottom:0px;margin-top:-7px;display:flex;align-items:center;gap:6px}
.envelope-recipient .label{font-size:20px;opacity:.7}
.envelope-recipient .name{font-weight:400}
.envelope-edit-btn{position:absolute;top:9px;right:24px;border:none;padding:7px 14px;border-radius:16px;font-size:12px;cursor:pointer;font-family:'Noto Serif SC',serif;transition:all .3s;z-index:3}
.letter-divider{display:flex;align-items:center;gap:8px;padding:10px 24px 6px}
.divider-line{flex:1;height:1px}
.divider-icon{font-size:12px;opacity:.5}
.letter-paper{flex:1;padding:24px 28px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative}
.letter-paper::-webkit-scrollbar{width:3px}
.letter-paper::-webkit-scrollbar-thumb{background:#c4a882;border-radius:3px}
.letter-content-text{font-size:16px;line-height:2;word-break:break-word;min-height:200px;text-align:justify;white-space:pre-wrap;padding:8px 4px 0}
.paper-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;display:none;background:rgba(255,255,255,.7)}
.letter-paper.has-overlay .letter-content-text{position:relative;z-index:1}
.envelope-bottom{padding:12px 24px 16px;position:relative;box-shadow:0 -4px 16px rgba(0,0,0,.1);z-index:2}
.envelope-bottom .stripe-bar{position:absolute;top:0;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0px,rgba(0,0,0,.08) 4px,transparent 4px,transparent 8px)}
.envelope-bottom .stripe-bar-bottom{position:absolute;top:auto;bottom:0;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0px,rgba(0,0,0,.08) 4px,transparent 4px,transparent 8px)}
.envelope-sender{font-size:19px;font-weight:400;text-align:right;margin-bottom:2px;display:flex;align-items:center;justify-content:flex-end;gap:6px}
.envelope-sender .label{font-size:19px;opacity:.7}
.envelope-sender .name{font-weight:400}
.envelope-date{font-size:16px;opacity:.7;text-align:right}

/* Classic */
.theme-classic .envelope-top{background:linear-gradient(135deg,#d4a574,#c49564 40%,#b88554)}
.theme-classic .envelope-top .flap-deco{background:linear-gradient(90deg,#a87540,#c49564,#a87540)}
.theme-classic .envelope-bottom{background:linear-gradient(135deg,#d4a574,#c49564 40%,#b88554)}
.theme-classic .envelope-edit-btn{background:rgba(58,32,16,.75);color:#f5e6d3}
.theme-classic .envelope-edit-btn:hover{background:rgba(58,32,16,.95)}
.theme-classic .letter-paper{background-color:#faf5eb;}
.theme-classic .letter-divider{background:#faf5eb}
.theme-classic .divider-line{background:repeating-linear-gradient(90deg,#c4a882 0px,#c4a882 8px,transparent 8px,transparent 12px)}
.theme-classic .letter-content-text{color:#3a2a1a}
.theme-classic .envelope-recipient,.theme-classic .envelope-sender{color:#3a2010}
.theme-classic .envelope-date{color:#3a2010}
.theme-classic .paper-overlay{background:rgba(250,245,235,.78)}

/* Sakura */
.theme-sakura .envelope-top{background:linear-gradient(135deg,#f5b7c5,#e8a0b0 40%,#de8da0)}
.theme-sakura .envelope-top .flap-deco{background:linear-gradient(90deg,#d8809a,#e8a0b0,#d8809a)}
.theme-sakura .envelope-bottom{background:linear-gradient(135deg,#f5b7c5,#e8a0b0 40%,#de8da0)}
.theme-sakura .envelope-edit-btn{background:rgba(100,30,50,.7);color:#fff0f3}
.theme-sakura .envelope-edit-btn:hover{background:rgba(100,30,50,.9)}
.theme-sakura .letter-paper{background-color:#fff5f7;}
.theme-sakura .letter-divider{background:#fff5f7}
.theme-sakura .divider-line{background:repeating-linear-gradient(90deg,#e8b0c0 0px,#e8b0c0 8px,transparent 8px,transparent 12px)}
.theme-sakura .letter-content-text{color:#5a2a3a}
.theme-sakura .envelope-recipient,.theme-sakura .envelope-sender{color:#5a2030}
.theme-sakura .envelope-date{color:#5a2030}
.theme-sakura .paper-overlay{background:rgba(255,245,247,.8)}

/* Starry */
.theme-starry .envelope-top{background:linear-gradient(135deg,#1a1a4e,#2d1b69 40%,#1a1040)}
.theme-starry .envelope-top .flap-deco{background:linear-gradient(90deg,#0d0d2a,#2d1b69,#0d0d2a)}
.theme-starry .envelope-bottom{background:linear-gradient(135deg,#1a1a4e,#2d1b69 40%,#1a1040)}
.theme-starry .envelope-edit-btn{background:rgba(255,255,255,.15);color:#e8d5b7}
.theme-starry .envelope-edit-btn:hover{background:rgba(255,255,255,.3)}
.theme-starry .letter-paper{background-color:#151535;}
.theme-starry .letter-divider{background:#151535}
.theme-starry .divider-line{background:repeating-linear-gradient(90deg,#3a3a6e 0px,#3a3a6e 5px,transparent 5px,transparent 10px)}
.theme-starry .letter-content-text{color:#e8d5b7}
.theme-starry .envelope-recipient,.theme-starry .envelope-sender{color:#e8d5b7}
.theme-starry .envelope-date{color:#b8a890}
.theme-starry .paper-overlay{background:rgba(21,21,53,.8)}

/* Minimal */
.theme-minimal .envelope-top{background:linear-gradient(135deg,#4a4a4a,#3a3a3a 40%,#2a2a2a)}
.theme-minimal .envelope-top .flap-deco{background:linear-gradient(90deg,#1a1a1a,#3a3a3a,#1a1a1a)}
.theme-minimal .envelope-bottom{background:linear-gradient(135deg,#4a4a4a,#3a3a3a 40%,#2a2a2a)}
.theme-minimal .envelope-edit-btn{background:rgba(255,255,255,.2);color:#f0f0f0}
.theme-minimal .envelope-edit-btn:hover{background:rgba(255,255,255,.35)}
.theme-minimal .letter-paper{background-color:#fff;}
.theme-minimal .letter-divider{background:#fff}
.theme-minimal .divider-line{background:repeating-linear-gradient(90deg,#d0d0d0 0px,#d0d0d0 5px,transparent 5px,transparent 10px)}
.theme-minimal .letter-content-text{color:#1a1a1a}
.theme-minimal .envelope-recipient,.theme-minimal .envelope-sender{color:#f0f0f0}
.theme-minimal .envelope-date{color:#ccc}
.theme-minimal .paper-overlay{background:rgba(255,255,255,.82)}

.theme-custom .paper-overlay{background:transparent}

/* Custom bg */
.theme-custom .envelope-top{background:linear-gradient(135deg,rgba(200,180,230,.7),rgba(160,130,200,.5))}
.theme-custom .envelope-top .flap-deco{background:linear-gradient(90deg,rgba(150,130,190,.5),rgba(200,180,230,.6),rgba(150,130,190,.5))}
.theme-custom .envelope-bottom{background:linear-gradient(135deg,rgba(200,180,230,.7),rgba(160,130,200,.5))}
.theme-custom .envelope-edit-btn{background:rgba(0,0,0,.5);color:#f0f0f0}
.theme-custom .envelope-edit-btn:hover{background:rgba(0,0,0,.7)}
.theme-custom .letter-paper{background-color:transparent;}
.theme-custom .letter-divider{background:rgba(200,180,230,.3)}
.theme-custom .divider-line{background:repeating-linear-gradient(90deg,rgba(160,130,200,.4) 0px,rgba(160,130,200,.4) 5px,transparent 5px,transparent 10px)}
.theme-custom .letter-content-text{color:#1a1a1a}
.theme-custom .envelope-recipient,.theme-custom .envelope-sender{color:#2a1840}
.theme-custom .envelope-recipient .label,.theme-custom .envelope-sender .label{color:#5a3a7a}
.theme-custom .envelope-date{color:#5a3a7a}

/* Edit Panel */
.edit-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.3);z-index:100;display:none}
.edit-overlay.active{display:block}

/* ===== Side Layout (v2) ===== */
body.layout-side .edit-panel{top:0!important;bottom:0!important;left:auto!important;right:0!important;width:75vw!important;max-width:380px!important;height:auto!important;border-radius:24px 0 0 24px!important;transform:translateX(100%)!important;box-shadow:-8px 0 32px rgba(0,0,0,.15)!important}
body.layout-side .edit-panel.active{transform:translateX(0)!important}
body.layout-side .edit-panel .edit-panel-footer{border-top:none;margin-top:0}
body.layout-side .edit-panel .edit-panel-footer span::before{content:'◀ '}
body.layout-side .edit-panel .edit-panel-footer span{font-size:13px}
body:not(.layout-side) .edit-panel .edit-panel-footer span::before{content:''}

/* Side close button */
.side-close-btn{position:fixed;top:50%;right:75vw;z-index:102;border-radius:10px 0 0 10px;background:rgba(250,246,240,.9);backdrop-filter:blur(4px);border:1px solid rgba(212,196,168,.4);border-right:none;box-shadow:-2px 0 8px rgba(0,0,0,.08);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;color:#6a5a4a;writing-mode:vertical-rl;letter-spacing:3px;padding:18px 6px;transform:translateY(-50%) translateX(100vw);transition:transform .4s cubic-bezier(.4,0,.2,1),background .2s}
@media(min-width:507px){.side-close-btn{right:calc(100vw - 380px)}}
.side-close-btn:hover{background:rgba(245,238,225,.98)}
body.layout-side .side-close-btn.visible{transform:translateY(-50%) translateX(0)}

/* ===== Custom Dropdown (replaces native select) ===== */
.cdrop{position:relative;width:100%;user-select:none}
.cdrop{position:relative;overflow:visible}
.cdrop-btn{width:100%;padding:10px 12px;border:1px solid #d4c4a8;border-radius:10px;font-size:14px;font-family:'Noto Serif SC',serif;background:#fff;color:#3a2a1a;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:border .3s}
.cdrop-btn>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.cdrop-btn:focus,.cdrop-btn:hover{border-color:#8a6a4a}
.cdrop-btn .cdrop-arrow{font-size:10px;color:#aaa;transition:transform .2s}
.cdrop.open .cdrop-arrow{transform:rotate(180deg)}
.cdrop-list{display:none;position:absolute;top:100%;left:0;right:0;z-index:1000;background:#fff;border:1px solid #d4c4a8;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);margin-top:4px;max-height:200px;overflow-y:auto;overscroll-behavior:contain}
.cdrop.open .cdrop-list{display:block}
.cdrop-item{padding:10px 12px;font-size:14px;font-family:'Noto Serif SC',serif;color:#3a2a1a;cursor:pointer;transition:background .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdrop-item:hover{background:#faf6f0}
.cdrop-item.active{background:#f5efe5;color:#8a6a4a;font-weight:600}

/* Font picker (existing) special style */
.cdrop-list .fp-item{padding:8px 12px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background .15s}
.cdrop-list .fp-item:hover{background:#faf6f0}
.cdrop-list .fp-item.active{background:#f5efe5}
.cdrop-list .fp-name{font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cdrop-list .fp-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.cdrop-list .fp-bar-wrap{width:52px;height:4px;background:#eee;border-radius:2px;overflow:hidden}
.cdrop-list .fp-bar{height:100%;border-radius:2px;transition:width .3s}
.cdrop-list .fp-status{font-size:10px;min-width:32px;text-align:right}
.cdrop-list .fp-status.ready{color:#4caf50}
.cdrop-list .fp-status.loading{color:#ff9800}
.edit-panel{position:fixed;top:0;left:0;right:0;height:75vh;z-index:101;background:rgba(250,246,240,.3);border-radius:0 0 24px 24px;box-shadow:0 8px 32px rgba(0,0,0,.15);overflow-y:auto;padding:20px 10px 0 10px;transform:translateY(-100%);transition:transform .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);will-change:transform}
.edit-panel.active{transform:translateY(0)}
.edit-panel h2{font-size:18px;color:#3a2a1a;margin-bottom:16px;text-align:center;font-weight:600}
.form-group{margin-bottom:14px;position:relative}
.form-group label{display:block;font-size:13px;color:#3a2a1a;margin-bottom:4px;font-weight:600}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:10px 12px;border:1px solid #d4c4a8;border-radius:10px;font-size:14px;font-family:'Noto Serif SC',serif;background:#fff;color:#3a2a1a;outline:none;transition:border .3s}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:#8a6a4a}
.form-group textarea{min-height:181px;resize:vertical;line-height:1.8}
.form-row{display:flex;gap:10px}
.form-row .form-group{flex:1}
.fp-item{padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .15s;border-bottom:1px solid #f0ebe2}
.fp-item:last-child{border-bottom:none}
.fp-item:hover{background:#faf6f0}
.fp-item.active{background:#f5efe5}
.fp-name{flex:1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-bar-wrap{width:52px;height:4px;background:#eee;border-radius:2px;overflow:hidden;flex-shrink:0}
.fp-bar{height:100%;border-radius:2px;transition:width .3s ease}
.fp-status{font-size:10px;width:32px;text-align:right;flex-shrink:0;color:#aaa}
.fp-status.ready{color:#4caf50}
.fp-status.loading{color:#ff9800}
.bg-upload-area{border:2px dashed #d4c4a8;border-radius:12px;padding:16px;text-align:center;cursor:pointer;transition:all .3s;min-height:80px;display:none;align-items:center;justify-content:center;background:transparent}
.bg-upload-area.visible{display:flex}
.bg-upload-area:hover{border-color:#8a6a4a;background:rgba(138,106,74,.05)}
.bg-upload-area .upload-text{color:#8a7a6a;font-size:13px}
.bg-upload-area input[type="file"]{display:none}
.bg-upload-area .preview-thumb{max-height:60px;border-radius:6px}
.seal-btn{width:calc(100% - 16px);padding:10px;background:linear-gradient(135deg,#5a3a2a,#8a6a4a);color:#f5e6d3;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;font-family:'Noto Serif SC',serif;transition:all .3s;margin:0 auto;display:block}
.seal-btn:hover{transform:scale(1.02);box-shadow:0 4px 16px rgba(90,58,42,.3)}
.seal-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.edit-panel-footer{flex-shrink:0;text-align:center;padding:14px 0 20px 0;cursor:pointer;color:#3a2a1a;font-size:13px;font-family:'Noto Serif SC',serif;border-top:none;margin-top:auto;transition:color .2s}
.edit-panel-footer:hover{color:#8a6a4a}
.edit-panel-footer span{display:inline-flex;align-items:center;gap:4px}
.date-picker-trigger{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid #d4c4a8;border-radius:10px;background:#fff;cursor:pointer;transition:border .3s;min-height:42px;font-size:14px;color:#3a2a1a;font-family:'Noto Serif SC',serif;position:relative}
.date-picker-trigger:hover{border-color:#8a6a4a}
.date-picker-trigger.active{border-color:#8a6a4a;box-shadow:0 0 0 2px rgba(138,106,74,.15)}
.date-picker-label-empty{color:#bba}
.date-picker-icon{font-size:16px;opacity:.7}
.calendar-popup{display:none;position:absolute;left:0;right:0;bottom:100%;margin-bottom:6px;background:#fff;border-radius:14px;box-shadow:0 -4px 24px rgba(0,0,0,.12);padding:14px;z-index:200;border:1px solid #e8ddd0;animation:calFadeIn .2s ease}
.calendar-popup.active{display:block}
@keyframes calFadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 4px}
.cal-title{font-size:15px;font-weight:600;color:#3a2a1a;font-family:'Noto Serif SC',serif}
.cal-nav{width:32px;height:32px;border:none;background:#faf6f0;border-radius:50%;font-size:18px;cursor:pointer;color:#8a6a4a;transition:all .2s;display:flex;align-items:center;justify-content:center}
.cal-nav:hover{background:#f0e8d8}
.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:12px;color:#8a7a6a;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid #f0e8d8}
.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-day{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:13px;border-radius:50%;cursor:pointer;transition:all .15s;color:#3a2a1a;border:none;background:none;font-family:'Noto Serif SC',serif}
.cal-day:hover{background:#faf0e0}
.cal-day.other-month{color:#ccc}
.cal-day.today{font-weight:600;color:#8a6a4a;border:1.5px solid #d4c4a8}
.cal-day.selected{background:#8a6a4a;color:#fff;font-weight:600}
.cal-day.selected:hover{background:#7a5a3a}
.calendar-footer{display:flex;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:1px solid #f0e8d8}
.cal-today,.cal-clear{border:none;background:none;font-size:12px;cursor:pointer;padding:4px 12px;border-radius:6px;font-family:'Noto Serif SC',serif;transition:all .2s}
.cal-today{color:#8a6a4a}.cal-today:hover{background:#faf0e0}
.cal-clear{color:#c66}.cal-clear:hover{background:#fff0f0}

/* Reading Page */
.read-page{width:100%;height:100%;display:none;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#f5f0e8,#ede6d8 50%,#f0ebe2);position:fixed;top:0;left:0;z-index:200;box-sizing:border-box;padding:8px}
.read-page::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border:6px solid var(--rp-border,rgba(180,160,130,.3));pointer-events:none;z-index:10}
.read-page::after{content:'';position:absolute;top:9px;left:9px;right:9px;bottom:9px;border:1.5px solid var(--rp-border-inner,rgba(180,160,130,.2));pointer-events:none;z-index:10}
.read-page.active{display:flex}
.letter-envelope-icon{width:220px;height:160px;position:relative;cursor:pointer;margin-bottom:30px;animation:float 3s ease-in-out infinite;perspective:800px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.envelope-icon-body{width:100%;height:100%;background:var(--env-body,linear-gradient(160deg,#faf6f0,#f0ebe2));border:1.5px solid var(--env-border,rgba(180,160,130,.5));border-radius:4px;position:relative;box-shadow:0 6px 24px rgba(0,0,0,.12)}
.envelope-icon-body::before{content:'';position:absolute;top:0;left:0;right:0;height:70%;background:var(--env-flap,rgba(245,238,225,.95));clip-path:polygon(0 0,50% 100%,100% 0);z-index:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.06))}
.envelope-icon-body::after{content:'';position:absolute;top:0;left:0;right:0;height:70%;background:var(--env-flap2,rgba(235,225,210,.9));clip-path:polygon(0 0,50% 100%,100% 0);z-index:0}
.envelope-icon-flap{display:none}
.envelope-icon-seal{position:absolute;bottom:28%;left:50%;transform:translateX(-50%);width:36px;height:36px;background:linear-gradient(135deg,#c4956a,#a87850);border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:3;border:2px solid rgba(255,255,255,.3)}
.envelope-icon-heart{position:absolute;bottom:30%;left:50%;transform:translateX(-50%);font-size:16px;z-index:4}
.envelope-icon-body .envelope-lines{position:absolute;bottom:18px;left:30px;right:30px;z-index:2}
.envelope-icon-body .envelope-lines span{display:block;height:2px;background:rgba(180,160,130,.25);border-radius:1px;margin-bottom:8px}
.envelope-icon-body .envelope-lines span:last-child{width:60%}
.open-text{color:#6a5a4a;font-size:18px;font-weight:600;writing-mode:vertical-rl;letter-spacing:6px;margin-bottom:30px;cursor:pointer}
.password-panel{display:none;flex-direction:column;align-items:center;gap:12px}
.password-panel.active{display:flex}
.password-panel input{width:200px;padding:12px 16px;border:2px solid var(--input-border,rgba(180,160,130,.5));border-radius:12px;background:var(--input-bg,rgba(255,255,255,.6));color:var(--input-color,#3a2a1a);font-size:16px;text-align:center;letter-spacing:4px;font-family:'Noto Serif SC',serif;outline:none}
.password-panel input::placeholder{color:rgba(120,100,80,.4);letter-spacing:2px}
.password-panel input:focus{border-color:#e8b584;background:rgba(255,255,255,.15)}
.unlock-btn{padding:10px 32px;background:linear-gradient(135deg,#c4956a,#a87850);color:#fff;border:none;border-radius:20px;font-size:14px;font-weight:600;cursor:pointer;font-family:'Noto Serif SC',serif;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.error-msg{color:#c47070;font-size:13px;text-align:center;max-width:260px;line-height:1.5;min-height:20px}

/* Sealed View */
.sealed-view{width:100%;height:100%;display:none;position:fixed;top:0;left:0;z-index:300;flex-direction:column}
.sealed-view.active{display:flex}
.sealed-envelope-top{padding:16px 24px 12px;position:relative;box-shadow:0 4px 16px rgba(0,0,0,.15);z-index:2}
.sealed-envelope-top .flap-deco{position:absolute;top:0;left:0;right:0;height:6px}
.sealed-envelope-top .stripe-bar{position:absolute;bottom:0;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0px,rgba(0,0,0,.08) 4px,transparent 4px,transparent 8px)}
.sealed-envelope-top .stripe-bar-top{position:absolute;top:0;bottom:auto;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0px,rgba(0,0,0,.08) 4px,transparent 4px,transparent 8px)}
.sealed-recipient{font-size:18px;font-weight:600}
.sealed-divider{display:flex;align-items:center;gap:8px;padding:10px 24px 6px}
.sealed-divider .line{flex:1;height:1px}
.sealed-divider .icon{font-size:12px;opacity:.5}
.theme-classic .sealed-divider,.theme-classic .sealed-divider-bottom{background:#faf5eb}
.theme-classic .sealed-divider .line,.theme-classic .sealed-divider-bottom .line{background:repeating-linear-gradient(90deg,#c4a882 0px,#c4a882 8px,transparent 8px,transparent 12px)}
.theme-sakura .sealed-divider,.theme-sakura .sealed-divider-bottom{background:#fff5f7}
.theme-sakura .sealed-divider .line,.theme-sakura .sealed-divider-bottom .line{background:repeating-linear-gradient(90deg,#e8b0c0 0px,#e8b0c0 8px,transparent 8px,transparent 12px)}
.theme-starry .sealed-divider,.theme-starry .sealed-divider-bottom{background:#151535}
.theme-starry .sealed-divider .line,.theme-starry .sealed-divider-bottom .line{background:repeating-linear-gradient(90deg,#3a3a6e 0px,#3a3a6e 5px,transparent 5px,transparent 10px)}
.theme-minimal .sealed-divider,.theme-minimal .sealed-divider-bottom{background:#fff}
.theme-minimal .sealed-divider .line,.theme-minimal .sealed-divider-bottom .line{background:repeating-linear-gradient(90deg,#d0d0d0 0px,#d0d0d0 5px,transparent 5px,transparent 10px)}
.theme-ocean .envelope-top{background:linear-gradient(135deg,#a8d8f0,#8ec8e8 40%,#7bbce0)}
.theme-ocean .envelope-top .flap-deco{background:linear-gradient(90deg,#6aadd8,#8ec8e8,#6aadd8)}
.theme-ocean .envelope-bottom{background:linear-gradient(135deg,#a8d8f0,#8ec8e8 40%,#7bbce0)}
.theme-ocean .envelope-edit-btn{background:rgba(255,255,255,.4);color:#1a5a8a}
.theme-ocean .envelope-edit-btn:hover{background:rgba(255,255,255,.6)}
.theme-ocean .letter-paper{background-color:#f0f8ff}
.theme-ocean .letter-divider{background:#f0f8ff}
.theme-ocean .divider-line{background:repeating-linear-gradient(90deg,#b8d8f0 0px,#b8d8f0 6px,transparent 6px,transparent 10px)}
.theme-ocean .letter-content-text{color:#1a4a6a}
.theme-ocean .envelope-recipient,.theme-ocean .envelope-sender{color:#1a4a6a}
.theme-ocean .envelope-date{color:#4a8aaa}
.theme-ocean .paper-overlay{background:rgba(240,248,255,.78)}
.theme-ocean .sealed-divider,.theme-ocean .sealed-divider-bottom{background:#f0f8ff}
.theme-ocean .sealed-divider .line,.theme-ocean .sealed-divider-bottom .line{background:repeating-linear-gradient(90deg,#b8d8f0 0px,#b8d8f0 6px,transparent 6px,transparent 10px)}
.theme-custom .sealed-divider,.theme-custom .sealed-divider-bottom{background:rgba(200,180,230,.3)}
.theme-custom .sealed-divider .line,.theme-custom .sealed-divider-bottom .line{background:repeating-linear-gradient(90deg,rgba(160,130,200,.6) 0px,rgba(160,130,200,.6) 5px,transparent 5px,transparent 10px)}
.sealed-paper{flex:1;padding:12px 28px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative}
.sealed-paper::-webkit-scrollbar{width:3px}
.sealed-paper::-webkit-scrollbar-thumb{background:#c4a882;border-radius:3px}
.sealed-paper .paper-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:none;z-index:0;background:rgba(255,255,255,.7)}
.sealed-paper.has-overlay .sealed-content{position:relative;z-index:1}
.sealed-content{font-size:16px;line-height:2;word-break:break-word;text-align:justify;white-space:pre-wrap}
.sealed-divider-bottom{display:flex;align-items:center;gap:8px;padding:6px 24px 8px}
.sealed-divider-bottom .line{flex:1;height:1px}
.sealed-divider-bottom .icon{font-size:12px;opacity:.5}
.sealed-envelope-bottom{padding:16px 24px 20px;position:relative;box-shadow:0 -4px 16px rgba(0,0,0,.1);z-index:2}
.sealed-envelope-bottom .stripe-bar{position:absolute;top:0;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0px,rgba(0,0,0,.08) 4px,transparent 4px,transparent 8px)}
.sealed-envelope-bottom .stripe-bar-bottom{position:absolute;top:auto;bottom:0;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0px,rgba(0,0,0,.08) 4px,transparent 4px,transparent 8px)}
.sealed-sender{font-size:17px;font-weight:600;text-align:right;margin-bottom:2px}
.sealed-date{font-size:14px;opacity:.7;text-align:right}

.early-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#2a1f15,#3a2a1a);z-index:400;flex-direction:column;align-items:center;justify-content:center;color:#d4a574;text-align:center;padding:40px}
.early-overlay.active{display:flex}
.early-overlay .icon{font-size:48px;margin-bottom:20px}
.early-overlay .msg{font-size:16px;line-height:1.8;max-width:280px}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .6s ease-out}

/* ===== Magic Open Animation ===== */
@keyframes sealCrack{
  0%{transform:scale(1);opacity:1}
  30%{transform:scale(1.2);opacity:1}
  60%{transform:scale(1.4) rotate(15deg);opacity:.8}
  100%{transform:scale(0) rotate(45deg);opacity:0}
}
@keyframes envelopeOpenTop{
  0%{transform:rotateX(0)}
  100%{transform:rotateX(-180deg)}
}
@keyframes glowBurst{
  0%{transform:scale(.3);opacity:1;filter:blur(0)}
  50%{opacity:.8}
  100%{transform:scale(3);opacity:0;filter:blur(20px)}
}
@keyframes sparkle{
  0%{transform:translate(0,0) scale(0);opacity:0}
  20%{transform:translate(var(--sx),var(--sy)) scale(1);opacity:1}
  60%{opacity:1}
  100%{transform:translate(calc(var(--sx)*2.5),calc(var(--sy)*2.5)) scale(0);opacity:0}
}
@keyframes letterRise{
  0%{transform:translateY(60px) scale(.9);opacity:0}
  40%{opacity:1}
  100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes contentFade{
  0%{opacity:0;filter:blur(4px)}
  100%{opacity:1;filter:blur(0)}
}
@keyframes lightRay{
  0%{opacity:0;transform:scaleY(0)}
  30%{opacity:.6}
  100%{opacity:0;transform:scaleY(1)}
}

.magic-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);pointer-events:none;opacity:0;transition:opacity .3s}
.magic-overlay.active{opacity:1}
.magic-seal{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;position:relative;z-index:2}
.magic-seal.cracking{animation:sealCrack .8s cubic-bezier(.6,-.28,.74,.05) forwards}
.magic-glow{position:absolute;width:60px;height:60px;border-radius:50%;z-index:1}
.magic-glow.burst{animation:glowBurst 1s ease-out forwards}
.magic-spark{position:absolute;width:6px;height:6px;border-radius:50%;z-index:3;opacity:0}
.magic-spark.fly{animation:sparkle 1s ease-out forwards;animation-delay:var(--delay)}
.magic-light{position:absolute;top:50%;left:50%;width:2px;height:100vh;transform-origin:top center;z-index:1;opacity:0;border-radius:2px}
.magic-light.ray{animation:lightRay .8s ease-out forwards;animation-delay:var(--delay)}
/* Preload all fonts */
@font-face{font-family:'微风体';src:url('/fonts/breeze.woff2?v=4') format('woff2');font-display:swap}
@font-face{font-family:'斐斐体';src:url('/fonts/feifei.woff2?v=4') format('woff2');font-display:swap}
@font-face{font-family:'盛世繁花体';src:url('/fonts/bloom.woff2?v=4') format('woff2');font-display:swap}
@font-face{font-family:'喜鹊燕书体';src:url('/fonts/xq_yan.woff2?v=4') format('woff2');font-display:swap}
@font-face{font-family:'硬笔行书体';src:url('/fonts/hardpen.woff2?v=4') format('woff2');font-display:swap}
@font-face{font-family:'故人以北体';src:url('/fonts/pastlove.woff2?v=4') format('woff2');font-display:swap}
@font-face{font-family:'星星阳光体';src:url('/fonts/starsun.woff2?v=4') format('woff2');font-display:swap}
@font-face{font-family:'爱是温柔体';src:url('/fonts/loveu.woff2?v=4') format('woff2');font-display:swap}
@font-face{font-family:'孤独琴键体';src:url('/fonts/lonesome.woff2?v=4') format('woff2');font-display:swap}

/* Fix button active highlight overflow - use :active for controlled highlight */
.seal-btn,.unlock-btn,.envelope-edit-btn,.cal-nav,.cal-day,.cal-today,.cal-clear,.edit-panel-footer,.date-picker-trigger,.cdrop-btn,.cdrop-item,.side-close-btn,.open-text,#modalBtn{-webkit-tap-highlight-color:transparent}
.seal-btn:active,.unlock-btn:active,.envelope-edit-btn:active{box-shadow:inset 0 0 0 2px rgba(0,200,255,0.5)}
.cal-nav:active,.cal-day:active,.cal-today:active,.cal-clear:active{box-shadow:inset 0 0 0 2px rgba(0,200,255,0.5)}
.date-picker-trigger:active,.cdrop-btn:active,.cdrop-item:active,.side-close-btn:active,#modalBtn:active{box-shadow:inset 0 0 0 2px rgba(0,200,255,0.5)}
.open-text:active{color:#00c8ff;text-shadow:0 0 10px rgba(0,200,255,0.6)}


/* Music selector */
.music-selector{display:flex;align-items:center;gap:8px;margin-top:4px}
.music-preview-btn{width:32px;height:32px;border:1px solid #d4c4a8;border-radius:50%;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:all .2s}
.music-preview-btn:hover{border-color:#8a6a4a;background:#faf6f0}
.music-preview-btn.playing{background:#f5efe5;border-color:#8a6a4a}

/* Music item with preview */
.music-item{padding:10px 12px;font-size:14px;font-family:'Noto Serif SC',serif;color:#3a2a1a;cursor:pointer;transition:background .15s;display:flex;align-items:center;justify-content:space-between}
.music-item:hover{background:#faf6f0}
.music-item.active{background:#f5efe5;color:#8a6a4a;font-weight:600}
.music-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-item .music-preview-btn{width:28px;height:28px;border:1px solid #d4c4a8;border-radius:50%;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;transition:all .2s;padding:0;line-height:1}
.music-item .music-preview-btn:hover{border-color:#8a6a4a;background:#faf6f0}
.music-item .music-preview-btn.playing{background:#f5efe5;border-color:#8a6a4a;color:#8a6a4a}
/* BGM toggle on sealed view */
.bgm-toggle{position:fixed;top:10px;right:26px;z-index:200;width:32px;height:32px;border-radius:50%;border:1px solid rgba(180,160,130,.3);background:rgba(255,255,255,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.08);transition:all .3s;padding:0;line-height:1}
.bgm-toggle:hover{background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.bgm-toggle:active{transform:scale(.9)}
.bgm-toggle svg{width:16px;height:16px;fill:#8b7355;display:block;margin:auto}
@keyframes modalIn{from{opacity:0;transform:scale(.85) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}