:root {
  --bg: #efe6d8;
  --bg-deep: #e7dccb;
  --ink: #1c1612;
  --muted: #6e645a;
  --card: #fffaf3;
  --line: rgba(28, 22, 18, 0.08);
  --accent: #b24a22;
  --accent-ink: #fff8f3;
  --ok: #2f5c3c;
  --ok-soft: #e4efe6;
  --shadow: 0 18px 40px rgba(28, 22, 18, 0.08);
  --radius: 28px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: #111;
  color: var(--ink);
  font-family: "Outfit", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

.phone {
  width: 390px;
  height: 844px;
  background:
    radial-gradient(1200px 480px at 50% -10%, rgba(255,255,255,.55), transparent 55%),
    var(--bg);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.status {
  height: 54px;
  padding: 18px 28px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.status .icons { display: flex; gap: 6px; align-items: center; opacity: 0.85; }

.screen {
  flex: 1;
  padding: 8px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand p {
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.01em;
}

.brand h1 {
  font-family: "Fraunces", serif;
  font-weight: 560;
  font-size: 34px;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.chips {
  display: flex;
  gap: 8px;
}

.chip {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}

.chip b { font-weight: 600; }
.chip .caret { font-size: 10px; opacity: 0.55; }

.search {
  background: var(--card);
  border-radius: 22px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 16px;
  box-shadow: var(--shadow);
}

.search svg { flex: none; opacity: 0.55; }

.intents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}

.intent {
  background: var(--card);
  border-radius: 24px;
  min-height: 148px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow);
}

.intent.wide {
  grid-column: 1 / -1;
  min-height: 92px;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--bg-deep);
  display: grid;
  place-items: center;
}

.intent h2 {
  font-family: "Fraunces", serif;
  font-size: 22px;
  font-weight: 560;
  letter-spacing: -0.03em;
}

.intent span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.toprow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.back {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: rgba(255,255,255,.5);
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}

.title h1 {
  font-family: "Fraunces", serif;
  font-size: 32px;
  font-weight: 560;
  letter-spacing: -0.03em;
}

.title p { color: var(--muted); margin-top: 4px; font-size: 14px; }

.badge {
  background: var(--ok-soft);
  color: var(--ok);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  box-shadow: var(--shadow);
  align-items: stretch;
}

.photo {
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  min-height: 108px;
}

.meta { display: flex; flex-direction: column; justify-content: space-between; padding: 4px 4px 4px 0; }

.meta h2 {
  font-family: "Fraunces", serif;
  font-size: 20px;
  font-weight: 560;
  letter-spacing: -0.03em;
}

.where { color: var(--muted); font-size: 13px; margin-top: 2px; }

.slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.when { font-size: 13px; font-weight: 500; }
.when strong { display: block; font-size: 16px; font-weight: 650; }

.cta {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 999px;
  padding: 11px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hero {
  background: var(--card);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.hero-photo {
  height: 210px;
  background-size: cover;
  background-position: center;
}

.hero-body { padding: 22px 22px 24px; }

.hero-body h1 {
  font-family: "Fraunces", serif;
  font-size: 34px;
  letter-spacing: -0.03em;
  font-weight: 560;
}

.times {
  display: flex;
  gap: 8px;
  margin: 18px 0 22px;
}

.time {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  border-radius: 16px;
  background: var(--bg-deep);
  font-size: 14px;
  font-weight: 600;
}

.time.on {
  background: var(--ink);
  color: #fff8f1;
}

.primary {
  width: 100%;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 22px;
  padding: 18px 16px;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
}

.hint {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-top: 12px;
  line-height: 1.45;
}

.ghost {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 22px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 550;
}

.note {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.8;
}

.share-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 4px;
}

.share-me {
  width: 100%;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px 16px;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: var(--shadow);
}

.share-me svg { flex: none; }

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 22, 18, 0.32);
}

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--card);
  border-radius: 32px 32px 0 0;
  padding: 10px 22px 28px;
  box-shadow: 0 -18px 40px rgba(28, 22, 18, 0.12);
}

.sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 99px;
  background: rgba(28, 22, 18, 0.14);
  margin: 6px auto 16px;
}

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.sheet-head h1 {
  font-family: "Fraunces", serif;
  font-size: 28px;
  font-weight: 560;
  letter-spacing: -0.03em;
}

.sheet-head p {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
  line-height: 1.4;
}

.sheet-close {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--bg-deep);
  display: grid;
  place-items: center;
  flex: none;
}

.qr-wrap {
  width: 188px;
  height: 188px;
  margin: 14px auto 12px;
  background: #fff;
  border-radius: 24px;
  padding: 16px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
}

.qr-wrap img,
.qr-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}

.qr-caption {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 16px;
}

.link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border-radius: 16px;
  padding: 13px 14px 13px 16px;
}

.link-row .url {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-row .copy {
  font-size: 13px;
  font-weight: 650;
  color: var(--accent);
  flex: none;
}

.share-ways {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.way {
  background: var(--bg);
  border-radius: 18px;
  padding: 14px 8px 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.way .icon {
  width: 38px;
  height: 38px;
  border-radius: 13px;
}

.sheet .note {
  display: block;
  text-align: center;
  margin-top: 14px;
}

.popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 22, 18, 0.32);
}

.popup {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--card);
  border-radius: 28px;
  padding: 22px 20px 18px;
  box-shadow: 0 18px 40px rgba(28, 22, 18, 0.16);
}

.popup h1 {
  font-family: "Fraunces", serif;
  font-size: 26px;
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.popup-lead {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
  margin: 10px 0 16px;
}

.how {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.how-col {
  background: var(--bg);
  border-radius: 18px;
  padding: 12px 12px 14px;
}

.how-col h3 {
  font-size: 13px;
  font-weight: 650;
  margin-bottom: 10px;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
}

.step:first-of-type { margin-top: 0; }

.num {
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--bg-deep);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 650;
  flex: none;
  margin-top: 1px;
}

.popup .note {
  display: block;
  text-align: center;
  margin-top: 10px;
}

.brand .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-chip {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}
.profile-chip.icon-only {
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
}

.field {
  background: var(--card);
  border-radius: 20px;
  padding: 12px 16px;
  box-shadow: var(--shadow);
}

.field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 600;
}

.field .val {
  font-size: 16px;
  font-weight: 500;
}

.fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tag {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  font-weight: 650;
}

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.stat {
  background: var(--card);
  border-radius: 18px;
  padding: 12px 10px;
  box-shadow: var(--shadow);
}

.stat strong {
  display: block;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.stat span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
  line-height: 1.3;
}

.refs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ref {
  background: var(--card);
  border-radius: 22px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: var(--shadow);
}

.ref h2 {
  font-family: "Fraunces", serif;
  font-size: 18px;
  font-weight: 560;
  letter-spacing: -0.03em;
}

.ref .where { margin-top: 2px; }

.st {
  font-size: 12px;
  font-weight: 650;
  text-align: right;
  line-height: 1.3;
  white-space: nowrap;
}

.st.paid { color: var(--ok); }
.st.due { color: var(--accent); }
.st.tagged { color: var(--muted); }

.screen.home { gap: 13px; }

.filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.filter {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 9px 10px 10px 11px;
  min-width: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}

.filter label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter .val {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}

.filter .caret { font-size: 10px; opacity: 0.55; }

.intents.compact {
  gap: 8px;
  margin-top: 0;
}

.intent.compact {
  min-height: 0;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 18px;
}

.intent.compact .icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex: none;
}

.intent.compact h2 {
  flex: none;
  text-align: left;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
}

.screen.home .search { padding: 14px 16px; }

.field.group {
  padding-bottom: 14px;
}
.field .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.field.inner {
  box-shadow: none;
  background: var(--bg);
  padding: 10px 12px;
  border-radius: 14px;
}

