:root {
  --blue: #355c8a;
  --soft-blue: #5d7fa8;
  --pale-blue: #e8eff7;
  --beige: #dcc9ae;
  --background: #f8f4ee;
  --card: #fffdfc;
  --text: #2f2f2f;
  --muted: #68645f;
  --border: #e8ded1;
  --danger: #9e3f3f;
  --photo-navy: #1f3042;
  --photo-navy-light: #48647d;
  --photo-ochre: #b47a2b;
  --photo-wood: #79512f;
  --photo-cream: #fff6e8;
  --shadow: 0 8px 30px rgba(62, 52, 42, 0.07);
}

body.area-view::before {
  filter: blur(20px) saturate(.72);
}

body.area-view::after {
  background: rgba(247, 240, 231, .62);
  backdrop-filter: blur(2px);
}

body.guide-view::before {
  filter: blur(20px) saturate(.7);
}

body.guide-view::after {
  background: rgba(247,240,231,.62);
  backdrop-filter: blur(2px);
}

* {
  box-sizing: border-box;
}

.object-LOC > span {
  color: #1d5685;
  font-family: Georgia, serif;
  font-size: 78px;
  font-weight: 800;
  text-shadow:
    3px 4px 0 #0d365d,
    -1px -1px 0 #85a0b8;
  filter: drop-shadow(0 8px 6px rgba(45,32,23,.24));
}


html,
body {
  width: 100%;
  min-width: 800px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--background);
  color: var(--text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.area-reference {
  width: 100%;
  min-height: 100%;
  color: #153f6b;
  overflow: auto;
}

.area-header {
  height: 82px;
  padding: 0 30px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: rgba(255,253,249,.7);
  backdrop-filter: blur(14px);
}

.area-back {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 18px;
  background: rgba(255,253,249,.84);
  color: #153f6b;
  box-shadow: 0 6px 13px rgba(52,38,27,.11);
  cursor: pointer;
  font-size: 28px;
}

.area-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  letter-spacing: 6px;
}

.area-brand strong {
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 400;
}

.area-brand small {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 5px;
}

.area-guest {
  justify-self: end;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255,253,249,.78);
  box-shadow: 0 6px 13px rgba(52,38,27,.08);
  color: #68727e;
  font-size: 13px;
}

.area-workspace {
  width: min(1030px, 91vw);
  margin: 0 auto;
  padding: 15px 0 22px;
}

.area-title {
  height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.area-pin {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 50% 8px;
  background: linear-gradient(145deg, #4779a2, #153f6b);
  box-shadow: inset 4px 4px 6px rgba(255,255,255,.18), 0 8px 11px rgba(50,36,25,.2);
  color: #fff5e4;
  font-family: Georgia, serif;
  font-size: 36px;
  transform: rotate(-45deg);
}

.area-pin + div {
  text-align: left;
}

.area-title h1 {
  font-size: 39px;
}

.area-title p,
.area-section-title p,
.airport-heading p {
  margin-top: 3px;
  color: #6e7783;
  font-size: 14px;
}

.area-section {
  margin-top: 12px;
}

.area-section-title,
.airport-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.area-section-title > span,
.airport-heading > span {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #e5b86c, #b77b2d);
  box-shadow: inset 3px 3px 4px rgba(255,255,255,.35), 0 5px 8px rgba(52,38,27,.14);
  color: #173f68;
  font-size: 23px;
}

.area-section-title h2,
.airport-heading h2 {
  font-size: 23px;
}

.recommendation-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 11px;
}

.recommendation-grid button {
  position: relative;
  height: 124px;
  padding: 13px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(255,253,249,.97), rgba(241,232,220,.95));
  box-shadow: 0 8px 15px rgba(50,37,27,.12);
  color: #153f6b;
  cursor: pointer;
}

.recommendation-grid button > span {
  font-family: "Segoe UI Emoji", sans-serif;
  font-size: 35px;
  filter: drop-shadow(0 4px 3px rgba(50,36,25,.16));
}

.recommendation-grid strong {
  margin-top: 4px;
  font-size: 15px;
}

.recommendation-grid small {
  margin-top: 2px;
  color: #757d87;
  font-size: 10px;
}

.recommendation-grid i {
  position: absolute;
  right: 9px;
  bottom: 6px;
  font-size: 10px;
  font-style: normal;
}

.transport-section {
  margin-top: 17px;
}

.transport-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
}

.transport-grid button {
  height: 77px;
  padding: 10px 13px;
  display: grid;
  grid-template-columns: 49px 1fr 12px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 17px;
  background: rgba(255,253,249,.91);
  box-shadow: 0 7px 13px rgba(50,37,27,.1);
  color: #153f6b;
  cursor: pointer;
  text-align: left;
}

.transport-grid button > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #173f6b;
  color: white;
  font-size: 11px;
  font-weight: 800;
}

.transport-grid button:nth-child(2) > span {
  background: #d84136;
}

.transport-grid button:nth-child(3) > span {
  background: #3a8c66;
}

.transport-grid button:nth-child(4) > span {
  background: #d08f2c;
}

.transport-grid button > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.transport-grid strong {
  font-size: 15px;
}

.transport-grid small {
  color: #737c87;
  font-size: 10px;
}

.transport-grid i {
  font-size: 21px;
  font-style: normal;
}

.transport-info {
  min-height: 145px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 18px;
  background: rgba(255,253,249,.9);
  box-shadow: 0 7px 13px rgba(50,37,27,.1);
}

.transport-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.transport-label > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #173f70;
  color: white;
  font-size: 11px;
  font-weight: 800;
}

.transport-info:nth-child(2) .transport-label > span {
  background: #d84136;
}

.transport-info:nth-child(3) .transport-label > span {
  background: #3a8c66;
}

.transport-info:nth-child(4) .transport-label > span {
  background: #d08f2c;
}

.transport-info textarea,
.service-alert textarea {
  width: 100%;
  border: 1px solid #e2d8ca;
  border-radius: 10px;
  background: rgba(248,243,235,.78);
  color: #536172;
  font: inherit;
  line-height: 1.35;
  resize: vertical;
}

.transport-info textarea {
  min-height: 64px;
  margin-top: 9px;
  padding: 8px;
  font-size: 11px;
}

.service-alert {
  min-height: 74px;
  margin-top: 10px;
  padding: 11px 14px;
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 12px;
  border: 1px solid #e8c98f;
  border-radius: 16px;
  background: rgba(255,247,232,.9);
}

.service-alert strong {
  color: #a56612;
  font-size: 14px;
}

.service-alert textarea {
  min-height: 49px;
  padding: 8px 10px;
  font-size: 12px;
}

.airport-section {
  margin-top: 17px;
  padding: 13px 16px;
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 20px;
  background: rgba(255,253,249,.84);
  box-shadow: 0 8px 14px rgba(50,37,27,.09);
}

.airport-section > button {
  height: 56px;
  padding: 0 13px;
  display: grid;
  grid-template-columns: 47px 1fr 12px;
  align-items: center;
  border: 1px solid #e5dacf;
  border-radius: 14px;
  background: #fffaf2;
  color: #153f6b;
  cursor: pointer;
  text-align: left;
}

.airport-section > button strong {
  font-size: 15px;
}

.airport-section > button span {
  color: #697481;
  font-size: 12px;
}

.airport-section > button i {
  font-size: 20px;
  font-style: normal;
}

.airport-info {
  height: 62px;
  padding: 8px 13px;
  display: grid;
  grid-template-columns: 45px 1fr;
  align-items: center;
  border: 1px solid #e7dccd;
  border-radius: 14px;
  background: rgba(255,250,242,.74);
}

.airport-info strong {
  grid-row: 1 / 3;
  font-size: 16px;
}

.airport-info span {
  color: #5f6d7e;
  font-size: 12px;
}

.airport-info small {
  color: #a06f2c;
  font-size: 11px;
  font-weight: 700;
}

.area-home {
  width: 50%;
  height: 55px;
  margin: 18px auto 0;
  display: block;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 18px;
  background: rgba(255,253,249,.9);
  box-shadow: 0 8px 14px rgba(50,37,27,.1);
  color: #153f6b;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
}

@media (max-height: 740px) {
  .area-header { height: 70px; }
  .area-title { height: 82px; }
  .recommendation-grid button { height: 110px; }
  .transport-grid button { height: 68px; }
  .airport-section { margin-top: 12px; }
  .area-home { margin-top: 12px; height: 48px; }
}

.nearby-detail-workspace {
  width: min(820px, 88vw);
  margin: 0 auto;
  padding: 48px 0 24px;
}

.nearby-detail-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.nearby-detail-title > span {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 25px;
  background: rgba(255,249,239,.82);
  box-shadow: 0 12px 22px rgba(50,37,27,.15);
  font-family: "Segoe UI Emoji", sans-serif;
  font-size: 54px;
}

.nearby-detail-title h1 {
  font-family: Georgia, serif;
  font-size: 44px;
}

.nearby-detail-title p {
  margin-top: 5px;
  color: #687585;
  font-size: 17px;
}

.nearby-detail-card {
  margin-top: 40px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 25px;
  background: rgba(255,253,249,.82);
  box-shadow: 0 14px 25px rgba(50,37,27,.14);
  backdrop-filter: blur(13px);
}

.nearby-detail-card h2 {
  font-family: Georgia, serif;
  font-size: 26px;
}

.nearby-detail-card p {
  margin-top: 7px;
  color: #667383;
}

.nearby-detail-card textarea {
  width: 100%;
  min-height: 230px;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid #ddd1c1;
  border-radius: 17px;
  background: rgba(248,243,235,.8);
  color: #334b64;
  font: 15px/1.55 Inter, "Segoe UI", Arial, sans-serif;
  resize: vertical;
}

