/* The Wedding Book — the wedding website STUDIO (/studio/website).
   Part 1 is the PM's studio design (docs/tasks/2026-09-29-patrika-wedding-website/), every rule
   scoped under #pwApp so its generic names (.btn, .modal, .toast, --gold) never touch the shared
   site header or other pages. Part 2 is the Shubh Muhrat integration. */
/* ===== 1. PM studio (scoped) ===== */
#pwApp{--bg:#160F04; --bg2:#1D1509; --bg3:#241C0E; --card:#221A0D;
  --ink:#F4EAD4; --soft:#B8A987; --muted:#8F8168;
  --gold:#C9A227; --gold2:#E7C75B; --goldDim:#8A7328;
  --wine:#B23A50; --wineDeep:#7A1F30; --emerald:#3D8A66;
  --line:rgba(244,234,212,.10); --line2:rgba(244,234,212,.18);
  --ok:#7FC49A; --bad:#EE8A8A; --onGold:#1A1206;
  --ui:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display:"Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --deva:"Tiro Devanagari Hindi", "Noto Serif Devanagari", "Mangal", serif;
  color-scheme:dark;}
@media (prefers-color-scheme: dark){}
#pwApp *,#pwApp *::before,#pwApp *::after{box-sizing:border-box}
#pwApp{box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
#pwApp{scroll-padding-top:env(safe-area-inset-top,0px); height:100%}
#pwApp{margin:0}
#pwApp{height:100%; background:var(--bg); color:var(--ink); font-family:var(--ui); font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(ellipse 900px 500px at 10% -10%, rgba(201,162,39,.09), transparent), radial-gradient(ellipse 700px 500px at 100% 0%, rgba(178,58,80,.07), transparent)}
#pwApp button,#pwApp input,#pwApp textarea,#pwApp select{font:inherit; color:inherit}
#pwApp :focus-visible{outline:2px solid var(--gold2); outline-offset:2px}
#pwApp img{max-width:100%}
#pwApp .gold-rule{height:1px; background:linear-gradient(90deg, transparent, var(--goldDim) 15%, var(--gold) 50%, var(--goldDim) 85%, transparent)}
#pwApp .topbar{position:relative; display:flex; align-items:center; gap:14px; padding:12px 20px; background:rgba(22,15,4,.9)}
#pwApp .topbar::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent, var(--goldDim) 15%, var(--gold) 50%, var(--goldDim) 85%, transparent); opacity:.6}
#pwApp .brand{display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none}
#pwApp .om{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%, var(--gold2), var(--gold) 60%, var(--goldDim)); color:var(--onGold); font-family:var(--deva); font-size:19px; line-height:1}
#pwApp .brand b{font-family:var(--display); font-weight:700; font-size:22px}
#pwApp .crumb{color:var(--muted); font-size:13px}
#pwApp .crumb strong{color:var(--ink); font-weight:600}
#pwApp .new{font-size:10.5px; font-weight:700; color:var(--onGold); background:var(--gold2); border-radius:4px; padding:2px 6px; margin-left:6px; vertical-align:1px}
#pwApp .spacer{flex:1}
#pwApp .saved{font-size:12.5px; color:var(--muted)}
#pwApp .saved.warn{color:var(--bad)}
#pwApp .btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; border:1px solid var(--line2); background:transparent; border-radius:6px; padding:9px 15px; cursor:pointer; font-weight:600; font-size:13.5px; white-space:nowrap; transition:border-color .2s, background .2s}
#pwApp .btn:hover{border-color:var(--gold)}
#pwApp .btn.gold{background:linear-gradient(135deg, var(--gold2), var(--gold)); color:var(--onGold); border-color:var(--gold)}
#pwApp .btn.gold:hover{filter:brightness(1.07)}
#pwApp .btn.wa{background:#1E8C4C; border-color:#1E8C4C; color:#fff}
#pwApp .btn:disabled{opacity:.45; cursor:not-allowed}
#pwApp .studio{display:grid; grid-template-columns:minmax(360px,450px) 1fr; height:calc(100% - 59px)}
#pwApp .panel{display:flex; flex-direction:column; min-height:0; background:var(--bg2); border-right:1px solid var(--line)}
#pwApp .steps{display:flex; padding:8px 10px 0; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
#pwApp .steps button{border:0; background:none; padding:10px 7px 12px; cursor:pointer; color:var(--muted); font-size:13px; font-weight:600; border-bottom:2px solid transparent; white-space:nowrap}
#pwApp .steps button span{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; border:1px solid var(--line2); font-size:10.5px; margin-right:5px}
#pwApp .steps button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--gold)}
#pwApp .steps button[aria-selected="true"] span{background:var(--gold); color:var(--onGold); border-color:var(--gold)}
#pwApp .step-body{flex:1; overflow-y:auto; padding:22px 22px 30px}
#pwApp .step{display:none}
#pwApp .step.active{display:block; animation:stepIn .35s ease}
@keyframes stepIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
#pwApp .step h2{font-family:var(--display); font-weight:700; font-size:30px; line-height:1.1; margin:0 0 4px}
#pwApp .lede{color:var(--soft); margin:0 0 20px; font-size:13.5px}
#pwApp .sub-h{font-family:var(--display); font-weight:700; font-size:21px; margin:26px 0 8px}
#pwApp .field{display:block; margin-bottom:14px}
#pwApp .field > span{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--soft)}
#pwApp .field small{display:block; color:var(--muted); font-size:12px; margin-top:5px}
#pwApp .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
#pwApp input[type=text],#pwApp input[type=tel],#pwApp input[type=date],#pwApp input[type=time],#pwApp textarea,#pwApp select{width:100%; background:var(--bg3); border:1px solid var(--line2); border-radius:6px; padding:10px 12px; outline:none}
#pwApp input:focus,#pwApp textarea:focus,#pwApp select:focus{border-color:var(--gold)}
#pwApp textarea{resize:vertical; min-height:84px; line-height:1.45}
#pwApp .panel-foot{display:flex; justify-content:space-between; gap:10px; padding:12px 22px; border-top:1px solid var(--line)}
#pwApp .ai{display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--soft); background:rgba(201,162,39,.07); border:1px solid rgba(201,162,39,.2); border-radius:6px; padding:9px 11px; margin:-4px 0 14px}
#pwApp .ai b{color:var(--gold2)}
#pwApp .ai button{margin-left:auto; flex:none; padding:5px 10px; font-size:12px}
#pwApp .drop{display:block; border:1.5px dashed var(--line2); border-radius:8px; padding:26px 18px; text-align:center; cursor:pointer; transition:.2s}
#pwApp .drop:hover,#pwApp .drop.over{border-color:var(--gold); background:rgba(201,162,39,.05)}
#pwApp .drop strong{display:block; margin-bottom:4px}
#pwApp .drop p{margin:0; color:var(--muted); font-size:12.5px}
#pwApp .thumbs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px}
#pwApp .thumb{position:relative; aspect-ratio:3/4; border-radius:6px; overflow:hidden; background:var(--bg3)}
#pwApp .thumb img{width:100%; height:100%; object-fit:cover; display:block}
#pwApp .thumb .tools{position:absolute; inset:auto 5px 5px 5px; display:flex; gap:4px; flex-wrap:wrap}
#pwApp .thumb button{border:0; border-radius:4px; font-size:11px; padding:4px 7px; cursor:pointer; background:rgba(22,15,4,.8); color:var(--ink)}
#pwApp .thumb button.is-cover{background:var(--gold2); color:var(--onGold); font-weight:700}
#pwApp .hint{font-size:12.5px; color:var(--muted); margin-top:12px}
#pwApp .ev-item{border:1px solid var(--line2); border-radius:8px; margin-bottom:10px; background:var(--card); overflow:hidden}
#pwApp .ev-head{display:flex; align-items:center; gap:10px; padding:11px 12px; cursor:pointer}
#pwApp .sw{width:14px; height:14px; border-radius:50%; flex:none; display:inline-block}
#pwApp .ev-head .t{flex:1; min-width:0}
#pwApp .ev-head .t b{display:block; font-size:14px}
#pwApp .ev-head .t span{color:var(--muted); font-size:12px}
#pwApp .chev{color:var(--muted); transition:transform .2s}
#pwApp .ev-item.open .chev{transform:rotate(180deg)}
#pwApp .ev-body{display:none; padding:2px 12px 12px; border-top:1px solid var(--line)}
#pwApp .ev-item.open .ev-body{display:block}
#pwApp .ev-body .field{margin:10px 0 0}
#pwApp .linkbtn{background:none; border:0; color:var(--bad); cursor:pointer; padding:10px 0 0; font-size:12.5px}
#pwApp .addrow{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
#pwApp .addrow .btn{padding:6px 11px; font-size:12.5px; font-weight:500}
#pwApp .themes{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
#pwApp .pick{border:1.5px solid var(--line2); border-radius:8px; padding:7px; cursor:pointer; background:none; text-align:left; position:relative}
#pwApp .pick[aria-pressed="true"]{border-color:var(--gold2)}
#pwApp .pick .swatch{height:62px; border-radius:5px; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:22px}
#pwApp .pick b{display:block; font-size:12.5px; margin-top:6px}
#pwApp .pick span{font-size:11.5px; color:var(--muted)}
#pwApp .badge{position:absolute; top:3px; right:3px; font-size:9.5px; font-weight:800; padding:2px 5px; border-radius:3px; background:var(--gold2); color:var(--onGold)}
#pwApp .badge.free{background:var(--emerald); color:#fff}
#pwApp .swrow{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
#pwApp .dot{width:32px; height:32px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; outline-offset:2px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
#pwApp .dot[aria-pressed="true"]{border-color:var(--gold2); box-shadow:0 0 0 2px var(--bg2), 0 0 0 4px var(--gold2)}
#pwApp .charprev{display:grid; place-items:center; background:radial-gradient(circle at 50% 70%, rgba(201,162,39,.16), transparent 70%); border:1px solid var(--line); border-radius:8px; padding:8px; margin-bottom:14px}
#pwApp .charprev svg{height:190px; width:auto}
#pwApp .toggle{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line)}
#pwApp .toggle p{margin:0; font-size:13.5px; font-weight:600}
#pwApp .toggle small{display:block; color:var(--muted); font-size:12px; font-weight:400}
#pwApp .toggle input{width:40px; height:22px; appearance:none; background:var(--bg3); border-radius:999px; position:relative; cursor:pointer; border:1px solid var(--line2); flex:none}
#pwApp .toggle input::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--muted); transition:transform .2s}
#pwApp .toggle input:checked{background:var(--gold)}
#pwApp .toggle input:checked::after{transform:translateX(18px); background:var(--onGold)}
#pwApp .addr{display:flex; align-items:center; border:1px solid var(--line2); border-radius:6px; background:var(--bg3); overflow:hidden}
#pwApp .addr:focus-within{border-color:var(--gold)}
#pwApp .addr span{padding:0 12px; color:var(--muted); font-size:13.5px}
#pwApp .addr input{border:0 !important; background:none !important; padding:12px 0 12px 12px; font-weight:700}
#pwApp .status{font-size:12.5px; margin-top:8px; min-height:19px}
#pwApp .status.ok{color:var(--ok)}
#pwApp .status.bad{color:var(--bad)}
#pwApp .status.wait{color:var(--muted)}
#pwApp .chips{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 16px}
#pwApp .chip{border:1px solid var(--line2); background:none; border-radius:999px; padding:5px 11px; font-size:12px; cursor:pointer}
#pwApp .chip:hover{border-color:var(--gold)}
#pwApp .box{border:1px solid var(--line2); border-radius:8px; padding:14px; margin-top:16px; background:var(--card)}
#pwApp .box .url{font-weight:700; word-break:break-all; color:var(--gold2)}
#pwApp .box p{margin:0 0 6px; color:var(--soft); font-size:12.5px}
#pwApp .acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
#pwApp .stat{display:flex; gap:18px; margin-top:12px}
#pwApp .stat div b{display:block; font-family:var(--display); font-size:28px; line-height:1; color:var(--gold2)}
#pwApp .stat div span{font-size:11.5px; color:var(--muted)}
#pwApp .stage{display:flex; flex-direction:column; min-width:0; min-height:0}
#pwApp .stage-bar{display:flex; align-items:center; gap:10px; padding:12px 20px; flex-wrap:wrap}
#pwApp .seg{display:inline-flex; border:1px solid var(--line2); border-radius:6px; padding:3px; background:var(--bg2)}
#pwApp .seg button{border:0; background:none; padding:6px 13px; border-radius:4px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--muted)}
#pwApp .seg button[aria-pressed="true"]{background:var(--gold); color:var(--onGold)}
#pwApp .stage-url{flex:1; text-align:center; font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#pwApp .stage-url b{color:var(--ink)}
#pwApp .device-wrap{flex:1; display:grid; place-items:center; padding:4px 20px 22px; min-height:0}
#pwApp .device{position:relative; overflow:hidden; background:#000; transition:width .35s ease, border-radius .35s ease}
#pwApp .device.phone{width:390px; height:min(810px, calc(100vh - 140px)); border-radius:44px; border:10px solid #0b0703; box-shadow:0 0 0 1px rgba(201,162,39,.25), 0 40px 80px -30px rgba(0,0,0,.8)}
#pwApp .device.desktop{width:100%; height:100%; border-radius:10px; border:1px solid var(--line2)}
#pwApp .device .site-scroll{height:100%}
#pwApp .fab{display:none}
#pwApp .full{position:fixed; inset:0; z-index:50; background:#000}
#pwApp .full[hidden]{display:none}
#pwApp .full .site-scroll{height:100%}
#pwApp .exit{position:fixed; z-index:80; left:max(12px, env(safe-area-inset-left,0px)); top:calc(12px + env(safe-area-inset-top,0px)); border:0; border-radius:999px; padding:8px 14px; background:rgba(12,8,2,.75); color:#F4EAD4; cursor:pointer; font-family:var(--ui); font-size:12.5px; font-weight:600; backdrop-filter:blur(6px)}
#pwApp .modal{position:fixed; inset:0; z-index:90; display:grid; place-items:center; background:rgba(8,5,1,.7); padding:20px}
#pwApp .modal[hidden]{display:none}
#pwApp .modal-card{background:var(--bg2); border:1px solid rgba(201,162,39,.35); border-radius:12px; max-width:460px; width:100%; padding:28px; text-align:center; animation:pop .45s cubic-bezier(.2,.9,.3,1.3)}
@keyframes pop{from{opacity:0; transform:scale(.92)}to{opacity:1; transform:none}}
#pwApp .modal-card .om{width:56px; height:56px; font-size:30px; margin:0 auto 14px}
#pwApp .modal-card h3{font-family:var(--display); font-weight:700; font-size:32px; margin:0 0 6px; line-height:1.1}
#pwApp .modal-card p{color:var(--soft); margin:0 0 16px}
#pwApp .modal-card .url{font-weight:700; font-size:17px; padding:12px; border:1px dashed var(--gold); border-radius:6px; margin-bottom:16px; word-break:break-all; color:var(--gold2)}
#pwApp .modal-card .acts{justify-content:center}
/* live status (2026-09-29): "Website Published ✓" only once the address really answers */
#pwApp .pubstat{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13px; padding:5px 12px; border-radius:99px; margin:0 0 10px; color:var(--gold2); background:rgba(201,162,39,.12); border:1px solid rgba(201,162,39,.35)}
#pwApp .pubstat.ok{color:#8BE3AA; background:rgba(46,160,90,.15); border-color:rgba(46,160,90,.5)}
#pwApp .pubstat.bad{color:#F3A595; background:rgba(220,90,70,.13); border-color:rgba(220,90,70,.45)}
#pwApp .urlrow{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:0 0 14px}
#pwApp .urlrow .url{flex:1 1 200px; min-width:0; margin:0}
#pwApp .urlrow.dim .url{opacity:.55}
#pwApp .urlbtns{display:flex; flex-wrap:wrap; justify-content:center; gap:8px}
#pwApp .btn.big{display:flex; width:100%; padding:15px 18px; font-size:17px; margin:0 0 8px; box-sizing:border-box; white-space:normal; text-align:center}
#pwApp .btn.big[hidden], #pwApp .urlbtns[hidden]{display:none}
#pwApp .livemsg{margin:0 0 12px; color:var(--soft); font-size:14px; line-height:1.5}
#pwApp .spin{width:28px; height:28px; margin:2px auto 16px; border-radius:50%; border:3px solid rgba(201,162,39,.25); border-top-color:var(--gold); animation:pwspin .8s linear infinite}
#pwApp .spin[hidden]{display:none}
@keyframes pwspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#pwApp .spin{animation-duration:2.4s}}
@media (max-width:520px){#pwApp .urlbtns{width:100%; flex-wrap:nowrap} #pwApp .urlbtns .btn{flex:1 1 0; min-width:0; padding:12px 6px; font-size:14.5px; white-space:normal; line-height:1.2; min-height:46px}}
#pwApp .toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translate(-50%, 20px); opacity:0; z-index:100; background:var(--gold2); color:var(--onGold); font-weight:600; padding:10px 16px; border-radius:6px; font-size:13px; transition:.3s; pointer-events:none}
#pwApp .toast.show{opacity:1; transform:translate(-50%,0)}
@media (max-width: 900px){#pwApp .studio{grid-template-columns:1fr}
#pwApp .stage{display:none}
#pwApp .crumb,#pwApp .saved{display:none}
#pwApp .fab{display:inline-flex; position:fixed; right:16px; bottom:calc(76px + env(safe-area-inset-bottom,0px)); z-index:40; box-shadow:0 10px 30px -10px rgba(0,0,0,.7)}}
/* ===== 2. Shubh Muhrat integration ===== */
html,body{margin:0; background:#160F04}
#pwApp{height:calc(100dvh - var(--pw-top, 64px)); display:flex; flex-direction:column; padding:0}
#pwApp .topbar{flex:none; padding:10px 20px}
#pwApp .studio{flex:1; min-height:0; height:auto}
#pwApp .full{z-index:1200} #pwApp .modal{z-index:1300} #pwApp .toast{z-index:1400}
#pwApp .full iframe,#pwApp .device iframe{border:0; width:100%; height:100%; display:block; background:#160F04}
#pwApp .device{position:relative}
#pwApp .device iframe{position:absolute; inset:0}
#pwApp .device iframe.pending{visibility:hidden}
#pwApp .full .exit{z-index:1210}
/* styled selects — never the native look (AGENTS: no raw native <select>) */
#pwApp select{appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23E7C75B' stroke-width='1.8'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center}
#pwApp select option{background:#241C0E; color:#F4EAD4}
/* opening look + e-card picker */
#pwApp .covers{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px}
#pwApp .covers .pick .swatch{height:54px; font-size:18px}
#pwApp .covers .pick:disabled{opacity:.4; cursor:not-allowed}
#pwApp .designs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:6px 0 14px}
#pwApp .designs .pick{padding:5px}
#pwApp .designs .pick img{display:block; width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:4px; background:var(--bg3)}
#pwApp .designs .pick b{font-size:11.5px; line-height:1.25; margin-top:5px}
#pwApp .charprev img{height:190px; width:auto; display:block}
/* sections: reorder + show / hide */
#pwApp .secrow{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line)}
#pwApp .secrow .mv{display:flex; flex-direction:column; gap:3px}
#pwApp .secrow .mv button{width:28px; height:22px; border:1px solid var(--line2); border-radius:4px; background:none; color:var(--soft); cursor:pointer; font-size:10px; line-height:1; padding:0}
#pwApp .secrow .mv button:disabled{opacity:.3; cursor:default}
#pwApp .secrow .t{flex:1; min-width:0}
#pwApp .secrow .t b{display:block; font-size:13.5px}
#pwApp .secrow .t small{display:block; color:var(--muted); font-size:12px}
#pwApp .secrow.off .t{opacity:.5}
#pwApp .always{font-size:11px; color:var(--muted); border:1px solid var(--line2); border-radius:999px; padding:3px 9px; white-space:nowrap}
#pwApp .secrow input[type=checkbox],#pwApp .tg{width:40px; height:22px; appearance:none; -webkit-appearance:none; background:var(--bg3); border-radius:999px; position:relative; cursor:pointer; border:1px solid var(--line2); flex:none; margin:0}
#pwApp .secrow input[type=checkbox]::after,#pwApp .tg::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--muted); transition:transform .2s}
#pwApp .secrow input[type=checkbox]:checked,#pwApp .tg:checked{background:var(--gold)}
#pwApp .secrow input[type=checkbox]:checked::after,#pwApp .tg:checked::after{transform:translateX(18px); background:var(--onGold)}
/* "more for your page" + small list editors (elders, contacts) */
#pwApp details.more{border:1px solid var(--line2); border-radius:8px; padding:10px 12px; margin:4px 0 14px; background:var(--card)}
#pwApp details.more > summary{cursor:pointer; font-weight:600; font-size:13.5px; list-style:none; display:flex; justify-content:space-between; align-items:center}
#pwApp details.more > summary::-webkit-details-marker{display:none}
#pwApp details.more > summary::after{content:"▾"; color:var(--muted); transition:transform .2s}
#pwApp details.more[open] > summary::after{transform:rotate(180deg)}
#pwApp details.more > summary small{display:block; color:var(--muted); font-weight:400; font-size:12px}
#pwApp details.more .inner{padding-top:12px}
#pwApp .li{display:grid; grid-template-columns:1.3fr 1fr auto; gap:8px; margin-bottom:8px; align-items:center}
#pwApp .li.c3{grid-template-columns:1fr 1fr 1fr auto}
#pwApp .li button{border:1px solid var(--line2); background:none; color:var(--muted); border-radius:6px; width:34px; height:38px; cursor:pointer}
#pwApp .toggle.sm{padding:9px 0}
/* share: RSVP numbers + wish moderation */
#pwApp .stat.w{flex-wrap:wrap; gap:14px 22px}
#pwApp .wlist{margin-top:10px; display:grid; gap:8px; max-height:300px; overflow-y:auto}
#pwApp .witem{display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:8px; padding:9px 10px; background:var(--bg3)}
#pwApp .witem p{margin:0; font-size:13px; color:var(--ink)}
#pwApp .witem small{color:var(--muted); font-size:11.5px}
#pwApp .witem button{margin-left:auto; flex:none; border:1px solid var(--line2); background:none; color:var(--bad); border-radius:6px; padding:4px 9px; font-size:12px; cursor:pointer}
#pwApp .addr span.pre{padding:0 0 0 12px; color:var(--muted)}
#pwApp .addr input{padding-left:2px !important}
#pwApp .note{font-size:12px; color:var(--muted); margin:8px 0 0}
#pwApp .up{font-size:12px; color:var(--muted)}
/* phones + portrait tablets */
#pwApp .panel,#pwApp .stage{min-width:0}          /* the step tabs scroll; they never widen the page */
@media (max-width: 900px){
  #pwApp .studio{grid-template-columns:minmax(0,1fr)}
  #pwApp input,#pwApp textarea,#pwApp select{font-size:16px}          /* iPhone focus-zoom killer */
  #pwApp .topbar .crumb{display:none}
  #pwApp .topbar{padding:8px 14px; gap:8px}
  #pwApp .step-body{padding:18px 16px 26px}
  #pwApp .panel-foot{padding:10px 16px}
  #pwApp .fab{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
@media (max-width: 420px){ #pwApp .row{grid-template-columns:1fr} #pwApp .li,#pwApp .li.c3{grid-template-columns:1fr 1fr auto} #pwApp .li.c3 input:nth-child(3){grid-column:1/3} }
/* the site cookie banner (shubhmuhrat hosts) — the studio ends above it */
body.vivah-consent-on #pwApp{height:calc(100dvh - var(--pw-top, 64px) - var(--vivah-consent-h, 96px))}
/* …and the fixed "Preview website" button + toasts sit above it (it hid the button on phones — found live 2026-09-29) */
body.vivah-consent-on #pwApp .fab{bottom:calc(var(--vivah-consent-h, 96px) + 16px)}
body.vivah-consent-on #pwApp .toast{bottom:calc(var(--vivah-consent-h, 96px) + 24px)}

/* ===== 3. The personal-subdomain banner (Share step) + hashtag ideas ===== */
#pwApp .tagideas{margin:-4px 0 14px}
#pwApp .tagideas-t{display:block; font-size:12px; color:var(--muted); margin-bottom:6px}
#pwApp .tagideas .chips{margin:0}
#pwApp .tagideas .chip{border-color:rgba(242,169,203,.35)}
#pwApp .tagideas .chip:hover{border-color:#F2A9CB}
#pwApp .subban{position:relative; overflow:hidden; border-radius:14px; padding:20px 18px 18px; margin:4px 0 14px;
  background:linear-gradient(160deg, #2C1220 0%, #1F1508 58%, #241C0E 100%); border:1px solid rgba(231,199,91,.35);
  box-shadow:0 22px 50px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05)}
#pwApp .subban-glow{position:absolute; inset:-40% -30% auto auto; width:320px; height:320px; pointer-events:none;
  background:radial-gradient(circle, rgba(242,169,203,.22), rgba(231,199,91,.08) 45%, transparent 70%)}
#pwApp .subban > :not(.subban-glow){position:relative}
#pwApp .subban-eyebrow{margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold2)}
#pwApp .subban-title{margin:0; font-family:var(--display); font-weight:700; font-size:26px; line-height:1.1}
#pwApp .subban-preview{margin:14px 0 10px; padding:12px 14px; border-radius:10px; background:rgba(12,8,2,.45);
  border:1px dashed rgba(231,199,91,.35); font-family:var(--display); font-weight:700; font-size:clamp(20px, 5.2vw, 29px);
  line-height:1.15; white-space:nowrap; overflow:hidden; text-align:center}
#pwApp .subban-preview.wrap{white-space:normal}                  /* only a very long name wraps — never "ShubhMuhrat.com" */
#pwApp .sb-dom{white-space:nowrap; display:inline-block}
#pwApp .sb-sub{background:linear-gradient(135deg,#FFC2D8 0%,#F2A9CB 40%,#E0607A 100%); -webkit-background-clip:text; background-clip:text;
  color:transparent; filter:drop-shadow(0 0 10px rgba(242,169,203,.35)); display:inline-block; overflow-wrap:anywhere}
#pwApp .sb-sub.bump{animation:sbBump .35s cubic-bezier(.2,.9,.3,1.3)}
@keyframes sbBump{from{transform:scale(.94)}to{transform:none}}
#pwApp .sb-dot{color:var(--gold2)}
#pwApp .sb-shubh{background:linear-gradient(180deg,#FFF8E9,#D8C29A); -webkit-background-clip:text; background-clip:text; color:transparent}
#pwApp .sb-muhrat{font-style:italic; background:linear-gradient(180deg,#F6D98E,#C9A227); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.04em}
#pwApp .sb-com{color:var(--gold); font-weight:600}
/* the logo's own wordmark (frontend/assets/logo.png): a light high-contrast serif — ivory "Shubh", gold italic "Muhrat" */
#pwApp .sb-shubh, #pwApp .sb-muhrat{font-weight:500; letter-spacing:.01em}
#pwApp .subban-line{margin:0 0 14px; color:var(--soft); font-size:13px; text-align:center}
#pwApp .subban-addr .suf{padding:0 12px; color:var(--muted); font-size:13.5px; white-space:nowrap}
#pwApp .subban-addr input{padding-left:14px !important; min-width:0; flex:1}   /* no /w/ prefix here: the name starts the box */
#pwApp .subban-acts{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px}
#pwApp .subban-cta{background:linear-gradient(135deg,#F7B6CF,#E0607A); color:#2A0B15; border:0; font-weight:800; padding:11px 18px;
  box-shadow:0 10px 26px -12px rgba(224,96,122,.7)}
#pwApp .subban-cta:hover{filter:brightness(1.06)}
#pwApp .subban-cta:disabled{opacity:.5}
#pwApp .subban-fine{font-size:12px; color:var(--muted)}
#pwApp .subban-owned{margin:12px 0 0; padding:10px 12px; border-radius:8px; background:rgba(127,196,154,.10); border:1px solid rgba(127,196,154,.35);
  color:var(--ok); font-size:13px; font-weight:600}
#pwApp .subban-owned a{color:var(--gold2)}
#pwApp .subban.owned .subban-cta{background:linear-gradient(135deg,var(--gold2),var(--gold)); color:var(--onGold); box-shadow:none}
#pwApp .freelink{font-size:12.5px; color:var(--muted); margin:0 0 10px; text-align:center}
#pwApp .freelink b{color:var(--ink); font-weight:600}
#pwApp .pro-note{font-size:12px; color:#F2A9CB; margin:8px 0 0}