.sponsored {
  flex: 1;
  min-height: 88px;
  margin-top: 4px;
  background: var(--card);
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.screen.home .share-footer {
  margin-top: 10px;
}
.sponsored-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sponsored-inner h2 {
  font-family: "Fraunces", serif;
  font-size: 18px;
  font-weight: 560;
  letter-spacing: -0.02em;
}
.sponsored-inner span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}

/* --- pickers, empty, guest, detail, filled ad --- */
.filter.active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.cal-month { font-weight: 650; font-size: 15px; margin: 10px 0 10px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; margin-bottom: 18px; }
.cal .wd { font-size: 11px; color: var(--muted); font-weight: 600; padding-bottom: 4px; }
.cal .d { font-size: 14px; font-weight: 550; height: 38px; display: grid; place-items: center; border-radius: 14px; }
.cal .d.past { color: var(--muted); opacity: .45; }
.cal .d.on { background: var(--ink); color: #fff8f1; }
.opt-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 16px 0 20px; }
.opt-list .time { flex: none; }
.stepper { display: flex; align-items: center; justify-content: space-between; background: var(--bg); border-radius: 20px; padding: 12px; margin: 16px 0 20px; }
.stepper .btn { width: 48px; height: 48px; border-radius: 16px; background: var(--card); display: grid; place-items: center; font-size: 22px; font-weight: 500; border: 1px solid var(--line); }
.stepper .n { font-family: "Fraunces", serif; font-size: 40px; font-weight: 560; }
.badge.empty { background: var(--bg-deep); color: var(--muted); }
.empty-state { margin: auto 0; text-align: center; padding: 0 12px; }
.empty-state .icon { margin: 0 auto 18px; width: 56px; height: 56px; border-radius: 18px; }
.empty-state h2 { font-family: "Fraunces", serif; font-size: 26px; font-weight: 560; letter-spacing: -0.03em; }
.empty-state p { color: var(--muted); font-size: 15px; line-height: 1.45; margin-top: 8px; }
.guest-brand { color: var(--muted); font-size: 13px; letter-spacing: .01em; }
.via { display: flex; gap: 10px; align-items: center; background: var(--bg); border-radius: 16px; padding: 10px 12px; font-size: 13px; color: var(--muted); margin-top: 14px; }
.via b { color: var(--ink); font-weight: 600; }
.st.pill { padding: 7px 12px; border-radius: 999px; background: rgba(178,74,34,.1); }
.field .val.big { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.sponsored-inner .thumb { width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg,#c9a27a,#6d8aa0); background-size: cover; background-position: center; flex: none; }
.sponsored-inner .cta { margin-left: auto; padding: 9px 14px; font-size: 13px; }
.photo, .hero-photo, .thumb { background-color: #c8b49a; }

/* 16–19 additions */
.hero-photo.short { height: 150px; }
.hero-body.tight { padding: 18px 20px 20px; }
.hero-body.tight .times { margin: 14px 0 16px; }
.notes-block { margin: 0 0 16px; }
.notes-label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; margin-bottom: 8px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 8px 13px; border-radius: 999px; background: var(--bg-deep); font-size: 13px; font-weight: 500; }
.tag.on { background: var(--ink); color: #fff8f1; }
.notes-text { margin-top: 10px; font-size: 13px; color: var(--ink); background: var(--bg); border-radius: 14px; padding: 10px 12px; }
.perk { display: inline-block; margin-top: 6px; background: var(--ok-soft); color: var(--ok); font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; }
.stops { position: relative; display: flex; flex-direction: column; gap: 12px; }
.stops::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 30px; width: 2px; background: rgba(28,22,18,0.12); }
.stop { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; position: relative; }
.stop .num { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff8f1; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.stop .card { grid-template-columns: 72px 1fr; padding: 10px; }
.stop .photo { min-height: 78px; border-radius: 16px; }
.stop .tile { border-radius: 16px; background: var(--bg-deep); display: flex; align-items: center; justify-content: center; min-height: 78px; }
.stop .meta h2 { font-size: 18px; }
.stop .clock { font-size: 13px; font-weight: 650; margin-top: 6px; }
.hold { display: flex; align-items: center; gap: 12px; background: var(--ok-soft); color: var(--ok); border-radius: 18px; padding: 12px 14px; margin-bottom: 16px; }
.hold strong { display: block; font-size: 15px; }
.hold span { font-size: 12.5px; }
.hold .left { margin-left: auto; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.photo, .hero-photo { background-color: #c9b59c; background-image: linear-gradient(135deg,#d8c3a5,#a9744f); }

/* 20–22 partner onboarding */
.ob-brand{font-family:Outfit;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:6px 0 14px}
.ob h1{font-family:Fraunces;font-weight:560;font-size:28px;line-height:1.1;margin:0 0 6px;color:var(--ink)}
.ob .sub{font-family:Outfit;font-size:14px;color:var(--muted);margin:0 0 18px;line-height:1.4}
.ob-field{margin-bottom:12px}
.ob-field label{display:block;font-family:Outfit;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em}
.ob-input{background:var(--card);border:1px solid #ddd0bd;border-radius:14px;padding:12px 14px;font-family:Outfit;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ob-input.secure{letter-spacing:.06em}
.ob-input .tag{margin-left:auto;font-size:11px;color:var(--muted);background:#efe6d8;border-radius:999px;padding:3px 8px;letter-spacing:0}
.ob-chips{display:flex;flex-wrap:wrap;gap:8px}
.ob-chip{font-family:Outfit;font-size:14px;padding:8px 14px;border-radius:999px;border:1px solid #ddd0bd;background:var(--card);color:var(--ink)}
.ob-chip.on{background:var(--ink);color:#fffaf3;border-color:var(--ink)}
.ob-hint{font-family:Outfit;font-size:12.5px;color:var(--muted);margin:6px 2px 0;line-height:1.35}
.ob-btn{display:block;width:100%;border:0;border-radius:999px;background:var(--accent);color:#fffaf3;font-family:Outfit;font-weight:600;font-size:16px;padding:15px;margin-top:6px}
.ob-btn.ok{background:var(--ok)}
.ob-quiet{font-family:Outfit;font-size:13px;color:var(--muted);text-align:center;margin:10px 0 0;line-height:1.4}
.ob-preview{background:var(--card);border-radius:16px;padding:14px;margin-top:16px;border:1px dashed #d6c6ae;font-family:Outfit}
.ob-preview .k{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.ob-preview .link{font-size:15px;color:var(--ink);margin:6px 0 4px;font-weight:500}
.ob-preview .exp{font-size:13px;color:var(--muted)}
.ob-ex{font-family:Outfit;font-size:11px;color:var(--muted);text-align:center;margin-top:12px;opacity:.8}
.ob-live{text-align:center;padding-top:60px}
.ob-check{width:84px;height:84px;border-radius:50%;background:var(--ok-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.ob-okcard{background:var(--ok-soft);color:var(--ok);border-radius:16px;padding:14px;font-family:Outfit;font-size:14px;margin:18px 0 24px;text-align:left;line-height:1.45}
.screen.ob{gap:0}
.screen.ob .ob-field{margin-bottom:10px}

/* home: compact Share me so the sponsored tile has room, and the ad fits inside it */
.screen.home { gap: 10px; }
.screen.home .intent.compact { padding: 10px 12px; }
.screen.home .sponsored {
  flex: 1;
  min-height: 108px;
  padding: 12px 14px;
  margin-top: 2px;
  overflow: hidden;
  box-sizing: border-box;
}
.screen.home .sponsored .note { margin: 0 0 8px; }
.screen.home .sponsored-inner { min-width: 0; flex: 1; }
.screen.home .sponsored-inner > div:not(.thumb):not(.icon) {
  min-width: 0;
  flex: 1;
}
.screen.home .sponsored-inner h2,
.screen.home .sponsored-inner span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.screen.home .sponsored-inner .thumb {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}
.screen.home .sponsored-inner .cta {
  flex: none;
  padding: 8px 12px;
  font-size: 13px;
}
.screen.home .share-footer {
  margin-top: 4px;
  gap: 4px;
  flex: none;
}
.screen.home .share-me {
  padding: 9px 14px;
  font-size: 14px;
  border-radius: 16px;
  gap: 7px;
}
.screen.home .share-me svg {
  width: 14px;
  height: 14px;
}
.screen.home .share-footer .hint {
  font-size: 12px;
  line-height: 1.3;
}

/* --- 7 Nov additions: live radar set (scoped x- classes; home-only under .screen.home) --- */
.screen.home.x-home { gap: 8px; }
.screen.home.x-home .brand h1 { font-size: 28px; }
.screen.home.x-home .filter { padding: 6px 10px 7px 11px; border-radius: 14px; }
.screen.home.x-home .filters { gap: 6px; }
.screen.home.x-home .search { padding: 10px 10px 10px 16px; font-size: 15px; }
.screen.home.x-home .intents.compact { gap: 6px; }
.screen.home.x-home .intent.compact { padding: 6px 10px; border-radius: 15px; gap: 9px; border: 1.5px solid transparent; }
.screen.home.x-home .intent.compact .icon { width: 26px; height: 26px; border-radius: 8px; }
.screen.home.x-home .intent.compact h2 { font-size: 14.5px; }
.screen.home.x-home .intent.compact.on { border-color: var(--ink); }
.screen.home.x-home .intent.compact.on .icon { background: var(--ink); }
.screen.home.x-home .intent.compact.on .icon svg * { stroke: #fff8f1; }
.screen.home.x-home .intent.compact.dim { opacity: .45; box-shadow: none; }
.screen.home.x-home .intent.compact .tick { margin-left: auto; font-size: 12px; font-weight: 650; }
.screen.home.x-home .sponsored { min-height: 100px; }
.x-row { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; overflow: hidden; }
.x-pill { flex: none; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); white-space: nowrap; }
.x-pill.on { background: var(--ink); color: #fff8f1; border-color: var(--ink); }
.x-pill.soft { background: transparent; color: var(--muted); font-weight: 500; }
.x-pill.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.x-pill.warn { background: rgba(178,74,34,.1); color: var(--accent); border-color: transparent; }
.x-lab { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; flex: none; margin-right: 2px; }
.x-top3 { margin-left: auto; flex: none; font-size: 12.5px; font-weight: 650; background: var(--accent); color: var(--accent-ink); padding: 7px 11px; border-radius: 999px; white-space: nowrap; }
.x-fresh { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ok); background: var(--ok-soft); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.x-fresh.stale { color: var(--accent); background: rgba(178,74,34,.1); }
.x-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.x-head h1 { font-family: Fraunces, serif; font-size: 27px; font-weight: 560; letter-spacing: -.03em; line-height: 1.05; }
.x-head p { color: var(--muted); font-size: 13px; margin-top: 3px; }
.x-screen { gap: 10px; padding-bottom: 18px; }
.x-back { width: 32px; height: 32px; border-radius: 16px; background: rgba(255,255,255,.5); display: grid; place-items: center; flex: none; }
.x-card { background: var(--card); border-radius: 22px; padding: 10px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.x-card.dim { opacity: .55; }
.x-ctop { display: grid; grid-template-columns: 96px 1fr; gap: 11px; }
.x-ph { position: relative; border-radius: 16px; min-height: 104px; background-color: #c9b59c; background-size: cover; background-position: center; }
.x-ph .cnt { position: absolute; right: 6px; bottom: 6px; font-size: 10.5px; font-weight: 650; background: rgba(28,22,18,.6); color: #fff; padding: 2px 6px; border-radius: 8px; }
.x-ph .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(28,22,18,.55); display: grid; place-items: center; }
.x-ph .heart { position: absolute; left: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,250,243,.9); display: grid; place-items: center; font-size: 13px; }
.x-ph .heart.on { color: var(--accent); }
.x-card h2 { font-family: Fraunces, serif; font-size: 19px; font-weight: 560; letter-spacing: -.03em; line-height: 1.1; }
.x-hook { font-size: 12.5px; color: var(--ink); margin-top: 3px; line-height: 1.3; }
.x-meta { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.x-meta b { color: var(--ink); font-weight: 600; }
.x-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.x-b { font-size: 10.5px; font-weight: 650; padding: 3px 7px; border-radius: 999px; background: var(--bg-deep); white-space: nowrap; }
.x-b.ok { background: var(--ok-soft); color: var(--ok); }
.x-b.hold { background: rgba(178,74,34,.1); color: var(--accent); }
.x-b.comm { background: transparent; border: 1px dashed rgba(28,22,18,.25); color: var(--muted); }
.x-flag { font-size: 12px; background: #f3e7d2; border-radius: 12px; padding: 7px 10px; line-height: 1.35; }
.x-flag b { font-weight: 650; }
.x-peer { font-size: 12px; background: var(--bg); border-radius: 12px; padding: 7px 10px; color: var(--muted); line-height: 1.35; }
.x-peer b { color: var(--ink); font-weight: 600; }
.x-acts { display: flex; gap: 6px; align-items: center; }
.x-act { flex: none; min-height: 40px; padding: 0 12px; border-radius: 14px; background: var(--bg); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.x-act.go { margin-left: auto; background: var(--accent); color: var(--accent-ink); padding: 0 18px; }
.x-act.dark { background: var(--ink); color: #fff8f1; }
.x-act.wide { flex: 1; justify-content: center; }
.x-when { font-size: 12px; font-weight: 500; }
.x-when strong { display: block; font-size: 16px; font-weight: 650; }
.x-bundle { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 16px; padding: 9px 12px; font-size: 13px; box-shadow: var(--shadow); }
.x-bundle b { font-weight: 650; }
.x-bundle span { color: var(--muted); font-size: 12px; display: block; }
.x-bundle .x-act { margin-left: auto; min-height: 34px; }
.x-bar { display: flex; gap: 6px; margin-top: auto; }
.x-bar .x-act { flex: 1; justify-content: center; background: var(--card); box-shadow: var(--shadow); min-height: 46px; }
.x-bar .x-act.go { background: var(--accent); }
.x-sec { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.x-list { display: flex; flex-direction: column; gap: 8px; }
.x-item { background: var(--card); border-radius: 18px; padding: 11px 12px; box-shadow: var(--shadow); display: flex; gap: 11px; align-items: center; }
.x-item .th { width: 52px; height: 52px; border-radius: 13px; background-color: #c9b59c; background-size: cover; background-position: center; flex: none; }
.x-item .bd { flex: 1; min-width: 0; }
.x-item h3 { font-family: Fraunces, serif; font-size: 16.5px; font-weight: 560; letter-spacing: -.02em; }
.x-item .x-act { min-height: 36px; padding: 0 12px; }
.x-ago { font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.x-panel { background: var(--card); border-radius: 20px; padding: 13px 14px; box-shadow: var(--shadow); }
.x-panel h3 { font-size: 13px; font-weight: 650; margin-bottom: 8px; }
.x-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.x-cmp { display: grid; grid-template-columns: 78px 1fr 1fr 1fr; background: var(--card); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; font-size: 12px; }
.x-cmp > div { padding: 8px 7px; border-bottom: 1px solid var(--line); line-height: 1.3; }
.x-cmp .k { color: var(--muted); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.x-cmp .h { font-family: Fraunces, serif; font-size: 14.5px; font-weight: 560; letter-spacing: -.02em; }
.x-cmp .best { background: var(--ok-soft); }
.x-map { position: relative; flex: 1; min-height: 360px; border-radius: 24px; overflow: hidden; background:
  radial-gradient(160px 120px at 12% 70%, #b9d3d8 60%, transparent 61%),
  linear-gradient(115deg, transparent 0 26%, #b9d3d8 26% 31%, transparent 31%),
  linear-gradient(0deg, #e7dccb, #efe6d8); box-shadow: var(--shadow); }
.x-map .road { position: absolute; background: #fffaf3; opacity: .9; }
.x-map .pin { position: absolute; transform: translate(-50%,-100%); background: var(--card); border-radius: 12px; padding: 5px 8px; font-size: 11.5px; font-weight: 650; box-shadow: 0 6px 14px rgba(28,22,18,.18); white-space: nowrap; }
.x-map .pin::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.x-map .pin.ok { background: var(--ok); color: #fff; }
.x-map .pin.few { background: var(--accent); color: #fff; }
.x-map .pin.off { background: #d9cfc0; color: var(--muted); }
.x-map .hotel { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 3px solid #fffaf3; }
.x-map .lbl { position: absolute; font-size: 10.5px; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.x-lang { display: inline-flex; background: var(--bg-deep); border-radius: 999px; padding: 2px; font-size: 11.5px; font-weight: 650; }
.x-lang span { padding: 4px 9px; border-radius: 999px; color: var(--muted); }
.x-lang span.on { background: var(--card); color: var(--ink); }
.x-cnote { background: var(--ok-soft); color: var(--ok); border-radius: 14px; padding: 9px 12px; font-size: 13px; line-height: 1.4; }
.x-cnote b { font-weight: 650; }
.x-toggle { width: 40px; height: 24px; border-radius: 12px; background: var(--bg-deep); position: relative; flex: none; }
.x-toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.x-toggle.on { background: var(--ok); }
.x-toggle.on::after { left: 19px; }
.x-trow { display: flex; align-items: center; gap: 10px; }
.x-trow .bd { flex: 1; font-size: 13.5px; font-weight: 600; }
.x-trow .bd span { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.x-input { background: var(--bg); border-radius: 12px; padding: 9px 11px; font-size: 13px; line-height: 1.4; }
.x-count { font-size: 30px; font-family: Fraunces, serif; font-weight: 560; }
.x-stars { font-size: 30px; letter-spacing: 4px; color: var(--accent); }
.x-stars .o { color: #d9cfc0; }
.x-msg { background: #dcf3d6; border-radius: 16px 16px 4px 16px; padding: 11px 13px; font-size: 13.5px; line-height: 1.45; align-self: flex-end; max-width: 92%; box-shadow: var(--shadow); }
.x-banner { display: flex; align-items: center; gap: 10px; background: var(--ink); color: #fff8f1; border-radius: 16px; padding: 10px 12px; font-size: 13px; }
.x-banner b { font-weight: 650; }
.x-banner .x-toggle { margin-left: auto; }
.x-sub { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.x-screen > *, .x-list > *, .screen.home.x-home > *:not(.sponsored) { flex-shrink: 0; }
.x-head h1 { white-space: nowrap; }
.x-when { white-space: nowrap; }
.x-badges { align-items: flex-start; }
.x-bundle .x-act { align-self: center; }
.x-card .x-act { min-height: 38px; }
.x-card .x-flag, .x-card .x-peer { padding: 6px 10px; }
.x-act.wide:not(.go):not(.dark) { background: var(--card); box-shadow: var(--shadow); }
.sheet.x-sheet .x-panel { padding: 9px 12px; }
.sheet.x-sheet .x-panel h3 { margin-bottom: 6px; font-size: 12.5px; }
.sheet.x-sheet .x-pill { padding: 5px 10px; font-size: 12px; }