/* MoMPA Home — /home dashboard (visitor → resident). v1 2026-09-30.
   Theme tokens come from layouts/review.blade.php (aurora, .glass, .brand-grad, .sheen, .dock,
   --brand/--gold). This file only adds layout. Mobile-first, max 520px like the review journey. */
/* Parity with the approved mockup (verified by computed-style diff, 2026-09-30):
   layouts.review loads Tailwind CDN whose preflight sets html{line-height:1.5} and leaves body
   colour black; the mockup has neither. Re-establish the mockup's base inside the dashboard. */
.app, .dock, .res-tip{ line-height:normal; color:var(--ink); }
.app p.empty{ margin:16px 0; }
:root{ --ink:#1B1130; --muted:#7d7291; --line:rgba(91,42,134,.10); --ok:#177245; --okbg:#e7f6ee; --warn:#9a5b00; --warnbg:#fff3d9; --bad:#b3261e; --badbg:#fde8e8; }
/* ===== Dashboard layout (extends the theme; no new colours) ===== */
.app{ position:relative; z-index:1; max-width:520px; margin:0 auto; padding:14px 14px 110px; }
.topbar{ position:sticky; top:10px; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:10px;
         border-radius:18px; padding:10px 12px 10px 14px; margin-bottom:14px; }
.wordmark{ display:flex; align-items:baseline; gap:6px; text-decoration:none; }
.wordmark b{ font-family:'Fraunces',serif; font-size:19px; font-weight:var(--fw-700,700); color:var(--brand); letter-spacing:-.2px; }
.wordmark b em{ font-style:normal; color:var(--gold); }
.wordmark small{ font-size:9.5px; font-weight:var(--fw-700,700); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.avatar{ width:36px; height:36px; border-radius:12px; display:grid; place-items:center; color:#fff; font-weight:var(--fw-800,800); font-size:13px; }

.hero{ border-radius:26px; padding:20px 20px 18px; color:#fff; margin-bottom:14px; }
.hero .eyebrow{ font-size:10.5px; font-weight:var(--fw-800,800); letter-spacing:.16em; text-transform:uppercase; color:#f6d38a; margin:0 0 6px; }
.hero h1{ font-family:'Fraunces',serif; font-weight:600; font-size:26px; line-height:1.1; margin:0 0 6px; letter-spacing:-.3px; }
.hero p{ margin:0; font-size:12.5px; opacity:.85; }
.hero .status{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:11.5px; font-weight:var(--fw-800,800); padding:6px 11px; border-radius:999px;
               background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); }
.hero .status i{ width:7px; height:7px; border-radius:50%; background:#6ee7a8; box-shadow:0 0 0 3px rgba(110,231,168,.25); }
.hero .status.visitor i{ background:#f6d38a; box-shadow:0 0 0 3px rgba(246,211,138,.25); }


.sec{ margin:0 0 14px; }
.sec-h{ display:flex; align-items:center; justify-content:space-between; margin:0 0 10px; padding:0 4px; }
.sec-h h2{ font-family:'Fraunces',serif; font-weight:600; font-size:17px; margin:0; letter-spacing:-.2px; }
.sec-h a{ font-size:12px; font-weight:var(--fw-800,800); color:var(--brand); text-decoration:none; }
.card{ border-radius:22px; padding:16px; }
.row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.row:last-child{ border-bottom:0; }
.row .t{ flex:1; min-width:0; }
.row .t b{ display:block; font-size:13.5px; font-weight:var(--fw-700,700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .t span{ font-size:11.5px; color:var(--muted); }
.row .ic{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:none; font-size:17px; background:rgba(91,42,134,.08); }
.pill{ font-size:10.5px; font-weight:var(--fw-800,800); border-radius:99px; padding:4px 9px; white-space:nowrap; }
.pill.ok{ background:var(--okbg); color:var(--ok); } .pill.warn{ background:var(--warnbg); color:var(--warn); }
.pill.brand{ background:rgba(91,42,134,.10); color:var(--brand); } .pill.muted{ background:#f4f2f7; color:#8b8397; }
.pill.bad{ background:var(--badbg); color:var(--bad); }



/* Timeline (inquiry) */
.tl{ position:relative; padding-left:22px; }
.tl::before{ content:''; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--line); border-radius:2px; }
.tl .st{ position:relative; padding:0 0 12px; }
.tl .st::before{ content:''; position:absolute; left:-19px; top:4px; width:10px; height:10px; border-radius:50%; background:#fff; border:2px solid var(--brand2); }
.tl .st.done::before{ background:var(--brand2); }
.tl .st b{ display:block; font-size:12.5px; font-weight:var(--fw-700,700); }
.tl .st span{ font-size:11px; color:var(--muted); }

/* Explore chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips a{ text-decoration:none; font-size:12.5px; font-weight:var(--fw-700,700); color:var(--brand); background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 13px; }
.chips a.city{ background:linear-gradient(135deg,#8b4fc4,#5b2a86); color:#fff; border-color:transparent; }

/* Modules grid */
.mods{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.mod{ border-radius:18px; padding:13px 8px 12px; text-align:center; text-decoration:none; color:var(--ink); position:relative; }
.mod .em{ font-size:22px; line-height:1; margin-bottom:8px; }
.mod b{ display:block; font-size:11.5px; font-weight:var(--fw-800,800); line-height:1.15; }
.mod .soon{ position:absolute; top:7px; right:7px; font-size:9.5px; font-weight:var(--fw-800,800); letter-spacing:.06em; text-transform:uppercase; color:var(--warn); background:var(--warnbg); padding:3px 6px; border-radius:999px; }
.mod .cnt{ position:absolute; top:7px; right:7px; min-width:18px; height:18px; border-radius:999px; background:var(--gold); color:#3d1c5c; font-size:10px; font-weight:var(--fw-800,800); display:grid; place-items:center; padding:0 5px; }
.mod.soon-tile{ opacity:.6; }

/* CTA */
.cta{ display:block; text-align:center; text-decoration:none; color:#fff; border-radius:18px; padding:14px; font-size:14px; font-weight:var(--fw-800,800); margin-top:12px; }

/* Bottom dock (theme .dock) */
/* v335: the dock rules live in assets/css/dock.css (the partial loads it — the dock is on attendance / night pages too) */

.empty{ text-align:center; color:var(--muted); font-size:12.5px; padding:14px 0 4px; }

/* verify (OTP) screen */
.otp{ display:flex; gap:8px; justify-content:center; margin:14px 0 6px; }
.otp input{ width:44px; height:52px; text-align:center; font-size:22px; font-weight:var(--fw-800,800); border:1.5px solid rgba(91,42,134,.18); border-radius:12px; background:#fff; color:var(--ink); }
.otp input:focus{ outline:none; border-color:var(--brand2); box-shadow:0 0 0 3px rgba(123,63,176,.15); }
.msg{ font-size:12.5px; color:var(--muted); text-align:center; margin:8px 0 0; min-height:18px; }
.msg.err{ color:var(--bad); font-weight:var(--fw-700,700); }
.link{ background:none; border:0; font:inherit; font-size:12.5px; font-weight:var(--fw-800,800); color:var(--brand); cursor:pointer; padding:6px; }
.notice{ border-radius:16px; padding:12px 14px; font-size:12.5px; color:var(--ink); display:flex; gap:10px; align-items:flex-start; }
.notice b{ display:block; font-size:13px; }
.flash{ border-radius:14px; padding:10px 14px; font-size:12.5px; font-weight:var(--fw-700,700); background:var(--okbg); color:var(--ok); margin-bottom:12px; }
.btn-forget{ background:none; border:0; font:inherit; font-size:12px; font-weight:var(--fw-700,700); color:var(--muted); cursor:pointer; padding:6px 0; text-decoration:underline; }

/* status segment in the top bar (mirrors the mockup's Visitor | Resident switch; read-only) */
.role-seg{ display:flex; gap:3px; background:rgba(91,42,134,.08); border-radius:999px; padding:3px; }
.role-seg span, .role-seg button{ white-space:nowrap; border:0; background:transparent; font:inherit; font-size:11px; font-weight:var(--fw-800,800); color:var(--muted); padding:5px 10px; border-radius:999px; line-height:1.2; }
.role-seg .on{ background:#fff; color:var(--brand); box-shadow:0 2px 8px -3px rgba(61,28,92,.35); }
.role-seg .lock{ cursor:pointer; opacity:.7; }
.role-seg .lock{ display:inline-flex; align-items:center; gap:4px; }
.role-seg .lock svg{ width:10px; height:10px; flex:none; }
.res-tip{ border-radius:16px; padding:12px 14px; margin:-6px 0 14px; font-size:12.5px; line-height:1.5; color:var(--ink); }
.res-tip b:first-child{ display:block; font-size:13px; margin-bottom:2px; }
.wordmark{ white-space:nowrap; flex:none; }
@media (max-width:430px){ .wordmark small{ display:none; } }
@media (max-width:380px){ .topbar .avatar{ display:none; } .role-seg span, .role-seg button{ padding:5px 8px; font-size:10.5px; } .wordmark b{ font-size:17px; } }

/* multiple inquiry cards: gap only between cards (mockup has a single card, margin 0) */
.inq + .inq{ margin-top:10px; }

/* review screenshot popup (dashboard, 2-minute, once) */
.rvp{ position:fixed; inset:0; z-index:220; display:flex; align-items:flex-end; justify-content:center; }
.rvp-bg{ position:absolute; inset:0; background:rgba(28,16,41,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.rvp-card{ position:relative; width:100%; max-width:520px; border-radius:26px 26px 0 0; padding:22px 18px 20px; line-height:normal; color:var(--ink);
  background:rgba(255,255,255,.94); animation:fadeUp .35s cubic-bezier(.2,.8,.2,1) both; }
@media(min-width:560px){ .rvp{ align-items:center; } .rvp-card{ border-radius:26px; } }
.rvp-x{ position:absolute; top:6px; right:8px; width:44px; height:44px; border:0; border-radius:50%; background:rgba(91,42,134,.08); color:var(--brand); font-size:22px; line-height:1; cursor:pointer; }
.rvp-eyebrow{ margin:0 0 4px; font-size:10.5px; font-weight:var(--fw-800,800); letter-spacing:.14em; text-transform:uppercase; color:var(--brand2); }
.rvp-card h3{ margin:0 0 4px; font-family:'Fraunces',serif; font-weight:600; font-size:20px; padding-right:34px; }
.rvp-sub{ margin:0 0 14px; font-size:12.5px; color:var(--muted); }
.rvp-drop{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:18px 12px; border:1.5px dashed rgba(91,42,134,.25); border-radius:18px; cursor:pointer; background:#fff; text-align:center; }
.rvp-drop b{ font-size:13.5px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rvp-drop small{ font-size:11px; color:var(--muted); }
.rvp-ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(91,42,134,.08); color:var(--brand); font-weight:var(--fw-800,800); }
.rvp-go{ width:100%; border:0; cursor:pointer; font-family:inherit; }
.rvp-go:disabled{ opacity:.55; cursor:default; }
.rvp-err{ margin:8px 0 0; font-size:12px; font-weight:var(--fw-700,700); color:var(--bad); }
.rvp-timer{ margin:10px 0 0; text-align:center; font-size:11.5px; color:var(--muted); }
.rvp-ok{ width:56px; height:56px; margin:6px auto 10px; border-radius:50%; display:grid; place-items:center; font-size:26px; font-weight:var(--fw-800,800); color:var(--ok); background:var(--okbg); }
.rvp-card .rvp-ok + h3, .rvp-card .rvp-ok ~ .rvp-sub{ text-align:center; padding-right:0; }

/* one-review notice — ultra premium (dark plum glass, gold seal) */
.ro{ position:fixed; inset:0; z-index:230; display:flex; align-items:center; justify-content:center; padding:18px; animation:roIn .28s ease both; }
.ro.ro-out{ opacity:0; transition:opacity .2s ease; }
@keyframes roIn{ from{opacity:0} to{opacity:1} }
.ro-bg{ position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 0%,rgba(61,28,92,.78),rgba(16,8,26,.9)); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.ro-card{ position:relative; width:100%; max-width:400px; text-align:center; color:#fff; line-height:normal; border-radius:28px; padding:30px 22px 22px;
  background:linear-gradient(160deg,#4c2270 0%,#34164f 55%,#241037 100%); border:1px solid rgba(246,211,138,.30);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12); animation:fadeUp .4s cubic-bezier(.2,.8,.2,1) both; overflow:hidden; }
.ro-card::before{ content:''; position:absolute; inset:-40% -40% auto auto; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(246,211,138,.22),transparent 70%); pointer-events:none; }
.ro-x{ position:absolute; top:12px; right:12px; width:44px;height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; font-size:20px; line-height:1; cursor:pointer; }
.ro-seal{ width:64px; height:64px; margin:0 auto 14px; border-radius:20px; display:grid; place-items:center; color:#3d1c5c;
  background:linear-gradient(135deg,#f6d38a,#e0a43b); box-shadow:0 14px 30px -12px rgba(224,164,59,.8), inset 0 1px 0 rgba(255,255,255,.6); }
.ro-seal svg{ width:32px; height:32px; }
.ro-eyebrow{ margin:0 0 8px; font-size:10.5px; font-weight:var(--fw-800,800); letter-spacing:.18em; text-transform:uppercase; color:#f6d38a; }
.ro-card h3{ margin:0 0 8px; font-family:'Fraunces',serif; font-weight:600; font-size:23px; line-height:1.18; letter-spacing:-.2px; }
.ro-sub{ margin:0 auto 16px; max-width:32ch; font-size:13px; color:rgba(255,255,255,.78); line-height:1.5; }
.ro-rule{ display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin:0 0 18px; }
.ro-rule span{ font-size:11.5px; font-weight:var(--fw-700,700); padding:7px 11px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); }
.ro-go{ width:100%; border:0; cursor:pointer; font-family:inherit; font-size:14.5px; font-weight:var(--fw-800,800); color:#3d1c5c; padding:14px; border-radius:16px;
  background:linear-gradient(135deg,#f6d38a,#e0a43b); box-shadow:0 14px 28px -14px rgba(224,164,59,.9); }

/* ---- My inquiries: one card per inquiry, tap for full details (2026-09-30) ---- */
.inq{ padding:14px 14px 12px; }
.inq-new{ box-shadow:0 0 0 2px rgba(123,63,176,.35), 0 18px 40px -26px rgba(91,42,134,.55) !important; }
.inq-d > summary{ list-style:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.inq-d > summary::-webkit-details-marker{ display:none; }
.inq-sum{ display:flex; align-items:flex-start; gap:11px; }
.inq-ic{ flex:none; width:40px; height:40px; border-radius:13px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--brand2),var(--brand)); box-shadow:0 8px 18px -10px rgba(91,42,134,.7); }
.inq-ic svg{ width:20px; height:20px; }
.inq-t{ flex:1; min-width:0; }
.inq-t b{ display:block; font-size:14.5px; font-weight:var(--fw-800,800); color:var(--ink); line-height:1.3; }
.inq-when{ display:block; margin-top:3px; font-size:12.5px; font-weight:var(--fw-700,700); color:var(--brand); }
.inq-t small{ display:block; margin-top:2px; font-size:11px; color:var(--muted); }
.inq-side{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.inq-more{ font-size:11.5px; font-weight:var(--fw-800,800); color:var(--brand); white-space:nowrap; }
.inq-more i{ font-style:normal; display:inline-block; transition:transform .2s; }
.inq-d[open] .inq-more i{ transform:rotate(180deg); }
.inq-body{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); animation:inqIn .2s ease; }
@keyframes inqIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.inq-dl{ margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.inq-dl div{ min-width:0; }
.inq-dl dt{ font-size:10.5px; font-weight:var(--fw-800,800); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.inq-dl dd{ margin:2px 0 0; font-size:13px; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
.inq-sub{ margin:14px 0 8px; font-size:10.5px; font-weight:var(--fw-800,800); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.inq-acts{ display:flex; gap:8px; margin-top:12px; }
.inq-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; height:42px; border-radius:14px; font-size:13px; font-weight:var(--fw-800,800); text-decoration:none; }
.inq-btn svg{ width:17px; height:17px; flex:none; }
.inq-btn-wa{ color:#fff; background:linear-gradient(135deg,#2bd46a,#1aa851); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 20px -12px rgba(26,168,81,.8); }
.inq-btn-main{ color:#fff; background:linear-gradient(135deg,var(--brand2),var(--brand)); }
.inq-btn:active{ transform:scale(.98); }

/* ---- inquiries: 4 on the dashboard + "View all", full list page, submitted time (2026-09-30) ---- */
.inq-time{ display:flex !important; align-items:center; gap:4px; margin-top:3px !important; font-size:11.5px !important; font-weight:600; color:var(--muted); }
.inq-time svg{ width:12px; height:12px; flex:none; }
.inq-back{ display:inline-flex; align-items:center; gap:6px; margin:0 4px 12px; font-size:12.5px; font-weight:var(--fw-800,800); color:var(--brand); text-decoration:none; }
.inq-pager{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:14px 0 4px; }
.inq-pager a, .inq-pager .off{ flex:0 0 auto; padding:10px 14px; border-radius:14px; font-size:12.5px; font-weight:var(--fw-800,800); color:var(--brand); text-decoration:none; }
.inq-pager .off{ color:#c3bccd; }
.inq-pager b{ font-size:12px; color:var(--muted); font-weight:var(--fw-700,700); }

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* v38-ui (Android): bigger touch area for the small text links — visual size unchanged */
@media (pointer:coarse){
  .sec-h a, .inq-back, .link{ padding-top:9px; padding-bottom:9px; margin-top:-9px; margin-bottom:-9px; }
}

/* v56 (2026-10-08) — current stay under the name, booking / inquiry accordions, "Paid so far" + receipt */

.mx{ position:fixed; inset:0; z-index:9000; display:flex; align-items:flex-end; justify-content:center; }
.mx[hidden]{ display:none; }
.mx-bg{ position:absolute; inset:0; background:rgba(28,16,41,.55); backdrop-filter:blur(3px); opacity:0; transition:opacity .2s; }
.mx.on .mx-bg{ opacity:1; }
.mx-card{ position:relative; width:min(440px,100%); box-sizing:border-box; margin:0; padding:26px 22px calc(22px + env(safe-area-inset-bottom,0px)); border-radius:28px 28px 0 0; outline:0;
  background:radial-gradient(120% 80% at 100% 0%,rgba(199,154,60,.18),transparent 60%),linear-gradient(180deg,#fff,#FAF3E7); color:#241235; box-shadow:0 -24px 60px -20px rgba(28,16,41,.5);
  transform:translateY(100%); transition:transform .28s cubic-bezier(.2,.8,.2,1); text-align:center; }
.mx.on .mx-card{ transform:none; }
@media (min-width:640px){ .mx{ align-items:center; } .mx-card{ border-radius:28px; transform:translateY(24px) scale(.97); opacity:0; transition:transform .25s, opacity .25s; } .mx.on .mx-card{ opacity:1; } }
.mx-x{ position:absolute; top:12px; right:12px; width:44px; height:44px; border:0; border-radius:50%; background:#f4eefa; color:#46143C; font-size:24px; cursor:pointer; }
.mx-ic{ width:64px; height:64px; margin:0 auto 10px; border-radius:20px; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,#6D3AA3,#46143C); box-shadow:0 14px 28px -14px rgba(70,20,60,.8), 0 0 0 4px rgba(199,154,60,.35); }
.mx-ic svg{ width:32px; height:32px; }
.mx.mx-late .mx-ic{ background:linear-gradient(135deg,#d64545,#8a1c1c); box-shadow:0 14px 28px -14px rgba(138,28,28,.8), 0 0 0 4px rgba(214,69,69,.25); }
.mx.mx-soon .mx-ic, .mx.mx-due .mx-ic{ background:linear-gradient(135deg,#e5a52d,#b57610); }
.mx-eyebrow{ margin:0; font-size:10.5px; font-weight:var(--fw-800,800); letter-spacing:.16em; text-transform:uppercase; color:var(--m-gold-ink,#8A6420); }
.mx.mx-late .mx-eyebrow{ color:#b42323; }
.mx-card h3{ margin:6px 0 8px; font-family:'Fraunces',serif; font-weight:600; font-size:23px; line-height:1.2; color:#46143C; }
.mx-body{ margin:0 auto; max-width:360px; font-size:14px; line-height:1.55; color:#4b3d5c; }
.mx-dl{ display:grid; grid-template-columns:1fr auto; gap:0; margin:16px 0 0; padding:6px 14px; border-radius:16px; background:#fff; border:1px solid #eadfcd; text-align:left; }
.mx-dl dt, .mx-dl dd{ margin:0; padding:9px 0; border-bottom:1px solid #f3ecdf; font-size:13.5px; }
.mx-dl dd{ text-align:right; font-weight:var(--fw-800,800); }
.mx-dl dt:last-of-type, .mx-dl dd:last-of-type{ border-bottom:0; }
.mx.mx-late .mx-dl dd:last-of-type{ color:#b42323; font-size:15px; }
.mx-go{ display:flex; align-items:center; justify-content:center; min-height:52px; margin-top:18px; border-radius:16px; text-decoration:none; font-weight:var(--fw-800,800); font-size:16px; color:#241235; background:linear-gradient(135deg,#f6c25a,#e5a52d); box-shadow:0 14px 26px -14px rgba(229,138,18,.9); }
.mx-later{ display:block; width:100%; min-height:46px; margin-top:8px; border:0; background:none; color:#6b5d76; font:inherit; font-weight:700; cursor:pointer; }
@media (prefers-reduced-motion:reduce){ .mx-card, .mx-bg{ transition:none; } }

/* v66: "Verify with OTP" opens the code right here */
.dv{ margin-top:12px; padding:16px; border-radius:20px; display:flex; flex-direction:column; gap:12px; }
.dv[hidden],.js-dv-open[hidden]{ display:none; }
.dv-t{ margin:0; font-size:14px; color:var(--ink); text-align:center; }
.dv-code{ margin:0; align-self:center; display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:999px;
  background:var(--warnbg); color:var(--warn); font-size:12.5px; font-weight:var(--fw-700,700); letter-spacing:.04em; }
.dv-code[hidden]{ display:none; }
.dv-code b{ font-size:20px; letter-spacing:.3em; color:#5a3500; }
.dv-otp{ display:flex; justify-content:center; gap:10px; }
.dv-otp input{ width:56px; height:60px; box-sizing:border-box; text-align:center; font:inherit; font-size:24px; font-weight:var(--fw-700,700);
  color:var(--ink); border:1.5px solid rgba(91,42,134,.22); border-radius:14px; background:#fff; outline:0; }
.dv-otp input:focus{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(91,42,134,.12); }
@media (max-width:359px){ .dv-otp{ gap:8px; } .dv-otp input{ width:50px; height:56px; } }
.dv-err{ margin:0; text-align:center; font-size:13px; font-weight:var(--fw-700,700); color:var(--bad); }
.dv-err[hidden]{ display:none; }
.dv .dv-go{ margin:0; width:100%; border:0; cursor:pointer; }
.dv .dv-go:disabled{ opacity:.55; cursor:default; }
.dv-re{ align-self:center; min-height:40px; padding:0 14px; border:0; background:none; font:inherit; font-size:13px; font-weight:var(--fw-700,700); color:var(--brand); cursor:pointer; }
.dv-re:disabled{ color:var(--muted); cursor:default; }

/* ===== v95 stay history sheet ===== */
/* history sheet (lives in <body>) */
.sxh-lock,.sxh-lock body{ overflow:hidden; }
.sxh{ position:fixed; inset:0; z-index:2147482500; display:flex; align-items:flex-end; justify-content:center; background:rgba(28,16,41,.6); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.sxh[hidden]{ display:none; }
.sxh-c{ width:100%; max-width:520px; max-height:88vh; max-height:88dvh; display:flex; flex-direction:column; background:#fbf8ff; border-radius:26px 26px 0 0; box-shadow:0 -24px 60px -24px rgba(28,16,41,.6); animation:sxhUp .26s cubic-bezier(.2,.8,.2,1); color:#1B1130; font-family:'Plus Jakarta Sans',system-ui,sans-serif; line-height:normal; }
@keyframes sxhUp{ from{ transform:translateY(30px); opacity:.4 } to{ transform:none; opacity:1 } }
@media (min-width:600px){ .sxh{ align-items:center; padding:20px } .sxh-c{ border-radius:26px; max-height:86vh } }
.sxh-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 18px 14px; border-radius:26px 26px 0 0; background:linear-gradient(135deg,#46143C,#6D3AA3); color:#fff; }
.sxh-h p{ margin:0; font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#f6d38a; }
.sxh-h h3{ margin:2px 0 0; font-family:'Fraunces',serif; font-weight:600; font-size:22px; }
.sxh-x{ flex:none; width:42px; height:42px; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font-size:22px; cursor:pointer; }
.sxh-l{ list-style:none; margin:0; padding:14px 16px calc(18px + env(safe-area-inset-bottom)); overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.sxh-i{ position:relative; margin:0 0 12px 14px; padding:14px 14px 12px; border-radius:18px; background:#fff; border:1px solid #ece3fb; box-shadow:0 10px 24px -20px rgba(70,20,60,.5); }
.sxh-i::before{ content:""; position:absolute; left:-15px; top:20px; width:10px; height:10px; border-radius:50%; background:#cdbbe8; box-shadow:0 0 0 3px #fbf8ff; }
.sxh-i::after{ content:""; position:absolute; left:-11px; top:34px; bottom:-14px; width:2px; background:#e6dcf5; }
.sxh-i:last-child::after{ display:none; }
.sxh-i.now{ border-color:rgba(199,154,60,.55); } .sxh-i.now::before{ background:#C79A3C; }
.sxh-t{ display:flex; justify-content:space-between; gap:8px; }
.sxh-k{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#6D3AA3; }
.sxh-s{ padding:2px 9px; border-radius:999px; font-size:11px; font-weight:800; background:#f0edef; color:#5a5058; }
.now .sxh-s{ background:#e7f6ee; color:#177245; }
.sxh-p{ display:block; margin-top:6px; font-family:'Fraunces',serif; font-size:18px; font-weight:600; color:#46143C; text-decoration:none; }
.sxh-p small{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:600; color:#7d7291; }
.sxh-u{ margin:6px 0 0; font-size:12.5px; font-weight:700; color:#3d2f55; }
.sxh-d{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin-top:10px; padding:10px 12px; border-radius:14px; background:#faf6ff; }
.sxh-d small{ display:block; font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#8a7a99; }
.sxh-d b{ display:block; margin-top:2px; font-size:13.5px; color:#1B1130; }
.sxh-d>span{ color:#C79A3C; font-weight:800; }
.sxh-d div:last-child{ text-align:right; }
.sxh-f{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.sxh-f span,.sxh-f a{ padding:4px 9px; border-radius:9px; background:#f4eefa; font-size:11.5px; font-weight:700; color:#5b2a86; text-decoration:none; }
.sxh-f a{ background:#46143C; color:#fff; }

/* ===== v96 (2026-10-04) — owner's mockup: room hero, tinted quick tiles, white My stay card =====
   --u = 1px at ≥390px and shrinks with the phone below that, so 280–389px phones look the same, only smaller. */
.app{ --u:clamp(.72px, .25641vw, 1px); --u-ink:#160a3d; --u-sub:#5c407b; }
/* the dashboard sits on the mockup's light pearl → cream page (other pages keep the full aurora) */
body:has(.hx){ background:linear-gradient(180deg,#f8f2fc 0%,#fcf8fb 45%,#fef9f3 100%) fixed; }
body:has(.hx) .aurora{ opacity:.4; }
.app .hero.hx{ position:relative; isolation:isolate; overflow:hidden; min-height:calc(153*var(--u)); margin-bottom:6px; padding:calc(16*var(--u)) calc(17*var(--u)) calc(10*var(--u));
  border-radius:16px; background:linear-gradient(165deg,#4b2074 0%,#552377 40%,#6c2c91 100%); box-shadow:0 18px 34px -22px rgba(76,30,120,.75); }
.hx::after{ content:""; position:absolute; z-index:-1; top:0; right:0; bottom:0; width:46%;
  background:url(/assets/images/home-hero-room.jpg) right center/cover no-repeat;
  background-image:image-set(url(/assets/images/home-hero-room.webp) type("image/webp"), url(/assets/images/home-hero-room.jpg) type("image/jpeg"));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 34%); mask-image:linear-gradient(90deg,transparent,#000 34%); }
.hx .eyebrow{ margin:0; font-size:calc(10*var(--u)); font-weight:var(--fw-700,700); letter-spacing:.04em; color:#f7c46e; white-space:nowrap; }
.hx .eyebrow i{ font-style:normal; margin:0 .3em; }
.hx h1{ margin:calc(4*var(--u)) 0 0; font-size:calc(23.3*var(--u)); line-height:1.15; font-weight:600; letter-spacing:-.2px; white-space:nowrap; }
.hx .wave{ font-size:.86em; }
.hx p.hero-w{ margin:calc(2*var(--u)) 0 0; font-size:calc(10.5*var(--u)); font-weight:500; opacity:1; }
.hx p.hero-d{ margin:calc(8*var(--u)) 0 0; max-width:calc(192*var(--u)); font-size:calc(10.5*var(--u)); line-height:1.36; opacity:.95; }
.hx .status{ gap:calc(6*var(--u)); margin-top:calc(9*var(--u)); min-height:calc(24*var(--u)); box-sizing:border-box; padding:0 calc(9*var(--u)); font-size:calc(9.8*var(--u)); font-weight:var(--fw-700,700);
  color:#fff; text-decoration:none; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.3); white-space:nowrap; max-width:100%; }
.hx .status i{ flex:none; width:calc(9*var(--u)); height:calc(9*var(--u)); background:#1ccf45; box-shadow:none; }
.hx .status.visitor i{ background:#f6d38a; }
.hx .status svg{ flex:none; width:calc(13*var(--u)); height:calc(13*var(--u)); margin-left:calc(4*var(--u)); }
/* small pills / links: same look, ≥44px tap area */
.hx a.status, .sx-ag, .sx-sh a{ position:relative; }
.hx a.status::after, .sx-vp::after, .sx-ag::after, .sx-sh a::after{ content:""; position:absolute; left:-4px; right:-4px; top:50%; height:max(100%,44px); transform:translateY(-50%); }

/* quick tiles — 4 across, the rest scroll sideways */
.ql{ display:flex; gap:5px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 0 0 -4px; padding:2px 0 10px 4px; scroll-padding-left:4px; }
.ql::-webkit-scrollbar{ display:none; }
.qt{ --t:#fff8ef; --ti:#fde3b6; --tc:#e56a01; --tg:#fdf0d9; position:relative; flex:0 0 calc((100% - 21px)/4.25);   /* v323 (owner): 4 tiles + a quarter of the 5th → "more to the right" */ scroll-snap-align:start; box-sizing:border-box; min-height:calc(96*var(--u));
  display:flex; flex-direction:column; align-items:center; text-align:center; padding:calc(8*var(--u)) 3px calc(9*var(--u)); border-radius:14px; text-decoration:none; color:var(--u-ink);
  background:linear-gradient(180deg,#fff 0%,var(--t) 100%); border:1px solid rgba(255,255,255,.95); box-shadow:0 8px 18px -12px rgba(91,42,134,.28), inset 0 0 0 1px rgba(91,42,134,.04); }
.qt-deposit, .qt-review{ --t:#f8f2fe; --ti:#f1e7fd; --tc:#51069f; --tg:#efe5f9; }
.qt-late{ --t:#fef5f9; --ti:#fce3ed; --tc:#b00247; --tg:#fce5ee; }
.qt-visit, .qt-explore{ --t:#f1fbf7; --ti:#e1f7ec; --tc:#05a466; --tg:#e1f7eb; }
.qt-ic{ display:grid; place-items:center; flex:none; width:calc(34*var(--u)); height:calc(34*var(--u)); border-radius:calc(11*var(--u)); color:var(--tc);
  background:var(--ti); background:linear-gradient(160deg,var(--ti),color-mix(in srgb,var(--ti) 70%,#fff)); box-shadow:0 6px 12px -8px var(--tc); }
.qt-ic svg{ width:calc(21*var(--u)); height:calc(21*var(--u)); stroke-width:2.3; }
.qt b{ margin-top:calc(6*var(--u)); padding:0 calc(8*var(--u)); font-size:calc(10*var(--u)); font-weight:var(--fw-800,800); line-height:1.1; letter-spacing:-.1px; }
.qt strong{ margin-top:calc(3*var(--u)); font-size:calc(12.6*var(--u)); font-weight:var(--fw-800,800); line-height:1.1; letter-spacing:-.2px; }
.qt-n{ margin-top:0; padding:0 calc(6*var(--u)); font-size:calc(9.3*var(--u)); line-height:1.2; color:var(--u-sub); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.qt b + .qt-n{ margin-top:calc(4*var(--u)); }
.qt.locked{ opacity:.6; } .qt.locked::after{ content:'🔒'; position:absolute; top:6px; right:6px; font-size:10px; }
@media (min-width:600px){ .ql{ overflow:visible; flex-wrap:wrap; } .qt{ flex-basis:calc((100% - 15px)/4); } }


/* My stay heading */
.sx-sh{ align-items:flex-end; margin:calc(1*var(--u)) 0 calc(15*var(--u)); padding:0 2px; }
.sx-sh h2{ font-size:calc(20.5*var(--u)); font-weight:600; letter-spacing:-.3px; color:#13063d; line-height:1.05; }
.sx-sh p{ margin:calc(4*var(--u)) 0 0; font-size:calc(11.1*var(--u)); color:#76699a; }
.sx-sh a{ display:inline-flex; align-items:center; gap:4px; margin-bottom:calc(21*var(--u)); font-size:calc(10.8*var(--u)); color:#5a0b95; }
.sx-sh a svg{ width:calc(13*var(--u)); height:calc(13*var(--u)); stroke-width:2.6; }

/* My stay card */
.sx{ position:relative; overflow:hidden; border-radius:16px; background:#fff; padding:0 calc(8*var(--u)) calc(6*var(--u)); color:var(--u-ink); box-shadow:0 18px 40px -26px rgba(91,42,134,.45), 0 2px 8px -4px rgba(91,42,134,.12); }
.sx svg{ flex:none; }
.sx-hd{ position:relative; isolation:isolate; margin:0 calc(-8*var(--u)); min-height:calc(122*var(--u)); padding:calc(15*var(--u)) calc(11*var(--u)) 0; display:flex; align-items:flex-start; gap:calc(10*var(--u));
  background:linear-gradient(110deg,#43226c 0%,#4f2771 45%,#6a3474 100%); color:#fff; }
.sx-hd::after{ content:""; position:absolute; z-index:0; left:0; right:0; bottom:0; height:calc(28*var(--u)); background:linear-gradient(180deg,rgba(255,255,255,0),#fff); pointer-events:none; }
.sx-ph{ position:absolute; z-index:-1; top:0; right:0; bottom:0; width:45%; background:#e7b768;
  clip-path:polygon(23% 0,100% 0,100% 100%,0 100%); }
.sx-ph::before{ content:""; position:absolute; inset:0 0 0 1.5px; clip-path:inherit;
  background:var(--sx-pic, url(/assets/images/home-stay-room.jpg)) center/cover no-repeat; }
.sx-ph:not([style])::before{ background-image:image-set(url(/assets/images/home-stay-room.webp) type("image/webp"), url(/assets/images/home-stay-room.jpg) type("image/jpeg")); background-position:right top; }
.sx-vp{ position:absolute; z-index:2; top:calc(12*var(--u)); right:calc(8*var(--u)); display:inline-flex; align-items:center; gap:calc(5*var(--u)); height:calc(24*var(--u)); padding:0 calc(6*var(--u)) 0 calc(9*var(--u));
  border-radius:999px; background:rgba(62,24,98,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:#fff; font-size:calc(9.6*var(--u)); font-weight:var(--fw-700,700); text-decoration:none; white-space:nowrap; }
.sx-vp svg{ width:calc(14*var(--u)); height:calc(14*var(--u)); } .sx-vp svg:last-child{ width:calc(11*var(--u)); height:calc(11*var(--u)); stroke-width:2.6; }
.sx-th{ position:relative; z-index:1; flex:none; width:calc(54*var(--u)); height:calc(54*var(--u)); border-radius:calc(12*var(--u)); object-fit:cover; border:2px solid rgba(255,255,255,.75); box-shadow:0 6px 14px -6px rgba(0,0,0,.5); }
.sx-in{ position:relative; z-index:1; min-width:0; max-width:52%; }
.sx-in h3{ display:flex; align-items:center; gap:calc(7*var(--u)); margin:calc(-1*var(--u)) 0 calc(3*var(--u)); font-size:calc(14.2*var(--u)); font-weight:var(--fw-700,700); line-height:1.2; }
.sx-in h3 span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sx-in h3 em{ flex:none; font-style:normal; font-size:calc(10.2*var(--u)); font-weight:var(--fw-700,700); padding:calc(3*var(--u)) calc(9*var(--u)); border-radius:999px; background:linear-gradient(135deg,#6fe3b3,#45cf9b); color:#fff; }
.sx-in p{ display:flex; align-items:center; gap:calc(7*var(--u)); margin:0; font-size:calc(10.2*var(--u)); line-height:calc(17*var(--u)); white-space:nowrap; }
.sx-in p svg{ width:calc(12*var(--u)); height:calc(12*var(--u)); }
.sx-in .sx-in-s{ padding-left:calc(19*var(--u)); }

.sx-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:calc(5*var(--u)); margin-top:calc(-25*var(--u)); }
.sx-t{ --c:#58099d; --cb:#ece2fa; --cv:#42097d; --cl:#5e3d8a; display:flex; align-items:center; gap:calc(10*var(--u)); min-width:0; min-height:max(44px, calc(50*var(--u))); box-sizing:border-box; padding:calc(6*var(--u)) calc(8*var(--u)) calc(6*var(--u)) calc(10*var(--u));
  border-radius:12px; border:1px solid var(--cb); border-color:color-mix(in srgb,var(--cb) 80%,#fff); background:#fff; background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--cb) 30%,#fff)); color:var(--cv); font:inherit; text-align:left; }
button.sx-t{ cursor:pointer; width:100%; }
button.sx-t:focus-visible{ outline:3px solid var(--c); outline-offset:2px; }
.sx-t > div{ flex:1; min-width:0; }
.sx-ic{ display:grid; place-items:center; flex:none; width:calc(36*var(--u)); height:calc(36*var(--u)); border-radius:50%; background:var(--cb); color:var(--c); }
.sx-ic svg{ width:calc(18*var(--u)); height:calc(18*var(--u)); }
.t-mint .sx-ic svg{ width:calc(20*var(--u)); height:calc(20*var(--u)); stroke-width:2.6; }
.sx-t small{ display:block; font-size:calc(9.6*var(--u)); font-weight:500; color:var(--cl); white-space:nowrap; }
.sx-t b{ display:block; margin-top:calc(1*var(--u)); font-size:calc(14.4*var(--u)); font-weight:var(--fw-800,800); line-height:1.2; letter-spacing:-.2px; white-space:nowrap; }
.sx-t b i{ font-style:normal; font-size:calc(9.8*var(--u)); font-weight:500; letter-spacing:0; color:var(--cl); }
.sx-t b i svg, .sx-more svg{ display:inline-block; width:1em; height:1em; vertical-align:-.15em; stroke-width:2.6; }
.t-peach{ --c:#f79306; --cb:#fdeed3; --cv:#f46d09; --cl:#564477; }
.t-peach.is-late{ --cv:#c81e3a; }
.t-blue{ --c:#1562e8; --cb:#e1ebfc; --cv:#1c52be; --cl:#4c3e78; }
.t-mint{ --c:#07a767; --cb:#d9f6ea; --cv:#0a8f57; --cl:#4c3e78; }
.t-mint b i{ color:#0a8f57; font-weight:var(--fw-700,700); }
.t-pink{ --c:#b9004e; --cb:#fbe0ea; --cv:#4a0d80; --cl:#370f6e; }
.sx-wide{ grid-column:1 / -1; align-items:center; padding-top:calc(7*var(--u)); padding-bottom:calc(7*var(--u)); background:linear-gradient(180deg,#fef3f7,#fdf3f7); }
.sx-wide .sx-ic{ align-self:flex-start; margin-top:calc(2*var(--u)); }
.sx-wide b{ font-size:calc(15.4*var(--u)); }
.sx-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:calc(2*var(--u)); font-size:calc(8.6*var(--u)); letter-spacing:-.15px; word-spacing:1px; line-height:1.35; color:#5c4a85; }
.sx-more{ display:block; margin-top:calc(3*var(--u)); font-style:normal; font-size:calc(9.8*var(--u)); font-weight:var(--fw-700,700); color:#f96001; }
.sx-wide{ position:relative; padding-right:calc(22*var(--u)); }
.sx-chev{ position:absolute; right:calc(8*var(--u)); top:40%; transform:translateY(-50%); color:#471383; } .sx-chev svg{ width:calc(16*var(--u)); height:calc(16*var(--u)); stroke-width:2.6; }

.sx-pay{ display:flex; align-items:center; justify-content:center; gap:calc(10*var(--u)); min-height:44px; margin-top:calc(5*var(--u)); border-radius:12px; text-decoration:none;
  color:#fff; font-size:calc(13*var(--u)); font-weight:var(--fw-800,800); background:linear-gradient(90deg,#f6bd4d 0%,#f4a52a 38%,#f78a06 75%,#f78603 100%);
  box-shadow:0 12px 22px -14px rgba(247,134,3,.95), inset 0 1px 0 rgba(255,255,255,.3); }
.sx-pay svg{ width:calc(21*var(--u)); height:calc(21*var(--u)); } .sx-pay svg:last-child{ width:calc(18*var(--u)); height:calc(18*var(--u)); stroke-width:2.4; }
.sx-ft{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 10px; padding:calc(8*var(--u)) calc(2*var(--u)) calc(2*var(--u)); }
.sx-ft p{ flex:1 1 auto; margin:0; font-size:calc(9.4*var(--u)); color:#6e628b; }
.sx-ag{ position:relative; display:inline-flex; align-items:center; gap:calc(5*var(--u)); height:calc(23*var(--u)); padding:0 calc(9*var(--u)) 0 calc(8*var(--u)); border-radius:999px; border:1px solid #e3d8f1; background:#f6f1fa;
  font-size:calc(9.2*var(--u)); font-weight:var(--fw-700,700); color:#310673; text-decoration:none; white-space:nowrap; }
.sx-ag svg{ width:calc(13*var(--u)); height:calc(13*var(--u)); }

/* paid-so-far details + receipts (inside the white card) */
.sx .paid-box{ margin-top:6px; padding:12px; border-radius:14px; background:#faf7fd; border:1px solid #efe6f7; color:#241235; }
.sx .paid-box table{ width:100%; border-collapse:collapse; font-size:13px; }
.sx .paid-box th{ text-align:left; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:#8a7a99; padding:4px 2px 8px; }
.sx .paid-box thead th:last-child, .sx .paid-box td:last-child{ text-align:right; white-space:nowrap; }
.sx .paid-box td{ padding:8px 2px; border-top:1px solid #efe6f7; font-weight:700; vertical-align:top; }
.sx .paid-box td small{ display:block; font-size:11px; font-weight:500; color:#7a6d86; margin-top:2px; }
.sx .paid-box tfoot th, .sx .paid-box tfoot td{ padding-top:10px; border-top:2px solid #46143C; font-size:14px; font-weight:var(--fw-800,800); color:#46143C; letter-spacing:0; text-transform:none; }
.sx .paid-acts{ display:flex; gap:8px; margin-top:12px; }
.sx .rc-btn{ flex:1; display:flex; align-items:center; justify-content:center; min-height:46px; border-radius:14px; font-weight:var(--fw-800,800); font-size:14px; text-decoration:none; color:#46143C; border:1.5px solid #46143C; }
.sx .rc-btn.dl{ background:linear-gradient(135deg,#46143C,#6D3AA3); color:#fff; border-color:transparent; }
.sx .rc-k{ margin:14px 2px 6px; font-size:9.5px; font-weight:var(--fw-800,800); letter-spacing:.12em; text-transform:uppercase; color:#8a7a99; }
.sx .rc-list{ list-style:none; margin:0; padding:0; }
.sx .rc-list a{ display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:48px; padding:8px 4px; border-top:1px solid #efe6f7; color:#241235; text-decoration:none; font-size:13px; font-weight:700; }
.sx .rc-list small{ display:block; font-size:11px; font-weight:500; color:#7a6d86; }
.sx .rc-list b{ white-space:nowrap; color:#46143C; }
@media (max-width:330px){ .mod{ padding-left:4px; padding-right:4px; } .mod b{ font-size:10px; hyphens:auto; overflow-wrap:anywhere; } }   /* 280px phones: long module names (Announcements) never widen the page */
@media (max-width:300px){ .topbar{ padding-left:10px; padding-right:8px; gap:6px; } .wordmark b{ font-size:15px; } .role-seg span, .role-seg button{ padding:5px 6px; } }   /* 280px: header fits, unchanged above 300px */

/* ===== v104 (2026-10-04) — My booking / My inquiries: one accordion card (hx-acc) + swipe rows (hx-row) with dots;
   My reviews: three stat cards. Same --u scale as v96. ===== */
.hx-acc, .hx-card{ border-radius:16px; background:#fff; box-shadow:0 18px 40px -28px rgba(91,42,134,.45), 0 2px 8px -5px rgba(91,42,134,.12); }
.hx-acc{ padding:0 0 calc(10*var(--u)); }
.hx-acc-h, .hx-rh{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hx-acc-h{ padding:0 calc(14*var(--u)) 0 calc(11*var(--u)); margin-bottom:-4px; }
.hx-acc-h h2, .hx-rh h2{ margin:0; font-family:'Fraunces',serif; font-weight:600; font-size:calc(15*var(--u)); letter-spacing:-.2px; color:#130728; }
.hx-acc-t{ display:flex; align-items:center; gap:calc(9*var(--u)); min-height:44px; padding:0; border:0; background:none; font:inherit; color:inherit; cursor:pointer; text-align:left; }
.hx-acc-t em{ display:grid; place-items:center; min-width:calc(21*var(--u)); height:calc(21*var(--u)); padding:0 calc(5*var(--u)); box-sizing:border-box; border-radius:999px; background:linear-gradient(135deg,#6a2896,#4f1c73);
  font:normal var(--fw-700,700) calc(10.4*var(--u))/1 'Plus Jakarta Sans',sans-serif; color:#fff; }
.hx-acc-c{ display:grid; place-items:center; color:#7a6d92; transition:transform .2s; }
.hx-acc-c svg{ width:calc(13*var(--u)); height:calc(13*var(--u)); transform:rotate(90deg); stroke-width:2.6; }
.hx-acc-t[aria-expanded="true"] .hx-acc-c{ transform:rotate(180deg); }
.hx-acc-t:focus-visible, .hx-all:focus-visible{ outline:3px solid #8b4fc4; outline-offset:2px; border-radius:10px; }
.hx-all{ position:relative; display:inline-flex; align-items:center; gap:4px; flex:none; font-size:calc(10.6*var(--u)); font-weight:var(--fw-700,700); color:#622088; text-decoration:none; white-space:nowrap; }
.hx-all svg{ width:calc(13*var(--u)); height:calc(13*var(--u)); stroke-width:2.6; }
.hx-all::after{ content:""; position:absolute; left:-6px; right:-6px; top:50%; height:44px; transform:translateY(-50%); }
.hx-acc-b{ padding-top:0; }
.hx-acc-b[hidden], .rv-list[hidden]{ display:none; }

/* swipe rows */
.hx-car{ display:flex; align-items:flex-start; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:2px calc(9*var(--u)) 5px; scroll-padding:0 calc(9*var(--u)); }
.hx-car::-webkit-scrollbar{ display:none; }
.hx-row{ flex:0 0 86%; box-sizing:border-box; scroll-snap-align:start; display:block; border-radius:12px; background:#fff; border:1px solid #f0eaf5; color:var(--u-ink); text-decoration:none;
  box-shadow:0 8px 18px -14px rgba(91,42,134,.45); }
.hx-car > :only-child{ flex-basis:100%; }
.hx-sum{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; grid-template-areas:"th tx pill chev"; align-items:center; column-gap:calc(9*var(--u)); row-gap:4px; min-height:44px; padding:calc(5*var(--u)) calc(8*var(--u)) calc(5*var(--u)) calc(5*var(--u)); list-style:none; cursor:pointer; }
.hx-sum::-webkit-details-marker{ display:none; }
.hx-sum:focus-visible, a.hx-row:focus-visible{ outline:3px solid #8b4fc4; outline-offset:-3px; border-radius:12px; }
.hx-th{ grid-area:th; display:block; width:calc(64*var(--u)); height:calc(44*var(--u)); border-radius:8px; object-fit:cover; background:#efe7f6; }
.hx-tx{ grid-area:tx; min-width:0; }
.hx-tx b{ display:block; font-size:calc(10.3*var(--u)); font-weight:var(--fw-700,700); line-height:1.3; color:#15082d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hx-tx small{ display:block; margin-top:calc(3*var(--u)); font-size:calc(9.4*var(--u)); color:#63597d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hx-pill{ grid-area:pill; display:inline-flex; align-items:center; gap:5px; max-width:calc(110*var(--u)); overflow:hidden; text-overflow:ellipsis; font-size:calc(8.6*var(--u)); font-weight:600; padding:calc(4*var(--u)) calc(8*var(--u)); }
.hx-pill::before{ content:""; flex:none; width:6px; height:6px; border-radius:50%; background:currentColor; }
.hx-pill.ok{ color:#12403a; background:#e3f8ee; } .hx-pill.ok::before{ background:#0ab767; }
.hx-chev{ grid-area:chev; display:grid; color:#574c6b; transition:transform .2s; }
.hx-chev svg{ width:calc(12*var(--u)); height:calc(12*var(--u)); stroke-width:2.6; }
details.hx-row[open] .hx-chev{ transform:rotate(90deg); }
.hx-row{ container-type:inline-size; }
@container (max-width:310px){ .hx-sum{ grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"th tx chev" "th pill chev"; } .hx-pill{ justify-self:start; } }
.hx-more .inq-btn{ height:44px; }
.hx-more{ padding:calc(8*var(--u)) calc(10*var(--u)) calc(10*var(--u)); border-top:1px solid var(--line); animation:inqIn .2s ease; }
.hx-note{ display:block; margin:0 calc(8*var(--u)) calc(6*var(--u)); font-size:calc(10*var(--u)); line-height:1.4; color:#63597d; }
.hx-more .hx-note{ margin:0 0 8px; }
.hx-note b{ font-weight:var(--fw-700,700); color:#2a1748; }
.hx-hold{ padding:6px 8px; border-radius:8px; background:rgba(23,138,76,.09); color:#1d5b3c; }
.hx-cta{ display:flex; align-items:center; min-height:44px; margin:0 calc(8*var(--u)) 0; font-size:calc(11*var(--u)); font-weight:var(--fw-800,800); color:#622088; }
.hx-cta.pay{ justify-content:center; margin:0 calc(6*var(--u)) calc(6*var(--u)); border-radius:10px; color:#fff; background:linear-gradient(90deg,#f6bd4d,#f78603); box-shadow:0 10px 18px -12px rgba(247,134,3,.9); }
.hx-new{ align-self:stretch; display:flex; align-items:center; gap:calc(9*var(--u)); min-height:44px; padding:calc(5*var(--u)) calc(8*var(--u)) calc(5*var(--u)) calc(5*var(--u)); border-style:dashed; border-color:#dccdeb; box-shadow:none; background:#fcfaff; }
.hx-plus{ display:grid; place-items:center; flex:none; width:calc(64*var(--u)); height:calc(44*var(--u)); border-radius:8px; background:#f1e8f9; color:#622088; font-size:calc(22*var(--u)); font-weight:600; }
.hx-new .hx-tx{ flex:1; }
.hx-dots{ display:flex; justify-content:center; gap:calc(8*var(--u)); min-height:6px; margin-top:calc(4*var(--u)); }
.hx-dots i{ width:calc(5.5*var(--u)); height:calc(5.5*var(--u)); border-radius:50%; background:#e4dcea; transition:background .2s, transform .2s; }
.hx-dots i.on{ background:#622189; transform:scale(1.15); }
@media (min-width:600px){ .hx-row{ flex-basis:calc(50% - 4px); } }

/* My reviews */
.hx-rh{ margin:calc(12*var(--u)) 0 calc(5*var(--u)); padding:0 2px; }
.hx-pillbtn{ height:calc(20*var(--u)); padding:0 calc(10*var(--u)); border:0; border-radius:999px; background:#fff; font-family:inherit; cursor:pointer; box-shadow:0 4px 12px -6px rgba(91,42,134,.35); }
.hx-pillbtn[aria-expanded="true"] svg{ transform:rotate(90deg); }
.rv-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(8*var(--u)); }
.rv-s{ --c:#7521a7; --cb:#f1e8f9; --cl:#8e46bc; display:flex; align-items:center; gap:calc(9*var(--u)); min-width:0; min-height:calc(51*var(--u)); padding:0 calc(8*var(--u)) 0 calc(10*var(--u)); border-radius:12px; border:1px solid var(--cb); border-color:color-mix(in srgb,var(--cb) 55%,#fff);
  background:#fff; background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--cb) 30%,#fff)); box-shadow:0 10px 20px -14px rgba(91,42,134,.45); }
.rv-prog{ --c:#f07f06; --cb:#fdf0d8; --cl:#e17707; } .rv-up{ --c:#0369ea; --cb:#e3eefe; --cl:#1062df; }
.rv-ic{ display:grid; place-items:center; flex:none; width:calc(31*var(--u)); height:calc(31*var(--u)); border-radius:50%; background:var(--cb); color:var(--c); }
.rv-ic svg{ width:calc(17*var(--u)); height:calc(17*var(--u)); }
.rv-s div{ min-width:0; }
.rv-s b{ display:block; font-size:calc(16*var(--u)); font-weight:var(--fw-800,800); line-height:1.1; color:#170331; }
.rv-s small{ display:block; margin-top:1px; font-size:calc(9.6*var(--u)); color:var(--cl); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rv-list{ margin-top:10px; padding:6px 14px; }
#reviews .cta{ margin-top:10px; }
@media (max-width:339px){ .rv-stats .rv-s{ flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; padding:8px 8px 8px 10px; } }   /* 280–339px: icon above the number, labels never cut */

/* v105: My Stay History / My Booking tiles — the review stat card (rv-s) as a 2-up button row */
.hq-row{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:calc(8*var(--u)); }
#stay + .hq-row{ margin-top:calc(-6*var(--u)); }
.hq{ --c:#7521a7; --cb:#ebdff8; min-height:max(48px, calc(51*var(--u))); padding:calc(6*var(--u)) calc(8*var(--u)) calc(6*var(--u)) calc(7*var(--u)); gap:calc(8*var(--u));
  font:inherit; text-align:left; text-decoration:none; color:inherit; cursor:pointer; background:linear-gradient(180deg,#f8f3fd,#f3ecfb); }
.hq-book{ --c:#f39012; --cb:#fee1b4; background:linear-gradient(180deg,#fffaf3,#fef3e6); }
.hq .rv-ic{ width:calc(34*var(--u)); height:calc(34*var(--u)); border-radius:calc(11*var(--u)); }
.hq .rv-ic svg{ width:calc(21*var(--u)); height:calc(21*var(--u)); stroke-width:2.2; }
.hq-tx{ flex:1; min-width:0; }
.hq-tx b{ display:block; font-size:calc(10.8*var(--u)); font-weight:var(--fw-800,800); line-height:1.2; color:#241047; }
.hq-tx small{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:2px; font-size:calc(8.9*var(--u)); line-height:1.3; color:#7a7090; }
.hq-hist .hx-chev{ color:#622088; }
.hq:focus-visible{ outline:3px solid #8b4fc4; outline-offset:2px; }
.hx-acc, #stay{ scroll-margin-top:84px; }   /* below the sticky header when a tile scrolls here */

/* v108: "Active" = premium dashed pill on the plum header */
.sx-in h3 em{ display:inline-flex; align-items:center; gap:calc(5*var(--u)); background:rgba(111,227,179,.12); color:#a6f2cf; border:1px dashed rgba(134,236,190,.85);
  letter-spacing:.02em; font-size:calc(10*var(--u)); padding:calc(3.5*var(--u)) calc(9*var(--u)) calc(3.5*var(--u)) calc(7*var(--u)); box-shadow:0 0 0 3px rgba(111,227,179,.06), inset 0 1px 0 rgba(255,255,255,.08); }
.sx-in h3 em::before{ content:""; width:calc(6*var(--u)); height:calc(6*var(--u)); border-radius:50%; background:#5fe0a8; box-shadow:0 0 0 calc(2.5*var(--u)) rgba(95,224,168,.25); }

/* 2026-10-14 Direct Visit: resident "Bring a visitor" tile (same hq tile, mint tint) */
.hq-dv{ --c:#0f8a62; --cb:#d4f2e5; background:linear-gradient(180deg,#f5fcf8,#eaf8f1); }
.hq-dv .hx-chev{ color:#0f7a57; }

/* ===== v116 Direct Visit: "Your visit" on the inquiry + Check in ===== */
.dvx{ margin:0 0 14px; padding:12px 14px; border-radius:18px; background:linear-gradient(135deg,#fffaf0,#fff); border:1px solid rgba(224,164,59,.38); }
.dvx-h{ display:flex; align-items:center; gap:8px; margin:0 0 10px; font-family:'Fraunces',serif; font-weight:600; font-size:15.5px; color:var(--ink); }
.dvx-h span{ width:28px; height:28px; border-radius:9px; display:grid; place-items:center; color:#3d1c5c; background:linear-gradient(135deg,#f6d38a,var(--gold)); }
.dvx-h svg{ width:16px; height:16px; }
.dvx-dl{ margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.dvx-dl div{ min-width:0; } .dvx-dl div:first-child{ grid-column:1 / -1; }
.dvx-dl dt{ font-size:10.5px; font-weight:var(--fw-800,800); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.dvx-dl dd{ margin:2px 0 0; font-size:13px; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
.dvx-acts{ margin-top:12px; }
.inq-btn.dvx-go{ flex:2; height:48px; border:0; cursor:pointer; font-family:inherit; font-size:14px; color:#3d1c5c; background:linear-gradient(135deg,#f6d38a,var(--gold)); box-shadow:0 12px 24px -14px rgba(224,164,59,.95); }
.inq-btn.dvx-edit{ height:48px; border:1px solid rgba(91,42,134,.2); background:#fff; color:var(--brand); cursor:pointer; font-family:inherit; }

/* ===== v116 set-password dialog (Direct Visit sign-in) — moved to <body>; follows the iOS keyboard via --kb ===== */
html.spw-lock, html.spw-lock body{ overflow:hidden; }
.spw{ --kb:0px; position:fixed; inset:0; z-index:420; display:flex; align-items:flex-end; justify-content:center; padding:0 0 var(--kb);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif; color:var(--ink); line-height:normal; -webkit-text-size-adjust:100%; }
.spw[hidden]{ display:none; }
.spw *, .spw *::before, .spw *::after{ box-sizing:border-box; }
.spw-bg{ position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 0%,rgba(61,28,92,.7),rgba(16,8,26,.88)); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:0; transition:opacity .22s ease; }
.spw-card{ position:relative; width:100%; max-width:440px; max-height:calc(100dvh - var(--kb) - 12px); overflow-y:auto; overscroll-behavior:contain; outline:none;
  border-radius:28px 28px 0 0; background:#fff; box-shadow:0 -24px 60px -20px rgba(16,8,26,.6); transform:translateY(28px); opacity:0;
  transition:transform .26s cubic-bezier(.2,.8,.2,1), opacity .22s ease; }
.spw.on .spw-bg{ opacity:1; } .spw.on .spw-card{ transform:none; opacity:1; }
@media (min-width:640px){ .spw{ align-items:center; padding:24px 24px calc(24px + var(--kb)); } .spw-card{ border-radius:28px; max-height:calc(100dvh - var(--kb) - 48px); box-shadow:0 40px 90px -30px rgba(16,8,26,.75); } }
@media (prefers-reduced-motion:reduce){ .spw-card, .spw-bg{ transition:none; } }
.spw-band{ position:relative; overflow:hidden; text-align:center; color:#fff; padding:26px 22px 22px; background:linear-gradient(135deg,#8b4fc4 0%,#5b2a86 55%,#3d1c5c 100%); }
.spw-band::after{ content:''; position:absolute; right:-50px; top:-60px; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle,rgba(246,211,138,.3),transparent 70%); pointer-events:none; }
.spw-seal{ width:58px; height:58px; margin:0 auto 12px; border-radius:19px; display:grid; place-items:center; color:#3d1c5c; background:linear-gradient(135deg,#f6d38a,var(--gold));
  box-shadow:0 14px 28px -12px rgba(224,164,59,.9), inset 0 1px 0 rgba(255,255,255,.5); }
.spw-seal svg{ width:28px; height:28px; }
.spw-eye{ margin:0 0 6px; font-size:10.5px; font-weight:var(--fw-800,800); letter-spacing:.18em; text-transform:uppercase; color:#f6d38a; }
.spw-band h3{ margin:0; font-family:'Fraunces',serif; font-weight:600; font-size:24px; line-height:1.15; letter-spacing:-.2px; }
.spw-sub{ margin:8px auto 0; max-width:34ch; font-size:13px; line-height:1.5; color:rgba(255,255,255,.8); }
.spw-in{ padding:18px 18px calc(16px + env(safe-area-inset-bottom)); }
.spw-f{ display:block; margin:0 0 6px; }
.spw-f > span:first-child{ display:block; margin:0 0 6px; font-size:12px; font-weight:var(--fw-800,800); color:var(--ink); }
.spw-w{ position:relative; display:block; }
.spw-w input{ width:100%; height:44px; padding:0 52px 0 14px; border-radius:13px; border:1.5px solid rgba(91,42,134,.18); background:#fbf9fd; font:inherit; font-size:16px; color:var(--ink); }
.spw-w input:focus{ outline:none; border-color:var(--brand2); background:#fff; box-shadow:0 0 0 3px rgba(123,63,176,.15); }
.spw-w input[aria-invalid="true"]{ border-color:var(--bad); box-shadow:0 0 0 3px rgba(179,38,30,.1); }
.spw-eye-b{ position:absolute; right:0; top:0; width:48px; height:44px; border:0; background:none; color:var(--muted); display:grid; place-items:center; cursor:pointer; border-radius:0 13px 13px 0; }
.spw-eye-b svg{ width:20px; height:20px; } .spw-eye-b .spw-slash{ opacity:0; } .spw-eye-b[aria-pressed="true"] .spw-slash{ opacity:1; }
.spw-eye-b[aria-pressed="true"]{ color:var(--brand); }
.spw-eye-b:focus-visible, .spw-go:focus-visible, .spw-later:focus-visible{ outline:3px solid rgba(123,63,176,.45); outline-offset:2px; }
.spw-meter{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:10px 0 6px; }
.spw-meter i{ height:4px; border-radius:4px; background:#ece6f3; transition:background .2s ease; }
.spw-meter i.on.s1{ background:var(--bad); } .spw-meter i.on.s2{ background:#e0a43b; } .spw-meter i.on.s3{ background:#4caf7a; } .spw-meter i.on.s4{ background:var(--ok); }
.spw-hint{ margin:0 0 14px; font-size:12px; color:var(--muted); min-height:16px; } .spw-hint.bad{ color:var(--bad); font-weight:700; } .spw-hint.good{ color:var(--ok); font-weight:700; }
.spw-match{ display:flex; align-items:center; gap:7px; margin:8px 0 0; font-size:12.5px; font-weight:var(--fw-800,800); }
.spw-match[hidden]{ display:none; }
.spw-match i{ width:18px; height:18px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-style:normal; font-size:11px; }
.spw-match.ok{ color:var(--ok); } .spw-match.ok i{ background:var(--ok); } .spw-match.ok i::before{ content:'✓'; }
.spw-match.no{ color:var(--bad); } .spw-match.no i{ background:var(--bad); } .spw-match.no i::before{ content:'!'; }
.spw-err{ margin:10px 0 0; padding:10px 12px; border-radius:12px; background:var(--badbg); color:var(--bad); font-size:12.5px; font-weight:var(--fw-700,700); }
.spw-err[hidden]{ display:none; }
.spw-go{ width:100%; min-height:52px; margin-top:16px; border:0; border-radius:16px; cursor:pointer; font-family:inherit; font-size:15px; font-weight:var(--fw-800,800); color:#3d1c5c;
  background:linear-gradient(135deg,#f6d38a,var(--gold)); box-shadow:0 14px 28px -14px rgba(224,164,59,.95); }
.spw-go:disabled{ cursor:not-allowed; opacity:.5; box-shadow:none; }
.spw-later{ display:block; width:100%; min-height:44px; margin-top:6px; border:0; background:none; font-family:inherit; font-size:13.5px; font-weight:var(--fw-800,800); color:var(--muted); cursor:pointer; }
.spw-done{ text-align:center; padding:8px 4px 0; }
.spw-done b{ display:block; font-family:'Fraunces',serif; font-weight:600; font-size:21px; color:var(--ok); }
.spw-done p{ margin:6px 0 0; font-size:13px; color:var(--muted); line-height:1.5; }
.spw-ban{ display:flex; align-items:center; gap:12px; border-radius:18px; padding:10px 10px 10px 12px; margin:0 0 14px; }
.spw-ban-ic{ flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#3d1c5c; background:linear-gradient(135deg,#f6d38a,var(--gold)); }
.spw-ban-ic svg{ width:19px; height:19px; }
.spw-ban-t{ flex:1; min-width:0; } .spw-ban-t b{ display:block; font-size:13.5px; font-weight:var(--fw-800,800); } .spw-ban-t small{ font-size:11.5px; color:var(--muted); }
.spw-ban-go{ flex:none; min-height:44px; padding:0 14px; border:0; border-radius:13px; cursor:pointer; font-family:inherit; font-size:13px; font-weight:var(--fw-800,800); color:#fff; background:linear-gradient(135deg,var(--brand2),var(--brand)); }

/* v146: Check-out form + Request for refund tiles (same hq tile — gold and blue tints) */
.hq-co{ --c:#9a6408; --cb:#fbe7bf; background:linear-gradient(180deg,#fffbf2,#fdf2df); }
.hq-co .hx-chev{ color:#8a5a06; }
.hq-rf{ --c:#2e5a8a; --cb:#d9e8f8; background:linear-gradient(180deg,#f6faff,#eaf2fc); }
.hq-rf .hx-chev{ color:#2e5a8a; }

/* v173 — Updates card (latest notifications) */
.upd{padding:6px 10px}
.upd-i{display:flex;gap:10px;align-items:flex-start;padding:10px 6px;border-bottom:1px solid rgba(70,20,60,.08);text-decoration:none;color:inherit;min-height:44px}
.upd-i:last-child{border-bottom:0}
.upd-d{flex:none;width:9px;height:9px;border-radius:50%;background:#D9CFE8;margin-top:6px}
.upd-i.un .upd-d{background:#C8381F;box-shadow:0 0 0 3px rgba(200,56,31,.18)}
.upd-t{display:flex;flex-direction:column;min-width:0}
.upd-t b{font-size:14px;color:#46143C}.upd-i.un .upd-t b{font-weight:800}
.upd-t small{font-size:12.5px;color:#6B5D66;line-height:1.4}
.upd-t em{font-style:normal;font-size:11.5px;color:#9C8E93;margin-top:2px}
.hx-count{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:#FDEDE9;color:#C8381F;font-size:11px;font-weight:800;vertical-align:middle}
/* v319 — Updates: a horizontal, swipeable row of cards (scroll-snap); the last card = "View all updates" */
.upd-row{display:flex;gap:12px;margin:0 -16px;padding:4px 16px 10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.upd-row::-webkit-scrollbar{display:none}
.upd-c{position:relative;flex:0 0 232px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;min-height:132px;padding:16px 16px 14px 18px;border-radius:18px;text-decoration:none;color:inherit}
.upd-c .upd-d{position:absolute;top:16px;right:14px;width:9px;height:9px;border-radius:50%;background:#D9CFE8;margin:0}
.upd-c.un .upd-d{background:#C8381F;box-shadow:0 0 0 3px rgba(200,56,31,.18)}
.upd-c b{font-size:14.5px;line-height:1.25;color:#46143C;padding-right:18px}.upd-c.un b{font-weight:800}
.upd-c small{font-size:12.5px;color:#6B5D66;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.upd-c em{font-style:normal;font-size:11.5px;color:#9C8E93;margin-top:auto}
.upd-all{flex-basis:248px;color:#FAF3E7;border:0}
.upd-all-k{font:600 11px/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#F6D88E}
.upd-all b{font:600 17px/1.2 'Fraunces',Georgia,serif;color:#FFF9EC;padding-right:0}
.upd-all small{color:rgba(250,243,231,.82);display:block}
.upd-all em{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding:9px 14px;border-radius:999px;align-self:flex-start;background:rgba(255,255,255,.14);color:#F6D88E;font:800 12.5px/1 'Plus Jakarta Sans',system-ui,sans-serif}
.upd-all em i{font-style:normal;transition:transform .2s}.upd-all:hover em i,.upd-all:active em i{transform:translateX(3px)}
@media (min-width:700px){.upd-row{margin:0;padding:4px 0 10px}.upd-c{flex-basis:260px}}
/* v320 — Night attendance card on /home + the "have you read the rules?" question */
/* v323 — the "Mark attendance" quick tile (first in the strip); the strip shows 4 tiles + a quarter of the 5th */
.qt-mark{ --t:#fffaf0; --ti:#fbe6b4; --tc:#8a5a0b; --tg:#fbeecd; }
.qt-mark.wait{ --ti:#f3eef7; --tc:#8b8397; }
.qt-mark .qt-ic{ position:relative; overflow:visible; }
.qt-mark.open .qt-ic{ background:linear-gradient(150deg,#FBE6B4,#D9AE55); color:#46143C; animation:nmk-pulse 2.2s ease-in-out infinite; }
.qt-mark.done .qt-ic{ background:#fff; border:2px solid #E4C073; padding:0; box-sizing:border-box; }
.qt-mark .qt-ic img{ width:100%; height:100%; object-fit:cover; border-radius:calc(9*var(--u)); }
.qt-tell{ --t:#fff6f8; --ti:#fde1ea; --tc:#b00247; --tg:#fde4ec; }   /* v324: Today I'm late */
@keyframes nmk-pulse{0%,100%{box-shadow:0 0 0 0 rgba(199,154,60,0)}50%{box-shadow:0 0 0 6px rgba(199,154,60,.25)}}
@media (prefers-reduced-motion:reduce){.qt-mark.open .qt-ic{animation:none}}
/* the "have you read?" sheet — above the dock (z 300 > .ro 230 > .dock 6), appended to <body>.
   v333 (owner's mock-up): ivory sheet with a gold edge, moon tile, the terms scene top-right, four rule tiles, two buttons, waves */
.ntq{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;display:flex;align-items:flex-end;justify-content:center;padding:0;background:rgba(30,8,26,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:ntq-in .25s ease both}
.ntq[hidden]{display:none}
@keyframes ntq-in{from{opacity:0}to{opacity:1}}
.ntq-c{position:relative;width:100%;max-width:500px;max-height:94vh;overflow:hidden auto;padding:30px 20px calc(18px + env(safe-area-inset-bottom));border-radius:30px 30px 0 0;color:#46143C;background:linear-gradient(180deg,#FFFCF8 0%,#FBF3EC 65%,#F3E6F2 100%);box-shadow:0 0 0 2px #F1D08A,0 -24px 60px -24px rgba(30,8,26,.8);animation:ntq-up .36s cubic-bezier(.2,.8,.2,1) both}
@keyframes ntq-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.ntq-grab{position:absolute;left:50%;top:10px;width:70px;height:5px;margin-left:-35px;border-radius:999px;background:#E6DAEE}
.ntq-x{position:absolute;right:16px;top:22px;z-index:3;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#46143C;box-shadow:0 8px 18px -10px rgba(70,20,60,.5)}
.ntq-art{position:absolute;right:6px;top:34px;width:min(46%,230px);height:auto;z-index:1;-webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 60%,transparent 100%)}
.ntq-moon{position:relative;z-index:2;width:76px;height:76px;border-radius:22px;display:grid;place-items:center;margin:8px 0 18px;color:#46143C;background:linear-gradient(150deg,#FBE6B4,#E2B85A);box-shadow:0 14px 26px -12px rgba(199,154,60,1),inset 0 1px 0 rgba(255,255,255,.7)}
.ntq-k{position:relative;z-index:2;display:block;font:800 11px/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#6B5D66;margin-bottom:8px}
.ntq-place{position:relative;z-index:2;display:block;font:700 26px/1.1 'Fraunces',Georgia,serif;color:#46143C;margin:0 0 14px;max-width:56%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ntq-place em{font-style:normal;color:#C79A3C}
.ntq-c h3{position:relative;z-index:2;margin:0 0 8px;font:600 22px/1.25 'Fraunces',Georgia,serif;color:#46143C}
.ntq-c p{position:relative;z-index:2;margin:0 0 14px;font-size:14px;line-height:1.5;color:#6B5D66}
.ntq-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
.ntq-grid span{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;padding:12px;border-radius:16px;background:#fff;border:1px solid #EEE3EC;box-shadow:0 10px 24px -18px rgba(70,20,60,.5)}
.ntq-grid i{grid-row:1/3;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#F4EEFA;color:#6D3AA3}
.ntq-grid b{font:800 13px/1.2 'Plus Jakarta Sans',system-ui,sans-serif;color:#46143C}
.ntq-grid small{font-size:11.5px;line-height:1.3;color:#6B5D66}
.ntq-a{position:relative;z-index:2;display:flex;gap:10px}
.ntq-no,.ntq-yes{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:54px;padding:0 12px;border:0;border-radius:999px;font:800 14px/1 'Plus Jakarta Sans',system-ui,sans-serif;text-decoration:none;cursor:pointer}
.ntq-no{background:#fff;color:#46143C;border:1.5px solid #E8DCEA}
.ntq-yes{flex:1.3;color:#FFF9EC;background:linear-gradient(180deg,#7A3FA8,#5A2470 60%,#46143C);box-shadow:0 14px 26px -12px rgba(70,20,60,.9),inset 0 1px 0 rgba(255,255,255,.25)}
.ntq-yes i{font-style:normal;font-size:18px}
.ntq-wave{display:block;height:34px;margin:14px -20px calc(-18px - env(safe-area-inset-bottom));background:radial-gradient(60% 100% at 20% 100%,rgba(201,168,230,.6),rgba(201,168,230,0) 70%),radial-gradient(60% 100% at 85% 100%,rgba(230,212,243,.95),rgba(230,212,243,0) 70%);border-top:1px solid rgba(226,188,106,.55)}
@media (max-width:360px){.ntq-grid{grid-template-columns:1fr}.ntq-art{width:40%}}
@media (min-width:700px){.ntq{align-items:center;padding:16px}.ntq-c{border-radius:30px}}

/* ===== v359 (owner's mock-up) — header + hero: light hero, room photo right, "Active Stay", the stay card inside ===== */
.app .topbar{ background:rgba(250,245,252,.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:none; border:0; padding:8px 2px 8px 4px; margin-bottom:10px; gap:8px; }
.app .wordmark{ flex:1 1 auto; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; overflow:hidden; }
.app .wordmark b{ font-size:clamp(16px, 5.7vw, 23px); line-height:1; letter-spacing:-.3px; font-weight:700; white-space:nowrap; }
.app .wordmark small{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; font-size:calc(6.5*var(--u)); letter-spacing:.11em; color:#6d5a86; white-space:nowrap; }
.app .wordmark small i{ font-style:normal; margin:0 .45em; opacity:.7; }
.app .role-seg{ background:#efe6f8; padding:4px; gap:2px; flex:none; }
.app .topbar>div{ flex:none; }
.app .role-seg span, .app .role-seg button{ font-size:calc(11.6*var(--u)); font-weight:600; padding:7px 10px; color:#4b2a6b; min-height:32px; display:inline-flex; align-items:center; }
.app .role-seg .on{ background:linear-gradient(135deg,#5b23a3,#6d3aa3); color:#fff; box-shadow:0 6px 14px -8px rgba(91,35,163,.8); }
@media (max-width:430px){ .app .wordmark small{ display:block; } }
@media (max-width:400px){ .app .role-seg span, .app .role-seg button{ padding:7px 9px; font-size:11px; } }
@media (max-width:360px){ .app .wordmark small{ display:none; } .app .wordmark b{ font-size:16px; } .app .role-seg span, .app .role-seg button{ padding:7px 6px; font-size:10.5px; } .app .topbar{ gap:6px; } }

.app .hero.hx{ min-height:0; margin-bottom:12px; padding:calc(18*var(--u)) calc(16*var(--u)) calc(12*var(--u)); border-radius:calc(22*var(--u)); color:var(--u-ink);
  background:linear-gradient(135deg,#f7effc 0%,#fbf2f6 55%,#fdf3ec 100%); box-shadow:0 22px 44px -30px rgba(76,30,120,.45), 0 1px 0 rgba(255,255,255,.8) inset; }
.app .hero.hx::after{ width:62%; bottom:auto; height:calc(206*var(--u)); border-top-right-radius:calc(22*var(--u)); background-position:center; background-size:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 30%,#000 58%); mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 30%,#000 58%); }
.app .hero.hx:not(.hx-res)::after{ height:100%; bottom:0; width:50%; }
.hx-tx{ position:relative; z-index:1; }
.app .hx p.hero-w, .app .hx p.hero-d{ max-width:58%; }
.app .hx h1{ margin:0; font-size:calc(24*var(--u)); line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#1a0f2a; letter-spacing:-.4px; }
.hx-res .hx-tx h1{ padding-right:calc(106*var(--u)); }   /* room for the "Active Stay" pill — a long name ends in … instead of under it */
.app .hx .wave{ font-size:.8em; }
.app .hx p.hero-w{ margin:calc(6*var(--u)) 0 0; font-size:calc(15*var(--u)); font-weight:500; color:#2a1b3b; }
.app .hx p.hero-d{ margin:calc(12*var(--u)) 0 0; font-size:calc(13.6*var(--u)); line-height:1.42; color:#3a2a4d; opacity:1; }
.app .hx .status{ margin-top:calc(16*var(--u)); min-height:calc(42*var(--u)); padding:0 calc(14*var(--u)) 0 calc(12*var(--u)); gap:calc(8*var(--u)); font-size:calc(13.4*var(--u)); font-weight:700;
  color:#3b1f6b; background:rgba(255,255,255,.72); border:1px solid rgba(109,58,163,.14); box-shadow:0 10px 24px -16px rgba(76,30,120,.5); white-space:nowrap; max-width:100%; }
.app .hx .status span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.app .hx .status svg{ width:calc(18*var(--u)); height:calc(18*var(--u)); margin:0; color:#6d3aa3; }
.app .hx .status svg:last-child{ width:calc(14*var(--u)); height:calc(14*var(--u)); stroke-width:2.6; margin-left:auto; }
.app .hx .status.visitor i{ background:#f0b53a; }
.hx-live{ position:absolute; z-index:2; top:calc(14*var(--u)); right:calc(14*var(--u)); display:inline-flex; align-items:center; gap:calc(7*var(--u)); height:calc(32*var(--u)); padding:0 calc(13*var(--u));
  border-radius:999px; background:rgba(38,22,46,.82); color:#fff; font-size:calc(12.2*var(--u)); font-weight:600; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.hx-live i{ width:calc(9*var(--u)); height:calc(9*var(--u)); border-radius:50%; background:#2ddc62; box-shadow:0 0 0 calc(3*var(--u)) rgba(45,220,98,.25); }
.hx-stay{ position:relative; z-index:1; display:flex; align-items:center; gap:calc(14*var(--u)); margin:calc(16*var(--u)) calc(-6*var(--u)) 0; padding:calc(10*var(--u));
  border-radius:calc(20*var(--u)); background:rgba(255,255,255,.92); box-shadow:0 14px 30px -22px rgba(76,30,120,.55); }
.hx-stay-th{ flex:none; width:calc(118*var(--u)); height:calc(118*var(--u)); border-radius:calc(16*var(--u)); object-fit:cover; background:#e9dff3; }
.hx-stay-in{ min-width:0; flex:1; }
.hx-stay-in b{ display:block; font-size:calc(17.5*var(--u)); font-weight:700; color:#1a0f2a; line-height:1.2; margin-bottom:calc(6*var(--u)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hx-stay-in p{ display:flex; align-items:center; gap:calc(9*var(--u)); margin:0 0 calc(5*var(--u)); font-size:calc(13.2*var(--u)); color:#5a4a6b; line-height:1.3; }
.hx-stay-in p svg{ flex:none; width:calc(17*var(--u)); height:calc(17*var(--u)); color:#8a7a9c; }
.hx-stay-vp{ position:relative; display:inline-flex; align-items:center; gap:calc(8*var(--u)); margin-top:calc(2*var(--u)); font-size:calc(13.6*var(--u)); font-weight:700; color:#5b23a3; text-decoration:none; }
.hx-stay-vp::after{ content:""; position:absolute; left:-4px; right:-4px; top:50%; height:44px; transform:translateY(-50%); }
.hx-stay-vp svg{ width:calc(18*var(--u)); height:calc(18*var(--u)); color:#6d3aa3; } .hx-stay-vp svg:last-child{ width:calc(13*var(--u)); height:calc(13*var(--u)); stroke-width:2.6; }
.hx-stay-vp svg circle{ stroke:#fff; }

/* ===== v360 audit vs the owner's mock-up: header without a card, violet / orange wordmark, bell with a divider;
   hero = the warm bedroom photo full height on the right, the stay card overlapping it with a curved right edge ===== */
.app .topbar{ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-radius:0; padding:6px 0; }
.app .topbar.glass{ border:0; box-shadow:none; }
.app .wordmark b{ font-family:'Fraunces',serif; font-weight:800; color:#5b1fd0; background:linear-gradient(90deg,#4a14b8,#7a2fe0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.app .wordmark b em{ background:linear-gradient(90deg,#f7941d,#f9a83a); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.app .wordmark small{ color:#4b3b63; font-weight:600; }
.app .role-seg{ background:#f1eafb; box-shadow:0 6px 18px -12px rgba(91,22,201,.5); }
.app .role-seg span, .app .role-seg button{ color:#5b16c9; font-weight:600; }
.app .role-seg .on{ background:linear-gradient(135deg,#5513c4,#6a1fe0); color:#fff; }
.app .topbar a[aria-label^="Notifications"]{ background:transparent!important; color:#6a1fe0!important; border-left:1px solid #e3d9ef; border-radius:0!important; padding-left:6px; }
.app .topbar a[aria-label^="Notifications"] svg{ width:26px; height:26px; }
.app .topbar a[aria-label^="Notifications"] span{ top:2px!important; right:0!important; min-width:22px!important; height:22px!important; line-height:22px!important; border-radius:11px!important; font-size:12px!important; background:#ef2b3c!important; }

.app .hero.hx-res{ padding-bottom:calc(14*var(--u)); background:linear-gradient(135deg,#f6effd 0%,#faf3f9 45%,#fdf4ee 100%); }
.app .hero.hx-res::after{ width:60%; height:100%; bottom:0; border-radius:0 calc(22*var(--u)) calc(22*var(--u)) 0;
  background-image:url(/assets/images/home-stay-room.jpg);
  background-image:image-set(url(/assets/images/home-stay-room.webp) type("image/webp"), url(/assets/images/home-stay-room.jpg) type("image/jpeg"));
  background-position:62% center; background-size:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 16%,#000 38%); mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 16%,#000 38%); }
.app .hx-res .hx-stay{ margin:calc(18*var(--u)) calc(-4*var(--u)) 0; padding:calc(12*var(--u)) calc(70*var(--u)) calc(12*var(--u)) calc(12*var(--u)); border-radius:calc(22*var(--u)) 0 0 calc(22*var(--u));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H58C74 0 74 34 84 58C90 74 95 88 100 100H0Z' fill='%23fff' fill-opacity='.95'/%3E%3C/svg%3E") left top/100% 100% no-repeat;
  box-shadow:none; filter:drop-shadow(0 14px 22px rgba(76,30,120,.16)); }
.app .hx-res .hx-stay-th{ box-shadow:0 8px 18px -10px rgba(0,0,0,.55); }
.app .hx-res .hx-stay-in b{ white-space:normal; }
.app .hx .status svg:first-child{ fill:#6a1fe0; stroke:#fff; }
/* v360 audit pass 2: bed in view, gentler card curve (text never clipped), mock-up text widths */
.app .hero.hx-res::after{ background-position:18% 100%; background-size:auto 100%; }
.app .hx-res .hx-stay{ padding-right:calc(14*var(--u));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H64C80 0 84 34 91 62C95 80 97 92 100 100H0Z' fill='%23fff' fill-opacity='.95'/%3E%3C/svg%3E"); }
.app .hx-res .hx-stay-in b{ white-space:nowrap; font-size:calc(16.5*var(--u)); }
.app .hx-res .hx-stay-in p{ white-space:nowrap; }
.app .hx p.hero-w{ font-size:calc(14*var(--u)); max-width:66%; }
.app .hx p.hero-d{ font-size:calc(13*var(--u)); max-width:60%; }
.app .wordmark small{ font-size:calc(6.3*var(--u)); letter-spacing:.15em; font-weight:500; text-overflow:clip; }
.app .hero.hx-res::after{ background-position:6% 100%; }
.app .hx-res .hx-stay-th{ width:calc(96*var(--u)); height:calc(96*var(--u)); }
.app .hx-res .hx-stay{ gap:calc(12*var(--u));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H72C86 0 89 36 94 62C97 80 98 92 100 100H0Z' fill='%23fff' fill-opacity='.95'/%3E%3C/svg%3E"); }
.app .hx-res .hx-stay-in b{ font-size:calc(15.5*var(--u)); }
.app .hx-res .hx-stay-in p{ font-size:calc(12.4*var(--u)); }
.app .hx p.hero-d{ max-width:66%; }
.app .wordmark small{ letter-spacing:.11em; }
.app .hx-res .hx-stay-in p, .app .hx-res .hx-stay-in b{ overflow:hidden; text-overflow:ellipsis; }   /* a long property name is clipped, never spills over the photo */
/* v361 — one look on phone and desktop: the header is the page colour (not see-through — on scroll the cards no longer
   show behind the logo), same on every width (the layout's .glass is 66% on desktop / 80% on phones); the installed
   Android app's status-bar band is light here too. iPhone keeps the plum band (its status-bar text is always white). */
.app .topbar, .app .topbar.glass{ background:rgba(247,241,252,.94); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  margin-left:-14px; margin-right:-14px; padding-left:14px; padding-right:12px; border-radius:0 0 18px 18px; }
html.is-standalone.is-android body:has(.hx)::before{ background:#f6effd; }
.app .topbar{ top:0; }
html.is-standalone .app .topbar{ top:var(--sat); }
/* v362 — colours measured pixel by pixel from the owner's mock-up (exact hex, no guesses) */
body:has(.hx){ background:#f8f4fc; }
.app .topbar, .app .topbar.glass{ background:rgba(248,244,252,.95); }
.app .wordmark b{ background:none; -webkit-text-fill-color:#5e04de; color:#5e04de; }
.app .wordmark b em{ background:none; -webkit-text-fill-color:#fa8e09; color:#fa8e09; }
.app .wordmark small{ color:#7d7b97; }
.app .role-seg{ background:#f4e8fc; }
.app .role-seg span, .app .role-seg button{ color:#5421ac; }
.app .role-seg .on{ background:#5c00dc; color:#fff; }
.app .topbar a[aria-label^="Notifications"]{ color:#5110b9!important; }
.app .topbar a[aria-label^="Notifications"] span{ background:#fc1030!important; }
.app .hero.hx, .app .hero.hx-res{ background:#f4e8fc; }
.app .hx h1{ color:#020134; }
.app .hx p.hero-w{ color:#0f0b2c; }
.app .hx p.hero-d{ color:#1a1634; }
.app .hx .status{ background:rgba(255,255,255,.38); color:#0a0628; border-color:rgba(94,4,222,.10); font-weight:600; }
.app .hx .status svg:first-child{ fill:#5702d8; color:#5702d8; }
.app .hx .status svg:last-child{ color:#560cc7; }
.hx-live{ background:rgba(52,40,48,.86); }
.hx-live i{ background:#00d97e; box-shadow:0 0 0 calc(3*var(--u)) rgba(0,217,126,.22); }
.hx-stay-in b{ color:#05032d; }
.hx-stay-in p{ color:#74718c; }
.hx-stay-in p svg{ color:#52527b; }
.hx-stay-vp{ color:#4f16b9; }
.hx-stay-vp svg{ color:#5a03e2; }
html.is-standalone.is-android body:has(.hx)::before{ background:#f8f4fc; }

/* ===== v364 (owner's mock-up) — "rent paid, waiting for approval": ivory bottom sheet like the incident dues sheet —
   gold-coin pill, big serif "paid" with a gold swoosh, the house + hourglass scene, plum "Ask to approve" pill, 5 s bar ===== */
.pwq{ position:fixed; inset:0; z-index:9001; display:flex; align-items:flex-end; justify-content:center; }
.pwq[hidden]{ display:none; }
.pwq-bg{ position:absolute; inset:0; background:rgba(30,8,26,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .3s; }
.pwq.on .pwq-bg{ opacity:1; }
.pwq-c{ position:relative; width:100%; max-width:520px; max-height:94vh; box-sizing:border-box; overflow:hidden auto; padding:18px 22px calc(24px + env(safe-area-inset-bottom,0px)); text-align:center; color:#46143C;
  border-radius:34px 34px 0 0; background:radial-gradient(120% 50% at 50% 0%,#FFFFFF 0%,rgba(255,255,255,0) 60%),linear-gradient(180deg,#FFFCF6 0%,#FBF3E9 60%,#F3E6F2 100%);
  box-shadow:0 -24px 60px -24px rgba(30,8,26,.7); transform:translateY(100%); transition:transform .42s cubic-bezier(.2,.8,.2,1); }
.pwq.on .pwq-c{ transform:none; }
.pwq-c>*{ position:relative; z-index:1; }
.pwq-handle{ display:block; width:52px; height:5px; margin:0 auto 0; border-radius:99px; background:#E6DAD6; }
.pwq-x{ position:absolute; top:16px; right:16px; width:44px; height:44px; border:0; border-radius:50%; background:#F1E8F6; color:#46143C; display:grid; place-items:center; cursor:pointer; z-index:2; }
.pwq-k{ display:inline-flex; align-items:center; gap:10px; margin:30px 0 16px; padding:7px 18px 7px 7px; border-radius:999px; background:#fff; border:1.5px solid #E2C27A;
  box-shadow:0 8px 18px -10px rgba(199,154,60,.9); font:700 11.5px/1 'Plus Jakarta Sans',system-ui,sans-serif; letter-spacing:.2em; text-transform:uppercase; color:#46143C; }
.pwq-coin{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font:800 15px/1 'Fraunces',Georgia,serif; font-style:normal; color:#fff;
  background:radial-gradient(circle at 35% 30%,#FFE59A,#E2A93A 55%,#B07A22); box-shadow:inset 0 0 0 2px rgba(255,255,255,.45),0 3px 6px -2px rgba(90,58,8,.6); }
.pwq-k em{ font:700 21px/1 'Fraunces',Georgia,serif; font-style:normal; letter-spacing:0; text-transform:none; color:#A87A22; padding-left:12px; border-left:1.5px solid #E2C27A; }
.pwq-c h3{ margin:0 0 12px; font:400 32px/1.08 'Fraunces',Georgia,serif; color:#2A0B3A; letter-spacing:-.4px; }
.pwq-c h3 b{ position:relative; display:block; margin:0 0 8px; font:800 70px/1 'Fraunces',Georgia,serif; letter-spacing:-2px;
  background:linear-gradient(180deg,#5A1E63 0%,#46143C 55%,#6D3AA3 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pwq-sw{ position:absolute; left:22%; right:22%; bottom:-6px; width:56%; height:16px; }
.pwq-sub{ display:block; font-size:26px; color:#2A0B3A; white-space:nowrap; }
.pwq-sub i{ display:inline-block; margin-right:6px; padding:2px 16px 6px; border-radius:999px; font-style:italic; color:#46143C; background:radial-gradient(80% 90% at 50% 70%,#E7DBF6,rgba(231,219,246,0)); }
.pwq-c p{ margin:4px auto 6px; max-width:380px; font-size:15px; line-height:1.55; color:#4A3A55; }
.pwq-c p b{ color:#46143C; }
.pwq-c p small{ display:block; margin-top:4px; font-size:12.5px; color:#8A7A94; }
.pwq-art{ display:block; width:min(360px,88vw); height:auto; margin:0 auto 12px;
  -webkit-mask-image:radial-gradient(ellipse 64% 62% at 50% 54%,#000 62%,transparent 100%); mask-image:radial-gradient(ellipse 64% 62% at 50% 54%,#000 62%,transparent 100%); }
.pwq-go{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:66px; padding:7px 8px 7px 18px; border-radius:999px; text-decoration:none; color:#FFF9EC;
  font:700 23px/1 'Fraunces',Georgia,serif; background:linear-gradient(180deg,#7A3FA8 0%,#5A2470 55%,#46143C 100%);
  box-shadow:0 0 0 2.5px #E2C27A,0 18px 34px -16px rgba(70,20,60,.9),inset 0 1px 0 rgba(255,255,255,.25); }
.pwq-go:active{ transform:translateY(1px); }
.pwq-shield{ display:grid; place-items:center; width:40px; height:40px; color:#F1D08A; }
.pwq-sep{ width:1.5px; height:32px; background:linear-gradient(180deg,rgba(241,208,138,0),#E2C27A,rgba(241,208,138,0)); }
.pwq-gt{ flex:1; text-align:center; letter-spacing:-.2px; }
.pwq-arr{ display:grid; place-items:center; width:52px; height:52px; border-radius:50%; color:#46143C; background:radial-gradient(circle at 35% 30%,#FFF0B8,#E7B23F 60%,#C79A3C); box-shadow:0 6px 14px -6px rgba(0,0,0,.6); }
.pwq-close{ display:inline-block; min-height:44px; margin-top:10px; padding:0 6px; border:0; background:none; color:#5A1E7A; font:700 19px/1 'Fraunces',Georgia,serif; cursor:pointer; }
.pwq-bar{ display:block; height:3px; margin:6px auto 0; width:120px; border-radius:99px; background:linear-gradient(90deg,#E7C675,#C79A3C); transform-origin:left; }
.pwq.on .pwq-bar{ animation:pwqBar 5s linear forwards; }
.pwq.held .pwq-bar{ animation:none; opacity:0; }
@keyframes pwqBar{ to{ transform:scaleX(0); } }
.pwq-wave{ position:absolute; left:-10%; right:-10%; bottom:-6px; height:120px; z-index:0; pointer-events:none;
  background:radial-gradient(60% 100% at 20% 100%,rgba(201,168,230,.55),rgba(201,168,230,0) 70%),radial-gradient(60% 100% at 85% 100%,rgba(230,212,243,.9),rgba(230,212,243,0) 70%); }
@media (max-width:360px){ .pwq-c h3{ font-size:26px; } .pwq-c h3 b{ font-size:56px; } .pwq-sub{ font-size:21px; } .pwq-k{ letter-spacing:.06em; font-size:10.5px; margin-top:34px; padding-right:14px; } .pwq-k span, .pwq-gt{ white-space:nowrap; } .pwq-go{ font-size:18px; } .pwq-shield{ width:30px; } .pwq-c{ padding-left:16px; padding-right:16px; } .pwq-art{ width:min(280px,80vw); } .pwq-go{ font-size:19px; min-height:60px; } .pwq-arr{ width:46px; height:46px; } }
@media (min-width:700px){ .pwq{ align-items:center; } .pwq-c{ border-radius:34px; } }
@media (prefers-reduced-motion:reduce){ .pwq-c, .pwq-bg{ transition:none; } }

/* ===== v365 — header + hero traced from the owner's mock-up: every size / gap measured on the image. The mock-up frame is
   ~430 px wide, so --hx = --u × .92 keeps the mock-up's proportions on a 390 px phone (and scales below it). ===== */
.app{ --hx:calc(var(--u)*.92); }
.app .topbar, .app .topbar.glass{ padding:8px 14px 0 14px; margin-bottom:calc(13*var(--hx));   /* v372: the bar keeps its 14 px side gutters (v365 dropped them → wordmark on the edge, bell cut off) */ gap:calc(8*var(--hx)); align-items:center; }
.app .wordmark{ gap:calc(3*var(--hx)); }
.app .wordmark b{ font-size:clamp(14px, 5.3vw, 20.5px); }
.app .wordmark small{ font-size:calc(6.2*var(--u)); letter-spacing:.12em; line-height:1; }
.app .topbar>div{ gap:calc(7*var(--hx)); }
.app .role-seg{ padding:2px; gap:0; box-shadow:none; border-radius:999px; }
.app .role-seg span, .app .role-seg button{ min-height:calc(22*var(--hx)); padding:0 calc(13*var(--hx)); font-size:calc(11*var(--hx)); font-weight:600; border-radius:999px; }
.app .role-seg .on{ box-shadow:none; }
.app .role-seg .lock svg{ width:calc(10*var(--hx)); height:calc(10*var(--hx)); }
.app .topbar a[aria-label^="Notifications"]{ min-width:38px!important; min-height:38px!important; padding-left:calc(8*var(--hx)); margin-left:calc(2*var(--hx)); }
.app .topbar a[aria-label^="Notifications"] svg{ width:calc(20*var(--hx)); height:calc(20*var(--hx)); }
.app .topbar a[aria-label^="Notifications"] span{ top:-1px!important; right:0!important; min-width:17px!important; height:17px!important; line-height:17px!important; padding:0 4px!important; font-size:10px!important; }
@media (max-width:400px){ .app .role-seg span, .app .role-seg button{ padding:0 calc(11*var(--hx)); font-size:calc(11*var(--hx)); } }
@media (max-width:360px){ .app .role-seg span, .app .role-seg button{ padding:0 8px; font-size:10.5px; } }

.app .hero.hx, .app .hero.hx-res{ border-radius:calc(20*var(--hx)); padding:calc(16*var(--hx)) calc(15*var(--hx)) calc(12*var(--hx)); margin-bottom:calc(14*var(--hx)); }
.app .hero.hx-res{ padding-bottom:0; }
.app .hero.hx-res::after{ width:58%; border-radius:0 calc(20*var(--hx)) calc(20*var(--hx)) 0; background-position:8% 100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 24%,#000 46%); mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 24%,#000 46%); }
.app .hx h1{ font-size:calc(22*var(--hx)); line-height:1.15; letter-spacing:-.3px; }
.hx-res .hx-tx h1{ padding-right:calc(84*var(--hx)); }
.app .hx .wave{ font-size:.9em; }
.app .hx p.hero-w{ margin-top:calc(2*var(--hx)); font-size:calc(11.5*var(--hx)); line-height:1.3; max-width:60%; }
.app .hx p.hero-d{ margin-top:calc(8*var(--hx)); font-size:calc(10*var(--hx)); line-height:1.3; max-width:calc(170*var(--hx)); }
.app .hx .status{ margin-top:calc(8*var(--hx)); min-height:calc(24*var(--hx)); padding:0 calc(10*var(--hx)) 0 calc(8*var(--hx)); gap:calc(8*var(--hx)); font-size:calc(10.5*var(--hx)); font-weight:700; border-radius:999px; box-shadow:0 6px 14px -10px rgba(76,30,120,.45); }
.app .hx .status svg:first-child{ width:calc(13*var(--hx)); height:calc(13*var(--hx)); }
.app .hx .status svg:last-child{ width:calc(10*var(--hx)); height:calc(10*var(--hx)); margin-left:calc(2*var(--hx)); }
.hx-live{ top:calc(8*var(--hx)); right:calc(8*var(--hx)); height:calc(20*var(--hx)); padding:0 calc(9*var(--hx)); gap:calc(6*var(--hx)); font-size:calc(10*var(--hx)); }
.hx-live i{ width:calc(7*var(--hx)); height:calc(7*var(--hx)); box-shadow:0 0 0 calc(2*var(--hx)) rgba(0,217,126,.22); }
.app .hx-res .hx-stay{ margin:calc(9*var(--hx)) 0 0 calc(-10*var(--hx)); padding:calc(7*var(--hx)) calc(60*var(--hx)) calc(8*var(--hx)) calc(9*var(--hx)); gap:calc(16*var(--hx)); min-height:calc(84*var(--hx)); box-sizing:border-box;
  border-radius:calc(13*var(--hx)) 0 0 0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H64C80 0 94 28 100 86V100H0Z' fill='%23fff' fill-opacity='.96'/%3E%3C/svg%3E"); }
.app .hx-res .hx-stay-th{ width:calc(85*var(--u)); height:calc(69*var(--u)); border-radius:calc(12*var(--u)); }
.app .hx-res .hx-stay-in b{ margin-bottom:calc(4*var(--hx)); font-size:calc(13*var(--hx)); line-height:1.2; }
.app .hx-res .hx-stay-in p{ margin:0 0 calc(1*var(--hx)); gap:calc(7*var(--hx)); font-size:calc(10.5*var(--hx)); line-height:1.4; }
.app .hx-res .hx-stay-in p svg{ width:calc(13*var(--hx)); height:calc(13*var(--hx)); }
.app .hx-res .hx-stay-vp{ margin-top:calc(3*var(--hx)); gap:calc(7*var(--hx)); font-size:calc(10.5*var(--hx)); }
.app .hx-res .hx-stay-vp svg{ width:calc(13*var(--hx)); height:calc(13*var(--hx)); } .app .hx-res .hx-stay-vp svg:last-child{ width:calc(9*var(--hx)); height:calc(9*var(--hx)); }

/* ===== v366 / v369 — the stay card ("Room G002 · Bed A") traced from the owner's mock-up (v369: the final one): the top
   edge straight to 62 %, then one convex sweep down to the bottom edge at 94 % (the bed shows at the bottom-right);
   fill = the "Rent Due" card's warm cream → peach gradient (#fdf9f5 → #fcf0e8); 86 × 74 thumbnail; text ellipsized before the curve; navy title,
   slate text + slate icons, violet camera + "View Photos" on a faint lilac pill. Text never leaves the card (ellipsis). ===== */
.app{ overflow-x:clip; }                                                    /* PWA: nothing can push the page sideways */
.app .hero.hx-res{ padding-bottom:calc(4*var(--hx)); }
.app .hx-res .hx-stay{ margin:calc(9*var(--hx)) calc(-4*var(--hx)) 0 calc(-9*var(--hx)); max-width:none; padding:calc(6*var(--hx)) 22% calc(6*var(--hx)) calc(7*var(--hx)); min-height:calc(86*var(--u));
  border-radius:0; filter:drop-shadow(0 10px 18px rgba(76,30,120,.14));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fdf9f5'/%3E%3Cstop offset='.55' stop-color='%23fdf6f1'/%3E%3Cstop offset='1' stop-color='%23fcf0e8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 16Q0 0 4 0H62C70 0 74 28 77 50C80 72 86 90 94 100H4Q0 100 0 84Z' fill='url(%23g)' fill-opacity='.97'/%3E%3C/svg%3E") left top/100% 100% no-repeat; }
.app .hx-res .hx-stay-th{ width:calc(86*var(--u)); height:calc(74*var(--u)); border-radius:calc(16*var(--u)); box-shadow:0 6px 14px -8px rgba(0,0,0,.5); }
.app .hx-res .hx-stay-in b{ color:#01033c; font-size:calc(13*var(--hx)); font-weight:700; margin-bottom:calc(5*var(--hx)); }
.app .hx-res .hx-stay-in p{ color:#666b9e; font-size:calc(10.5*var(--hx)); margin:0 0 calc(3*var(--hx)); gap:calc(8*var(--hx)); }
.app .hx-res .hx-stay-in p svg{ color:#4f558a; width:calc(14*var(--hx)); height:calc(14*var(--hx)); }
.app .hx-res .hx-stay-in p span, .app .hx-res .hx-stay-in b{ display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app .hx-res .hx-stay-vp{ margin:calc(4*var(--hx)) 0 0 calc(-6*var(--hx)); padding:calc(2*var(--hx)) calc(8*var(--hx)) calc(2*var(--hx)) calc(6*var(--hx)); border-radius:999px; background:rgba(120,60,230,.07); color:#5005ef; font-size:calc(10.5*var(--hx)); font-weight:700; gap:calc(8*var(--hx)); max-width:100%; }
.app .hx-res .hx-stay-vp span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app .hx-res .hx-stay-vp svg{ color:#5500ec; width:calc(15*var(--hx)); height:calc(15*var(--hx)); } .app .hx-res .hx-stay-vp svg:last-child{ color:#5005ef; width:calc(10*var(--hx)); height:calc(10*var(--hx)); stroke-width:3; }
.hx-stay-vp svg circle{ stroke:#fff; }
/* v368 — desktop: the dashboard column is 520 px wide; the hero keeps the phone proportions (--u caps at 1 px) and the
   photo / card scale with it, so a desktop browser sees the same card as a large phone, centred. */
@media (min-width:600px){ .app .hero.hx-res::after{ background-position:12% 100%; } }
/* v380 (owner): My inquiries — the dashboard header with a Back arrow inside it; inquiry cards tidied (no wrapping buttons) */
.app .topbar .tb-back{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; color:#5b2a86; background:rgba(241,234,251,.96); text-decoration:none; margin-right:2px; }
.app .topbar .tb-back svg{ width:22px; height:22px; display:block; }
.app .topbar .tb-back:active{ transform:scale(.96); }
.app .topbar .tb-back:focus-visible{ outline:2px solid #C79A3C; outline-offset:3px; }
.app .topbar .tb-back ~ .wordmark{ flex:1; min-width:0; }
.app .topbar .tb-back ~ .wordmark small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inq{ padding:16px 16px 14px; border-radius:22px; }
.inq-sum{ gap:12px; }
.inq-ic{ width:42px; height:42px; border-radius:14px; box-shadow:0 10px 22px -12px rgba(91,42,134,.75); }
.inq-t b{ font-size:15px; letter-spacing:-.01em; }
.inq-when{ font-size:13px; }
.inq-t small{ font-size:11.5px; }
.inq-side .pill{ font-size:11px; }
.inq-acts{ flex-wrap:wrap; gap:8px; margin-top:14px; }
.inq-acts .inq-btn{ box-sizing:border-box; flex:1 1 calc(50% - 4px); min-width:0; height:44px; padding:0 10px; border-radius:14px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inq-acts .inq-btn-main{ order:0; }
.inq-acts .inq-btn-wa{ order:1; }
.inq-acts .inq-btn:not(.inq-btn-main):not(.inq-btn-wa):not(.dvx-go):not(.dvx-edit){ order:2; flex-basis:100%; height:42px; color:#5b2a86; background:#fff; border:1px solid rgba(91,42,134,.18); }
.inq-acts .inq-btn-main:only-child, .inq-acts .inq-btn-wa:only-child{ flex-basis:100%; }
@media (min-width:520px){ .inq-acts .inq-btn, .inq-acts .inq-btn:not(.inq-btn-main):not(.inq-btn-wa):not(.dvx-go):not(.dvx-edit){ flex:1 1 0; order:0; } }
.inq-pager a{ background:#fff; }
@media (max-width:359px){ .inq-acts .inq-btn{ flex-basis:100%; } }   /* v380: narrowest phones — one button per row, nothing clipped */
/* v381 (owner): My stay without the plum header; the Rent Due banner (mock-up: wallet · Rent Due · amount + pill · due date · Pay Rent →) */
.sx{ padding-top:calc(8*var(--u)); }
.sx-grid{ margin-top:0; }
.sx-rent{ display:flex; align-items:center; flex-wrap:wrap; gap:calc(8*var(--u)) calc(12*var(--u)); margin:0 0 calc(6*var(--u)); padding:calc(12*var(--u)) calc(12*var(--u)); border-radius:calc(18*var(--u));
  background:linear-gradient(135deg,#fff8f1,#fdf1e6); box-shadow:inset 0 0 0 1px rgba(247,148,29,.16), 0 12px 28px -22px rgba(91,42,134,.45); }
.sx-rent-ic{ flex:none; width:calc(58*var(--u)); height:calc(58*var(--u)); border-radius:50%; display:grid; place-items:center; color:#f7941d; background:radial-gradient(circle at 50% 40%,#fff2e2,#fde3c6); box-shadow:0 10px 22px -14px rgba(247,148,29,.8); }
.sx-rent-ic svg{ width:calc(28*var(--u)); height:calc(28*var(--u)); }
.sx-rent-t{ flex:1 1 150px; min-width:0; }
.sx-rent-t small{ display:block; font-size:calc(13*var(--u)); font-weight:700; color:#2a1740; }
.sx-rent-t b{ display:flex; align-items:center; flex-wrap:wrap; gap:calc(4*var(--u)) calc(10*var(--u)); margin-top:2px; font-size:calc(30*var(--u)); line-height:1.05; font-weight:800; letter-spacing:-.02em; color:#5e04de; font-variant-numeric:tabular-nums; }
.sx-rent-t b em{ font-style:normal; font-size:calc(12.5*var(--u)); font-weight:700; line-height:1; padding:calc(6*var(--u)) calc(10*var(--u)); border-radius:999px; color:#d6362c; background:#fdeeea; white-space:nowrap; }
.sx-rent-t span{ display:block; margin-top:calc(4*var(--u)); font-size:calc(12.5*var(--u)); color:#6e628b; }
.sx-rent-btn{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:calc(10*var(--u)); min-height:48px; padding:0 calc(22*var(--u)); border-radius:14px; text-decoration:none; color:#fff; font-size:calc(16*var(--u)); font-weight:700;
  background:linear-gradient(135deg,#6a1be0,#4a0bb8); box-shadow:0 12px 24px -14px rgba(74,11,184,.9); }
.sx-rent-btn svg{ width:calc(18*var(--u)); height:calc(18*var(--u)); stroke-width:2.4; }
.sx-rent-btn:active{ transform:scale(.98); }
.sx-rent.is-late{ background:linear-gradient(135deg,#fff3f1,#fde8e4); box-shadow:inset 0 0 0 1px rgba(214,54,44,.18); }
.sx-rent.is-late .sx-rent-t b{ color:#b4231a; }
@media (max-width:429px){ .sx-rent-btn{ flex:1 1 100%; } }   /* phones: the button gets its own row, full width */
/* v384 (owner): new hero photo (bed + MoMPA HOME wall art) — the wall art and pillows sit in the visible right part */
.app .hero.hx-res::after{ background-position:90% 100%; }
/* v385 (owner): I'm Late · Out of PG · Raise Incident tiles; slimmer Rent Due strip */
.qt-imlate{ --t:#fff8ef; --ti:#fde3b6; --tc:#c76a00; --tg:#fdf0d9; }
.qt-outpg{ --t:#f8f2fe; --ti:#f1e7fd; --tc:#51069f; --tg:#efe5f9; }
.qt-incident{ --t:#fff4f2; --ti:#fde1dc; --tc:#d6362c; --tg:#fde6e2; }
.sx-rent{ padding:calc(8*var(--u)) calc(10*var(--u)); gap:calc(6*var(--u)) calc(10*var(--u)); border-radius:calc(16*var(--u)); }
.sx-rent-ic{ width:calc(40*var(--u)); height:calc(40*var(--u)); }
.sx-rent-ic svg{ width:calc(21*var(--u)); height:calc(21*var(--u)); }
.sx-rent-t small{ font-size:calc(11.5*var(--u)); }
.sx-rent-t b{ font-size:calc(22*var(--u)); margin-top:1px; }
.sx-rent-t b em{ font-size:calc(11*var(--u)); padding:calc(4*var(--u)) calc(8*var(--u)); }
.sx-rent-t span{ margin-top:calc(2*var(--u)); font-size:calc(11.5*var(--u)); }
.sx-rent-btn{ min-height:44px; padding:0 calc(16*var(--u)); font-size:calc(14.5*var(--u)); border-radius:12px; }
@media (max-width:429px){ .sx-rent-btn{ flex:0 0 auto; min-height:44px; } .sx-rent-t{ flex:1 1 0; } }   /* v385: phones keep the button beside the amount (one row) */

/* v420 (audit UX-5) */
.rvp-sr{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.rvp-drop:focus-within{outline:2px solid var(--brand);outline-offset:2px}

/* v470 (owner): "+N more" on My stay — the other checked-in beds / stays, each with Open and Transfer */
.sx-morebtn{display:inline-flex;align-items:center;margin-left:8px;min-height:44px;padding:4px 14px;border:0;border-radius:999px;background:#F3ECFA;color:#542F82;font-family:inherit;font-weight:800;font-size:12.5px;line-height:1;vertical-align:middle;cursor:pointer}
.sx-morelist{margin:0 0 14px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px #EEE6F3,0 18px 34px -28px rgba(70,20,60,.6);overflow:hidden}
.sx-mrow{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid #F1EBF5}.sx-mrow:first-child{border-top:0}
.sx-mt{flex:1;min-width:0}.sx-mt b{display:block;font-size:14.5px;color:#2B1B38}.sx-mt small{display:block;font-size:12px;color:#7A6B86;margin-top:2px}.sx-mt em{display:inline-block;margin-top:4px;font-style:normal;font-size:11.5px;font-weight:800;color:#8A5A00;background:#FFF4DE;border-radius:999px;padding:2px 8px}
.sx-ma{display:flex;gap:6px}.sx-ma a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;background:#F6F1FA;color:#542F82;font-weight:800;font-size:13px;text-decoration:none}.sx-ma a.tr{background:#6B3FA0;color:#fff}