:root {
  --green: #1a7a3c;
  --green-dark: #08632e;
  --gold: #d4a017;
  --red: #be0027;
  --bg: #f5f5f5;
  --text: #111827;
  --muted: #64748b;
  --line: #e0e0e0;
  --shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
  font-family: Inter, Arial, sans-serif;
  color: var(--text);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 8%, rgba(212, 160, 23, .18), transparent 30%),
    radial-gradient(circle at 84% 14%, rgba(26, 122, 60, .16), transparent 34%),
    linear-gradient(180deg, #f9fbfa, #e8efed);
}
button, input { font: inherit; }
button { cursor: pointer; border: 0; background: none; color: inherit; }
svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.app {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
}
.phone-screen {
  position: relative;
  width: min(390px, 100%);
  height: min(844px, calc(100vh - 44px));
  min-height: 720px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 31px;
  background: linear-gradient(180deg, #fff 0%, #fbfcfc 45%, #f6f8f8 100%);
  box-shadow: var(--shadow);
}
.screen-body {
  height: calc(100% - 132px);
  overflow: auto;
  padding: 0 20px 18px;
  scrollbar-width: none;
}
.home-screen .screen-body {
  height: calc(100% - 78px);
  padding-top: 26px;
}
.screen-body::-webkit-scrollbar { display: none; }
.topbar {
  height: 72px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 16px 16px 0;
}
.topbar > strong { text-align: center; font-size: 16px; }
.topbar-right { display: flex; justify-content: flex-end; }
.icon-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 15px;
}
.hamb { font-size: 24px; font-weight: 800; }

