/* WishJoy app UI. Colours and fonts come from CSS variables so a theme can restyle everything. */
:root{
  --ww-ink:#24103F; --ww-muted:#5B4B78; --ww-bg:#FFF6FA; --ww-surface:#FFFFFF; --ww-tint:#FFE6F1; --ww-tint-2:#FFF3CC;
  --ww-pink:#F2186B; --ww-pink-strong:#E0115F; --ww-pink-ink:#FFFFFF; --ww-yellow:#FFB800; --ww-violet:#7B4DFF; --ww-mint:#18C79A; --ww-sky:#3EB8FF; --ww-orange:#FF7A2F; --ww-red:#E5484D;
  --ww-bw:2.5px; --ww-sh:4px 4px 0 var(--ww-ink); --ww-sh-lg:6px 6px 0 var(--ww-ink);
  --ww-r-sm:12px; --ww-r:18px; --ww-r-lg:26px;
  --ww-display:'Baloo 2',ui-rounded,system-ui,sans-serif; --ww-body:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --ww-hand:'Caveat','Segoe Print',cursive;
}
.ww-app,.ww-home,.ww-wrap,.ww-modal,.ww-sheet{font-family:var(--ww-body); color:var(--ww-ink)}
.ww-app *,.ww-home *,.ww-wrap *,.ww-modal *,.ww-sheet *{box-sizing:border-box}
.ww-wrap{max-width:1180px; margin:0 auto; padding:0 16px}
.screen-reader-text{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}
[hidden]{display:none !important}
.ww-app :focus-visible,.ww-home :focus-visible,.ww-wrap :focus-visible,.ww-modal :focus-visible,.ww-sheet :focus-visible{outline:3px solid var(--ww-violet); outline-offset:3px; border-radius:10px}

/* ---------- buttons, chips ---------- */
.ww-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:700 1rem/1.1 var(--ww-body); padding:13px 22px; min-height:46px; border-radius:999px; border:var(--ww-bw) solid var(--ww-ink);
  background:var(--ww-pink-strong,#E0115F); color:var(--ww-pink-ink) !important; text-decoration:none !important; cursor:pointer; box-shadow:3px 3px 0 var(--ww-ink); transition:transform .12s ease, box-shadow .12s ease; white-space:nowrap}
.ww-btn:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ww-ink)}
.ww-btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ww-ink)}
.ww-btn:disabled{opacity:.55; cursor:not-allowed; transform:none}
.ww-btn svg{width:18px; height:18px; flex:none}
.ww-btn-ghost{background:var(--ww-surface); color:var(--ww-ink) !important}
.ww-btn-light{background:var(--ww-yellow); color:var(--ww-ink) !important}
.ww-btn-ink{background:var(--ww-ink); color:#fff !important}
.ww-btn-danger{background:var(--ww-red); color:#fff !important}
.ww-btn-sm{font-size:.86rem; padding:8px 13px; min-height:38px; box-shadow:2px 2px 0 var(--ww-ink)}
.ww-btn-lg{font-size:1.06rem; padding:15px 26px; min-height:54px}
.ww-btn-block{width:100%}
.ww-link{background:none; border:0; padding:6px 2px; font:600 .95rem var(--ww-body); color:var(--ww-ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.ww-chip{display:inline-flex; align-items:center; gap:6px; flex:none; padding:8px 14px; border-radius:999px; border:2px solid var(--ww-ink); background:var(--ww-surface); color:var(--ww-ink) !important; font:600 .92rem var(--ww-body); text-decoration:none !important; cursor:pointer; transition:background .15s, color .15s}
.ww-chip:hover{background:var(--ww-tint-2)}
.ww-chip.is-on{background:var(--ww-ink); color:#fff !important}
.ww-chiprow{display:flex; gap:8px; overflow-x:auto; padding:4px 2px 10px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity}
.ww-chiprow > *{scroll-snap-align:start}
.ww-chiprow-wrap{flex-wrap:wrap; overflow:visible}
.ww-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

/* ---------- cards ---------- */
.ww-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,162px),1fr)); gap:16px}
@media (min-width:700px){ .ww-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:24px} }
.ww-card{position:relative; display:flex; flex-direction:column; background:var(--ww-surface); border:var(--ww-bw) solid var(--ww-ink); border-radius:var(--ww-r); box-shadow:var(--ww-sh); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease}
.ww-card:hover{transform:translate(-2px,-2px) rotate(-.4deg); box-shadow:var(--ww-sh-lg)}
.ww-card-cover{display:block; border-bottom:var(--ww-bw) solid var(--ww-ink); background:var(--ww-tint)}
.ww-card-cover img{display:block; width:100%; height:auto; aspect-ratio:624/811; object-fit:cover}
.ww-card-body{display:flex; flex-direction:column; gap:6px; padding:12px 12px 14px; flex:1}
.ww-card-title{margin:0; font:800 1.12rem/1.1 var(--ww-display)}
.ww-card-title a{color:var(--ww-ink); text-decoration:none}
.ww-card-tag{margin:0; font-size:.86rem; line-height:1.35; color:var(--ww-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ww-card-actions{display:flex; gap:8px; margin-top:auto; padding-top:6px; flex-wrap:wrap}
.ww-card-actions .ww-btn{flex:1; padding-left:8px; padding-right:8px}
.ww-fav{position:absolute; top:10px; right:10px; width:42px; height:42px; border-radius:50%; border:2px solid var(--ww-ink); background:var(--ww-surface); display:grid; place-items:center; cursor:pointer; box-shadow:2px 2px 0 var(--ww-ink); padding:0}
.ww-fav svg,.ww-fav-btn svg{width:20px; height:20px; fill:transparent; stroke:var(--ww-ink); stroke-width:2.2}
.ww-fav[aria-pressed="true"] svg,.ww-fav-btn[aria-pressed="true"] svg{fill:var(--ww-pink); stroke:var(--ww-pink)}
.ww-fav[aria-pressed="true"]{animation:ww-pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes ww-pop{50%{transform:scale(1.25)}}
.ww-empty{padding:24px; text-align:center; color:var(--ww-muted)}

/* ---------- tiles ---------- */
.ww-tiles{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,104px),1fr)); gap:12px}
@media (min-width:700px){ .ww-tiles{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px} }
.ww-tile{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:16px 8px 14px; min-height:118px; border-radius:20px; border:var(--ww-bw) solid var(--ww-ink);
  background:color-mix(in srgb,var(--tile,#FF3E86) 16%,#fff); color:var(--ww-ink) !important; text-decoration:none !important; box-shadow:3px 3px 0 var(--ww-ink); transition:transform .15s ease, box-shadow .15s ease}
.ww-tile:hover{transform:translate(-2px,-2px) rotate(-2deg); box-shadow:5px 5px 0 var(--ww-ink)}
.ww-tiles li:nth-child(even) .ww-tile:hover{transform:translate(-2px,-2px) rotate(2deg)}
.ww-tile-emoji{display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--ww-surface); border:2px solid var(--ww-ink); font-size:1.7rem; line-height:1}
.ww-tile-label{font:800 1rem/1.1 var(--ww-display)}
.ww-tiles-occ{grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr))}
.ww-tiles-occ .ww-tile{flex-direction:row; justify-content:flex-start; min-height:0; padding:10px 14px 10px 10px; text-align:left; border-radius:999px}
.ww-tiles-occ .ww-tile-emoji{width:42px; height:42px; font-size:1.3rem; flex:none}

