@import url('fonts.css');
:root{--ink:#243d2c;--muted:#657368;--green:#3f633f;--deep:#294c36;--sage:#e6edda;--cream:#faf8f1;--paper:#fffefb;--line:#dce3d6;--purple:#795586;--lavender:#f0e8f4;--amber:#936022;--red:#a64040;--shadow:0 8px 30px #203d2d09;--radius:22px;--nav:80px;font-family:'Nunito Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:#ecefe7;font-size:16px;line-height:1.55}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}a{color:var(--deep)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #9467aa;outline-offset:3px}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.25}h1{font-size:1.9rem;letter-spacing:-.8px}h2{font-size:1.22rem;letter-spacing:-.3px}h3{font-size:1.05rem}p+p{margin-top:12px}small,.small{font-size:.83rem}.muted{color:var(--muted)}.serif{font-family:Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:-.7px}.eyebrow{font-size:.69rem;letter-spacing:2.4px;text-transform:uppercase;font-weight:800;color:var(--green)}.icon{width:22px;height:22px;flex-shrink:0;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.row{display:flex;align-items:center;gap:12px}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.stack{display:grid;gap:16px}.gap-sm{gap:8px}.grow{flex:1;min-width:0}.text-center{text-align:center}.spacer{margin-top:20px}.shell{max-width:620px;min-height:100dvh;margin:auto;background:var(--cream);box-shadow:0 0 70px #1830210c}.topbar{height:76px;padding:14px 22px;position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;background:#faf8f1f5;border-bottom:1px solid #dce3d6b0;backdrop-filter:blur(14px)}.brand{border:0;background:none;text-align:left;padding:0;display:flex;gap:10px;align-items:center;color:var(--ink)}.brand strong{font-family:Georgia,serif;font-size:1.15rem;font-weight:600}.brand small{display:block;font-size:.65rem;color:var(--muted);letter-spacing:1px}.brandmark{width:42px;height:42px;display:grid;place-items:center;border:1px solid #cad7bd;border-radius:15px;background:var(--sage);font-size:24px}.iconbtn{border:1px solid var(--line);background:var(--paper);border-radius:14px;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}.main{padding:24px 22px calc(var(--nav) + 36px + env(safe-area-inset-bottom));min-height:80vh}.pagehead{margin-bottom:24px}.pagehead .eyebrow{margin-bottom:8px}.pagehead p{margin-top:9px;color:var(--muted);font-size:.94rem}.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}.card+.card{margin-top:16px}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.card-heading>div{min-width:0}.card .body{margin-top:12px}.tile-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:14px;background:var(--lavender);color:var(--purple);flex-shrink:0}.btn{min-height:48px;border:1px solid var(--green);padding:11px 18px;border-radius:14px;display:inline-flex;justify-content:center;align-items:center;gap:9px;text-decoration:none;font-weight:750;line-height:1.4;background:var(--green);color:white}.btn.secondary{background:transparent;color:var(--deep);border-color:#cad5bf}.btn.light{background:var(--sage);color:var(--deep);border-color:transparent}.btn.danger{background:#fff0ef;color:var(--red);border-color:#ecd1cd}.btn.small{min-height:44px;font-size:.84rem;padding:9px 13px}.btn.full{width:100%}.textbtn{border:0;background:none;color:var(--deep);font-weight:750;padding:8px 0;min-height:44px;text-decoration:underline;text-underline-offset:4px}.pill{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;background:var(--sage);color:var(--green);border-radius:30px;font-size:.72rem;font-weight:800;line-height:1.4}.pill.purple{background:var(--lavender);color:var(--purple)}.pill.amber{background:#fbefd9;color:var(--amber)}.pill.gray{background:#edf0ec;color:var(--muted)}.pill.red{background:#f8e4e2;color:var(--red)}.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,620px);z-index:80;display:grid;grid-template-columns:repeat(5,1fr);padding:9px 8px calc(9px + env(safe-area-inset-bottom));background:#fffefbf7;backdrop-filter:blur(16px);border-top:1px solid var(--line)}.nav button{min-width:0;min-height:56px;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:.64rem;color:var(--muted);border-radius:13px;font-weight:750}.nav button.active{color:var(--green);background:var(--sage)}.nav .icon{width:23px;height:23px}.notice{border-radius:15px;background:var(--sage);padding:13px 15px;color:#3e593a;font-size:.86rem;border:1px solid #d6e0c6}.notice.amber{background:#fbf0dd;color:#7b592a;border-color:#ecdcbe}.notice.error{background:#fae9e6;color:#8c3632;border-color:#efc9c3}.notice.purple{background:var(--lavender);color:#654773;border-color:#e0d4e6}.notice .icon{width:19px;height:19px}.empty{text-align:center;padding:28px 18px;color:var(--muted)}.empty .icon{width:34px;height:34px;margin-bottom:12px;color:var(--green)}.empty h3{color:var(--ink);margin-bottom:6px}.empty p{font-size:.9rem}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;gap:16px;text-align:center;padding:24px}.loading .brandmark{animation:breathe 2s infinite}.skip{position:absolute;top:-70px;left:12px;background:white;padding:10px;z-index:500}.skip:focus{top:10px}.avatar{display:inline-block;position:relative;overflow:hidden;background-image:url('/images/avatars.png');background-size:300% 200%;width:150px;height:150px;flex-shrink:0}.avatar.v0{background-position:0 0}.avatar.v1{background-position:50% 0}.avatar.v2{background-position:100% 0}.avatar.v3{background-position:0 100%}.avatar.v4{background-position:50% 100%}.avatar.v5{background-position:100% 100%}.avatar.mini{width:40px;height:40px;border-radius:50%;background-color:var(--sage);background-size:660% 440%;background-position:9% 0}.avatar.mini.v1{background-position:50% 0}.avatar.mini.v2{background-position:91% 0}.avatar.mini.v3{background-position:9% 59%}.avatar.mini.v4{background-position:50% 59%}.avatar.mini.v5{background-position:91% 59%}.avatar-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.avatar-option{border:1px solid var(--line);border-radius:15px;background:var(--cream);padding:7px 2px;color:var(--ink);font-size:.7rem;text-align:center}.avatar-option .avatar{width:95px;height:95px;max-width:100%}.avatar-option.selected{border:2px solid var(--green);background:var(--sage)}.hero{position:relative;min-height:205px;background:linear-gradient(140deg,#e6edda,#f5f4e8);border:1px solid #d8e2ca;border-radius:26px;overflow:hidden;margin-bottom:20px;padding:22px}.hero-copy{position:relative;z-index:2;width:63%}.hero h1{font-size:1.65rem}.hero .avatar{position:absolute;width:190px;height:190px;right:-14px;bottom:0;animation:breathe 5s ease-in-out infinite;transform-origin:bottom}.hero p{margin-top:10px;font-size:.83rem;color:#54674e}.hero .leaf{position:absolute;right:15px;top:10px;font-size:35px;opacity:.35}.count-number{font-family:Georgia,serif;font-size:2.9rem;line-height:1;color:var(--deep)}.count-title{font-size:.75rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px}.clock{font-variant-numeric:tabular-nums;color:var(--green);font-size:.8rem}.progress{height:9px;border-radius:10px;background:#e7ebdd;margin:14px 0 8px;overflow:hidden}.progress span{height:100%;display:block;background:var(--green);border-radius:10px;transition:width .5s}.checkrow{display:flex;align-items:center;gap:11px;width:100%;padding:13px 0;background:none;border:0;border-bottom:1px solid #e9ece3;text-align:left;color:var(--ink);font-weight:650;min-height:50px}.checkrow:last-of-type{border-bottom:0}.checkrow>.icon:last-child{margin-left:auto;width:18px;color:var(--muted)}.check{display:grid;place-items:center;width:24px;height:24px;border:1.5px solid #a7b29f;border-radius:50%;color:white;flex-shrink:0}.check.done{background:var(--green);border-color:var(--green)}.check .icon{width:15px;height:15px}.quote{position:relative;font-family:Georgia,serif;font-size:1.23rem;line-height:1.65;color:var(--deep);margin:10px 0 14px}.quote:before{content:'“';font-size:55px;line-height:.6;color:#b2c29e;display:block;margin-top:20px}.formgrid{display:grid;gap:15px}.field{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:.86rem;min-width:0}.field span.hint,.hint{font-size:.76rem;font-weight:400;color:var(--muted)}input,select,textarea{width:100%;border:1px solid #cfd8c9;border-radius:12px;min-height:49px;padding:11px 12px;background:white;color:var(--ink);font-weight:400;max-width:100%}textarea{resize:vertical;min-height:88px}input[type=checkbox],input[type=radio]{width:21px;height:21px;min-height:21px;accent-color:var(--green);padding:0;flex-shrink:0}input[type=file]{font-size:.78rem}label.choice{display:flex;align-items:flex-start;gap:10px;min-height:44px;font-size:.88rem;cursor:pointer}label.choice>span{padding-top:0}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.segmented{display:flex;padding:5px;background:#e9eddf;border-radius:15px;gap:4px;margin-bottom:20px}.segmented button{flex:1;min-height:44px;border:0;border-radius:11px;background:none;color:var(--muted);font-size:.86rem;font-weight:750}.segmented button.active{background:var(--paper);color:var(--deep);box-shadow:0 2px 7px #243d2c0d}.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(82px,1fr));gap:9px;margin:12px 0 16px}.mode-grid button{padding:12px 4px;min-height:76px;border:2px solid #cbd5c0;background:#ffffff;border-radius:16px;color:#243d2c;font-size:0.88rem;font-weight:750;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:all .18s ease;cursor:pointer}.mode-grid button .icon{width:28px;height:28px;stroke-width:2.2}.mode-grid button:hover{border-color:#2d5a3c;background:#f7f9f4}.mode-grid button.active{background:#1b4332!important;border-color:#d4af37!important;color:#ffffff!important;box-shadow:0 6px 18px rgba(27,67,50,.35);transform:scale(1.02);position:relative}.mode-grid button.active .icon{stroke:#ffffff}.mode-grid button.active::after{content:"✓";position:absolute;top:4px;right:6px;font-size:11px;background:#d4af37;color:#1b4332;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-weight:900}.details{margin-top:15px;border-top:1px solid var(--line);padding-top:12px}.details summary{cursor:pointer;font-size:.88rem;font-weight:750;min-height:35px}.data-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;font-size:.88rem;margin:9px 0}.data-row>span:first-child{color:var(--muted)}.data-row>strong{text-align:right;max-width:65%;overflow-wrap:anywhere}.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}.stat{padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:18px}.stat b{display:block;font-size:1.8rem;line-height:1.2;margin:8px 0}.stat small{font-size:.75rem;color:var(--muted)}.subnav{display:flex;overflow-x:auto;gap:8px;margin-bottom:20px;padding-bottom:5px;scrollbar-width:thin}.subnav button{white-space:nowrap;padding:10px 14px;border-radius:30px;border:1px solid var(--line);background:var(--paper);color:var(--muted);font-weight:700;font-size:.81rem;min-height:44px}.subnav button.active{background:var(--deep);color:white;border-color:var(--deep)}.listitem{padding:15px 0;border-top:1px solid var(--line)}.listitem:first-child{border-top:0;padding-top:0}.listitem:last-child{padding-bottom:0}.listitem p{font-size:.85rem;margin-top:5px;color:var(--muted)}.menuitem{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:13px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;color:var(--ink)}.menuitem:last-child{border-bottom:0}.menuitem .icon:last-child{margin-left:auto}.timeline{padding-left:20px;border-left:2px solid #cbd8bd;margin-left:8px}.timeline article{position:relative;margin-bottom:22px}.timeline article:before{content:'';position:absolute;left:-27px;top:5px;width:12px;height:12px;background:var(--green);border:3px solid var(--cream);border-radius:50%}.timeline time{font-size:.8rem;color:var(--green);font-weight:800}.timeline h3{margin:5px 0}.reader{font-family:Georgia,serif;font-size:1.15rem;line-height:1.9}.reader p{margin-bottom:17px}.reader.large{font-size:1.4rem}.map{height:350px;max-height:55dvh;border-radius:19px;overflow:hidden;border:1px solid var(--line);z-index:1;background:#e7ecdf}.map-marker{background:var(--paper);border:3px solid var(--green);border-radius:50% 50% 50% 5px;box-shadow:0 3px 12px #213c2a30;display:grid;place-items:center;font-size:21px}.map-marker.cluster{border-radius:50%;background:var(--green);color:white;font:800 14px system-ui}.map-marker .avatar{border-radius:50%}.leaflet-popup-content{font-family:system-ui;font-size:13px}.map-note{font-size:.75rem;color:var(--muted);margin:9px 0}.garden{position:relative;min-height:280px;border:1px solid #d6dfc6;border-radius:24px;background:linear-gradient(#f2f5e5 55%,#dce7c7 55%);overflow:hidden;display:flex;align-items:center;justify-content:center}.plant{font-size:90px;z-index:2;filter:drop-shadow(0 10px 10px #34522a15);animation:breathe 4s infinite}.garden .avatar{position:absolute;left:5px;bottom:10px;width:140px;height:140px}.garden:after{content:'✦';position:absolute;right:40px;top:30px;color:#bdc98b;font-size:32px}.garden.splash .plant{animation:pop .6s}.garden .soil{position:absolute;width:160px;height:25px;background:#9b8766;border-radius:50%;bottom:63px}.music-playing{border-color:#aebf9c;background:#f1f5e9}.playerbar{position:fixed;bottom:calc(var(--nav) + 8px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(calc(100% - 28px),580px);z-index:90;background:var(--deep);border-radius:17px;padding:10px 13px;color:white;box-shadow:0 8px 30px #102b2140;display:flex;align-items:center;gap:12px}.playerbar small{display:block;font-size:.68rem;color:#d2dfcd}.playerbar .iconbtn{background:#ffffff18;color:white;border-color:#ffffff26;width:40px;height:40px}.playerbar input[type=range]{min-height:30px;height:30px;padding:0;background:none;border:0;width:70px;accent-color:#d4e5b6}.welcome{position:relative;min-height:100dvh;overflow:hidden;padding:28px 28px 40px;background:var(--cream) url('/images/garden.png') center/cover no-repeat;display:flex;flex-direction:column;align-items:center;text-align:center}.welcome:before{content:'';position:absolute;inset:0;background:linear-gradient(#faf8f100 50%,#faf8f1eb 95%);pointer-events:none}.welcome>*{position:relative;z-index:1}.welcome h1{font-size:clamp(2.6rem,9vw,3.6rem);line-height:1.05;margin:15px 0;color:#284832}.welcome .event-logo{height:80px;width:80px;object-fit:contain;margin-bottom:12px}.welcome .host{width:230px;height:230px;max-width:68vw;animation:breathe 5s infinite;margin-top:8px}.welcome .speech{display:inline-block;padding:9px 16px;background:#fffefbd9;border:1px solid #d9dfce;border-radius:18px;font-family:Georgia,serif;font-style:italic;font-size:1.1rem}.welcome .actions{width:100%;max-width:350px;display:grid;gap:10px;margin-top:20px}.welcome .welcome-info{font-family:Georgia,serif;font-size:1.05rem;margin-top:10px}.event-picker{max-width:180px;font-size:.76rem;min-height:38px;padding:7px;white-space:nowrap;text-overflow:ellipsis}.auth{width:100%;max-width:390px;margin:14px auto}.footer-note{font-size:.7rem;color:var(--muted);margin-top:20px}.event-card{background:var(--paper);border:1px solid var(--line);border-radius:19px;padding:18px;margin-bottom:12px}.event-card.selected{border-color:var(--green);background:#f0f4e6}.row-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.reading-link{font-family:Georgia,serif;font-size:1.05rem}.section-label{font-size:.74rem;font-weight:850;letter-spacing:1.5px;text-transform:uppercase;color:var(--green);margin:25px 0 12px}.route-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0}.route-metrics>div{background:var(--sage);padding:12px;border-radius:14px}.route-metrics b{display:block;font-size:1.5rem}.route-metrics small{font-size:.7rem}.readings-search{position:sticky;top:76px;z-index:10;background:var(--cream);padding:8px 0 13px}.chips{display:flex;gap:7px;flex-wrap:wrap}.checkboxlist{display:grid;gap:10px;max-height:230px;overflow-y:auto;border:1px solid var(--line);padding:12px;border-radius:12px}.checkboxlist label{font-size:.82rem}.photo-placeholder{border:1px dashed #bfcdb1;padding:13px;border-radius:12px;font-size:.8rem}.badge-icon{width:38px;height:38px;background:var(--sage);border-radius:12px;display:grid;place-items:center}dialog{border:1px solid var(--line);border-radius:24px;padding:0;width:min(calc(100% - 24px),560px);max-height:88dvh;color:var(--ink);background:var(--paper);box-shadow:0 30px 100px #172b2b30}dialog::backdrop{background:#12281c77;backdrop-filter:blur(3px)}.modal-body{padding:24px;overflow:auto}.modal-head{position:sticky;top:0;background:var(--paper);padding:19px 22px;z-index:2;border-bottom:1px solid var(--line)}.modal-body .btn.full{margin-top:18px}#toast{position:fixed;left:50%;transform:translateX(-50%) translateY(15px);bottom:calc(var(--nav) + 20px + env(safe-area-inset-bottom));z-index:400;background:var(--deep);color:white;border-radius:16px;padding:13px 20px;max-width:min(90vw,500px);opacity:0;pointer-events:none;transition:.25s;box-shadow:0 8px 30px #0002;font-size:.87rem}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}#toast.error{background:#833d35}.error-inline{background:#fae9e6;color:#8c3632;border-radius:12px;padding:12px;margin-bottom:14px;font-size:.86rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}body.reduced *{animation:none!important;scroll-behavior:auto!important;transition:none!important}.pulse{animation:breathe 4s infinite}.fade-in{animation:enter .3s ease-out}.preserve{white-space:pre-line;overflow-wrap:anywhere}.separator{height:1px;background:var(--line);margin:20px 0}.statussteps{display:flex;gap:6px;flex-wrap:wrap}.statussteps .pill{font-size:.68rem}.safety-note{font-size:.77rem;color:var(--muted);padding:12px 0}.prose ul{padding-left:20px}.prose li{margin:8px 0}.input-error{border-color:var(--red)}@keyframes breathe{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-4px) rotate(.4deg)}}@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}@keyframes enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(max-width:370px){.main{padding-left:15px;padding-right:15px}.topbar{padding-left:15px;padding-right:15px}.card{padding:16px}.hero{padding:18px}.hero h1{font-size:1.45rem}.hero .avatar{width:160px;height:160px;right:-22px}.avatar-option .avatar{width:80px;height:80px}.two{grid-template-columns:1fr}.brand strong{font-size:1rem}.event-picker{max-width:145px}.welcome{padding:22px 20px}.mode-grid{gap:3px}.nav button{font-size:.59rem}}@media(min-width:780px){.shell{margin:24px auto;min-height:calc(100dvh - 48px);border-radius:28px;overflow:clip}.welcome{min-height:calc(100dvh - 48px)}.topbar{border-radius:28px 28px 0 0}.main{min-height:70vh}.nav{border-radius:20px 20px 0 0}.card{padding:24px}}@media print{.nav,.topbar,.btn,.iconbtn{display:none}.shell{box-shadow:none;max-width:100%}.main{padding:0}.card{break-inside:avoid}}

.scene-prop{position:absolute;right:122px;bottom:13px;font-size:30px;z-index:3;animation:breathe 3s infinite}
.welcome .avatar.host{background-image:url('/images/host-frames.png');background-size:200% 200%;background-position:0 0;animation:host-wave 6s steps(1,end) infinite}
@keyframes host-wave{0%,59%{background-position:0 0}60%,64%{background-position:100% 0}65%,72%{background-position:0 100%}73%,80%{background-position:100% 100%}81%,100%{background-position:0 0}}
h1,h2,h3,p{overflow-wrap:anywhere}.route-reaction{width:100px;height:120px;object-fit:contain;float:right;margin:0 0 8px 10px}

/* ============================================================
   KAPITEL URSULIN 2026 - SENIOR UI & CINEMATIC POLISH
   ============================================================ */
.brand-ursulin{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);background:none;border:none;padding:0;cursor:pointer}
.brand-ursulin img{height:42px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.12))}
.brand-ursulin .brand-text{display:flex;flex-direction:column;text-align:left}
.brand-ursulin .brand-title{font-family:Georgia,serif;font-size:1.05rem;font-weight:700;color:#1b4332;line-height:1.2}
.brand-ursulin .brand-sub{font-size:0.68rem;font-weight:700;letter-spacing:1px;color:#7b592a;text-transform:uppercase}

/* Welcome Screen */
.welcome-hero{text-align:center;padding:24px 16px 14px}
.welcome-logo-large{width:110px;height:auto;max-height:140px;object-fit:contain;margin:0 auto 14px;filter:drop-shadow(0 8px 18px rgba(27,67,50,0.18));animation:floatLogo 4s ease-in-out infinite}
@keyframes floatLogo{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.welcome-tagline{font-family:Georgia,serif;font-style:italic;font-size:1.02rem;color:#2d5a3c;margin:10px 0 16px;line-height:1.45}

/* Senior Quick Login Box & Community Touch Grid */
.senior-login-card{background:#ffffff;border:2px solid #d4dfcc;border-radius:22px;padding:22px 18px;box-shadow:0 12px 36px rgba(27,67,50,0.08);margin:16px 0;text-align:left}
.senior-login-card h3{font-size:1.25rem;color:#1b4332;margin-bottom:6px;font-family:'Playfair Display',Georgia,serif;font-weight:700}
.community-search-input{width:100%;min-height:52px;font-size:1rem;font-weight:600;padding:12px 18px;border:2px solid #cbd5c0;border-radius:16px;background:#fafaf7;color:#1b4332;margin-bottom:14px;outline:none;transition:border-color .2s}
.community-search-input:focus{border-color:#1b4332;background:#ffffff;box-shadow:0 0 0 3px rgba(27,67,50,0.12)}
.community-touch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;max-height:220px;overflow-y:auto;padding-right:4px;margin-bottom:14px}
.community-tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:10px 12px;min-height:56px;background:#fbfdf9;border:1.5px solid #d4dfcc;border-radius:14px;cursor:pointer;transition:all .18s;text-align:left}
.community-tile .comm-title{font-size:0.88rem;font-weight:750;color:#1b4332;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.community-tile .comm-meta{font-size:0.72rem;color:#6b7c6f;font-weight:600}
.community-tile:hover{border-color:#1b4332;background:#f2f7f0}
.community-tile.active{background:#1b4332;color:#ffffff;border-color:#d4af37;box-shadow:0 6px 18px rgba(27,67,50,0.25)}
.community-tile.active .comm-title{color:#ffffff}
.community-tile.active .comm-meta{color:#e2c974}
.community-tile .comm-sub{display:block;color:#2d6a4f;font-weight:650;margin-bottom:2px;font-size:0.75rem}
.community-tile.active .comm-sub{color:#fbf1d8}
.suster-grid{display:grid;gap:10px;max-height:300px;overflow-y:auto;padding-right:4px}
.suster-btn{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:60px;background:#ffffff;border:1.5px solid #d4dfcc;border-radius:16px;text-align:left;cursor:pointer;transition:all .18s;font-size:1rem;font-weight:750;color:#1b4332;width:100%}
.suster-name{font-size:1.02rem;color:#1b4332;font-weight:800;transition:color .18s}
.suster-btn:hover,.suster-btn:active{background:#1b4332;color:#ffffff;border-color:#d4af37;transform:translateY(-1px);box-shadow:0 6px 18px rgba(27,67,50,0.22)}
.suster-btn:hover .suster-name,.suster-btn:active .suster-name{color:#ffffff}
.suster-btn:hover .pill,.suster-btn:active .pill{background:#d4af37;color:#1b4332}
.suster-btn:hover small,.suster-btn:active small{color:#e2c974}
.suster-role-tag{font-size:0.7rem;font-weight:800;padding:2px 8px;border-radius:10px;display:inline-block;margin-top:2px}
.suster-role-tag.ex{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
.suster-role-tag.utusan{background:#e0e7ff;color:#3730a3;border:1px solid #c7d2fe}
.suster-btn:hover .suster-role-tag{background:rgba(212,175,55,0.25);color:#ffffff;border-color:#d4af37}

/* ===== Cinematic Flipbook & Royal Gold Invitation Experience ===== */
.invitation-overlay{position:relative;width:100%;border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,0.4)}
.inv-cover{background:linear-gradient(145deg,#133425 0%,#0c2117 100%);color:#faf8f5;border-radius:24px;padding:36px 20px 30px;border:3px double #d4af37;text-align:center;position:relative;box-shadow:inset 0 0 40px rgba(0,0,0,0.5)}
.inv-cover::before{content:"";position:absolute;inset:8px;border:1px solid rgba(212,175,55,0.35);border-radius:18px;pointer-events:none}
.serviam-3d-box{position:relative;width:120px;height:120px;margin:0 auto 16px;display:grid;place-items:center}
.serviam-3d-box img{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 10px 25px rgba(212,175,55,0.5));animation:serviamFloat 3.8s ease-in-out infinite}
@keyframes serviamFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.04)}}
.gold-seal-btn{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;width:100%;max-width:340px;margin:20px auto 6px;padding:14px 24px;background:linear-gradient(135deg,#f9df88 0%,#d4af37 50%,#99730c 100%);color:#102b1e;border:2px solid #ffe99b;border-radius:999px;font-family:'Playfair Display',Georgia,serif;font-size:1.12rem;font-weight:800;letter-spacing:0.5px;cursor:pointer;box-shadow:0 10px 30px rgba(212,175,55,0.45);animation:waxPulse 2.8s infinite}
@keyframes waxPulse{0%,100%{box-shadow:0 0 16px rgba(212,175,55,0.4);transform:scale(1)}50%{box-shadow:0 0 32px rgba(212,175,55,0.85);transform:scale(1.02)}}
.gold-seal-btn:active{transform:scale(0.98)}

/* Inner Golden Parchment */
.inv-parchment{background:#faf8f2;color:#1f2923;border-radius:24px;padding:26px 20px 42px;border:2px solid #c8963e;position:relative;box-shadow:0 18px 45px rgba(27,67,50,0.15);animation:parchmentReveal 0.6s cubic-bezier(0.23,1,0.32,1)}
@keyframes parchmentReveal{from{opacity:0;transform:scale(0.96) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.parchment-header{border-bottom:2px solid #e8dbb8;padding-bottom:16px;margin-bottom:18px;text-align:center}
.parchment-header img.logo-pair{height:65px;width:auto;margin:0 6px 8px;object-fit:contain}
.gold-eyebrow{font-size:0.75rem;letter-spacing:2px;color:#8a6423;font-weight:800;text-transform:uppercase}
.parchment-title{font-family:'Playfair Display',Georgia,serif;font-size:1.5rem;color:#1b4332;font-weight:800;margin:6px 0 2px}

/* Recipient Sister Card */
.sister-recipient-card{background:linear-gradient(135deg,#1b4332 0%,#265c43 100%);color:#ffffff;border-radius:18px;padding:16px 18px;border:2px solid #d4af37;display:flex;align-items:center;gap:14px;margin:16px 0;box-shadow:0 8px 24px rgba(27,67,50,0.2)}
.sister-avatar-halo{position:relative;flex-shrink:0}
.sister-avatar-halo .avatar{width:58px;height:58px;border-radius:50%;border:2px solid #d4af37;box-shadow:0 0 14px rgba(212,175,55,0.5)}
.sister-recipient-card h4{font-family:'Playfair Display',Georgia,serif;font-size:1.15rem;color:#fde047;margin:0 0 2px}
.sister-recipient-card p{font-size:0.84rem;color:#e8f0e6;margin:0}

/* Grand Theme Quote */
.grand-theme-banner{background:linear-gradient(135deg,#fcf8ec 0%,#f5eed2 100%);border-left:4px solid #c8963e;border-radius:14px;padding:14px 16px;margin:18px 0;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:1.05rem;color:#1b3b1a;line-height:1.5;box-shadow:0 4px 14px rgba(200,150,62,0.12)}
.grand-theme-banner small{display:block;margin-top:8px;font-style:normal;font-family:inherit;font-size:0.8rem;color:#8a6423;font-weight:700}

/* Countdown Grid */
.countdown-gold{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}
.countdown-box{background:#ffffff;border:1.5px solid #d9c89e;border-radius:12px;padding:8px 4px;text-align:center;box-shadow:0 4px 10px rgba(0,0,0,0.03)}
.countdown-box strong{display:block;font-size:1.35rem;font-weight:800;color:#1b4332;font-family:'Playfair Display',serif;line-height:1}
.countdown-box span{font-size:0.68rem;text-transform:uppercase;color:#8a6423;font-weight:700;letter-spacing:0.5px}

/* Logistics Highlight Details */
.logistics-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0;text-align:left}
.logistics-card{background:#ffffff;border:1.5px solid #dcd3b8;border-radius:14px;padding:12px 14px}
.logistics-card small{display:block;font-size:0.72rem;color:#8a6423;text-transform:uppercase;font-weight:800;letter-spacing:0.5px;margin-bottom:3px}
.logistics-card strong{font-size:0.88rem;color:#1b4332;line-height:1.3;display:block}

/* Primary Transport CTA */
.btn-gold-transport{min-height:56px;font-size:1.05rem;font-weight:800;background:linear-gradient(135deg,#d4af37 0%,#a0780c 100%);color:#102b1e;border:2px solid #ffe99b;border-radius:16px;padding:14px 20px;box-shadow:0 8px 24px rgba(212,175,55,0.45);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:14px;transition:all .18s}
.btn-gold-transport:hover,.btn-gold-transport:active{transform:scale(1.02);filter:brightness(1.08)}

/* Embedded Hymn Mini Bar */
.hymn-mini-bar{background:#ffffff;border:1.5px solid #d9c89e;border-radius:16px;padding:12px 14px;margin-top:16px;display:flex;align-items:center;gap:10px}
.spinning-disc{width:36px;height:36px;border-radius:50%;background:#1b4332;border:2px solid #d4af37;display:grid;place-items:center;font-size:16px;color:#d4af37;flex-shrink:0}
.spinning-disc.on{animation:spinDisc 4s linear infinite}
@keyframes spinDisc{to{transform:rotate(360deg)}}
.hymn-switcher{display:flex;gap:6px;overflow-x:auto;padding:6px 0;margin-top:10px}
.hymn-chip{flex-shrink:0;padding:6px 12px;border-radius:999px;font-size:0.75rem;font-weight:700;border:1px solid #c8963e;background:#faf6ec;color:#8a6423;cursor:pointer;transition:all .15s}
.hymn-chip.active{background:#1b4332;color:#ffffff;border-color:#d4af37}

/* Music Equalizer Wave */
.music-wave{display:flex;align-items:center;gap:4px;height:32px;flex-shrink:0}
.music-wave span{display:block;width:4px;background:#d4af37;border-radius:8px;animation:wave 1.2s infinite ease-in-out;animation-play-state:paused}
.music-wave.playing span{animation-play-state:running}
.music-wave span:nth-child(1){height:10px;animation-delay:0s}
.music-wave span:nth-child(2){height:18px;animation-delay:.15s}
.music-wave span:nth-child(3){height:28px;animation-delay:.3s}
.music-wave span:nth-child(4){height:14px;animation-delay:.45s}
.music-wave span:nth-child(5){height:24px;animation-delay:.6s}
.music-wave span:nth-child(6){height:12px;animation-delay:.75s}
@keyframes wave{0%,100%{transform:scaleY(0.4)}50%{transform:scaleY(1)}}

/* 3 Pilar Pusaka St. Angela */
.pilar-cards{display:grid;gap:12px;margin:16px 0}
.pilar-card{background:#ffffff;border:2px solid #d4dfcc;border-radius:18px;padding:14px 16px;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;transition:all .2s;width:100%}
.pilar-card:hover{border-color:#1b4332;transform:translateY(-2px);box-shadow:0 6px 18px rgba(27,67,50,0.12)}
.pilar-icon{width:46px;height:46px;border-radius:14px;background:#e8f0e6;color:#1b4332;display:grid;place-items:center;font-size:22px;flex-shrink:0}
.pilar-card h3{font-family:'Playfair Display',Georgia,serif;font-size:1.1rem;color:#1b4332;margin-bottom:3px}
.pilar-card p{font-size:0.84rem;color:#5a6b5e;margin:0;line-height:1.35}

/* Coordinator Panel */
.coordinator-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:#fbf1d8;color:#8f6010;border:1px solid #e6cc8f;border-radius:20px;font-size:0.75rem;font-weight:800}



/* ===== Alkitab / Scripture Online Layout (Pusaka St. Angela) ===== */
.bible-reader-modal{max-width:680px;margin:0 auto}
.bible-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:#f8f6f0;border:1px solid #e5dfd2;border-radius:14px;margin-bottom:16px}
.font-zoom-ctrl{display:flex;align-items:center;gap:3px;background:#ebe5d8;padding:3px;border-radius:10px}
.font-zoom-ctrl button{border:0;background:transparent;padding:4px 9px;border-radius:7px;font-weight:800;font-size:0.82rem;color:#3b4d3f;cursor:pointer;transition:all .15s}
.font-zoom-ctrl button.active,.font-zoom-ctrl button:hover{background:#ffffff;color:#1b4332;box-shadow:0 2px 6px rgba(0,0,0,0.08)}
.bible-chapter-header{border-bottom:1.5px solid #ece6d8;padding-bottom:12px;margin-bottom:16px}
.bible-verses-container{font-family:'Playfair Display',Georgia,serif;line-height:1.85;color:#1d2b20;display:grid;gap:8px;padding-bottom:14px}
.bible-verse{display:flex;align-items:flex-start;gap:12px;padding:8px 10px;border-radius:10px;transition:background-color .15s}
.bible-verse:hover{background-color:#f8f5ed}
.bible-verse.intro{font-style:italic;color:#4a5c4e;border-left:3px solid #d4af37;padding-left:12px;margin-bottom:6px}
.bible-verse .verse-num{font-family:'Inter',ui-sans-serif,system-ui;font-size:0.78rem;font-weight:800;color:#9b7a3a;min-width:24px;padding-top:3px;user-select:none}
.bible-verse .verse-text{flex:1;letter-spacing:0.15px}
.bible-reader-modal.font-sm .bible-verse .verse-text{font-size:0.94rem;line-height:1.7}
.bible-reader-modal.font-md .bible-verse .verse-text{font-size:1.06rem;line-height:1.85}
.bible-reader-modal.font-lg .bible-verse .verse-text{font-size:1.20rem;line-height:1.95}
.bible-reader-modal.font-xl .bible-verse .verse-text{font-size:1.36rem;line-height:2.05}
.chapter-nav-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:20px;padding-top:16px;border-top:1.5px solid #ece6d8;flex-wrap:wrap}

/* ===== 3 Pilar Pusaka dengan Gambar & Hover Berwarna ===== */
.pilar-cards{display:grid;gap:12px;margin:16px 0}
.pilar-card{background:#ffffff;border:2px solid #d4dfcc;border-radius:18px;padding:12px 14px;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;transition:all .22s ease-in-out;width:100%;position:relative;overflow:hidden}
.pilar-img-wrap{width:64px;height:64px;border-radius:14px;overflow:hidden;flex-shrink:0;background:#f3f6f1;display:grid;place-items:center;position:relative;border:1px solid #dce5d8}
.pilar-thumb{width:100%;height:100%;object-fit:cover;transition:all .25s ease}
.scroll-swap .scroll-hover{position:absolute;inset:0;opacity:0;transition:opacity .25s ease}
.pilar-card:hover .scroll-swap .scroll-hover{opacity:1}
.pilar-card:hover .scroll-swap .scroll-default{opacity:0}
.pilar-card:hover .pilar-thumb{transform:scale(1.08)}
.pilar-tag{font-size:0.68rem;font-weight:800;letter-spacing:0.8px;text-transform:uppercase;margin-bottom:3px;display:inline-block}
.pilar-tag.purple{color:#795586}.pilar-tag.amber{color:#a85324}.pilar-tag.green{color:#2d6a4f}

.pilar-card.regula:hover,.pilar-card.regula.active{border-color:#795586;background:linear-gradient(135deg,#ffffff 0%,#fbf4fd 100%);box-shadow:0 8px 24px rgba(121,85,134,0.18);transform:translateY(-2px)}
.pilar-card.nasihat:hover,.pilar-card.nasihat.active{border-color:#c26543;background:linear-gradient(135deg,#ffffff 0%,#fff7f2 100%);box-shadow:0 8px 24px rgba(194,101,67,0.18);transform:translateY(-2px)}
.pilar-card.warisan:hover,.pilar-card.warisan.active{border-color:#1b4332;background:linear-gradient(135deg,#ffffff 0%,#f1f9f4 100%);box-shadow:0 8px 24px rgba(27,67,50,0.18);transform:translateY(-2px)}

.reading-card{transition:all .2s;border-left:4px solid #d4dfcc}
.reading-card.regula{border-left-color:#795586}
.reading-card.nasihat{border-left-color:#c26543}
.reading-card.warisan{border-left-color:#2d6a4f}
.reading-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.06)}

/* ===== Kebun Perjumpaan Pacet (Lembah Kenanga Inspired) ===== */
.pacet-sanctuary{position:relative;width:100%;height:270px;overflow:hidden;background:linear-gradient(180deg,#cce2f5 0%,#e8f2e4 40%,#c2dbc0 70%,#87ad7f 100%)}
.sanctuary-hills{position:absolute;top:25px;left:0;width:100%;height:95px;background:radial-gradient(ellipse 130% 65% at 50% 100%,#9dbb93 0%,#7ea274 50%,transparent 80%);opacity:0.9}
.sanctuary-trellis{position:absolute;bottom:48px;left:135px;width:130px;height:155px;border:4px solid #734f2d;border-top-width:6px;border-bottom:none;background:repeating-linear-gradient(0deg,transparent,transparent 24px,#9e754d 24px,#9e754d 27px),repeating-linear-gradient(90deg,transparent,transparent 24px,#9e754d 24px,#9e754d 27px);z-index:2;box-shadow:0 4px 10px rgba(0,0,0,0.15)}
.sanctuary-butterfly{position:absolute;width:24px;height:24px;z-index:5;pointer-events:none}
.sanctuary-butterfly.b1{top:45px;left:15px;animation:flutterOne 8s ease-in-out infinite alternate}
.sanctuary-butterfly.b2{top:80px;right:25px;animation:flutterTwo 10s ease-in-out infinite alternate}
@keyframes flutterOne{0%{transform:translate(0,0) scale(1) rotate(5deg)}25%{transform:translate(60px,25px) scale(0.9) rotate(-10deg)}50%{transform:translate(130px,10px) scale(1.1) rotate(15deg)}75%{transform:translate(190px,35px) scale(0.95) rotate(-5deg)}100%{transform:translate(250px,15px) scale(1) rotate(10deg)}}
@keyframes flutterTwo{0%{transform:translate(0,0) scale(1) rotate(-8deg)}30%{transform:translate(-55px,35px) scale(1.05) rotate(12deg)}60%{transform:translate(-120px,12px) scale(0.9) rotate(-15deg)}100%{transform:translate(-180px,30px) scale(1) rotate(5deg)}}
.sanctuary-bird{position:absolute;top:44px;left:140px;width:26px;height:26px;z-index:4;animation:birdChirp 5s infinite ease-in-out}
@keyframes birdChirp{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-8deg) translateY(-2px)}90%{transform:rotate(6deg) translateY(-2px)}}
.sanctuary-sister{position:absolute;bottom:30px;left:35px;width:95px;height:120px;z-index:3}
.sanctuary-vine{position:absolute;bottom:36px;left:155px;z-index:3;display:flex;flex-direction:column;align-items:center;transition:all .3s ease}
.sanctuary-vine.splashed{animation:waterBounce 1.2s ease-out}
@keyframes waterBounce{0%,100%{transform:scale(1)}30%{transform:scale(1.15) translateY(-6px)}60%{transform:scale(0.95)}}
.sanctuary-flowers{position:absolute;bottom:34px;right:12px;display:flex;gap:6px;z-index:3}
.sanctuary-flowers img{width:26px;height:26px;object-fit:contain}
.sanctuary-soil-plot{position:absolute;bottom:0;left:0;width:100%;height:48px;background-image:url('/images/garden/garden_soil.png');background-repeat:repeat-x;background-size:48px 48px;z-index:2;border-top:2px solid #54371f}

/* ===== Admin Panel Logistics & Community Quick Filter ===== */
.admin-loc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:14px}
.admin-loc-card{background:#fdfcf9;border:1.5px solid #dce4d6;border-radius:14px;padding:10px 12px;text-align:left}
.admin-loc-card b{display:block;font-size:1.3rem;color:#1b4332;margin-top:2px}
.admin-loc-card small{font-size:0.75rem;color:#657368}
.admin-comm-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:14px;-webkit-overflow-scrolling:touch}
.admin-comm-chips button{white-space:nowrap;font-size:0.75rem;padding:6px 12px;border-radius:20px;border:1px solid #c8d8c2;background:#ffffff;cursor:pointer;color:#243d2c;transition:all .15s}
.admin-comm-chips button.active,.admin-comm-chips button:hover{background:#1b4332;color:#ffffff;border-color:#1b4332}



/* ===== Enhanced Scripture / Bible Verse Interactive Hover ===== */
.bible-verses-container {
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.85;
  color: #1d2b20;
  display: grid;
  gap: 6px;
  padding-bottom: 14px;
}
.bible-verse {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  border-left: 3.5px solid transparent;
  cursor: pointer;
  background: transparent;
}
.bible-verse:hover, .bible-verse:focus-within {
  background: linear-gradient(90deg, rgba(27,67,50,0.065) 0%, rgba(212,175,55,0.04) 100%);
  border-left-color: #1b4332;
  box-shadow: 0 3px 12px rgba(27,67,50,0.06);
  transform: translateX(4px);
}
.bible-verse.selected-verse {
  background: linear-gradient(90deg, rgba(27,67,50,0.11) 0%, rgba(212,175,55,0.08) 100%);
  border-left-color: #d4af37;
  box-shadow: 0 4px 14px rgba(212,175,55,0.15);
}
.bible-verse .verse-num {
  font-family: 'Inter', ui-sans-serif, system-ui;
  font-size: 0.80rem;
  font-weight: 800;
  color: #9b7a3a;
  min-width: 26px;
  padding-top: 2px;
  user-select: none;
  transition: all 0.2s ease;
}
.bible-verse:hover .verse-num, .bible-verse.selected-verse .verse-num {
  color: #1b4332;
  transform: scale(1.12);
  text-shadow: 0 0 1px rgba(27,67,50,0.3);
}
.bible-verse .verse-text {
  flex: 1;
  letter-spacing: 0.15px;
  transition: color 0.18s ease;
}
.bible-verse:hover .verse-text {
  color: #0b1c12;
}
.bible-verse.intro {
  font-style: italic;
  color: #3b503f;
  border-left: 3.5px solid #d4af37;
  padding-left: 14px;
  margin-bottom: 6px;
  background: rgba(212,175,55,0.05);
}

/* ===== Enhanced Reading Cards Hover ===== */
.reading-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border-left: 4.5px solid #d4dfcc;
  cursor: pointer;
}
.reading-card.regula { border-left-color: #795586; }
.reading-card.nasihat { border-left-color: #c26543; }
.reading-card.warisan { border-left-color: #2d6a4f; }
.reading-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.reading-card.regula:hover { border-color: #c8a8d6; box-shadow: 0 8px 24px rgba(121,85,134,0.12); }
.reading-card.nasihat:hover { border-color: #e5a48d; box-shadow: 0 8px 24px rgba(194,101,67,0.12); }
.reading-card.warisan:hover { border-color: #8ac29e; box-shadow: 0 8px 24px rgba(45,106,79,0.12); }

/* ===== Pacet Sanctuary Landscape with Gunung Penanggungan ===== */
.pacet-sanctuary {
  position: relative;
  width: 100%;
  height: 290px;
  overflow: hidden;
  background: linear-gradient(180deg, #c4def3 0%, #e2efe4 45%, #b9d7b6 80%, #769f6f 100%);
}
.penanggungan-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}
.sanctuary-mist {
  position: absolute;
  width: 200%;
  height: 35px;
  top: 95px;
  left: -50%;
  background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(255,255,255,0.6) 0%, transparent 80%);
  pointer-events: none;
  z-index: 2;
  animation: mistDrift 24s ease-in-out infinite alternate;
}
@keyframes mistDrift {
  0% { transform: translateX(-40px); }
  100% { transform: translateX(40px); }
}

/* ===== Suster & Trellis Stage ===== */
.sanctuary-trellis {
  position: absolute;
  bottom: 48px;
  left: 135px;
  width: 130px;
  height: 165px;
  border: 4.5px solid #664323;
  border-top-width: 6.5px;
  border-bottom: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 24px, #8d633b 24px, #8d633b 27px),
              repeating-linear-gradient(90deg, transparent, transparent 24px, #8d633b 24px, #8d633b 27px);
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.sanctuary-sister {
  position: absolute;
  bottom: 28px;
  left: 30px;
  width: 100px;
  height: 125px;
  z-index: 4;
  transition: transform 0.4s ease;
}
.pacet-sanctuary.watering-active .sanctuary-sister {
  animation: sisterBless 1.4s ease-in-out;
}
@keyframes sisterBless {
  0% { transform: scale(1) translateY(0); }
  25% { transform: scale(1.06) translateY(-5px); }
  50% { transform: scale(1.04) translateY(-2px); }
  75% { transform: scale(1.06) translateY(-4px); }
  100% { transform: scale(1) translateY(0); }
}

/* ===== Watering Can Animation & Droplets ===== */
.sanctuary-watering-can {
  position: absolute;
  top: 24px;
  right: 105px;
  z-index: 10;
  opacity: 0;
  transform: translate(35px, -25px) rotate(0deg);
  transition: all 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.pacet-sanctuary.watering-active .sanctuary-watering-can {
  opacity: 1;
  transform: translate(0, 0) rotate(-28deg);
}
.water-droplets-stream {
  position: absolute;
  top: 36px;
  left: 60px;
  width: 45px;
  height: 80px;
  display: none;
}
.pacet-sanctuary.watering-active .water-droplets-stream {
  display: block;
}
.water-droplets-stream span {
  position: absolute;
  width: 4px;
  height: 9px;
  background: linear-gradient(180deg, #70d6ff 0%, #38bdf8 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 0 0 6px rgba(112, 214, 255, 0.85);
  opacity: 0;
  animation: waterDropFall 0.55s linear infinite;
}
.water-droplets-stream span:nth-child(1) { left: 4px; animation-delay: 0.00s; }
.water-droplets-stream span:nth-child(2) { left: 14px; animation-delay: 0.11s; }
.water-droplets-stream span:nth-child(3) { left: 8px; animation-delay: 0.22s; }
.water-droplets-stream span:nth-child(4) { left: 22px; animation-delay: 0.33s; }
.water-droplets-stream span:nth-child(5) { left: 16px; animation-delay: 0.44s; }

@keyframes waterDropFall {
  0% { transform: translate(0, 0) scale(0.6); opacity: 1; }
  80% { opacity: 0.95; }
  100% { transform: translate(-15px, 72px) scale(1.15); opacity: 0; }
}

.sanctuary-vine {
  position: absolute;
  bottom: 36px;
  left: 155px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
}
.sanctuary-vine.splashed {
  animation: vineSway 1.3s ease-in-out;
}
@keyframes vineSway {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.10) rotate(-3deg); }
  50% { transform: scale(1.05) rotate(2.5deg); }
  75% { transform: scale(1.02) rotate(-1deg); }
}

/* ===== Herbarium 10 Bunga Serviam ===== */
.herbarium-card {
  border: 1.5px solid #c9dcc8;
  background: #ffffff;
}
.herbarium-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 480px) {
  .herbarium-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
.herbarium-flower-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  border-radius: 14px;
  border: 1.5px solid #dce8db;
  background: #fdfdfd;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  position: relative;
}
.herbarium-flower-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.herbarium-flower-btn.unlocked {
  border-color: #bad7be;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
}
.herbarium-flower-btn.unlocked:hover {
  border-color: #2d6a4f;
  box-shadow: 0 8px 22px rgba(45,106,79,0.14);
}
.herbarium-flower-btn.locked {
  border-style: dashed;
  border-color: #ccdacf;
  background: #fbfbfb;
  opacity: 0.85;
}
.herbarium-flower-btn.locked:hover {
  border-color: #9bb1a1;
  background: #f7f8f6;
}
.flower-icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  position: relative;
  transition: transform 0.2s ease;
}
.herbarium-flower-btn:hover .flower-icon-wrap {
  transform: scale(1.08);
}
.flower-bloom-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  background: #2d6a4f;
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 900;
  display: grid;
  place-items: center;
  border: 2px solid #ffffff;
}
.flower-label {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: #1b4332;
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.herbarium-flower-btn.locked .flower-label {
  color: #5c7060;
}
.flower-sub {
  font-size: 0.70rem;
}
.flower-open-tag {
  color: #2d6a4f;
  font-weight: 800;
  background: #e8f4e6;
  padding: 2px 7px;
  border-radius: 8px;
  display: inline-block;
}
.flower-lock-tag {
  color: #7a8c7e;
  font-weight: 700;
  background: #eef2ed;
  padding: 2px 7px;
  border-radius: 8px;
  display: inline-block;
}

/* Modal Renungan Bunga */
.flower-hero-banner {
  padding: 18px;
  border-radius: 16px;
  text-align: center;
  margin-bottom: 16px;
}
.flower-hero-icon {
  margin-bottom: 4px;
}
.flower-detail-section {
  margin-bottom: 14px;
}



/* ===== Real Botanical Flower Illustration Styling ===== */
.flower-icon-wrap {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  position: relative;
  background: #ffffff;
  padding: 4px;
  border: 1px solid #e3ebe1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.25s ease;
}
.flower-icon-wrap.is-bloom {
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f4fbf6 100%);
  border-color: #bad7be;
  box-shadow: 0 4px 14px rgba(45,106,79,0.12);
}
.flower-icon-wrap.is-locked {
  background: #f7f9f6;
  border: 1px dashed #c8d8c6;
}
.flower-real-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.flower-real-img.locked-img {
  filter: grayscale(1) opacity(0.34) contrast(1.15);
}
.herbarium-flower-btn:hover .flower-real-img {
  transform: scale(1.09);
}
.herbarium-flower-btn:hover .flower-real-img.locked-img {
  filter: grayscale(0.8) opacity(0.52);
}
.flower-lock-pill {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: #e9efe7;
  color: #5c7060;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 5px;
  border: 1.5px solid #ffffff;
}
.flower-hero-img-wrap {
  width: 140px;
  height: 140px;
  margin: 0 auto;
  border-radius: 24px;
  background: #ffffff;
  padding: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  border: 1.5px solid rgba(212,175,55,0.25);
  display: grid;
  place-items: center;
}
.flower-hero-real-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 18px;
}


/* ============================================================
   STRAVA-STYLE CONVERGENCE MAP & PACET BEACON
   ============================================================ */
@keyframes venue-pulse {
  0% { transform: scale(0.85); opacity: 0.9; }
  50% { transform: scale(1.4); opacity: 0.2; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes strava-dash {
  to { stroke-dashoffset: -30; }
}

.strava-flight-arc {
  animation: strava-dash 1.8s linear infinite;
  filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.6));
}

.community-node-marker {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.community-node-marker:hover {
  transform: scale(1.25);
  z-index: 1000 !important;
}

/* ============================================================
   FEATURE SHOWCASE & ONE-TAP COORDINATOR VALIDATION
   ============================================================ */
.showcase-banner {
  background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 100%);
  color: #ffffff;
  border-radius: 20px;
  padding: 18px 20px;
  margin-top: 18px;
  box-shadow: 0 8px 24px rgba(27, 67, 50, 0.16);
  border: 1px solid rgba(212, 175, 55, 0.35);
  position: relative;
  overflow: hidden;
}
.showcase-banner::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.2) 0%, transparent 70%);
  pointer-events: none;
}
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.showcase-card {
  background: #ffffff;
  border: 1.5px solid #e2ebd8;
  border-radius: 16px;
  padding: 14px 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,0.03);
}
.showcase-card:hover {
  border-color: #d4af37;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(27,67,50,0.08);
}
.showcase-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.showcase-card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 0.94rem;
  color: #1b4332;
  margin: 0;
}
.showcase-card-sub {
  font-size: 0.74rem;
  color: #556b5a;
  line-height: 1.35;
  margin: 0;
}

/* Coordinator Assisted Banner */
.coord-assisted-card {
  border: 2px solid #2d6a4f;
  background: linear-gradient(135deg, #f7fcf8, #edf7f0);
  border-radius: 20px;
  padding: 18px 20px;
  margin-top: 18px;
  box-shadow: 0 6px 20px rgba(45, 106, 79, 0.08);
}
.btn-validate-one-tap {
  background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 100%);
  color: #ffffff !important;
  border: 1.5px solid #d4af37;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 14px rgba(27, 67, 50, 0.22);
  transition: all 0.2s ease;
}
.btn-validate-one-tap:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.35);
}

/* ===== BINTANG KEJORA GALLERY & LIGHTBOX ===== */
.gallery-section-card {
  border: 1px solid #c7e1f4;
  background: #ffffff;
  border-radius: 22px;
}
.bintang-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
@media (max-width: 360px) {
  .bintang-gallery-grid {
    grid-template-columns: 1fr;
  }
}
.gallery-photo-card {
  background: #ffffff;
  border: 1px solid #e1e9dd;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
}
.gallery-photo-card:hover, .gallery-photo-card:focus-visible {
  transform: translateY(-3px);
  border-color: #2d6a4f;
  box-shadow: 0 10px 24px rgba(45, 106, 79, 0.14);
}
.gallery-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #eef3eb;
}
.gallery-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.gallery-photo-card:hover .gallery-thumb-img {
  transform: scale(1.06);
}
.gallery-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.gallery-badge.amber { background: #fbefd9; color: #936022; }
.gallery-badge.purple { background: #f0e8f4; color: #795586; }
.gallery-badge.green { background: #eaf5ec; color: #1b4332; }
.gallery-badge.blue { background: #e8f4fd; color: #1d6fa5; }

.gallery-zoom-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(20, 45, 33, 0.78);
  color: #ffffff;
  backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.62rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  opacity: 0.88;
  transition: opacity 0.2s;
}
.gallery-photo-card:hover .gallery-zoom-badge {
  opacity: 1;
  background: #1b4332;
}
.gallery-card-body {
  padding: 10px 12px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.gallery-card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1b4332;
  margin: 0 0 4px;
  line-height: 1.3;
}
.gallery-card-sub {
  font-size: 0.74rem;
  color: #617366;
  line-height: 1.35;
  margin: 0;
}
.gallery-lightbox-img-wrap {
  position: relative;
  width: 100%;
  max-height: 340px;
  border-radius: 16px;
  overflow: hidden;
  background: #0f1c14;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.gallery-lightbox-img {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  display: block;
}
.gallery-lightbox-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0,0,0,0.72);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.gallery-quote {
  margin: 12px 0;
  padding: 12px 16px;
  background: #faf8f1;
  border-left: 3.5px solid #d4af37;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #2b3d30;
  border-radius: 0 12px 12px 0;
}

/* ===== INTERACTIVE ANIMATED URSULINE ENVELOPE CARD ===== */
.envelope-hero-card {
  width: 100%;
  max-width: 520px;
  margin: 18px 0 20px;
  cursor: pointer;
  perspective: 1200px;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.envelope-3d-box {
  position: relative;
  width: 100%;
  height: 178px;
  background: linear-gradient(155deg, #faf6ed 0%, #ede3cb 50%, #e2d4b5 100%);
  border-radius: 20px;
  border: 1.5px solid #d4af37;
  box-shadow: 0 10px 28px rgba(35, 60, 45, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.envelope-hero-card:hover .envelope-3d-box,
.envelope-hero-card:focus-visible .envelope-3d-box {
  transform: translateY(-5px);
  border-color: #b89222;
  box-shadow: 0 18px 40px rgba(27, 67, 50, 0.2), 0 0 0 1px rgba(212, 175, 55, 0.4), inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Inside Letter Peeking Out */
.envelope-letter-card {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  height: 135px;
  background: #ffffff;
  border: 1px solid #dfcfab;
  border-radius: 12px;
  padding: 8px 12px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(18px);
  transition: transform 0.45s cubic-bezier(0.34, 1.25, 0.64, 1);
  z-index: 1;
}
.envelope-hero-card:hover .envelope-letter-card,
.envelope-hero-card:focus-visible .envelope-letter-card {
  transform: translateY(-52px);
}
.letter-cross {
  font-size: 1.1rem;
  color: #8f6010;
  line-height: 1;
  margin-bottom: 2px;
}
.letter-top-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: #1b4332;
  text-transform: uppercase;
}
.letter-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #1b4332;
  margin: 2px 0;
  line-height: 1.2;
}
.letter-date {
  font-size: 0.76rem;
  color: #657368;
  font-weight: 600;
}
.letter-callout {
  font-size: 0.72rem;
  color: #8f6010;
  font-weight: 700;
  margin-top: 4px;
}

/* Flap top (triangle) that flips open */
.envelope-flap-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: linear-gradient(180deg, #e5d7b5 0%, #dfcfab 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.envelope-hero-card:hover .envelope-flap-top,
.envelope-hero-card:focus-visible .envelope-flap-top {
  transform: rotateX(175deg);
  opacity: 0.25;
}

/* Pocket Front Overlay (creates depth over letter) */
.envelope-pocket-front {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 98px;
  background: linear-gradient(180deg, rgba(235, 223, 196, 0.96) 0%, rgba(226, 212, 181, 0.98) 100%);
  border-top: 1px solid rgba(212, 175, 55, 0.4);
  clip-path: polygon(0 0, 50% 32px, 100% 0, 100% 100%, 0 100%);
  z-index: 2;
  pointer-events: none;
}

/* Wax Seal with Ursuline Insignia */
.wax-seal-badge {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9b201a 0%, #6d100d 70%, #460906 100%);
  box-shadow: 0 4px 14px rgba(70, 9, 6, 0.45), inset 0 2px 2px rgba(255, 255, 255, 0.4), inset 0 -2px 3px rgba(0, 0, 0, 0.5);
  border: 1.5px solid #d4af37;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.envelope-hero-card:hover .wax-seal-badge,
.envelope-hero-card:focus-visible .wax-seal-badge {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.6);
}
.wax-seal-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px dashed rgba(212, 175, 55, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #f7e7b4;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.wax-seal-cross {
  font-size: 0.95rem;
  line-height: 1;
}
.wax-seal-stars {
  font-size: 0.42rem;
  letter-spacing: 1px;
  color: #ffd700;
  line-height: 1;
  margin: 1px 0;
}
.wax-seal-motto {
  font-family: 'Inter', sans-serif;
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #f7e7b4;
}

/* Bottom Text Banner on Front */
.envelope-banner-text {
  position: absolute;
  bottom: 12px;
  left: 14px;
  right: 14px;
  z-index: 3;
  text-align: center;
  pointer-events: none;
}
.env-kicker {
  font-size: 0.65rem;
  letter-spacing: 2px;
  color: #8a6423;
  font-weight: 800;
}
.env-main-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #1b4332;
  margin: 1px 0;
}
.env-sub-title {
  font-size: 0.74rem;
  color: #556b5a;
  font-weight: 600;
}

/* Floating Action Pill for Bintang Kejora Gallery */
.floating-gallery-pill {
  position: fixed;
  bottom: 74px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(27, 67, 50, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  border: 1.5px solid #d4af37;
  box-shadow: 0 8px 24px rgba(27, 67, 50, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 850;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Inter', ui-sans-serif, system-ui;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  animation: floatIn 0.35s ease-out;
}
.floating-gallery-pill:hover {
  transform: translateY(-2px) scale(1.03);
  background: #1b4332;
  border-color: #f3e5ab;
  box-shadow: 0 12px 28px rgba(27, 67, 50, 0.45);
}
.floating-gallery-pill .pill-camera {
  font-size: 1rem;
}
.floating-gallery-pill .pill-text {
  color: #ffffff;
}
.floating-gallery-pill .pill-badge {
  background: #d4af37;
  color: #1b4332;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 12px;
  margin-left: 2px;
}
@keyframes floatIn {
  from { opacity: 0; transform: translateY(16px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== LUXURIOUS SEALED URSULINE ENVELOPE (LENTERA-INSPIRED) ===== */
.envelope-hero-card {
  width: 100%;
  max-width: 520px;
  margin: 16px 0 22px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.envelope-sealed-container {
  position: relative;
  width: 100%;
  min-height: 204px;
  background: linear-gradient(160deg, #fdfbf7 0%, #f7f1e3 50%, #eee3c8 100%);
  border-radius: 20px;
  border: 1.5px solid #d4af37;
  box-shadow: 0 10px 30px rgba(35, 60, 45, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 68px 18px 20px;
  text-align: center;
}
.envelope-hero-card:hover .envelope-sealed-container,
.envelope-hero-card:focus-visible .envelope-sealed-container {
  transform: translateY(-4px);
  border-color: #b89222;
  box-shadow: 0 18px 42px rgba(27, 67, 50, 0.2), inset 0 1px 0 #ffffff;
}

/* Triangular Envelope Flap */
.envelope-top-flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 75px;
  background: linear-gradient(180deg, #f2e7ce 0%, #e8dac0 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s ease;
  z-index: 2;
}
.envelope-hero-card:hover .envelope-top-flap {
  transform: scaleY(0.95);
}

/* 3D Serviam Wax Seal centered at flap tip */
.envelope-wax-seal {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translate(-50%, -10px);
  width: 56px;
  height: 56px;
  z-index: 3;
  filter: drop-shadow(0 6px 14px rgba(27, 67, 50, 0.35));
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease;
}
.envelope-wax-seal .seal-3d-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.envelope-hero-card:hover .envelope-wax-seal {
  transform: translate(-50%, -14px) scale(1.1);
  filter: drop-shadow(0 8px 22px rgba(212, 175, 55, 0.7));
}

/* Front Envelope Typography - Completely unobstructed */
.envelope-content-front {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 10px;
}
.env-kicker {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #8f6010;
  margin-bottom: 4px;
}
.env-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #1b4332;
  margin: 0 0 4px;
  line-height: 1.2;
}
.env-venue {
  font-size: 0.82rem;
  color: #3b5a45;
  margin: 0 0 8px;
  font-weight: 500;
}
.env-date-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.8px;
  color: #8f6010;
  background: rgba(212, 175, 55, 0.16);
  border: 1px solid rgba(212, 175, 55, 0.4);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.env-tap-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1b4332;
  background: #ffffff;
  border: 1px solid #d4dfcc;
  padding: 7px 16px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}
.envelope-hero-card:hover .env-tap-cta {
  background: #1b4332;
  color: #ffffff;
  border-color: #1b4332;
  box-shadow: 0 6px 16px rgba(27, 67, 50, 0.25);
}

/* Floating Music Pill Widget */
.floating-music-pill {
  position: fixed;
  bottom: 74px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(27, 67, 50, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  border: 1.5px solid #d4af37;
  box-shadow: 0 8px 24px rgba(27, 67, 50, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 850;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Inter', ui-sans-serif, system-ui;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  animation: floatIn 0.35s ease-out;
}
.floating-music-pill:hover {
  transform: translateY(-2px) scale(1.03);
  background: #1b4332;
  border-color: #f3e5ab;
  box-shadow: 0 12px 28px rgba(27, 67, 50, 0.45);
}
.floating-music-pill .music-pill-icon {
  font-size: 1rem;
}
.floating-music-pill .music-pill-text {
  color: #ffffff;
}
.floating-music-pill .music-pill-badge {
  background: #d4af37;
  color: #1b4332;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 12px;
  margin-left: 2px;
}