.splash {
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.96)),
    radial-gradient(circle at 50% 22%, rgba(212,160,23,.28), transparent 22%),
    linear-gradient(140deg, #eef8f2, #fff 48%, #f7f2e4);
}
.splash-mark {
  width: 78%;
  display: grid;
  justify-items: center;
  text-align: center;
  transform: translateY(-28px);
}
.brand-house {
  position: relative;
  width: 108px;
  height: 98px;
  margin-bottom: 20px;
  border-radius: 18px 18px 12px 12px;
  background: #111827;
  box-shadow: 0 18px 34px rgba(15, 23, 42, .14);
}
.brand-house::before,
.brand-house::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -22px;
  width: 92px;
  height: 18px;
  border-radius: 12px;
  background: var(--green);
  transform-origin: left center;
  transform: rotate(32deg);
}
.brand-house::after {
  background: var(--red);
  transform: rotate(148deg);
}
.brand-house span {
  position: absolute;
  bottom: 19px;
  width: 18px;
  height: 42px;
  border-radius: 12px 12px 4px 4px;
  background: #fff;
}
.brand-house span:nth-child(1) { left: 23px; }
.brand-house span:nth-child(2) { left: 45px; height: 56px; }
.brand-house span:nth-child(3) { right: 23px; }
.brand-house span:nth-child(2)::after {
  content: "";
  position: absolute;
  left: -28px;
  right: -28px;
  bottom: -13px;
  height: 13px;
  border-radius: 0 0 40px 40px;
  background: var(--gold);
}
.splash-mark h1 { font-size: 43px; line-height: .95; letter-spacing: 0; }
.splash-mark h2 { margin: 4px 0 24px; font-size: 28px; letter-spacing: 2px; }
.splash-mark p { max-width: 232px; font-size: 15px; line-height: 1.45; color: #334155; font-weight: 600; }
.cityline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 188px;
  background:
    linear-gradient(180deg, transparent 0 35%, rgba(26,122,60,.12) 35% 100%),
    linear-gradient(90deg, #0f172a 0 7%, transparent 7% 11%, #0f172a 11% 18%, transparent 18% 23%, #0f172a 23% 31%, transparent 31% 100%);
  opacity: .18;
}
.cityline i {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 142px;
  background: var(--green);
  border-radius: 99px;
}
.cityline i:nth-child(1) { left: 34px; height: 118px; }
.cityline i:nth-child(2) { left: 92px; }
.cityline i:nth-child(3) { right: 102px; height: 158px; background: var(--red); }
.cityline i:nth-child(4) { right: 38px; height: 126px; background: var(--gold); }
.splash-loader { position: absolute; bottom: 24px; width: 48px; height: 5px; border-radius: 99px; background: rgba(15,23,42,.12); }
.splash-loader span { display: block; width: 22px; height: 100%; border-radius: inherit; background: var(--green); animation: pulse 1.2s infinite alternate; }
@keyframes pulse { to { transform: translateX(26px); } }

.home-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 8px;
}
.home-head .icon-button { margin-left: -12px; }
h1, h2, h3, p { margin: 0; }
.home-head h1 { margin-top: 14px; font-size: 25px; letter-spacing: 0; }
.home-head p, .listing-content p, .detail-panel p { color: var(--muted); font-size: 12px; margin-top: 6px; }
.city-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin-top: 12px;
  padding: 0 12px;
  border-radius: 99px;
  background: #eef7f1;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
}
.city-pill span { color: var(--muted); font-weight: 800; }
.bell { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; }
.bell span, .nav-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  border-radius: 99px;
  background: #ff1e1e;
  color: #fff;
  font-size: 11px;
  display: grid;
  place-items: center;
  font-weight: 800;
}
.ai-banner {
  width: 100%;
  height: 150px;
  margin: 20px 0 19px;
  border-radius: 21px;
  color: #fff;
  background:
    radial-gradient(circle at 78% 30%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(190,0,39,.38) 0 18%, transparent 18% 100%),
    linear-gradient(135deg, rgba(26,122,60,.98), rgba(6,81,45,.9));
  overflow: hidden;
  position: relative;
  text-align: left;
  box-shadow: 0 14px 24px rgba(26, 122, 60, .18);
}
.ai-banner div { position: relative; z-index: 1; padding: 22px 0 0 20px; width: 61%; }
.ai-banner h2 { font-size: 21px; line-height: 1.05; }
.ai-banner p { color: rgba(255,255,255,.88); margin: 8px 0 12px; font-size: 13px; }
.ai-banner b { display: inline-flex; padding: 10px 14px; border-radius: 12px; background: #121827; font-size: 13px; }
.suitcase-ai {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 96px;
  height: 86px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 35% 43%, #111827 0 5px, transparent 6px),
    radial-gradient(circle at 65% 43%, #111827 0 5px, transparent 6px),
    linear-gradient(180deg, #facc15 0 52%, #f59e0b 52% 100%);
  box-shadow:
    inset 0 0 0 8px rgba(255,255,255,.9),
    0 20px 30px rgba(0,0,0,.18);
}
.suitcase-ai::before {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  top: -14px;
  height: 21px;
  border-radius: 18px 18px 0 0;
  border: 6px solid #fff;
  border-bottom: 0;
}
.suitcase-ai::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 19px;
  height: 10px;
  border: 4px solid #111827;
  border-top: 0;
  border-radius: 0 0 18px 18px;
}
.suitcase-ai i {
  position: absolute;
  right: -4px;
  top: 17px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: -76px 40px 0 #ef4444;
}
.section-title, .section-row h2 { font-size: 16px; margin: 0 0 12px; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quick-card {
  min-height: 116px;
  border-radius: 17px;
  padding: 16px 12px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(15,23,42,.08);
}
.quick-card:nth-child(1) { background: var(--green); color: #fff; }
.quick-card:nth-child(2) { background: #fff3d6; }
.quick-card:nth-child(3) { background: #ffdada; }
.quick-card:nth-child(4) { background: #f8fafc; }
.quick-card:nth-child(5) { background: #e8f5ee; }
.quick-card:nth-child(6) { background: #fff; }
.quick-card span { font-size: 34px; line-height: 1; }
.quick-card strong { font-size: 13px; }
.quick-card small { max-width: 112px; font-size: 10px; line-height: 1.25; }
.section-row { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; }
.section-row button { color: var(--green); font-weight: 700; font-size: 12px; }
.mini-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini-listing {
  height: 92px;
  border-radius: 13px;
  padding: 0 9px 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  text-align: left;
  overflow: hidden;
  box-shadow: inset 0 -48px 36px rgba(0,0,0,.42);
  position: relative;
}
.mini-listing::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 22px;
  bottom: 30px;
  height: 24px;
  border-radius: 8px 8px 4px 4px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 7px 0 rgba(17,24,39,.24);
}
.mini-listing span, .mini-listing b { position: relative; z-index: 1; }
.mini-listing span { font-size: 13px; font-weight: 800; }
.mini-listing b { font-size: 10px; }
.city-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.city-strip::-webkit-scrollbar { display: none; }
.city-strip button,
.city-picker-grid button,
.city-selector-row {
  display: grid;
  gap: 4px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.city-strip button {
  min-height: 70px;
  padding: 12px;
}
.city-strip button.active,
.city-picker-grid button.active {
  border-color: var(--green);
  background: #f0fdf4;
}
.city-strip b,
.city-picker-grid b,
.city-selector-row b { font-size: 13px; }
.city-strip span,
.city-picker-grid span,
.city-selector-row span,
.city-selector-row small { color: var(--muted); font-size: 11px; font-weight: 700; }
.city-selector-row {
  width: 100%;
  margin-bottom: 14px;
  padding: 13px 14px;
}
.fallback-banner {
  margin-bottom: 12px;
  padding: 11px 13px;
  border-radius: 13px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.searchbox {
  height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 0 14px;
  background: #fff;
}
.searchbox.small { height: 42px; margin-bottom: 8px; background: #f8fafc; }
.searchbox input { width: 100%; border: 0; outline: 0; font-size: 13px; background: transparent; }
.filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 16px 0; }
.filters button, .results-line button {
  border: 1px solid var(--line);
  border-radius: 13px;
  height: 38px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}
.results-line { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 13px; font-weight: 700; }
.results-line button { color: var(--green); padding: 0 13px; }
.listing-stack, .post-stack, .booking-stack { display: grid; gap: 14px; }
.listing-card {
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15,23,42,.1);
  text-align: left;
}
.listing-image {
  position: relative;
  height: 158px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent),
    linear-gradient(135deg, #f6d6a7, #92532b);
}
.listing-photo-trigger,
.detail-photo-trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  overflow: hidden;
}
.listing-photo-trigger img,
.detail-photo-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.listing-photo-trigger::after,
.detail-photo-trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(15, 23, 42, .22));
}
.room-sun { background: linear-gradient(135deg, #f9d999, #b76d38 58%, #5d3828); }
.room-leaf { background: linear-gradient(135deg, #d9eadc, #7faf83 54%, #2f6f4b); }
.room-city { background: linear-gradient(135deg, #dbeafe, #7c9bbf 54%, #374151); }
.room-scene {
  position: absolute;
  inset: 0;
}
.room-scene::before {
  content: "";
  position: absolute;
  left: 27px;
  right: 50px;
  bottom: 35px;
  height: 46px;
  border-radius: 12px 12px 5px 5px;
  background: #fff8ef;
  box-shadow: 0 10px 0 rgba(92, 54, 31, .65), 0 18px 28px rgba(0,0,0,.14);
}
.room-scene::after {
  content: "";
  position: absolute;
  right: 26px;
  top: 26px;
  width: 58px;
  height: 72px;
  border-radius: 99px 99px 10px 10px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 -20px rgba(255,255,255,.22);
}
.room-scene i:nth-child(1) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36px;
  background: rgba(17,24,39,.16);
}
.room-scene i:nth-child(2) {
  position: absolute;
  left: 44px;
  bottom: 86px;
  width: 56px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,.42);
  box-shadow: 74px 10px 0 rgba(255,255,255,.32);
}
.room-scene i:nth-child(3) {
  position: absolute;
  right: 45px;
  top: 12px;
  width: 5px;
  height: 80px;
  border-radius: 99px;
  background: rgba(17,24,39,.68);
}
.room-scene.large::before { left: 56px; right: 82px; bottom: 58px; height: 70px; border-radius: 18px 18px 8px 8px; }
.room-scene.large::after { right: 46px; top: 44px; width: 84px; height: 108px; }
.room-scene.large i:nth-child(1) { height: 62px; }
.room-scene.large i:nth-child(2) { left: 82px; bottom: 144px; transform: scale(1.4); transform-origin: left bottom; }
.room-scene.tiny::before { left: 12px; right: 18px; bottom: 20px; height: 25px; border-radius: 8px 8px 4px 4px; }
.room-scene.tiny::after { right: 10px; top: 12px; width: 28px; height: 38px; }
.room-scene.tiny i:nth-child(1) { height: 17px; }
.room-scene.tiny i:nth-child(2),
.room-scene.tiny i:nth-child(3) { display: none; }
.top-match {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ff1f1f;
  color: #fff;
  border-radius: 9px;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 800;
}
.save {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
}
.save svg { color: #6b7280; }
.save.saved svg { color: var(--red); fill: rgba(190,0,39,.16); }
.listing-content { padding: 13px 14px 14px; }
.price strong, .detail-panel .price strong { font-size: 21px; }
.listing-content h3 { font-size: 16px; margin-top: 7px; }
.chips { display: flex; gap: 7px; align-items: center; margin-top: 13px; }
.chips span, .chips b {
  padding: 6px 9px;
  border-radius: 99px;
  background: #f1f5f9;
  font-size: 10px;
}
.chips button {
  padding: 6px 9px;
  border-radius: 99px;
  background: #f1f5f9;
  font-size: 10px;
  font-weight: 800;
}
.chips b { margin-left: auto; background: #dcfce7; color: var(--green); }

.detail .screen-body { height: 100%; padding: 0; }
.detail .topbar, .detail .bottom-nav { display: none; }
.detail-hero {
  height: 310px;
  position: relative;
  overflow: hidden;
}
.detail-photo-trigger span {
  position: absolute;
  left: 18px;
  bottom: 20px;
  z-index: 1;
  padding: 7px 11px;
  border-radius: 99px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}
.floating.back, .hero-actions button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.92);
}
.floating.back { position: absolute; top: 18px; left: 16px; }
.hero-actions { position: absolute; top: 18px; right: 16px; display: flex; gap: 10px; }
.detail-hero span {
  position: absolute;
  left: 18px;
  bottom: 20px;
  padding: 7px 11px;
  border-radius: 99px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}
.detail-panel {
  margin-top: -22px;
  position: relative;
  z-index: 1;
  min-height: 388px;
  border-radius: 28px 28px 0 0;
  background: #fff;
  padding: 24px 20px 115px;
}
.detail-panel h1 { margin: 8px 0 0; font-size: 22px; }
.verified { display: inline-flex; margin-top: 12px; padding: 6px 9px; border-radius: 99px; background: #dcfce7; color: var(--green); font-size: 11px; font-weight: 800; }
.amenities { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 24px 0; padding-top: 18px; border-top: 1px solid var(--line); }
.amenities span { display: grid; justify-items: center; gap: 5px; font-size: 18px; }
.amenities b { font-size: 9px; text-align: center; }
.comm-route {
  display: grid;
  gap: 5px;
  margin: -4px 0 20px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f0fdf4;
  color: #14532d;
  font-size: 12px;
  line-height: 1.4;
}
.comm-route b { font-size: 13px; }
.detail-panel h2 { font-size: 15px; margin-bottom: 8px; }
.map { margin-top: 14px; height: 76px; border-radius: 16px; background: #e8f1ed; display: grid; place-items: center; color: var(--green); font-size: 12px; font-weight: 800; }
.cta-row {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px 18px 24px;
  background: linear-gradient(transparent, #fff 24%);
}
.primary, .secondary { height: 52px; border-radius: 14px; font-size: 13px; font-weight: 800; }
.primary { background: var(--green); color: #fff; }
.secondary { background: #fff; border: 1px solid var(--line); }
.mini-cta {
  width: 100%;
  height: 38px;
  margin-top: 10px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 900;
}

.chat-intro {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 2px 0 20px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.chat-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 18px;
  background: #dcfce7;
  font-size: 29px;
}
.chat-intro h2 { font-size: 17px; margin-bottom: 4px; }
.chat-intro p { color: var(--muted); font-size: 12px; line-height: 1.45; }
.chat { display: grid; gap: 14px; }
.bubble {
  max-width: 76%;
  padding: 14px 15px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.45;
}
.bubble.bot { background: #f5eadf; justify-self: start; }
.bubble.user { background: var(--green); color: #fff; justify-self: end; }
.action-chips { margin-top: 14px; display: grid; gap: 10px; }
.action-chips button {
  height: 45px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  text-align: left;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
}
.composer {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 92px;
  height: 56px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 8px 0 16px;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
.composer input { flex: 1; border: 0; outline: 0; font-size: 13px; }
.composer button { width: 43px; height: 43px; border-radius: 50%; background: var(--green); color: #fff; }

.progress-card {
  display: grid;
  grid-template-columns: 1fr 58px;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: #e8f5ee;
  margin-bottom: 22px;
}
.progress-card span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.progress-card b {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--green);
}
progress { grid-column: 1 / -1; width: 100%; height: 9px; overflow: hidden; border: 0; border-radius: 99px; }
progress::-webkit-progress-bar { background: #cfe4d8; }
progress::-webkit-progress-value { background: var(--green); border-radius: 99px; }
.task-list { display: grid; gap: 8px; margin-bottom: 20px; }
.task {
  height: 42px;
  display: grid;
  grid-template-columns: 28px 1fr 24px;
  align-items: center;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid #edf2f7;
}
.task span {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
}
.task.done span { border-color: var(--green); background: var(--green); color: #fff; }
.show-more { width: 100%; height: 44px; color: var(--green); font-weight: 800; }

.tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.tabs button { height: 42px; font-size: 12px; font-weight: 800; color: #334155; border-bottom: 3px solid transparent; }
.tabs .active { color: var(--red); border-color: var(--red); }
.post {
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15,23,42,.07);
}
.post header, .post footer { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.post header button, .post footer button { margin-left: auto; }
.post footer button { margin-left: 0; color: #334155; font-weight: 700; }
.post footer button:last-child { margin-left: auto; }
.post h2 { margin: 22px 0; font-size: 18px; line-height: 1.25; }
.fab {
  position: absolute;
  right: 24px;
  bottom: 96px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #ff1f1f;
  box-shadow: 0 12px 28px rgba(255, 31, 31, .32);
}

.message-list { display: grid; }
.message-row {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 11px;
  align-items: center;
  min-height: 67px;
  text-align: left;
  border-bottom: 1px solid #edf2f7;
}
.avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f2d6b8;
  color: #111;
  font-weight: 800;
}
.message-row b { font-size: 14px; }
.message-row p { color: var(--muted); font-size: 12px; margin-top: 4px; }
.message-row time { align-self: start; margin-top: 14px; color: var(--muted); font-size: 10px; }
.message-row em {
  position: absolute;
  right: 0;
  top: 35px;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ff1f1f;
  color: #fff;
  font-style: normal;
  font-size: 11px;
  display: grid;
  place-items: center;
}

.booking {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 13px;
  padding: 13px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15,23,42,.07);
}
.booking-visual {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 11px;
  overflow: hidden;
}
.booking h2 { font-size: 14px; margin-top: 2px; }
.booking p { color: var(--muted); font-size: 12px; margin: 6px 0; }
.booking b { display: block; font-size: 12px; margin-bottom: 7px; }
.booking span { display: inline-flex; padding: 6px 9px; border-radius: 99px; font-size: 11px; font-weight: 800; }
.confirmed { background: #dcfce7; color: var(--green); }
.pending { background: #fff0d1; color: #b45309; }
.booking footer { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.booking footer button { height: 42px; border: 1px solid var(--line); border-radius: 11px; font-size: 12px; font-weight: 800; }

.tool-intro {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 18px;
  margin-bottom: 16px;
  color: #fff;
  box-shadow: 0 14px 26px rgba(15,23,42,.1);
}
.tool-intro > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,.16);
}
.tool-intro svg { width: 25px; height: 25px; }
.tool-intro h1 { font-size: 20px; margin-bottom: 5px; }
.tool-intro p { color: rgba(255,255,255,.86); font-size: 12px; line-height: 1.4; }
.rathaus-intro {
  background:
    linear-gradient(135deg, rgba(212,160,23,.28), transparent 34%),
    linear-gradient(135deg, var(--green), #0f5132);
}
.emergency-intro {
  background:
    linear-gradient(135deg, rgba(212,160,23,.22), transparent 30%),
    linear-gradient(135deg, #8f001f, var(--red));
}
/* ── Rathaus Finder ──────────────────────────────────────────── */
.finder-form { display: grid; gap: 10px; margin-bottom: 0; }
.finder-row { display: grid; grid-template-columns: 1fr 110px; gap: 10px; }
.finder-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.finder-form input {
  width: 100%;
  height: 44px;
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 0 12px;
  outline: 0;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  transition: border-color 0.15s;
}
.finder-form input:focus { border-color: var(--green); }
.finder-form .primary { height: 48px; margin-top: 2px; }

/* ── Real Leaflet map ────────────────────────────────────────── */
.leaflet-map-container {
  height: 240px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  margin: 12px 0;
  border: 1px solid var(--line);
  z-index: 0;
}
.leaflet-map-container .leaflet-container { border-radius: 16px; }

/* Numbered office pin used in Leaflet DivIcon */
.map-num-pin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  box-shadow: 0 3px 10px rgba(8,99,46,.4);
}

/* ── Office cards ────────────────────────────────────────────── */
.authority-list { display: grid; gap: 12px; margin-bottom: 20px; }
.authority-card {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15,23,42,.07);
}
.office-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e8f5ee;
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.office-body h2 { font-size: 14px; font-weight: 800; margin: 0 0 4px; }
.office-addr { color: var(--muted); font-size: 12px; margin: 0 0 8px; line-height: 1.4; }
.office-meta { display: flex; gap: 12px; margin-bottom: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.dist-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 99px;
  background: #e8f5ee;
  color: var(--green-dark);
  font-weight: 700;
  font-size: 11px;
}
.office-cta { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.mini-cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid var(--green);
  color: var(--green);
  text-decoration: none;
}
.mini-cta:hover { background: var(--green); color: #fff; }
.directions-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  background: #f0fdf4;
  color: var(--green-dark);
  text-decoration: none;
}
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.meta-row span {
  padding: 5px 8px;
  border-radius: 99px;
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
}
/* ── Emergency urgent numbers bar ────────────────────────────── */
.urgent-panel {
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: #fff4f4;
  border: 1px solid rgba(190,0,39,.14);
}
.urgent-numbers {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.urgent-num {
  flex: 1;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 900;
  text-align: center;
}
.urgent-num.red { background: var(--red); color: #fff; }
.urgent-num.green { background: var(--green); color: #fff; }
.urgent-num span { font-size: 20px; line-height: 1; }
.urgent-num small { font-size: 10px; opacity: 0.85; font-weight: 700; }
.urgent-panel > p { color: #7f1d1d; font-size: 12px; margin: 0; line-height: 1.4; }

/* ── Support category tabs ───────────────────────────────────── */
.support-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.support-tabs::-webkit-scrollbar { display: none; }
.support-tabs button {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 12px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}
.support-tabs .active { background: var(--green); color: #fff; border-color: var(--green); }

/* ── Support cards ───────────────────────────────────────────── */
.support-list { display: grid; gap: 12px; padding-bottom: 20px; }
.support-card {
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  border-left: 5px solid var(--green);
  box-shadow: 0 6px 18px rgba(15,23,42,.07);
}
.support-card.red { border-left-color: var(--red); }
.support-card.gold { border-left-color: var(--gold); }
.support-card.slate { border-left-color: #334155; }
.sc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sc-tag {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 900;
  background: #f0fdf4;
  color: var(--green-dark);
}
.sc-tag.red { background: #fff1f2; color: var(--red); }
.sc-tag.gold { background: #fffbeb; color: #92400e; }
.sc-tag.slate { background: #f1f5f9; color: #334155; }
.sc-avail { font-size: 11px; font-weight: 700; color: var(--muted); }
.support-card h2 { font-size: 16px; font-weight: 800; margin: 0 0 6px; }
.sc-detail { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 6px; }
.sc-org { font-size: 11px; font-weight: 700; color: #334155; margin: 0 0 12px; }
.sc-actions { display: flex; flex-direction: column; gap: 8px; }
.sc-call {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff1f2;
  color: var(--red);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(190,0,39,.15);
}
.sc-call:hover { background: var(--red); color: #fff; }
.sc-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 12px;
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--line);
}
.sc-case-btn {
  height: 48px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
}
.support-card.red .sc-case-btn { background: var(--red); }
.support-card.gold .sc-case-btn { background: var(--gold); color: #111827; }
.support-card.slate .sc-case-btn { background: #334155; }

/* ── Contact pref sheet ──────────────────────────────────────── */
.pref-options { display: grid; gap: 10px; }
.pref-opt {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f0fdf4;
  color: var(--green-dark);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  border: 2px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.pref-opt:hover { border-color: var(--green); background: #dcfce7; }

.profile-hero {
  position: relative;
  height: 174px;
  margin: 0 -20px;
  padding-top: 22px;
  display: grid;
  justify-items: center;
  align-content: center;
  color: #fff;
  background:
    radial-gradient(circle at 78% 22%, rgba(212,160,23,.78) 0 8px, transparent 9px),
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.20), transparent 36%),
    linear-gradient(180deg, transparent 0 54%, rgba(7,37,27,.56) 54% 100%),
    linear-gradient(90deg, transparent 0 9%, rgba(255,255,255,.34) 9% 10%, transparent 10% 18%, rgba(255,255,255,.24) 18% 19%, transparent 19% 44%, rgba(255,255,255,.32) 44% 45%, transparent 45% 100%),
    linear-gradient(135deg, #0f8a4c 0%, #08733c 46%, #0f172a 100%);
  background-size: cover;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.profile-hero::before {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: -10px;
  height: 62px;
  background:
    linear-gradient(180deg, transparent 0 42%, rgba(255,255,255,.86) 42% 46%, transparent 46%),
    linear-gradient(90deg, transparent 0 22%, rgba(255,255,255,.80) 22% 24%, transparent 24% 100%),
    linear-gradient(90deg, transparent 0 7%, rgba(15,23,42,.72) 7% 10%, transparent 10% 17%, rgba(15,23,42,.72) 17% 23%, transparent 23% 36%, rgba(15,23,42,.72) 36% 41%, transparent 41% 100%);
  opacity: .24;
  pointer-events: none;
  z-index: 0;
}
.profile-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--green), var(--gold), var(--red));
  z-index: 2;
}
.profile-hero > * {
  position: relative;
  z-index: 1;
}
.profile-photo {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 4px solid rgba(255,255,255,.72);
  background: #56351f;
  color: #fff;
  font-weight: 900;
}
.profile-hero h1 { margin-top: 8px; font-size: 21px; }
.profile-hero p { font-size: 12px; color: #fff; margin-top: 4px; }
.profile-hero span { margin-top: 7px; padding: 6px 15px; border-radius: 99px; background: var(--green); font-size: 12px; font-weight: 800; }
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: -16px 0 18px;
  padding: 14px 0;
  position: relative;
  z-index: 1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15,23,42,.08);
}
.stats button { display: grid; justify-items: center; gap: 4px; font-size: 15px; font-weight: 900; }
.stats span { color: var(--muted); font-size: 10px; font-weight: 600; }
.menu-list { display: grid; }
.menu-list button {
  height: 48px;
  display: grid;
  grid-template-columns: 28px 1fr 20px;
  align-items: center;
  text-align: left;
  border-bottom: 1px solid #edf2f7;
  font-size: 14px;
}
.menu-list span { color: var(--red); }
.menu-list b { color: var(--muted); font-size: 22px; font-weight: 500; }

.bottom-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 78px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding: 8px 10px 10px;
  background: rgba(255,255,255,.94);
  border-top: 1px solid rgba(226,232,240,.9);
  backdrop-filter: blur(18px);
}
.bottom-nav button {
  position: relative;
  height: 58px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  color: #334155;
}
.bottom-nav svg { width: 22px; height: 22px; }
.bottom-nav span:not(.nav-badge) { font-size: 10px; font-weight: 700; }
.bottom-nav .active { color: var(--green); }
.bottom-nav .active svg { fill: color-mix(in srgb, var(--green) 16%, transparent); }
.nav-badge { top: 3px; right: 14px; }

.demo-backdrop {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  align-items: end;
  background: rgba(15,23,42,.28);
}
.demo-sheet {
  max-height: 64%;
  overflow: auto;
  padding: 10px 20px 20px;
  border-radius: 24px 24px 0 0;
  background: #fff;
  box-shadow: 0 -18px 42px rgba(15,23,42,.22);
}
.sheet-handle {
  width: 46px;
  height: 5px;
  margin: 0 auto 18px;
  border-radius: 99px;
  background: #cbd5e1;
}
.demo-sheet h2 { font-size: 19px; margin-bottom: 10px; }
.sheet-copy {
  color: #475569;
  font-size: 13px;
  line-height: 1.48;
  margin-bottom: 14px;
}
.sheet-body ul {
  margin: 0 0 14px 18px;
  padding: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.55;
}
.demo-reply, .case-number {
  padding: 12px;
  margin-bottom: 14px;
  border-radius: 13px;
  background: #e8f5ee;
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
}
.toast {
  position: absolute;
  left: 50%;
  bottom: 92px;
  z-index: 30;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 42px);
  padding: 11px 14px;
  border-radius: 99px;
  background: #111827;
  color: #fff;
  box-shadow: 0 12px 28px rgba(15,23,42,.2);
  font-size: 12px;
  font-weight: 900;
}

/* ── Announcements ───────────────────────────────────────────── */
.announce-cards { display: grid; gap: 10px; margin-bottom: 8px; }
.announce-card {
  width: 100%;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  box-shadow: 0 6px 16px rgba(15,23,42,.07);
  border-left: 4px solid var(--gold);
}
.announce-icon { font-size: 22px; text-align: center; }
.announce-card strong { display: block; font-size: 13px; margin-bottom: 2px; }
.announce-card p { color: var(--muted); font-size: 11px; margin: 0; }
.announce-tag {
  padding: 4px 9px;
  border-radius: 99px;
  background: #fff3d6;
  color: #b45309;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

/* ── Community Highlights (home) ─────────────────────────────── */
.community-preview { display: grid; gap: 10px; margin-bottom: 22px; }
.community-highlight {
  width: 100%;
  padding: 13px 14px;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  box-shadow: 0 6px 16px rgba(15,23,42,.07);
  display: grid;
  gap: 5px;
}
.community-highlight b { font-size: 12px; color: var(--green); }
.community-highlight span { font-size: 14px; line-height: 1.35; font-weight: 600; }
.community-highlight footer { color: var(--muted); font-size: 11px; }

/* ── Events Tab ──────────────────────────────────────────────── */
.event-stack { display: grid; gap: 14px; }
.event-card {
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15,23,42,.07);
  text-align: left;
}
.event-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.event-tag {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 99px;
  background: #e8f5ee;
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
}
.event-rsvp { color: var(--muted); font-size: 12px; font-weight: 700; }
.event-card h2 { font-size: 17px; margin-bottom: 8px; line-height: 1.25; }
.event-card p { color: var(--muted); font-size: 13px; margin-bottom: 5px; }
.event-btn { width: 100%; margin-top: 13px; height: 46px; }

/* ── Checklist settled section ───────────────────────────────── */
.settled-title { color: var(--green); }

/* ── Profile – Activity ──────────────────────────────────────── */
.profile-section-title { margin: 20px 0 12px; font-size: 16px; }
.activity-list { display: grid; gap: 10px; margin-bottom: 8px; }
.activity-row {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(15,23,42,.06);
}
.activity-icon { font-size: 20px; text-align: center; }
.activity-row b { display: block; font-size: 13px; }
.activity-row p { color: var(--muted); font-size: 11px; margin: 3px 0 0; }

/* ── Profile – Contributions ─────────────────────────────────── */
.contrib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.contrib-card {
  padding: 14px 10px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(15,23,42,.06);
  text-align: center;
  display: grid;
  gap: 4px;
}
.contrib-card b { font-size: 22px; color: var(--green); font-weight: 900; }
.contrib-card span { font-size: 10px; color: var(--muted); font-weight: 600; }

/* ── List a room ─────────────────────────────────────────────── */
.list-room-link { color: var(--green); font-weight: 700; font-size: 13px; }
.form-intro { font-size: 14px; color: var(--muted); margin: 0 0 20px; line-height: 1.55; }
.room-form { display: grid; gap: 16px; padding-bottom: 30px; }
.image-buckets {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.image-buckets legend {
  padding: 0 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}
.image-buckets p,
.route-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.room-form label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.room-form input,
.room-form select,
.room-form textarea {
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}
.room-form input:focus,
.room-form select:focus,
.room-form textarea:focus { border-color: var(--green); }
.room-form textarea { resize: vertical; min-height: 90px; }
.req { color: var(--red); }
.theme-picker { display: flex; gap: 12px; padding-top: 4px; }
.theme-opt { display: grid; place-items: center; gap: 5px; font-size: 11px; cursor: pointer; }
.theme-opt input { display: none; }
.swatch { width: 48px; height: 48px; border-radius: 12px; border: 3px solid transparent; transition: border-color 0.15s; }
.theme-opt input:checked + .swatch { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.amenity-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -6px;
}
.amenity-picks button,
.amenity-picks span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 99px;
  background: #eef7f1;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}
.amenity-picks span {
  background: #f8fafc;
  color: var(--muted);
  font-weight: 700;
}

/* ── Detail improvements ─────────────────────────────────────── */
.price-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.rating-pill {
  padding: 4px 10px;
  border-radius: 99px;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 700;
}
.detail-location { color: var(--muted); font-size: 14px; margin: 4px 0 4px; }
.detail-transit { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.detail-desc { font-size: 15px; line-height: 1.6; color: #374151; }
.detail-map { margin: 18px 0; border-radius: 16px; overflow: hidden; background: #e8efed; padding: 20px; }
.map-placeholder { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.map-note { font-size: 12px; color: var(--muted); margin: 0; }
.verified.own { background: #dbeafe; color: #1e40af; }
.full-width { width: 100%; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty-state p { margin-bottom: 16px; font-size: 15px; }

/* ── Auth screens ────────────────────────────────────────────── */
.auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #08632e 0%, #1a7a3c 40%, #d4a017 100%);
}
.auth-body {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 28px;
  padding: 36px 28px;
  margin: 16px;
  box-shadow: 0 24px 60px rgba(8, 99, 46, 0.35);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.auth-brand h1 {
  font-size: 22px;
  font-weight: 900;
  color: var(--green-dark);
  line-height: 1.15;
  margin: 0;
}
.brand-house.small { transform: scale(0.7); transform-origin: left; }
.auth-title { font-size: 22px; font-weight: 900; margin: 0 0 4px; }
.auth-sub { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
.auth-error {
  background: #fee2e2;
  color: #991b1b;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}
.auth-form { display: grid; gap: 14px; }
.auth-form label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.auth-form input {
  width: 100%;
  height: 48px;
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 0 14px;
  font-size: 15px;
  color: var(--text);
  transition: border-color 0.15s;
  outline: none;
}
.auth-form input:focus { border-color: var(--green); }
.auth-form .primary { margin-top: 4px; height: 52px; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.auth-switch { text-align: center; font-size: 13px; color: var(--muted); margin-top: 18px; }
.auth-switch button { color: var(--green); font-weight: 700; }
/* ── Loading skeleton ────────────────────────────────────────── */
.skeleton-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.skeleton {
  height: 100px;
  border-radius: 14px;
  background: linear-gradient(90deg, #e8efed 25%, #f5f5f5 50%, #e8efed 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* ── Loading state ───────────────────────────────────────────── */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 0;
  color: var(--muted);
  font-size: 14px;
}

/* ── Spinner animation ───────────────────────────────────────── */
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Logout button ───────────────────────────────────────────── */
.logout-btn {
  width: 100%;
  margin: 10px 0 30px;
  padding: 14px;
  border-radius: 14px;
  background: #fee2e2;
  color: #991b1b;
  font-weight: 700;
  font-size: 15px;
}

/* ── Toast ───────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translate(-50%, 12px);
  background: #111827;
  color: #fff;
  padding: 10px 20px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ── Sheet backdrop ──────────────────────────────────────────── */
.demo-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: grid;
  align-items: flex-end;
  z-index: 900;
}
.demo-sheet {
  background: #fff;
  border-radius: 28px 28px 0 0;
  padding: 10px 24px 36px;
  max-height: 72vh;
  overflow-y: auto;
}
.media-backdrop { align-items: center; justify-items: center; padding: 22px; }
.media-carousel {
  position: relative;
  width: min(390px, calc(100vw - 44px));
  max-height: min(760px, calc(100vh - 44px));
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 24px;
  background: #111827;
  box-shadow: var(--shadow);
}
.media-carousel img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 17px;
  background: #0f172a;
}
.media-close {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 1;
  width: 38px;
  height: 38px;
  border-radius: 99px;
  background: rgba(255,255,255,.94);
  font-size: 24px;
  line-height: 1;
}
.media-controls {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 800;
  text-align: center;
}
.media-controls button {
  height: 42px;
  border-radius: 99px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 28px;
}
.demo-sheet h2 { font-size: 18px; font-weight: 900; margin-bottom: 12px; }
.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 99px;
  background: var(--line);
  margin: 6px auto 20px;
}
.sheet-body { margin-bottom: 20px; }
.sheet-copy { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }
.city-picker { display: grid; gap: 12px; }
.city-picker h3 {
  margin: 6px 0 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.city-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.city-picker-grid button {
  min-height: 62px;
  padding: 10px 11px;
}
.case-number {
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  background: #f0fdf4;
  color: var(--green-dark);
  font-family: monospace;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
}
.demo-reply {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #f0fdf4;
  color: var(--green-dark);
  font-weight: 600;
  font-size: 14px;
}

/* ── Nav badge ───────────────────────────────────────────────── */
.nav-badge {
  position: absolute;
  top: 2px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  border-radius: 99px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.bottom-nav button { position: relative; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 430px) {
  .app { padding: 0; }
  .phone-screen {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    border-radius: 0;
    border: 0;
  }
  .screen-body { height: calc(100% - 132px); }
}