* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root {
  --cream: #FDF0F4;
  --dark: #0F1F4B;
  --warm: #9B7D6A;
  --gold: #C9A96E;
  --border: #F0C8D8;
  --white: #ffffff;
  --green: #4A7C59;
  --wa: #25D366;
  --amber: #B8730A;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #F5D9E4;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.app {
  width: 100%;
  max-width: 430px;
  background: var(--cream);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.screen { display: none; flex-direction: column; flex: 1; }
.screen.active { display: flex; }

/* ── Welcome ── */
#screen-welcome {
  align-items: center;
  justify-content: space-between;
  padding: 0;
  text-align: center;
  background: var(--cream);
  position: relative;
  overflow: hidden;
}
.logo-the { font-size: 10px; letter-spacing: 6px; color: #B8927A; text-transform: uppercase; margin-bottom: 8px; }
.welcome-inner-top {
  padding: 80px 32px 0;
  position: relative;
  z-index: 1;
}
.welcome-inner-mid {
  padding: 32px 36px 0;
  position: relative;
  z-index: 1;
}
.welcome-inner-btm {
  padding: 40px 32px 60px;
  width: 100%;
  position: relative;
  z-index: 2;
}
.logo-the { font-size: 10px; letter-spacing: 6px; color: #B8927A; text-transform: uppercase; margin-bottom: 8px; }
.logo-title { font-family: Georgia, serif; font-size: 34px; font-weight: normal; letter-spacing: 6px; color: var(--dark); text-transform: uppercase; line-height: 1.3; }
.logo-divider {
  width: 40px; height: 1px;
  background: linear-gradient(to right, transparent, #C9A96E, transparent);
  margin: 18px auto;
}
.logo-palm { display: none; }
.logo-tagline { font-size: 8px; letter-spacing: 7px; color: #B8927A; text-transform: uppercase; }
.welcome-desc { font-size: 14px; color: #5A6070; line-height: 1.85; max-width: 320px; margin: 0 auto; }
.btn-welcome-join {
  width: 100%; padding: 17px;
  background: var(--dark);
  color: #fff;
  border: none;
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  cursor: pointer; font-family: inherit;
  margin-bottom: 14px;
  transition: opacity .2s;
}
.btn-welcome-join:active { opacity: .8; }
.btn-welcome-login {
  width: 100%; padding: 17px;
  background: transparent;
  color: var(--dark);
  border: 1px solid rgba(26,26,26,0.25);
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  cursor: pointer; font-family: inherit;
  transition: opacity .2s;
}
.btn-welcome-login:active { opacity: .7; }

/* ── Buttons ── */
.btn { width: 100%; padding: 16px; border: none; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; font-family: inherit; transition: opacity .2s; }
.btn:active { opacity: .75; }
.btn-dark { background: var(--dark); color: var(--white); margin-bottom: 12px; }
.btn-outline { background: transparent; color: var(--dark); border: 1px solid var(--dark); }
.btn-gold { background: var(--gold); color: var(--white); margin-bottom: 12px; }
.btn-wa { background: var(--wa); color: var(--white); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; letter-spacing: 1px; padding: 16px; border: none; cursor: pointer; width: 100%; font-family: inherit; }
.btn-wa:active { opacity: .8; }
.btn-skip { width: 100%; padding: 14px; background: none; border: none; font-size: 12px; color: #bbb; cursor: pointer; font-family: inherit; letter-spacing: 1px; }

/* ── Top Nav ── */
.top-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.nav-title { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--dark); }
.nav-back { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--dark); line-height: 1; padding: 2px 4px; }
.nav-icon { font-size: 20px; cursor: pointer; }

/* ── Bottom Nav ── */
.bottom-nav {
  display: flex; position: sticky; bottom: 0;
  background: var(--white); border-top: 1px solid var(--border); z-index: 20;
}
.bottom-nav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 0 12px; background: none; border: none; cursor: pointer;
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: #bbb; font-family: inherit;
}
.bottom-nav button.active { color: var(--dark); }
.nav-dot { font-size: 18px; }

/* ── Scroll content ── */
.scroll-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ── Forms ── */
.form-wrap { padding: 36px 28px 48px; }
.form-heading { font-family: Georgia, serif; font-size: 26px; font-weight: normal; color: var(--dark); margin-bottom: 32px; line-height: 1.3; }
.form-group { margin-bottom: 24px; }
.form-group > label { display: block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--warm); margin-bottom: 10px; }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group textarea,
.form-group select {
  width: 100%; padding: 12px 0;
  border: none; border-bottom: 1px solid var(--border);
  background: transparent; font-size: 15px; color: var(--dark);
  outline: none; font-family: inherit; appearance: none;
}
.form-group textarea { resize: none; height: 90px; }
.form-group input:focus, .form-group textarea:focus { border-bottom-color: var(--dark); }
.form-group select { cursor: pointer; }
.field-hint { font-size: 11px; color: #aaa; margin-top: 6px; }
.form-link { text-align: center; margin-top: 24px; font-size: 13px; color: #999; }
.form-link span { color: var(--dark); cursor: pointer; text-decoration: underline; }
.err { color: #c0392b; font-size: 12px; margin-top: 8px; display: none; }
.err.show { display: block; }

/* WhatsApp prefix row */
.wa-row { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.wa-prefix { font-size: 15px; color: var(--warm); padding: 12px 10px 12px 0; white-space: nowrap; flex-shrink: 0; }
.wa-row input { border: none; flex: 1; padding: 12px 0; font-size: 15px; color: var(--dark); background: transparent; outline: none; font-family: inherit; }

/* Gender checkbox */
.check-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.check-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--dark); flex-shrink: 0; cursor: pointer; }
.check-label { font-size: 14px; color: var(--dark); line-height: 1.5; cursor: pointer; }
.id-note { display: flex; align-items: flex-start; gap: 8px; background: #FAE0EA; border-left: 3px solid var(--gold); padding: 10px 14px; margin-bottom: 24px; font-size: 12px; color: var(--warm); line-height: 1.5; }

/* ── Browse ── */
.browse-header { padding: 22px 20px 0; }
.browse-header h2 { font-family: Georgia, serif; font-size: 22px; font-weight: normal; color: var(--dark); margin-bottom: 3px; }
.browse-header p { font-size: 13px; color: #aaa; margin-bottom: 16px; }
.filters { display: flex; gap: 8px; overflow-x: auto; padding: 0 20px 16px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.chip { padding: 7px 16px; border-radius: 20px; border: 1px solid var(--border); background: var(--white); font-size: 12px; color: #888; cursor: pointer; white-space: nowrap; font-family: inherit; }
.chip.active { background: var(--dark); color: var(--white); border-color: var(--dark); }
.rooms-list { padding: 0 20px 100px; }

/* ── Room Card ── */
.room-card { background: var(--white); border: 1px solid var(--border); margin-bottom: 16px; cursor: pointer; overflow: hidden; transition: transform .15s; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.room-card:active { transform: scale(.98); }
.card-img { width: 100%; height: 220px; background: linear-gradient(135deg,#F5C6D8,#E8A8C0); display: flex; align-items: center; justify-content: center; font-size: 44px; position: relative; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; top:0; left:0; }
.card-img-gradient { position: absolute; bottom:0; left:0; right:0; height:60%; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 100%); pointer-events:none; }
.card-overlay { position: absolute; bottom:0; left:0; right:0; padding: 14px 14px 12px; }
.card-overlay-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 4px; line-height: 1.3; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.card-overlay-loc { font-size: 12px; color: rgba(255,255,255,.85); letter-spacing: .3px; }
.card-overlay-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.card-overlay-count { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.45); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 20px; letter-spacing: .5px; }
.card-available { background: var(--green); color: var(--white); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 9px; }
.card-verified-badge { background: var(--gold); color: var(--white); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 4px 8px; display: flex; align-items: center; gap: 4px; }
.card-body { padding: 12px 14px 4px; }
.card-title { font-size: 15px; font-weight: 600; color: var(--dark); margin-bottom: 4px; }
.card-loc { font-size: 13px; color: var(--warm); margin-bottom: 8px; }
.card-desc { font-size: 13px; color: #777; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--border); }
.poster { display: flex; align-items: center; gap: 8px; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--cream); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.poster-name { font-size: 12px; color: #888; }
.avail-date { font-size: 11px; color: var(--warm); }

/* ── Empty State ── */
.empty { text-align: center; padding: 70px 30px; }
.empty-icon { font-size: 48px; margin-bottom: 16px; }
.empty h3 { font-family: Georgia, serif; font-size: 18px; font-weight: normal; color: var(--dark); margin-bottom: 8px; }
.empty p { font-size: 14px; color: #aaa; line-height: 1.6; }

/* ── Room Detail ── */
.detail-img { width: 100%; height: 250px; background: linear-gradient(135deg,#F5C6D8,#E8A8C0); display: flex; align-items: center; justify-content: center; font-size: 64px; overflow: hidden; position: relative; }
.detail-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; top:0; left:0; }

/* ── Carousel ── */
.carousel-wrap { width:100%; height:250px; position:relative; overflow:hidden; background:linear-gradient(135deg,#F5C6D8,#E8A8C0); touch-action:pan-y; }
@media (hover: none) and (pointer: coarse) { .carousel-arrow { display:none !important; } }
.carousel-track { display:flex; height:100%; transition:transform .3s ease; will-change:transform; }
.carousel-slide { min-width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:64px; flex-shrink:0; position:relative; overflow:hidden; }
.carousel-slide img { width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; }
.carousel-dots { position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:6px; pointer-events:none; }
.carousel-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.5); transition:background .2s; }
.carousel-dot.active { background:#fff; }
.carousel-arrow { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.35); color:#fff; border:none; border-radius:50%; width:36px; height:36px; font-size:22px; line-height:1; cursor:pointer; z-index:10; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.carousel-arrow:hover { background:rgba(0,0,0,0.6); }
.carousel-arrow-left { left:10px; }
.carousel-arrow-right { right:10px; }

/* ── Additional image uploads ── */
.extra-imgs-label { font-size:12px; color:#888; margin:12px 0 8px; }
.extra-imgs-row { display:flex; gap:8px; }
.extra-upload-box { flex:1; aspect-ratio:1; border:1.5px dashed var(--border); border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; position:relative; overflow:hidden; background:#fafafa; }
.extra-upload-box input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.extra-upload-box img { width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; border-radius:8px; }
.extra-upload-box .ex-icon { font-size:20px; color:#ccc; }
.extra-upload-box .ex-label { font-size:10px; color:#bbb; margin-top:2px; }
.detail-body { padding: 24px 20px 130px; }
.avail-tag { display: inline-block; background: var(--green); color: var(--white); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 12px; margin-bottom: 10px; }
.id-verified-tag { display: inline-block; background: var(--gold); color: var(--white); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 5px 10px; margin-bottom: 16px; margin-left: 6px; }
.detail-title { font-family: Georgia, serif; font-size: 22px; font-weight: normal; color: var(--dark); margin-bottom: 6px; }
.detail-loc { font-size: 14px; color: var(--warm); margin-bottom: 24px; }
.detail-section { margin-bottom: 22px; }
.detail-section h4 { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--warm); margin-bottom: 8px; }
.detail-section p { font-size: 14px; color: #555; line-height: 1.7; }
.contact-bar { position: sticky; bottom: 0; background: var(--white); border-top: 1px solid var(--border); padding: 16px 20px 20px; }
.btn-end-listing { flex-shrink: 0; margin-left: 12px; background: none; border: 1px solid var(--border); color: var(--dark); font-family: inherit; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.btn-end-listing:hover { border-color: var(--dark); }
.my-room-card.is-ended { opacity: .6; }
.my-room-ended { flex-shrink: 0; margin-left: 12px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #999; white-space: nowrap; padding: 8px 0; }
.wa-nudge { align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 12px 14px; background: var(--white); border: 1px solid var(--border); }
.wa-nudge p { margin: 0; font-size: 13px; color: #555; line-height: 1.55; text-align: left; }
.wa-nudge-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wa-nudge-link { color: var(--dark); font-weight: 600; cursor: pointer; text-decoration: underline; white-space: nowrap; }
.wa-limit-msg { font-size: 13px; color: #8a5a00; background: #FFF6E0; border: 1px solid #F0DDA8; padding: 10px 12px; text-align: center; line-height: 1.5; margin: 0 0 4px; }
.contact-note { font-size: 11px; color: #bbb; text-align: center; margin-top: 10px; letter-spacing: .3px; line-height: 1.5; }

/* ── Posting Gate ── */
.fee-card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 28px 24px;
  margin-bottom: 28px;
  text-align: center;
}
.fee-status-free {
  display: inline-block;
  background: #EAF4ED;
  color: var(--green);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 16px;
  margin-bottom: 16px;
}
.fee-status-paid {
  display: inline-block;
  background: var(--dark);
  color: var(--white);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 16px;
  margin-bottom: 16px;
}
.fee-amount-display {
  font-family: Georgia, serif;
  font-size: 42px;
  color: var(--dark);
  margin-bottom: 6px;
}
.fee-currency { font-size: 18px; vertical-align: super; }
.fee-desc { font-size: 13px; color: #888; line-height: 1.6; }
.fee-coming { font-size: 11px; color: #bbb; margin-top: 12px; line-height: 1.5; }
.payment-info {
  background: #FAE0EA;
  border-left: 3px solid var(--gold);
  padding: 12px 16px;
  font-size: 12px;
  color: var(--warm);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* ── Post a Room ── */
.upload-box { border: 2px dashed var(--border); padding: 28px 20px; text-align: center; cursor: pointer; background: #FAF7F4; transition: border-color .2s; position: relative; }
.upload-box:hover { border-color: var(--warm); }
.upload-box.has-img { border-style: solid; border-color: var(--green); }
.upload-box input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.upload-icon { font-size: 32px; margin-bottom: 8px; }
.upload-text { font-size: 13px; color: #aaa; line-height: 1.5; }
.upload-preview { width: 100%; height: 180px; object-fit: cover; display: none; border: 1px solid var(--border); margin-top: 10px; }

/* ── Verification Screen ── */
.verify-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 32px; }
.v-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.v-step-circle { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; color: #ccc; font-weight: 600; background: var(--white); }
.v-step-circle.active { border-color: var(--dark); color: var(--dark); }
.v-step-circle.done { border-color: var(--green); background: var(--green); color: var(--white); }
.v-step-label { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: #ccc; }
.v-step-label.active { color: var(--dark); }
.v-step-label.done { color: var(--green); }
.v-line { width: 40px; height: 1px; background: var(--border); margin: 0 4px; margin-bottom: 18px; flex-shrink: 0; }
.v-line.done { background: var(--green); }

.id-upload-box {
  border: 2px dashed var(--border);
  border-radius: 2px;
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  background: #FAF7F4;
  transition: border-color .2s;
  position: relative;
  margin-bottom: 16px;
}
.id-upload-box:hover { border-color: var(--warm); }
.id-upload-box.has-img { border-style: solid; border-color: var(--green); }
.id-upload-box input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.id-preview { width: 100%; height: 160px; object-fit: cover; display: none; margin-top: 10px; border: 1px solid var(--border); }
.selfie-preview { width: 140px; height: 175px; object-fit: cover; display: none; margin: 10px auto 0; border: 1px solid var(--border); border-radius: 2px; }

.verify-tip {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 12px;
  color: #777;
  line-height: 1.7;
}
.verify-tip strong { color: var(--dark); font-weight: 600; }

.privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #FAE0EA;
  border-left: 3px solid var(--gold);
  padding: 12px 14px;
  font-size: 11px;
  color: var(--warm);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* ── Profile ── */
.profile-hero { background: var(--white); padding: 40px 20px 28px; text-align: center; border-bottom: 1px solid var(--border); }
.profile-av { width: 72px; height: 72px; border-radius: 50%; background: var(--cream); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 14px; }
.profile-name { font-family: Georgia, serif; font-size: 20px; font-weight: normal; color: var(--dark); margin-bottom: 4px; }
.profile-email { font-size: 13px; color: #aaa; margin-bottom: 8px; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 4px 12px; border-radius: 12px; letter-spacing: .5px; margin: 3px; }
.badge-green  { background: #EAF4ED; color: var(--green); }
.badge-gold   { background: #FBF3E4; color: var(--amber); border: 1px solid #F0DAAB; }
.badge-amber  { background: #FFF8EC; color: var(--amber); }
.badge-gray   { background: #F4F4F4; color: #aaa; }
.profile-body { padding: 24px 20px 80px; }
.section-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--warm); margin-bottom: 16px; }
.my-room-card { background: var(--white); border: 1px solid var(--border); padding: 14px 16px; margin-bottom: 10px; display: flex; gap: 12px; align-items: center; }
.my-room-thumb { width: 50px; height: 50px; background: linear-gradient(135deg,#F5C6D8,#E8A8C0); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 20px; overflow: hidden; flex-shrink: 0; }
.my-room-thumb img { width: 100%; height: 100%; object-fit: cover; }
.my-room-title { font-size: 14px; font-weight: 600; color: var(--dark); margin-bottom: 3px; }
.my-room-meta { font-size: 12px; color: var(--warm); }
.logout-btn { width: 100%; margin-top: 24px; padding: 14px; background: none; border: 1px solid var(--border); color: #aaa; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; font-family: inherit; }

.verify-cta { background: var(--white); border: 1px solid var(--gold); padding: 20px; margin-bottom: 24px; }
.verify-cta h4 { font-size: 13px; font-weight: 600; color: var(--dark); margin-bottom: 6px; }
.verify-cta p { font-size: 12px; color: #888; line-height: 1.6; margin-bottom: 14px; }

.pending-card { background: #FFF8EC; border: 1px solid #F0DAAB; padding: 16px; margin-bottom: 24px; display: flex; align-items: flex-start; gap: 12px; }
.pending-card .icon { font-size: 22px; flex-shrink: 0; }
.pending-card h4 { font-size: 13px; font-weight: 600; color: var(--amber); margin-bottom: 4px; }
.pending-card p { font-size: 12px; color: #888; line-height: 1.5; }

.approved-card { background: #EAF4ED; border: 1px solid #B8D9C5; padding: 16px; margin-bottom: 24px; display: flex; align-items: flex-start; gap: 12px; }
.approved-card .icon { font-size: 22px; flex-shrink: 0; }
.approved-card h4 { font-size: 13px; font-weight: 600; color: var(--green); margin-bottom: 4px; }
.approved-card p { font-size: 12px; color: #666; line-height: 1.5; }

/* ── Toast ── */
.toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: var(--dark); color: var(--white); padding: 12px 22px; font-size: 13px; z-index: 999; opacity: 0; pointer-events: none; transition: opacity .3s; max-width: 340px; text-align: center; }
.toast.show { opacity: 1; }
/* ════════════════════════════════
   LANDING PAGE
════════════════════════════════ */
/* Header */
.lp-header { display:flex; align-items:center; justify-content:space-between; padding:0 12px; height:54px; background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; gap:6px; }
.lp-logo { display:flex; align-items:center; gap:6px; cursor:pointer; flex-shrink:1; min-width:0; }
.lp-nav { display:none; gap:4px; }
.lp-nav button { background:none; border:none; font-size:13px; color:#555; cursor:pointer; padding:8px 12px; font-family:inherit; border-radius:4px; transition:color .15s; }
.lp-nav button:hover { color:var(--dark); }
.lp-header-actions { display:none; gap:8px; }
.lp-header-mobile { display:flex; gap:5px; flex-shrink:0; }
.lp-logo-text { display:block; min-width:0; overflow:hidden; }
.lp-logo img { height:24px; flex-shrink:0; }
.lp-logo-img { height:24px; width:auto; display:block; flex-shrink:0; }
.lp-logo-name { font-family:Georgia,serif; font-size:11px; letter-spacing:1px; color:var(--dark); text-transform:uppercase; line-height:1; white-space:nowrap; }
.lp-logo-tag { font-size:8px; letter-spacing:1px; color:var(--warm); text-transform:uppercase; margin-top:1px; white-space:nowrap; }
.lp-btn-login { padding:6px 10px; background:none; border:1px solid var(--border); color:var(--dark); font-size:12px; cursor:pointer; font-family:inherit; border-radius:4px; white-space:nowrap; }
.lp-btn-join { padding:6px 10px; background:#c0507a; border:none; color:#fff; font-size:12px; cursor:pointer; font-family:inherit; border-radius:4px; font-weight:600; white-space:nowrap; }

/* Hero */
.lp-hero { display:flex; flex-direction:column; background:var(--cream); position:relative; }
.lp-hero-text { padding:48px 24px 40px; text-align:center; }
.lp-hero-img { display:none; }
.lp-badge { display:inline-block; font-size:11px; letter-spacing:1px; color:#c0507a; background:#fde8ef; padding:5px 12px; border-radius:20px; margin-bottom:20px; }
.lp-h1 { font-family:Georgia,serif; font-size:36px; font-weight:normal; color:var(--dark); line-height:1.25; margin-bottom:16px; }
.lp-h1-pink { color:#c0507a; }
.lp-hero-desc { font-size:15px; color:#5a6070; line-height:1.7; margin-bottom:28px; }
.lp-hero-btns { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; justify-content:center; }
.lp-cta-primary { padding:14px 24px; background:#c0507a; color:#fff; border:none; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; border-radius:6px; }
.lp-cta-outline { padding:14px 24px; background:none; color:var(--dark); border:2px solid var(--dark); font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; border-radius:6px; }
.lp-trust-row { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:12px; color:var(--warm); justify-content:center; }




/* Sections */
.lp-section { padding:48px 24px; max-width:100%; }
.lp-section-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.lp-section-title { font-family:Georgia,serif; font-size:24px; font-weight:normal; color:var(--dark); text-align:left; }
.lp-view-all { background:none; border:none; color:#c0507a; font-size:13px; cursor:pointer; font-family:inherit; font-weight:600; }

/* Areas */
.lp-areas-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.lp-area-card { border-radius:10px; height:120px; display:flex; align-items:flex-end; padding:10px 12px; cursor:pointer; transition:transform .15s; position:relative; overflow:hidden; background-color:#222; }
.lp-area-card:active { transform:scale(.97); }
.lp-area-card::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.1) 50%, transparent 100%); border-radius:10px; pointer-events:none; }
.lp-area-card span { font-size:12px; font-weight:700; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.8), 0 0 20px rgba(0,0,0,.5); position:relative; z-index:1; }

/* Why us */
.lp-why { display:flex; flex-direction:column; gap:28px; background:var(--cream); }
.lp-why-left h2 { font-family:Georgia,serif; font-size:26px; font-weight:normal; color:var(--dark); line-height:1.4; }
.lp-why-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.lp-why-card { background:#fff; padding:20px 16px; border-radius:8px; border:1px solid var(--border); }
.lp-why-icon { font-size:24px; margin-bottom:10px; }
.lp-why-card h4 { font-size:14px; font-weight:700; color:var(--dark); margin-bottom:6px; }
.lp-why-card p { font-size:12px; color:#777; line-height:1.6; }

/* How it works */
.lp-steps { display:flex; flex-direction:column; gap:20px; align-items:center; }
.lp-step { background:var(--cream); border-radius:10px; padding:24px 20px; text-align:center; max-width:240px; position:relative; }
.lp-step-num { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:#c0507a; color:#fff; width:24px; height:24px; border-radius:50%; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.lp-step-icon { font-size:32px; margin-bottom:12px; }
.lp-step h4 { font-size:14px; font-weight:700; color:var(--dark); margin-bottom:6px; }
.lp-step p { font-size:12px; color:#777; line-height:1.6; }
.lp-step-arrow { font-size:24px; color:#ddd; transform:rotate(90deg); }

/* Latest rooms */
.lp-rooms-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.lp-room-card { background:#fff; border-radius:10px; overflow:hidden; border:1px solid var(--border); cursor:pointer; transition:transform .15s; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.lp-room-card:active { transform:scale(.98); }
.lp-room-card-img { height:140px; background:linear-gradient(135deg,#f5c6d8,#e8a8c0); position:relative; overflow:hidden; }
.lp-room-card-img img { width:100%; height:100%; object-fit:cover; }
.lp-room-card-body { padding:12px 14px; }
.lp-room-card-area { display:inline-block; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#fff; background:#c0507a; padding:3px 8px; border-radius:3px; margin-bottom:8px; }
.lp-room-card-title { font-size:13px; font-weight:700; color:var(--dark); margin-bottom:4px; line-height:1.3; }
.lp-room-card-meta { font-size:11px; color:#aaa; }

/* CTA Banner */
.lp-cta-banner { background:linear-gradient(135deg,#c0507a,#e8789a); padding:40px 24px; display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.lp-cta-banner-text h3 { font-family:Georgia,serif; font-size:24px; font-weight:normal; color:#fff; margin-bottom:8px; }
.lp-cta-banner-text p { font-size:13px; color:rgba(255,255,255,.8); line-height:1.6; }
.lp-cta-banner-btn { padding:14px 28px; background:#fff; color:#c0507a; border:none; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; border-radius:6px; }

/* Trust strip */
.lp-trust-strip { background:var(--cream); padding:20px 24px; display:flex; flex-wrap:wrap; gap:16px 24px; justify-content:center; border-top:1px solid var(--border); }
.lp-trust-item { display:flex; align-items:center; gap:6px; font-size:11px; color:#888; }

/* Footer */
.lp-footer { background:var(--cream); padding:40px 24px 24px; border-top:1px solid var(--border); }
.lp-footer-brand { margin-bottom:28px; text-align:center; }
.lp-footer-cols { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:0 auto 28px; max-width:400px; }
.lp-footer-col-title { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--warm); margin-bottom:12px; text-align:center; }
.lp-footer-col button { display:block; background:none; border:none; font-size:13px; color:#666; cursor:pointer; font-family:inherit; padding:3px 0; text-align:center; width:100%; }
.lp-footer-bottom { display:flex; justify-content:space-between; font-size:11px; color:#bbb; flex-wrap:wrap; gap:8px; padding-top:20px; border-top:1px solid var(--border); }

/* ════════════════════════════════
   DESKTOP LAYOUT  (≥ 768px)
════════════════════════════════ */
@media (min-width: 768px) {
  body { background: #F5D9E4; align-items: flex-start; }

  /* Landing page: break out of .app entirely, cover full viewport */
  #screen-welcome.active {
    position: fixed;
    inset: 0;
    z-index: 200;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--cream);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .app {
    max-width: 1060px;
    flex-direction: row;
    align-items: stretch;
    margin: 0 auto;
    min-height: 100vh;
    box-shadow: 0 0 60px rgba(0,0,0,.08);
  }

  /* Sidebar */
  #desktop-sidebar {
    display: flex;
    flex-direction: column;
    width: 240px;
    flex-shrink: 0;
    background: var(--dark);
    min-height: 100vh;
    position: sticky;
    top: 0;
    padding: 36px 24px 40px;
    box-sizing: border-box;
  }
  .ds-brand { text-align: center; margin-bottom: 36px; }
  .ds-brand-sub { font-size: 9px; letter-spacing: 5px; color: var(--gold); text-transform: uppercase; margin-bottom: 6px; }
  .ds-brand-name { font-family: Georgia, serif; font-size: 26px; color: #fff; letter-spacing: 4px; text-transform: uppercase; line-height: 1.3; }
  .ds-brand-divider { width: 32px; height: 1px; background: var(--gold); margin: 14px auto; }
  .ds-brand-tag { font-size: 9px; letter-spacing: 3px; color: rgba(255,255,255,.4); text-transform: uppercase; }
  .ds-nav { margin-bottom: 32px; }
  .ds-nav-btn {
    display: block; width: 100%;
    padding: 11px 14px; margin-bottom: 4px;
    background: none; border: none; border-radius: 6px;
    color: rgba(255,255,255,.65); font-size: 13px;
    text-align: left; cursor: pointer; font-family: inherit;
    letter-spacing: .3px; transition: background .15s, color .15s;
  }
  .ds-nav-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
  .ds-nav-btn.active { background: rgba(255,255,255,.12); color: #fff; }
  .ds-section-label { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 10px; }
  .ds-chips { display: flex; flex-direction: column; gap: 2px; }
  .ds-chip {
    display: block; width: 100%;
    padding: 8px 12px; background: none; border: none; border-radius: 4px;
    color: rgba(255,255,255,.55); font-size: 12px;
    text-align: left; cursor: pointer; font-family: inherit;
    transition: background .15s, color .15s;
  }
  .ds-chip:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
  .ds-chip.active { background: rgba(201,169,110,.18); color: var(--gold); }
  .ds-footer { margin-top: auto; font-size: 10px; color: rgba(255,255,255,.25); letter-spacing: 1px; line-height: 1.7; }

  /* Main content area */
  #main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    min-height: 100vh;
    background: var(--cream);
  }

  /* Screens fill main content but stay centred — landing page excluded */
  #main-content .screen:not(#screen-welcome) {
    width: 100%;
    max-width: 820px;
  }

  /* Hide mobile-only elements */
  .bottom-nav { display: none !important; }
  .top-nav { display: none !important; }

  .screen { min-height: 100vh; }
  .scroll-content { height: 100vh; overflow-y: auto; }

  /* Browse: 2-column grid */
  .rooms-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 24px 28px 48px;
  }
  .room-card { margin-bottom: 0; }

  /* Browse header */
  .browse-header { padding: 28px 28px 0; }

  /* Filters hidden on desktop (sidebar has them) */
  .filters { display: none; }

  /* Forms centred */
  .form-wrap { max-width: 480px; margin: 0 auto; padding: 48px 32px; }
  .form-heading { font-size: 30px; }

  /* Landing page desktop overrides */
  .lp-nav { display: flex; }
  .lp-logo-text { display: block; }
  .lp-logo img { height: 40px; }
  .lp-header-actions { display: flex; }
  .lp-header-mobile { display: none; }
  /* ── Shared content gutter: every band is full-width, content aligns to one column ── */
  #screen-welcome {
    --gutter: max(48px, (100% - 1280px) / 2);
  }

  /* ── Hero: two-column layout (works because screen-welcome is fixed 100vw) ── */
  .lp-hero {
    flex-direction: row;
    flex: 0 0 auto;
    background: var(--cream);
  }
  .lp-hero-text {
    flex: 0 0 52%;
    padding: 88px 56px 88px var(--gutter);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 580px;
  }
  .lp-hero-text > * { max-width: 560px; }
  .lp-badge { align-self: flex-start; }
  .lp-hero-img {
    display: block;
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 560px;
  }
  .lp-hero-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  .lp-h1 { font-size: 52px; line-height: 1.1; }
  .lp-hero-desc { font-size: 16px; line-height: 1.8; }
  .lp-badge { font-size: 12px; padding: 7px 16px; margin-bottom: 24px; }
  .lp-hero-btns { justify-content: flex-start; }
  .lp-trust-row { font-size: 13px; gap: 10px 24px; margin-top: 4px; justify-content: flex-start; }
  .lp-cta-primary, .lp-cta-outline { padding: 15px 28px; font-size: 14px; }

  /* ── Sections: full-width band, content on the shared gutter ── */
  #screen-welcome .lp-section {
    max-width: none;
    margin: 0;
    padding: 88px var(--gutter);
  }
  .lp-section-title { font-size: 32px; }
  .lp-section-head { margin-bottom: 32px; }

  /* ── Area cards ── */
  .lp-areas-grid { grid-template-columns: repeat(6,1fr); gap: 18px; }
  .lp-area-card { height: 200px; border-radius: 12px; padding: 14px 16px; }
  .lp-area-card span { font-size: 14px; }

  /* ── Why us ── */
  .lp-why { flex-direction: row; align-items: flex-start; gap: 48px; }
  .lp-why-left { flex-shrink: 0; max-width: 280px; }
  .lp-why-left h2 { font-size: 34px; }
  .lp-why-grid { grid-template-columns: repeat(4,1fr); flex: 1; }
  .lp-why-card { padding: 24px 20px; }
  .lp-why-card h4 { font-size: 15px; }
  .lp-why-card p { font-size: 13px; }

  /* ── How it works ── */
  #lp-how .lp-section-title { text-align: center; }
  .lp-steps { flex-direction: row; align-items: center; justify-content: center; gap: 32px; }
  .lp-step { max-width: 280px; padding: 32px 24px; }
  .lp-step h4 { font-size: 16px; }
  .lp-step p { font-size: 13px; }
  .lp-step-arrow { transform: none; }

  /* ── Latest rooms ── */
  .lp-rooms-grid { grid-template-columns: repeat(4,1fr); gap: 20px; }
  .lp-room-card-img { height: 180px; }
  .lp-room-card-title { font-size: 14px; }

  /* ── CTA banner ── */
  .lp-cta-banner { flex-direction: row; justify-content: space-between; align-items: center; padding: 72px var(--gutter); border-radius: 0; gap: 40px; }
  .lp-cta-banner-text h3 { font-size: 32px; }
  .lp-cta-banner-btn { padding: 16px 36px; font-size: 15px; flex-shrink: 0; }

  /* ── Trust strip ── */
  .lp-trust-strip { padding: 28px var(--gutter); gap: 16px 48px; }

  /* ── Footer ── */
  .lp-footer {
    padding: 64px var(--gutter) 32px;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 64px;
    row-gap: 40px;
  }
  .lp-footer-brand { grid-column: 1; text-align: left; margin-bottom: 0; }
  .lp-footer-cols { grid-column: 2; max-width: none; grid-template-columns: repeat(2, minmax(0,150px)); gap: 48px; margin: 0; }
  .lp-footer-bottom { grid-column: 1 / -1; }
  .lp-footer-col-title, .lp-footer-col button { text-align: left; }

  /* ── Header: taller, larger logo and nav ── */
  #screen-welcome .lp-header {
    position: sticky;
    top: 0;
    padding: 0 var(--gutter);
    height: 88px;
    gap: 32px;
  }
  .lp-logo { gap: 12px; }
  .lp-logo-img { height: 48px; }
  .lp-logo-name { font-size: 17px; letter-spacing: 2.5px; }
  .lp-logo-tag { font-size: 9.5px; letter-spacing: 2.5px; margin-top: 3px; }
  .lp-nav { gap: 8px; }
  .lp-nav button { font-size: 15px; padding: 10px 16px; }
  .lp-header-actions { gap: 12px; }
  .lp-btn-login { padding: 11px 22px; font-size: 14px; }
  .lp-btn-join { padding: 11px 22px; font-size: 14px; }

  /* Room detail */
  .scroll-content .detail-img,
  .scroll-content .carousel-wrap { height: 360px; }

  /* Profile */
  .profile-body { max-width: 600px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
}

/* Mobile: hide desktop sidebar */
@media (max-width: 767px) {
  #desktop-sidebar { display: none; }
  #main-content { display: contents; }
}

/* ── Admin ─────────────────────────────── */
.admin-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.admin-tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 16px; font-family: inherit; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--warm); cursor: pointer; }
.admin-tab.active { color: var(--dark); border-bottom-color: var(--dark); }
.admin-toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
.admin-search { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); background: var(--white); font-family: inherit; font-size: 14px; color: var(--dark); }
.admin-search:focus { outline: none; border-color: var(--dark); }
.admin-refresh { width: 42px; flex-shrink: 0; border: 1px solid var(--border); background: var(--white); color: var(--dark); font-size: 18px; cursor: pointer; }
.admin-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.admin-filter { border: 1px solid var(--border); background: var(--white); color: var(--dark); font-family: inherit; font-size: 12px; padding: 6px 10px; cursor: pointer; }
.admin-filter span { color: var(--warm); margin-left: 2px; }
.admin-filter.active { background: var(--dark); border-color: var(--dark); color: var(--white); }
.admin-filter.active span { color: #c9cfe0; }
.admin-empty { color: #aaa; font-size: 13px; padding: 20px 0; text-align: center; }
.admin-user { background: var(--white); border: 1px solid var(--border); padding: 14px 16px; margin-bottom: 10px; }
.admin-user.is-suspended { background: #FBF6F6; }
.admin-user-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.admin-user-id { min-width: 0; }
.admin-user-name { font-size: 15px; font-weight: 600; color: var(--dark); }
.admin-user-email { font-size: 12px; color: #777; margin-top: 2px; overflow-wrap: anywhere; }
.admin-action { flex-shrink: 0; background: none; border: 1px solid var(--border); color: var(--dark); font-family: inherit; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 7px 10px; cursor: pointer; }
.admin-action:hover { border-color: var(--dark); }
.admin-action.danger { color: #b03a2e; border-color: #ecc4bf; }
.admin-action.danger:hover { border-color: #b03a2e; }
.admin-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 12px; }
.ubadge { font-size: 11px; padding: 3px 8px; border: 1px solid; line-height: 1.3; }
.ubadge.ok    { color: var(--green); border-color: #bcd6c3; background: #F1F7F2; }
.ubadge.warn  { color: var(--amber); border-color: #F0DDA8; background: #FFF8E8; }
.ubadge.bad   { color: #b03a2e; border-color: #ecc4bf; background: #FCF1EF; }
.ubadge.muted { color: #888; border-color: #e3e3e3; background: #fafafa; }
.ubadge.admin { color: var(--white); border-color: var(--dark); background: var(--dark); }
.ubadge.live  { color: #1d7a45; border-color: #bfe3cc; background: #EEF9F2; }
.admin-user-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px 14px; margin: 0; }
.admin-user-stats dt { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--warm); }
.admin-user-stats dd { margin: 2px 0 0; font-size: 13px; color: var(--dark); }
.admin-suspend-note { margin: 12px 0 0; font-size: 12px; color: #b03a2e; line-height: 1.5; }
.stage-steps { list-style: none; display: flex; margin: 0 0 14px; padding: 0; }
.stage-step { flex: 1; min-width: 0; position: relative; text-align: center; font-size: 10px; color: #aaa; }
.stage-step::before { content: ''; position: absolute; top: 5px; left: -50%; width: 100%; height: 2px; background: #e8e2e4; }
.stage-step:first-child::before { display: none; }
.stage-dot { position: relative; z-index: 1; display: block; width: 12px; height: 12px; margin: 0 auto 5px; border-radius: 50%; background: var(--white); border: 2px solid #ddd; }
.stage-label { display: block; letter-spacing: .5px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-when { display: block; margin-top: 1px; color: #999; font-size: 10px; }
.stage-step.done { color: var(--dark); }
.stage-step.done .stage-dot { background: var(--green); border-color: var(--green); }
.stage-step.done::before { background: var(--green); }
.stage-step.fail { color: #b03a2e; }
.stage-step.fail .stage-dot { background: #b03a2e; border-color: #b03a2e; }