/* Doppelpack Party CSS v5.0 */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
:root{--p:#ff5c35;--g:#00c48c;--b:#5b8ef0;--y:#ffd166;--ink:#1a1a1a;--soft:#f5f0eb;--card:#fff;--line:#ebebeb;--muted:#999;--r:14px;--sh:0 2px 10px rgba(0,0,0,.07)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.dp-app,.dp-app *{box-sizing:border-box;font-family:'Nunito',-apple-system,sans-serif}
.dp-app{color:var(--ink);background:var(--soft);width:100%;max-width:720px;margin:0 auto;min-height:100svh}
/* HERO */
.dp-hero{background:var(--ink);position:relative;overflow:hidden;padding:2.5rem 1.5rem 2rem}
.dp-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(150deg,#1a0800,#2d1000 50%,#001a10 100%)}
.dp-blob{position:absolute;border-radius:50%;filter:blur(42px)}
.dp-b1{width:220px;height:220px;background:#ff5c35;opacity:.52;top:-50px;left:-60px;animation:dpF1 6s ease-in-out infinite}
.dp-b2{width:170px;height:170px;background:#ffd166;opacity:.42;top:0;right:-35px;animation:dpF2 7s ease-in-out infinite}
.dp-b3{width:150px;height:150px;background:#00c48c;opacity:.35;bottom:-20px;left:38%;animation:dpF3 8s ease-in-out infinite}
@keyframes dpF1{0%,100%{transform:translate(0,0)}50%{transform:translate(16px,12px)}}
@keyframes dpF2{0%,100%{transform:translate(0,0)}50%{transform:translate(-12px,18px)}}
@keyframes dpF3{0%,100%{transform:translate(0,0)}50%{transform:translate(9px,-14px)}}
.dp-hero-inner{position:relative;z-index:1}
.dp-hero-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:.28rem .8rem;border-radius:20px;font-size:11px;color:rgba(255,255,255,.7);letter-spacing:.05em;text-transform:uppercase;margin-bottom:1rem;font-weight:700}
.dp-live{width:6px;height:6px;border-radius:50%;background:var(--g);animation:dpPulse 1.5s ease-in-out infinite;flex-shrink:0}
@keyframes dpPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.6)}}
.dp-hero-title{font-size:clamp(2.1rem,6vw,3.2rem);font-weight:900;color:#fff;line-height:1.05;letter-spacing:-.5px;margin-bottom:.35rem}
.dp-hero-title .dp-ac{color:var(--y)}
.dp-hero-sub{font-size:.85rem;color:rgba(255,255,255,.5);margin-bottom:1.5rem;line-height:1.6;font-weight:600}
.dp-cd{display:flex;gap:8px}
.dp-cd-box{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.65rem .8rem;text-align:center;flex:1}
.dp-cd-n{display:block;font-size:1.8rem;font-weight:900;color:#fff;line-height:1}
.dp-cd-l{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-top:2px;font-weight:700}
/* BOT NAV */
.dp-bot-nav{background:var(--card);border-top:1px solid var(--line);display:flex;padding:.45rem 0 calc(.7rem + env(safe-area-inset-bottom));position:sticky;bottom:0;z-index:200;box-shadow:0 -2px 14px rgba(0,0,0,.06)}
.dp-bn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:.3rem .2rem;cursor:pointer;border:none;background:none;color:var(--muted);font-size:10px;font-weight:800;transition:color .2s;position:relative}
.dp-bn.active{color:var(--p)}
.dp-bn-iw{position:relative;display:inline-block;font-size:1.2rem;line-height:1}
.dp-dot{position:absolute;top:-5px;right:-9px;background:var(--p);color:#fff;font-size:9px;font-weight:800;border-radius:10px;padding:1px 5px;min-width:15px;text-align:center;line-height:1.4}
/* TABS */
.dp-tab{display:none;animation:dpFadeUp .22s ease}
.dp-tab.active{display:block}
@keyframes dpFadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
/* HOME */
.dp-qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:1rem 1rem .5rem}
.dp-qa{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem;cursor:pointer;display:flex;flex-direction:column;gap:.35rem;transition:all .2s;text-align:left}
.dp-qa:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.dp-qa-ic{font-size:1.4rem}
.dp-qa strong{font-size:13px;font-weight:800;display:block}
.dp-qa span{font-size:10px;color:var(--muted);font-weight:700}
.dp-qa.dp-acc{background:var(--p);border-color:var(--p);color:#fff}
.dp-qa.dp-acc span{color:rgba(255,255,255,.7)}
/* VOTE */
.dp-vote-card{background:var(--card);border-radius:var(--r);padding:1rem 1.1rem;margin:0 1rem 1rem;border:1px solid var(--line);box-shadow:var(--sh)}
.dp-vt{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:.75rem}
.dp-vr{display:flex;gap:8px;align-items:center}
.dp-vs-side{text-align:center;min-width:52px}
.dp-vs-nm{font-size:11px;font-weight:800;margin-bottom:.2rem}
.dp-vs-n{font-size:1.9rem;font-weight:900;line-height:1;display:block}
.dp-vs-a .dp-vs-n{color:var(--p)}.dp-vs-b .dp-vs-n{color:var(--b)}
.dp-vc{flex:1}
.dp-vbar{height:7px;background:var(--line);border-radius:4px;overflow:hidden;display:flex;margin:.35rem 0}
.dp-vfa{background:var(--p);border-radius:4px 0 0 4px;transition:width .6s cubic-bezier(.34,1.56,.64,1)}
.dp-vfb{background:var(--b);border-radius:0 4px 4px 0;transition:width .6s cubic-bezier(.34,1.56,.64,1)}
.dp-vbtns{display:flex;gap:6px}
.dp-vbtn{flex:1;border:2px solid;border-radius:8px;padding:.35rem;font-size:11px;font-weight:800;cursor:pointer;background:transparent;transition:all .2s}
.dp-vbtn-a{border-color:var(--p);color:var(--p)}.dp-vbtn-a:hover,.dp-vbtn-a.active{background:var(--p);color:#fff}
.dp-vbtn-b{border-color:var(--b);color:var(--b)}.dp-vbtn-b:hover,.dp-vbtn-b.active{background:var(--b);color:#fff}
.dp-vnote{font-size:11px;color:var(--muted);text-align:center;margin-top:.45rem;font-style:italic;font-weight:600;min-height:14px}
/* FEED */
.dp-feed-hdr{display:flex;align-items:center;gap:6px;padding:.25rem 1rem .55rem;font-size:12px;font-weight:800}
.dp-feed{display:flex;flex-direction:column;gap:6px;padding:0 1rem 1rem}
.dp-af-item{background:var(--card);border-radius:12px;padding:.6rem .85rem;display:flex;align-items:center;gap:9px;border:1px solid var(--line);animation:dpSlide .3s ease}
@keyframes dpSlide{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
.dp-af-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;color:#fff;flex-shrink:0}
.dp-af-tx{font-size:12px;flex:1;font-weight:600}.dp-af-tx strong{font-weight:800}
.dp-af-time{font-size:10px;color:var(--muted);font-weight:700}.dp-af-em{font-size:.9rem}
/* MEMORY WALL */
.dp-mem-toggle{display:flex;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.dp-mt-btn{flex:1;padding:.7rem;text-align:center;cursor:pointer;font-size:.8rem;font-weight:800;color:var(--muted);border-bottom:2.5px solid transparent;transition:all .2s;font-family:'Nunito',sans-serif;background:none;border-top:none;border-left:none;border-right:none}
.dp-mt-btn.active{color:var(--p);border-bottom-color:var(--p)}
.dp-mem-wall{background:#000;position:relative;overflow:hidden;height:calc(100svh - 107px)}
.dp-reels-wrap{will-change:transform;display:flex;flex-direction:column}
.dp-reel{width:100%;height:calc(100svh - 107px);position:relative;overflow:hidden;flex-shrink:0}
.dp-reel-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:7rem;overflow:hidden}
/* FULL QUALITY photos */
.dp-reel-bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}
.dp-reel-grad{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.18) 55%,rgba(0,0,0,0) 100%)}
.dp-reel-content{position:relative;z-index:5;padding:1rem 1rem 1rem}
.dp-reel-user{display:flex;align-items:center;gap:8px;margin-bottom:.6rem}
.dp-reel-av{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;color:#fff;flex-shrink:0}
.dp-reel-uname{font-size:14px;font-weight:800;color:#fff}
.dp-reel-time{font-size:11px;color:rgba(255,255,255,.55);font-weight:700;margin-left:4px}
.dp-reel-tag{font-size:11px;color:var(--y);font-weight:800;margin-bottom:.3rem;letter-spacing:.03em;display:block}
.dp-reel-caption{font-size:14px;color:#fff;line-height:1.55;font-weight:600}
.dp-reel-actions{position:absolute;right:12px;bottom:100px;display:flex;flex-direction:column;align-items:center;gap:16px;z-index:5}
.dp-ra{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.dp-ra-ic{font-size:1.6rem;transition:transform .2s;line-height:1;display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.dp-ra:hover .dp-ra-ic{transform:scale(1.2)}
.dp-ra-cnt{font-size:12px;color:rgba(255,255,255,.95);font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.dp-mem-nav{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;z-index:10}
.dp-mem-dot{width:3px;height:14px;border-radius:2px;background:rgba(255,255,255,.3);transition:all .3s}
.dp-mem-dot.active{background:#fff;height:20px}
/* COMMENTS */
.dp-cmt-drawer{background:var(--card);border-radius:22px 22px 0 0;padding:1rem 1rem 1.5rem;max-height:0;overflow:hidden;transition:max-height .4s ease;position:relative;z-index:10}
.dp-cmt-drawer.open{max-height:400px}
.dp-cmt-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem}
.dp-cmt-hdr h4{font-size:15px;font-weight:900}
.dp-cmt-close{background:var(--soft);border:none;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:14px;font-family:inherit;font-weight:700}
.dp-cmt-list{display:flex;flex-direction:column;gap:10px;max-height:220px;overflow-y:auto;margin-bottom:.85rem;padding-right:4px}
.dp-cmt-item{display:flex;gap:9px;align-items:flex-start}
.dp-cmt-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:#fff;flex-shrink:0}
.dp-cmt-body{flex:1;background:var(--soft);border-radius:12px;padding:.5rem .75rem}
.dp-cmt-name{font-size:12px;font-weight:800;display:block;margin-bottom:2px}
.dp-cmt-txt{font-size:13px;font-weight:600;line-height:1.45}
.dp-cmt-time{font-size:10px;color:var(--muted);margin-top:3px;font-weight:700;display:block}
.dp-cmt-row{display:flex;gap:8px;align-items:center}
.dp-cmt-name-in{flex:0 0 90px;border:1.5px solid var(--line);border-radius:20px;padding:.4rem .75rem;font-family:'Nunito',sans-serif;font-size:12px;font-weight:700;outline:none;background:var(--soft)}
.dp-cmt-in{flex:1;border:1.5px solid var(--line);border-radius:20px;padding:.4rem .85rem;font-family:'Nunito',sans-serif;font-size:13px;font-weight:600;outline:none;background:var(--soft)}
.dp-cmt-in:focus,.dp-cmt-name-in:focus{border-color:var(--p)}
.dp-cmt-send{background:var(--p);border:none;border-radius:50%;width:34px;height:34px;color:#fff;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* MEM GRID */
.dp-mem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#111}
.dp-mg-item{aspect-ratio:1;overflow:hidden;cursor:pointer;position:relative}
.dp-mg-item img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .2s;image-rendering:-webkit-optimize-contrast}
.dp-mg-item:hover img{transform:scale(1.04)}
.dp-mg-emoji{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;background:#1a1408}
.dp-mg-likes{position:absolute;bottom:5px;left:5px;background:rgba(0,0,0,.65);color:#fff;font-size:10px;padding:2px 7px;border-radius:6px;font-weight:700;backdrop-filter:blur(4px)}
.dp-mem-fab{display:inline-flex;align-items:center;gap:6px;background:var(--p);color:#fff;border:none;border-radius:22px;padding:.55rem 1.1rem;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 4px 14px rgba(255,92,53,.4);transition:all .2s;margin:.75rem}
.dp-mem-fab:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,92,53,.5)}
.dp-add-form{background:var(--card);border-radius:var(--r);padding:1.1rem;margin:.5rem}
.dp-add-form-title{font-size:1rem;font-weight:900;margin-bottom:.75rem}
/* SELFIE EDITOR */
.dp-selfie-editor{padding:1rem}
.dp-se-title{font-size:1rem;font-weight:900;text-align:center;margin-bottom:.75rem}
.dp-se-canvas-wrap{position:relative;background:#111;border-radius:14px;overflow:hidden;width:100%;margin-bottom:.75rem;touch-action:none;min-height:200px;display:flex;align-items:center;justify-content:center}
.dp-se-canvas-wrap canvas{max-width:100%;max-height:70svh;object-fit:contain;display:block;border-radius:10px}
.dp-se-sticker-layer{position:absolute;inset:0;pointer-events:none}
.dp-se-sticker{position:absolute;pointer-events:all;user-select:none;touch-action:none;cursor:move;display:flex;align-items:center;justify-content:center;border:2px solid transparent;border-radius:6px}
.dp-se-sticker.sel{border-color:rgba(255,255,255,.9)}
.dp-se-sticker-del{position:absolute;top:-11px;right:-11px;width:22px;height:22px;background:var(--p);border-radius:50%;cursor:pointer;color:#fff;font-size:12px;display:none;align-items:center;justify-content:center;font-weight:800;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.dp-se-sticker.sel .dp-se-sticker-del{display:flex}
.dp-se-sticker-resize{position:absolute;bottom:-9px;right:-9px;width:18px;height:18px;background:#fff;border-radius:50%;cursor:se-resize;display:none;box-shadow:0 1px 4px rgba(0,0,0,.4);pointer-events:all}
.dp-se-sticker.sel .dp-se-sticker-resize{display:block}
/* Tool tabs */
.dp-se-tool-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:.65rem}
.dp-se-tt{flex:1;padding:.55rem;text-align:center;font-size:11px;font-weight:800;cursor:pointer;background:none;border:none;color:var(--muted);transition:all .2s;border-bottom:2px solid transparent}
.dp-se-tt.active{color:var(--p);border-bottom-color:var(--p)}
.dp-se-tool-panel{display:none}
.dp-se-tool-panel.active{display:block}
.dp-filter-row,.dp-sticker-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-bottom:.5rem}
.dp-filter-row::-webkit-scrollbar,.dp-sticker-row::-webkit-scrollbar{display:none}
.dp-filter-btn{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;border:none;background:none}
.dp-filter-thumb{width:56px;height:56px;border-radius:10px;border:2.5px solid transparent;overflow:hidden;transition:border-color .2s;font-size:1.5rem;display:flex;align-items:center;justify-content:center;background:#e8e0d8}
.dp-filter-btn.active .dp-filter-thumb{border-color:var(--p)}
.dp-filter-name{font-size:10px;font-weight:700;color:var(--muted)}
.dp-filter-btn.active .dp-filter-name{color:var(--p)}
.dp-sticker-btn{flex-shrink:0;width:48px;height:48px;background:var(--card);border:1px solid var(--line);border-radius:12px;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.dp-sticker-btn:hover{transform:scale(1.12);border-color:var(--p)}
/* Text tool */
.dp-text-tool{padding:.5rem 0}
.dp-tt-in{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:.6rem .85rem;font-family:'Nunito',sans-serif;font-size:14px;font-weight:700;outline:none;margin-bottom:.5rem;background:var(--card)}
.dp-tt-in:focus{border-color:var(--p)}
.dp-text-colors{display:flex;gap:6px;margin-bottom:.5rem;flex-wrap:wrap}
.dp-tc{width:28px;height:28px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:border-color .15s}
.dp-tc.active{border-color:var(--ink);box-shadow:0 0 0 2px rgba(0,0,0,.2)}
.dp-text-sizes{display:flex;gap:6px;margin-bottom:.6rem}
.dp-ts{border:1.5px solid var(--line);background:none;border-radius:8px;padding:.25rem .65rem;font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;cursor:pointer;color:var(--muted);transition:all .2s}
.dp-ts.active{border-color:var(--p);color:var(--p);background:rgba(255,92,53,.08)}
.dp-btn-add-txt{width:100%;background:var(--ink);color:#fff;border:none;border-radius:10px;padding:.6rem;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer}
/* Se actions */
.dp-se-actions{display:flex;gap:8px;margin-top:.5rem}
.dp-se-save-note{font-size:10px;color:var(--muted);text-align:center;margin-top:.5rem;font-weight:700}
/* MESSAGES */
.dp-msg-list{padding:.75rem 1rem;display:flex;flex-direction:column;gap:8px}
.dp-msg-c{background:var(--card);border-radius:12px;padding:.75rem .9rem;border:1px solid var(--line);border-left:3px solid var(--p)}
.dp-msg-auth{font-size:11px;font-weight:800;color:var(--p);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.2rem}
.dp-msg-txt{font-size:13px;line-height:1.55;font-weight:600}
.dp-msg-form{background:var(--card);border-radius:var(--r);padding:1rem;margin:0 1rem 1rem;border:1px solid var(--line)}
/* RSVP */
.dp-rsvp-tab{padding:1rem}
.dp-rsvp-hero{background:var(--p);border-radius:16px;padding:1.35rem;color:#fff;text-align:center;margin-bottom:1rem}
.dp-rsvp-hero h2{font-size:1.4rem;font-weight:900;margin-bottom:.35rem}
.dp-rsvp-hero p{font-size:12px;opacity:.85;line-height:1.65;font-weight:600}
.dp-rsvp-step{display:none}.dp-rsvp-step.active{display:block}
.dp-fg{margin-bottom:.75rem}
.dp-lbl{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.3rem}
.dp-field{width:100%;padding:.6rem .85rem;border:1.5px solid var(--line);border-radius:10px;font-size:13px;font-weight:600;color:var(--ink);outline:none;background:var(--card);transition:border-color .2s}
.dp-field:focus{border-color:var(--p)}
.dp-field::placeholder{color:#c0b0a8;font-weight:400}
.dp-field-ta{min-height:65px;resize:none}
.dp-fg-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dp-btn-main{width:100%;background:var(--p);color:#fff;border:none;border-radius:12px;padding:.8rem;font-size:14px;font-weight:900;cursor:pointer;transition:all .2s;display:block;text-align:center}
.dp-btn-main:hover{opacity:.9;transform:translateY(-1px)}
.dp-btn-main:disabled{opacity:.38;cursor:default;transform:none}
.dp-notice{padding:.65rem .9rem;border-radius:10px;font-size:13px;font-weight:700;margin-bottom:.75rem}
.dp-notice-ok{background:#e8f8f0;color:#1a5a34;border:1px solid #b0e4c4}
.dp-notice-err{background:#fdf0ee;color:var(--p);border:1px solid #f5c4b0}
/* SELFIE SURPRISE */
.dp-selfie-surprise{text-align:center;padding:1.25rem 0 1rem}
.dp-ss-icon{font-size:3.5rem;margin-bottom:.75rem;display:block;animation:dpBounce .8s ease}
@keyframes dpBounce{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.dp-ss-title{font-size:1.5rem;font-weight:900;margin-bottom:.35rem}
.dp-ss-sub{font-size:13px;color:var(--muted);line-height:1.65;font-weight:600;margin-bottom:1.25rem}
/* DESKTOP SELFIE CARDS */
.dp-selfie-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:1rem}
.dp-selfie-card{background:var(--card);border-radius:var(--r);padding:1.1rem .9rem;border:1px solid var(--line);text-align:center;box-shadow:var(--sh)}
.dp-sc-icon{width:44px;height:44px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin:0 auto .65rem}
.dp-selfie-card h3{font-size:13px;font-weight:800;margin-bottom:.35rem}
.dp-selfie-card p{font-size:11px;color:var(--muted);line-height:1.5;margin-bottom:.75rem;font-weight:600}
.dp-sc-btn{width:100%;background:var(--ink);color:#fff;border:none;border-radius:8px;padding:.55rem;font-size:12px;font-weight:800;cursor:pointer;margin-bottom:.4rem}
.dp-sc-quote{font-size:10px;color:var(--muted);font-style:italic;line-height:1.4;font-weight:600}
.dp-qr-box{width:90px;height:90px;background:#fff;border:1px solid var(--line);border-radius:8px;margin:.4rem auto;padding:4px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dp-qr-box canvas,.dp-qr-box img{width:100%!important;height:100%!important}
.dp-sync-row{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;font-weight:800;margin:.35rem 0}
.dp-sync-dot{width:7px;height:7px;border-radius:50%;background:var(--y);animation:dpPulse 1.5s ease-in-out infinite;flex-shrink:0}
.dp-sync-dot.ok{background:var(--g);animation:none}
.dp-sync-timer{font-size:10px;color:var(--muted);text-align:center;font-weight:700}
.dp-live-badge{font-size:10px;font-weight:800;color:var(--g);text-align:center;margin-top:.4rem}
/* FOTO PREV */
.dp-foto-prev{width:100%;aspect-ratio:3/4;background:#e8e0d8;border-radius:14px;overflow:hidden;margin-bottom:.9rem;display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--muted);position:relative;border:2px dashed var(--line)}
.dp-foto-prev img{width:100%;height:100%;object-fit:cover;display:block}
/* WEBCAM */
.dp-cam-wrap{position:relative;width:100%;background:#111;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:.75rem;border-radius:12px}
.dp-cam-wrap video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.dp-cam-guide{position:absolute;width:130px;height:160px;border:2px dashed rgba(255,255,255,.3);border-radius:50%;pointer-events:none}
.dp-cam-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:#fff;font-size:13px;text-align:center;background:rgba(17,17,17,.82);padding:1rem;border-radius:12px;font-weight:600}
.dp-cam-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .08s;border-radius:12px}
.dp-cam-cd{position:absolute;font-size:5rem;font-weight:900;color:#fff;animation:dpCdIn .35s ease}
@keyframes dpCdIn{from{transform:scale(1.4);opacity:0}to{transform:scale(1);opacity:1}}
/* FORMS */
.dp-field-row{display:flex;gap:8px;margin-bottom:.5rem}
.dp-or-split{display:flex;align-items:center;gap:10px;width:100%;margin:.65rem 0;font-size:11px;color:var(--muted);font-weight:700}
.dp-or-split div{flex:1;height:1px;background:var(--line)}
.dp-progress-bar{width:100%;height:3px;background:var(--line);border-radius:2px;margin-bottom:.75rem}
.dp-progress-fill{height:3px;background:var(--p);width:0;border-radius:2px;transition:width .07s}
.dp-upload-zone{border:2px dashed var(--line);border-radius:12px;padding:1.35rem 1rem;text-align:center;cursor:pointer;transition:border-color .2s;display:flex;flex-direction:column;align-items:center;gap:.25rem;margin-bottom:.75rem}
.dp-upload-zone:hover{border-color:var(--p)}
.dp-upload-zone strong{font-size:13px;font-weight:800}
.dp-upload-zone span{font-size:11px;color:var(--muted);font-weight:700}
.dp-emoji-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:.75rem}
.dp-ep{font-size:1.3rem;cursor:pointer;padding:4px 8px;border:1.5px solid transparent;border-radius:8px;transition:all .15s;line-height:1}
.dp-ep:hover{border-color:var(--line)}.dp-ep.sel{border-color:var(--p);background:rgba(255,92,53,.08)}
.dp-cat-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:.85rem}
.dp-cat-btn{border:1.5px solid var(--line);background:var(--card);padding:.28rem .7rem;font-size:11px;cursor:pointer;color:var(--muted);border-radius:20px;transition:all .15s;font-weight:700}
.dp-cat-btn:hover{border-color:var(--ink);color:var(--ink)}.dp-cat-btn.sel{border-color:var(--ink);background:var(--ink);color:#fff}
/* SEC HEADERS */
.dp-sec-hdr{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem .5rem}
.dp-sec-hdr h2{font-size:1.1rem;font-weight:900}
.dp-hdr-badge{background:var(--p);color:#fff;font-size:10px;font-weight:800;padding:.2rem .65rem;border-radius:20px}
/* INFOS */
.dp-info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;padding:1rem;margin-bottom:.5rem}
.dp-ic{background:var(--card);border-radius:var(--r);padding:.9rem;border:1px solid var(--line)}
.dp-ic-icon{font-size:1.1rem;margin-bottom:.4rem;display:block}
.dp-ic-lbl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:.2rem}
.dp-ic-val{font-weight:800;font-size:.9rem;line-height:1.35}
.dp-ic-hint{font-size:11px;color:var(--muted);margin-top:3px;font-style:italic;font-weight:600}
/* BRING */
.dp-bring-list{display:flex;flex-direction:column;gap:6px;padding:0 1rem 1rem}
.dp-bi{display:flex;align-items:center;justify-content:space-between;padding:.65rem .9rem;background:var(--card);border-radius:12px;border:1px solid var(--line);gap:10px}
.dp-bi-done{background:#f5fff8}
.dp-bi-l{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.dp-bi-e{font-size:1.1rem;flex-shrink:0}
.dp-bi-name{font-weight:800;font-size:13px}
.dp-bi-by{font-size:11px;color:var(--g);font-style:italic;margin-top:2px;font-weight:700}
.dp-claim-btn{border:1.5px solid var(--ink);background:transparent;color:var(--ink);padding:.28rem .75rem;font-size:11px;font-weight:800;cursor:pointer;border-radius:20px;transition:all .15s}
.dp-claim-btn:hover{background:var(--ink);color:#fff}.dp-claim-btn:disabled{opacity:.35;cursor:default}
/* LIGHTBOX */
.dp-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:99999;display:flex;align-items:center;justify-content:center;padding:.5rem;cursor:pointer}
.dp-lightbox img{max-width:100%;max-height:96svh;object-fit:contain}
.dp-lightbox-close{position:absolute;top:1rem;right:1.25rem;color:#fff;font-size:2rem;cursor:pointer;background:none;border:none;line-height:1;font-weight:300}
@keyframes dpHeartFloat{0%{opacity:1;transform:translate(-50%,-50%) scale(0)}40%{opacity:1;transform:translate(-50%,-80%) scale(1.6)}100%{opacity:0;transform:translate(-50%,-180%) scale(1)}}
.dp-heart-float{position:absolute;pointer-events:none;animation:dpHeartFloat .9s ease forwards;z-index:20;font-size:2.5rem;left:50%;top:50%}
@media(max-width:480px){.dp-fg-grid,.dp-selfie-cards{grid-template-columns:1fr}.dp-rsvp-tab{padding:.85rem}.dp-add-form{margin:.4rem;padding:.9rem}}

/* Memory wall improvements v6 */
.dp-reel-caption { max-height: 4.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.dp-reel-content { padding-right: 64px; /* space for action buttons */ }
.dp-cmt-drawer { box-shadow: 0 -4px 20px rgba(0,0,0,.12); }
/* Grid item hover effect */
.dp-mg-item { transition: opacity .2s; }
.dp-mg-item:active { opacity: .85; }
/* Add memory form improvements */
.dp-add-form { box-shadow: 0 2px 12px rgba(0,0,0,.06); }
/* Better reel empty state */
.dp-mem-wall-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;color:rgba(255,255,255,.5);text-align:center;padding:2rem; }
/* Sticker layer pointer events */
.dp-se-sticker-layer { pointer-events:none; }
.dp-se-sticker { pointer-events:all; }
/* Canvas fit fix */
.dp-se-canvas-wrap canvas { max-width:100%; max-height:70svh; width:auto; height:auto; object-fit:contain; display:block; border-radius:10px; margin:0 auto; }
/* Wider on desktop */
@media(min-width:600px){ .dp-app { border-left:1px solid var(--line); border-right:1px solid var(--line); } }
/* Memory photo quality */
.dp-reel-bg img { image-rendering:auto; backface-visibility:hidden; transform:translateZ(0); }

/* ── REEL FIXES v7 ── */
/* Remove share button space */
.dp-reel-actions { right: 12px; bottom: 90px; gap: 20px; }
/* Counter in reel */
.dp-reel-counter { font-size: 11px; color: rgba(255,255,255,.5); font-weight: 700; margin-top: .5rem; letter-spacing: .04em; }
.dp-mem-counter { color: #fff; font-size: 11px; font-weight: 800; background: rgba(255,255,255,.15); padding: 3px 8px; border-radius: 20px; }
/* Comments drawer bigger + nicer */
.dp-cmt-drawer { border-radius: 22px 22px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,.15); }
.dp-cmt-drawer.open { max-height: 420px; overflow: visible; }
.dp-cmt-row { background: var(--soft); border-radius: 12px; padding: .5rem; gap: 6px; }
.dp-cmt-name-in { font-weight: 800; }
/* Reel content no share padding needed */
.dp-reel-content { padding-right: 72px; padding-bottom: 1rem; }

/* ── BRING FORM v7 ── */
.dp-bring-teaser { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border-radius: 14px; padding: 1rem; margin: 0 0 .75rem; border: 1px solid var(--line); }
.dp-bring-teaser-icon { font-size: 1.75rem; flex-shrink: 0; }
.dp-bring-teaser-title { font-size: 13px; font-weight: 800; line-height: 1.4; margin-bottom: .25rem; }
.dp-bring-teaser-title em { font-style: italic; color: var(--p); }
.dp-bring-teaser-sub { font-size: 11px; color: var(--muted); font-weight: 600; line-height: 1.5; }
.dp-bring-add-form { background: var(--card); border-radius: 14px; padding: 1rem; margin-top: .75rem; border: 1px solid var(--line); border-left: 3px solid var(--p); }
.dp-bring-add-title { font-size: 13px; font-weight: 900; margin-bottom: .65rem; }
.dp-bring-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dp-claim-ok { background: var(--g); color: #fff; border-color: var(--g); }

/* ── SELFIE EDITOR ── */
.dp-se-canvas-wrap { background: #111; border-radius: 14px; overflow: hidden; width: 100%; margin-bottom: .75rem; display: flex; align-items: center; justify-content: center; min-height: 180px; }
.dp-se-canvas-wrap img { max-width: 100%; max-height: 65svh; object-fit: contain; display: block; border-radius: 10px; width: 100%; }
/* Sticker layer must cover the image exactly */
.dp-se-sticker-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.dp-se-canvas-wrap { position: relative; }

/* ── DESKTOP BORDER ── */
@media(min-width: 720px) {
  .dp-app { box-shadow: 0 0 40px rgba(0,0,0,.1); }
}

/* ══ POPUP v8 ══ */
.dp-mem-popup { position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end; }
.dp-mem-popup-bg { position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(4px); }
.dp-mem-popup-inner { position:relative;background:var(--card);border-radius:22px 22px 0 0;width:100%;max-height:92svh;overflow-y:auto;z-index:1;animation:dpSlideUp .3s cubic-bezier(.25,.46,.45,.94); }
@keyframes dpSlideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.dp-mem-popup-media { width:100%;aspect-ratio:16/9;overflow:hidden;background:#111;position:relative;border-radius:22px 22px 0 0; }
.dp-mem-popup-media img { width:100%;height:100%;object-fit:cover;object-position:center;display:block; }
.dp-mem-popup-body { padding:1rem 1.1rem; }
.dp-mem-popup-user { display:flex;align-items:center;gap:10px;margin-bottom:.5rem; }
.dp-mem-popup-av { width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;color:#fff;flex-shrink:0; }
.dp-mem-popup-name { font-size:14px;font-weight:800; }
.dp-mem-popup-time { font-size:11px;color:var(--muted);font-weight:600; }
.dp-mem-popup-close { margin-left:auto;background:var(--soft);border:none;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:14px;font-weight:700;flex-shrink:0; }
.dp-mem-popup-tag { font-size:11px;font-weight:800;color:var(--p);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.3rem; }
.dp-mem-popup-text { font-size:14px;line-height:1.6;font-weight:600;color:var(--ink);margin-bottom:.85rem; }
.dp-mem-popup-actions { display:flex;gap:10px;margin-bottom:.75rem;padding-bottom:.75rem;border-bottom:1px solid var(--line); }
.dp-popup-like-btn { display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:transparent;border-radius:20px;padding:.4rem .9rem;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer;color:var(--ink);transition:all .2s; }
.dp-popup-like-btn:hover { border-color:var(--p);color:var(--p); }
.dp-popup-cmt-toggle { display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:transparent;border-radius:20px;padding:.4rem .9rem;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer;color:var(--ink);transition:all .2s; }
.dp-popup-cmt-toggle:hover { border-color:var(--b);color:var(--b); }
.dp-popup-comments { background:var(--soft);border-radius:12px;padding:.75rem; }
.dp-popup-cmt-list { display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;margin-bottom:.75rem; }
.dp-popup-cmt-form { display:flex;flex-direction:column;gap:6px; }
.dp-popup-cmt-form .dp-field { margin:0; }
.dp-popup-cmt-form .dp-cmt-send { align-self:flex-end; }

/* Swipe hint */
.dp-swipe-hint { position:absolute;bottom:80px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.4);font-size:12px;font-weight:700;text-align:center;pointer-events:none;z-index:5;letter-spacing:.04em; }

/* Reel hint */


/* Heartbeat animation */
@keyframes dpHB { 0%{transform:scale(1)} 30%{transform:scale(1.5)} 60%{transform:scale(.9)} 100%{transform:scale(1)} }

/* Sticker layer must sit over image */
#dp-se-canvas-wrap { position:relative; }
.dp-se-sticker-layer { position:absolute;inset:0;pointer-events:none;z-index:10; }
.dp-se-sticker { pointer-events:all; }
.dp-se-img { position:relative;z-index:1; }

/* Better claim btn in bring */
.dp-claim-btn { white-space:nowrap; }

/* ═══════════════════════════════════
   TIKTOK-STYLE REELS v9
   ═══════════════════════════════════ */

/* Video element in reel */
.dp-reel-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  cursor: pointer;
}

/* Reel overlay layers */
.dp-reel-bg {
  position: absolute; inset: 0;
  overflow: hidden;
}
.dp-reel-bg img, .dp-reel-bg video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.dp-reel-grad {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.3) 35%,
    rgba(0,0,0,0) 65%
  );
  pointer-events: none;
}

/* RIGHT action bar – TikTok style */
.dp-reel-actions {
  position: absolute;
  right: 12px;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  z-index: 10;
}
.dp-ra {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; text-decoration: none;
}
.dp-ra-ic {
  width: 44px; height: 44px;
  background: rgba(255,255,255,.12);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  backdrop-filter: blur(4px);
  transition: transform .2s, background .2s;
}
.dp-ra:active .dp-ra-ic { transform: scale(.88); background: rgba(255,255,255,.22); }
.dp-ra-cnt {
  font-size: 11px; color: #fff; font-weight: 800;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  text-align: center; min-width: 20px;
}
.dp-ra-more .dp-ra-ic { font-size: 1.1rem; }

/* BOTTOM content – TikTok style */
.dp-reel-content {
  position: absolute;
  bottom: 0; left: 0; right: 68px; /* leave space for action bar */
  z-index: 10;
  padding: .85rem .9rem 1rem;
}
.dp-reel-user {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: .45rem;
}
.dp-reel-av {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 800; color: #fff; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.dp-reel-uname { font-size: 14px; font-weight: 800; color: #fff; }
.dp-reel-time { font-size: 11px; color: rgba(255,255,255,.6); font-weight: 600; margin-left: 4px; }
.dp-reel-tag { font-size: 11px; color: var(--y); font-weight: 800; margin-bottom: .25rem; display: block; }
.dp-reel-caption {
  font-size: 13px; color: #fff; line-height: 1.5; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dp-reel-caption.expanded { -webkit-line-clamp: unset; overflow: visible; }
.dp-reel-expand {
  background: none; border: none; color: rgba(255,255,255,.6);
  font-size: 12px; font-weight: 700; cursor: pointer; padding: 0;
  font-family: 'Nunito', sans-serif; margin-top: 2px; display: block;
}
.dp-reel-hint { display:none !important; }

/* Progress bar at bottom of reel */
.dp-reel-progress {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: rgba(255,255,255,.2); z-index: 11;
}
.dp-reel-progress-fill {
  height: 100%; background: #fff; width: 0;
  transition: width .25s linear;
}

/* Video pause overlay */
.dp-reel-pause-ic {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; opacity: 0;
  pointer-events: none; z-index: 9;
  transition: opacity .15s;
}
.dp-reel.paused .dp-reel-pause-ic { opacity: .7; }

/* FAB – floating + button */
.dp-mem-fab {
  position: fixed;
  bottom: calc(70px + env(safe-area-inset-bottom));
  right: 16px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--p);
  color: #fff; font-size: 1.7rem; font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  box-shadow: 0 4px 16px rgba(255,92,53,.5);
  z-index: 100;
  transition: transform .2s, box-shadow .2s;
  line-height: 1;
}
.dp-mem-fab:hover { transform: scale(1.08); box-shadow: 0 6px 22px rgba(255,92,53,.6); }
.dp-mem-fab:active { transform: scale(.94); }
/* Hide FAB when not on memory tab */
.dp-mem-fab { display: none; }
#tab-memory.active ~ * .dp-mem-fab,
.dp-mem-fab.visible { display: flex; }

/* Nav dots improvements */
.dp-mem-nav {
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 4px; z-index: 10;
}
.dp-mem-dot {
  width: 3px; height: 14px; border-radius: 2px;
  background: rgba(255,255,255,.3); transition: all .3s;
}
.dp-mem-dot.active { background: #fff; height: 20px; }
.dp-mem-counter {
  color: #fff; font-size: 11px; font-weight: 800;
  background: rgba(0,0,0,.4); padding: 3px 8px; border-radius: 20px;
  backdrop-filter: blur(4px);
}

/* Swipe hint */
.dp-swipe-hint {
  position: absolute; bottom: 12px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.45); font-size: 12px; font-weight: 700;
  text-align: center; pointer-events: none; z-index: 5;
  white-space: nowrap;
}

/* ═══════════════════════════════════
   MITBRINGEN v9 – form on top, padded
   ═══════════════════════════════════ */
.dp-bring-add-form {
  background: var(--card);
  border-radius: 16px;
  padding: 1.1rem 1rem;
  margin: 1rem 1rem 0;
  border: 1px solid var(--line);
  border-top: 3px solid var(--p);
}
.dp-bring-add-title {
  font-size: 14px; font-weight: 900; margin-bottom: .75rem;
}
.dp-bring-add-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: .5rem;
}
.dp-bring-emoji-in {
  width: 64px !important; text-align: center;
  font-size: 1.4rem !important; padding: .5rem .3rem !important;
  cursor: pointer;
}
.dp-bring-teaser {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--card); border-radius: 14px; padding: 1rem 1rem;
  margin: .75rem 1rem 0; border: 1px solid var(--line);
}
.dp-bring-teaser-icon { font-size: 1.6rem; flex-shrink: 0; }
.dp-bring-teaser-title { font-size: 13px; font-weight: 800; line-height: 1.4; margin-bottom: .2rem; }
.dp-bring-teaser-title em { font-style: italic; color: var(--p); }
.dp-bring-teaser-sub { font-size: 11px; color: var(--muted); font-weight: 600; line-height: 1.5; }
.dp-bring-list { display: flex; flex-direction: column; gap: 6px; padding: .75rem 1rem 1rem; }
.dp-bi { display: flex; align-items: center; justify-content: space-between; padding: .65rem .9rem; background: var(--card); border-radius: 12px; border: 1px solid var(--line); gap: 10px; }
.dp-bi-done { background: #f5fff8; }
.dp-bi-l { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.dp-bi-e { font-size: 1.2rem; flex-shrink: 0; }
.dp-bi-name { font-weight: 800; font-size: 13px; }
.dp-bi-by { font-size: 11px; color: var(--g); font-style: italic; margin-top: 2px; font-weight: 700; }
.dp-claim-btn { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); padding: .3rem .8rem; font-size: 11px; font-weight: 800; cursor: pointer; border-radius: 20px; transition: all .15s; white-space: nowrap; }
.dp-claim-btn:hover { background: var(--ink); color: #fff; }
.dp-claim-btn:disabled { opacity: .35; cursor: default; }

/* ═══════════════════════════════════
   GRÜSSE v9 – card redesign
   ═══════════════════════════════════ */
.dp-msg-wall {
  padding: 1rem 1rem .5rem;
  display: flex; flex-direction: column; gap: 10px;
}
.dp-msg-card {
  background: var(--card);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.dp-msg-card::before {
  content: '"';
  position: absolute; top: -4px; left: 10px;
  font-size: 4rem; color: var(--p); opacity: .12;
  font-family: serif; line-height: 1; pointer-events: none;
}
.dp-msg-card-header {
  display: flex; align-items: center; gap: 9px; margin-bottom: .5rem;
}
.dp-msg-card-av {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.dp-msg-card-name { font-size: 13px; font-weight: 800; color: var(--ink); }
.dp-msg-card-text {
  font-size: 13px; line-height: 1.65; font-weight: 600;
  color: #444; font-style: italic;
}
/* Write new message */
.dp-msg-compose {
  background: var(--card);
  border-radius: 16px;
  padding: 1.1rem 1rem;
  margin: 0 1rem 1rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--b);
}
.dp-msg-compose-title {
  font-size: 14px; font-weight: 900; margin-bottom: .65rem;
  display: flex; align-items: center; gap: 6px;
}

/* ═══════════════════════════════════
   THREE-DOTS MENU
   ═══════════════════════════════════ */
.dp-reel-menu {
  position: absolute;
  right: 10px; top: 10px;
  background: rgba(0,0,0,.5);
  border-radius: 20px;
  display: none;
  flex-direction: column;
  z-index: 20;
  overflow: hidden;
  backdrop-filter: blur(8px);
  min-width: 160px;
}
.dp-reel-menu.open { display: flex; animation: dpFadeUp .15s ease; }
.dp-reel-menu-item {
  padding: .65rem 1rem;
  font-size: 13px; font-weight: 700; color: #fff;
  cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.1);
  background: none; border-left: none; border-right: none; border-top: none;
  text-align: left; font-family: 'Nunito', sans-serif;
}
.dp-reel-menu-item:last-child { border-bottom: none; }
.dp-reel-menu-item:hover { background: rgba(255,255,255,.1); }

@media(max-width:480px) {
  .dp-bring-add-form, .dp-bring-teaser { margin-left: .75rem; margin-right: .75rem; }
}

/* ═══════════════════════════
   MOBILE vs DESKTOP MEMORY v10
   ═══════════════════════════ */

/* MOBILE: shown on small screens */
.dp-mem-mobile { display: block; }
.dp-mem-desktop { display: none; }

/* Toggle sits at very top */
.dp-mem-toggle-top {
  position: sticky; top: 0; z-index: 50;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  display: flex;
}
.dp-mt-add { color: var(--p) !important; font-weight: 900 !important; }

/* REEL fills remaining screen */
.dp-mem-wall {
  background: #000;
  position: relative;
  overflow: hidden;
  height: calc(100svh - 107px); /* bot-nav + toggle */
}
.dp-reel {
  width: 100%;
  height: calc(100svh - 107px);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* Desktop: show 2-column grid */
@media (min-width: 700px) {
  .dp-mem-mobile  { display: none !important; }
  .dp-mem-desktop { display: block !important; }
  /* Popup is smaller on desktop */
  .dp-mem-popup-inner {
    max-width: 600px;
    border-radius: 16px;
    margin: auto;
    max-height: 85svh;
  }
  .dp-mem-popup { align-items: center; justify-content: center; }
  .dp-mem-popup-media { aspect-ratio: 4/3; border-radius: 16px 16px 0 0; }
  /* popup does NOT fill whole screen on desktop */
  .dp-mem-popup-bg { background: rgba(0,0,0,.6); backdrop-filter: blur(6px); }
}

/* Desktop layout */
.dp-desk-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
  min-height: calc(100svh - 65px);
  max-height: calc(100svh - 65px);
}
.dp-desk-grid-col {
  overflow-y: auto;
  border-right: 1px solid var(--line);
  padding: .75rem;
}
.dp-desk-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .75rem;
}
.dp-desk-grid { gap: 8px; }
.dp-desk-detail-col {
  overflow-y: auto;
  padding: 1rem;
  position: sticky; top: 0;
}
.dp-desk-detail-empty {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: var(--muted);
}
.dp-desk-detail { animation: dpFadeUp .2s ease; }
.dp-desk-detail-media {
  width: 100%; aspect-ratio: 4/3;
  background: #111; border-radius: 12px; overflow: hidden; margin-bottom: .85rem;
}
.dp-desk-detail-media img, .dp-desk-detail-media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
.dp-desk-add-panel {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.dp-desk-add-inner {
  background: var(--card); border-radius: 16px; padding: 1.25rem;
  width: 100%; max-width: 480px; max-height: 90svh; overflow-y: auto;
}

/* Grid – tap to expand */
.dp-mg-item { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.dp-mg-item:hover { transform: scale(1.03); box-shadow: 0 4px 16px rgba(0,0,0,.25); z-index: 2; position: relative; }
.dp-mg-item.expanded-grid {
  grid-column: span 2;
  grid-row: span 2;
}

/* TEXT POST styles in reel */
.dp-reel-textpost {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.25rem;
}
.dp-reel-textpost-inner {
  text-align: center;
  max-width: 90%;
}
.dp-reel-textpost-text {
  font-weight: 900; line-height: 1.25;
  text-shadow: 0 2px 10px rgba(0,0,0,.3);
}
/* Short text = BIG, long text = smaller */
.dp-reel-textpost-text.short { font-size: clamp(1.8rem, 7vw, 3rem); }
.dp-reel-textpost-text.medium { font-size: clamp(1.2rem, 4.5vw, 1.8rem); }
.dp-reel-textpost-text.long   { font-size: clamp(.95rem, 3vw, 1.3rem); }

/* TEXT POST PREVIEW in add form */
.dp-textpost-preview {
  width: 100%; aspect-ratio: 4/3;
  border-radius: 12px; background: #1a1a1a;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem; text-align: center; margin-bottom: .65rem;
  transition: background .2s;
}
.dp-textpost-controls { margin-bottom: .65rem; }
.dp-tp-row { margin-bottom: .5rem; }
.dp-color-swatch-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: .3rem; }
.dp-cs {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  border: 3px solid transparent; transition: transform .15s, border-color .15s;
}
.dp-cs:hover { transform: scale(1.15); }
.dp-cs.active { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(0,0,0,.2); }

/* POST TYPE TABS */
.dp-post-type-tabs { display: flex; gap: 6px; }
.dp-pt-tab {
  flex: 1; padding: .5rem; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--soft); font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 800;
  cursor: pointer; color: var(--muted); transition: all .15s;
}
.dp-pt-tab.active { background: var(--p); color: #fff; border-color: var(--p); }

/* HEART + COMMENT animation */
@keyframes dpHeartPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.7); }
  60%  { transform: scale(.85); }
  80%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes dpCmtBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4) rotate(-8deg); }
  70%  { transform: scale(.9) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
.dp-ra-like.liked .dp-ra-ic  { animation: dpHeartPop .5s ease; }
.dp-ra-cmt.bumped .dp-ra-ic  { animation: dpCmtBounce .45s ease; }

/* Scrolling fix – ensure tabs can scroll */
.dp-tab { overflow-y: auto; }
#tab-memory { overflow: hidden; } /* memory uses its own scroll */
#tab-home, #tab-gruesse, #tab-infos, #tab-rsvp { overflow-y: auto; }
body.dp-no-chrome { overflow-y: auto !important; }
.dp-page-content { overflow-x: hidden; }

/* Popup comments always visible */
.dp-popup-comments { display: block !important; }
.dp-popup-cmt-list { max-height: 180px; overflow-y: auto; }

/* Reel navigation arrows */
.dp-reel-arrow {
  position: absolute; top: 50%; z-index: 10;
  transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.15); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff; cursor: pointer;
  transition: background .2s;
  border: none;
}
.dp-reel-arrow:hover { background: rgba(255,255,255,.28); }



/* Popup always shows comments */
.dp-popup-comments { display: block !important; background: var(--soft); border-radius: 12px; padding: .75rem; margin-top: .5rem; }

/* Fix dp-view-add scrolling */
#dp-view-add {
  overflow-y: auto;
  max-height: calc(100svh - 110px);
  padding: .75rem;
  background: var(--soft);
}
/* Fix dp-view-grid scrolling */
#dp-view-grid {
  overflow-y: auto;
  max-height: calc(100svh - 110px);
  background: var(--soft);
}
/* dp-tab overflow fix */
#tab-home, #tab-gruesse, #tab-infos, #tab-rsvp {
  overflow-y: auto;
  min-height: 50px;
}
#tab-memory {
  overflow: visible;
}

/* ── REEL ARROWS v12 – up/down ── */
.dp-reel-arrow-u, .dp-reel-arrow-d {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.18); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: #fff; cursor: pointer;
  border: none; transition: background .2s;
  font-weight: 700; line-height: 1;
}
.dp-reel-arrow-u { top: 12px; }
.dp-reel-arrow-d { bottom: 56px; } /* above content */
.dp-reel-arrow-u:hover, .dp-reel-arrow-d:hover { background: rgba(255,255,255,.3); }

/* Reel bottom spacing on desktop */
@media(min-width:700px){
  .dp-mem-wall { margin-bottom: .75rem; border-radius: 14px; overflow: hidden; }
  .dp-reel { border-radius: 14px; }
  #tab-memory { padding-bottom: .75rem; }
}

/* ── GRÜSSE v12 ── */
.dp-msg-compose {
  margin: 1rem 1rem .5rem;
  padding: 1.1rem 1rem;
}
.dp-msg-compose .dp-fg-grid { margin-bottom: .6rem; }
.dp-msg-wall { padding: .5rem 1rem 1rem; }
.dp-msg-card { position: relative; padding: 1rem 1.1rem 1rem 1.4rem; }
/* Quote marks: open top-left, close bottom-right */
.dp-msg-card::before {
  content: '\201C';
  position: absolute; top: -2px; left: 8px;
  font-size: 3.5rem; color: var(--p); opacity: .2;
  font-family: Georgia,serif; line-height: 1; pointer-events: none;
}
.dp-msg-card::after {
  content: '\201D';
  position: absolute; bottom: -8px; right: 10px;
  font-size: 3.5rem; color: var(--p); opacity: .2;
  font-family: Georgia,serif; line-height: 1; pointer-events: none;
}

/* ── STICKER LAYER v12 ── */
/* Layer must cover the IMAGE exactly */
.dp-se-canvas-wrap {
  position: relative;
  background: #111;
  border-radius: 14px;
  overflow: hidden;
  width: 100%;
  margin-bottom: .75rem;
  /* height determined by image */
  display: block;
}
.dp-se-img {
  width: 100%;
  height: auto;
  max-height: 60svh;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.dp-se-sticker-layer {
  position: absolute;
  /* Will be set by JS to match image bounds */
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}
.dp-se-sticker { pointer-events: all; }

/* ── FLYING HEARTS ── */
@keyframes dpFlyHeart {
  0%   { opacity:1; transform: translateY(0) scale(1); }
  100% { opacity:0; transform: translateY(-60px) scale(0.5); }
}

/* ── GRID open animation ── */
.dp-mg-item { cursor: pointer; transition: transform .15s ease, box-shadow .15s; }
.dp-mg-item:hover { transform: scale(1.04); box-shadow: 0 6px 20px rgba(0,0,0,.35); z-index: 2; position: relative; }
.dp-mg-item:active { transform: scale(.95) !important; }

/* ═══════════════════════════════════
   REEL CLICK ZONES v14
   ═══════════════════════════════════ */
.dp-reel-zone {
  position: absolute;
  left: 0; right: 0;
  z-index: 8;
  cursor: pointer;
}
.dp-reel-zone-top {
  top: 0;
  height: 22%;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12px;
}
.dp-reel-zone-bot {
  bottom: 0;
  height: 22%;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 12px;
}
.dp-reel-zone-mid {
  top: 22%;
  height: 56%;
  /* No arrow, just clickable */
}
/* Arrow pill: centered circle */
.dp-reel-arrow-pill {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: #fff; font-weight: 700;
  line-height: 1;
  transition: background .2s;
  border: 1.5px solid rgba(255,255,255,.2);
  pointer-events: none; /* zone handles click */
}
.dp-reel-zone:hover .dp-reel-arrow-pill {
  background: rgba(255,255,255,.3);
}
/* Remove old arrows */
.dp-reel-arrow-u, .dp-reel-arrow-d,
.dp-reel-arrow-l, .dp-reel-arrow-r { display: none !important; }

/* ═══════════════════════════════════
   GRID BADGES – heart + comment count
   ═══════════════════════════════════ */
.dp-mg-badges {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex; gap: 6px; justify-content: center;
  padding: 4px 6px;
  background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, transparent 100%);
  font-size: 11px; font-weight: 800; color: #fff;
}
.dp-mg-badges span {
  display: flex; align-items: center; gap: 3px;
}

/* ═══════════════════════════════════
   ABBRECHEN BUTTON – styled
   ═══════════════════════════════════ */
.dp-btn-cancel {
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: .75rem;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: var(--muted);
  font-family: 'Nunito', sans-serif;
  transition: all .2s;
  display: block;
  text-align: center;
  margin-top: .5rem;
}
.dp-btn-cancel:hover {
  border-color: var(--p);
  color: var(--p);
  background: rgba(255,92,53,.04);
}

/* ═══════════════════════════════════
   BOTTOM NAV – better icons via SVG
   ═══════════════════════════════════ */
.dp-bn { font-size: 9px; gap: 2px; }
.dp-bn-iw { font-size: 1.1rem; }
.dp-bn svg {
  width: 22px; height: 22px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
  margin: 0 auto;
}

/* ═══════════════════════════════════
   STICKER LAYER – fixed for web
   ═══════════════════════════════════ */
#dp-se-canvas-wrap {
  display: block !important; /* not flex – so offsetLeft works */
  position: relative;
  background: #111;
  border-radius: 14px;
  overflow: hidden;
  width: 100%;
  margin-bottom: .75rem;
  line-height: 0; /* no extra space below img */
}
#dp-se-canvas-wrap .dp-se-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 58svh;
  object-fit: contain;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}
.dp-se-sticker-layer {
  position: absolute;
  /* positioned by JS via offsetLeft/offsetTop */
  pointer-events: auto;
  z-index: 10;
  overflow: visible;
}


/* ═══════════════════════════════════
   REEL ZONES v15 – fixed down arrow
   ═══════════════════════════════════ */
/* Override v14 zones */
.dp-reel-zone-top {
  top: 0 !important;
  height: 30% !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 14px !important;
}
.dp-reel-zone-bot {
  bottom: 0 !important;
  height: 25% !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding-bottom: 58px !important; /* above the content text */
}
.dp-reel-zone-mid {
  top: 30% !important;
  height: 45% !important;
}
/* Action buttons need higher z-index than zones */
.dp-reel-actions { z-index: 12 !important; }
.dp-reel-content { z-index: 12 !important; }

/* ═══════════════════════════════════
   GRID – tap to open lightbox
   ═══════════════════════════════════ */
.dp-mg-item {
  cursor: zoom-in !important;
}

/* ═══════════════════════════════════
   GRID LIGHTBOX
   ═══════════════════════════════════ */
.dp-grid-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  animation: dpFadeUp .2s ease;
}
.dp-grid-lightbox-media {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1rem 1rem 0;
}
.dp-grid-lightbox-media img,
.dp-grid-lightbox-media video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}
.dp-grid-lightbox-media .dp-lb-textpost {
  width: 100%;
  max-height: 100%;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}
.dp-grid-lightbox-info {
  background: var(--card);
  border-radius: 22px 22px 0 0;
  padding: 1rem 1.1rem 1.5rem;
  max-height: 50%;
  overflow-y: auto;
}
.dp-lb-close-btn {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: none; color: #fff;
  font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}

/* ══ ARROW FIX v16 – down arrow exactly at bottom of click zone ══ */
.dp-reel-zone-bot {
  bottom: 0 !important;
  height: 28% !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding-bottom: 10px !important;
}
/* The bottom zone covers up to 28% from bottom.
   Content sits ~100px from bottom, so zone goes from 72% to 100% of reel height.
   Arrow pill shows at bottom of this zone = bottom:10px */

/* Already-liked heart – no interaction cursor */
.dp-ra.liked-already { cursor: default; }
.dp-ra.liked-already .dp-ra-ic { filter: none; }

/* ══ TIMELINE v16 ══ */
.dp-timeline {
  display: flex; flex-direction: column;
  padding: 0 1rem 2rem;
  position: relative;
}
.dp-timeline::before {
  content: '';
  position: absolute;
  left: calc(1rem + 7px);
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--p) 0%, var(--b) 100%);
  opacity: .2;
}
.dp-tl-item {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  position: relative;
  cursor: pointer;
}
.dp-tl-item:last-child { margin-bottom: 0; }
.dp-tl-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--p);
  border: 3px solid var(--soft);
  flex-shrink: 0;
  margin-top: 14px;
  z-index: 1;
  box-shadow: 0 0 0 2px rgba(255,92,53,.2);
}
.dp-tl-card {
  flex: 1;
  background: var(--card);
  border-radius: 14px;
  overflow: hidden;
  margin-left: 12px;
  border: 1px solid var(--line);
  transition: box-shadow .2s, transform .2s;
  display: flex;
  gap: 0;
}
.dp-tl-item:hover .dp-tl-card {
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  transform: translateX(2px);
}
.dp-tl-media {
  width: 80px; flex-shrink: 0;
  background: #111;
  overflow: hidden;
}
.dp-tl-thumb {
  width: 80px; height: 100%;
  object-fit: cover; object-position: center;
  display: block; min-height: 80px;
}
.dp-tl-video-thumb {
  width: 80px; min-height: 80px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; background: #1a1a1a;
}
.dp-tl-body {
  flex: 1; padding: .75rem .85rem;
}
.dp-tl-meta {
  display: flex; align-items: center; gap: 7px; margin-bottom: .3rem;
}
.dp-tl-av {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.dp-tl-name { font-size: 13px; font-weight: 800; }
.dp-tl-year { font-size: 11px; color: var(--muted); font-weight: 600; }
.dp-tl-tag  { font-size: 10px; font-weight: 800; color: var(--p); margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .04em; }
.dp-tl-text { font-size: 12px; font-weight: 600; line-height: 1.5; color: #444; margin-bottom: .4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dp-tl-counts { display: flex; gap: 10px; font-size: 11px; font-weight: 700; color: var(--muted); }
.dp-tl-counts .dp-tl-liked { color: var(--p); }

/* Timeline tab icon small */
.dp-mt-btn[data-view="timeline"] { flex: 0 0 42px; font-size: 1rem; padding: .7rem .4rem; }

/* ══ EMAIL selfie block ══ */
/* (controlled via PHP) */


/* ════ v16 FINAL FIXES ════ */

/* Hide hint + counter completely */
.dp-reel-hint, .dp-reel-idx-badge { display: none !important; }

/* ── Arrow zones: down arrow at action-button height ──
   Action buttons (.dp-reel-actions) are at bottom:100px
   Put down arrow at same height = bottom zone from ~80px to ~160px */
.dp-reel-zone-top {
  top: 0 !important;
  height: 28% !important;
  align-items: flex-start !important;
  padding-top: 14px !important;
}
.dp-reel-zone-mid {
  /* between arrows - clicking opens popup */
  top: 28% !important;
  height: 44% !important;
}
.dp-reel-zone-bot {
  /* down arrow: sits roughly at action button height */
  bottom: 85px !important;
  top: auto !important;
  height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.dp-reel-zone-bot .dp-reel-arrow-pill {
  /* slightly left of center to not overlap action buttons */
  margin-right: 80px;
}

/* Ensure actions + content are above zones */
.dp-reel-actions { z-index: 15 !important; pointer-events: all !important; }
.dp-reel-content { z-index: 15 !important; pointer-events: none !important; }
.dp-reel-grad { z-index: 3 !important; }

/* ── Email spacing ── */
/* Controlled in PHP - adding extra padding via CSS won't help but
   we can note the issue is in email.php inline styles */

/* ── Grid items: make sure cursor shows clickable ── */
.dp-mem-grid .dp-mg-item { cursor: pointer !important; }

/* ── Timeline tab ── */
.dp-mt-btn[data-view="timeline"] { 
  flex: 0 0 40px !important; 
  font-size: .95rem !important; 
  padding: .7rem .35rem !important; 
}

/* ════ FINAL ARROW + GRID FIX ════ */

/* Arrow pill - perfectly centered content */
.dp-reel-arrow-pill {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.2) !important;
  backdrop-filter: blur(6px) !important;
  border: 1.5px solid rgba(255,255,255,.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  /* center the unicode arrow glyph */
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* Top zone: arrow at top, centered */
.dp-reel-zone-top {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 22% !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 12px !important;
  z-index: 8 !important;
  cursor: pointer !important;
}

/* Bottom zone: fixed at same height as action buttons (~bottom 100px) */
.dp-reel-zone-bot {
  position: absolute !important;
  bottom: 95px !important;   /* aligned with hearts/comments */
  left: 0 !important;
  right: 70px !important;    /* leave space for action bar */
  height: 48px !important;
  top: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  z-index: 8 !important;
  cursor: pointer !important;
}

/* Mid zone: between arrows → open popup */
.dp-reel-zone-mid {
  position: absolute !important;
  top: 22% !important;
  left: 0 !important; right: 0 !important;
  bottom: 143px !important;   /* above bot zone */
  height: auto !important;
  z-index: 7 !important;
  cursor: pointer !important;
}

/* Grid: zoom cursor to signal clickable */
.dp-mg-item { cursor: zoom-in !important; }

/* Timeline tab icon compact */
.dp-mt-btn[data-view="timeline"] {
  flex: 0 0 44px !important;
  font-size: 1rem !important;
  padding: .7rem .3rem !important;
}

/* ════ ARROW FINAL FIX ════ */
/* Down arrow: centered across FULL reel width, at comment button height */
.dp-reel-zone-bot {
  position: absolute !important;
  /* Height: from bottom of reel, up to comment button */
  bottom: 90px !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;     /* full width – arrow will be centered */
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  z-index: 8 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.dp-reel-zone-bot .dp-reel-arrow-pill {
  margin: 0 !important;  /* remove any offset */
}

/* ════ TIMELINE TAB STYLE FIX ════ */
/* Timeline tab: same style as other toggle buttons, no emoji-only */
.dp-mt-btn[data-view="timeline"] {
  flex: 1 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: .7rem .5rem !important;
  letter-spacing: .01em !important;
}
/* Remove the oversized emoji – handled by text content */
.dp-mt-btn[data-view="timeline"] { font-size: 12px !important; }

/* Popup: position:fixed so it overlays everything regardless of tab */
.dp-mem-popup {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
}

/* ── Timeline year separators ── */
.dp-tl-year-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1rem 0 .75rem;
  padding-left: 0;
  position: relative;
}
.dp-tl-year-sep::before,
.dp-tl-year-sep::after {
  content: '';
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, var(--p), var(--b));
  opacity: .25;
}
.dp-tl-year-sep span {
  font-size: 12px;
  font-weight: 900;
  color: var(--p);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--soft);
  padding: 2px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--p);
  opacity: .85;
  white-space: nowrap;
}
/* First year-sep: no top margin */
.dp-tl-year-sep:first-child { margin-top: .25rem; }

/* ── Timeline Year Navigation Bar ── */
.dp-tl-year-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: .65rem 1rem .5rem;
  background: var(--soft);
  position: sticky;
  top: 0;
  z-index: 20;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-bottom: 1px solid var(--line);
  scroll-behavior: smooth;
}
.dp-tl-year-nav::-webkit-scrollbar { display: none; }
.dp-tl-yn-btn {
  flex-shrink: 0;
  padding: .35rem .85rem;
  border-radius: 20px;
  border: 1.5px solid var(--line);
  background: var(--card);
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}
.dp-tl-yn-btn:hover {
  border-color: var(--p);
  color: var(--p);
}
.dp-tl-yn-btn.active {
  background: var(--p);
  border-color: var(--p);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,92,53,.3);
}
/* Scroll padding so year header isn't hidden under nav bar */
#dp-view-timeline { scroll-padding-top: 56px; }
.dp-tl-year-sep { scroll-margin-top: 56px; }

/* ── Save the Date Hero Card ── */
.dp-hero-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.dp-std-card {
  flex-shrink: 0;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 16px;
  padding: .85rem .9rem;
  text-align: center;
  backdrop-filter: blur(8px);
  min-width: 90px;
}
.dp-std-label {
  font-size: 8px; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; color: var(--y); margin-bottom: 4px;
}
.dp-std-day   { font-size: 2.2rem; font-weight: 900; color: #fff; line-height: 1; }
.dp-std-month { font-size: 11px; font-weight: 800; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .06em; }
.dp-std-year  { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.45); margin-bottom: 8px; }
.dp-std-btn {
  display: block; width: 100%; padding: .35rem .4rem;
  background: var(--y); color: #1a1a1a; border: none; border-radius: 8px;
  font-size: 10px; font-weight: 900; cursor: pointer; font-family: 'Nunito',sans-serif;
  transition: opacity .15s;
}
.dp-std-btn:hover { opacity: .85; }

/* ── Edit button in popup ── */
.dp-popup-edit-btn {
  margin-left: auto;
  background: var(--soft); border: 1.5px solid var(--line);
  border-radius: 20px; padding: .35rem .75rem;
  font-size: 13px; cursor: pointer;
  font-family: 'Nunito',sans-serif; font-weight: 700;
  transition: all .15s;
}
.dp-popup-edit-btn:hover { background: var(--p); color: #fff; border-color: var(--p); }


/* ── Save the Date v2 – compact right column ── */
.dp-hero-inner {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: start !important;
  gap: .75rem !important;
}
.dp-std-card {
  min-width: 0 !important;
  width: 90px !important;
  padding: .55rem .6rem .5rem !important;
  border-radius: 12px !important;
  margin-top: .25rem !important;
}
.dp-std-label { font-size: 7px !important; margin-bottom: 2px !important; }
.dp-std-day   { font-size: 1.5rem !important; }
.dp-std-month { font-size: 9px !important; }
.dp-std-year  { font-size: 9px !important; margin-bottom: 5px !important; }
.dp-std-btn   { font-size: 9px !important; padding: .28rem .3rem !important; border-radius: 6px !important; }

/* ── Hero 2-column layout ── */
.dp-hero-inner {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: .75rem !important;
}
.dp-hero-left { flex: 1; min-width: 0; }
.dp-std-card {
  flex-shrink: 0 !important;
  width: 88px !important;
  min-width: 88px !important;
  align-self: center;
}

/* ── Timeline new structure ── */
#dp-view-timeline {
  height: calc(100svh - 107px);
  flex-direction: column;
}
#dp-tl-year-nav-wrap { flex-shrink: 0; }
#dp-timeline-scroll { overflow-y: auto; flex: 1; }
.dp-tl-year-nav { position: static !important; }   /* nav is no longer inside scroll */

/* ── Save the Date v3 – float right alongside title, not countdown ── */
.dp-hero-inner {
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: .9rem !important;
}
.dp-hero-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.dp-std-card {
  flex-shrink: 0 !important;
  width: 82px !important;
  min-width: 82px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,209,102,.35) !important;
  border-radius: 14px !important;
  padding: .7rem .6rem .6rem !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}
.dp-std-label {
  font-size: 7px !important;
  letter-spacing: .1em !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: rgba(255,209,102,.7) !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
}
.dp-std-day   { font-size: 1.75rem !important; font-weight: 900 !important; color: #fff !important; line-height: 1 !important; margin-bottom: 1px !important; }
.dp-std-month { font-size: 10px !important; font-weight: 800 !important; color: rgba(255,255,255,.7) !important; text-transform: uppercase !important; letter-spacing: .05em !important; }
.dp-std-year  { font-size: 9px !important; color: rgba(255,255,255,.35) !important; margin-bottom: 7px !important; }
.dp-std-btn {
  display: block !important;
  width: 100% !important;
  padding: .3rem !important;
  background: var(--y) !important;
  color: #1a1a1a !important;
  border: none !important;
  border-radius: 7px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  font-family: 'Nunito', sans-serif !important;
  letter-spacing: .02em !important;
}

/* ── Save the Date v4 – 1.5x countdown width, aligned with title ── */
.dp-hero-inner {
  display: flex !important;
  align-items: flex-start !important;
  gap: .75rem !important;
}
.dp-hero-left { flex: 1; min-width: 0; }
/* cd-box is flex:1 within the cd row - approximate 1.5x = about 130px */
.dp-std-card {
  flex-shrink: 0 !important;
  width: 130px !important;
  min-width: 130px !important;
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,209,102,.3) !important;
  border-radius: 14px !important;
  padding: .85rem .7rem .7rem !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
  /* Align with title = margin-top: badge_height + gap ≈ 38px */
  position: relative !important;
  top: 38px !important;
}
.dp-std-label  { font-size: 8px !important; letter-spacing: .1em !important; font-weight: 900 !important; text-transform: uppercase !important; color: rgba(255,209,102,.7) !important; margin-bottom: 3px !important; }
.dp-std-day    { font-size: 2rem !important; font-weight: 900 !important; color: #fff !important; line-height: 1 !important; margin-bottom: 1px !important; }
.dp-std-month  { font-size: 11px !important; font-weight: 800 !important; color: rgba(255,255,255,.75) !important; text-transform: uppercase !important; letter-spacing: .05em !important; }
.dp-std-year   { font-size: 10px !important; color: rgba(255,255,255,.35) !important; margin-bottom: 8px !important; }
.dp-std-btn    { display: block !important; width: 100% !important; padding: .35rem !important; background: var(--y) !important; color: #1a1a1a !important; border: none !important; border-radius: 8px !important; font-size: 10px !important; font-weight: 900 !important; cursor: pointer !important; font-family: 'Nunito',sans-serif !important; }

/* Shorter live badge - just date abbreviation */
.dp-hero-badge { font-size: 10px !important; padding: .25rem .7rem !important; }

/* ════ HERO v18 – STD beside countdown, full width layout ════ */

/* Reset all previous hero-inner overrides */
.dp-hero-inner {
  display: block !important;
  position: relative !important;
}
.dp-hero-left {
  display: block;
  width: 100%;
}

/* Countdown + STD in same row */
.dp-hero-bottom-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 0;
}

/* Countdown fills remaining space */
.dp-hero-bottom-row .dp-cd {
  flex: 1;
  min-width: 0;
}

/* STD card: same height as countdown, compact */
.dp-std-card {
  flex-shrink: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  /* match countdown box sizing */
  padding: .65rem .75rem !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,209,102,.35) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  text-align: center !important;
}
.dp-std-label  { font-size: 6px !important; letter-spacing: .08em !important; font-weight: 900 !important; text-transform: uppercase !important; color: rgba(255,209,102,.7) !important; margin-bottom: 1px !important; display: block !important; }
.dp-std-day    { font-size: 1.8rem !important; font-weight: 900 !important; color: #fff !important; line-height: 1 !important; display: block !important; }
.dp-std-month  { font-size: 9px !important; font-weight: 800 !important; color: rgba(255,255,255,.65) !important; text-transform: uppercase !important; letter-spacing: .04em !important; display: block !important; }
.dp-std-year   { font-size: 8px !important; color: rgba(255,255,255,.3) !important; margin-bottom: 5px !important; display: block !important; }
.dp-std-btn    { display: block !important; white-space: nowrap !important; padding: .28rem .5rem !important; background: var(--y) !important; color: #1a1a1a !important; border: none !important; border-radius: 6px !important; font-size: 9px !important; font-weight: 900 !important; cursor: pointer !important; font-family: 'Nunito',sans-serif !important; }

/* ════ HERO-ONLY mode: hero centered when all tabs off ════ */
.dp-hero-only .dp-bot-nav { display: none !important; }
.dp-hero-only .dp-tab      { display: none !important; }
.dp-app.dp-hero-only {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dp-hero-only .dp-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ════ HERO v18 FINAL ════ */

/* Back to simple single-column layout */
.dp-hero-bottom-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 8px !important;
  align-items: stretch !important;
}

/* Countdown: spans left col, 2 rows = full height */
.dp-hero-bottom-row .dp-cd {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  flex: unset !important;
}

/* STD card: right col, spans 2 rows */
.dp-std-card {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  width: auto !important;
  min-width: 0 !important;
  padding: .65rem .6rem !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,209,102,.3) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  text-align: center !important;
}

/* ════ HERO-ONLY: keep hero natural size, just center it ════ */
.dp-app.dp-hero-only {
  min-height: 100svh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  background: var(--soft) !important;
}
.dp-hero-only .dp-hero {
  /* Natural size, no full-screen stretch */
  flex: 0 0 auto !important;
  border-radius: 16px !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 720px !important;
}
.dp-hero-only .dp-bot-nav,
.dp-hero-only .dp-tab { display: none !important; }

/* ════ HERO v19 – STD beside title, CD full width below ════ */
.dp-hero-inner {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  position: relative !important;
}
.dp-hero-left {
  flex: 1 !important;
  min-width: 0 !important;
}
/* STD card: fixed width, top-aligned = same level as title */
.dp-std-card {
  flex-shrink: 0 !important;
  width: 110px !important;
  min-width: 110px !important;
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  /* Offset: push down by badge height so it aligns with the title text */
  margin-top: 28px !important;
  padding: .75rem .65rem !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,209,102,.3) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 2px !important;
}
.dp-std-label  { font-size: 7px !important; letter-spacing: .1em !important; font-weight: 900 !important; text-transform: uppercase !important; color: rgba(255,209,102,.75) !important; margin-bottom: 2px !important; }
.dp-std-day    { font-size: 1.9rem !important; font-weight: 900 !important; color: #fff !important; line-height: 1 !important; }
.dp-std-month  { font-size: 10px !important; font-weight: 800 !important; color: rgba(255,255,255,.7) !important; text-transform: uppercase !important; letter-spacing: .04em !important; }
.dp-std-year   { font-size: 9px !important; color: rgba(255,255,255,.3) !important; margin-bottom: 8px !important; }
.dp-std-btn    { display: block !important; width: 100% !important; padding: .32rem !important; background: var(--y) !important; color: #1a1a1a !important; border: none !important; border-radius: 7px !important; font-size: 9px !important; font-weight: 900 !important; cursor: pointer !important; font-family: 'Nunito',sans-serif !important; }
/* Countdown: full width inside left col */
.dp-hero-left .dp-cd { display: flex !important; }
/* Reset grid from previous attempt */
.dp-hero-bottom-row { display: block !important; }

/* ════ HERO v20 – STD card absolutely positioned ════
   Right edge = right edge of SEK box
   Top = title top
*/
.dp-hero-inner {
  display: block !important;
  position: relative !important;
}
.dp-hero-left {
  display: block !important;
  width: 100% !important;
  /* Right padding = STD card width + gap so countdown doesn't overflow */
  padding-right: 0 !important;
}

/* Countdown: leave space on right for STD when STD is shown */
.dp-hero-has-std .dp-hero-left .dp-cd {
  padding-right: 122px !important; /* STD width 110px + gap 12px */
}

/* STD card: absolute, top-right of hero-inner, right edge = edge of container */
.dp-std-card {
  position: absolute !important;
  top: 0 !important;          /* same baseline as the badge/title row */
  right: 0 !important;
  width: 110px !important;
  min-width: 110px !important;
  margin: 0 !important;
  padding: .75rem .65rem !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,209,102,.3) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 2px !important;
}

.dp-std-label  { font-size: 7px !important; letter-spacing: .1em !important; font-weight: 900 !important; text-transform: uppercase !important; color: rgba(255,209,102,.75) !important; margin-bottom: 2px !important; }
.dp-std-day    { font-size: 1.9rem !important; font-weight: 900 !important; color: #fff !important; line-height: 1 !important; }
.dp-std-month  { font-size: 10px !important; font-weight: 800 !important; color: rgba(255,255,255,.7) !important; text-transform: uppercase !important; letter-spacing: .04em !important; }
.dp-std-year   { font-size: 9px !important; color: rgba(255,255,255,.3) !important; margin-bottom: 8px !important; }
.dp-std-btn    { display: block !important; width: 100% !important; padding: .32rem !important; background: var(--y) !important; color: #1a1a1a !important; border: none !important; border-radius: 7px !important; font-size: 9px !important; font-weight: 900 !important; cursor: pointer !important; font-family: 'Nunito',sans-serif !important; }

/* ════ STD card 2x wider ════ */
.dp-std-card {
  width: 220px !important;
  min-width: 220px !important;
}
.dp-hero-has-std .dp-hero-left .dp-cd {
  padding-right: 232px !important; /* 220px + 12px gap */
}
.dp-std-day   { font-size: 2.8rem !important; }
.dp-std-month { font-size: 13px !important; }
.dp-std-year  { font-size: 11px !important; }
.dp-std-btn   { font-size: 11px !important; padding: .42rem !important; }
.dp-std-label { font-size: 8px !important; }

/* ════ STD card 165px (220 * 0.75) ════ */
.dp-std-card { width: 165px !important; min-width: 165px !important; }
.dp-hero-has-std .dp-hero-left .dp-cd { padding-right: 177px !important; }
.dp-std-day   { font-size: 2.4rem !important; }
.dp-std-month { font-size: 11px !important; }
.dp-std-year  { font-size: 10px !important; }
.dp-std-btn   { font-size: 10px !important; padding: .38rem !important; }

/* ── Post-party celebration ── */
.dp-party-over {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: .5rem 0;
}
.dp-po-emoji { font-size: 2rem; line-height: 1; }
.dp-po-msg {
  font-size: .95rem; font-weight: 800; color: #fff;
  line-height: 1.4; opacity: .9;
}
/* ── Video duration warning ── */
.dp-vid-warn {
  background: #fff3cd; border: 1px solid #ffc107; border-radius: 10px;
  padding: .6rem .85rem; font-size: 12px; font-weight: 700; color: #856404;
  margin-top: .5rem;
}

/* ════ BOTTOM NAV v18 – 6 items on one line ════ */
.dp-bot-nav {
  display: flex !important;
  padding: .3rem 0 calc(.4rem + env(safe-area-inset-bottom)) !important;
}
.dp-bn {
  flex: 1 !important;
  font-size: 8px !important;
  padding: .3rem .1rem !important;
  gap: 1px !important;
  letter-spacing: -.01em !important;
}
.dp-bn-iw { font-size: .95rem !important; }
.dp-bn-iw svg { width: 18px !important; height: 18px !important; }
.dp-dot {
  font-size: 8px !important;
  min-width: 14px !important;
  height: 14px !important;
  line-height: 14px !important;
}
/* STD card on mobile: 1/4 less height */
@media (max-width: 699px) {
  .dp-std-card {
    padding: .45rem .5rem !important;
  }
  .dp-std-day   { font-size: 1.6rem !important; }
  .dp-std-month { font-size: 9px !important; }
  .dp-std-year  { font-size: 8px !important; margin-bottom: 5px !important; }
  .dp-std-btn   { padding: .25rem !important; font-size: 8px !important; }
  .dp-std-label { font-size: 6px !important; }
}

/* ── Floating Watermark ── */
.dp-watermark {
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom));
  right: 12px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,.35);
  background: rgba(0,0,0,.25);
  padding: 3px 8px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 50;
  letter-spacing: .02em;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  user-select: none;
}
/* Hide watermark inside popups/overlays */
.dp-mem-popup .dp-watermark,
.dp-grid-lightbox .dp-watermark { display: none; }

/* Push nav button active state */
#dp-push-nav-btn.active { color: var(--p) !important; }
#dp-push-nav-btn.active svg { stroke: var(--p) !important; }

/* ════ TOAST NOTIFICATIONS ════ */
#dp-toast-wrap {
  position: fixed; bottom: calc(80px + env(safe-area-inset-bottom));
  right: 12px; z-index: 9999; display: flex; flex-direction: column; gap: 8px;
  max-width: calc(100vw - 24px);
}
.dp-toast {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fff; border-radius: 14px; padding: .75rem 1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.18); font-size: 13px; font-weight: 700;
  font-family: 'Nunito',sans-serif; color: #1a1a1a; max-width: 320px;
  animation: dpToastIn .25s ease; transition: opacity .3s, transform .3s;
  border-left: 4px solid #5b8ef0;
}
.dp-toast-success { border-color: #00c48c; }
.dp-toast-warn    { border-color: #ffd166; background: #fffcf0; }
.dp-toast-error   { border-color: #ff5c35; background: #fff8f6; }
.dp-toast-ic      { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.dp-toast-out     { opacity: 0; transform: translateX(20px); }
@keyframes dpToastIn { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:none} }

/* ════ MOBILE ZOOM FIX – all inputs min 16px ════ */
input[type="text"], input[type="email"], input[type="number"],
input[type="password"], input[type="search"], input[type="tel"],
input[type="url"], textarea, select {
  font-size: 16px !important;
}
/* But keep display sizes for small UI elements */
.dp-cd-n, .dp-cd-l { font-size: revert !important; }

/* ════ MESSAGES PAGINATION ════ */
.dp-msg-pag {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  padding: .75rem 0 .25rem;
}
.dp-pag-btn {
  min-width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--line);
  background: var(--card); font-family: 'Nunito',sans-serif; font-size: 12px;
  font-weight: 800; cursor: pointer; color: var(--muted); transition: all .15s;
}
.dp-pag-btn.active, .dp-pag-btn:hover { background: var(--p); border-color: var(--p); color: #fff; }

/* ════ GALLERY WATERMARK - header style ════ */
.gal-wm {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.9) !important;
  letter-spacing: -.01em !important;
  pointer-events: none !important;
}
.gal-wm em { color: var(--y); font-style: normal; }

/* ── Party Gallery Tab ── */
.dp-gal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: .5rem .75rem 1rem;
}
.dp-gal-item { transition: opacity .15s; }
.dp-gal-item:active { opacity: .75; }
.dp-gal-sort-btns { display: flex; gap: 4px; }
.dp-gal-sb {
  padding: .25rem .6rem; border-radius: 20px; border: 1.5px solid var(--line);
  background: var(--card); font-size: 11px; font-weight: 800; cursor: pointer;
  font-family: 'Nunito',sans-serif; color: var(--muted); transition: all .15s;
}
.dp-gal-sb.active { background: var(--p); border-color: var(--p); color: #fff; }

/* ── Selfie page ghost buttons ── */
.dp-btn-ghost-sm {
  display: inline-flex; align-items: center; gap: 5px;
  padding: .45rem .9rem; border-radius: 10px;
  border: 1.5px solid var(--line); background: transparent;
  font-size: 12px; font-weight: 800; color: var(--muted);
  cursor: pointer; font-family: 'Nunito',sans-serif;
  transition: all .15s; text-decoration: none;
}
.dp-btn-ghost-sm:hover { border-color: var(--p); color: var(--p); }

/* ── Gallery drop zone ── */
.gal-drop-zone {
  border: 2.5px dashed #e0e0e0; border-radius: 16px;
  padding: 2.5rem 1rem; text-align: center;
  cursor: pointer; transition: border-color .2s;
}
.gal-drop-zone:hover { border-color: #ff5c35; }
.gal-drop-icon { font-size: 3rem; margin-bottom: .5rem; }
.gal-drop-text { font-size: 14px; font-weight: 700; color: #888; margin: 0; }
.gal-drop-text small { font-size: 11px; font-weight: 600; }

/* ════ SELFIE ACTION BUTTONS ════ */
.dp-selfie-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
  margin-top: 1rem;
}
.dp-selfie-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: .6rem .9rem;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--card);
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  transition: all .15s;
  min-width: 90px;
  text-decoration: none;
}
.dp-selfie-action-btn span:first-child { font-size: 1.2rem; }
.dp-selfie-action-btn:hover { border-color: var(--p); color: var(--p); }

/* ════ WATERMARK v2 – Pill rectangle, left-aligned ════ */

/* Remove old styles */
.dp-reel-wm, .dp-grd-wm { all: unset; }

/* Reel watermark: bottom-right pill */
.dp-reel-wm {
  position: absolute !important;
  bottom: 88px !important;
  right: 12px !important;
  background: rgba(0,0,0,.45) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-radius: 8px !important;
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  font-family: 'Nunito', sans-serif !important;
  color: #fff !important;
  line-height: 1.35 !important;
  text-align: left !important;
  pointer-events: none !important;
  z-index: 12 !important;
  white-space: nowrap !important;
}

/* Gallery grid watermark: smaller pill */
.dp-grd-wm {
  position: absolute !important;
  bottom: 22px !important;
  right: 5px !important;
  background: rgba(0,0,0,.5) !important;
  border-radius: 5px !important;
  padding: 2px 5px !important;
  font-size: 7.5px !important;
  font-weight: 900 !important;
  font-family: 'Nunito', sans-serif !important;
  color: #fff !important;
  line-height: 1.3 !important;
  text-align: left !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

/* ════ REEL WATERMARK v2 – rectangle, bottom right ════ */
.dp-reel-wm {
  position: absolute;
  bottom: 88px;         /* above nav area */
  right: 62px;          /* left of action buttons */
  background: rgba(0,0,0,.52);
  border-radius: 7px;
  padding: 5px 9px 5px;
  text-align: right;
  pointer-events: none;
  z-index: 12;
  line-height: 1.35;
  font-family: 'Nunito', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.dp-wm-a {
  font-size: 14px;    /* 25% larger than previous 11px */
  font-weight: 900;
  color: rgba(255,255,255,.9);
  display: block;
}
.dp-wm-b {
  font-size: 14px;
  font-weight: 900;
  color: #ffd166;
  display: inline;
}
.dp-wm-cake { font-size: 14px; }

/* Download button */
.dp-ra-dl {
  /* same style as other ra-btn */
}

/* ════ WATERMARK – reels + grid ════ */
.dp-reel-wm {
  position: absolute;
  bottom: 82px;
  right: 12px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 5px rgba(0,0,0,.9);
  pointer-events: none;
  z-index: 12;
  line-height: 1.35;
  text-align: right;
  font-family: 'Nunito', sans-serif;
  background: none !important;
}
.dp-grd-wm {
  position: absolute;
  bottom: 22px;
  right: 5px;
  font-size: 8px;
  font-weight: 900;
  color: rgba(255,255,255,.75);
  text-shadow: 0 1px 3px rgba(0,0,0,.95);
  pointer-events: none;
  z-index: 5;
  line-height: 1.25;
  font-family: 'Nunito', sans-serif;
  background: none !important;
}

/* ── Popup download button ── */
.dp-popup-dl-btn {
  background: var(--soft); border: 1.5px solid var(--line);
  border-radius: 20px; padding: .35rem .75rem;
  font-size: 14px; cursor: pointer;
  font-family: 'Nunito',sans-serif; font-weight: 700;
  transition: all .15s; margin-left: auto;
}
.dp-popup-dl-btn:hover { background: #5b8ef0; color: #fff; border-color: #5b8ef0; }

/* ── Reel watermark top-right ── */
.dp-reel-wm {
  position: absolute !important;
  top: 56px !important;
  right: 12px !important;
  bottom: auto !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  text-align: right !important;
}

/* ── Selfie Download Button ── */
.dp-selfie-dl-btn {
  display: flex; align-items: center; gap: .75rem;
  background: #fff; border: 2px solid var(--line); border-radius: 16px;
  padding: .85rem 1rem; margin: .75rem auto 0; max-width: 300px;
  text-decoration: none; color: var(--ink); cursor: pointer;
  transition: all .15s; box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.dp-selfie-dl-btn:hover { border-color: var(--p); box-shadow: 0 4px 16px rgba(255,92,53,.15); }
.dp-selfie-dl-icon { font-size: 2rem; flex-shrink: 0; }
.dp-selfie-dl-text { flex: 1; text-align: left; font-family: 'Nunito',sans-serif; font-size: 13px; line-height: 1.4; }
.dp-selfie-dl-text strong { display: block; }
.dp-selfie-dl-text small { font-size: 11px; color: var(--muted); font-weight: 600; }
.dp-selfie-dl-arrow { font-size: 1.1rem; flex-shrink: 0; }

/* ── Popup download button ── */
.dp-popup-dl-btn {
  background: var(--soft); border: 1.5px solid var(--line);
  border-radius: 20px; padding: .35rem .75rem;
  font-size: 14px; cursor: pointer; font-family: 'Nunito',sans-serif;
  font-weight: 700; transition: all .15s;
}
.dp-popup-dl-btn:hover { background: var(--p); color: #fff; border-color: var(--p); }

/* ── Reel watermark ── */
.dp-reel-wm {
  position: absolute !important;
  top: 56px !important; right: 12px !important;
  bottom: auto !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  text-align: right !important;
  color: rgba(255,255,255,.7) !important;
  text-shadow: 0 1px 5px rgba(0,0,0,.9) !important;
}
.dp-reel-wm em { color: var(--y) !important; font-style: normal !important; }

/* ── Gallery tab - stays within app frame ── */
#tab-gallery {
  min-height: calc(100svh - 107px);
  overflow-y: auto;
  max-height: calc(100svh - 107px);
}

/* ════ GALLERY TAB – scrollable within app, like other content tabs ════ */
#tab-gallery {
  display: none;
  overflow-y: auto;
  min-height: calc(100svh - 107px);
  padding-bottom: 80px;
  background: var(--soft);
}
#tab-gallery.active {
  display: block;
}

/* ── Gallery upload button at top ── */
.dp-gal-upload-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--p); color: #fff; font-weight: 900; font-size: 14px;
  padding: .75rem 1.25rem; margin: .5rem .75rem .25rem; border-radius: 14px;
  text-decoration: none; font-family: 'Nunito',sans-serif;
  transition: opacity .15s;
}
.dp-gal-upload-btn:hover { opacity: .88; }

/* ── Gallery pagination ── */
.dp-gal-pag {
  display: flex; justify-content: center; align-items: center;
  gap: 6px; padding: .75rem .75rem 1rem; flex-wrap: wrap;
}
.dp-gal-pag-btn {
  min-width: 36px; height: 36px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--card);
  font-family: 'Nunito',sans-serif; font-size: 13px; font-weight: 800;
  cursor: pointer; color: var(--muted); transition: all .15s; padding: 0 8px;
}
.dp-gal-pag-btn:hover:not(:disabled) { border-color: var(--p); color: var(--p); }
.dp-gal-pag-btn.active { background: var(--p); border-color: var(--p); color: #fff; }
.dp-gal-pag-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── Home QA: 1x4 horizontal row ── */
.dp-qa-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  padding: .75rem .75rem .5rem !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.dp-qa-row::-webkit-scrollbar { display: none !important; }
.dp-qa-row .dp-qa {
  flex: 0 0 auto !important;
  min-width: 120px !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: .85rem .6rem !important;
}
.dp-qa-row .dp-qa .dp-qa-ic { font-size: 1.5rem !important; }
.dp-qa-row .dp-qa strong { font-size: 12px !important; }
.dp-qa-row .dp-qa span:last-child { font-size: 10px !important; }

/* ── Home personal text ── */
.dp-home-text {
  margin: 0 .75rem .75rem;
  background: #fff;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.65;
  border: 1px solid var(--line);
}

/* ── RSVP Full-Width CTA Button ── */
.dp-rsvp-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% - 1.5rem);
  margin: .75rem .75rem .5rem;
  padding: 1rem 1.25rem;
  background: var(--p);
  color: #fff;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  gap: 3px;
  transition: opacity .15s;
  box-shadow: 0 4px 14px rgba(255,92,53,.3);
}
.dp-rsvp-cta > span:first-child {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.01em;
}
.dp-rsvp-cta-sub {
  font-size: 11px;
  font-weight: 700;
  opacity: .75;
}
.dp-rsvp-cta:hover { opacity: .9; }

/* ── 3 QA buttons in row (without Anmelden) ── */
.dp-qa-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  padding: 0 .75rem .5rem !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

/* ── Home WYSIWYG text ── */
.dp-home-text {
  margin: 0 .75rem .75rem;
  background: #fff;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.7;
  border: 1px solid var(--line);
}
.dp-home-text p { margin: 0 0 .5rem; }
.dp-home-text p:last-child { margin-bottom: 0; }
.dp-home-text strong { font-weight: 900; }
.dp-home-text em { font-style: italic; }
.dp-home-text ul, .dp-home-text ol { margin: .35rem 0 .35rem 1.2rem; }


/* ════════════════════════════════════════════════════════
   NEW FEATURES v22 – Program, Moderation, ZIP
   ════════════════════════════════════════════════════════ */

/* ── Program/Timeline tab ── */
#tab-program { display:none;min-height:calc(100svh - 107px);overflow-y:auto;padding-bottom:80px; }
#tab-program.active { display:block; }
.dp-prog-item { display:flex;gap:.75rem;padding:.85rem .75rem;border-bottom:1px solid var(--line); }
.dp-prog-time { font-size:13px;font-weight:900;color:var(--p);white-space:nowrap;min-width:52px;padding-top:2px; }
.dp-prog-dot { width:10px;height:10px;border-radius:50%;background:var(--p);flex-shrink:0;margin-top:5px; }
.dp-prog-content strong { display:block;font-size:14px;font-weight:900;color:var(--ink);margin-bottom:2px; }
.dp-prog-content span { font-size:12px;color:var(--muted);font-weight:600; }

/* ── Gallery upload btn ── */
.dp-gal-upload-btn {
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--p);color:#fff;font-weight:900;font-size:14px;
  padding:.75rem 1.25rem;margin:.5rem .75rem .25rem;border-radius:14px;
  text-decoration:none;font-family:'Nunito',sans-serif;transition:opacity .15s;
}
.dp-gal-upload-btn:hover { opacity:.88; }

/* ── Gallery pagination ── */
.dp-gal-pag { display:flex;justify-content:center;align-items:center;gap:6px;padding:.75rem .75rem 1rem;flex-wrap:wrap; }
.dp-gal-pag-btn { min-width:36px;height:36px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer;color:var(--muted);transition:all .15s;padding:0 8px; }
.dp-gal-pag-btn:hover:not(:disabled) { border-color:var(--p);color:var(--p); }
.dp-gal-pag-btn.active { background:var(--p);border-color:var(--p);color:#fff; }
.dp-gal-pag-btn:disabled { opacity:.35;cursor:not-allowed; }

/* ── Selfie download ── */
.dp-selfie-dl-btn { display:flex;align-items:center;gap:.75rem;background:#fff;border:2px solid var(--line);border-radius:16px;padding:.85rem 1rem;margin:.75rem auto 0;max-width:300px;text-decoration:none;color:var(--ink);cursor:pointer;transition:all .15s;box-shadow:0 2px 8px rgba(0,0,0,.06); }
.dp-selfie-dl-btn:hover { border-color:var(--p); }
.dp-selfie-dl-icon { font-size:2rem;flex-shrink:0; }
.dp-selfie-dl-text { flex:1;text-align:left;font-family:'Nunito',sans-serif;font-size:13px;line-height:1.4; }
.dp-selfie-dl-text strong { display:block; }
.dp-selfie-dl-text small { font-size:11px;color:var(--muted);font-weight:600; }
.dp-selfie-dl-arrow { font-size:1.1rem;flex-shrink:0; }

/* ── Popup DL btn ── */
.dp-popup-dl-btn { background:var(--soft);border:1.5px solid var(--line);border-radius:20px;padding:.35rem .75rem;font-size:14px;cursor:pointer;font-family:'Nunito',sans-serif;font-weight:700;transition:all .15s; }
.dp-popup-dl-btn:hover { background:var(--p);color:#fff;border-color:var(--p); }

/* ── RSVP CTA full-width button ── */
.dp-rsvp-cta {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:calc(100% - 1.5rem);margin:.75rem .75rem .5rem;
  padding:1.1rem 1.25rem;background:var(--p);color:#fff;
  border:none;border-radius:18px;cursor:pointer;
  font-family:'Nunito',sans-serif;gap:3px;
  box-shadow:0 4px 16px rgba(255,92,53,.3);transition:opacity .15s;
}
.dp-rsvp-cta > span:first-child { font-size:17px;font-weight:900; }
.dp-rsvp-cta-sub { font-size:11px;font-weight:700;opacity:.75; }
.dp-rsvp-cta:hover { opacity:.88; }

/* ── Quick Actions 3-col ── */
.dp-qa-row { display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;padding:0 .75rem .75rem; }
.dp-qa-row .dp-qa { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:.85rem .5rem;min-height:80px;border-radius:14px;background:var(--card);border:1.5px solid var(--line);cursor:pointer;font-family:'Nunito',sans-serif;text-align:center;transition:all .15s;color:var(--ink); }
.dp-qa-row .dp-qa:hover { border-color:var(--p); }
.dp-qa-row .dp-qa .dp-qa-ic { font-size:1.6rem;line-height:1; }
.dp-qa-row .dp-qa strong { font-size:11px;font-weight:900;display:block;color:var(--ink); }
.dp-qa-row .dp-qa span:last-child:not(.dp-qa-ic) { font-size:9px;color:var(--muted);font-weight:700;display:block; }

/* ── Home WYSIWYG text ── */
.dp-home-text { margin:0 .75rem .75rem;background:#fff;border-radius:14px;padding:1rem 1.25rem;font-size:14px;font-weight:600;color:var(--ink);line-height:1.7;border:1px solid var(--line); }
.dp-home-text p { margin:0 0 .7em; }
.dp-home-text p:last-child { margin-bottom:0; }
.dp-home-text p:empty { display:none; }
.dp-home-text strong,.dp-home-text b { font-weight:900; }
.dp-home-text em,.dp-home-text i { font-style:italic; }
.dp-home-text ul,.dp-home-text ol { margin:.35em 0 .35em 1.4em; }
.dp-home-text a { color:var(--p); }

/* ── Moderation badge ── */
.dp-mod-pending { position:absolute;top:6px;left:6px;background:rgba(245,158,11,.9);color:#fff;font-size:9px;font-weight:900;padding:2px 6px;border-radius:6px; }

/* ── Gallery tab ── */
#tab-gallery { display:none;min-height:calc(100svh - 107px);overflow-y:auto;padding-bottom:80px;background:var(--soft); }
#tab-gallery.active { display:block; }

/* ════ HOME QUICKLINKS v22 – FINAL ════ */

/* Full-width Anmelden CTA */
.dp-rsvp-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% - 1.5rem);
  margin: .75rem .75rem .4rem;
  padding: 1rem 1.25rem;
  background: var(--p);
  color: #fff;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  gap: 2px;
  box-shadow: 0 4px 18px rgba(255,92,53,.32);
  transition: opacity .15s, transform .15s;
}
.dp-rsvp-cta > span:first-child {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.01em;
}
.dp-rsvp-cta-sub {
  font-size: 11px;
  font-weight: 700;
  opacity: .72;
}
.dp-rsvp-cta:active { transform: scale(.97); }

/* 3-column row for other quick links */
.dp-qa-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)) !important;
  gap: 8px !important;
  padding: 0 .75rem .75rem !important;
}

/* Individual quick-link card */
.dp-qa-row .dp-qa {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: .9rem .5rem .75rem !important;
  min-height: 88px !important;
  border-radius: 16px !important;
  background: var(--card) !important;
  border: 1.5px solid var(--line) !important;
  cursor: pointer !important;
  font-family: 'Nunito', sans-serif !important;
  text-align: center !important;
  transition: all .15s !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
}
.dp-qa-row .dp-qa:hover {
  border-color: var(--p) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255,92,53,.12) !important;
}
.dp-qa-row .dp-qa:active { transform: scale(.95) !important; }
.dp-qa-row .dp-qa .dp-qa-ic {
  font-size: 1.7rem !important;
  line-height: 1 !important;
  display: block !important;
}
.dp-qa-row .dp-qa strong {
  font-size: 11px !important;
  font-weight: 900 !important;
  display: block !important;
  color: var(--ink) !important;
  line-height: 1.2 !important;
}
.dp-qa-row .dp-qa span:not(.dp-qa-ic) {
  font-size: 9.5px !important;
  color: var(--muted) !important;
  font-weight: 700 !important;
  display: block !important;
  line-height: 1.2 !important;
}

/* ── Program tab – fix out-of-box rendering ── */
#tab-program {
  display: none;
  overflow-y: auto;
  min-height: calc(100svh - 107px);
  padding-bottom: 80px;
  background: var(--soft);
}
#tab-program.active {
  display: block;
}