/* ---------- sections and page heads ---------- */
.ww-sec{padding:44px 0}
@media (min-width:800px){ .ww-sec{padding:64px 0} }
.ww-sec-flush{padding-bottom:0}
.ww-sec-tint{background:var(--ww-tint); box-shadow:0 0 0 100vmax var(--ww-tint); clip-path:inset(0 -100vmax)}
.ww-sec-ink{background:var(--ww-ink); box-shadow:0 0 0 100vmax var(--ww-ink); clip-path:inset(0 -100vmax); color:#fff}
.ww-sec-ink h2{color:#fff}
.ww-sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:22px}
.ww-sec-head h2,.ww-page-title{margin:0; font:800 clamp(1.75rem,5vw,2.7rem)/1.04 var(--ww-display); letter-spacing:-.01em; color:inherit}
.ww-page-title{font-size:clamp(2.1rem,6.5vw,3.6rem)}
.ww-more{font-weight:700; color:var(--ww-ink); text-underline-offset:4px}
.ww-page-head{padding:28px 0 22px; max-width:760px}
.ww-lead{font-size:1.1rem; line-height:1.55; color:var(--ww-muted); max-width:62ch; margin:12px 0 0}
.ww-lead p{margin:0 0 .6em}
.ww-crumbs{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-top:18px; font-size:.88rem; color:var(--ww-muted)}
.ww-crumbs a{color:var(--ww-ink)}
.ww-h3{font:800 1.35rem/1.15 var(--ww-display); margin:28px 0 12px}

/* ---------- filters ---------- */
.ww-filters{display:grid; gap:8px; margin:0 0 22px; position:relative}
.ww-search{display:flex; align-items:center; gap:10px; padding:0 16px; height:52px; border-radius:999px; border:var(--ww-bw) solid var(--ww-ink); background:var(--ww-surface); box-shadow:3px 3px 0 var(--ww-ink); max-width:520px}
.ww-search svg{width:20px; height:20px; flex:none}
.ww-search input{flex:1; border:0; outline:0; font:500 1rem var(--ww-body); background:transparent; color:var(--ww-ink); min-width:0}
.ww-count{margin:0; font-size:.9rem; color:var(--ww-muted)}

/* ---------- home ---------- */
.ww-hero{display:grid; gap:26px; padding:24px 0 36px; align-items:center}
@media (min-width:900px){ .ww-hero{grid-template-columns:1.1fr .9fr; padding:56px 0 64px; gap:40px} }
.ww-hero-title{margin:0; font:800 clamp(2.6rem,10.5vw,5.2rem)/.95 var(--ww-display); letter-spacing:-.02em}
.ww-hero-lead{font-size:1.14rem; line-height:1.55; color:var(--ww-muted); margin:18px 0 0; max-width:46ch}
.ww-hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.ww-hero-points{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.ww-hero-points li{padding:6px 12px; border-radius:999px; border:2px solid var(--ww-ink); background:var(--ww-surface); font:700 .86rem var(--ww-body)}
.ww-hero-points li:nth-child(1){background:var(--ww-tint-2); transform:rotate(-2deg)}
.ww-hero-points li:nth-child(2){background:#E3F8F1; transform:rotate(1.5deg)}
.ww-hero-points li:nth-child(3){background:#ECE5FF; transform:rotate(-1deg)}
.ww-hero-stage{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:300px}
.ww-giftbox{width:min(300px,74vw); border:0; background:none; padding:0; cursor:pointer; animation:ww-hop 2.6s ease-in-out infinite}
.ww-giftbox svg{width:100%; height:auto; display:block; overflow:visible}
.ww-gift-lid{transform-box:fill-box; transform-origin:center; transition:transform .8s cubic-bezier(.2,.8,.25,1.3)}
.ww-giftbox.open{animation:none}
.ww-giftbox.open .ww-gift-lid{transform:translate(60px,-120px) rotate(28deg)}
@keyframes ww-hop{0%,70%,100%{transform:translateY(0) rotate(0)} 78%{transform:translateY(-14px) rotate(-3deg)} 86%{transform:translateY(0) rotate(2deg)} 92%{transform:translateY(-5px)}}
.ww-note{font:700 1.7rem/1 var(--ww-hand); color:var(--ww-pink); transform:rotate(-4deg); margin:10px 0 0}
.ww-phone{position:relative; width:min(320px,86vw); aspect-ratio:9/18.5; border:10px solid var(--ww-ink); border-radius:42px; background:var(--ww-ink); overflow:hidden; box-shadow:var(--ww-sh-lg)}
.ww-phone iframe{width:100%; height:100%; border:0; display:block; background:#120D33}
.ww-hero-phone{animation:ww-rise .6s cubic-bezier(.2,.8,.3,1.2) both}
@keyframes ww-rise{from{opacity:0; transform:translateY(40px) scale(.9)} to{opacity:1; transform:none}}
.ww-steps{list-style:none; margin:0; padding:0; display:grid; gap:16px}
@media (min-width:800px){ .ww-steps{grid-template-columns:repeat(3,1fr); gap:22px} }
.ww-steps li{background:var(--ww-surface); color:var(--ww-ink); border:var(--ww-bw) solid var(--ww-ink); border-radius:var(--ww-r); padding:20px; box-shadow:4px 4px 0 var(--ww-yellow)}
.ww-steps h3{margin:12px 0 6px; font:800 1.3rem/1.1 var(--ww-display)}
.ww-steps p{margin:0; color:var(--ww-muted); line-height:1.5}
.ww-step-n{display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--ww-yellow); border:2px solid var(--ww-ink); font:800 1.4rem var(--ww-display)}
.ww-cloud{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.ww-cloud li{padding:10px 16px; border-radius:999px; border:2px solid var(--ww-ink); font:700 .98rem var(--ww-body); transform:rotate(var(--r,0deg)); background:var(--ww-surface)}
.ww-cloud li:nth-child(4n+1){background:#FFE1EC} .ww-cloud li:nth-child(4n+2){background:#FFF1C4} .ww-cloud li:nth-child(4n+3){background:#E7DFFF} .ww-cloud li:nth-child(4n){background:#D9F6EC}
.ww-priv{display:grid; gap:16px}
@media (min-width:800px){ .ww-priv{grid-template-columns:repeat(3,1fr)} }
.ww-priv-card{background:var(--ww-surface); border:var(--ww-bw) solid var(--ww-ink); border-radius:var(--ww-r); padding:20px; box-shadow:var(--ww-sh)}
.ww-priv-card h3{margin:8px 0 6px; font:800 1.25rem var(--ww-display)}
.ww-priv-card p{margin:0; color:var(--ww-muted); line-height:1.5}
.ww-priv-ic{font-size:1.8rem}
.ww-faq{display:grid; gap:10px; max-width:820px}
.ww-faq-item{background:var(--ww-surface); border:2px solid var(--ww-ink); border-radius:16px; overflow:hidden}
.ww-faq-item summary{list-style:none; cursor:pointer; padding:16px 50px 16px 18px; font:700 1.04rem/1.35 var(--ww-body); position:relative}
.ww-faq-item summary::-webkit-details-marker{display:none}
.ww-faq-item summary::after{content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%; border:2px solid var(--ww-ink); display:grid; place-items:center; font:800 1.1rem/1 var(--ww-body)}
.ww-faq-item[open] summary::after{content:"\2212"; background:var(--ww-yellow)}
.ww-faq-item p{margin:0; padding:0 18px 18px; line-height:1.6; color:var(--ww-muted)}
.ww-band{margin:20px 0 56px; padding:44px 22px; border-radius:var(--ww-r-lg); background:var(--ww-ink); color:#fff; text-align:center; display:grid; gap:18px; justify-items:center;
  background-image:radial-gradient(circle at 12% 30%,var(--ww-pink) 0 6px,transparent 7px),radial-gradient(circle at 85% 20%,var(--ww-yellow) 0 8px,transparent 9px),radial-gradient(circle at 78% 80%,var(--ww-mint) 0 6px,transparent 7px),radial-gradient(circle at 20% 82%,var(--ww-sky) 0 5px,transparent 6px)}
.ww-band h2{margin:0; font:800 clamp(1.8rem,6vw,3rem)/1.05 var(--ww-display); color:#fff; max-width:18ch}

/* ---------- single template ---------- */
.ww-single-grid{display:grid; gap:28px; padding:20px 0 10px}
@media (min-width:900px){ .ww-single-grid{grid-template-columns:minmax(300px,380px) 1fr; gap:56px; align-items:start} .ww-single-media{position:sticky; top:96px} }
.ww-single-media{display:flex; justify-content:center; order:2}
.ww-single-info{order:1}
.ww-single-media .ww-phone{width:min(280px,76vw)}
@media (min-width:900px){ .ww-single-media{order:0} .ww-single-info{order:0} .ww-single-media .ww-phone{width:min(340px,100%)} }
.ww-phone-live img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ww-play{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px; border:2px solid var(--ww-ink); background:var(--ww-yellow); color:var(--ww-ink); font:800 .98rem var(--ww-body); cursor:pointer; box-shadow:3px 3px 0 var(--ww-ink); white-space:nowrap}
.ww-single-title{margin:0; font:800 clamp(2.2rem,7vw,3.6rem)/1 var(--ww-display)}
.ww-single-cta{margin:20px 0 6px}
.ww-prose{font-size:1.06rem; line-height:1.65}
.ww-prose p{margin:1em 0}
.ww-steplist{list-style:none; counter-reset:s; margin:0; padding:0; display:grid; gap:8px}
.ww-steplist li{counter-increment:s; display:flex; align-items:center; gap:12px; padding:10px 14px; border:2px solid var(--ww-ink); border-radius:14px; background:var(--ww-surface); font-weight:600}
.ww-steplist li::before{content:counter(s); display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%; background:var(--ww-tint); border:2px solid var(--ww-ink); font:800 .95rem var(--ww-display)}
.ww-ticks{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.ww-ticks li{padding-left:30px; position:relative; line-height:1.5}
.ww-ticks li::before{content:""; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%; background:var(--ww-mint); border:2px solid var(--ww-ink)}
.ww-ticks li::after{content:""; position:absolute; left:7px; top:6px; width:5px; height:9px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg)}
.ww-fav-btn span{font-weight:700}

/* ---------- taxonomy ---------- */
.ww-tax-head{position:relative}
.ww-tax-emoji{display:grid; place-items:center; width:72px; height:72px; border-radius:50%; background:color-mix(in srgb,var(--tile) 22%,#fff); border:var(--ww-bw) solid var(--ww-ink); font-size:2.2rem; margin-bottom:14px; box-shadow:3px 3px 0 var(--ww-ink)}
.ww-count-line{margin:14px 0 0; font-weight:700}

/* ---------- modal preview ---------- */
.ww-modal{position:fixed; inset:0; z-index:99999; background:rgba(20,8,40,.78); display:flex; align-items:center; justify-content:center; padding:16px; animation:ww-fade .2s ease both}
@keyframes ww-fade{from{opacity:0} to{opacity:1}}
.ww-modal-box{position:relative; display:flex; flex-direction:column; gap:12px; align-items:center}
.ww-modal .ww-phone{width:min(390px,92vw); height:min(800px,calc(100dvh - 130px)); aspect-ratio:auto}
.ww-modal-bar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center}
.ww-modal-x{position:absolute; top:-14px; right:-14px; z-index:2; width:44px; height:44px; border-radius:50%; border:2px solid var(--ww-ink); background:var(--ww-surface); font:800 1.3rem/1 var(--ww-body); cursor:pointer; box-shadow:2px 2px 0 var(--ww-ink); color:var(--ww-ink)}
@media (max-width:560px){
  .ww-modal{padding:0}
  .ww-modal-box{width:100%; height:100dvh; gap:0}
  .ww-modal .ww-phone{width:100%; height:100%; border:0; border-radius:0; box-shadow:none}
  .ww-modal-bar{position:absolute; left:0; right:0; bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:3; pointer-events:none}
  .ww-modal-bar > *{pointer-events:auto}
  .ww-modal-x{top:calc(10px + env(safe-area-inset-top,0px)); left:10px; right:auto}
}

/* ---------- toast ---------- */
.ww-toast{position:fixed; left:50%; bottom:calc(92px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:100000; background:var(--ww-ink); color:#fff; font:600 .95rem var(--ww-body); padding:12px 18px; border-radius:999px; box-shadow:0 10px 30px -10px rgba(0,0,0,.5); animation:ww-rise .3s ease both; max-width:calc(100% - 32px); text-align:center}

/* ---------- forms ---------- */
.ww-form{display:grid; gap:16px; max-width:560px}
.ww-field{display:grid; gap:6px}
.ww-field > label,.ww-label{font:700 .96rem var(--ww-body)}
.ww-help{font-size:.86rem; color:var(--ww-muted); margin:0; line-height:1.45}
.ww-field input[type=text],.ww-field input[type=email],.ww-field input[type=password],.ww-field input[type=date],.ww-field input[type=number],.ww-field input[type=search],.ww-field select,.ww-field textarea,.ww-input{
  width:100%; font:500 1rem/1.4 var(--ww-body); color:var(--ww-ink); background:var(--ww-surface); border:2px solid var(--ww-ink); border-radius:14px; padding:12px 14px; min-height:48px; box-shadow:inset 0 2px 0 rgba(36,16,63,.06)}
.ww-field textarea{resize:vertical; min-height:96px; line-height:1.5}
.ww-field input:focus,.ww-field textarea:focus,.ww-field select:focus,.ww-input:focus{outline:3px solid color-mix(in srgb,var(--ww-violet) 45%,transparent); outline-offset:1px}
.ww-counter{font-size:.78rem; color:var(--ww-muted); text-align:right}
.ww-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.ww-status{margin:0; font-weight:600; min-height:1.3em}
.ww-status.ok{color:#0F8A61} .ww-status.err{color:var(--ww-red)}
.ww-loading{display:flex; align-items:center; gap:12px; padding:40px 0; font-weight:600; color:var(--ww-muted)}
.ww-spinner{width:22px; height:22px; border-radius:50%; border:3px solid var(--ww-tint); border-top-color:var(--ww-pink); animation:ww-spin .8s linear infinite}
@keyframes ww-spin{to{transform:rotate(360deg)}}

/* ---------- editor ---------- */
.ww-editor{padding:10px 0 130px}
.ww-ed-top{display:flex; gap:14px; align-items:center; margin:8px 0 18px; flex-wrap:wrap}
.ww-ed-thumb{width:62px; height:80px; border-radius:12px; border:2px solid var(--ww-ink); object-fit:cover; flex:none; box-shadow:2px 2px 0 var(--ww-ink)}
.ww-ed-top h1{margin:0; font:800 clamp(1.6rem,5vw,2.3rem)/1.05 var(--ww-display)}
.ww-ed-top p{margin:4px 0 0; color:var(--ww-muted); font-size:.95rem}
.ww-ed-layout{display:grid; gap:24px}
@media (min-width:1000px){ .ww-ed-layout{grid-template-columns:minmax(0,1fr) 360px; gap:40px; align-items:start} .ww-ed-side{position:sticky; top:90px} }
.ww-ed-side{display:none}
@media (min-width:1000px){ .ww-ed-side{display:flex; flex-direction:column; align-items:center; gap:10px} .ww-ed-side .ww-phone{width:340px} }
.ww-ed-sec{background:var(--ww-surface); border:var(--ww-bw) solid var(--ww-ink); border-radius:var(--ww-r); box-shadow:var(--ww-sh); margin-bottom:16px; overflow:hidden}
.ww-ed-head{width:100%; display:flex; align-items:center; gap:12px; padding:16px 18px; background:none; border:0; cursor:pointer; text-align:left; font:800 1.18rem/1.1 var(--ww-display); color:var(--ww-ink)}
.ww-ed-n{display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:50%; background:var(--ww-tint); border:2px solid var(--ww-ink); font:800 1rem var(--ww-display)}
.ww-ed-sec.is-open .ww-ed-n{background:var(--ww-yellow)}
.ww-ed-head .ww-ed-sum{margin-left:auto; font:600 .82rem var(--ww-body); color:var(--ww-muted); text-align:right; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ww-ed-head::after{content:""; flex:none; width:10px; height:10px; border:solid var(--ww-ink); border-width:0 2.5px 2.5px 0; transform:rotate(45deg); margin:0 4px 4px 6px; transition:transform .2s}
.ww-ed-sec.is-open .ww-ed-head::after{transform:rotate(-135deg); margin-bottom:-4px}
.ww-ed-body{padding:4px 18px 20px; display:grid; gap:18px}
.ww-ed-sec:not(.is-open) .ww-ed-body{display:none}
.ww-two{display:grid; gap:14px}
@media (min-width:600px){ .ww-two{grid-template-columns:1fr 1fr} }
.ww-sub-h{margin:6px 0 -6px; font:800 1.02rem var(--ww-display); color:var(--ww-muted)}
.ww-list{display:grid; gap:8px}
.ww-li{display:flex; gap:8px; align-items:flex-start}
.ww-li .ww-input{flex:1; min-height:44px; min-width:0}
.ww-li textarea.ww-input{resize:vertical; line-height:1.4; padding:9px 12px; font-size:.96rem; min-height:76px}
.ww-li-tools{display:flex; flex-direction:column; gap:4px; flex:none}
.ww-li-tools .ww-icon-btn{width:36px; height:36px; border-radius:10px}
.ww-li-photo{position:relative; flex:none; width:44px; height:44px; border-radius:10px; border:2px dashed var(--ww-ink); background:var(--ww-tint); cursor:pointer; overflow:hidden; display:grid; place-items:center; padding:0; color:var(--ww-ink)}
.ww-li-photo img{width:100%; height:100%; object-fit:cover}
.ww-li-photo svg{width:20px; height:20px}
.ww-icon-btn{flex:none; width:44px; height:44px; border-radius:12px; border:2px solid var(--ww-ink); background:var(--ww-surface); display:grid; place-items:center; cursor:pointer; padding:0; color:var(--ww-ink)}
.ww-icon-btn svg{width:18px; height:18px}
.ww-icon-btn:disabled{opacity:.35; cursor:default}
.ww-add{justify-self:start}
.ww-card-edit{border:2px solid var(--ww-ink); border-radius:14px; padding:12px; display:grid; gap:10px; background:#FFFBFD}
.ww-card-edit-top{display:flex; gap:8px; align-items:center; justify-content:space-between}
.ww-card-edit-top strong{font:800 .98rem var(--ww-display)}
.ww-quiz-opt{display:flex; gap:8px; align-items:center}
.ww-quiz-opt input[type=radio]{width:22px; height:22px; accent-color:var(--ww-mint); flex:none}
.ww-photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px}
.ww-ph{position:relative; border:2px solid var(--ww-ink); border-radius:14px; overflow:hidden; background:var(--ww-surface); display:flex; flex-direction:column}
.ww-ph img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block; border-bottom:2px solid var(--ww-ink)}
.ww-ph input{border:0; border-radius:0; min-height:40px; font-size:.88rem; padding:8px 10px; width:100%; color:var(--ww-ink); background:#fff}
.ww-ph-tools{position:absolute; top:6px; left:6px; right:6px; display:flex; justify-content:space-between; gap:6px}
.ww-ph-tools button{width:34px; height:34px; border-radius:50%; border:2px solid var(--ww-ink); background:rgba(255,255,255,.95); display:grid; place-items:center; cursor:pointer; padding:0; color:var(--ww-ink)}
.ww-ph-tools button svg{width:16px; height:16px}
.ww-ph-prog{position:absolute; inset:0; display:grid; place-items:center; background:rgba(255,255,255,.75); font-weight:800}
.ww-drop{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:150px; border:2.5px dashed var(--ww-ink); border-radius:14px; background:var(--ww-tint); cursor:pointer; font:700 .95rem var(--ww-body); text-align:center; padding:12px; color:var(--ww-ink)}
.ww-drop svg{width:30px; height:30px}
.ww-drop.drag{background:var(--ww-tint-2)}
.ww-opts{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.ww-opt{position:relative; display:flex; align-items:center; gap:10px; padding:12px 14px; border:2px solid var(--ww-ink); border-radius:14px; background:var(--ww-surface); cursor:pointer; font:600 .95rem var(--ww-body)}
.ww-opt input{position:absolute; opacity:0; pointer-events:none}
.ww-opt:has(input:checked){background:var(--ww-ink); color:#fff}
.ww-opt:has(input:focus-visible){outline:3px solid var(--ww-violet); outline-offset:2px}
.ww-opt .ww-play-mini{margin-left:auto; width:30px; height:30px; border-radius:50%; border:2px solid currentColor; background:transparent; color:inherit; display:grid; place-items:center; cursor:pointer; padding:0}
.ww-swatches{display:flex; flex-wrap:wrap; gap:10px}
.ww-sw{position:relative; width:56px; height:56px; border-radius:16px; border:2px solid var(--ww-ink); cursor:pointer; overflow:hidden}
.ww-sw input{position:absolute; opacity:0}
.ww-sw:has(input:checked){box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--ww-ink)}
.ww-sw span{position:absolute; left:0; right:0; bottom:0; font:700 .62rem var(--ww-body); background:rgba(255,255,255,.88); text-align:center; padding:2px 0}
.ww-scene-row{display:flex; align-items:center; gap:10px; padding:10px 12px; border:2px solid var(--ww-ink); border-radius:14px}
.ww-scene-row label{flex:1; font-weight:700; display:flex; align-items:center; gap:10px; cursor:pointer}
.ww-scene-row input[type=checkbox]{width:22px; height:22px; accent-color:var(--ww-pink)}
.ww-scene-row small{color:var(--ww-muted); font-weight:500}
.ww-priv-opts{display:grid; gap:10px}
.ww-priv-opts .ww-opt{align-items:flex-start; flex-direction:column; gap:2px; padding:14px 16px}
.ww-priv-opts .ww-opt b{font:800 1.04rem var(--ww-display)}
.ww-priv-opts .ww-opt small{font-weight:500; opacity:.85}
.ww-ed-bar{position:fixed; left:0; right:0; bottom:0; z-index:9990; display:flex; gap:10px; justify-content:center; align-items:center; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); background:rgba(255,246,250,.94); backdrop-filter:blur(8px); border-top:var(--ww-bw) solid var(--ww-ink)}
.ww-ed-bar .ww-btn{flex:1; max-width:260px}
.ww-ed-saved{font-size:.8rem; color:var(--ww-muted); position:absolute; top:-26px; left:50%; transform:translateX(-50%); background:var(--ww-surface); border:2px solid var(--ww-ink); border-radius:999px; padding:2px 10px; white-space:nowrap}
.ww-picker-head{padding:10px 0 18px}
.ww-picker-head h1{margin:0; font:800 clamp(2rem,6vw,3rem)/1.05 var(--ww-display)}
.ww-picker-head p{margin:8px 0 0; color:var(--ww-muted)}
.ww-notice{border:2px solid var(--ww-ink); border-radius:14px; padding:12px 14px; background:var(--ww-tint-2); font-size:.94rem; line-height:1.5}
.ww-notice.err{background:#FFE2E3}

/* ---------- share sheet ---------- */
.ww-sheet{position:fixed; inset:0; z-index:99998; background:rgba(20,8,40,.7); display:flex; align-items:flex-end; justify-content:center; animation:ww-fade .2s ease both}
@media (min-width:640px){ .ww-sheet{align-items:center; padding:16px} }
.ww-sheet-box{width:100%; max-width:520px; max-height:92dvh; overflow:auto; background:var(--ww-bg); border:var(--ww-bw) solid var(--ww-ink); border-radius:26px 26px 0 0; padding:22px 18px calc(22px + env(safe-area-inset-bottom,0px)); display:grid; gap:16px; animation:ww-up .3s cubic-bezier(.2,.8,.3,1) both}
@media (min-width:640px){ .ww-sheet-box{border-radius:26px; box-shadow:var(--ww-sh-lg)} }
@keyframes ww-up{from{transform:translateY(40px); opacity:.4} to{transform:none; opacity:1}}
.ww-sheet-box h2{margin:0; font:800 1.6rem/1.1 var(--ww-display)}
.ww-sheet-box p{margin:0; line-height:1.5}
.ww-copy{display:flex; gap:8px}
.ww-copy input{flex:1; min-width:0; font:600 .95rem var(--ww-body); border:2px solid var(--ww-ink); border-radius:12px; padding:10px 12px; background:#fff; color:var(--ww-ink)}
.ww-socials{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
@media (min-width:480px){ .ww-socials{grid-template-columns:repeat(6,1fr)} }
.ww-social{display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; border-radius:14px; border:2px solid var(--ww-ink); background:#fff; color:var(--ww-ink) !important; text-decoration:none !important; font:700 .76rem var(--ww-body); cursor:pointer}
.ww-social i{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:#fff; font-style:normal}
.ww-social i svg{width:20px; height:20px; fill:currentColor}
.ww-qr{display:flex; gap:14px; align-items:center; background:#fff; border:2px solid var(--ww-ink); border-radius:16px; padding:12px}
.ww-qr img{width:116px; height:116px; image-rendering:pixelated; flex:none}
.ww-qr p{font-size:.88rem; color:var(--ww-muted)}
.ww-keylink{font-size:.86rem; background:#fff; border:2px dashed var(--ww-ink); border-radius:12px; padding:10px 12px}
.ww-keylink code{word-break:break-all; font-size:.78rem}

/* ---------- my surprises ---------- */
.ww-mine{display:grid; gap:14px}
.ww-mine-item{display:grid; grid-template-columns:76px 1fr; gap:14px; align-items:center; background:var(--ww-surface); border:var(--ww-bw) solid var(--ww-ink); border-radius:var(--ww-r); padding:12px; box-shadow:var(--ww-sh)}
.ww-mine-item img{width:76px; height:98px; object-fit:cover; border-radius:12px; border:2px solid var(--ww-ink)}
.ww-mine-item h3{margin:0; font:800 1.15rem/1.15 var(--ww-display)}
.ww-mine-meta{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; font-size:.82rem; color:var(--ww-muted); align-items:center}
.ww-badge{display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; border:1.5px solid var(--ww-ink); font:700 .76rem var(--ww-body); color:var(--ww-ink)}
.ww-badge.pub{background:#D9F6EC} .ww-badge.priv{background:#EFE9F5} .ww-badge.code{background:#FFF1C4} .ww-badge.flag{background:#FFE2E3}
.ww-mine-actions{display:flex; flex-wrap:wrap; gap:8px}
.ww-mine-actions .ww-btn{font-size:.82rem; padding:7px 12px; min-height:36px}
.ww-mine-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}

/* ---------- account ---------- */
.ww-account{max-width:520px}
.ww-tabs{display:flex; gap:6px; padding:5px; border:2px solid var(--ww-ink); border-radius:999px; background:#fff; margin-bottom:18px}
.ww-tabs button{flex:1; padding:10px 14px; border:0; border-radius:999px; background:transparent; font:700 .98rem var(--ww-body); cursor:pointer; color:var(--ww-ink)}
.ww-tabs button[aria-selected="true"]{background:var(--ww-ink); color:#fff}
.ww-panel{background:var(--ww-surface); border:var(--ww-bw) solid var(--ww-ink); border-radius:var(--ww-r); padding:20px; box-shadow:var(--ww-sh); display:grid; gap:14px}
.ww-danger{border-color:var(--ww-red); box-shadow:4px 4px 0 var(--ww-red)}

@media (prefers-reduced-motion: reduce){
  .ww-giftbox,.ww-card,.ww-tile,.ww-btn{animation:none !important; transition:none !important}
}

/* ---------- wishes, tips and extra copy ---------- */
.ww-eyebrow{display:inline-block; margin:0 0 12px; padding:6px 12px; border-radius:999px; background:var(--ww-tint-2); border:2px solid var(--ww-ink); font:700 .82rem/1.3 var(--ww-body); letter-spacing:.01em}
.ww-sec-lead{margin:-10px 0 18px; color:var(--ww-muted); font-size:1.04rem; line-height:1.55; max-width:62ch}
.ww-linkchips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.ww-linkchips a{display:inline-flex; align-items:center; gap:8px; padding:10px 15px; border-radius:999px; border:2px solid var(--ww-ink); background:var(--ww-surface); color:var(--ww-ink); font:700 .95rem/1.2 var(--ww-body); text-decoration:none; box-shadow:2px 2px 0 var(--ww-ink); transition:transform .12s, box-shadow .12s}
.ww-linkchips a:hover{transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ww-ink); color:var(--ww-ink)}
.ww-tile-sub{font:600 .78rem/1 var(--ww-body); color:var(--ww-muted)}
.ww-more-text{max-width:72ch; margin:30px 0 0; font-size:1.05rem; line-height:1.65; color:var(--ww-ink)}
.ww-more-text p{margin:0 0 .8em}
.ww-count-line a{font-weight:700; color:var(--ww-ink)}
.ww-wishes-lead{margin:-10px 0 16px; color:var(--ww-muted); line-height:1.55; max-width:64ch}
.ww-langtabs{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px}
.ww-langtabs .ww-chip[aria-selected="true"]{background:var(--ww-ink); color:#fff !important}
.ww-wish-list{list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:wish}
@media (min-width:860px){ .ww-wish-list{grid-template-columns:1fr 1fr} }
.ww-wish{position:relative; display:flex; flex-direction:column; gap:12px; justify-content:space-between; padding:16px 16px 14px 52px; background:var(--ww-surface); border:2px solid var(--ww-ink); border-radius:18px; counter-increment:wish}
.ww-wish::before{content:counter(wish); position:absolute; left:14px; top:15px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--ww-tint); border:2px solid var(--ww-ink); font:800 .82rem/1 var(--ww-body)}
.ww-wish-text{margin:0; font-size:1.04rem; line-height:1.55}
.ww-wish-list[lang="hi"] .ww-wish-text{font-family:'Baloo 2',var(--ww-body); font-size:1.12rem; line-height:1.6}
.ww-wish-actions{display:flex; gap:8px; flex-wrap:wrap}
.ww-wish-actions .is-done{background:var(--ww-mint); color:var(--ww-ink) !important}
.ww-tips-list{list-style:none; margin:0; padding:0; display:grid; gap:14px; counter-reset:tip}
@media (min-width:760px){ .ww-tips-list{grid-template-columns:1fr 1fr} }
.ww-tips-list li{position:relative; padding:18px 18px 18px 64px; background:var(--ww-tint-2); border:2px solid var(--ww-ink); border-radius:18px; counter-increment:tip}
.ww-tips-list li::before{content:counter(tip); position:absolute; left:16px; top:16px; width:34px; height:34px; border-radius:12px; display:grid; place-items:center; background:var(--ww-pink-strong,#E0115F); color:#fff; border:2px solid var(--ww-ink); font:800 1rem/1 var(--ww-display); transform:rotate(-6deg)}
.ww-tips-list h3{margin:0 0 4px; font:800 1.15rem/1.2 var(--ww-display)}
.ww-tips-list p{margin:0; line-height:1.55; color:var(--ww-muted)}
.ww-prose{max-width:72ch; font-size:1.05rem; line-height:1.7}
.ww-prose p{margin:0 0 1em}
.entry-content ul.ww-tiles,.entry-content ul.ww-linkchips{padding:0; margin:0 0 1.2em; list-style:none}
.entry-content ul.ww-tiles > li,.entry-content ul.ww-linkchips > li{margin:0; padding:0}
.entry-content ul.ww-tiles > li::marker,.entry-content ul.ww-linkchips > li::marker{content:none}
.entry-content .ww-tile,.entry-content .ww-linkchips a{text-decoration:none}
.ww-tiles-occ .ww-tile-label{min-width:0; overflow-wrap:anywhere; hyphens:auto}
@media (max-width:400px){ .ww-tiles-occ .ww-tile-label{font-size:.92rem} }
.ww-wish-tiles{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
@media (min-width:700px){ .ww-wish-tiles{grid-template-columns:repeat(3,minmax(0,1fr)) !important} }
@media (min-width:1000px){ .ww-wish-tiles{grid-template-columns:repeat(4,minmax(0,1fr)) !important} }
.ww-wish-tiles .ww-tile-label{font-size:.98rem; overflow-wrap:anywhere}
.ww-grid-more{display:flex; justify-content:center; margin:22px 0 0}
.ww-grid.is-clamped > .ww-card:nth-child(n+7){display:none}
.ww-grid-title{margin:30px 0 16px; font:800 1.35rem/1.15 var(--ww-display)}
.ww-wishes,.ww-tips{scroll-margin-top:96px}