.nearby-detail-actions {
  width: 78%;
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.nearby-detail-actions button {
  height: 58px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 18px;
  background: rgba(255,253,249,.88);
  box-shadow: 0 8px 14px rgba(50,37,27,.1);
  color: #173f70;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
}

.nearby-detail-actions button:first-child {
  background: linear-gradient(100deg, #2a6293, #143f6b);
  color: white;
}

.guide-detail-reference {
  overflow: auto;
}

.guide-detail-workspace {
  width: min(1010px, 91vw);
  margin: 0 auto;
  padding: 18px 0 24px;
}

.guide-detail-hero {
  height: 145px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.guide-detail-hero img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  filter: drop-shadow(0 10px 8px rgba(50,36,25,.18));
}

.guide-detail-hero small {
  color: #b07a32;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

.guide-detail-hero h1 {
  margin-top: 2px;
  font-family: Georgia, serif;
  font-size: 42px;
}

.guide-detail-hero p {
  margin-top: 4px;
  color: #687585;
  font-size: 15px;
}

.guide-detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.guide-notes-card,
.guide-media-card {
  min-height: 405px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 24px;
  background: rgba(255,253,249,.84);
  box-shadow: 0 13px 24px rgba(50,37,27,.14);
  backdrop-filter: blur(13px);
}

.guide-notes-card h2,
.guide-media-card h2 {
  font-family: Georgia, serif;
  font-size: 24px;
}

.guide-notes-card > p,
.guide-media-card > p {
  margin-top: 5px;
  color: #6a7583;
  font-size: 13px;
}

.guide-notes-card textarea {
  width: 100%;
  min-height: 290px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #ddd1c1;
  border-radius: 16px;
  background: rgba(248,243,235,.82);
  color: #334b64;
  font: 14px/1.55 Inter, "Segoe UI", Arial, sans-serif;
  resize: vertical;
}

.guide-upload {
  height: 92px;
  margin-top: 16px;
  display: grid;
  grid-template-columns: 52px 1fr;
  align-content: center;
  align-items: center;
  column-gap: 12px;
  border: 1px dashed #b99767;
  border-radius: 16px;
  background: rgba(247,239,227,.72);
  cursor: pointer;
}

.guide-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.guide-upload > span {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  margin-left: 13px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #173f70;
  color: white;
  font-size: 27px;
}

.guide-upload strong {
  align-self: end;
  font-size: 14px;
}

.guide-upload small {
  align-self: start;
  color: #74808e;
  font-size: 11px;
}

.guide-media-grid {
  max-height: 205px;
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  overflow: auto;
}

.guide-media-grid.empty {
  min-height: 145px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(246,240,232,.55);
  color: #7b8490;
  font-size: 12px;
}

.guide-media-grid figure {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #eee4d6;
}

.remove-guide-media {
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 7px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 50%;
  background: rgba(143,47,36,.9);
  box-shadow: 0 4px 8px rgba(45,28,22,.2);
  color: white;
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
}

.guide-media-grid img,
.guide-media-grid video {
  width: 100%;
  height: 125px;
  display: block;
  object-fit: cover;
  background: #142f4c;
}

.guide-media-grid figcaption {
  padding: 6px 8px;
  overflow: hidden;
  color: #546272;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.save-guide-media {
  width: 100%;
  height: 44px;
  margin-top: 12px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(100deg, #2a6293, #143f6b);
  box-shadow: 0 7px 13px rgba(23,63,100,.18);
  color: white;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.save-guide-media.saved {
  background: linear-gradient(100deg, #3f8d64, #246d48);
}

.guide-detail-actions {
  width: 64%;
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.guide-detail-actions button {
  height: 55px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 18px;
  background: rgba(255,253,249,.88);
  box-shadow: 0 8px 14px rgba(50,37,27,.1);
  color: #173f70;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.guide-detail-actions button:first-child {
  background: linear-gradient(100deg, #2a6293, #143f6b);
  color: white;
}

body.host-portal-view {
  background: #eef1f3;
}

body.host-portal-view::before,
body.host-portal-view::after {
  display: none;
}

.host-portal {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: 225px 1fr;
  overflow: hidden;
  background: #eef1f3;
  color: #173f70;
}

.host-sidebar {
  padding: 26px 18px 20px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #173f70, #0d3158);
  color: white;
  box-shadow: 8px 0 24px rgba(14,42,70,.12);
}

.host-portal-brand {
  padding: 0 10px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.host-portal-brand > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #f7f1e7;
  color: #173f70;
  font-size: 22px;
}

.host-portal-brand > div,
.host-profile > div {
  display: flex;
  flex-direction: column;
}

.host-portal-brand strong {
  font-family: Georgia, serif;
  letter-spacing: 2px;
}

.host-portal-brand small {
  margin-top: 3px;
  color: #d8bb89;
  font-size: 9px;
  letter-spacing: 2px;
}

.host-sidebar nav {
  margin-top: 25px;
  display: grid;
  gap: 7px;
}

.host-sidebar nav button {
  height: 48px;
  padding: 0 13px;
  display: grid;
  grid-template-columns: 25px 1fr auto;
  align-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(255,255,255,.72);
  cursor: pointer;
  text-align: left;
  font-size: 14px;
}

.host-sidebar nav button.active {
  background: rgba(255,255,255,.13);
  color: white;
}

.host-sidebar nav button b {
  min-width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #c8a46a;
  color: #173f70;
  font-size: 10px;
}

.host-profile {
  margin-top: auto;
  padding: 16px 8px 0;
  display: flex;
  align-items: center;
  gap: 11px;
  border-top: 1px solid rgba(255,255,255,.14);
}

.host-profile > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #c8a46a;
  color: #173f70;
  font-size: 12px;
  font-weight: 800;
}

.host-profile strong {
  font-size: 12px;
}

.host-profile small {
  margin-top: 2px;
  color: rgba(255,255,255,.58);
  font-size: 10px;
}

.host-dashboard {
  padding: 22px 28px 26px;
  overflow: auto;
}

.host-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.host-dashboard-header > div:first-child > small,
.host-panel-heading small {
  color: #a1702d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.7px;
}

.host-dashboard-header h1 {
  margin-top: 2px;
  font-size: 29px;
}

.host-dashboard-header p {
  margin-top: 3px;
  color: #6a7582;
  font-size: 12px;
}

.host-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kiosk-online {
  color: #298455;
  font-size: 12px;
  font-weight: 700;
}

.host-header-actions button {
  height: 42px;
  padding: 0 16px;
  border: 1px solid #d8dfe4;
  border-radius: 12px;
  background: white;
  color: #173f70;
  cursor: pointer;
  font-weight: 700;
}

.host-header-actions .host-language-selector {
  min-width: 102px;
  padding: 0 10px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: 8px;
  border-color: #cfd9df;
}

.host-language-selector span {
  color: #87919a;
  font-size: 12px;
}

.host-language-selector span.active {
  color: #173f70;
  font-weight: 900;
}

.host-language-selector i {
  width: 1px;
  height: 22px;
  background: #d8dfe3;
}

.host-stats {
  margin-top: 17px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.host-stats article {
  min-height: 84px;
  padding: 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #dde3e7;
  border-radius: 15px;
  background: white;
  box-shadow: 0 5px 12px rgba(30,54,75,.05);
}

.host-stats article > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  border-radius: 12px;
  background: #edf3f7;
  color: #23567f;
}

.host-stats article > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.host-stats small {
  color: #7a8490;
  font-size: 9px;
  text-transform: uppercase;
}

.host-stats strong {
  margin-top: 2px;
  font-size: 17px;
}

.host-stats p {
  margin-top: 2px;
  overflow: hidden;
  color: #76818d;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.host-dashboard-grid {
  margin-top: 15px;
  display: grid;
  grid-template-columns: 2.2fr .8fr;
  gap: 15px;
}

.host-checkin-panel,
.host-publish-panel,
.host-content-panel {
  border: 1px solid #dce3e7;
  border-radius: 18px;
  background: white;
  box-shadow: 0 6px 15px rgba(30,54,75,.06);
}

.host-checkin-panel {
  min-height: 280px;
  padding: 18px 20px;
}

.host-publish-panel {
  min-height: 280px;
  padding: 18px;
}

.host-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.host-panel-heading h2 {
  margin-top: 2px;
  font-size: 20px;
}

.host-panel-heading > span {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.host-panel-heading > span.pending {
  background: #fff4dd;
  color: #a7670b;
}

.host-panel-heading > span.completed {
  background: #e5f5ea;
  color: #28754b;
}

.host-reservation {
  margin-top: 18px;
  padding: 14px;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 13px;
  border-radius: 14px;
  background: #f4f7f9;
}

.host-guest-avatar {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #173f70;
  color: white;
  font: 700 20px Georgia, serif;
}

.host-reservation > div {
  display: flex;
  flex-direction: column;
}

.host-reservation small {
  color: #9c733d;
  font-size: 8px;
  letter-spacing: 1px;
}

.host-reservation strong {
  margin-top: 3px;
  font-size: 18px;
}

.host-reservation strong em {
  color: #71808d;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.host-reservation p,
.host-reservation time {
  margin-top: 4px;
  color: #78838e;
  font-size: 10px;
}

.host-verification-progress {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #a56a18;
  font-size: 11px;
  font-weight: 700;
}

.host-verification-progress span.done {
  color: #32805a;
}

.host-verification-progress i {
  width: 38px;
  height: 1px;
  background: #d8dfe3;
}

.host-call-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.host-call-actions button,
.host-call-controls button {
  height: 40px;
  padding: 0 16px;
  border-radius: 11px;
  cursor: pointer;
  font-weight: 700;
}

.host-call-actions .decline {
  border: 1px solid #d9dfe3;
  background: white;
  color: #687581;
}

.host-call-actions .accept {
  border: 0;
  background: #173f70;
  color: white;
}

.host-call-actions .completed {
  border: 0;
  background: #e5f5ea;
  color: #28754b;
}

.publish-illustration {
  min-height: 158px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.publish-illustration > span {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef3f7;
  color: #285d87;
  font-size: 28px;
}

.publish-illustration strong {
  margin-top: 10px;
  font-size: 14px;
}

.publish-illustration small {
  margin-top: 4px;
  color: #7a8490;
  font-size: 10px;
}

.host-publish-panel > button {
  width: 100%;
  height: 43px;
  border: 0;
  border-radius: 12px;
  background: #173f70;
  color: white;
  cursor: pointer;
  font-weight: 800;
}

.host-publish-panel > button.published {
  background: #e5f5ea;
  color: #28754b;
  cursor: default;
}

.host-content-panel {
  margin-top: 15px;
  padding: 16px 18px;
}

.host-panel-heading > button {
  border: 0;
  background: transparent;
  color: #2c628b;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.host-content-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.host-content-grid > button {
  height: 74px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #e0e5e8;
  border-radius: 13px;
  background: #fafbfc;
  color: #173f70;
  cursor: pointer;
  text-align: left;
}

.host-content-grid img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.host-content-grid span {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.host-content-grid strong {
  font-size: 12px;
}

.host-content-grid small {
  margin-top: 3px;
  overflow: hidden;
  color: #7a8490;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.host-content-grid b {
  color: #9a6c2e;
  font-size: 10px;
}

.host-video-stage {
  position: relative;
  height: 174px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 15px;
  background: linear-gradient(145deg, #173f70, #071f39);
}

.guest-video {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

.guest-video > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #c8a46a;
  color: #173f70;
  font: 700 24px Georgia, serif;
}

.guest-video strong {
  margin-top: 8px;
}

.guest-video small {
  margin-top: 3px;
  color: rgba(255,255,255,.65);
}

.host-self-video {
  position: absolute;
  right: 11px;
  bottom: 11px;
  width: 100px;
  height: 65px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 10px;
  background: #315f83;
  color: white;
  font-size: 10px;
}

.host-call-controls {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.host-call-controls button {
  border: 1px solid #d9dfe3;
  background: white;
  color: #526474;
}

.host-call-controls button.complete {
  border: 0;
  background: #2d8057;
  color: white;
}

@media (max-width: 1050px) {
  .host-portal { grid-template-columns: 185px 1fr; }
  .host-dashboard { padding-right: 18px; padding-left: 18px; }
  .host-content-grid { grid-template-columns: repeat(2, 1fr); }
}

.guide-reference {
  width: 100%;
  min-height: 100%;
  color: #173f70;
  overflow: auto;
}

.guide-header {
  height: 84px;
  padding: 0 30px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: rgba(247,241,231,.76);
  backdrop-filter: blur(15px);
}

.guide-back {
  width: 53px;
  height: 53px;
  border: 0;
  border-radius: 17px;
  background: rgba(255,253,249,.86);
  box-shadow: 0 6px 13px rgba(52,38,27,.12);
  color: #173f70;
  cursor: pointer;
  font-size: 28px;
}

.guide-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  letter-spacing: 7px;
}

.guide-brand strong {
  font-family: Georgia, serif;
  font-size: 29px;
  font-weight: 500;
}

.guide-brand small {
  margin-top: 3px;
  color: #a77c43;
  font-size: 10px;
  letter-spacing: 5px;
}

.guide-guest {
  justify-self: end;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255,253,249,.8);
  box-shadow: 0 6px 13px rgba(52,38,27,.08);
  color: #606b78;
}

.guide-workspace {
  width: min(1120px, 92vw);
  margin: 0 auto;
  padding: 12px 0 20px;
}

.guide-hero {
  height: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
}

.guide-hero img {
  width: 135px;
  height: 112px;
  border-radius: 19px;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.guide-hero h1 {
  font-size: 48px;
}

.guide-hero p {
  margin-top: 4px;
  color: #6b7480;
  font-size: 17px;
}

.guide-layout {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 18px;
}

.guide-tip {
  height: 54px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #e8c98f;
  border-radius: 14px;
  background: rgba(255,246,226,.84);
}

.guide-tip b {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d2a04e;
  color: white;
  font-family: Georgia, serif;
  font-size: 21px;
}

.topic-grid {
  margin-top: 11px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
}

.topic-grid button {
  height: 175px;
  padding: 11px 8px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  border-radius: 21px;
  background: linear-gradient(145deg, rgba(255,253,249,.97), rgba(241,232,220,.95));
  box-shadow: 0 9px 17px rgba(49,36,26,.15), inset 0 1px 1px white;
  color: #173f70;
  cursor: pointer;
}

.topic-grid img {
  width: 128px;
  height: 108px;
  border-radius: 15px;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.topic-grid strong {
  font-size: 16px;
}

.topic-grid span {
  margin-top: 3px;
  color: #747d87;
  font-size: 10px;
}

.house-rules {
  padding: 18px 19px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 23px;
  background: rgba(255,253,249,.92);
  box-shadow: 0 12px 22px rgba(49,36,26,.14);
}

.rules-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e1d8cc;
}

.rules-title > span {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, #416f98, #173f70);
  box-shadow: inset 3px 3px 5px rgba(255,255,255,.17), 0 5px 8px rgba(42,31,23,.18);
  color: #fff4df;
  font-size: 27px;
  font-weight: 800;
}

.rules-title h2 {
  font-size: 25px;
}

.rules-title p {
  margin-top: 2px;
  color: #747d87;
  font-size: 11px;
}

.house-rules ol {
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}

.house-rules li {
  min-height: 39px;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  border-bottom: 1px solid #eee7dd;
  color: #525c68;
  font-size: 12px;
  line-height: 1.25;
}

.house-rules li i {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eaf2ed;
  color: #258055;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.house-rules > button {
  width: 100%;
  height: 43px;
  margin-top: 12px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(100deg, #315f8e, #173f70);
  color: white;
  cursor: pointer;
  font-weight: 700;
}

.guide-home {
  width: 48%;
  height: 49px;
  margin: 13px auto 0;
  display: block;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 17px;
  background: rgba(255,253,249,.9);
  box-shadow: 0 8px 14px rgba(50,37,27,.1);
  color: #173f70;
  cursor: pointer;
  font-size: 17px;
  font-weight: 700;
}

@media (max-height: 740px) {
  .guide-header { height: 70px; }
  .guide-hero { height: 105px; }
  .topic-grid button { height: 155px; }
  .topic-grid img { height: 91px; }
  .house-rules li { min-height: 34px; }
}

.hero-phone.master-hero-image {
  width: 185px;
  height: 158px;
  border: 0;
  background: transparent;
  filter: none;
  text-shadow: none;
  transform: none;
}

.hero-towels.master-hero-image {
  width: 255px;
  height: 185px;
  filter: none;
}

.area-pin.master-hero-image {
  width: 92px;
  height: 84px;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  transform: none;
}

.life-ring.master-hero-image {
  width: 176px;
  height: 176px;
  margin: 0 auto;
  border: 0;
  border-radius: 22px;
  background: transparent;
  box-shadow: none;
}

.life-ring.master-hero-image::before,
.life-ring.master-hero-image::after {
  display: none;
}

body {
  background: transparent;
}

body::before {
  position: fixed;
  inset: -45px;
  content: "";
  background: url("assets/loft-cover.png") center / cover no-repeat;
  filter: blur(28px) saturate(0.8);
  transform: scale(1.08);
  z-index: -2;
}

body.home-view::before {
  inset: -16px;
  filter: blur(7px) saturate(.88);
  transform: scale(1.035);
}

body.home-view::after {
  background:
    linear-gradient(to bottom, rgba(248, 239, 226, .2) 0%, rgba(246, 235, 219, .03) 48%, rgba(13, 28, 42, .63) 94%),
    rgba(255, 250, 243, .02);
  backdrop-filter: none;
}

.reference-home {
  width: 100%;
  max-width: none;
  padding: 14px 0 72px;
  gap: 15px;
  overflow: hidden;
}

.reference-home .home-header {
  position: relative;
  height: 118px;
  justify-content: center;
  align-items: flex-start;
}

.language-selector {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 28px;
  min-width: 218px;
  min-height: 58px;
  padding: 7px 12px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 18px;
  background: rgba(255,253,249,.9);
  box-shadow: 0 9px 20px rgba(48,35,25,.18), inset 0 1px 1px white;
  color: #657180;
  cursor: pointer;
  backdrop-filter: blur(13px);
}

.language-selector > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.language-selector b {
  font-size: 18px;
}

.language-selector small {
  font-size: 10px;
}

.language-selector > span.active {
  color: #173f70;
}

.language-selector > span.active b {
  text-decoration: underline;
  text-decoration-color: #c8a46a;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

.language-selector > i {
  width: 1px;
  height: 35px;
  background: #d9cbb8;
}

.brand-mark {
  position: absolute;
  top: 0;
  left: 28px;
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #123b68;
  letter-spacing: 2px;
}

.brand-mark svg {
  width: 60px;
  height: 55px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
}

.brand-mark strong {
  margin-top: 1px;
  font-size: 15px;
}

.brand-mark small {
  margin-top: 2px;
  font-size: 9px;
}

.hero-title {
  text-align: center;
  color: #123b68;
}

.hero-title h1 {
  font-family: Georgia, serif;
  font-size: clamp(42px, 4.6vw, 62px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 9px;
  color: #123b68;
}

.master-milano {
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #a87924;
}

.master-milano i {
  width: 72px;
  height: 2px;
  background: #b78a37;
}

.master-milano span {
  font-family: Georgia, serif;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 7px;
  color: #80520f;
  text-shadow: 0 1px 2px rgba(255,255,255,.9);
}

.reference-home .guest-pill {
  position: absolute;
  top: 0;
  right: 28px;
  min-height: 50px;
  padding: 0 19px;
  gap: 10px;
  border-color: rgba(255,255,255,.65);
  background: rgba(255, 253, 249, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
  color: #173e68;
  font-size: 14px;
}

.guest-symbol {
  color: #1d527e;
  font-size: 16px;
}

.reference-home .action-grid {
  width: auto;
  margin: 0;
  grid-template-columns: repeat(4, 1fr);
  height: 420px;
  flex: 0 0 420px;
  grid-template-rows: repeat(2, 202.5px);
  gap: 15px;
}

.home-main-row {
  width: min(94vw, 1080px);
  height: calc(100vh - 210px);
  min-height: 500px;
  max-height: 570px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(350px, 1fr);
  gap: 18px;
}

.master-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 64px;
  padding: 0 34px;
  display: grid;
  grid-template-columns: auto 1px auto 1fr auto;
  align-items: center;
  gap: 22px;
  border-top: 1px solid rgba(200,164,106,.42);
  background: rgba(247,241,231,.92);
  box-shadow: 0 -8px 24px rgba(33,24,18,.1), inset 0 1px 0 rgba(255,255,255,.8);
  color: #173f70;
  backdrop-filter: blur(16px);
}

.footer-weather,
.footer-date,
.footer-thanks,
.footer-contact {
  display: flex;
  align-items: center;
}

.footer-weather {
  gap: 9px;
}

.footer-weather strong {
  font-size: 18px;
}

.footer-weather small {
  color: #686868;
  font-size: 13px;
}

.weather-sun {
  position: relative;
  width: 30px;
  height: 30px;
  display: block;
  border: 3px solid #c08a27;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(93,62,20,.15);
}

.weather-icon {
  min-width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c58d32;
  font-family: "Segoe UI Symbol", "Segoe UI Emoji", sans-serif;
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 4px 4px rgba(55,39,25,.14));
}

.weather-sun::before,
.weather-sun::after,
.weather-sun i::before,
.weather-sun i::after {
  position: absolute;
  background: #c08a27;
  content: "";
}

.weather-sun::before { top: -9px; left: 12px; width: 2px; height: 6px; box-shadow: 0 39px 0 #c08a27; }
.weather-sun::after { top: 12px; left: -9px; width: 6px; height: 2px; box-shadow: 39px 0 0 #c08a27; }
.weather-sun i::before { top: -5px; left: -4px; width: 2px; height: 6px; transform: rotate(-45deg); box-shadow: 27px 27px 0 #c08a27; }
.weather-sun i::after { top: -5px; right: -4px; width: 2px; height: 6px; transform: rotate(45deg); box-shadow: -27px 27px 0 #c08a27; }

.footer-divider {
  width: 1px;
  height: 30px;
  background: #d6c8b5;
}

.footer-date {
  min-width: 250px;
  gap: 12px;
}

.footer-date strong {
  font-size: 15px;
}

.footer-date span {
  color: #686868;
  font-size: 17px;
}

#footer-calendar {
  padding-right: 12px;
  border-right: 1px solid #d6c8b5;
  font-size: 14px;
}

.footer-thanks {
  justify-self: center;
  gap: 11px;
}

.footer-thanks span {
  color: #b17c20;
  font-size: 33px;
}

.footer-thanks strong {
  font-family: Georgia, serif;
  font-size: 18px;
}

.footer-contact {
  gap: 16px;
  font-size: 15px;
  font-weight: 600;
}

.footer-contact i {
  width: 1px;
  height: 30px;
  background: #d6c8b5;
}

.internal-3d-icon {
  width: 65px;
  height: 58px;
  margin-right: 15px;
  object-fit: contain;
}

.master-inner-icon {
  width: 65px !important;
  height: 62px !important;
  border-radius: 0 !important;
  object-fit: contain;
}

.page-master-icon {
  width: 90px;
  height: 82px;
  object-fit: contain;
}

.wifi-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.master-hero-image {
  object-fit: contain;
}

.door-art img {
  width: 105px;
  height: 105px;
  object-fit: contain;
}

.home-main-row .action-grid {
  height: 92%;
  align-self: center;
  grid-template-rows: repeat(2, 1fr);
}

.shop-loft-card {
  position: relative;
  height: 100%;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow:
    0 18px 34px rgba(37,28,22,.2);
  color: #153e69;
  cursor: default;
  text-align: center;
}

.shop-loft-card::before {
  position: absolute;
  inset: -20px;
  display: block;
  background: url("assets/shop_loft_visual.png?v=202608170006") center / cover no-repeat;
  content: "";
  filter: blur(20px);
  opacity: .34;
  transform: scale(1.08);
}

.shop-full-visual {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 10px 16px rgba(50,36,25,.14));
}

.shop-visual-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  aspect-ratio: 2 / 3;
}

.shop-qr-clickable {
  position: absolute;
  top: 54.5%;
  left: 39%;
  width: 22%;
  height: 14.7%;
  display: block;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
}

.shop-qr-clickable input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.shop-qr-clickable > img {
  width: 100%;
  height: 100%;
  display: block;
  background: white;
  object-fit: contain;
}

.shop-spark {
  position: absolute;
  color: #c89232;
  font-size: 25px;
}

.shop-spark.one {
  top: 28px;
  left: 19px;
}

.shop-spark.two {
  top: 53px;
  right: 21px;
  font-size: 17px;
}

.shop-art {
  position: relative;
  width: 145px;
  height: 98px;
}

.shop-bag {
  position: absolute;
  left: 1px;
  bottom: 0;
  width: 96px;
  height: 75px;
  display: grid;
  place-items: end center;
  padding-bottom: 16px;
  background: linear-gradient(145deg, #294e78, #102f54);
  box-shadow: 0 8px 9px rgba(43,30,20,.25);
  transform: perspective(100px) rotateY(5deg);
}

.shop-bag::before,
.shop-bag::after {
  position: absolute;
  top: -24px;
  width: 37px;
  height: 43px;
  border: 4px solid #b98734;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  content: "";
}

.shop-bag::before { left: 12px; }
.shop-bag::after { right: 12px; }

.shop-bag i {
  color: #d7ac62;
  font-family: Georgia, serif;
  font-size: 11px;
  font-style: normal;
  letter-spacing: 2px;
}

.shop-gift {
  position: absolute;
  right: 0;
  bottom: -3px;
  width: 71px;
  height: 66px;
  background:
    linear-gradient(90deg, transparent 28px, #d0a55e 28px 40px, transparent 40px),
    linear-gradient(145deg, #f6e4bd, #d6b276);
  box-shadow: 0 7px 8px rgba(43,30,20,.23);
}

.shop-gift::before {
  position: absolute;
  top: -9px;
  left: -4px;
  width: 79px;
  height: 12px;
  background: #ecd4a4;
  box-shadow: inset 0 -3px 3px rgba(128,82,34,.14);
  content: "";
}

.shop-gift i::before,
.shop-gift i::after {
  position: absolute;
  top: -28px;
  width: 34px;
  height: 24px;
  border: 8px solid #173f6c;
  border-radius: 80% 10% 80% 10%;
  content: "";
}

.shop-gift i::before {
  left: 8px;
  transform: rotate(27deg);
}

.shop-gift i::after {
  right: 6px;
  transform: scaleX(-1) rotate(27deg);
}

.shop-copy > strong {
  display: block;
  margin-top: 10px;
  font-family: Georgia, serif;
  font-size: 32px;
  line-height: .95;
}

.shop-copy > span {
  width: 48px;
  height: 3px;
  margin: 10px auto;
  display: block;
  background: #ba8735;
}

.shop-copy p {
  color: #4e5965;
  font-size: 12px;
  line-height: 1.4;
}

.shop-qr {
  position: relative;
  width: 105px;
  height: 105px;
  margin-top: 11px;
  display: grid;
  place-items: center;
  border: 9px solid #fffaf0;
  border-radius: 14px;
  background: repeating-conic-gradient(#143a64 0 25%, #fff 0 50%) 0 0 / 15px 15px;
  box-shadow: 0 7px 11px rgba(31,22,16,.2);
}

.shop-qr::before,
.shop-qr::after {
  position: absolute;
  top: 4px;
  width: 23px;
  height: 23px;
  border: 6px solid #143a64;
  background: white;
  content: "";
}

.shop-qr::before { left: 4px; }
.shop-qr::after { right: 4px; }

.shop-qr i {
  padding: 4px;
  border-radius: 5px;
  background: #fffaf0;
  color: #143a64;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  z-index: 2;
}

.shop-loft-card > small {
  margin-top: 7px;
  color: rgba(255,255,255,.8);
  font-size: 10px;
}

.reference-home .action-card {
  position: relative;
  min-height: 0;
  padding: 12px 8px 13px;
  gap: 3px;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,253,248,.74), rgba(242,233,221,.66));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.9),
    0 13px 24px rgba(34, 27, 22, .24);
  backdrop-filter: blur(13px) saturate(.88);
}

.reference-home .master-object {
  width: 92%;
  height: 58%;
  flex: 0 0 58%;
  margin-bottom: 2px;
  overflow: hidden;
}

.reference-home .master-object::before,
.reference-home .master-object::after {
  display: none !important;
}

.reference-home .master-object img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.reference-home .action-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.9);
  box-shadow: inset 0 1px 1px white, 0 17px 29px rgba(34,27,22,.3);
}

.reference-home .action-card.checkin-completed {
  background: linear-gradient(145deg, rgba(239,251,242,.8), rgba(204,234,213,.7));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    0 13px 24px rgba(40,105,65,.22);
}

.reference-home .action-card.checkin-pending {
  z-index: 10;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.92),
    0 22px 38px rgba(25,62,103,.34);
  animation: checkin-pending-float 2.4s ease-in-out infinite;
}

.reference-home .action-card.checkin-pending .action-note {
  color: #aa6a12;
  font-weight: 800;
}

.reference-home .action-card.checkin-completed .action-note {
  color: #24784a;
  font-weight: 800;
}

.reference-home .action-card.checkin-pending::after {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d99a35;
  box-shadow: 0 0 0 0 rgba(217,154,53,.5);
  content: "";
  animation: checkin-pending-pulse 1.8s ease-out infinite;
}

@keyframes checkin-pending-float {
  0%, 100% { transform: scale(1.07) translateY(0); }
  50% { transform: scale(1.09) translateY(-7px); }
}

@keyframes checkin-pending-pulse {
  0% { box-shadow: 0 0 0 0 rgba(217,154,53,.55); }
  70%, 100% { box-shadow: 0 0 0 12px rgba(217,154,53,0); }
}

.reference-home .action-card.checkin-completed::after {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #278452;
  box-shadow: 0 5px 10px rgba(25,94,55,.22);
  color: white;
  content: "✓";
  font-size: 18px;
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  .reference-home .action-card.checkin-pending,
  .reference-home .action-card.checkin-pending::after {
    animation: none;
  }
}

.reference-home .action-card.checkin-locked {
  opacity: .45;
  filter: blur(1.8px) grayscale(.35);
  cursor: not-allowed;
  pointer-events: none;
  transform: scale(.97);
}

.reference-home .action-card.checkin-locked .action-note {
  font-size: 11px;
}

.shop-loft-card.checkin-locked {
  opacity: .58;
  filter: blur(1px) saturate(.75);
}

.reference-home .action-label {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  color: #123b68;
  font-family: Georgia, serif;
  font-size: 21px;
  font-weight: 750;
}

.reference-home .action-note {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

.shop-master-art {
  width: 88%;
  height: 29%;
  display: block;
  object-fit: contain;
}

.shop-master-qr {
  width: 132px;
  height: 132px;
  margin-top: 12px;
  display: block;
  border: 8px solid #fffaf0;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: 0 8px 13px rgba(33,23,16,.22);
}

.object-icon {
  position: relative;
  width: 88px;
  height: 82px;
  display: grid;
  place-items: center;
  margin-bottom: 1px;
  color: #174a78;
  isolation: isolate;
}

.object-icon > span {
  position: relative;
  display: block;
  color: transparent;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size: 61px;
  line-height: 1;
  filter:
    drop-shadow(0 9px 6px rgba(48, 36, 26, .3))
    drop-shadow(0 2px 1px rgba(255,255,255,.75));
  transform: translateY(-1px);
  z-index: 1;
}

.object-icon > span::before {
  position: absolute;
  inset: 0;
  content: attr(data-object);
}

.object-icon::before,
.object-icon::after {
  position: absolute;
  content: "";
}

.object-IN > span,
.object-HG > span,
.object-OUT > span {
  color: initial;
}

.object-IN::before {
  right: 11px;
  bottom: 6px;
  width: 31px;
  height: 31px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 50%;
  background: #f19a19;
  box-shadow: 0 4px 7px rgba(44,31,21,.28), inset 2px 2px 3px rgba(255,255,255,.3);
  z-index: 2;
}

.object-IN::after {
  right: 17px;
  bottom: 16px;
  width: 17px;
  height: 9px;
  border-bottom: 4px solid white;
  border-left: 4px solid white;
  filter: drop-shadow(0 2px 1px rgba(17,47,76,.4));
  transform: rotate(-45deg);
  z-index: 3;
}

.object-IN.completed::before {
  background: #16944f;
}

.object-WF > span {
  position: absolute;
  top: 15px;
  width: 69px;
  height: 43px;
  display: block;
  color: transparent;
  font-size: 0;
  filter: drop-shadow(3px 5px 3px rgba(30, 24, 20, .28));
}

.object-WF {
  filter: drop-shadow(0 7px 5px rgba(37,34,31,.2));
}

.object-WF > span::before,
.object-WF > span::after {
  position: absolute;
  left: 50%;
  border: solid #245983;
  border-width: 8px 8px 0;
  border-radius: 50% 50% 0 0;
  content: "";
  transform: translateX(-50%);
}

.object-WF > span::before {
  top: 0;
  width: 64px;
  height: 30px;
  box-shadow: inset 0 2px 0 #7192ae;
}

.object-WF > span::after {
  top: 21px;
  width: 35px;
  height: 17px;
  border-width: 7px 7px 0;
  box-shadow: inset 0 2px 0 #7192ae;
}

.object-WF::after {
  bottom: 8px;
  left: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(145deg, #527da1, #123f6a);
  box-shadow: inset 2px 2px 2px rgba(255,255,255,.24), 2px 4px 4px rgba(38,27,20,.28);
  transform: translateX(-50%);
}

.object-PH > span {
  color: #1e5687;
  font-family: Georgia, serif;
  font-size: 83px;
  font-weight: 900;
  transform: rotate(-28deg) translateY(-3px);
  text-shadow:
    3px 3px 0 #0f365d,
    6px 6px 7px rgba(30,22,16,.25),
    -1px -1px 0 #7898b4;
}

.object-TW > span,
.object-help > span {
  display: none;
}

.object-TW {
  width: 88px;
  height: 76px;
  filter: drop-shadow(0 9px 7px rgba(35,27,21,.26));
}

.object-TW > span {
  position: absolute;
  top: 7px;
  left: 21px;
  width: 55px;
  height: 21px;
  display: block;
  overflow: hidden;
  border-radius: 12px 14px 8px 9px;
  background:
    repeating-linear-gradient(0deg, rgba(158,130,93,.08) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #fffdf6, #e8d9c5);
  color: transparent;
  font-size: 0;
  box-shadow:
    inset 7px 2px 5px rgba(255,255,255,.9),
    inset -5px -4px 6px rgba(135,104,70,.14),
    0 3px 4px rgba(72,52,34,.18);
  transform: rotate(2deg);
}

.object-TW::before {
  bottom: 5px;
  left: 7px;
  width: 76px;
  height: 25px;
  border-radius: 13px 16px 15px 14px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 4px),
    linear-gradient(150deg, #47769c, #123f6b);
  box-shadow:
    inset 8px 3px 6px rgba(255,255,255,.16),
    inset -7px -5px 7px rgba(2,25,48,.3),
    0 5px 6px rgba(44,31,22,.24);
}

.object-TW::after {
  bottom: 26px;
  left: 12px;
  width: 69px;
  height: 25px;
  border-radius: 12px 15px 10px 13px;
  background:
    repeating-linear-gradient(0deg, rgba(145,115,80,.07) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #fffaf0, #dfceb5);
  box-shadow:
    inset 8px 3px 6px rgba(255,255,255,.85),
    inset -6px -4px 6px rgba(119,87,54,.13),
    0 4px 5px rgba(57,41,28,.18);
}

.object-CL::before {
  left: 29px;
  bottom: 4px;
  width: 46px;
  height: 54px;
  border: 1px solid #d6c8b6;
  border-radius: 7px 7px 13px 13px;
  background:
    linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.72) 8px 14px, transparent 14px),
    linear-gradient(145deg, #fffefb, #e7dac8);
  box-shadow:
    inset 5px 4px 7px white,
    inset -5px -5px 7px rgba(127,94,60,.1),
    0 8px 7px rgba(41,30,22,.25);
}

.object-CL::after {
  top: 7px;
  left: 20px;
  width: 57px;
  height: 18px;
  border-radius: 5px 9px 3px 4px;
  background:
    linear-gradient(145deg, #638aab, #164c79);
  box-shadow:
    -13px 4px 0 -4px #174c78,
    12px 11px 0 -5px #173e64,
    inset 3px 3px 4px rgba(255,255,255,.2);
  transform: skewX(-7deg);
}

.object-CL > span {
  position: absolute;
  right: 24px;
  bottom: 18px;
  display: block;
  color: #1d5685;
  font-family: Georgia, serif;
  font-size: 27px;
  line-height: 1;
  filter: drop-shadow(1px 2px 1px rgba(64,42,23,.18));
  z-index: 2;
}

.object-help {
  width: 71px;
  height: 71px;
  border: 14px solid #1d527f;
  border-radius: 50%;
  background: #f5e6cf;
  box-shadow: inset 4px 4px 6px rgba(255,255,255,.8), 0 8px 7px rgba(42,31,23,.28);
}

.object-help::before {
  inset: -14px;
  border: 14px solid transparent;
  border-top-color: #f4e3c8;
  border-bottom-color: #f4e3c8;
  border-radius: 50%;
  transform: rotate(45deg);
}

.action-note {
  color: #636a73;
  font-size: 13px;
  line-height: 1.2;
}

.reference-home .quick-row {
  width: 470px;
  height: 68px;
  margin: 16px auto 0;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}

.reference-home .quick-action {
  height: 68px;
  padding: 7px 16px;
  justify-content: flex-start;
  border-color: rgba(255,255,255,.25);
  border-radius: 20px;
  background: rgba(53, 58, 62, .44);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.26), 0 7px 16px rgba(0,0,0,.18);
  color: white;
  backdrop-filter: blur(15px);
}

.reference-home .mini-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.reference-home .quick-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.reference-home .quick-copy strong {
  font-size: 15px;
  font-weight: 500;
}

.reference-home .quick-copy small {
  color: rgba(255,255,255,.8);
  font-size: 13px;
}

.kiosk-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 52px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 13px;
  background: linear-gradient(100deg, rgba(28,67,103,.95), rgba(8,40,70,.97));
  color: rgba(255,255,255,.72);
  box-shadow: 0 -1px 0 rgba(255,255,255,.15);
  font-size: 14px;
}

.kiosk-footer i {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,.3);
}

.footer-time {
  margin-left: auto;
  color: rgba(255,255,255,.8);
  font-size: 21px;
}

.footer-time small {
  margin-left: 12px;
  font-size: 12px;
  font-weight: 400;
}

@media (max-height: 720px) {
  .reference-home .home-header { height: 120px; }
  .hero-title > span { margin-top: 6px; }
  .reference-home .action-grid { grid-template-rows: repeat(2, minmax(150px, 1fr)); }
  .reference-home .quick-row { margin-top: 2px; height: 60px; }
  .reference-home .quick-action { height: 60px; }
}

@media (max-width: 1000px) {
  .home-main-row {
    width: 96vw;
    grid-template-columns: minmax(0, 1.8fr) minmax(320px, 1fr);
    gap: 12px;
  }
  .reference-home .action-card { padding-right: 4px; padding-left: 4px; }
  .reference-home .action-label { font-size: 17px; }
  .shop-loft-card { padding-right: 10px; padding-left: 10px; }
}

body.checkin-view::before,
body.checkin-view::after {
  display: none;
}

body.checkout-view::before {
  filter: blur(19px) saturate(.74);
}

body.checkout-view::after {
  background: rgba(247, 239, 228, .64);
  backdrop-filter: blur(2px);
}

body.host-view::before {
  filter: blur(20px) saturate(.7);
}

body.host-view::after {
  background: rgba(247, 240, 231, .62);
  backdrop-filter: blur(2px);
}

body.help-view::before {
  filter: blur(20px) saturate(.7);
}

body.help-view::after {
  background: rgba(247, 240, 231, .57);
  backdrop-filter: blur(2px);
}

body.wifi-view::before {
  filter: blur(21px) saturate(.7);
}

body.wifi-view::after {
  background: rgba(247, 240, 231, .6);
  backdrop-filter: blur(2px);
}

body.extras-view::before {
  filter: blur(20px) saturate(.72);
}

body.extras-view::after {
  background: rgba(247, 239, 228, .61);
  backdrop-filter: blur(2px);
}

.checkin-reference {
  width: 100%;
  min-height: 100%;
  background: #fbfaf8;
  color: #101927;
  overflow: auto;
}

.checkin-topbar {
  height: 93px;
  padding: 0 3vw;
  display: flex;
  align-items: center;
  color: white;
  background:
    radial-gradient(circle at 52% -30%, rgba(39,87,130,.5), transparent 34%),
    linear-gradient(105deg, #082a4b, #031c37 70%, #082541);
}

.checkin-brand {
  width: 198px;
  border: 0;
  background: transparent;
  color: #e7c49b;
  cursor: pointer;
  text-align: left;
  letter-spacing: 5px;
}

.checkin-brand strong {
  display: block;
  font-size: 24px;
}

.checkin-brand small {
  display: block;
  width: 153px;
  margin-top: 8px;
  padding-top: 2px;
  border-top: 2px solid #d8b78f;
  text-align: center;
  font-size: 10px;
}

.top-divider {
  width: 1px;
  height: 58px;
  margin-right: 30px;
  background: rgba(255,255,255,.16);
}

.profile-icon {
  width: 53px;
  height: 53px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #f4dbb8, #d9b47f);
  color: #0c3155;
  font-size: 33px;
  box-shadow: inset 2px 2px 5px rgba(255,255,255,.6);
}

.checkin-heading {
  margin-left: 17px;
}

.checkin-heading h1 {
  color: white;
  font-size: 29px;
  letter-spacing: -.02em;
}

.checkin-heading p {
  margin-top: 2px;
  color: rgba(255,255,255,.9);
  font-size: 16px;
}

.top-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 15px;
}

.top-tools i {
  width: 1px;
  height: 46px;
  background: rgba(255,255,255,.16);
}

.top-tools button {
  border: 0;
  background: transparent;
  color: white;
  cursor: pointer;
}

.checkin-workspace {
  width: min(1188px, 88vw);
  margin: 0 auto;
  padding: 17px 0 30px;
}

.direct-verification {
  padding-top: 30px;
}

.verification-steps {
  height: 92px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}

.verification-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
}

.verification-step:not(:last-child)::after {
  position: absolute;
  top: 25px;
  right: 0;
  width: 41%;
  height: 1px;
  content: "";
  background: #d4d4d2;
}

.verification-step b {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  flex: 0 0 39px;
  border-radius: 50%;
  background: #092d52;
  color: white;
  font-size: 20px;
}

.verification-step span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.verification-step strong {
  font-size: 15px;
}

.verification-step small {
  color: #5e6268;
  font-size: 13px;
}

.verification-step em {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  margin-left: auto;
  border: 1px solid #d7d7d4;
  border-radius: 50%;
  background: white;
  font-style: normal;
}

.verification-step.current {
  margin: 0 12px;
  padding: 14px 20px;
  border: 1px solid #d8d7d4;
  border-radius: 14px;
  background: white;
  box-shadow: 0 8px 15px rgba(30,37,45,.13);
}

.verification-step.current::before {
  position: absolute;
  top: 0;
  right: 18%;
  left: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  background: #0b3d76;
  content: "";
}

.verification-step.upcoming b {
  background: #eee4d6;
  color: #1b1c1f;
}

.checkin-columns {
  display: grid;
  grid-template-columns: 2.1fr 1fr;
  gap: 16px;
}

.verification-card {
  border: 1px solid #e1dad0;
  border-radius: 14px;
  background: white;
  box-shadow: 0 3px 9px rgba(46,40,34,.06);
}

.verification-card h3 {
  font-size: 17px;
}

.reservation-card {
  padding: 20px 22px 12px;
}

.reservation-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reservation-heading > div > small {
  display: block;
  margin-top: 4px;
  color: #686d74;
  font-size: 12px;
}

.video-status {
  min-width: 145px;
  padding: 8px 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 12px;
  font-size: 21px;
}

.video-status > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.video-status small {
  color: #555d66;
  font-size: 11px;
}

.video-status strong {
  font-size: 13px;
}

.video-status.pending {
  border: 1px solid #efd2a4;
  background: #fff7eb;
  color: #e98b00;
}

.video-status.completed {
  border: 1px solid #a9d6bd;
  background: #edf8f1;
  color: #078743;
}

.stay-summary {
  height: 77px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.summary-avatar,
.privacy-card div > span {
  width: 53px;
  height: 53px;
  display: grid;
  place-items: center;
  flex: 0 0 53px;
  border-radius: 50%;
  background: #f5f0ea;
  font-size: 27px;
}

.summary-lead {
  min-width: 270px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.summary-lead strong,
.summary-fact strong {
  font-size: 20px;
}

.stay-summary > i {
  width: 1px;
  height: 53px;
  margin-left: auto;
  background: #ddd9d4;
}

.summary-fact {
  min-width: 120px;
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
}

.summary-fact > span {
  grid-row: 1 / 3;
  font-size: 23px;
}

.summary-fact small {
  font-size: 14px;
}

.guest-table {
  border-top: 1px solid #dedbd7;
}

.guest-row {
  min-height: 43px;
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  align-items: center;
  border-bottom: 1px solid #e5e2de;
  font-size: 14px;
}

.guest-row:last-child {
  border-bottom: 0;
}

.table-head {
  min-height: 35px;
  color: #34373c;
}

.guest-name {
  display: flex;
  align-items: center;
  gap: 13px;
}

.guest-name i {
  font-size: 20px;
  font-style: normal;
}

.guest-status {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

.guest-status b,
.guest-status em {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #079447;
  font-style: normal;
}

.guest-status em {
  color: #ff9800;
}

.guest-status small {
  color: inherit;
  font-size: 12px;
  font-weight: 400;
}

.family-row {
  min-height: 82px;
}

.family-row .guest-name > span {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 9px;
}

.family-row .guest-name small {
  grid-column: 1 / 3;
  margin-bottom: 3px;
  color: #6b727b;
  font-size: 11px;
}

.family-row .guest-name strong {
  color: #173f70;
  font-size: 16px;
}

.family-row .guest-name em {
  color: #6a7480;
  font-size: 13px;
  font-style: normal;
}

.family-row .guest-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

.family-row .guest-status b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.family-row .guest-status.pending {
  color: #d67d00;
}

.family-row .guest-status.pending b {
  border: 1px solid #edc989;
  background: #fff7e9;
  color: #d67d00;
}

.family-row .guest-status.completed {
  color: #078743;
}

.family-row .guest-status.completed b {
  border: 1px solid #a9d6bd;
  background: #edf8f1;
  color: #078743;
}

.privacy-card {
  padding: 20px 25px;
}

.privacy-card > div {
  min-height: 71px;
  display: flex;
  align-items: center;
  gap: 17px;
}

.privacy-card p {
  font-size: 14px;
  line-height: 1.55;
}

.privacy-card div > span {
  width: 50px;
  height: 50px;
  flex-basis: 50px;
  font-size: 23px;
}

.checkin-actions {
  margin-top: 17px;
  display: grid;
  grid-template-columns: 2fr .9fr 1fr;
  gap: 16px;
}

.video-action,
.privacy-action,
.checkin-home-action {
  height: 85px;
  border-radius: 13px;
  cursor: pointer;
}

.video-action {
  padding: 0 38px;
  display: flex;
  align-items: center;
  border: 0;
  background: linear-gradient(100deg, #123d72, #062c59);
  color: white;
  box-shadow: 0 7px 14px rgba(10,44,79,.18);
  text-align: left;
}

.video-action.completed {
  background: linear-gradient(100deg, #23724b, #0a5134);
}

.video-camera {
  margin-right: 24px;
  font-size: 28px;
}

.video-action > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.video-action strong {
  font-size: 21px;
}

.video-action small {
  color: rgba(255,255,255,.88);
  font-size: 14px;
}

.video-action > b {
  margin-left: auto;
  font-size: 47px;
  font-weight: 300;
}

.privacy-action {
  border: 1px solid #d4d1cc;
  background: white;
  color: #173c6e;
  font-size: 16px;
}

.checkin-home-action {
  border: 2px solid #173f70;
  background: #f7f1e7;
  box-shadow: 0 7px 13px rgba(24,63,111,.12);
  color: #173f70;
  font-size: 17px;
  font-weight: 800;
}

.privacy-editor-workspace {
  width: min(920px, 88vw);
  margin: 0 auto;
  padding: 52px 0 30px;
}

.privacy-editor-card {
  padding: 30px;
  border-radius: 25px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 30px rgba(21,38,57,.15);
}

.privacy-editor-card > div {
  text-align: center;
}

.privacy-editor-card > div small {
  color: #b07a32;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

.privacy-editor-card h2 {
  margin-top: 4px;
  color: #173f70;
  font-size: 32px;
}

.privacy-editor-card p {
  margin-top: 5px;
  color: #687585;
}

.privacy-editor-card textarea {
  width: 100%;
  min-height: 300px;
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #d8d2ca;
  border-radius: 17px;
  background: #f8f4ee;
  color: #334b64;
  font: 15px/1.6 Inter, "Segoe UI", Arial, sans-serif;
  resize: vertical;
}

.privacy-editor-card > button {
  width: 48%;
  height: 55px;
  margin: 18px auto 0;
  display: block;
  border: 0;
  border-radius: 17px;
  background: linear-gradient(100deg, #2a6293, #143f6b);
  box-shadow: 0 8px 15px rgba(23,63,100,.18);
  color: white;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
}

.privacy-editor-actions {
  width: 62%;
  margin: 20px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.privacy-editor-actions button {
  height: 55px;
  border: 1px solid #d4d1cc;
  border-radius: 17px;
  background: white;
  color: #173f70;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.ready-note {
  height: 54px;
  margin-top: 17px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid #e6ded3;
  border-radius: 10px;
  background: #f8f4ee;
  color: #555a61;
  font-size: 14px;
}

.ready-note strong {
  color: #0d3765;
  font-size: 27px;
}

@media (max-width: 1000px) {
  .checkin-workspace { width: 94vw; }
  .checkin-brand { width: 160px; }
  .summary-lead { min-width: 210px; }
  .guest-status small { font-size: 10px; }
}

.checkout-reference {
  width: 100%;
  min-height: 100%;
  color: #143d68;
  overflow: auto;
}

.checkout-header {
  height: 82px;
  padding: 0 30px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.checkout-back {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 18px;
  background: rgba(255,253,249,.78);
  color: #143d68;
  box-shadow: 0 6px 14px rgba(56,42,30,.1);
  cursor: pointer;
  font-size: 30px;
}

.checkout-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  letter-spacing: 9px;
}

.checkout-brand strong {
  font-size: 28px;
  font-weight: 500;
}

.checkout-brand small {
  width: 250px;
  margin-top: 4px;
  color: #a97b48;
  text-align: center;
  font-size: 12px;
  letter-spacing: 5px;
}

.checkout-guest {
  justify-self: end;
  padding: 14px 20px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 999px;
  background: rgba(255,253,249,.72);
  box-shadow: inset 0 1px 0 white;
  color: #586675;
  backdrop-filter: blur(12px);
  font-size: 14px;
}

.checkout-workspace {
  width: min(1015px, 77vw);
  margin: 0 auto;
  padding-bottom: 20px;
}

.checkout-hero {
  height: 166px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: center;
  gap: 50px;
}

.checkout-intro {
  display: flex;
  align-items: center;
  gap: 35px;
}

.door-art {
  position: relative;
  font-size: 91px;
  filter: drop-shadow(0 10px 8px rgba(56,39,26,.23));
}

.door-art i {
  position: absolute;
  right: -6px;
  bottom: 7px;
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff5df;
  box-shadow: 0 7px 10px rgba(54,38,26,.22);
  color: #174875;
  font-size: 29px;
  font-style: normal;
}

.checkout-intro h1 {
  font-size: 49px;
  letter-spacing: -.04em;
}

.checkout-intro p {
  margin-top: 9px;
  color: #657181;
  font-size: 16px;
  line-height: 1.5;
}

.checkout-time {
  position: relative;
  height: 126px;
  padding: 14px 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(235,222,202,.9));
  box-shadow:
    0 16px 0 rgba(190,163,126,.28),
    0 24px 28px rgba(53,39,27,.18),
    inset 0 2px 2px white,
    inset 0 -4px 9px rgba(178,145,103,.16);
  backdrop-filter: blur(13px);
  transform: perspective(800px) rotateX(2deg) rotateY(-3deg);
  transform-style: preserve-3d;
  animation: checkout-time-float 3.8s ease-in-out infinite;
}

.checkout-time::after {
  position: absolute;
  top: -50%;
  left: -35%;
  width: 24%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  content: "";
  transform: rotate(18deg);
  animation: checkout-time-shine 4.8s ease-in-out infinite;
}

.checkout-time > span {
  position: relative;
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  border: 7px solid #f7ead5;
  border-radius: 50%;
  background: linear-gradient(145deg, #315f8a, #123b66);
  box-shadow:
    0 8px 0 #b89055,
    0 13px 16px rgba(48,34,23,.25),
    inset 5px 5px 8px rgba(255,255,255,.18),
    inset -5px -6px 8px rgba(3,28,53,.3);
  color: transparent;
  transform: translateZ(18px);
}

.checkout-time > span::before {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 4px;
  height: 22px;
  border-radius: 4px;
  background: #f2d7a8;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  content: "";
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: checkout-clock-hand 8s linear infinite;
}

.checkout-time > span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d5ab6b;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  content: "";
  transform: translate(-50%, -50%);
}

.checkout-time > div {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  transform: translateZ(12px);
  text-align: center;
}

.checkout-time strong {
  font-size: 16px;
}

.checkout-time b {
  margin: -2px 0;
  font-size: 59px;
  letter-spacing: -2px;
}

.checkout-time small {
  color: #667383;
  font-size: 13px;
}

@keyframes checkout-time-float {
  0%, 100% { transform: perspective(800px) rotateX(2deg) rotateY(-3deg) translateY(0); }
  50% { transform: perspective(800px) rotateX(1deg) rotateY(2deg) translateY(-6px); }
}

@keyframes checkout-time-shine {
  0%, 62% { left: -35%; opacity: 0; }
  68% { opacity: 1; }
  88%, 100% { left: 125%; opacity: 0; }
}

@keyframes checkout-clock-hand {
  to { transform: translateX(-50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .checkout-time,
  .checkout-time::after,
  .checkout-time > span::before {
    animation: none;
  }
}

.checkout-task-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.checkout-task {
  position: relative;
  min-height: 245px;
  padding: 16px 10px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,253,249,.96), rgba(241,231,217,.94));
  box-shadow: 0 10px 20px rgba(50,38,28,.16), inset 0 1px 1px white;
  color: #143d68;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease;
}

.checkout-task:hover {
  transform: translateY(-3px);
}

.checkout-task.checked {
  border-color: rgba(37,133,78,.5);
  background: linear-gradient(145deg, rgba(253,255,252,.98), rgba(226,241,231,.96));
}

.checkout-task-icon {
  width: 100%;
  height: 116px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.checkout-task-icon img {
  width: 104px;
  height: 104px;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 7px 5px rgba(50,35,23,.2));
}

.checkout-task > strong {
  font-size: 18px;
}

.checkout-task > small {
  margin-top: 4px;
  color: #707887;
  font-size: 12px;
  line-height: 1.25;
}

.checkout-task > i {
  position: absolute;
  bottom: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid #e8dcc9;
  border-radius: 50%;
  background: #fff8ea;
  box-shadow: 0 4px 7px rgba(59,43,30,.14);
  color: #1b527d;
  font-size: 21px;
  font-style: normal;
}

.checkout-task.checked > i {
  border-color: #3f9b68;
  background: #ecf8f0;
  color: #16834a;
}

.checkout-bottom {
  margin-top: 11px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.checkout-thanks {
  min-height: 51px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border-radius: 18px;
  background: rgba(255,253,249,.82);
  box-shadow: 0 7px 14px rgba(52,39,29,.1);
}

.checkout-thanks > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff6e5;
  color: #2c628d;
  font-size: 22px;
}

.checkout-thanks p {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.checkout-thanks small {
  margin-top: 3px;
  color: #697584;
}

.checkout-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.confirm-checkout,
.home-checkout {
  min-height: 52px;
  border-radius: 18px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 700;
}

.confirm-checkout {
  border: 0;
  background: linear-gradient(100deg, #286091, #12446f);
  color: white;
  box-shadow: 0 8px 16px rgba(24,67,105,.2);
}

.home-checkout {
  border: 1px solid #174b79;
  background: rgba(255,253,249,.85);
  color: #174b79;
}

@media (max-height: 760px) {
  .checkout-header { height: 68px; }
  .checkout-hero { height: 148px; }
  .checkout-task { min-height: 220px; }
  .checkout-task-icon { height: 106px; }
  .checkout-task-icon img { width: 94px; height: 94px; }
  .checkout-bottom { margin-top: 10px; gap: 7px; }
  .checkout-thanks { min-height: 50px; }
  .confirm-checkout, .home-checkout { min-height: 52px; }
}

.host-reference {
  width: 100%;
  min-height: 100%;
  color: #123d69;
  overflow: auto;
}

.host-header {
  height: 96px;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.host-back {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 18px;
  background: rgba(255,253,249,.78);
  color: #123d69;
  box-shadow: 0 7px 14px rgba(54,39,27,.12);
  cursor: pointer;
  font-size: 30px;
}

.host-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  letter-spacing: 8px;
}

.host-brand strong {
  font-size: 30px;
  font-weight: 500;
}

.host-brand small {
  margin-top: 5px;
  color: #a87a47;
  font-size: 11px;
  letter-spacing: 4px;
}

.host-guest {
  justify-self: end;
  padding: 14px 20px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 999px;
  background: rgba(255,253,249,.75);
  box-shadow: inset 0 1px 0 white, 0 6px 14px rgba(55,40,28,.08);
  color: #5e6977;
  backdrop-filter: blur(12px);
  font-size: 14px;
}

.host-guest strong {
  color: #183f69;
}

.host-workspace {
  width: min(884px, 86vw);
  margin: 0 auto;
}

.host-hero {
  position: relative;
  height: 166px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  justify-content: center;
  text-align: center;
}

.host-hero h1 {
  font-size: 57px;
  letter-spacing: -.04em;
}

.host-hero p {
  margin-top: 9px;
  color: #657181;
  font-size: 16px;
}

.hero-phone {
  position: absolute;
  left: 53px;
  top: -13px;
  color: #245a89;
  font-family: Georgia, serif;
  font-size: 131px;
  font-weight: 900;
  line-height: 1;
  text-shadow:
    4px 5px 0 #0b355d,
    -2px -2px 0 #7e9cb5;
  filter: drop-shadow(0 13px 8px rgba(55,38,25,.25));
  transform: rotate(-25deg);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 27px;
}

.contact-card {
  height: 377px;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 27px;
  background: linear-gradient(145deg, rgba(255,253,249,.97), rgba(241,232,220,.95));
  box-shadow: inset 0 1px 1px white, 0 14px 25px rgba(49,36,26,.2);
  color: #123d69;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 1px white, 0 18px 30px rgba(49,36,26,.25);
}

.contact-card.static {
  cursor: default;
}

.contact-card.static:hover {
  transform: none;
  box-shadow: inset 0 1px 1px white, 0 12px 22px rgba(49,36,26,.17);
}

.contact-card > strong {
  margin-top: 22px;
  font-size: 31px;
}

.contact-card > small {
  margin-top: 3px;
  color: #687484;
  font-size: 16px;
  line-height: 1.45;
}

.contact-card > b {
  margin-top: 20px;
  font-size: 25px;
  white-space: nowrap;
}

.host-phone-input {
  width: 92%;
  margin-top: 17px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #143e69;
  font: 700 23px/1.2 Inter, "Segoe UI", Arial, sans-serif;
  text-align: center;
}

.host-name-field {
  min-height: 42px;
  margin-top: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.host-name-field > strong {
  font-size: 27px;
  white-space: nowrap;
}

.host-name-field input {
  width: 130px;
  padding: 4px 6px;
  border: 0;
  border-bottom: 2px solid #b8a183;
  background: transparent;
  color: #143e69;
  font: 700 27px/1.2 Inter, "Segoe UI", Arial, sans-serif;
  text-align: center;
}

.host-name-field input:focus {
  border-bottom-color: #173f70;
  outline: none;
}

.host-phone-input:hover,
.host-phone-input:focus {
  border-color: #d8c6ad;
  background: rgba(255,250,242,.78);
  outline: none;
}

.contact-3d-icon {
  width: 145px;
  height: 145px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 9px 7px rgba(50,36,25,.2));
}

.contact-3d-icon.whatsapp {
  width: 105px;
  height: 105px;
}

.whatsapp-card > strong {
  margin-top: 4px;
}

.call-object {
  width: 142px;
  height: 142px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff8e9, #ead7ba);
  color: #245a89;
  box-shadow: inset 4px 4px 8px rgba(255,255,255,.8), 0 10px 13px rgba(53,37,25,.22);
  font-family: Georgia, serif;
  font-size: 95px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 3px 4px 0 #123c65, -1px -1px 0 #88a3ba;
  transform: rotate(-25deg);
}

.whatsapp-object {
  position: relative;
  width: 91px;
  height: 91px;
  display: grid;
  place-items: center;
  border: 7px solid white;
  border-radius: 50%;
  background: linear-gradient(145deg, #55ca62, #21a839);
  color: white;
  box-shadow: 0 8px 12px rgba(47,37,28,.2);
  font-family: Georgia, serif;
  font-size: 57px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 2px 3px 0 rgba(0,87,16,.35);
  transform: rotate(-23deg);
}

.whatsapp-card > strong {
  margin-top: 7px;
}

.whatsapp-card > small {
  line-height: 1.35;
}

.host-qr {
  position: relative;
  width: 131px;
  height: 131px;
  margin-top: 8px;
  display: grid;
  place-items: center;
  border: 12px solid #fffdf9;
  border-radius: 15px;
  background:
    repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0 / 18px 18px;
  box-shadow: 0 8px 13px rgba(50,37,26,.18);
}

.whatsapp-card .host-qr,
.whatsapp-card .host-qr-image {
  width: 112px;
  height: 112px;
}

.host-qr-image {
  width: 131px;
  height: 131px;
  margin-top: 8px;
  display: block;
  border: 8px solid white;
  border-radius: 13px;
  background: white;
  box-shadow: 0 8px 14px rgba(51,37,27,.15);
  object-fit: contain;
}

.host-qr-clickable {
  display: block;
  cursor: pointer;
  transition: transform 140ms ease;
}

.host-qr-clickable:hover {
  transform: scale(1.03);
}

.host-qr-clickable input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.host-qr::before,
.host-qr::after {
  position: absolute;
  width: 29px;
  height: 29px;
  border: 7px solid #111;
  background: white;
  content: "";
}

.host-qr::before {
  top: 4px;
  left: 4px;
}

.host-qr::after {
  top: 4px;
  right: 4px;
}

.host-qr i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 5px solid white;
  border-radius: 50%;
  background: #28af43;
  color: white;
  font-family: Georgia, serif;
  font-size: 27px;
  font-style: normal;
  font-weight: 900;
  transform: rotate(-25deg);
  z-index: 2;
}

.video-object {
  position: relative;
  width: 151px;
  height: 109px;
  margin-top: 30px;
  margin-bottom: 3px;
  border-radius: 24px;
  background: linear-gradient(145deg, #47779f, #123f6b);
  box-shadow: inset 5px 5px 8px rgba(255,255,255,.17), 0 11px 13px rgba(50,36,25,.24);
}

.video-object::after {
  position: absolute;
  top: 26px;
  right: -42px;
  border-width: 29px 43px 29px 0;
  border-style: solid;
  border-color: transparent #1d527f transparent transparent;
  content: "";
  transform: rotate(180deg);
}

.video-object i {
  position: absolute;
  top: 27px;
  left: 28px;
  width: 69px;
  height: 55px;
  border-radius: 11px;
  background: linear-gradient(145deg, #fffaf0, #dfcdb2);
  box-shadow: inset 3px 3px 5px white, 2px 3px 5px rgba(8,33,56,.3);
}

.contact-card:has(.video-object) > strong {
  margin-top: 45px;
}

.host-home {
  width: 77%;
  height: 63px;
  margin: 28px auto 20px;
  display: block;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 17px;
  background: rgba(255,253,249,.9);
  color: #164571;
  box-shadow: 0 9px 18px rgba(51,37,26,.14);
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
}

@media (max-height: 740px) {
  .host-header { height: 78px; }
  .host-hero { height: 135px; }
  .contact-card { height: 345px; }
  .host-home { margin-top: 17px; }
}

.extras-reference {
  width: calc(100% - 22px);
  min-height: calc(100% - 16px);
  margin: 8px auto;
  border-radius: 28px;
  background: rgba(249,243,235,.58);
  color: #143e69;
  overflow: auto;
}

.extras-header {
  height: 84px;
  padding: 0 30px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: rgba(255,253,249,.76);
  border-radius: 28px 28px 0 0;
  backdrop-filter: blur(15px);
}

.extras-back {
  width: 49px;
  height: 49px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,253,249,.85);
  color: #143e69;
  box-shadow: 0 6px 12px rgba(54,39,27,.12);
  cursor: pointer;
  font-size: 28px;
}

.extras-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  letter-spacing: 5px;
}

.extras-brand strong {
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 400;
}

.extras-brand small {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 5px;
}

.extras-guest {
  justify-self: end;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255,253,249,.75);
  box-shadow: 0 5px 12px rgba(51,37,27,.08);
  color: #646f7b;
  font-size: 13px;
}

.extras-workspace {
  width: min(850px, 84vw);
  margin: 0 auto;
}

.extras-hero {
  height: 218px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
}

.hero-towels {
  position: relative;
  width: 255px;
  height: 185px;
  margin: 0 auto;
  filter: drop-shadow(0 14px 10px rgba(55,39,26,.2));
}

.hero-towels i,
.hero-towels b,
.hero-towels span {
  position: absolute;
  left: 50%;
  border-radius: 28px 33px 25px 30px;
  content: "";
  transform: translateX(-50%);
}

.hero-towels i {
  bottom: 4px;
  width: 244px;
  height: 75px;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 2px, transparent 2px 7px), linear-gradient(145deg, #416f97, #123f6b);
}

.hero-towels b {
  bottom: 65px;
  width: 218px;
  height: 73px;
  background: repeating-linear-gradient(0deg, rgba(145,111,72,.06) 0 2px, transparent 2px 7px), linear-gradient(145deg, #fffaf0, #dfcdb4);
}

.hero-towels span {
  bottom: 125px;
  width: 170px;
  height: 60px;
  background: repeating-linear-gradient(0deg, rgba(145,111,72,.06) 0 2px, transparent 2px 7px), linear-gradient(145deg, #fffdf7, #eadcc8);
}

.extras-copy h1 {
  font-size: 43px;
}

.extras-copy > p {
  margin-top: 7px;
  color: #69737f;
  font-size: 17px;
  line-height: 1.4;
}

.paid-notice {
  width: 310px;
  margin-top: 17px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 13px;
  background: rgba(255,253,249,.83);
  box-shadow: 0 7px 14px rgba(51,37,27,.08);
}

.paid-notice > b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d69a45;
  color: white;
  font-size: 20px;
}

.paid-notice > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.paid-notice small {
  color: #737c87;
  font-size: 11px;
}

.extras-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.extra-card {
  position: relative;
  height: 280px;
  padding: 16px 12px 43px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid transparent;
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,253,249,.97), rgba(241,232,220,.95));
  box-shadow: 0 12px 22px rgba(49,36,26,.17), inset 0 1px 1px white;
  color: #143e69;
  cursor: pointer;
}

.extra-card.selected {
  border-color: #2a6697;
  background: linear-gradient(145deg, rgba(255,254,250,.99), rgba(231,239,245,.97));
}

.linen-object {
  width: 122px;
  height: 112px;
  display: block;
  filter: drop-shadow(0 8px 6px rgba(55,39,26,.2));
}

.linen-object img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.extra-card > strong {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1.15;
}

.extra-card > small {
  min-height: 44px;
  margin-top: 7px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #6d7682;
  font-size: 14px;
  line-height: 1.35;
}

.extra-price {
  margin-top: 7px;
  color: #b16e20;
  font-size: 25px;
}

.selection-mark {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 2px solid #e5d8c6;
  border-radius: 50%;
  background: #fff8ea;
  color: #17507d;
  font-size: 19px;
  font-style: normal;
}

.extra-card.selected .selection-mark {
  border-color: #2a6697;
  background: #eaf3f8;
}

.send-extra,
.extras-home {
  width: 90%;
  height: 59px;
  margin-right: auto;
  margin-left: auto;
  display: block;
  border-radius: 20px;
  cursor: pointer;
  font-size: 21px;
  font-weight: 700;
}

.send-extra {
  margin-top: 20px;
  border: 0;
  background: linear-gradient(100deg, #2a6293, #143f6b);
  color: white;
  box-shadow: 0 9px 16px rgba(23,63,100,.18);
}

.extras-home {
  margin-top: 10px;
  margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,.88);
  background: rgba(255,253,249,.9);
  color: #164671;
  box-shadow: 0 8px 14px rgba(51,37,27,.1);
}

@media (max-height: 740px) {
  .extras-header { height: 70px; }
  .extras-hero { height: 185px; }
  .extra-card { height: 270px; }
  .linen-object { height: 115px; }
  .send-extra, .extras-home { height: 52px; }
}

.wifi-reference {
  width: 100%;
  min-height: 100%;
  color: #153f6b;
  overflow: auto;
}

.wifi-header {
  height: 100px;
  padding: 0 34px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.wifi-back {
  width: 65px;
  height: 65px;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 18px;
  background: rgba(255,253,249,.8);
  color: #153f6b;
  box-shadow: 0 7px 15px rgba(50,37,27,.12);
  cursor: pointer;
  font-size: 30px;
}

.wifi-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  letter-spacing: 7px;
}

.wifi-brand strong {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 400;
}

.wifi-brand small {
  margin-top: 4px;
  color: #aa7b44;
  font-size: 11px;
  letter-spacing: 5px;
}

.wifi-guest {
  justify-self: end;
  padding: 14px 21px;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 999px;
  background: rgba(255,253,249,.75);
  box-shadow: 0 7px 15px rgba(50,37,27,.09), inset 0 1px 0 white;
  color: #65707d;
}

.wifi-guest strong {
  color: #153f6b;
}

.wifi-workspace {
  width: min(910px, 89vw);
  margin: 0 auto;
}

.wifi-title {
  height: 126px;
  text-align: center;
}

.wifi-title h1 {
  padding-top: 7px;
  font-size: 48px;
  letter-spacing: -.03em;
}

.wifi-title p {
  margin-top: 4px;
  color: #697481;
  font-size: 17px;
}

.wifi-columns {
  display: grid;
  grid-template-columns: 2.35fr 1fr;
  gap: 16px;
}

.wifi-connect-card,
.wifi-safety-card {
  height: 386px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 29px;
  background: linear-gradient(145deg, rgba(255,253,249,.97), rgba(241,232,220,.95));
  box-shadow: inset 0 1px 1px white, 0 14px 25px rgba(49,36,26,.18);
}

.wifi-connect-card {
  padding: 50px 30px;
  display: grid;
  grid-template-columns: 1.65fr 1fr;
}

.wifi-credentials {
  display: grid;
  grid-template-columns: 185px 1fr;
  align-items: center;
  border-right: 1px solid #ded5c9;
}

.large-wifi {
  position: relative;
  width: 170px;
  height: 148px;
  background:
    radial-gradient(circle at 50% 88%, #174a78 0 21px, transparent 22px),
    radial-gradient(circle at 50% 100%, transparent 0 45px, #245983 46px 61px, transparent 62px),
    radial-gradient(circle at 50% 100%, transparent 0 77px, #376e9a 78px 94px, transparent 95px);
  filter: drop-shadow(0 10px 7px rgba(43,31,22,.25));
}

.large-wifi::after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 15px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  content: "";
}

.credential-copy {
  display: flex;
  flex-direction: column;
}

.credential-copy small,
.wifi-qr-area > small {
  color: #718096;
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: 1px;
}

.credential-copy strong {
  margin-top: 9px;
  font-size: 27px;
}

.credential-copy hr {
  width: 100%;
  margin: 27px 0 20px;
  border: 0;
  border-top: 1px solid #ddd5ca;
}

.credential-copy button {
  height: 48px;
  margin-top: 28px;
  border: 1px solid #e3d6c3;
  border-radius: 12px;
  background: #fff8eb;
  color: #153f6b;
  box-shadow: 0 7px 12px rgba(51,37,27,.1);
  cursor: pointer;
  font-weight: 600;
}

.wifi-qr-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wifi-qr-area p {
  margin: 8px 0 10px;
  color: #6d7683;
  font-size: 13px;
}

.wifi-qr {
  position: relative;
  width: 166px;
  height: 166px;
  display: grid;
  place-items: center;
  border: 13px solid white;
  border-radius: 14px;
  background: repeating-conic-gradient(#112f4d 0 25%, #fff 0 50%) 0 0 / 22px 22px;
  box-shadow: 0 8px 14px rgba(51,37,27,.15);
}

.wifi-qr::before,
.wifi-qr::after {
  position: absolute;
  top: 5px;
  width: 32px;
  height: 32px;
  border: 8px solid #112f4d;
  background: white;
  content: "";
}

.wifi-qr::before { left: 5px; }
.wifi-qr::after { right: 5px; }

.wifi-qr i {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 5px solid white;
  border-radius: 50%;
  background: #1c5685;
  color: white;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  z-index: 2;
}

.wifi-qr-area > span {
  margin-top: 13px;
  color: #707986;
  font-size: 13px;
  line-height: 1.35;
}

.wifi-safety-card {
  padding: 27px 24px;
  text-align: center;
}

.shield-object {
  width: 79px;
  height: 88px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 38px 38px 45px 45px;
  background: linear-gradient(145deg, #4d7ca2, #153f6b);
  box-shadow: inset 5px 5px 7px rgba(255,255,255,.18), 0 9px 12px rgba(49,35,24,.21);
  color: #fff5e5;
  clip-path: polygon(50% 0, 94% 18%, 88% 72%, 50% 100%, 12% 72%, 6% 18%);
  font-size: 39px;
  font-weight: 800;
}

.wifi-safety-card h2 {
  margin-top: 14px;
  font-size: 24px;
}

.wifi-safety-card > p {
  margin-top: 3px;
  color: #707986;
  font-size: 13px;
}

.fiber-speed {
  margin-top: 16px;
  padding: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 13px;
  background: rgba(255,248,235,.85);
  text-align: left;
}

.fiber-speed > span {
  color: #bb7e2d;
  font-size: 31px;
}

.fiber-speed > div {
  display: flex;
  flex-direction: column;
}

.fiber-speed small {
  color: #778393;
  font-size: 9px;
  letter-spacing: .8px;
}

.fiber-speed strong {
  margin-top: 2px;
  font-size: 18px;
}

.wifi-safety-card ul {
  margin: 15px 0 0;
  padding-left: 17px;
  color: #626c79;
  text-align: left;
  font-size: 11px;
  line-height: 1.5;
}

.wifi-actions {
  width: 55%;
  margin: 41px auto 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 23px;
}

.wifi-actions button {
  height: 72px;
  border-radius: 19px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
}

.wifi-copy {
  border: 1px solid #376f9c;
  background: linear-gradient(100deg, #2a6293, #143f6b);
  color: white;
  box-shadow: 0 9px 16px rgba(23,63,100,.17);
}

.wifi-home {
  border: 1px solid rgba(255,255,255,.88);
  background: rgba(255,253,249,.9);
  color: #164671;
  box-shadow: 0 9px 16px rgba(50,37,27,.11);
}

@media (max-height: 740px) {
  .wifi-header { height: 82px; }
  .wifi-title { height: 102px; }
  .wifi-connect-card, .wifi-safety-card { height: 365px; }
  .wifi-connect-card { padding-top: 38px; padding-bottom: 38px; }
  .wifi-actions { margin-top: 22px; }
}

/* Reference-inspired Wi-Fi concierge layout */
.wifi-reference .wifi-header {
  height: 96px;
}

.wifi-reference .wifi-back {
  width: 66px;
  height: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.wifi-reference .wifi-back b {
  font-size: 30px;
  line-height: 1;
}

.wifi-reference .wifi-back small {
  font-size: 12px;
}

.wifi-reference .wifi-brand strong {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 500;
}

.wifi-reference .wifi-title {
  height: 150px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wifi-reference .wifi-title .page-master-icon {
  width: 78px;
  height: 63px;
  object-fit: contain;
}

.wifi-reference .wifi-title h1 {
  padding: 0;
  font-family: Georgia, serif;
  font-size: 48px;
  font-weight: 500;
}

.wifi-reference .wifi-title p {
  margin-top: 0;
  font-size: 17px;
}

.wifi-reference .wifi-workspace {
  width: min(875px, 90vw);
}

.wifi-reference .wifi-columns {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.wifi-reference .wifi-connect-card,
.wifi-reference .wifi-safety-card {
  height: 426px;
  padding: 22px 34px;
  border-radius: 24px;
}

.wifi-reference .wifi-connect-card {
  display: block;
}

.wifi-panel-title {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #173f70;
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .4px;
  white-space: nowrap;
}

.wifi-safety-card h2.wifi-panel-title {
  margin-top: 0;
  font-size: 17px;
}

.wifi-panel-title span {
  width: 32px;
  height: 1px;
  background: #c8a46a;
}

.wifi-access-row {
  min-height: 80px;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e3d7c7;
}

.wifi-access-icon {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f1e7d8;
  color: #173f70;
  font-size: 28px;
  font-style: normal;
}

.wifi-access-row > div {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.wifi-access-row > div small {
  color: #6c7785;
  font-size: 12px;
}

.wifi-access-row > div strong {
  margin-top: 5px;
  color: #173f70;
  font-size: 22px;
}

.wifi-access-row > div input {
  width: 100%;
  margin-top: 4px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #173f70;
  font: 700 22px/1.2 Inter, "Segoe UI", Arial, sans-serif;
}

.wifi-access-row > div input:hover,
.wifi-access-row > div input:focus {
  border-color: #d6c4aa;
  background: rgba(255,250,242,.78);
  outline: none;
}

.wifi-access-row button {
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #e1d6c7;
  border-radius: 10px;
  background: #fffaf2;
  box-shadow: 0 5px 10px rgba(52,38,27,.12);
  color: #173f70;
  cursor: pointer;
  font-size: 19px;
}

.wifi-access-row button small {
  font-size: 10px;
}

.wifi-reference .wifi-qr-area {
  height: 200px;
}

.wifi-reference .wifi-qr-area p {
  width: 100%;
  margin: 8px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.wifi-reference .wifi-qr-area p span {
  width: 48px;
  height: 1px;
  background: #d3b27b;
}

.wifi-reference .wifi-qr {
  width: 125px;
  height: 125px;
  border-width: 8px;
}

.wifi-qr-image {
  width: 125px;
  height: 125px;
  display: block;
  border: 7px solid white;
  border-radius: 11px;
  box-shadow: 0 7px 12px rgba(51,37,27,.14);
  object-fit: contain;
  background: white;
}

.wifi-reference .wifi-qr i {
  width: 39px;
  height: 39px;
  border: 3px solid #f7f1e7;
  border-radius: 0;
  background: #173f70;
  color: #c8a46a;
  font-family: Georgia, serif;
  font-size: 8px;
  line-height: 1.2;
}

.wifi-reference .wifi-qr-area > small {
  margin-top: 3px;
  color: #667383;
  font-size: 11px;
}

.wifi-qr-clickable {
  display: block;
  cursor: pointer;
  transition: transform 140ms ease;
}

.wifi-qr-clickable:hover {
  transform: scale(1.03);
}

.wifi-qr-clickable input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.wifi-reference .wifi-safety-card {
  overflow: hidden;
  text-align: left;
}

.fiber-overview {
  min-height: 145px;
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid #e3d7c7;
}

.speed-gauge {
  position: relative;
  width: 94px;
  height: 94px;
  flex: 0 0 94px;
  border: 10px solid #f0e5d5;
  border-radius: 50%;
  background:
    conic-gradient(from 225deg, #173f70 0 67%, transparent 67% 100%);
  box-shadow: inset 0 2px 4px rgba(40,30,22,.12);
}

.speed-gauge::after {
  position: absolute;
  inset: 17px;
  border-radius: 50%;
  background: #f8f1e6;
  content: "";
}

.speed-gauge i {
  position: absolute;
  z-index: 1;
  top: 46px;
  left: 46px;
  width: 32px;
  height: 4px;
  border-radius: 4px;
  background: #c08d3d;
  transform: rotate(-48deg);
  transform-origin: left center;
}

.fiber-details {
  flex: 1;
}

.fiber-details h3,
.responsible-use h3 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 500;
}

.fiber-details > div {
  margin-top: 13px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.fiber-details p {
  display: flex;
  flex-direction: column;
}

.fiber-details p + p {
  padding-left: 20px;
  border-left: 1px solid #e3d7c7;
}

.fiber-details small {
  color: #6c7785;
  font-size: 11px;
}

.fiber-details strong {
  margin-top: 5px;
  font-size: 22px;
  white-space: nowrap;
}

.responsible-use {
  min-height: 0;
  height: 190px;
  margin-top: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #eadfce;
  border-radius: 20px;
  background: rgba(247,239,228,.78);
}

.responsible-use .shield-object {
  width: 56px;
  height: 64px;
  flex: 0 0 56px;
  margin: 0;
  font-size: 27px;
}

.responsible-use ul {
  margin-top: 5px;
  padding-left: 15px;
  color: #5f6b7a;
  font-size: 9px;
  line-height: 1.22;
  text-align: justify;
  text-justify: inter-word;
}

.responsible-use li + li {
  margin-top: 3px;
}

.responsible-use li strong {
  color: #173f70;
}

.wifi-reference .wifi-actions {
  width: 31%;
  margin: 13px auto 12px;
  grid-template-columns: 1fr;
}

.wifi-reference .wifi-actions button {
  height: 58px;
  font-size: 14px;
}

.wifi-reference .wifi-home {
  border-color: #2e648f;
  background: linear-gradient(100deg, #285f90, #123f6b);
  color: white;
}

.wifi-reference .wifi-copy {
  border: 1px solid rgba(255,255,255,.88);
  background: rgba(255,253,249,.9);
  color: #164671;
}

@media (max-height: 740px) {
  .wifi-reference .wifi-header { height: 76px; }
  .wifi-reference .wifi-title { height: 125px; }
  .wifi-reference .wifi-connect-card,
  .wifi-reference .wifi-safety-card { height: 410px; }
}

.help-reference {
  width: 100%;
  min-height: 100%;
  color: #153e69;
  overflow: auto;
}

.help-header {
  height: 93px;
  padding: 0 25px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: rgba(255,253,249,.75);
  box-shadow: 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: blur(15px);
}

.help-back {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,253,249,.78);
  box-shadow: 0 6px 13px rgba(52,38,27,.13);
  color: #153e69;
  cursor: pointer;
  font-size: 44px;
  line-height: .8;
}

.help-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  letter-spacing: 8px;
}

.help-brand strong {
  font-family: Georgia, serif;
  font-size: 32px;
  font-weight: 400;
}

.help-brand small {
  margin-top: 4px;
  color: #9c7448;
  font-size: 11px;
  letter-spacing: 4px;
}

.help-guest {
  justify-self: end;
  padding: 14px 21px;
  border-radius: 999px;
  background: rgba(255,253,249,.76);
  box-shadow: 0 6px 14px rgba(51,38,27,.09), inset 0 1px 0 white;
  color: #66717e;
}

.help-guest strong {
  color: #153e69;
}

.help-workspace {
  width: min(922px, 90vw);
  margin: 0 auto;
  padding-top: 26px;
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 20px;
}

.help-left {
  position: relative;
  display: flex;
}

.life-ring {
  position: relative;
  width: 176px;
  height: 176px;
  margin: 0 auto;
  border: 30px solid #f6ead7;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 4px 4px 8px rgba(74,51,31,.22), 0 12px 18px rgba(50,37,27,.2);
}

.life-ring::before {
  position: absolute;
  inset: -30px;
  border: 30px solid transparent;
  border-top-color: #235782;
  border-bottom-color: #235782;
  border-radius: 50%;
  content: "";
  transform: rotate(45deg);
}

.life-ring::after {
  position: absolute;
  inset: -35px;
  border: 5px solid #dbc9ad;
  border-radius: 50%;
  content: "";
}

.help-title {
  position: static;
  grid-column: 1 / 3;
  width: auto;
  text-align: center;
}

.help-title h1 {
  font-family: Georgia, serif;
  font-size: 70px;
  font-weight: 400;
}

.help-title p {
  margin-top: 3px;
  color: #6d7480;
  font-size: 28px;
  font-weight: 600;
}

.emergency-card {
  width: 228px;
  height: auto;
  min-height: 100%;
  flex: 1;
  margin-top: 0;
  padding: 13px 16px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,253,249,.97), rgba(241,232,220,.95));
  box-shadow: 0 13px 23px rgba(52,38,28,.17);
  color: #b84a32;
  cursor: default;
}

.emergency-3d {
  width: 116px;
  height: 90px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(49,35,25,.2));
}

.emergency-card strong {
  margin-top: 1px;
  font-size: 22px;
  line-height: 1.15;
}

.emergency-number {
  margin-top: -3px;
  color: #b43d2b;
  font-size: 64px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1;
}

.emergency-card small {
  margin-top: 3px;
  color: #717987;
  font-size: 13px;
  line-height: 1.25;
}

.help-details {
  padding-top: 0;
}

.nearby-card {
  min-height: 143px;
  padding: 20px 20px 14px;
  display: flex;
  gap: 25px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 22px;
  background: rgba(255,253,249,.91);
  box-shadow: 0 10px 19px rgba(52,38,27,.12);
}

.nearby-card + .nearby-card {
  margin-top: 8px;
}

.facility-icon {
  width: 65px;
  height: 65px;
  display: grid;
  place-items: center;
  flex: 0 0 65px;
  border-radius: 14px;
  box-shadow: inset 4px 4px 6px rgba(255,255,255,.2), 0 7px 9px rgba(49,35,24,.22);
  color: #fff5e8;
  font-size: 39px;
  font-weight: 800;
}

.facility-icon.hospital {
  background: linear-gradient(145deg, #4779a3, #123e69);
}

.facility-icon.pharmacy {
  background: linear-gradient(145deg, #6b9a82, #356c56);
}

.nearby-copy {
  flex: 1;
}

.nearby-copy h2 {
  margin-bottom: 7px;
  font-size: 25px;
}

.nearby-copy > div {
  min-height: 37px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  border-top: 1px solid #e4ded5;
}

.nearby-copy > div > span {
  color: #346b5b;
}

.nearby-copy > div > strong {
  color: #5c6066;
  font-size: 14px;
  font-weight: 500;
}

.nearby-copy > div > small {
  color: #61666c;
  font-size: 12px;
}

.help-shortcuts {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr;
}

.help-shortcuts button {
  height: 96px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 17px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 20px;
  background: rgba(255,253,249,.91);
  box-shadow: 0 8px 15px rgba(51,37,27,.1);
  color: #153e69;
  cursor: pointer;
  text-align: left;
}

.help-shortcuts button > span {
  font-size: 54px;
  filter: drop-shadow(0 5px 4px rgba(47,34,24,.2));
}

.help-shortcuts button > img {
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(47,34,24,.18));
}

.help-shortcuts button > .help-phone-icon {
  width: 65px;
  height: 65px;
  display: grid;
  place-items: center;
  flex: 0 0 65px;
  border-radius: 14px;
  background: #173f70;
  box-shadow: none;
  color: #fff5e8;
  font-family: Arial, sans-serif;
  font-size: 34px;
  filter: none;
}

.help-shortcuts p {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.help-shortcuts strong {
  font-size: 20px;
}

.help-shortcuts small {
  color: #707987;
  font-size: 14px;
}

.help-actions {
  grid-column: 1 / 3;
  margin-top: -1px;
  display: grid;
  grid-template-columns: minmax(280px, 430px);
  justify-content: center;
}

.help-actions button {
  height: 69px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 22px;
  font-weight: 700;
}

.help-home {
  border: 1px solid rgba(255,255,255,.85);
  background: rgba(255,253,249,.9);
  color: #174773;
  box-shadow: 0 8px 15px rgba(51,37,27,.1);
}

@media (max-height: 740px) {
  .help-header { height: 78px; }
  .help-workspace { padding-top: 16px; }
  .help-details { padding-top: 0; }
  .nearby-card { min-height: 126px; padding-top: 13px; padding-bottom: 10px; }
  .emergency-card { height: auto; min-height: 100%; }
  .siren { margin-top: 52px; }
  .help-actions button { height: 59px; }
}

body::after {
  position: fixed;
  inset: 0;
  content: "";
  background: rgba(248, 244, 238, 0.76);
  backdrop-filter: blur(3px);
  z-index: -1;
}

button,
input,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

#app {
  height: 100%;
}

.screen {
  width: min(1440px, 100%);
  height: 100%;
  margin: auto;
  padding: 26px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: enter 180ms ease-out;
}

@keyframes enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.home-header,
.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

h2 {
  font-size: 30px;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 21px;
}

.subtitle {
  margin-top: 7px;
  color: var(--muted);
  font-size: 20px;
}

.guest-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 253, 252, 0.9);
  box-shadow: 0 2px 10px rgba(62, 52, 42, 0.03);
  font-size: 16px;
  white-space: nowrap;
}

.guest-pill strong:last-child {
  color: var(--blue);
}

.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--beige);
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, minmax(120px, 1fr));
  gap: 16px;
  min-height: 0;
  flex: 1 1 auto;
}

.action-card,
.tip-card,
.guide-card {
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 0;
}

.action-card:hover,
.tip-card:hover,
.guide-card:hover {
  transform: translateY(-2px);
  border-color: #c8d5e3;
  box-shadow: 0 13px 34px rgba(53, 92, 138, 0.11);
}

.action-card:active,
.tip-card:active,
.guide-card:active,
.quick-action:active,
.button:active {
  transform: scale(0.98);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 4px solid rgba(53, 92, 138, 0.24);
  outline-offset: 2px;
}

.icon {
  position: relative;
  width: 84px;
  height: 72px;
  display: grid;
  place-items: center;
  color: var(--photo-cream);
}

.icon svg {
  width: 64px;
  height: 64px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  overflow: visible;
  filter:
    drop-shadow(0 8px 7px rgba(31, 22, 16, .27))
    drop-shadow(0 2px 1px rgba(255, 246, 232, .32));
}

.icon-depth {
  stroke: #68401f;
  stroke-width: 5.6;
  transform: translate(2.8px, 4px);
}

.icon-mid {
  stroke: var(--photo-ochre);
  stroke-width: 5;
  transform: translate(1.3px, 2px);
}

.icon-face {
  stroke: url("#icon-face-gradient");
  stroke-width: 3.3;
}

.icon-shine {
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 1;
  transform: translate(-.6px, -.8px);
}

.action-label {
  font-size: 19px;
  font-weight: 650;
}

.quick-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  flex: 0 0 auto;
}

.quick-action,
.button,
.choice {
  min-height: 58px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--blue);
  cursor: pointer;
  font-weight: 650;
  transition: transform 130ms ease, background 130ms ease;
}

.quick-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.mini-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(121, 81, 47, .22);
  background: linear-gradient(145deg, #e1b66c, var(--photo-ochre));
  box-shadow:
    inset 3px 3px 4px rgba(255, 246, 232, .42),
    inset -3px -3px 5px rgba(92, 52, 18, .2),
    0 3px 7px rgba(77, 50, 29, .2);
  color: var(--photo-navy);
}

.mini-icon svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  filter: drop-shadow(0 1px 0 rgba(255, 246, 232, .4));
}

.back {
  width: 58px;
  height: 58px;
  margin-right: 18px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  color: var(--blue);
  font-size: 26px;
  cursor: pointer;
}

.screen-title {
  display: flex;
  align-items: center;
}

.content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 22px;
}

.panel {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(255, 253, 252, 0.91);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel.blue {
  background: var(--pale-blue);
}

.grow {
  flex: 1;
}

.centered {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.big-value {
  color: var(--blue);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.label {
  color: var(--muted);
  font-size: 15px;
}

.value {
  margin-top: 3px;
  font-size: 27px;
  font-weight: 650;
}

.muted {
  color: var(--muted);
}

.button-row {
  display: flex;
  gap: 14px;
  flex: 0 0 auto;
}

.button {
  flex: 1;
  padding: 0 24px;
}

.button.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: white;
}

.button.danger {
  border-color: var(--danger);
  background: var(--danger);
  color: white;
}

.qr {
  width: min(180px, 70%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 12px solid white;
  border-radius: 15px;
  background:
    linear-gradient(90deg, var(--blue) 12px, transparent 12px) 0 0 / 28px 28px,
    linear-gradient(var(--blue) 12px, transparent 12px) 0 0 / 28px 28px,
    var(--pale-blue);
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
}

.guide-grid,
.tips-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.guide-card,
.tip-card {
  min-height: 110px;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  font-size: 19px;
  font-weight: 650;
}

.tip-card {
  min-height: 145px;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.guide-card .mini-icon,
.tip-card .mini-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}

.arrow {
  margin-left: auto;
  color: var(--blue);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
}

.step::before {
  position: absolute;
  top: 18px;
  right: 50%;
  left: -50%;
  height: 3px;
  content: "";
  background: var(--border);
  z-index: 0;
}

.step:first-child::before {
  display: none;
}

.step.done::before,
.step.active::before {
  background: var(--blue);
}

.step-number {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  font-weight: 700;
  z-index: 1;
}

.step.done .step-number,
.step.active .step-number {
  border-color: var(--blue);
  background: var(--blue);
  color: white;
}

.step.active {
  color: var(--blue);
  font-weight: 650;
}

.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.choice.selected {
  border: 2px solid var(--blue);
  background: var(--pale-blue);
}

.checklist {
  display: grid;
  gap: 10px;
}

.check {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
}

.check input {
  width: 25px;
  height: 25px;
  accent-color: var(--blue);
}

.field {
  width: 100%;
  min-height: 58px;
  padding: 14px 16px;
  border: 1px solid #cabdaa;
  border-radius: 14px;
  background: white;
  color: var(--text);
}

textarea.field {
  min-height: 100px;
  resize: none;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  min-width: 280px;
  padding: 15px 22px;
  border-radius: 14px;
  background: var(--text);
  color: white;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 20px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
  z-index: 10;
}

.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-height: 650px) {
  .screen { padding-top: 18px; padding-bottom: 18px; gap: 13px; }
  .action-grid { gap: 12px; }
  .icon { width: 52px; height: 52px; }
  .action-card { gap: 8px; }
  .subtitle { font-size: 17px; }
}