:root {
  --blue-950: #08245f;
  --blue-900: #0a3179;
  --blue-800: #0d3f95;
  --blue-700: #1457c5;
  --blue-100: #e9f2ff;
  --ink: #102033;
  --muted: #66758b;
  --line: #e2e9f2;
  --surface: #ffffff;
  --soft: #f5f8fc;
  --teal: #18a999;
  --amber: #f2a742;
  --coral: #e8695b;
  --shadow: 0 14px 34px rgba(16, 32, 51, 0.11);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 0%, rgba(20, 87, 197, 0.14), transparent 32rem),
    linear-gradient(180deg, #edf4ff 0%, #f8fafc 48%, #eef3f9 100%);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.app-shell {
  position: relative;
  width: min(100%, 460px);
  min-height: 100vh;
  margin: 0 auto;
  overflow-x: clip;
  background: var(--soft);
  box-shadow: 0 0 0 1px rgba(16, 32, 51, 0.06), 0 28px 80px rgba(8, 36, 95, 0.14);
}

.app-header {
  position: relative;
  padding: 16px 16px 18px;
  color: #fff;
  background:
    radial-gradient(circle at 78% 14%, rgba(242, 167, 66, 0.2), transparent 8rem),
    linear-gradient(135deg, rgba(8, 36, 95, 0.99), rgba(20, 87, 197, 0.9)),
    url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=900&q=80") center/cover;
  overflow: hidden;
}

.app-shell.is-subpage .app-header {
  display: none;
}

.app-header::after {
  content: "";
  position: absolute;
  inset: auto -22% -46px -18%;
  height: 88px;
  background: rgba(255, 255, 255, 0.13);
  transform: rotate(-4deg);
}

.topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.brand,
.icon-button,
.location-chip,
.primary-action,
.secondary-action,
.text-button,
.back-button,
.submit-button,
.contact-button,
.social-button,
.filter-chips button,
.settings-list button {
  border: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0;
  color: #fff;
  background: transparent;
}

.brand-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  overflow: hidden;
  padding: 2px;
  border: 1px solid rgba(242, 167, 66, 0.7);
  border-radius: 14px;
  background: linear-gradient(145deg, #08245f, #0d3f95);
  box-shadow: 0 12px 28px rgba(5, 22, 58, 0.22);
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.brand-name {
  color: #fff;
  font-size: 1.18rem;
  font-weight: 950;
  text-shadow: 0 2px 12px rgba(5, 22, 58, 0.28);
}

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.location-chip,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(242, 167, 66, 0.34);
  backdrop-filter: blur(14px);
}

.location-chip {
  gap: 5px;
  min-width: 72px;
  padding: 0 10px;
  border-radius: 999px;
}

.location-chip span {
  font-size: 0.77rem;
  font-weight: 800;
}

.icon-button {
  border-radius: 50%;
}

.notification-button.is-enabled {
  color: #08245f;
  background: rgba(255, 255, 255, 0.92);
}

.language-menu-button {
  gap: 5px;
  min-width: 58px;
  padding: 0 9px;
  border-radius: 999px;
}

.language-code {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 950;
  line-height: 1;
}

.language-menu-button.is-active .language-code,
.language-menu-button:hover .language-code,
.language-menu-button:focus-visible .language-code {
  color: var(--blue-800);
}

.hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding-top: 22px;
}

.hero-copy {
  max-width: 34rem;
}

.eyebrow,
.section-kicker {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.76rem;
  font-weight: 800;
}

.hero h1 {
  margin: 8px 0 10px;
  font-size: clamp(1.9rem, 8vw, 2.55rem);
  line-height: 1.06;
  font-weight: 950;
}

.hero p:not(.eyebrow) {
  max-width: 25rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.83);
  font-size: 0.88rem;
  line-height: 1.65;
}

.hero-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin-top: 12px;
  padding: 0 10px;
  border-radius: 999px;
  color: #fff;
  background: rgba(24, 169, 153, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.8rem;
  font-weight: 900;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.primary-action,
.secondary-action,
.submit-button,
.contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 900;
  white-space: nowrap;
}

.primary-action,
.submit-button {
  color: var(--blue-950);
  background: #fff;
  box-shadow: 0 14px 30px rgba(5, 22, 58, 0.16);
}

.secondary-action {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-preview {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)),
    rgba(8, 36, 95, 0.2);
  border: 1px solid rgba(242, 167, 66, 0.28);
  backdrop-filter: blur(18px);
}

.preview-mini-building {
  display: grid;
  gap: 6px;
}

.preview-label {
  display: inline-flex;
  width: fit-content;
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--blue-950);
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.62rem;
  font-weight: 950;
}

.preview-tower {
  display: grid;
  gap: 5px;
  padding: 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.preview-tower span {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 7px;
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  border-inline-end: 3px solid rgba(205, 220, 239, 0.92);
}

.preview-tower span.is-lit {
  border-inline-end-color: var(--teal);
  background: rgba(24, 169, 153, 0.2);
}

.preview-tower span.is-gold {
  border-inline-end-color: var(--amber);
  background: rgba(242, 167, 66, 0.18);
}

.preview-tower b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  color: var(--blue-950);
  background: #fff;
  font-size: 0.68rem;
  font-weight: 950;
}

.preview-tower em {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 900;
}

.preview-flow {
  display: grid;
  grid-template-columns: 1fr 16px 1fr 16px 1fr;
  align-items: center;
  gap: 4px;
}

.preview-flow span {
  display: grid;
  min-height: 38px;
  place-items: center;
  gap: 2px;
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  font-size: 0.58rem;
  font-weight: 950;
  text-align: center;
}

.preview-flow i {
  width: 15px;
  height: 15px;
  color: rgba(255, 255, 255, 0.78);
}

.preview-flow span i {
  color: var(--amber);
}

.preview-shop-card {
  display: grid;
  grid-template-columns: 34px 1fr 32px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 24px rgba(5, 22, 58, 0.14);
}

.preview-shop-logo,
.preview-shop-card em {
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-weight: 950;
}

.preview-shop-logo {
  width: 34px;
  height: 34px;
  color: #fff;
  background: linear-gradient(145deg, var(--blue-950), var(--blue-700));
}

.preview-shop-card strong {
  display: block;
  color: var(--blue-950);
  font-size: 0.74rem;
  line-height: 1.25;
}

.preview-shop-card small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 850;
  line-height: 1.25;
}

.preview-shop-card em {
  width: 32px;
  height: 32px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-size: 0.64rem;
  font-style: normal;
}

main {
  padding-bottom: 98px;
}

.screen {
  display: none;
  opacity: 1;
  transform: none;
}

.screen.is-active {
  display: block;
  opacity: 1;
  transform: none;
}

@keyframes screenIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-band {
  padding: 18px 16px 6px;
}

.section-heading,
.subpage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-heading h2,
.subpage-bar h1,
.rent-hero h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1.35;
  font-weight: 950;
}

.section-heading.compact {
  align-items: flex-start;
}

.section-kicker {
  color: var(--blue-700);
}

.building-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.home-intro-band {
  display: grid;
  gap: 8px;
  padding-top: 12px;
}

.home-type-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.home-type-choice button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 70px;
  padding: 10px;
  border: 1px solid rgba(20, 87, 197, 0.22);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  text-align: right;
  box-shadow: 0 8px 20px rgba(16, 32, 51, 0.06);
}

.home-type-choice i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 8px;
  border-radius: 8px;
  color: var(--blue-800);
  background: var(--blue-100);
}

.home-type-choice span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.home-type-choice strong {
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.3;
  font-weight: 950;
}

.home-type-choice small {
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.35;
  font-weight: 850;
}

.home-start-grid,
.home-guide-grid {
  display: grid;
  gap: 8px;
}

.home-guide-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-guide-band {
  padding-top: 12px;
}

.home-start-card {
  display: grid;
  grid-template-columns: 38px 1fr;
  min-width: 0;
  gap: 9px;
  align-items: center;
  min-height: 62px;
  padding: 9px 10px;
  border: 1px solid #dbe6f5;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  text-align: right;
  box-shadow: 0 10px 24px rgba(16, 32, 51, 0.07);
}

.home-start-card.is-merchant {
  border-color: rgba(20, 87, 197, 0.28);
  background: linear-gradient(135deg, #fff, #eef5ff);
}

.home-start-card.is-resale {
  border-color: rgba(216, 107, 53, 0.28);
  background: linear-gradient(135deg, #fff, #fff7ec);
}

.home-start-card > span,
.home-guide-grid article > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  color: var(--blue-800);
  background: var(--blue-100);
}

.home-start-card > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.home-start-card.is-merchant > span {
  color: #08245f;
  background: #ffeed2;
}

.home-start-card.is-resale > span {
  color: #7a3b03;
  background: #fff0d7;
}

.home-start-card strong,
.home-guide-grid strong {
  display: block;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1.28;
}

.home-start-card small,
.home-guide-grid p,
.home-place-head small {
  display: block;
  margin-top: 0;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
  line-height: 1.45;
}

.home-search-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(20, 87, 197, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #f6f9ff);
  box-shadow: 0 8px 20px rgba(16, 32, 51, 0.06);
}

.home-search-head,
.home-search-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.home-search-head h3 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.35;
  font-weight: 950;
}

.home-search-field {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #cfdcee;
  border-radius: 8px;
  background: #fff;
}

.home-search-field:focus-within {
  border-color: rgba(20, 87, 197, 0.65);
  box-shadow: 0 0 0 4px rgba(20, 87, 197, 0.1);
}

.home-search-field i {
  color: var(--blue-700);
}

.home-search-field input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 0.82rem;
  font-weight: 850;
}

.home-search-quick,
.home-search-summary,
.home-search-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  min-height: 30px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.home-search-quick button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #d8e4f4;
  border-radius: 999px;
  color: var(--blue-800);
  background: #fff;
  font-size: 0.7rem;
  font-weight: 950;
}

.home-search-summary {
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  background: #edf4ff;
}

.home-search-summary strong {
  color: var(--blue-800);
  font-size: 0.8rem;
  font-weight: 950;
}

.home-search-results {
  display: grid;
  gap: 8px;
}

.home-search-section-head strong {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 950;
}

.home-search-section-head span {
  display: inline-flex;
  min-width: 28px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-size: 0.7rem;
  font-weight: 950;
}

.home-search-shop-grid,
.home-search-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.home-search-product {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(226, 233, 242, 0.95);
  border-radius: 8px;
  background: #fff;
  text-align: right;
  box-shadow: 0 10px 22px rgba(16, 32, 51, 0.07);
}

.home-search-product img {
  display: block;
  width: 100%;
  aspect-ratio: 1.16;
  object-fit: cover;
  background: #edf4ff;
}

.home-search-product span,
.home-search-product strong,
.home-search-product em {
  display: block;
  margin-inline: 9px;
}

.home-search-product span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.home-search-product strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.35;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.home-search-product em {
  width: fit-content;
  margin-block: 7px 9px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 950;
}

.home-search-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px;
  border: 1px dashed #c7d8ee;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.home-search-empty i {
  width: 32px;
  height: 32px;
  color: var(--blue-700);
}

.home-search-empty strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
}

.home-search-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.6;
}

.home-search-empty .secondary-action {
  min-height: 40px;
  border-radius: 8px;
}

.home-search-hint {
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
}

.home-search-hint i {
  color: var(--amber);
}

.home-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid #dbe6f5;
  border-radius: 8px;
  background: #f8fbff;
}

.home-summary-strip span {
  display: grid;
  min-width: 0;
  gap: 3px;
  place-items: center;
  min-height: 54px;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.home-summary-strip strong {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--blue-800);
  font-size: 0.72rem;
  font-weight: 950;
}

.home-summary-strip small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.25;
}

.home-guide-grid article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 72px;
  padding: 10px;
  border: 1px solid #dbe6f5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(16, 32, 51, 0.05);
}

.home-guide-grid article > span {
  width: 34px;
  height: 34px;
}

.home-guide-grid article > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.home-guide-grid strong {
  font-size: 0.76rem;
}

.home-guide-grid p {
  margin: 0;
  color: #43546b;
  font-size: 0.62rem;
  line-height: 1.4;
}

.text-button {
  color: var(--blue-700);
  background: transparent;
  font-size: 0.86rem;
  font-weight: 900;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.stats-row div {
  min-height: 78px;
  padding: 13px 10px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 9px 24px rgba(16, 32, 51, 0.07);
}

.stats-row strong {
  display: block;
  color: var(--blue-800);
  font-size: 1.3rem;
  font-weight: 950;
}

.stats-row span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.shop-grid.spacious {
  margin-top: 16px;
}

.market-browser {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.home-board-browser {
  gap: 10px;
  margin-top: 10px;
}

.home-board-panel {
  display: grid;
  gap: 10px;
}

.home-board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.resale-market {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.resale-market-grid {
  display: grid;
  gap: 12px;
}

.resale-market.is-compact {
  padding: 12px;
  border: 1px solid #dbe6f5;
  border-radius: 8px;
  background: #f8fbff;
}

.resale-market.is-compact .resale-card {
  box-shadow: none;
}

.resale-card {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid #dbe6f5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(16, 32, 51, 0.08);
}

.resale-card.is-auction {
  border-color: rgba(216, 107, 53, 0.3);
  background: linear-gradient(180deg, #fffaf4, #fff);
}

.resale-card-media {
  position: relative;
  min-height: 132px;
  overflow: hidden;
  border-radius: 8px;
  background: #eef3f9;
}

.resale-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resale-card-media .mini-chip {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  box-shadow: 0 8px 18px rgba(16, 32, 51, 0.16);
}

.resale-card-body {
  display: grid;
  min-width: 0;
  gap: 9px;
}

.resale-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.resale-card-head strong,
.resale-card-head span,
.resale-card-head em {
  overflow-wrap: anywhere;
}

.resale-card-head strong {
  display: block;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 950;
  line-height: 1.28;
}

.resale-card-head span,
.resale-note {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.5;
}

.resale-card-head em {
  flex: 0 0 auto;
  color: var(--blue-800);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 950;
}

.resale-price-row,
.auction-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.resale-price-row span,
.auction-info-grid span {
  display: grid;
  gap: 3px;
  min-height: 54px;
  align-content: center;
  padding: 8px;
  border-radius: 8px;
  background: #f5f8fc;
}

.resale-price-row small,
.auction-info-grid small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 900;
}

.resale-price-row strong,
.auction-info-grid strong {
  color: var(--blue-800);
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.auction-timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  color: #7a3b03;
  background: #fff0d7;
  font-size: 0.72rem;
  font-weight: 950;
}

.auction-timer i {
  width: 16px;
  height: 16px;
}

.auction-signin-gate {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dbe6f5;
  border-radius: 8px;
  background: #f8fbff;
}

.auction-signin-gate > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 950;
}

.auction-signin-gate > span i {
  width: 16px;
  height: 16px;
  color: var(--blue-800);
}

.auction-signin-gate p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.5;
}

.auction-signin-gate button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--blue-800);
  font-size: 0.76rem;
  font-weight: 950;
}

.buyer-account-card {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid rgba(24, 169, 153, 0.28);
  border-radius: 8px;
  background: linear-gradient(135deg, #f2fffb, #f8fbff);
  box-shadow: 0 10px 22px rgba(10, 65, 89, 0.08);
}

.buyer-account-card span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #075c54;
  font-size: 0.68rem;
  font-weight: 950;
}

.buyer-account-card span i {
  width: 15px;
  height: 15px;
}

.buyer-account-card strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.buyer-account-card em {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--blue-800);
  background: #fff;
  border: 1px solid rgba(20, 87, 197, 0.16);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 950;
}

.buyer-account-gate {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px dashed rgba(20, 87, 197, 0.26);
  border-radius: 8px;
  background: #f8fbff;
  text-align: right;
}

.buyer-account-gate span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
}

.buyer-account-gate span i {
  color: var(--blue-800);
}

.buyer-account-gate p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.55;
}

.buyer-account-gate button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--blue-800);
  font-weight: 950;
}

.auction-bid-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.auction-bid-form label {
  display: grid;
  gap: 5px;
}

.auction-bid-form label span {
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 950;
}

.auction-bid-form input {
  width: 100%;
  min-height: 40px;
  padding: 9px;
  border: 1px solid #dbe6f5;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
}

.auction-bid-form button,
.auction-closed-button,
.resale-actions button,
.resale-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--blue-800);
  font-size: 0.76rem;
  font-weight: 950;
  text-decoration: none;
}

.auction-bid-form button {
  grid-column: 1 / -1;
  color: #fff;
  background: #7a3b03;
}

.auction-closed-button:disabled {
  color: var(--muted);
  background: #edf2f7;
  opacity: 1;
}

.resale-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.resale-actions a {
  color: #075c54;
  background: #d5faf4;
}

.resale-empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 18px;
  border: 1px dashed #cbd8ea;
  border-radius: 8px;
  color: var(--muted);
  background: #f8fbff;
  text-align: center;
}

.resale-empty i {
  color: var(--blue-800);
}

.resale-empty strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
}

.resale-empty span {
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.5;
}

.market-browser.is-compact {
  gap: 10px;
}

.home-market-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe6f5;
  border-radius: 8px;
  background: #f8fbff;
}

.market-browser.is-compact .market-browser-lead {
  align-items: center;
}

.market-browser.is-compact .market-browser-lead span {
  max-width: 19rem;
}

.market-browser.is-compact .market-type-selector {
  gap: 8px;
}

.market-browser.is-compact .market-type-selector button {
  grid-template-columns: 34px 1fr;
  gap: 4px 8px;
  align-items: center;
  padding: 10px;
  box-shadow: none;
}

.market-browser.is-compact .market-type-selector i {
  grid-row: 1 / span 2;
  width: 21px;
  height: 21px;
}

.market-browser.is-compact .market-type-selector strong {
  font-size: 0.8rem;
}

.market-browser.is-compact .market-type-selector small {
  display: none;
}

.market-browser.is-compact .market-type-selector em {
  min-height: 22px;
  padding: 0 7px;
  font-size: 0.6rem;
}

.home-place-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  padding-top: 2px;
  border-top: 1px solid #e4edf8;
}

.home-place-head strong {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 950;
}

.home-place-list {
  display: grid;
  gap: 8px;
}

.home-place-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid #dbe6f5;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  text-align: right;
}

.home-place-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  color: var(--blue-800);
  background: var(--blue-100);
}

.home-place-card strong,
.home-place-card small {
  display: block;
  overflow-wrap: anywhere;
}

.home-place-card strong {
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 950;
  line-height: 1.3;
}

.home-place-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
}

.home-place-card em,
.home-place-card b {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.home-place-card em {
  color: #075c54;
  background: #d5faf4;
}

.home-place-card b {
  grid-column: 2 / -1;
  justify-self: start;
  color: var(--blue-800);
  background: var(--blue-100);
}

.market-browser-stage,
.market-selection-panel {
  display: grid;
  gap: 12px;
}

.market-browser-lead,
.market-selected-head,
.market-results-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.market-browser-lead h3,
.market-selected-head h3,
.market-results-head h3 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.3;
}

.market-browser-lead span,
.market-selected-head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.45;
}

.market-browser-lead em,
.market-results-head > span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.market-browser-lead.compact {
  padding-top: 2px;
  border-top: 1px solid #e4edf8;
}

.market-type-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.market-type-selector button {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 12px;
  border: 1px solid #dbe6f5;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  text-align: right;
  box-shadow: 0 10px 22px rgba(16, 32, 51, 0.06);
}

.market-type-selector button.is-selected {
  border-color: rgba(20, 87, 197, 0.72);
  background: #eef5ff;
  box-shadow: 0 0 0 3px rgba(20, 87, 197, 0.12);
}

.market-type-selector i {
  width: 24px;
  height: 24px;
  color: var(--blue-800);
}

.market-type-selector strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
}

.market-type-selector small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.45;
}

.market-type-selector em {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 950;
}

.market-place-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 2px;
}

.market-product-strip::-webkit-scrollbar {
  display: none;
}

.market-place-card {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  min-width: 0;
  gap: 8px;
  align-items: start;
  overflow: hidden;
  padding: 14px;
  border: 1px solid #dbe6f5;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.96)),
    linear-gradient(135deg, rgba(20, 87, 197, 0.14), rgba(18, 140, 126, 0.11));
  text-align: right;
  box-shadow: 0 12px 28px rgba(16, 32, 51, 0.08);
}

.market-place-card.is-selected {
  border-color: rgba(20, 87, 197, 0.72);
  box-shadow: 0 0 0 3px rgba(20, 87, 197, 0.12), 0 16px 30px rgba(16, 32, 51, 0.1);
}

.market-place-icon {
  display: grid;
  grid-row: 1 / span 3;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  color: var(--blue-800);
  background: var(--blue-100);
}

.market-place-icon i {
  width: 22px;
  height: 22px;
}

.market-place-kind {
  display: inline-flex;
  width: fit-content;
  justify-self: start;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #075c54;
  background: #d5faf4;
  font-size: 0.68rem;
  font-weight: 950;
}

.market-place-card strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.market-place-card small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.45;
}

.market-place-stats {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.market-place-stats span {
  min-width: 0;
  padding: 8px;
  border-radius: 8px;
  color: #405675;
  background: #eef5ff;
  font-size: 0.68rem;
  font-weight: 950;
  text-align: center;
}

.market-level-map {
  display: grid;
  grid-column: 1 / -1;
  gap: 6px;
}

.market-level-pill {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  background: #f5f8fc;
}

.market-level-pill b,
.market-level-pill em {
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 950;
}

.market-level-pill b {
  color: var(--ink);
}

.market-level-pill em {
  color: #607391;
}

.market-level-pill.is-first {
  border-inline-start: 5px solid #d86b35;
}

.market-level-pill.is-second {
  border-inline-start: 5px solid #128c7e;
}

.market-level-pill.is-third {
  border-inline-start: 5px solid #8d4fd8;
}

.market-more-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-size: 0.82rem;
  font-weight: 950;
}

.market-more-button i,
.market-selected-head .text-button i {
  width: 16px;
  height: 16px;
}

.market-selection-panel {
  padding: 12px;
  border: 1px solid #dbe6f5;
  border-radius: 8px;
  background: #f8fbff;
}

.market-selection-panel.is-empty {
  min-height: 150px;
  place-items: center;
  text-align: center;
}

.market-selection-panel.is-empty > i {
  width: 34px;
  height: 34px;
  color: var(--blue-700);
}

.market-selection-panel.is-empty strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
}

.market-selection-panel.is-empty p {
  max-width: 34rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.6;
}

.market-search {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: center;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid #cfdcee;
  border-radius: 8px;
  background: #fff;
}

.market-search i {
  width: 18px;
  height: 18px;
  color: var(--blue-700);
}

.market-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
}

.market-filter-row {
  display: flex;
  gap: 8px;
  margin-inline: -12px;
  padding: 0 12px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.market-filter-row::-webkit-scrollbar {
  display: none;
}

.market-filter-row button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid #d8e4f4;
  border-radius: 999px;
  color: #405675;
  background: #fff;
  font-size: 0.74rem;
  font-weight: 950;
  white-space: nowrap;
}

.market-filter-row button.is-selected {
  color: #fff;
  border-color: var(--blue-800);
  background: var(--blue-800);
}

.market-filter-row em {
  display: inline-flex;
  min-width: 22px;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: currentColor;
  background: rgba(255, 255, 255, 0.18);
  font-style: normal;
  font-size: 0.68rem;
}

.market-filter-row button:not(.is-selected) em {
  background: #eef5ff;
}

.market-rent-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(20, 87, 197, 0.18);
  border-radius: 8px;
  background: #fff;
}

.market-rent-list {
  display: grid;
  gap: 10px;
}

.market-rent-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe6f5;
  border-inline-start: 5px solid var(--rent-accent, var(--blue-800));
  border-radius: 8px;
  background: linear-gradient(135deg, #fff, #f8fbff);
}

.market-rent-card.is-first {
  --rent-accent: #d86b35;
}

.market-rent-card.is-second {
  --rent-accent: #128c7e;
}

.market-rent-card.is-third {
  --rent-accent: #8d4fd8;
}

.rent-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rent-available-chip {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #075c54;
  background: #d5faf4;
  font-size: 0.68rem;
  font-weight: 950;
}

.rent-level-chip {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--rent-accent, var(--blue-800));
  background: color-mix(in srgb, var(--rent-accent, var(--blue-800)), #fff 88%);
  font-size: 0.68rem;
  font-weight: 950;
}

.market-rent-card strong {
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 950;
  line-height: 1.35;
}

.market-rent-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.6;
}

.rent-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.rent-detail-grid div {
  min-width: 0;
  padding: 9px 8px;
  border-radius: 8px;
  background: #f3f7fc;
  text-align: center;
}

.rent-detail-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1.35;
}

.rent-detail-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--rent-accent, var(--blue-800));
  font-size: 1rem;
  font-weight: 950;
}

.rent-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rent-card-meta span {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--rent-accent, var(--blue-800));
  background: color-mix(in srgb, var(--rent-accent, var(--blue-800)), #fff 88%);
  font-size: 0.68rem;
  font-weight: 950;
}

.rent-space-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 9px;
  border: 1px dashed #c7d8ee;
  border-radius: 8px;
  background: #fff;
}

.rent-space-preview span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
}

.rent-space-preview em,
.rent-space-preview b {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 950;
}

.rent-space-preview em {
  color: var(--rent-accent, var(--blue-800));
  background: color-mix(in srgb, var(--rent-accent, var(--blue-800)), #fff 90%);
}

.rent-space-preview b {
  color: #405675;
  background: #eef5ff;
}

.market-rent-card .primary-action {
  min-height: 40px;
  border-radius: 8px;
}

.market-shop-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.market-empty-state {
  display: grid;
  min-height: 130px;
  place-items: center;
  padding: 18px;
  border: 1px dashed #c7d8ee;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.market-empty-state i {
  width: 32px;
  height: 32px;
  color: var(--blue-700);
}

.market-empty-state strong {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 950;
}

.market-empty-state p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.5;
}

.market-products-panel {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.market-product-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, 44%);
  gap: 10px;
  margin-inline: -12px;
  padding: 0 12px 6px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
}

.market-product-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(226, 233, 242, 0.9);
  border-radius: 8px;
  background: #fff;
  text-align: right;
  box-shadow: 0 10px 22px rgba(16, 32, 51, 0.07);
  scroll-snap-align: start;
}

.market-product-card.has-offer {
  border-color: rgba(216, 107, 53, 0.38);
  background: #fff8f1;
}

.market-product-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1.12;
  object-fit: cover;
}

.market-product-card span,
.market-product-card strong,
.market-product-card em {
  display: block;
  margin-inline: 9px;
}

.market-product-card span {
  margin-top: 9px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
}

.market-product-card strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.market-product-card em {
  width: fit-content;
  margin-block: 7px 9px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 950;
}

.shop-place-group {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe6f5;
  border-radius: 12px;
  background: #f8fbff;
}

.shop-place-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.shop-place-head div {
  display: grid;
  gap: 2px;
}

.shop-place-head span,
.shop-place-head em {
  color: #68768a;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.shop-place-head strong {
  color: #102033;
  font-size: 0.95rem;
  font-weight: 950;
}

.shop-place-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shop-card {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(226, 233, 242, 0.86);
  border-radius: 8px;
  text-align: right;
  background: var(--surface);
  box-shadow: 0 10px 26px rgba(16, 32, 51, 0.08);
}

.shop-card:active {
  transform: scale(0.99);
}

.shop-card.is-first-floor {
  grid-column: 1 / -1;
}

.shop-card.is-first-floor .shop-image {
  aspect-ratio: 2.15;
}

.shop-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1.18;
  overflow: hidden;
  background: #dbe8f8;
}

.shop-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(8, 36, 95, 0.42));
}

.shop-status {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  max-width: calc(100% - 16px);
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1.1;
}

.shop-status.available {
  color: #075c54;
  background: rgba(213, 250, 244, 0.96);
}

.shop-status.rented {
  color: #733b07;
  background: rgba(255, 238, 210, 0.96);
}

.shop-status.featured {
  color: #fff;
  background: rgba(20, 87, 197, 0.94);
}

.shop-status.for-sale {
  color: #7a3b03;
  background: rgba(255, 229, 184, 0.96);
}

.shop-board-label,
.shop-views {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
}

.shop-board-label {
  left: 8px;
  top: 8px;
  color: #08245f;
  background: #fff;
}

.shop-views {
  left: 8px;
  bottom: 8px;
  color: #fff;
  background: rgba(8, 36, 95, 0.78);
  backdrop-filter: blur(10px);
}

.shop-views i {
  width: 15px;
  height: 15px;
}

.shop-body {
  padding: 10px;
}

.shop-body strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
  font-weight: 950;
}

.shop-body p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.45;
}

.featured-strip,
.plan-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(236px, 76%);
  gap: 12px;
  margin: 14px -16px 0;
  padding: 0 16px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.featured-strip::-webkit-scrollbar,
.plan-row::-webkit-scrollbar,
.filter-chips::-webkit-scrollbar {
  display: none;
}

.featured-card {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  min-height: 120px;
  padding: 10px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid rgba(226, 233, 242, 0.86);
  box-shadow: 0 10px 26px rgba(16, 32, 51, 0.08);
}

.featured-card img {
  width: 82px;
  height: 100%;
  min-height: 100px;
  object-fit: cover;
  border-radius: 8px;
}

.featured-card.is-first-floor {
  grid-template-columns: 108px 1fr;
  border-color: rgba(20, 87, 197, 0.32);
}

.featured-card.is-first-floor img {
  width: 108px;
}

.featured-card h3,
.plan-card h3,
.product-card h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 950;
}

.featured-card p,
.plan-card p,
.product-card p,
.space-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.featured-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.mini-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-size: 0.68rem;
  font-weight: 900;
}

.mini-chip.pending {
  color: #733b07;
  background: rgba(255, 238, 210, 0.96);
}

.mini-chip.available {
  color: #075c54;
  background: #d5faf4;
}

.mini-chip.for-sale {
  color: #7a3b03;
  background: #fff0d7;
}

.mini-chip i {
  width: 14px;
  height: 14px;
  margin-inline-end: 4px;
}

.steps-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.step-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 76px;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid rgba(226, 233, 242, 0.86);
}

.step-item > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  color: var(--blue-800);
  background: var(--blue-100);
}

.step-item strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 950;
}

.step-item p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.plan-card {
  padding: 14px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid rgba(226, 233, 242, 0.86);
  box-shadow: 0 10px 26px rgba(16, 32, 51, 0.08);
}

.plan-card.is-highlighted {
  color: #fff;
  background: linear-gradient(145deg, var(--blue-950), var(--blue-700));
  border-color: transparent;
}

.plan-card.is-highlighted p,
.plan-card.is-highlighted li,
.plan-card.is-highlighted .plan-price small {
  color: rgba(255, 255, 255, 0.78);
}

.plan-price {
  display: flex;
  align-items: end;
  gap: 6px;
  margin: 12px 0;
  color: var(--blue-800);
  font-size: 1.42rem;
  font-weight: 950;
}

.plan-card.is-highlighted .plan-price {
  color: #fff;
}

.plan-price small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.plan-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-card li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #45576d;
  font-size: 0.78rem;
  font-weight: 800;
}

.plan-card li i {
  width: 16px;
  height: 16px;
  color: var(--teal);
}

.plan-card .primary-action {
  width: 100%;
  margin-top: 14px;
  color: #fff;
  background: var(--blue-800);
  box-shadow: none;
}

.plan-card.is-highlighted .primary-action {
  color: var(--blue-950);
  background: #fff;
}

.subpage-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 14px 16px;
  background: rgba(245, 248, 252, 0.92);
  border-bottom: 1px solid rgba(226, 233, 242, 0.9);
  backdrop-filter: blur(16px);
}

.subpage-bar h1 {
  font-size: 1.15rem;
}

.back-button {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: var(--blue-800);
  background: #fff;
  box-shadow: 0 8px 18px rgba(16, 32, 51, 0.08);
}

.filter-chips {
  display: flex;
  gap: 8px;
  margin: 2px -16px 0;
  padding: 0 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-chips button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
}

.filter-chips .is-selected {
  color: #fff;
  background: var(--blue-800);
}

.details-cover {
  --details-cover-bottom-shade: rgba(4, 17, 42, 0.2);
  --details-cover-corner-shade: rgba(13, 63, 149, 0.04);
  position: relative;
  min-height: 274px;
  padding: 14px 16px;
  overflow: visible;
  color: #fff;
  background: #102033;
}

.details-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #071326;
  background-image: var(--cover);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(1.08) contrast(1.04) brightness(1.02);
  pointer-events: none;
}

.details-cover[data-cover-motion="soft"]::before {
  animation: detailsCoverBreath 18s ease-in-out infinite alternate;
}

.details-cover[data-cover-motion="cars"]::before {
  animation: detailsCoverDrive 12s ease-in-out infinite alternate;
  filter: saturate(1.16) contrast(1.08) brightness(1.05);
}

.details-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 12%, var(--details-cover-corner-shade), transparent 34%),
    linear-gradient(180deg, rgba(4, 17, 42, 0.03), rgba(4, 17, 42, 0.08) 48%, var(--details-cover-bottom-shade));
  pointer-events: none;
}

.cover-motion-lights {
  display: none;
}

.details-cover[data-cover-motion="cars"] .cover-motion-lights {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.details-cover[data-cover-motion="cars"] .cover-motion-lights::before,
.details-cover[data-cover-motion="cars"] .cover-motion-lights::after {
  content: "";
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
}

.details-cover[data-cover-motion="cars"] .cover-motion-lights::before {
  inset: 0;
  background:
    radial-gradient(ellipse 9% 18% at 24% 57%, rgba(255, 246, 196, 0.82), rgba(255, 186, 65, 0.32) 34%, transparent 66%),
    radial-gradient(ellipse 8% 16% at 37% 59%, rgba(255, 246, 196, 0.78), rgba(255, 186, 65, 0.28) 35%, transparent 64%),
    radial-gradient(ellipse 7% 14% at 74% 53%, rgba(255, 246, 196, 0.7), rgba(255, 186, 65, 0.24) 34%, transparent 64%),
    radial-gradient(ellipse 6% 12% at 86% 55%, rgba(255, 246, 196, 0.62), rgba(255, 186, 65, 0.2) 34%, transparent 64%);
  opacity: 0.16;
  filter: blur(4px);
  animation: detailsCarLights 3.1s ease-in-out infinite;
}

.details-cover[data-cover-motion="cars"] .cover-motion-lights::after {
  top: -36%;
  bottom: -36%;
  width: 34%;
  right: -42%;
  background: linear-gradient(100deg, transparent 18%, rgba(255, 255, 255, 0.24) 48%, transparent 78%);
  transform: skewX(-14deg);
  opacity: 0.46;
  animation: detailsCoverSweep 6.8s ease-in-out infinite;
}

.details-cover.is-first-floor-board {
  --details-cover-bottom-shade: rgba(4, 17, 42, 0.22);
  min-height: 372px;
}

.details-cover[data-cover-style="brand"] {
  --details-cover-corner-shade: color-mix(in srgb, var(--shop-accent), transparent 92%);
  --details-cover-bottom-shade: rgba(4, 17, 42, 0.18);
}

.details-cover[data-cover-style="minimal"] {
  --details-cover-corner-shade: rgba(255, 255, 255, 0.04);
  --details-cover-bottom-shade: rgba(4, 17, 42, 0.16);
}

.details-cover[data-cover-style="premium"] {
  --details-cover-corner-shade: color-mix(in srgb, var(--shop-accent), transparent 94%);
  --details-cover-bottom-shade: rgba(4, 17, 42, 0.18);
}

.details-cover .back-button {
  position: relative;
  z-index: 2;
  color: var(--blue-900);
}

.big-board-badge {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  color: #08245f;
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.78rem;
  font-weight: 950;
  box-shadow: 0 12px 26px rgba(5, 22, 58, 0.16);
}

.big-board-badge i {
  width: 17px;
  height: 17px;
  color: var(--blue-800);
}

.details-documents-menu {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;
  display: grid;
  gap: 6px;
  justify-items: start;
}

.details-cover.has-owner-documents .big-board-badge {
  top: 150px;
}

.details-documents-label,
.details-documents-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 26px rgba(5, 22, 58, 0.16);
  backdrop-filter: blur(12px);
}

.details-documents-label {
  min-height: 34px;
  padding: 0 10px;
  color: var(--shop-accent, var(--blue-800));
  font-size: 0.7rem;
  font-weight: 950;
}

.details-documents-label i {
  width: 17px;
  height: 17px;
}

.details-documents-actions {
  display: grid;
  gap: 6px;
  min-width: 150px;
}

.details-documents-actions button {
  min-height: 38px;
  padding: 0 11px;
  color: var(--blue-950);
  font-size: 0.72rem;
  font-weight: 950;
  text-align: right;
  white-space: nowrap;
}

.details-documents-actions button:hover {
  color: var(--shop-accent, var(--blue-800));
  background: color-mix(in srgb, var(--shop-accent, var(--blue-800)), #fff 88%);
}

.details-documents-actions button:disabled {
  opacity: 0.68;
}

.details-headline {
  position: absolute;
  z-index: 3;
  right: 16px;
  bottom: -112px;
  left: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  justify-items: center;
  align-items: start;
  text-align: center;
}

.shop-logo {
  display: grid;
  box-sizing: border-box;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  color: var(--blue-900);
  background: #fff;
  font-size: 1.3rem;
  font-weight: 950;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.32),
    0 0 0 6px rgba(8, 36, 95, 0.18),
    0 14px 30px rgba(5, 22, 58, 0.34);
}

.shop-logo.has-image {
  background-position: center;
  background-size: cover;
  box-shadow:
    inset 0 0 0 1px rgba(8, 36, 95, 0.18),
    0 0 0 2px rgba(255, 255, 255, 0.38),
    0 0 0 7px rgba(8, 36, 95, 0.2),
    0 16px 34px rgba(5, 22, 58, 0.38);
}

.shop-logo[data-logo-shape="circle"] {
  border-radius: 50%;
}

.shop-logo[data-logo-shape="square"] {
  border-radius: 14px;
}

.details-headline h1 {
  margin: 0 0 3px;
  color: #102033;
  font-size: 1.55rem;
  line-height: 1.18;
  font-weight: 950;
  text-shadow: none;
}

.details-cover[data-cover-motion="cars"] .details-headline h1 {
  background-image: linear-gradient(110deg, #102033 0%, #102033 34%, #0d3f95 44%, #fff2b3 51%, #0d3f95 58%, #102033 72%, #102033 100%);
  background-size: 260% 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: detailsTitleShine 4.8s ease-in-out infinite;
}

.details-headline p {
  margin: 0;
  color: #43546b;
  font-size: 0.82rem;
  line-height: 1.5;
  font-weight: 850;
  text-shadow: none;
}

.details-cover[data-header-style="centered"] .details-headline {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.details-cover[data-header-style="centered"] .shop-logo {
  width: 72px;
  height: 72px;
}

.details-cover[data-header-style="compact"] {
  min-height: 242px;
}

.details-cover[data-header-style="compact"] .details-headline {
  grid-template-columns: 1fr;
  align-items: start;
}

.details-cover[data-header-style="compact"] .shop-logo {
  width: 68px;
  height: 68px;
  font-size: 1.18rem;
}

.details-body {
  --shop-accent: var(--blue-800);
  padding: 126px 16px 8px;
}

@keyframes detailsCoverBreath {
  0% {
    background-position: center;
    filter: saturate(1.08) contrast(1.04) brightness(1.02);
  }
  100% {
    background-position: 52% 48%;
    filter: saturate(1.12) contrast(1.06) brightness(1.04);
  }
}

@keyframes detailsCoverDrive {
  0% {
    background-position: 49% 50%;
    filter: saturate(1.12) contrast(1.06) brightness(1.03);
  }
  42% {
    background-position: 51% 49%;
    filter: saturate(1.2) contrast(1.1) brightness(1.08);
  }
  100% {
    background-position: 47% 51%;
    filter: saturate(1.15) contrast(1.08) brightness(1.05);
  }
}

@keyframes detailsCarLights {
  0%,
  100% {
    opacity: 0.14;
    transform: scale(0.98);
  }
  38% {
    opacity: 0.78;
    transform: scale(1.04);
  }
  54% {
    opacity: 0.26;
    transform: scale(1);
  }
  72% {
    opacity: 0.92;
    transform: scale(1.06);
  }
}

@keyframes detailsCoverSweep {
  0%,
  38% {
    transform: translateX(0) skewX(-14deg);
    opacity: 0;
  }
  54% {
    opacity: 0.48;
  }
  78%,
  100% {
    transform: translateX(-430%) skewX(-14deg);
    opacity: 0;
  }
}

@keyframes detailsTitleShine {
  0%,
  36% {
    background-position: 130% center;
  }
  76%,
  100% {
    background-position: -120% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .details-cover[data-cover-motion]::before,
  .details-cover[data-cover-motion="cars"] .cover-motion-lights::before,
  .details-cover[data-cover-motion="cars"] .cover-motion-lights::after,
  .details-cover[data-cover-motion="cars"] .details-headline h1 {
    animation: none;
  }

  .details-cover[data-cover-motion="cars"] .cover-motion-lights {
    opacity: 0.26;
  }
}

.details-summary {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(203, 216, 234, 0.82);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #f8fbff);
}

.details-summary p {
  margin: 0;
  color: #3e4d61;
  font-size: 0.92rem;
  line-height: 1.8;
}

.shop-quotation-panel {
  padding-bottom: 18px;
}

.shop-quotation-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 13px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--shop-accent, var(--blue-800)) 24%, #d8e5f5);
  border-radius: 8px;
  background:
    linear-gradient(135deg, #ffffff, #f7fbff),
    linear-gradient(90deg, rgba(216, 107, 53, 0.08), rgba(24, 169, 153, 0.08));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 18px 42px rgba(8, 36, 95, 0.12);
}

.shop-quotation-qr {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.shop-quotation-qr img {
  width: 76px;
  height: 76px;
  padding: 5px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(8, 36, 95, 0.12);
}

.shop-quotation-qr span {
  color: var(--shop-accent, var(--blue-800));
  font-size: 0.66rem;
  font-weight: 950;
}

.shop-quotation-copy {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.shop-quotation-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.3;
}

.shop-quotation-copy p:not(.section-kicker) {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
  line-height: 1.55;
}

.shop-quotation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.shop-quotation-meta span {
  display: inline-flex;
  min-width: 0;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--shop-accent, var(--blue-800));
  background: color-mix(in srgb, var(--shop-accent, var(--blue-800)), #fff 90%);
  font-size: 0.68rem;
  font-weight: 950;
}

.shop-quotation-meta i {
  width: 14px;
  height: 14px;
}

.shop-quotation-meta b {
  min-width: 0;
  overflow-wrap: anywhere;
}

.shop-quotation-services {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(216, 107, 53, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, #fffaf2, #ffffff),
    linear-gradient(90deg, rgba(216, 107, 53, 0.08), rgba(243, 195, 91, 0.08));
}

.shop-quotation-services strong {
  color: #6b3b05;
  font-size: 0.78rem;
  font-weight: 950;
}

.shop-quotation-services div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(154px, 1fr));
  gap: 7px;
}

.shop-quotation-services span {
  display: inline-flex;
  min-width: 0;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #5f3204;
  background: #fff;
  border: 1px solid rgba(240, 211, 184, 0.92);
  font-size: 0.68rem;
  font-weight: 950;
  text-align: center;
  overflow-wrap: anywhere;
}

.shop-quotation-download {
  display: inline-flex;
  grid-column: 1 / -1;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--shop-accent, var(--blue-800)), #18a999);
  box-shadow: 0 14px 30px rgba(8, 36, 95, 0.18);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 950;
  cursor: pointer;
}

.shop-quotation-download:disabled {
  opacity: 0.72;
  cursor: wait;
}

.shop-quotation-download.is-loading i {
  animation: quotationSpin 900ms linear infinite;
}

@keyframes quotationSpin {
  to {
    transform: rotate(360deg);
  }
}

.details-owner-tools {
  margin-top: 12px;
}

.details-owner-tools button {
  display: inline-flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  color: #075c54;
  background: #d5faf4;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(18, 140, 126, 0.12);
}

.details-owner-tools i {
  width: 19px;
  height: 19px;
}

.details-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.contact-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
  margin-top: 14px;
}

.contact-row[data-contact-count="1"] {
  grid-template-columns: 1fr;
}

.contact-row[data-contact-count="2"] {
  grid-template-columns: 1fr auto;
}

.contact-row[data-contact-count="3"] {
  grid-template-columns: 1fr auto auto;
}

.contact-button {
  color: #fff;
  background: var(--shop-accent, #128c7e);
  box-shadow: 0 12px 28px rgba(18, 140, 126, 0.2);
  text-decoration: none;
}

.details-body[data-button-style="soft"] .contact-button,
.details-body[data-button-style="soft"] .social-button {
  color: var(--shop-accent);
  background: color-mix(in srgb, var(--shop-accent), #fff 86%);
}

.details-body[data-button-style="outline"] .contact-button,
.details-body[data-button-style="outline"] .social-button {
  color: var(--shop-accent);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--shop-accent), #fff 55%);
}

.details-body[data-card-tone="soft"] .product-card,
.details-body[data-card-tone="soft"] .random-product-card {
  background: #f8fbff;
  border-color: color-mix(in srgb, var(--shop-accent), #fff 72%);
}

.details-body[data-card-tone="outlined"] .product-card,
.details-body[data-card-tone="outlined"] .random-product-card {
  box-shadow: none;
  border-color: color-mix(in srgb, var(--shop-accent), #fff 52%);
}

.social-button {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  color: var(--blue-800);
  background: #fff;
  box-shadow: 0 8px 18px rgba(16, 32, 51, 0.08);
  text-decoration: none;
}

.shop-sale-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--shop-accent, var(--blue-800)), #fff 68%);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(16, 32, 51, 0.08);
}

.shop-sale-head {
  display: grid;
  gap: 7px;
}

.shop-sale-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.35;
}

.shop-sale-head p,
.sale-market-note,
.transfer-lock-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.55;
}

.sale-money-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sale-money-grid span {
  display: grid;
  gap: 4px;
  min-height: 62px;
  align-content: center;
  padding: 9px;
  border-radius: 8px;
  background: #f5f8fc;
}

.sale-money-grid small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
}

.sale-money-grid strong {
  color: var(--blue-800);
  font-size: 0.82rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.sale-market-note {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--shop-accent, var(--blue-800));
  background: color-mix(in srgb, var(--shop-accent, var(--blue-800)), #fff 90%);
}

.sale-market-note i {
  width: 16px;
  height: 16px;
}

.sale-transfer-flow {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--shop-accent, var(--blue-800)), #fff 62%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--shop-accent, var(--blue-800)), #fff 94%);
}

.sale-flow-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.sale-flow-steps span {
  display: grid;
  min-height: 34px;
  place-items: center;
  padding: 0 7px;
  border-radius: 8px;
  color: var(--shop-accent, var(--blue-800));
  background: #fff;
  font-size: 0.66rem;
  font-weight: 950;
  text-align: center;
}

.sale-whatsapp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #128c7e;
  font-weight: 950;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(18, 140, 126, 0.18);
}

.sale-whatsapp-button.is-disabled {
  color: var(--muted);
  background: #eef3f9;
  box-shadow: none;
}

.sale-transfer-flow small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.55;
  text-align: center;
}

.title-transfer-request-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--blue-800);
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(20, 87, 197, 0.18);
}

.title-transfer-request-button.is-preview,
.title-transfer-request-button:disabled {
  color: var(--blue-800);
  background: var(--blue-100);
  box-shadow: none;
  opacity: 1;
}

.transfer-form-title {
  display: grid;
  grid-column: 1 / -1;
  gap: 4px;
  padding: 10px;
  border-radius: 8px;
  background: #f5f8fc;
}

.transfer-form-title strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
}

.transfer-form-title small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.sale-buyer-form,
.sale-listing-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.sale-owner-toggle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
  min-width: 0;
  min-height: 78px;
  padding: 12px;
  border: 1px solid rgba(20, 87, 197, 0.18);
  border-radius: 8px;
  color: var(--ink);
  background: linear-gradient(180deg, #fff, #f6f9ff);
  text-align: right;
  box-shadow: 0 8px 20px rgba(16, 32, 51, 0.06);
}

.sale-owner-toggle .mini-chip {
  width: fit-content;
}

.sale-owner-toggle strong,
.sale-owner-toggle small {
  grid-column: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sale-owner-toggle strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.35;
}

.sale-owner-toggle small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.45;
}

.sale-owner-toggle > i {
  grid-column: 2;
  grid-row: 1 / span 3;
  color: var(--blue-800);
  transition: transform 180ms ease;
}

.sale-owner-toggle.is-open > i {
  transform: rotate(180deg);
}

.sale-owner-panel {
  display: grid;
  gap: 10px;
}

.sale-buyer-form label,
.sale-listing-form label {
  display: grid;
  gap: 6px;
}

.sale-buyer-form label span,
.sale-listing-form label span {
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 950;
}

.sale-buyer-form input,
.sale-buyer-form textarea,
.sale-listing-form input,
.sale-listing-form select,
.sale-listing-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px;
  border: 1px solid #dbe6f5;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
}

.sale-buyer-form textarea,
.sale-listing-form textarea {
  resize: vertical;
}

.sale-buyer-form .wide-field,
.sale-listing-form .wide-field,
.sale-buyer-form button,
.sale-listing-form button {
  grid-column: 1 / -1;
}

.sale-buyer-form button,
.sale-listing-form button,
.sale-actions button,
.admin-transfer-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--blue-800);
  font-weight: 950;
}

.sale-buyer-form button:disabled,
.sale-listing-form button:disabled {
  opacity: 0.62;
}

.agreement-service-panel {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  pointer-events: auto;
  scroll-margin-bottom: 130px;
}

.agreement-entry-panel {
  position: relative;
  z-index: 2;
}

.agreement-entry-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 16px;
  width: 100%;
  min-height: 132px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(13, 63, 149, 0.18);
  border-radius: 8px;
  color: inherit;
  background:
    linear-gradient(135deg, rgba(13, 63, 149, 0.07), rgba(255, 255, 255, 0.96) 46%),
    #fff;
  text-align: inherit;
  box-shadow: 0 18px 42px rgba(16, 32, 51, 0.1);
  cursor: pointer;
}

.agreement-entry-card:hover,
.agreement-entry-card:focus-visible {
  border-color: rgba(13, 63, 149, 0.38);
  box-shadow: 0 20px 48px rgba(13, 63, 149, 0.16);
  outline: 0;
}

.agreement-entry-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.agreement-entry-copy strong {
  color: var(--ink);
  font-size: 1.28rem;
  font-weight: 950;
  line-height: 1.25;
}

.agreement-entry-copy small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.55;
}

.agreement-entry-side {
  display: grid;
  gap: 10px;
  justify-items: center;
  color: var(--blue-800);
}

.agreement-entry-side b {
  display: inline-flex;
  min-width: 58px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #fff;
  background: var(--blue-800);
  box-shadow: 0 14px 26px rgba(13, 63, 149, 0.16);
}

.agreement-entry-side i {
  width: 23px;
  height: 23px;
}

.service-direct-route-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(13, 63, 149, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 255, 0.96)),
    #fff;
  box-shadow: 0 12px 28px rgba(16, 32, 51, 0.06);
}

.service-direct-route-card img {
  display: block;
  width: 88px;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 6px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.92);
}

.service-direct-route-card div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.service-direct-route-card strong {
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 950;
}

.service-direct-route-card span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.55;
}

.service-direct-route-card a {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: var(--blue-800);
  font-size: 0.72rem;
  font-weight: 950;
  text-decoration: none;
}

.service-direct-route-card a span {
  overflow: hidden;
  color: inherit;
  direction: ltr;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-direct-route-card a i {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  stroke-width: 2.7;
}

.agreement-doc-preview {
  position: relative;
  display: grid;
  width: 82px;
  height: 104px;
  align-content: start;
  gap: 9px;
  padding: 12px 10px;
  border: 1px solid rgba(13, 63, 149, 0.2);
  border-radius: 8px;
  color: var(--blue-800);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 12px 26px rgba(16, 32, 51, 0.12);
  overflow: hidden;
}

.agreement-doc-preview::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #dce9fb 0 50%, transparent 50%);
}

.agreement-doc-head {
  font-size: 0.76rem;
  font-weight: 950;
  line-height: 1;
}

.agreement-doc-lines {
  display: grid;
  gap: 6px;
}

.agreement-doc-lines i {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(13, 63, 149, 0.18);
}

.agreement-doc-lines i:nth-child(2) {
  width: 82%;
}

.agreement-doc-lines i:nth-child(3) {
  width: 62%;
}

.agreement-doc-stamp {
  position: absolute;
  right: 10px;
  bottom: 12px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 2px solid rgba(13, 63, 149, 0.62);
  border-radius: 50%;
  font-size: 0.64rem;
  font-weight: 950;
}

.agreement-doc-sign {
  position: absolute;
  left: 10px;
  bottom: 18px;
  width: 34px;
  height: 13px;
  border-bottom: 2px solid rgba(13, 63, 149, 0.62);
  border-radius: 50%;
  transform: rotate(-11deg);
}

.agreement-page-bar {
  margin-bottom: 12px;
}

.agreement-page-hero {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(13, 63, 149, 0.14);
  background: linear-gradient(135deg, rgba(13, 63, 149, 0.08), #fff 48%);
}

.agreement-route-loading {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 210px;
  border: 1px solid rgba(13, 63, 149, 0.14);
  background: linear-gradient(135deg, rgba(13, 63, 149, 0.08), #fff 48%);
}

.agreement-page-hero h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1.25;
}

.agreement-route-loading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.24rem;
  line-height: 1.3;
}

.agreement-route-loading p:not(.section-kicker) {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.65;
}

.agreement-page-hero p:not(.section-kicker) {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.65;
}

.agreement-doc-preview.is-large {
  width: 96px;
  height: 122px;
}

.agreement-service-page-panel {
  margin-top: 12px;
}

.agreement-service-page-panel .agreement-service-card {
  overflow: visible;
}

.agreement-service-page-panel .agreement-card-toggle {
  pointer-events: none;
}

.agreement-service-page-panel .agreement-form-shell {
  display: block !important;
  border-top: 0;
}

.agreement-service-card {
  position: relative;
  border: 1px solid rgba(13, 63, 149, 0.16);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(16, 32, 51, 0.08);
  overflow: hidden;
}

.agreement-card-toggle {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto 24px;
  gap: 12px;
  width: 100%;
  min-height: 88px;
  align-items: center;
  padding: 14px;
  border: 0;
  color: inherit;
  background: #fff;
  text-align: inherit;
  cursor: pointer;
  list-style: none;
}

.agreement-page-card .agreement-card-toggle {
  cursor: default;
}

.agreement-card-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 8px;
  color: var(--blue-800);
  background: var(--blue-100);
}

.agreement-card-icon i,
.agreement-toggle-icon {
  width: 22px;
  height: 22px;
}

.agreement-card-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.agreement-card-copy .section-kicker {
  font-size: 0.7rem;
  font-weight: 950;
}

.agreement-card-copy strong {
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.28;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.agreement-card-copy small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.agreement-price-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  color: #fff;
  background: var(--blue-800);
  font-size: 0.9rem;
  font-weight: 950;
  white-space: nowrap;
  box-shadow: 0 12px 24px rgba(13, 63, 149, 0.16);
}

.agreement-toggle-icon {
  color: var(--muted);
  transition: transform 180ms ease;
}

.agreement-service-card.is-open .agreement-toggle-icon {
  transform: rotate(180deg);
}

.agreement-page-card .agreement-toggle-icon {
  display: none;
}

.agreement-form-shell {
  display: none;
  border-top: 1px solid rgba(226, 233, 242, 0.9);
  padding: 14px;
  background: #fff;
}

.agreement-service-card.is-open .agreement-form-shell {
  display: block;
}

.agreement-form-shell[hidden] {
  display: none;
}

.agreement-service-form {
  display: grid;
  gap: 16px;
  position: relative;
  z-index: 2;
}

.agreement-form-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.agreement-form-section + .agreement-form-section {
  padding-top: 4px;
  border-top: 1px solid rgba(226, 233, 242, 0.9);
}

.agreement-form-title {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(13, 63, 149, 0.12);
  border-radius: 8px;
  background: #f3f7fc;
}

.agreement-form-title i {
  width: 24px;
  height: 24px;
  justify-self: center;
  color: var(--blue-800);
}

.agreement-form-title strong {
  display: block;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 950;
}

.agreement-form-title small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.5;
}

.agreement-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.agreement-service-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  cursor: text;
}

.agreement-service-form label span {
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 950;
}

.agreement-service-form input,
.agreement-service-form select,
.agreement-service-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px;
  border: 1px solid #dbe6f5;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
  pointer-events: auto;
  position: relative;
  z-index: 2;
  touch-action: manipulation;
  user-select: text;
  -webkit-user-select: text;
  scroll-margin: 120px 0 130px;
}

.agreement-service-form input:focus,
.agreement-service-form select:focus,
.agreement-service-form textarea:focus {
  border-color: var(--blue-700);
  box-shadow: 0 0 0 3px rgba(20, 87, 197, 0.12);
  outline: 0;
}

.agreement-service-form textarea {
  resize: vertical;
}

.agreement-field-grid .wide-field {
  grid-column: 1 / -1;
}

.agreement-service-form button,
.agreement-payment-actions button,
.agreement-proof-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--blue-800);
  font-weight: 950;
}

.agreement-service-form > button {
  width: 100%;
  scroll-margin-bottom: 130px;
}

.app-shell:has(.agreement-service-form input:focus, .agreement-service-form select:focus, .agreement-service-form textarea:focus) .bottom-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateX(50%) translateY(24px);
}

.agreement-service-form button i,
.agreement-payment-actions button i,
.agreement-payment-actions a i,
.agreement-proof-form button i {
  width: 20px;
  height: 20px;
}

.agreement-payment-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(13, 63, 149, 0.18);
  border-radius: 8px;
  background: #f8fbff;
}

.agreement-payment-panel[hidden] {
  display: none;
}

.agreement-payment-actions {
  display: grid;
  gap: 8px;
}

.agreement-proof-form {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px dashed rgba(13, 63, 149, 0.28);
  border-radius: 8px;
  background: #f8fbff;
}

.agreement-proof-head,
.agreement-proof-status {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin: 0;
}

.agreement-proof-head i,
.agreement-proof-status i {
  width: 22px;
  height: 22px;
  justify-self: center;
  color: var(--blue-800);
}

.agreement-proof-head strong {
  display: block;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
}

.agreement-proof-head span,
.agreement-proof-status span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.6;
}

.agreement-proof-status {
  min-height: 42px;
  padding: 8px;
  border-radius: 8px;
  background: #d5faf4;
}

.agreement-proof-status i,
.agreement-proof-status span {
  color: #075c54;
}

.agreement-proof-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.75fr);
  gap: 8px;
}

.agreement-proof-fields label {
  display: grid;
  gap: 6px;
}

.agreement-proof-fields label > span {
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 900;
}

.agreement-proof-fields input[type="text"] {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #cfe0f5;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-weight: 850;
}

.agreement-proof-fields input[type="text"]:focus {
  border-color: var(--blue-700);
  box-shadow: 0 0 0 3px rgba(20, 87, 197, 0.12);
  outline: 0;
}

.agreement-proof-upload {
  cursor: pointer;
}

.agreement-proof-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.agreement-proof-upload > span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 3px 8px;
  min-height: 44px;
  align-content: center;
  padding: 8px 10px;
  border: 1px solid rgba(13, 63, 149, 0.22);
  border-radius: 8px;
  color: var(--blue-800);
  background: #fff;
}

.agreement-proof-upload i {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  align-self: center;
}

.agreement-proof-upload b {
  font-size: 0.74rem;
  font-weight: 950;
}

.agreement-proof-upload small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.agreement-proof-form button:disabled,
.agreement-proof-form button.is-loading {
  color: #7a8798;
  background: #e9eef6;
}

.agreement-history-stack {
  display: grid;
  gap: 10px;
}

.agreement-empty-note,
.agreement-history-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(13, 63, 149, 0.16);
  border-radius: 8px;
  background: #fff;
}

.agreement-empty-note {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.6;
}

.agreement-empty-note i {
  width: 22px;
  height: 22px;
  justify-self: center;
  color: var(--blue-800);
}

.agreement-history-card.is-approved {
  border-color: rgba(24, 169, 153, 0.32);
  background: #f3fffc;
}

.agreement-history-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.agreement-history-head strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
}

.agreement-history-head small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
}

.agreement-history-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.agreement-history-meta span {
  display: grid;
  gap: 4px;
  min-height: 54px;
  align-content: center;
  padding: 8px;
  border: 1px solid rgba(226, 233, 242, 0.9);
  border-radius: 8px;
  background: #f8fbff;
}

.agreement-history-meta small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
}

.agreement-history-meta b {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 950;
}

.agreement-verification-box {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(24, 169, 153, 0.28);
  border-radius: 8px;
  background: #f3fffc;
  text-align: center;
}

.agreement-verification-box span {
  color: #075c54;
  font-size: 0.72rem;
  font-weight: 900;
}

.agreement-verification-box b {
  color: #063f3b;
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: 0;
}

.agreement-verification-box small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.6;
}

.agreement-paid-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid rgba(24, 169, 153, 0.28);
  border-radius: 8px;
  color: #075c54;
  background: #d5faf4;
  font-size: 0.82rem;
  font-weight: 950;
}

.agreement-paid-check input {
  width: 18px;
  height: 18px;
  accent-color: #128c7e;
}

.agreement-payment-actions button:disabled {
  color: #7a8798;
  background: #e9eef6;
}

.agreement-service-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.7;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  margin-top: 14px;
}

.product-area-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.product-area-heading h3 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 950;
  line-height: 1.25;
}

.product-area-heading > span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--shop-accent, var(--blue-800));
  background: color-mix(in srgb, var(--shop-accent, var(--blue-800)), #fff 88%);
  font-size: 0.7rem;
  font-weight: 950;
  white-space: nowrap;
}

.random-products-section {
  display: grid;
  gap: 10px;
}

.random-product-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(142px, 46%);
  gap: 10px;
  margin-inline: -16px;
  padding: 0 16px 6px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
}

.random-product-strip::-webkit-scrollbar {
  display: none;
}

.random-product-card {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.9);
  box-shadow: 0 10px 22px rgba(16, 32, 51, 0.07);
  scroll-snap-align: start;
  text-align: inherit;
  cursor: pointer;
}

.random-product-card.has-offer {
  border-color: rgba(216, 107, 53, 0.38);
  background: #fff8f1;
}

.random-product-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1.18;
  object-fit: cover;
}

.random-product-card div {
  display: grid;
  gap: 4px;
  padding: 9px;
}

.random-product-card strong {
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.random-product-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.random-product-card em {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--shop-accent, var(--blue-800));
  background: color-mix(in srgb, var(--shop-accent, var(--blue-800)), #fff 88%);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 950;
}

.category-browser-heading {
  margin-top: 10px;
}

.product-category-group {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.product-category-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 86px;
  overflow: hidden;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--ink);
  background: #f8fbff;
  text-align: right;
}

.product-category-heading.has-image {
  min-height: 132px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(8, 36, 95, 0.12), rgba(8, 36, 95, 0.82)),
    var(--category-image) center/cover;
}

.product-category-heading .category-title {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  color: inherit;
  font-size: 0.94rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.product-category-heading .category-count {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--shop-accent, var(--blue-800));
  background: color-mix(in srgb, var(--shop-accent, var(--blue-800)), #fff 88%);
  font-size: 0.68rem;
  font-weight: 950;
}

.product-category-heading.has-image .category-count {
  color: #08245f;
  background: rgba(255, 255, 255, 0.92);
}

.product-category-heading i {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: currentColor;
  transition: transform 0.18s ease;
}

.product-category-group.is-open .product-category-heading i {
  transform: rotate(180deg);
}

.category-product-grid {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.product-category-group.is-open .category-product-grid {
  display: grid;
}

.details-body[data-product-style="compact"] .product-grid,
.details-body[data-product-style="compact"] .category-product-grid,
.details-body[data-product-style="priceList"] .product-grid,
.details-body[data-product-style="priceList"] .category-product-grid {
  grid-template-columns: 1fr;
}

.details-body[data-product-style="gallery"] .product-grid,
.details-body[data-product-style="gallery"] .category-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.details-body[data-product-style="priceList"] .product-card {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
}

.details-body[data-product-style="priceList"] .product-card > img,
.details-body[data-product-style="priceList"] .product-card .product-card-media-shell {
  width: 70px;
  height: 100%;
  min-height: 84px;
  aspect-ratio: auto;
}

.product-card {
  position: relative;
  align-self: start;
  min-width: 0;
  padding: 0;
  overflow: visible;
  border-radius: 8px;
  color: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(249, 252, 255, 0.98)),
    #fff;
  border: 1px solid rgba(213, 224, 239, 0.7);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 14px 32px rgba(16, 32, 51, 0.07);
  text-align: inherit;
  cursor: pointer;
}

.product-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--shop-accent, var(--blue-800)) 28%, transparent);
  outline-offset: 3px;
}

.product-card > img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  object-position: center;
  background:
    linear-gradient(135deg, #f9fbff, #edf3fb),
    #fff;
}

.product-card-media-shell {
  position: relative;
  min-width: 0;
  overflow: visible;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(135deg, #f7faff, #edf3fb);
  border-bottom: 1px solid rgba(213, 224, 239, 0.7);
}

.product-card-media {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: none;
  direction: ltr;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  border-radius: inherit;
}

.product-card-media::-webkit-scrollbar {
  display: none;
}

.product-card-media-slide {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 100%;
  place-items: center;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background:
    linear-gradient(135deg, #f9fbff, #edf3fb),
    #fff;
}

.product-card-media-slide img {
  display: block;
  pointer-events: none;
}

.product-card-media-bg {
  position: absolute;
  inset: -18px;
  width: calc(100% + 36px);
  height: calc(100% + 36px);
  object-fit: cover;
  filter: blur(16px) saturate(1.08);
  opacity: 0.42;
  transform: scale(1.05);
}

.product-card-media-image,
.product-card-media > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.product-card-gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: inline-grid;
  width: 36px;
  height: 44px;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(226, 233, 242, 0.94);
  border-radius: 999px;
  color: var(--shop-accent, var(--blue-800));
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 28px rgba(16, 32, 51, 0.16);
  cursor: pointer;
}

.product-card-gallery-arrow.is-prev {
  left: -12px;
}

.product-card-gallery-arrow.is-next {
  right: -12px;
}

.product-card-gallery-arrow i {
  width: 18px;
  height: 18px;
  stroke-width: 2.8;
}

@media (hover: hover) and (pointer: fine) {
  .product-card-gallery-arrow {
    opacity: 0;
    transition:
      opacity 150ms ease,
      transform 150ms ease;
  }

  .product-card-media-shell:hover .product-card-gallery-arrow,
  .product-card-gallery-arrow:focus-visible {
    opacity: 1;
  }
}

.product-card-gallery-count {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-start: 8px;
  display: inline-flex;
  min-width: 30px;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding-inline: 8px;
  border-radius: 999px;
  color: #fff;
  background: rgba(8, 36, 95, 0.82);
  box-shadow: 0 8px 18px rgba(8, 36, 95, 0.22);
  font-size: 0.72rem;
  font-weight: 950;
  pointer-events: none;
}

.product-card-gallery-hint {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-end: 8px;
  display: inline-flex;
  width: 34px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--shop-accent, var(--blue-800));
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 22px rgba(8, 36, 95, 0.16);
  pointer-events: none;
  animation: productGalleryHint 1.8s ease-in-out infinite;
}

.product-card-gallery-hint i {
  width: 16px;
  height: 16px;
  stroke-width: 2.6;
}

@keyframes productGalleryHint {
  0%,
  100% {
    transform: translateX(0);
  }

  48% {
    transform: translateX(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card-gallery-hint {
    animation: none;
  }
}

.details-body[data-product-style="priceList"] .product-card .product-card-media,
.product-card.is-featured .product-card-media,
.product-card.is-compact .product-card-media {
  height: auto;
  aspect-ratio: 9 / 16;
}

.product-card-copy {
  padding: 10px;
}

.product-card-owner-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 0 10px 10px;
}

.product-card-owner-button {
  display: inline-flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(213, 224, 239, 0.86);
  border-radius: 999px;
  color: var(--shop-accent, var(--blue-800));
  background: linear-gradient(180deg, #ffffff, #f5f9ff);
  box-shadow: 0 8px 18px rgba(16, 32, 51, 0.06);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 950;
  cursor: pointer;
}

.product-card-owner-file,
.product-card-owner-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  inset-block-start: -100vh;
  inset-inline-start: 0;
}

.product-card-owner-button i {
  width: 16px;
  height: 16px;
  stroke-width: 2.7;
}

.product-card-owner-upload.is-uploading {
  opacity: 0.62;
  pointer-events: none;
}

.product-card-owner-media {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  align-content: start;
  padding: 8px;
  border: 1px solid rgba(213, 224, 239, 0.88);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(16, 32, 51, 0.04);
}

.product-card-owner-media-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.product-card-owner-media-head strong {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 950;
}

.product-card-owner-progress {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6eef8;
}

.product-card-owner-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--shop-accent, var(--blue-800));
  transition: width 180ms ease;
}

.product-card-owner-thumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
}

.product-card-owner-thumbs button {
  position: relative;
  flex: 0 0 72px;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d6e3f3;
  border-radius: 8px;
  color: #071d3a;
  background: #f8fbff;
  cursor: pointer;
}

.product-card-owner-thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.product-card-owner-thumbs button span {
  display: block;
  padding: 4px;
  font-size: 0.62rem;
  font-weight: 950;
}

.product-card-owner-thumbs button i {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 999px;
  color: #b42318;
  background: #fff;
  box-shadow: 0 6px 14px rgba(16, 32, 51, 0.12);
}

.product-card-owner-thumbs p {
  grid-column: 1 / -1;
  margin: 0;
  color: #607391;
  font-size: 0.72rem;
  font-weight: 850;
  text-align: center;
}

.product-card-owner-editor {
  display: grid;
  grid-column: 1 / -1;
  gap: 9px;
  align-content: start;
  margin: 0 10px 10px;
  padding: 10px;
  border: 1px solid rgba(213, 224, 239, 0.88);
  border-radius: 8px;
  background: #f8fbff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  cursor: auto;
}

.product-card-owner-editor[hidden] {
  display: none;
}

.product-card-owner-editor label {
  display: grid;
  gap: 5px;
}

.product-card-owner-editor label span {
  color: #405675;
  font-size: 0.68rem;
  font-weight: 950;
}

.product-card-owner-editor input,
.product-card-owner-editor textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #d6e3f3;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
}

.product-card-owner-editor input {
  min-height: 38px;
  padding: 0 10px;
}

.product-card-owner-editor textarea {
  padding: 9px 10px;
  resize: vertical;
}

.product-card-owner-editor .wide-field {
  grid-column: 1 / -1;
}

.product-card-owner-save-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.product-card-owner-save-row button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--shop-accent, var(--blue-800));
  font: inherit;
  font-size: 0.76rem;
  font-weight: 950;
  cursor: pointer;
}

.product-card-owner-save-row button:last-child {
  color: #405675;
  background: #eaf1fb;
}

.product-card.has-offer {
  border-color: rgba(216, 107, 53, 0.38);
  background: #fff8f1;
}

.product-card.is-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 42% 1fr;
}

.product-card.is-featured > img,
.product-card.is-featured .product-card-media-shell {
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
}

.product-card.is-wide {
  grid-column: 1 / -1;
}

.product-card.is-wide > img,
.product-card.is-wide .product-card-media {
  aspect-ratio: 9 / 16;
}

.product-card.is-compact {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
}

.product-card.is-compact > img,
.product-card.is-compact .product-card-media-shell {
  width: 64px;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
}

.product-offer-badge {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  margin-bottom: 7px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--amber);
  font-size: 0.68rem;
  font-weight: 950;
}

.product-price {
  display: inline-block;
  margin-top: 8px;
  color: var(--shop-accent, var(--blue-800));
  font-size: 0.86rem;
  font-weight: 950;
}

.product-showcase-section .section-heading > span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--shop-accent, var(--blue-800));
  background: color-mix(in srgb, var(--shop-accent, var(--blue-800)), #fff 88%);
  font-size: 0.74rem;
  font-weight: 950;
  white-space: nowrap;
}

.product-showcase-section[data-ad-board="vehicle"] {
  margin-top: 14px;
  padding-block: 16px 12px;
  border-block: 1px solid rgba(20, 87, 197, 0.14);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 255, 0.95)),
    linear-gradient(90deg, rgba(216, 107, 53, 0.07), rgba(24, 169, 153, 0.08));
}

.product-showcase-section[data-ad-board="vehicle"] .section-heading {
  align-items: flex-start;
  flex-wrap: wrap;
}

.product-showcase-section[data-ad-board="vehicle"] .product-grid {
  grid-auto-flow: dense;
  gap: 14px;
}

.details-body[data-ad-flow="vehicle"] .product-card {
  overflow: hidden;
  border-color: rgba(20, 87, 197, 0.17);
  background:
    linear-gradient(180deg, #fff, #f8fbff),
    #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 18px 38px rgba(8, 36, 95, 0.11);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.details-body[data-ad-flow="vehicle"] .product-card.has-offer {
  border-color: rgba(216, 107, 53, 0.42);
  background:
    linear-gradient(180deg, #fffaf5, #fff),
    #fff8f1;
}

.details-body[data-ad-flow="vehicle"] .product-card.is-ad-lead {
  border-color: color-mix(in srgb, var(--shop-accent, var(--blue-800)) 36%, #f3c35b);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 24px 52px rgba(8, 36, 95, 0.17);
}

.details-body[data-ad-flow="vehicle"] .product-card.is-ad-lead .product-card-copy {
  padding: 12px;
}

.details-body[data-ad-flow="vehicle"] .product-card.is-ad-lead h3 {
  font-size: 1.02rem;
}

.details-body[data-ad-flow="vehicle"] .product-card.is-ad-feature {
  border-color: rgba(24, 169, 153, 0.32);
}

.details-body[data-ad-flow="vehicle"] .product-card-media-shell {
  background:
    linear-gradient(135deg, #f9fbff, #edf4fb),
    #fff;
}

.product-ad-ribbon {
  position: absolute;
  inset-block-start: 9px;
  inset-inline-start: 9px;
  z-index: 6;
  display: inline-flex;
  max-width: calc(100% - 18px);
  min-height: 26px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  color: #071d3a;
  background: linear-gradient(135deg, #ffd66b, #fff3c2);
  box-shadow: 0 10px 22px rgba(8, 36, 95, 0.16);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .details-body[data-ad-flow="vehicle"] .product-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--shop-accent, var(--blue-800)) 38%, #fff);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.96) inset,
      0 24px 54px rgba(8, 36, 95, 0.18);
  }
}

@media (min-width: 680px) {
  .product-showcase-section[data-ad-board="vehicle"] .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-showcase-section[data-ad-board="vehicle"] .product-card.is-ad-lead,
  .product-showcase-section[data-ad-board="vehicle"] .product-card.is-featured,
  .product-showcase-section[data-ad-board="vehicle"] .product-card.is-wide {
    grid-column: span 2;
  }

  .product-showcase-section[data-ad-board="vehicle"] .product-card .product-card-media {
    aspect-ratio: 4 / 5;
  }

  .product-showcase-section[data-ad-board="vehicle"] .product-card.is-ad-lead .product-card-media,
  .product-showcase-section[data-ad-board="vehicle"] .product-card.is-ad-wide .product-card-media {
    aspect-ratio: 4 / 5;
  }

  .product-showcase-section[data-ad-board="vehicle"] .product-card.is-wide .product-card-media,
  .product-showcase-section[data-ad-board="vehicle"] .product-card.is-ad-wide .product-card-media {
    aspect-ratio: 16 / 10;
  }

  .product-showcase-section[data-ad-board="vehicle"] .product-card.is-ad-wide {
    grid-column: span 2;
  }
}

@media (max-width: 520px) {
  .details-body .product-grid,
  .details-body .category-product-grid,
  .details-body[data-product-style="gallery"] .product-grid,
  .details-body[data-product-style="gallery"] .category-product-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .product-category-group {
    padding: 0;
  }

  .product-category-heading {
    min-height: 74px;
  }

  .product-card,
  .details-body[data-product-style="priceList"] .product-card,
  .product-card.is-featured,
  .product-card.is-compact {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.94) inset,
      0 16px 34px rgba(16, 32, 51, 0.08);
  }

  .details-body[data-product-style="priceList"] .product-card > img,
  .details-body[data-product-style="priceList"] .product-card .product-card-media-shell,
  .product-card.is-featured > img,
  .product-card.is-featured .product-card-media-shell,
  .product-card.is-compact > img,
  .product-card.is-compact .product-card-media-shell {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .product-card-media,
  .details-body[data-product-style="priceList"] .product-card .product-card-media,
  .product-card.is-featured .product-card-media,
  .product-card.is-compact .product-card-media {
    min-height: 0;
    aspect-ratio: 9 / 16;
  }

  .product-card-copy {
    padding: 12px;
  }

  .product-card h3 {
    font-size: 1.08rem;
    line-height: 1.25;
  }

  .product-card p {
    font-size: 0.84rem;
  }

  .product-price {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--shop-accent, var(--blue-800)), #fff 90%);
    line-height: 32px;
  }

  .random-product-strip {
    grid-auto-columns: minmax(218px, 78%);
  }
}

.product-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  align-items: end;
  padding: 16px;
  background: rgba(5, 18, 38, 0.58);
}

.product-detail-sheet {
  position: relative;
  display: grid;
  width: min(100%, 520px);
  max-height: 92vh;
  margin-inline: auto;
  overflow: auto;
  border-radius: 16px 16px 8px 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(5, 18, 38, 0.32);
}

.product-detail-close {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 26px rgba(5, 18, 38, 0.16);
}

.product-detail-media > img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  object-position: center;
  background:
    linear-gradient(135deg, #f9fbff, #edf3fb),
    #fff;
}

.product-detail-thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72px;
  gap: 8px;
  padding: 10px 12px 0;
  overflow-x: auto;
}

.product-detail-thumbs button {
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #fff;
}

.product-detail-thumbs button.is-selected {
  border-color: var(--shop-accent, var(--blue-800));
}

.product-detail-thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.product-detail-copy {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.product-detail-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.18rem;
  font-weight: 950;
  line-height: 1.25;
}

.product-detail-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.product-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-detail-meta strong,
.product-detail-meta em,
.product-detail-meta span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--blue-100);
  color: var(--blue-800);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 950;
}

.product-detail-meta em {
  color: #8a3b14;
  background: #fff0df;
}

.product-whatsapp-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #128c7e;
  font-size: 0.86rem;
  font-weight: 950;
  text-decoration: none;
}

.product-whatsapp-button.is-disabled {
  color: #607391;
  background: #e8eef7;
}

.product-page {
  --shop-accent: var(--blue-800);
  width: min(100%, 900px);
  margin-inline: auto;
  display: grid;
  gap: 0;
  background: #fff;
}

.product-page-bar h1 {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-page-hero {
  display: grid;
  gap: 10px;
  padding: 12px 16px 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--shop-accent), #fff 90%), #fff);
}

.product-page-main-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(9, 25, 48, 0.12), rgba(9, 25, 48, 0.2)),
    #edf3fb;
  border: 1px solid rgba(226, 233, 242, 0.92);
  box-shadow: 0 14px 32px rgba(16, 32, 51, 0.1);
  cursor: zoom-in;
  touch-action: pan-y;
}

.product-page-main-bg {
  position: absolute;
  inset: -22px;
  width: calc(100% + 44px);
  height: calc(100% + 44px);
  object-fit: cover;
  filter: blur(18px) saturate(1.08);
  opacity: 0.42;
  transform: scale(1.04);
}

.product-page-main-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.product-page-main-hint {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  z-index: 2;
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 999px;
  color: var(--shop-accent);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(5, 18, 38, 0.16);
}

.product-page-main-hint i {
  width: 18px;
  height: 18px;
  stroke-width: 2.8;
}

.product-page-thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 74px;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.product-page-thumbs button {
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #fff;
}

.product-page-thumbs button.is-selected {
  border-color: var(--shop-accent);
}

.product-page-thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

html.product-viewer-open,
body.product-viewer-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.product-viewer-open {
  width: 100%;
}

.product-photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 18px;
  padding: max(16px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
  overflow: hidden;
  color: #fff;
  background: #07111f;
  direction: ltr;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  overscroll-behavior: contain;
  touch-action: none;
}

.product-photo-viewer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(4, 12, 24, 0.42), rgba(4, 12, 24, 0.2) 42%, rgba(4, 12, 24, 0.58)),
    rgba(4, 12, 24, 0.48);
  pointer-events: none;
}

.product-photo-viewer-bg {
  position: absolute;
  inset: -44px;
  width: calc(100% + 88px);
  height: calc(100% + 88px);
  object-fit: cover;
  filter: blur(28px) saturate(1.05);
  opacity: 0.58;
  transform: scale(1.08);
}

.product-photo-viewer-top,
.product-photo-viewer-stage,
.product-photo-viewer-thumbs {
  position: relative;
  z-index: 1;
}

.product-photo-viewer-top {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 10px;
}

.product-photo-viewer-top button {
  display: inline-grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: #071d3a;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
}

.product-photo-viewer-top button:disabled {
  opacity: 0.65;
}

.product-photo-viewer-top button i {
  width: 22px;
  height: 22px;
  stroke-width: 2.8;
}

.product-photo-viewer-top span {
  justify-self: center;
  min-width: 74px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(5, 18, 38, 0.62);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  color: #fff;
  font-weight: 950;
  text-align: center;
}

.product-photo-viewer-stage {
  display: grid;
  min-height: 0;
  place-items: center;
  overscroll-behavior: contain;
  touch-action: none;
}

.product-photo-viewer-stage img {
  display: block;
  width: min(100%, 520px, calc((100svh - 178px) * 0.5625));
  max-height: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  object-position: center;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.product-photo-viewer-thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 92px;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 2px;
}

.product-photo-viewer-thumbs::-webkit-scrollbar {
  display: none;
}

.product-photo-viewer-thumbs button {
  overflow: hidden;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  scroll-snap-align: center;
}

.product-photo-viewer-thumbs button.is-selected {
  border-color: #ef6f37;
  box-shadow: 0 0 0 2px rgba(239, 111, 55, 0.32);
}

.product-photo-viewer-thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.product-page-body {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.product-page-shop {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(226, 233, 242, 0.92);
  border-radius: 8px;
  background: #f8fbff;
}

.product-page-shop .shop-logo {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  box-shadow: none;
}

.product-page-shop small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.product-page-shop strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 950;
}

.product-page-title {
  display: grid;
  gap: 9px;
}

.product-page-title h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.42rem;
  line-height: 1.25;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.product-page-title p {
  margin: 0;
  color: #40506a;
  font-size: 0.9rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.product-page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-page-meta strong,
.product-page-meta em,
.product-page-meta span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--shop-accent);
  background: color-mix(in srgb, var(--shop-accent), #fff 88%);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 950;
}

.product-page-meta em {
  color: #8a3b14;
  background: #fff0df;
}

.product-page-actions {
  display: grid;
  gap: 8px;
}

.product-page-actions .secondary-action {
  color: var(--shop-accent);
  background: color-mix(in srgb, var(--shop-accent), #fff 88%);
}

.product-share-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(226, 233, 242, 0.94);
  border-radius: 8px;
  background: #f8fbff;
}

.product-share-panel h3 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 950;
}

.product-share-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.product-share-actions a,
.product-share-actions button {
  display: grid;
  min-width: 0;
  min-height: 58px;
  place-items: center;
  gap: 4px;
  border: 0;
  border-radius: 8px;
  color: var(--shop-accent);
  background: #fff;
  font-size: 0.72rem;
  font-weight: 950;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(16, 32, 51, 0.06);
}

.product-share-actions a:first-child {
  color: #075c54;
  background: #d5faf4;
}

.product-share-url {
  display: block;
  padding: 8px;
  border-radius: 8px;
  color: var(--muted);
  background: #fff;
  font-size: 0.66rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.product-share-note {
  margin: 0;
  color: #075c54;
  font-size: 0.76rem;
  font-weight: 900;
}

.rent-hero {
  display: grid;
  gap: 14px;
  margin: 16px;
  padding: 18px;
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(8, 36, 95, 0.96), rgba(20, 87, 197, 0.84)),
    url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=900&q=80") center/cover;
  box-shadow: var(--shadow);
}

.rent-hero .eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

.rent-hero h2 {
  color: #fff;
  font-size: 1.22rem;
}

.available-spaces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.available-spaces.compact {
  margin-top: 0;
}

.space-card {
  min-height: 118px;
  padding: 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.86);
  box-shadow: 0 10px 24px rgba(16, 32, 51, 0.07);
}

.space-card strong {
  display: block;
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 950;
}

.space-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  color: #075c54;
  background: #d5faf4;
  font-size: 0.7rem;
  font-weight: 950;
}

.available-spaces.compact .space-card {
  min-height: 94px;
  padding: 10px;
}

.available-spaces.compact .space-card strong {
  margin-top: 8px;
  font-size: 0.88rem;
}

.available-spaces.compact .space-card p {
  font-size: 0.7rem;
}

.market-placement-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe6f5;
  border-radius: 12px;
  background: #f8fbff;
}

.market-placement-panel label {
  display: grid;
  gap: 7px;
}

.market-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.market-type-card {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 104px;
  padding: 12px;
  border: 1px solid #d8e4f3;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.market-type-card input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.market-type-card i {
  width: 22px;
  height: 22px;
  color: #0d3f95;
}

.market-type-card strong {
  font-size: 0.86rem;
  color: #102033;
}

.market-type-card small {
  line-height: 1.5;
  color: #68768a;
}

.market-type-card.is-selected {
  border-color: #0d63d8;
  background: #edf5ff;
  box-shadow: 0 0 0 2px rgba(13, 99, 216, 0.08);
}

.market-type-card:not(.is-selected):has(input:disabled) {
  opacity: 0.58;
  cursor: not-allowed;
}

.market-type-card.is-selected:has(input:disabled) {
  opacity: 1;
}

.market-place-note {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eaf3ff;
  color: #31516f;
  font-size: 0.8rem;
}

.market-place-note strong {
  color: #0d3f95;
}

.market-building-visual {
  display: grid;
  padding-bottom: 88px;
  scroll-margin-top: 148px;
}

.market-visual-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe6f5;
  border-radius: 12px;
  background: #f8fbff;
}

.market-visual-copy {
  display: grid;
  gap: 3px;
}

.market-visual-copy span {
  color: #0d63d8;
  font-size: 0.72rem;
  font-weight: 950;
}

.market-visual-copy strong {
  color: #102033;
  font-size: 1rem;
  font-weight: 950;
}

.market-visual-copy small {
  color: #68768a;
  font-size: 0.76rem;
  font-weight: 850;
}

.building-figure,
.industrial-figure {
  position: relative;
  min-height: 318px;
  overflow: hidden;
  border: 1px solid rgba(158, 179, 210, 0.55);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(214, 232, 252, 0.98), rgba(247, 251, 255, 0.92) 56%, rgba(202, 217, 234, 0.96)),
    #edf5ff;
}

.building-figure.is-space-selector {
  min-height: 520px;
}

.building-watermark,
.industrial-watermark {
  position: absolute;
  inset-inline: 0;
  top: 74px;
  z-index: 0;
  color: rgba(13, 63, 149, 0.08);
  font-size: 3.4rem;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.building-sign,
.industrial-sign {
  position: relative;
  z-index: 4;
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin: 14px auto 10px;
  padding: 8px 14px;
  max-width: min(88%, 280px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  color: #fff;
  background: #0d3f95;
  box-shadow: 0 12px 28px rgba(13, 63, 149, 0.2);
  font-size: 0.88rem;
  font-weight: 950;
  text-align: center;
  overflow-wrap: anywhere;
}

.building-model {
  position: relative;
  z-index: 2;
  width: min(96%, 640px);
  margin: 0 auto;
  padding-top: 16px;
}

.building-roof {
  position: relative;
  z-index: 3;
  width: 80%;
  height: 28px;
  margin: 0 auto -2px;
  clip-path: polygon(9% 100%, 23% 0, 77% 0, 91% 100%);
  background: linear-gradient(180deg, #26384f, #102033);
  box-shadow: 0 12px 22px rgba(16, 32, 51, 0.18);
}

.building-tower {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 7px;
  width: 88%;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid rgba(80, 105, 139, 0.35);
  border-radius: 8px 8px 5px 5px;
  background: linear-gradient(90deg, #d7e2ef, #b6c7dc 82%, #93a8c0);
  box-shadow: 0 22px 38px rgba(51, 73, 105, 0.22);
}

.building-side {
  position: absolute;
  top: 48px;
  inset-inline-end: 10px;
  bottom: 26px;
  z-index: 1;
  width: 46px;
  transform: skewY(-10deg);
  transform-origin: top;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(180deg, #9cafc6, #72889f);
  opacity: 0.88;
}

.building-base {
  position: relative;
  z-index: 2;
  width: 96%;
  height: 18px;
  margin: -1px auto 0;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(90deg, #26384f, #102033);
}

.building-level,
.industrial-square,
.industrial-square-toggle,
.industrial-land-plot {
  font: inherit;
}

.building-level,
.industrial-square-toggle,
.industrial-land-plot {
  cursor: pointer;
}

.building-level {
  --level-color: #0d63d8;
  --level-soft: #edf5ff;
  --level-window: #9bb9dd;
  display: grid;
  gap: 7px;
  min-height: 78px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--level-color) 42%, #ffffff);
  border-radius: 7px;
  color: #173154;
  background: var(--level-soft);
  text-align: start;
}

.building-level.is-level-first {
  --level-color: #d86b35;
  --level-soft: #fff1e9;
  --level-window: #e6a07b;
}

.building-level.is-level-second {
  --level-color: #128c7e;
  --level-soft: #e9faf6;
  --level-window: #72bfb4;
}

.building-level.is-level-third {
  --level-color: #8d4fd8;
  --level-soft: #f3ecff;
  --level-window: #b991e6;
}

.building-level.is-lit {
  border-color: var(--level-color);
  background: linear-gradient(90deg, #ffffff, var(--level-soft));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--level-color) 18%, transparent), 0 10px 24px color-mix(in srgb, var(--level-color) 22%, transparent);
}

.building-floor-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.building-floor-toggle em {
  padding: 4px 7px;
  border-radius: 999px;
  color: #405675;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.building-level-name {
  font-size: 0.72rem;
  font-weight: 950;
}

.building-level-capacity {
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--level-color);
  background: rgba(255, 255, 255, 0.78);
  font-size: 0.66rem;
  font-weight: 950;
  white-space: nowrap;
}

.building-space-grid {
  display: grid;
  grid-template-columns: repeat(var(--space-columns, 12), minmax(0, 1fr));
  gap: 3px;
}

.building-space-window {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 14px;
  aspect-ratio: 1 / 0.78;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--level-window), #ffffff 28%);
  border-radius: 3px;
  color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--level-window), #ffffff 18%), var(--level-window));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  cursor: pointer;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}

.building-space-window span {
  font-size: 0.48rem;
  font-weight: 950;
  line-height: 1;
  opacity: 0;
}

.building-space-window:hover,
.building-space-window:focus-visible {
  border-color: var(--level-color);
  transform: translateY(-1px);
}

.building-space-window.is-selected {
  border-color: #fff3b0;
  color: #102033;
  background: linear-gradient(180deg, #fff7ba, #f2a742);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9) inset,
    0 0 14px color-mix(in srgb, var(--level-color), #ffffff 20%),
    0 0 22px rgba(242, 167, 66, 0.72);
}

.building-space-window.is-selected span {
  opacity: 1;
}

.building-space-window.is-taken {
  opacity: 0.34;
  cursor: not-allowed;
  filter: grayscale(0.65);
}

.building-entry {
  position: relative;
  z-index: 1;
  width: min(48%, 150px);
  min-height: 30px;
  margin: 0 auto;
  padding: 7px 10px;
  border-radius: 0 0 8px 8px;
  color: #fff;
  background: #102033;
  font-size: 0.72rem;
  font-weight: 950;
  text-align: center;
  overflow-wrap: anywhere;
}

.industrial-figure {
  min-height: 380px;
  padding-bottom: 14px;
  background:
    linear-gradient(180deg, rgba(236, 243, 250, 0.96), rgba(229, 235, 242, 0.96)),
    repeating-linear-gradient(45deg, rgba(13, 63, 149, 0.05) 0 10px, transparent 10px 20px);
}

.industrial-map {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-rows: minmax(150px, 1fr) minmax(150px, 1fr);
  gap: 12px;
  min-height: 318px;
  margin: 0 14px 14px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(100, 117, 139, 0.28);
  border-radius: 12px;
  background:
    linear-gradient(90deg, transparent calc(50% - 11px), rgba(255, 255, 255, 0.92) calc(50% - 11px) calc(50% + 11px), transparent calc(50% + 11px)),
    linear-gradient(180deg, transparent calc(50% - 11px), rgba(255, 255, 255, 0.92) calc(50% - 11px) calc(50% + 11px), transparent calc(50% + 11px)),
    #d8e2ec;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
}

.industrial-road {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #7f8fa3 0 16px, #edf2f8 16px 24px);
  opacity: 0.42;
}

.industrial-road.main-road {
  inset-inline: 16px;
  top: calc(50% - 4px);
  height: 8px;
}

.industrial-road.side-road {
  top: 16px;
  bottom: 16px;
  inset-inline-start: calc(50% - 4px);
  width: 8px;
  background: repeating-linear-gradient(180deg, #7f8fa3 0 16px, #edf2f8 16px 24px);
}

.industrial-square {
  --square-color: #0d63d8;
  --square-soft: #edf5ff;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  align-content: stretch;
  padding: 9px;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--square-color) 48%, #ffffff);
  border-radius: 10px;
  color: #18324d;
  background: linear-gradient(145deg, #ffffff, var(--square-soft));
  text-align: center;
}

.industrial-square-toggle {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 2px 6px 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: start;
}

.industrial-square.is-square-first {
  --square-color: #d86b35;
  --square-soft: #fff0e7;
  grid-row: 1 / span 2;
}

.industrial-square.is-square-first .industrial-land-plot {
  min-height: 18px;
  aspect-ratio: 1 / 0.88;
}

.industrial-square.is-square-second {
  --square-color: #128c7e;
  --square-soft: #e9faf6;
}

.industrial-square.is-square-second .industrial-land-plot {
  aspect-ratio: 1 / 0.72;
}

.industrial-square.is-square-third {
  --square-color: #8d4fd8;
  --square-soft: #f3ecff;
}

.industrial-square-toggle > span,
.industrial-square-toggle > strong {
  position: relative;
  z-index: 1;
}

.industrial-square-toggle > span {
  font-size: 0.74rem;
  font-weight: 950;
}

.industrial-square-toggle > strong {
  color: var(--square-color);
  font-size: 0.76rem;
  white-space: nowrap;
}

.industrial-square-toggle > i {
  position: absolute;
  inset-inline: 6px;
  top: 0;
  height: 5px;
  border-radius: 999px;
  background: var(--square-color);
  opacity: 0.54;
}

.industrial-plot-grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 5px;
  align-content: start;
  min-height: 0;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--square-color) 22%, #8da2bd);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.68)),
    repeating-linear-gradient(0deg, rgba(148, 163, 184, 0.12) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.12) 0 1px, transparent 1px 13px),
    color-mix(in srgb, var(--square-soft), #ffffff 70%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 0 0 1px rgba(255, 255, 255, 0.54);
}

.industrial-parcel-block {
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 0;
}

.industrial-parcel-row {
  display: grid;
  grid-template-columns: repeat(var(--row-plots, var(--plot-columns, 10)), minmax(0, 1fr));
  gap: 3px;
  min-height: 0;
}

.industrial-plan-road {
  display: block;
  height: 8px;
  border: 1px solid rgba(100, 117, 139, 0.18);
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(255, 255, 255, 0.78) 16px 22px, transparent 22px 32px),
    linear-gradient(180deg, #cbd5e1, #e2e8f0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.industrial-plan-road.is-frontage {
  height: 10px;
  background:
    repeating-linear-gradient(90deg, transparent 0 20px, rgba(255, 255, 255, 0.84) 20px 28px, transparent 28px 40px),
    linear-gradient(180deg, color-mix(in srgb, var(--square-color) 18%, #cbd5e1), #e2e8f0);
}

.industrial-plan-road.is-cross {
  height: 11px;
}

.industrial-plan-road.is-service {
  height: 5px;
  opacity: 0.72;
}

.industrial-land-plot {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 12px;
  aspect-ratio: 1 / 0.66;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--square-color) 30%, #9fb3c8);
  border-radius: 2px;
  color: transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)),
    color-mix(in srgb, var(--square-soft), #ffffff 52%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 0 0 1px color-mix(in srgb, var(--square-color) 8%, transparent);
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.industrial-land-plot::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px dashed color-mix(in srgb, var(--square-color) 30%, transparent);
  opacity: 0.36;
  pointer-events: none;
}

.industrial-land-plot::after {
  content: "";
  position: absolute;
  inset-inline-start: -10%;
  bottom: -1px;
  width: 44%;
  height: 3px;
  transform: skewX(-18deg);
  background: color-mix(in srgb, var(--square-color) 28%, transparent);
  opacity: 0.42;
  pointer-events: none;
}

.industrial-land-plot span {
  position: relative;
  z-index: 1;
  font-size: 0.48rem;
  font-weight: 950;
  line-height: 1;
  opacity: 0;
}

.industrial-land-plot.is-road-facing {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.42)),
    color-mix(in srgb, var(--square-soft), #ffffff 38%);
}

.industrial-land-plot.is-corner {
  border-color: color-mix(in srgb, var(--square-color) 54%, #ffffff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 0 0 1px color-mix(in srgb, var(--square-color) 14%, transparent);
}

.industrial-land-plot.is-deep::after {
  width: 62%;
}

.industrial-land-plot:hover,
.industrial-land-plot:focus-visible {
  border-color: var(--square-color);
  transform: translateY(-1px);
}

.industrial-land-plot.is-selected {
  border-color: #fff3b0;
  color: #102033;
  background:
    linear-gradient(180deg, #fff7ba, #f2a742);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.92) inset,
    0 0 12px color-mix(in srgb, var(--square-color), #ffffff 20%),
    0 0 20px rgba(242, 167, 66, 0.64);
}

.industrial-land-plot.is-selected::before {
  border-color: rgba(16, 32, 51, 0.34);
  opacity: 0.74;
}

.industrial-land-plot.is-selected::after {
  background: rgba(16, 32, 51, 0.22);
  opacity: 0.78;
}

.industrial-land-plot.is-selected span {
  opacity: 1;
}

.industrial-land-plot.is-taken {
  opacity: 0.34;
  cursor: not-allowed;
  filter: grayscale(0.65);
}

.industrial-square.is-lit {
  border-color: var(--square-color);
  background: linear-gradient(145deg, #ffffff, var(--square-soft));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--square-color) 18%, transparent), 0 14px 30px color-mix(in srgb, var(--square-color) 22%, transparent);
}

.industrial-square.is-lit .industrial-square-toggle > i {
  opacity: 1;
  box-shadow: 0 0 18px color-mix(in srgb, var(--square-color) 78%, #ffffff);
}

.building-level:focus-visible,
.industrial-square-toggle:focus-visible,
.industrial-land-plot:focus-visible {
  outline: 3px solid rgba(13, 99, 216, 0.35);
  outline-offset: 3px;
}

.pricing-stack {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.portal-preview {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.portal-admin-card,
.merchant-panel,
.review-guard {
  padding: 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.86);
  box-shadow: 0 10px 24px rgba(16, 32, 51, 0.07);
}

.portal-admin-head {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: start;
}

.portal-admin-head > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 8px;
  color: var(--blue-800);
  background: var(--blue-100);
}

.portal-admin-head strong,
.shop-window-preview strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 950;
}

.portal-admin-head p,
.shop-window-preview p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

.status-board {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.status-step {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 9px;
  align-items: center;
  min-height: 64px;
  padding: 9px;
  border-radius: 8px;
  background: var(--soft);
  border: 1px solid rgba(226, 233, 242, 0.9);
}

.status-step > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  color: var(--blue-800);
  background: var(--blue-100);
}

.status-step strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 950;
}

.status-step p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.status-step.is-done > span {
  color: #075c54;
  background: #d5faf4;
}

.status-step.is-current {
  border-color: rgba(242, 167, 66, 0.72);
  background: rgba(255, 248, 236, 0.95);
}

.status-step.is-current > span {
  color: #733b07;
  background: rgba(255, 238, 210, 0.96);
}

.approval-flow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}

.approval-flow::-webkit-scrollbar {
  display: none;
}

.approval-flow span {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 9px;
  border-radius: 999px;
  color: #075c54;
  background: #d5faf4;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 30px;
}

.approval-flow i {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--blue-700);
}

.merchant-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.merchant-panel-head h3 {
  margin: 3px 0 0;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 950;
}

.portal-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.portal-options button {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 7px;
  align-items: center;
  min-width: 0;
  min-height: 52px;
  padding: 9px;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  background: var(--soft);
  text-align: right;
  font-size: 0.76rem;
  font-weight: 900;
}

.portal-options button i {
  display: block;
  color: var(--blue-800);
}

.portal-options button span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.color-editor {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.color-editor > span {
  margin-inline-end: auto;
  color: #43546b;
  font-size: 0.78rem;
  font-weight: 950;
}

.swatch {
  width: 28px;
  height: 28px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(16, 32, 51, 0.12);
}

.swatch.blue {
  background: var(--blue-800);
}

.swatch.teal {
  background: var(--teal);
}

.swatch.amber {
  background: var(--amber);
}

.swatch.coral {
  background: var(--coral);
}

.shop-window-preview {
  position: relative;
  margin-top: 14px;
  padding: 42px 12px 12px;
  overflow: hidden;
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(8, 36, 95, 0.96), rgba(20, 87, 197, 0.78)),
    url("https://images.unsplash.com/photo-1497366412874-3415097a27e7?auto=format&fit=crop&w=600&q=80") center/cover;
}

.shop-window-preview p {
  color: rgba(255, 255, 255, 0.78);
}

.special-offer {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--amber);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 26px;
}

.request-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.creator-progress {
  position: sticky;
  top: 70px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 233, 242, 0.9);
  box-shadow: 0 10px 24px rgba(16, 32, 51, 0.08);
  backdrop-filter: blur(16px);
}

.creator-progress button {
  display: grid;
  min-width: 0;
  min-height: 58px;
  place-items: center;
  gap: 3px;
  border: 0;
  border-radius: 12px;
  color: var(--muted);
  background: transparent;
  font-size: 0.61rem;
  font-weight: 900;
}

.creator-progress small {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: inherit;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 32, 51, 0.1);
}

.creator-progress span {
  color: inherit;
  font-size: inherit;
  line-height: 1.2;
  text-align: center;
}

.creator-progress .is-active {
  color: var(--blue-800);
  background: var(--blue-100);
}

.creator-progress .is-complete small {
  color: #075c54;
  background: #d5faf4;
}

.creator-step {
  display: none;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.86);
  box-shadow: 0 10px 24px rgba(16, 32, 51, 0.07);
}

.creator-step.is-active {
  display: grid;
}

.floor-picker {
  display: grid;
  gap: 10px;
}

.floor-card {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 128px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(226, 233, 242, 0.9);
  border-radius: 8px;
  background: var(--soft);
  cursor: pointer;
}

.floor-card input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.floor-card strong {
  display: block;
  font-size: 1rem;
  font-weight: 950;
}

.floor-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.65;
}

.floor-card small {
  color: var(--blue-800);
  font-size: 0.72rem;
  font-weight: 950;
}

.floor-price {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--blue-800);
  font-size: 0.76rem;
  font-weight: 950;
}

.floor-badge {
  display: inline-flex;
  width: fit-content;
  min-height: 26px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--blue-800);
  font-size: 0.68rem;
  font-weight: 950;
}

.floor-badge.secondary {
  color: #075c54;
  background: #d5faf4;
}

.floor-badge.quiet {
  color: #733b07;
  background: rgba(255, 238, 210, 0.96);
}

.floor-card.is-selected {
  border-color: rgba(20, 87, 197, 0.45);
  background: var(--blue-100);
  box-shadow: 0 0 0 3px rgba(20, 87, 197, 0.11);
}

.activity-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.activity-card {
  position: relative;
  display: grid;
  min-height: 112px;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid rgba(226, 233, 242, 0.94);
  border-radius: 8px;
  background: var(--soft);
  text-align: center;
  cursor: pointer;
}

.activity-card input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.activity-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: var(--blue-800);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 87, 197, 0.12);
}

.activity-card strong {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1.25;
}

.activity-card small {
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.35;
}

.activity-card.is-selected {
  border-color: rgba(20, 87, 197, 0.42);
  background: var(--blue-100);
  box-shadow: 0 0 0 3px rgba(20, 87, 197, 0.1);
}

.creator-actions {
  position: sticky;
  bottom: 92px;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 233, 242, 0.9);
  box-shadow: 0 14px 32px rgba(16, 32, 51, 0.12);
  backdrop-filter: blur(16px);
}

.primary-step-button,
.secondary-step-button,
.preview-step-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 0.78rem;
  font-weight: 950;
  white-space: nowrap;
}

.primary-step-button {
  color: #fff;
  background: var(--blue-800);
}

.secondary-step-button,
.preview-step-button {
  color: var(--blue-800);
  background: var(--blue-100);
}

.preview-step-button {
  min-width: 0;
}

.final-preview-button {
  width: 100%;
  min-height: 46px;
  border-radius: 8px;
}

.preview-step-button span {
  overflow-wrap: anywhere;
  white-space: normal;
}

.request-form label {
  display: grid;
  gap: 7px;
}

.request-form span {
  color: #43546b;
  font-size: 0.82rem;
  font-weight: 900;
}

.request-form .creator-progress span,
.request-form .creator-actions span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.request-form .floor-badge {
  color: #fff;
  font-size: 0.68rem;
  font-weight: 950;
}

.request-form .floor-badge.secondary {
  color: #075c54;
}

.request-form .floor-badge.quiet {
  color: #733b07;
}

.request-form .floor-price {
  color: #fff;
  font-size: 0.76rem;
  font-weight: 950;
}

.floor-price.is-free-support,
.request-form .floor-price.is-free-support {
  max-width: 100%;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid rgba(24, 169, 153, 0.28);
  color: #075c54;
  background: linear-gradient(135deg, #d5faf4, #eef7ff);
  white-space: normal;
  line-height: 1.35;
  box-shadow: 0 9px 18px rgba(24, 169, 153, 0.12);
}

.request-form .activity-mark {
  color: var(--blue-800);
}

.request-form input,
.request-form select,
.request-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  outline: 0;
}

.request-form input,
.request-form select {
  min-height: 48px;
  padding: 0 12px;
}

.request-form textarea {
  resize: vertical;
  min-height: 106px;
  padding: 12px;
}

.auto-space-field select[hidden] {
  display: none;
}

.auto-space-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 74px;
  padding: 10px;
  border: 1px solid rgba(24, 169, 153, 0.26);
  border-radius: 8px;
  background: #f2fffc;
}

.auto-space-card > i {
  width: 24px;
  height: 24px;
  justify-self: center;
  color: #075c54;
}

.auto-space-card strong {
  display: block;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 950;
}

.auto-space-card small,
.auto-space-card em {
  display: block;
  margin-top: 3px;
  color: #496777;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.45;
}

.auto-space-card em {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  color: #075c54;
  background: #d5faf4;
  font-weight: 950;
}

.auto-space-card.is-unavailable {
  border-color: rgba(180, 35, 24, 0.22);
  background: #fff7f5;
}

.auto-space-card.is-unavailable > i,
.auto-space-card.is-unavailable small {
  color: #b42318;
}

.request-form input:focus,
.request-form select:focus,
.request-form textarea:focus {
  border-color: var(--blue-700);
  box-shadow: 0 0 0 4px rgba(20, 87, 197, 0.11);
}

.edit-shop-panel {
  padding: 18px 16px;
}

.edit-shop-form {
  display: grid;
  gap: 12px;
}

.edit-step-block {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.86);
  box-shadow: 0 10px 24px rgba(16, 32, 51, 0.07);
}

.edit-shop-form label {
  display: grid;
  gap: 7px;
}

.edit-shop-form span {
  color: #43546b;
  font-size: 0.82rem;
  font-weight: 900;
}

.edit-shop-form input,
.edit-shop-form select,
.edit-shop-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  outline: 0;
}

.edit-shop-form input,
.edit-shop-form select {
  min-height: 48px;
  padding: 0 12px;
}

.edit-shop-form textarea {
  resize: vertical;
  min-height: 98px;
  padding: 12px;
}

.edit-shop-form input:focus,
.edit-shop-form select:focus,
.edit-shop-form textarea:focus {
  border-color: var(--blue-700);
  box-shadow: 0 0 0 4px rgba(20, 87, 197, 0.11);
}

.edit-floor-grid,
.edit-select-grid {
  display: grid;
  gap: 10px;
}

.edit-floor-card {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 12px;
  border: 1px solid rgba(226, 233, 242, 0.9);
  border-radius: 8px;
  background: var(--soft);
  cursor: pointer;
}

.edit-floor-card input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.edit-floor-card strong {
  font-size: 0.95rem;
  font-weight: 950;
}

.edit-floor-card span {
  width: fit-content;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  color: #fff;
  background: var(--blue-800);
  font-size: 0.72rem;
  line-height: 26px;
}

.edit-floor-card small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.edit-floor-card.is-selected {
  border-color: rgba(20, 87, 197, 0.45);
  background: var(--blue-100);
}

.edit-products-list {
  display: grid;
  gap: 10px;
}

.edit-product-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(226, 233, 242, 0.9);
  border-radius: 8px;
  background: #f9fbfe;
}

.edit-product-head,
.edit-product-card .product-image-picker,
.edit-product-card .product-gallery-picker,
.edit-product-card .product-image-list,
.edit-product-card .wide-field,
.edit-product-summary,
.edit-confirm-product-button {
  grid-column: 1 / -1;
}

.edit-product-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.edit-product-head strong {
  font-weight: 950;
}

.edit-product-head button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #d93636;
  background: #fff0f0;
}

.edit-product-card.is-confirmed {
  grid-template-columns: minmax(0, 1fr) 66px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-color: rgba(24, 169, 153, 0.42);
  background: #f2fffc;
}

.edit-product-card.is-confirmed > label,
.edit-product-card.is-confirmed > .product-image-list {
  display: none;
}

.edit-product-card.is-confirmed .edit-product-head {
  grid-column: 1 / -1;
}

.edit-product-card.is-confirmed .edit-product-summary {
  grid-column: 1;
}

.edit-product-card.is-confirmed .edit-confirm-product-button {
  grid-column: 2;
  width: 66px;
  min-height: 74px;
  align-self: stretch;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--blue-800);
  background: #fff;
  border-color: rgba(20, 87, 197, 0.18);
  white-space: normal;
}

.edit-product-card.is-confirmed .edit-confirm-product-button span {
  font-size: 0.68rem;
  line-height: 1.25;
}

.edit-theme-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.edit-theme-swatch {
  width: 30px;
  height: 30px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(16, 32, 51, 0.14);
}

.edit-theme-swatch.is-selected {
  box-shadow: 0 0 0 3px rgba(20, 87, 197, 0.18), 0 0 0 1px var(--blue-700);
}

.edit-design-workspace {
  display: grid;
  gap: 12px;
}

.edit-design-controls {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.edit-shop-live-preview {
  align-self: start;
}

.edit-shop-live-preview .full-preview-cover {
  min-height: 170px;
}

.edit-shop-live-preview .full-preview-products {
  max-height: 520px;
  overflow: auto;
  overscroll-behavior: contain;
}

.form-section {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.86);
  box-shadow: 0 10px 24px rgba(16, 32, 51, 0.07);
}

.form-section-head {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: start;
}

.form-section-head > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  color: var(--blue-800);
  background: var(--blue-100);
}

.form-section-head strong {
  display: block;
  font-size: 0.94rem;
  font-weight: 950;
}

.form-section-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.design-step {
  gap: 14px;
}

.design-studio {
  display: grid;
  gap: 12px;
}

.design-editor-nav {
  position: sticky;
  top: 134px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(211, 224, 242, 0.94);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 32px rgba(16, 32, 51, 0.1);
  backdrop-filter: blur(18px);
}

.design-editor-nav button {
  display: grid;
  min-width: 0;
  min-height: 48px;
  place-items: center;
  gap: 3px;
  border: 0;
  border-radius: 12px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-size: 0.64rem;
  font-weight: 950;
}

.design-editor-nav i {
  width: 17px;
  height: 17px;
}

.design-editor-nav span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.1;
}

.design-tool-panel {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(211, 224, 242, 0.94);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96)),
    radial-gradient(circle at 100% 0, rgba(20, 87, 197, 0.06), transparent 36%);
  box-shadow: 0 14px 34px rgba(16, 32, 51, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.design-tool-panel.is-highlighted {
  border-color: color-mix(in srgb, var(--blue-700), #fff 34%);
  box-shadow: 0 18px 42px rgba(20, 87, 197, 0.18);
  transform: translateY(-1px);
}

.design-tool-head {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: center;
}

.design-tool-head > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  color: var(--blue-800);
  background: var(--blue-100);
}

.design-tool-head strong {
  display: block;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
}

.design-tool-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.45;
}

.design-option-section {
  display: grid;
  gap: 9px;
  padding-block: 2px;
}

.design-option-section + .design-option-section {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(211, 224, 242, 0.92);
}

.design-option-section-head {
  display: grid;
  gap: 2px;
}

.design-option-section-head strong {
  color: #18324d;
  font-size: 0.78rem;
  font-weight: 950;
}

.design-option-section-head small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.4;
}

.design-copy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.design-copy-grid label {
  display: grid;
  gap: 7px;
}

.design-copy-grid label:first-child,
.design-copy-grid label:nth-child(2) {
  grid-column: 1 / -1;
}

.premium-file-tile {
  min-height: 118px;
  background: linear-gradient(180deg, #fff, #f8fbff);
  border-color: rgba(20, 87, 197, 0.28);
}

.professional-option-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.professional-option-grid .layout-option {
  min-height: 74px;
  background: #fff;
}

.professional-option-grid .layout-option.is-selected {
  box-shadow: inset 0 0 0 1px rgba(20, 87, 197, 0.18), 0 10px 20px rgba(20, 87, 197, 0.08);
}

.design-preset-panel {
  border-color: rgba(20, 87, 197, 0.22);
}

.design-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.design-preset-card {
  display: grid;
  min-width: 0;
  min-height: 96px;
  align-content: center;
  justify-items: start;
  gap: 5px;
  padding: 11px;
  border: 1px solid rgba(211, 224, 242, 0.98);
  border-radius: 14px;
  color: var(--ink);
  background:
    linear-gradient(180deg, #fff, #f6faff),
    radial-gradient(circle at 100% 0, rgba(20, 87, 197, 0.08), transparent 38%);
  text-align: start;
  box-shadow: 0 10px 24px rgba(16, 32, 51, 0.06);
}

.design-preset-card i {
  width: 19px;
  height: 19px;
  color: var(--blue-800);
}

.design-preset-card strong {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
}

.design-preset-card span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1.35;
}

.design-preset-card.is-selected {
  border-color: rgba(20, 87, 197, 0.34);
  background:
    linear-gradient(180deg, #fff, #edf5ff),
    radial-gradient(circle at 100% 0, rgba(20, 87, 197, 0.14), transparent 38%);
  box-shadow: inset 0 0 0 1px rgba(20, 87, 197, 0.12), 0 14px 30px rgba(20, 87, 197, 0.12);
}

.professional-theme-picker {
  padding: 10px;
  border-radius: 14px;
  background: #f8fbff;
  border: 1px solid rgba(226, 233, 242, 0.92);
}

.professional-toggle-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.visual-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.file-tile {
  position: relative;
  display: grid;
  min-height: 112px;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 12px 8px;
  border: 1px dashed rgba(20, 87, 197, 0.36);
  border-radius: 8px;
  background: var(--soft);
  text-align: center;
  cursor: pointer;
}

.file-tile input,
.product-image-picker input,
.product-gallery-picker input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-tile i {
  color: var(--blue-800);
}

.file-tile strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 950;
}

.file-tile small {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

.theme-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.theme-picker > span {
  margin-inline-end: auto;
  color: #43546b;
  font-size: 0.82rem;
  font-weight: 900;
}

.theme-swatch {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 32, 51, 0.12);
}

.theme-swatch > span {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.theme-swatch.is-selected {
  box-shadow: 0 0 0 3px rgba(20, 87, 197, 0.18), 0 0 0 1px var(--blue-700);
}

.layout-picker,
.option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.layout-option {
  display: grid;
  min-width: 0;
  min-height: 68px;
  place-items: center;
  gap: 5px;
  padding: 8px 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--soft);
  font-size: 0.7rem;
  font-weight: 900;
}

.layout-option span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-align: center;
  line-height: 1.25;
}

.layout-option.is-selected {
  color: var(--blue-800);
  background: var(--blue-100);
  border-color: rgba(20, 87, 197, 0.3);
}

.toggle-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.toggle-list label {
  position: relative;
  min-width: 0;
}

.toggle-list input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.toggle-list span {
  display: grid;
  min-height: 62px;
  place-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--soft);
  text-align: center;
  font-size: 0.7rem;
  font-weight: 900;
}

.toggle-list input:checked + span {
  color: var(--blue-800);
  background: var(--blue-100);
  border-color: rgba(20, 87, 197, 0.3);
}

.live-shop-preview {
  --preview-accent: var(--blue-800);
  overflow: hidden;
  width: 100%;
  margin-inline: auto;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.96);
}

.creator-live-preview {
  box-shadow: 0 12px 30px rgba(16, 32, 51, 0.08);
}

.creator-form[data-current-step="3"] .creator-live-preview {
  order: 2;
  align-self: start;
  position: sticky;
  top: 86px;
  z-index: 4;
  border-radius: 22px;
  border-color: color-mix(in srgb, var(--preview-accent), #fff 64%);
  box-shadow:
    0 26px 58px rgba(16, 32, 51, 0.18),
    0 4px 0 color-mix(in srgb, var(--preview-accent), #fff 82%);
}

.creator-form[data-current-step="3"] .design-step {
  order: 3;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.creator-form[data-current-step="3"] .creator-actions {
  order: 4;
}

.creator-form[data-current-step="3"] .creator-live-preview .live-preview-cover {
  min-height: 190px;
}

.creator-form[data-current-step="5"] .creator-live-preview {
  display: none;
}

.live-shop-preview[data-floor="second"] {
  width: 93%;
}

.live-shop-preview[data-floor="third"] {
  width: 86%;
}

.live-shop-preview[data-floor="first"] .live-preview-cover {
  min-height: 178px;
}

.live-preview-cover {
  position: relative;
  min-height: 136px;
  padding: 12px;
  color: #fff;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--preview-accent), #000 20%), var(--preview-accent)),
    url("https://images.unsplash.com/photo-1497366412874-3415097a27e7?auto=format&fit=crop&w=700&q=80") center/cover;
}

.preview-hotspot {
  display: none;
}

.creator-form[data-current-step="3"] .preview-hotspot {
  position: relative;
  z-index: 3;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  color: #fff;
  background: rgba(8, 36, 95, 0.56);
  box-shadow: 0 12px 28px rgba(5, 22, 58, 0.2);
  backdrop-filter: blur(14px);
  font-size: 0.7rem;
  font-weight: 950;
}

.creator-form[data-current-step="3"] .preview-hotspot i {
  width: 16px;
  height: 16px;
}

.creator-form[data-current-step="3"] .preview-hotspot span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.creator-form[data-current-step="3"] .preview-hotspot.is-cover {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  display: inline-flex;
}

.creator-form[data-current-step="3"] .preview-hotspot.is-logo {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-end: 82px;
  display: inline-flex;
}

.creator-form[data-current-step="3"] .preview-hotspot.is-copy,
.creator-form[data-current-step="3"] .preview-hotspot.is-layout,
.creator-form[data-current-step="3"] .preview-hotspot.is-contact {
  display: inline-flex;
  width: fit-content;
  color: var(--preview-accent);
  background: color-mix(in srgb, var(--preview-accent), #fff 90%);
  border-color: color-mix(in srgb, var(--preview-accent), #fff 72%);
  box-shadow: none;
}

.creator-form[data-current-step="3"] .preview-hotspot.is-copy {
  justify-self: start;
}

.creator-form[data-current-step="3"] .preview-hotspot.is-layout,
.creator-form[data-current-step="3"] .preview-hotspot.is-contact {
  margin-block-start: -2px;
}

.live-preview-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.live-preview-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 36, 95, 0.08), rgba(8, 36, 95, 0.54));
}

.live-preview-cover em {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.live-offer-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #08245f;
  background: #fff;
  font-size: 0.72rem;
  font-weight: 950;
}

.live-logo {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 16px;
  color: var(--preview-accent);
  background: #fff;
  font-size: 1.2rem;
  font-weight: 950;
  box-shadow: 0 12px 26px rgba(5, 22, 58, 0.2);
}

.live-logo.has-image {
  background-size: cover;
  background-position: center;
}

.live-logo[data-logo-shape="circle"],
.full-preview-logo[data-logo-shape="circle"] {
  border-radius: 50%;
}

.live-logo[data-logo-shape="square"],
.full-preview-logo[data-logo-shape="square"] {
  border-radius: 8px;
}

.live-preview-body {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.live-preview-body strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 950;
}

.live-preview-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.55;
}

.live-product-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--preview-accent);
  background: color-mix(in srgb, var(--preview-accent), #fff 90%);
  font-size: 0.72rem;
  font-weight: 950;
}

.live-product-strip span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.live-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.live-preview-actions button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--preview-accent);
  font-size: 0.7rem;
  font-weight: 950;
}

.live-preview-actions button:first-child {
  flex: 1 1 126px;
}

.live-preview-actions button:not(:first-child) {
  width: 36px;
  padding: 0;
}

.live-preview-actions button.needs-contact,
.full-preview-actions button.needs-contact {
  color: var(--preview-accent);
  background: color-mix(in srgb, var(--preview-accent), #fff 90%);
  border: 1px dashed color-mix(in srgb, var(--preview-accent), #fff 55%);
  box-shadow: none;
}

.live-preview-actions span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.live-preview-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.live-preview-product,
.live-preview-empty {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(226, 233, 242, 0.95);
  border-radius: 8px;
  background: #fff;
}

.live-preview-product {
  display: grid;
}

.live-preview-product.has-offer {
  border-color: rgba(216, 107, 53, 0.38);
  background: #fff8f1;
}

.live-preview-product.is-featured {
  grid-column: 1 / -1;
  grid-template-columns: 42% minmax(0, 1fr);
}

.live-preview-product.is-featured img,
.live-preview-product.is-featured .product-placeholder {
  height: 100%;
  min-height: 92px;
  aspect-ratio: auto;
}

.live-preview-product.is-wide {
  grid-column: 1 / -1;
}

.live-preview-product.is-wide img,
.live-preview-product.is-wide .product-placeholder {
  aspect-ratio: 1.72;
}

.live-preview-product.is-compact {
  grid-template-columns: 58px minmax(0, 1fr);
}

.live-preview-product.is-compact img,
.live-preview-product.is-compact .product-placeholder {
  height: 58px;
  aspect-ratio: auto;
}

.live-preview-product img,
.live-preview-product .product-placeholder {
  width: 100%;
  aspect-ratio: 1.18;
  object-fit: cover;
}

.live-preview-product .product-placeholder,
.live-preview-empty {
  display: grid;
  place-items: center;
  color: var(--preview-accent);
  background: color-mix(in srgb, var(--preview-accent), #fff 92%);
}

.live-product-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 7px;
}

.live-product-copy strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 950;
}

.live-product-copy p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.live-product-copy em {
  display: inline-flex;
  width: fit-content;
  min-height: 22px;
  align-items: center;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--preview-accent);
  background: color-mix(in srgb, var(--preview-accent), #fff 90%);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 950;
}

.live-preview-empty {
  grid-column: 1 / -1;
  min-height: 62px;
  gap: 5px;
  padding: 9px;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 900;
}

.live-shop-preview[data-layout="products"] .live-product-strip {
  color: #fff;
  background: var(--preview-accent);
}

.live-shop-preview[data-layout="products"] .live-preview-products {
  grid-template-columns: 1fr;
}

.live-shop-preview[data-layout="products"] .live-preview-product {
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: stretch;
}

.live-shop-preview[data-layout="products"] .live-preview-product img,
.live-shop-preview[data-layout="products"] .live-preview-product .product-placeholder {
  height: 100%;
  min-height: 82px;
  aspect-ratio: auto;
}

.live-shop-preview[data-cover-style="brand"] .live-preview-cover {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--preview-accent), #000 18%), color-mix(in srgb, var(--preview-accent), #fff 20%)),
    url("https://images.unsplash.com/photo-1497366412874-3415097a27e7?auto=format&fit=crop&w=700&q=80") center/cover;
}

.live-shop-preview[data-cover-style="minimal"] .live-preview-cover {
  color: var(--ink);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--preview-accent), #fff 82%), color-mix(in srgb, var(--preview-accent), #fff 62%)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.58)),
    url("https://images.unsplash.com/photo-1497366412874-3415097a27e7?auto=format&fit=crop&w=700&q=80") center/cover;
}

.live-shop-preview[data-cover-style="minimal"] .live-preview-cover::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.34));
}

.live-shop-preview[data-cover-style="premium"] .live-preview-cover {
  background:
    linear-gradient(135deg, rgba(16, 32, 51, 0.16), rgba(16, 32, 51, 0.94)),
    radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--preview-accent), #fff 28%), transparent 36%),
    url("https://images.unsplash.com/photo-1497366412874-3415097a27e7?auto=format&fit=crop&w=700&q=80") center/cover;
}

.live-shop-preview[data-header-style="centered"] .live-preview-body {
  justify-items: center;
  text-align: center;
}

.live-shop-preview[data-header-style="centered"] .live-preview-actions {
  justify-content: center;
  width: 100%;
}

.live-shop-preview[data-header-style="compact"] .live-preview-cover {
  min-height: 112px;
}

.live-shop-preview[data-header-style="compact"] .live-preview-products {
  grid-template-columns: 1fr;
}

.live-shop-preview[data-card-tone="soft"] .live-product-strip {
  border: 1px solid color-mix(in srgb, var(--preview-accent), #fff 76%);
  background: #f8fbff;
}

.live-shop-preview[data-card-tone="soft"] .live-preview-product {
  background: #f8fbff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--preview-accent), #fff 88%);
}

.live-shop-preview[data-card-tone="outlined"] .live-product-strip {
  border: 1px solid color-mix(in srgb, var(--preview-accent), #fff 50%);
  background: #fff;
}

.live-shop-preview[data-card-tone="outlined"] .live-preview-product {
  border-color: color-mix(in srgb, var(--preview-accent), #fff 42%);
}

.live-shop-preview[data-product-style="compact"] .live-preview-cover {
  min-height: 116px;
}

.live-shop-preview[data-product-style="compact"] .live-preview-products,
.live-shop-preview[data-product-style="priceList"] .live-preview-products {
  grid-template-columns: 1fr;
}

.live-shop-preview[data-product-style="compact"] .live-preview-product,
.live-shop-preview[data-product-style="priceList"] .live-preview-product {
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
}

.live-shop-preview[data-product-style="compact"] .live-preview-product img,
.live-shop-preview[data-product-style="compact"] .live-preview-product .product-placeholder,
.live-shop-preview[data-product-style="priceList"] .live-preview-product img,
.live-shop-preview[data-product-style="priceList"] .live-preview-product .product-placeholder {
  height: 58px;
  aspect-ratio: auto;
}

.live-shop-preview[data-product-style="gallery"] .live-preview-cover {
  min-height: 156px;
}

.live-shop-preview[data-product-style="gallery"] .live-preview-products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.live-shop-preview[data-product-style="gallery"] .live-product-copy p,
.live-shop-preview[data-product-style="gallery"] .live-product-copy em {
  display: none;
}

.live-shop-preview[data-button-style="outline"] .live-product-strip {
  border: 1px solid color-mix(in srgb, var(--preview-accent), #fff 64%);
  background: #fff;
}

.live-shop-preview[data-button-style="outline"] .live-preview-actions button {
  color: var(--preview-accent);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--preview-accent), #fff 62%);
}

.live-shop-preview[data-button-style="soft"] .live-preview-actions button {
  color: var(--preview-accent);
  background: color-mix(in srgb, var(--preview-accent), #fff 88%);
}

.live-shop-preview[data-layout="hero"] .live-preview-cover {
  min-height: 168px;
}

.live-shop-preview[data-layout="catalog"] .live-preview-products {
  grid-template-columns: 1fr;
}

.live-shop-preview[data-layout="catalog"] .live-preview-product {
  grid-template-columns: 72px minmax(0, 1fr);
}

.live-shop-preview[data-layout="catalog"] .live-preview-product img,
.live-shop-preview[data-layout="catalog"] .live-preview-product .product-placeholder {
  height: 72px;
  aspect-ratio: auto;
}

@media (max-width: 759px) {
  .creator-form[data-current-step="3"] {
    padding-bottom: 0;
  }

  .creator-form[data-current-step="3"] .creator-live-preview {
    position: static;
    top: auto;
    width: 100%;
    max-height: none;
    overflow: hidden;
    transform: none;
    animation: none;
  }

  .creator-form[data-current-step="3"] .creator-live-preview .live-preview-cover {
    min-height: 188px;
  }

  .creator-form[data-current-step="3"] .creator-live-preview .live-preview-body {
    gap: 7px;
    padding: 10px;
  }

  .creator-form[data-current-step="3"] .creator-live-preview .live-preview-body > p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .creator-form[data-current-step="3"] .creator-live-preview .live-preview-products {
    grid-template-columns: 1fr 1fr;
  }

  .creator-form[data-current-step="3"] .creator-live-preview .live-preview-product:nth-child(n + 3) {
    display: none;
  }

  .design-editor-nav {
    top: 128px;
    grid-template-columns: repeat(5, minmax(42px, 1fr));
    overflow-x: auto;
    scrollbar-width: none;
  }

  .design-editor-nav::-webkit-scrollbar {
    display: none;
  }

  .design-editor-nav button {
    min-height: 44px;
    padding-inline: 4px;
  }

  .design-preset-grid,
  .design-copy-grid,
  .visual-upload-grid,
  .professional-toggle-list {
    grid-template-columns: 1fr;
  }

  .creator-form[data-current-step="3"] .preview-hotspot {
    min-height: 32px;
    padding-inline: 9px;
    font-size: 0.64rem;
  }

  .creator-form[data-current-step="3"] .preview-hotspot.is-logo {
    inset-inline-end: 74px;
  }
}

.product-category-manager {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #f8fbff;
  border: 1px dashed rgba(20, 87, 197, 0.28);
}

.product-category-manager strong {
  display: block;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
}

.product-category-manager p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.55;
}

.category-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.category-entry button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 86px;
  min-height: 46px;
  border-radius: 8px;
  color: #fff;
  background: var(--blue-800);
  font-size: 0.76rem;
  font-weight: 950;
}

.category-entry button span {
  color: inherit;
  font-size: inherit;
}

.category-chip-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.category-edit-card {
  display: grid;
  grid-template-columns: 70px 1fr 34px;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.9);
}

.category-image-card {
  position: relative;
  display: grid;
  width: 70px;
  height: 62px;
  overflow: hidden;
  place-items: center;
  border-radius: 8px;
  background: var(--blue-100);
}

.category-image-card input {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}

.category-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-image-card span {
  display: grid;
  place-items: center;
  color: var(--blue-800);
}

.category-edit-card div {
  min-width: 0;
}

.category-edit-card strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 950;
}

.category-edit-card small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.35;
}

.category-edit-card > button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #d93636;
  background: #fff0f0;
}

.category-empty {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.product-builder {
  display: grid;
  gap: 12px;
}

.product-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: var(--soft);
  border: 1px solid rgba(226, 233, 242, 0.9);
}

.product-editor-head,
.product-image-picker,
.product-gallery-picker,
.product-image-list,
.wide-field,
.product-approved-summary,
.confirm-product-button {
  grid-column: 1 / -1;
}

.product-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.product-editor-head strong {
  font-size: 0.88rem;
  font-weight: 950;
}

.remove-product-button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #b42318;
  background: #fff;
  box-shadow: 0 6px 14px rgba(16, 32, 51, 0.08);
}

.product-image-picker {
  position: relative;
  display: grid;
  min-height: 132px;
  place-items: center;
  overflow: hidden;
  border: 1px dashed rgba(20, 87, 197, 0.36);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.product-image-picker img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-image-picker > span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 4px;
  color: var(--blue-800);
  font-weight: 900;
}

.product-image-picker small {
  color: var(--muted);
  font-size: 0.72rem;
}

.product-gallery-picker {
  position: relative;
  display: grid;
  min-height: 58px;
  place-items: center;
  border: 1px dashed rgba(20, 87, 197, 0.32);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.product-gallery-picker span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--blue-800);
  font-size: 0.76rem;
  font-weight: 950;
}

.product-gallery-picker small {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.product-image-list {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

.product-image-thumb {
  position: relative;
  flex: 0 0 76px;
  width: 76px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(226, 233, 242, 0.96);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(16, 32, 51, 0.07);
}

.product-image-thumb.is-main {
  border-color: rgba(20, 87, 197, 0.42);
}

.product-image-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.product-image-thumb span {
  display: block;
  min-height: 22px;
  padding: 4px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.product-image-thumb i {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 17px;
  height: 17px;
  padding: 2px;
  border-radius: 50%;
  color: #fff;
  background: rgba(180, 35, 24, 0.9);
}

.product-image-empty {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.92);
  font-size: 0.7rem;
  font-weight: 900;
}

.add-product-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  border: 1px solid rgba(20, 87, 197, 0.26);
  border-radius: 999px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-size: 0.82rem;
  font-weight: 950;
}

.confirm-product-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(24, 169, 153, 0.28);
  border-radius: 999px;
  color: #075c54;
  background: #d5faf4;
  font-size: 0.78rem;
  font-weight: 950;
}

.product-approved-summary {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 74px;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(24, 169, 153, 0.24);
}

.product-summary-thumb {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 8px;
  color: #075c54;
  background: #d5faf4;
  background-position: center;
  background-size: cover;
}

.product-summary-thumb.has-image {
  box-shadow: inset 0 0 0 1px rgba(16, 32, 51, 0.08);
}

.product-approved-summary div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.product-approved-summary strong {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.product-approved-summary p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-approved-summary em {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #075c54;
  background: #d5faf4;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.product-editor.is-confirmed {
  grid-template-columns: minmax(0, 1fr) 66px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-color: rgba(24, 169, 153, 0.42);
  background: #f2fffc;
}

.product-editor.is-confirmed > label,
.product-editor.is-confirmed > .product-image-list {
  display: none;
}

.product-editor.is-confirmed .product-editor-head {
  grid-column: 1 / -1;
}

.product-editor.is-confirmed .product-approved-summary {
  grid-column: 1;
}

.product-editor.is-confirmed .confirm-product-button {
  grid-column: 2;
  width: 66px;
  min-height: 74px;
  align-self: stretch;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--blue-800);
  background: #fff;
  border-color: rgba(20, 87, 197, 0.18);
  white-space: normal;
}

.product-editor.is-confirmed .confirm-product-button span {
  font-size: 0.68rem;
  line-height: 1.25;
}

.full-shop-preview {
  --preview-accent: var(--blue-800);
  overflow: hidden;
  width: 100%;
  margin-inline: auto;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.96);
  box-shadow: 0 14px 34px rgba(16, 32, 51, 0.09);
}

.full-shop-preview[data-floor="second"] {
  width: 93%;
}

.full-shop-preview[data-floor="third"] {
  width: 86%;
}

.full-shop-preview[data-floor="first"] .full-preview-cover {
  min-height: 246px;
}

.full-preview-cover {
  position: relative;
  min-height: 188px;
  padding: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--preview-accent), #000 20%), var(--preview-accent)),
    url("https://images.unsplash.com/photo-1497366412874-3415097a27e7?auto=format&fit=crop&w=700&q=80") center/cover;
}

.full-preview-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.full-preview-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 36, 95, 0.08), rgba(8, 36, 95, 0.58));
}

.full-preview-cover span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  max-width: calc(100% - 24px);
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.7rem;
  font-weight: 950;
  backdrop-filter: blur(10px);
}

.full-preview-cover em {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  display: inline-flex;
  max-width: calc(100% - 24px);
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #08245f;
  background: #fff;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 950;
  box-shadow: 0 10px 20px rgba(5, 22, 58, 0.18);
}

.full-offer-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--amber);
  font-size: 0.76rem;
  font-weight: 950;
  box-shadow: 0 10px 20px rgba(5, 22, 58, 0.18);
}

.full-preview-main {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: -34px;
  padding: 0 12px 2px;
}

.full-preview-logo {
  position: relative;
  z-index: 1;
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border-radius: 18px;
  color: var(--preview-accent);
  background: #fff;
  font-size: 1.35rem;
  font-weight: 950;
  box-shadow: 0 12px 26px rgba(5, 22, 58, 0.2);
}

.full-preview-logo.has-image {
  background-size: cover;
  background-position: center;
}

.full-preview-main h3 {
  margin: 0 0 4px;
  font-size: 1.16rem;
  line-height: 1.25;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.full-preview-main p,
.full-preview-tagline {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.full-preview-tagline {
  padding: 10px 12px 0;
}

.full-preview-floor {
  width: fit-content;
  max-width: calc(100% - 24px);
  min-height: 28px;
  margin: 10px 12px 0;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--preview-accent);
  background: color-mix(in srgb, var(--preview-accent), #fff 88%);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 28px;
}

.full-preview-actions {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  padding: 12px 12px 8px;
}

.full-preview-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #fff;
  background: var(--preview-accent);
  font-size: 0.76rem;
  font-weight: 950;
}

.full-preview-actions button:not(:first-child) {
  width: 42px;
  background: color-mix(in srgb, var(--preview-accent), #fff 86%);
  color: var(--preview-accent);
}

.full-preview-products {
  display: grid;
  gap: 10px;
  padding: 4px 12px 14px;
}

.full-preview-product {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 92px;
  min-width: 0;
  padding: 9px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.9);
  box-shadow: 0 8px 18px rgba(16, 32, 51, 0.06);
}

.full-preview-product.has-offer {
  border-color: rgba(216, 107, 53, 0.38);
  background: #fff8f1;
}

.full-preview-product.is-featured,
.full-preview-product.is-wide {
  grid-template-columns: 112px 1fr;
  min-height: 118px;
}

.full-preview-product.is-featured img,
.full-preview-product.is-wide img,
.full-preview-product.is-featured .product-placeholder,
.full-preview-product.is-wide .product-placeholder {
  width: 112px;
  height: 100px;
}

.full-preview-product.is-compact {
  grid-template-columns: 54px 1fr;
  min-height: 70px;
}

.full-preview-product.is-compact img,
.full-preview-product.is-compact .product-placeholder {
  width: 54px;
  height: 54px;
}

.full-preview-product img,
.product-placeholder {
  width: 78px;
  height: 76px;
  border-radius: 8px;
  object-fit: cover;
}

.product-placeholder {
  display: grid;
  place-items: center;
  color: var(--blue-800);
  background: var(--blue-100);
}

.full-preview-product.is-featured img,
.full-preview-product.is-wide img,
.full-preview-product.is-featured .product-placeholder,
.full-preview-product.is-wide .product-placeholder {
  width: 112px;
  height: 100px;
}

.full-preview-product.is-compact img,
.full-preview-product.is-compact .product-placeholder {
  width: 54px;
  height: 54px;
}

.full-product-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.full-preview-product strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.full-preview-product p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.full-preview-product em {
  display: inline-flex;
  width: fit-content;
  min-height: 26px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--preview-accent);
  background: color-mix(in srgb, var(--preview-accent), #fff 90%);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 950;
}

.full-preview-empty {
  display: grid;
  min-height: 86px;
  place-items: center;
  align-content: center;
  gap: 6px;
  border-radius: 8px;
  color: var(--muted);
  background: var(--soft);
  font-size: 0.76rem;
  font-weight: 900;
}

.full-shop-preview[data-layout="products"] .full-preview-products,
.full-shop-preview[data-product-style="gallery"] .full-preview-products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.full-shop-preview[data-layout="products"] .full-preview-product,
.full-shop-preview[data-product-style="gallery"] .full-preview-product {
  grid-template-columns: 1fr;
  align-items: start;
}

.full-shop-preview[data-layout="products"] .full-preview-product img,
.full-shop-preview[data-layout="products"] .product-placeholder,
.full-shop-preview[data-product-style="gallery"] .full-preview-product img,
.full-shop-preview[data-product-style="gallery"] .product-placeholder {
  width: 100%;
  height: auto;
  aspect-ratio: 1.1;
}

.full-shop-preview[data-product-style="cards"] .full-preview-products {
  grid-template-columns: 1fr;
}

.full-shop-preview[data-product-style="cards"] .full-preview-product {
  grid-template-columns: 78px 1fr;
  align-items: center;
}

.full-shop-preview[data-product-style="cards"] .full-preview-product img,
.full-shop-preview[data-product-style="cards"] .product-placeholder {
  width: 78px;
  height: 76px;
  aspect-ratio: auto;
}

.full-shop-preview[data-product-style="compact"] .full-preview-products {
  grid-template-columns: 1fr;
  gap: 7px;
}

.full-shop-preview[data-product-style="compact"] .full-preview-product {
  grid-template-columns: 54px 1fr;
  min-height: 64px;
  padding: 7px;
}

.full-shop-preview[data-product-style="compact"] .full-preview-product img,
.full-shop-preview[data-product-style="compact"] .product-placeholder {
  width: 54px;
  height: 54px;
}

.full-shop-preview[data-product-style="compact"] .full-preview-product p {
  display: none;
}

.full-shop-preview[data-product-style="compact"] .full-product-price {
  align-self: center;
}

.full-shop-preview[data-product-style="priceList"] .full-preview-products {
  grid-template-columns: 1fr;
  gap: 6px;
}

.full-shop-preview[data-product-style="priceList"] .full-preview-product {
  grid-template-columns: 1fr;
  min-height: 58px;
  padding: 9px 10px;
  box-shadow: none;
}

.full-shop-preview[data-product-style="priceList"] .full-preview-product img,
.full-shop-preview[data-product-style="priceList"] .product-placeholder {
  display: none;
}

.full-shop-preview[data-product-style="priceList"] .full-product-copy {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 8px;
}

.full-shop-preview[data-product-style="priceList"] .full-preview-product p {
  grid-column: 1 / -1;
  -webkit-line-clamp: 1;
}

.full-shop-preview[data-product-style="priceList"] .full-product-price {
  grid-column: 2;
  grid-row: 1;
}

.full-shop-preview[data-button-style="soft"] .full-preview-actions button {
  color: var(--preview-accent);
  background: color-mix(in srgb, var(--preview-accent), #fff 88%);
  border-color: color-mix(in srgb, var(--preview-accent), #fff 70%);
}

.full-shop-preview[data-button-style="outline"] .full-preview-actions button {
  color: var(--preview-accent);
  background: #fff;
  border-color: color-mix(in srgb, var(--preview-accent), #fff 52%);
}

.live-shop-preview .live-preview-actions button.needs-contact,
.full-shop-preview .full-preview-actions button.needs-contact {
  color: var(--preview-accent);
  background: color-mix(in srgb, var(--preview-accent), #fff 90%);
  border: 1px dashed color-mix(in srgb, var(--preview-accent), #fff 55%);
  box-shadow: none;
}

.full-shop-preview[data-cover-style="brand"] .full-preview-cover {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--preview-accent), #000 18%), color-mix(in srgb, var(--preview-accent), #fff 20%)),
    var(--full-cover, transparent);
}

.full-shop-preview[data-cover-style="minimal"] .full-preview-cover {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--preview-accent), #fff 82%), color-mix(in srgb, var(--preview-accent), #fff 62%)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.58));
}

.full-shop-preview[data-cover-style="minimal"] .full-preview-cover::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.34));
}

.full-shop-preview[data-cover-style="premium"] .full-preview-cover {
  background:
    linear-gradient(135deg, rgba(16, 32, 51, 0.18), rgba(16, 32, 51, 0.95)),
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--preview-accent), #fff 28%), transparent 36%);
}

.full-shop-preview[data-header-style="centered"] .full-preview-main {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.full-shop-preview[data-header-style="centered"] .full-preview-logo {
  width: 70px;
  height: 70px;
}

.full-shop-preview[data-header-style="compact"] .full-preview-main {
  grid-template-columns: 48px 1fr;
}

.full-shop-preview[data-header-style="compact"] .full-preview-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.full-shop-preview[data-card-tone="soft"] .full-preview-product {
  background: #f8fbff;
  border-color: color-mix(in srgb, var(--preview-accent), #fff 74%);
}

.full-shop-preview[data-card-tone="outlined"] .full-preview-product {
  box-shadow: none;
  border-color: color-mix(in srgb, var(--preview-accent), #fff 52%);
}

.full-shop-preview[data-layout="hero"] .full-preview-cover {
  min-height: 230px;
}

.full-shop-preview[data-layout="catalog"] .full-preview-cover {
  min-height: 150px;
}

.full-shop-preview[data-layout="catalog"] .full-preview-main {
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(226, 233, 242, 0.9);
}

.owner-details-grid {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.9);
}

.package-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #f8fbff;
  border: 1px solid rgba(226, 233, 242, 0.96);
}

.package-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.package-panel-head span {
  display: block;
  color: #43546b;
  font-size: 0.82rem;
  font-weight: 950;
}

.package-panel-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.package-panel-head > strong {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-size: 0.72rem;
  font-weight: 950;
  white-space: nowrap;
}

.package-picker {
  display: grid;
  gap: 8px;
}

.package-option {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 92px;
  padding: 10px;
  border: 1px solid rgba(226, 233, 242, 0.96);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(16, 32, 51, 0.05);
  cursor: pointer;
}

.package-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.package-order {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: var(--blue-800);
  background: var(--blue-100);
  font-size: 0.76rem;
  font-weight: 950;
}

.package-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.package-copy strong {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 950;
  line-height: 1.25;
}

.package-copy small {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.package-copy em {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  font-style: normal;
}

.package-copy em span {
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  color: #43546b;
  background: var(--soft);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 22px;
}

.package-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 58px;
}

.package-meta strong {
  color: var(--blue-800);
  font-size: 0.9rem;
  font-weight: 950;
  white-space: nowrap;
}

.package-meta small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.package-option.is-selected {
  border-color: rgba(20, 87, 197, 0.42);
  background: var(--blue-100);
  box-shadow: 0 0 0 3px rgba(20, 87, 197, 0.1);
}

.package-option:focus-within {
  border-color: var(--blue-700);
  box-shadow: 0 0 0 4px rgba(20, 87, 197, 0.11);
}

.package-option.is-selected .package-copy em span {
  color: var(--blue-800);
  background: #fff;
}

.submit-button {
  width: 100%;
  color: #fff;
  background: var(--blue-800);
  box-shadow: 0 12px 28px rgba(20, 87, 197, 0.2);
  white-space: normal;
  line-height: 1.3;
  padding-top: 8px;
  padding-bottom: 8px;
}

.approval-page {
  padding: 18px 16px;
}

.approval-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-height: 62vh;
  align-content: center;
  padding: 22px 16px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.86);
  box-shadow: 0 12px 30px rgba(16, 32, 51, 0.08);
  text-align: center;
}

.approval-icon {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border-radius: 20px;
  color: var(--blue-800);
  background: var(--blue-100);
}

.approval-icon i {
  width: 32px;
  height: 32px;
}

.approval-card h2 {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.35;
  font-weight: 950;
}

.approval-card p {
  max-width: 22rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.8;
}

.approval-card p strong {
  color: var(--ink);
  font-weight: 950;
}

.approval-package {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--blue-100);
}

.approval-card .approval-package strong {
  color: var(--blue-800);
}

.approval-message {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  color: #075c54;
  background: #d5faf4;
  border: 1px solid rgba(24, 169, 153, 0.28);
  text-align: right;
}

.approval-message i {
  width: 28px;
  height: 28px;
}

.approval-message strong {
  display: block;
  color: #075c54;
  font-size: 0.86rem;
  font-weight: 950;
}

.approval-message span {
  display: block;
  margin-top: 3px;
  color: #336b63;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.5;
}

.payment-panel {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(13, 63, 149, 0.2);
  border-radius: 8px;
  background: #f8fbff;
  text-align: right;
}

.payment-panel.is-paid {
  border-color: rgba(24, 169, 153, 0.32);
  background: #f3fffc;
}

.payment-panel.is-waiting {
  border-color: rgba(216, 107, 53, 0.28);
  background: #fffaf2;
}

.payment-panel.is-free-trial {
  border-color: rgba(24, 169, 153, 0.34);
  background:
    radial-gradient(circle at top left, rgba(24, 169, 153, 0.12), transparent 34%),
    linear-gradient(135deg, #f2fffb, #f8fbff);
  box-shadow: 0 14px 26px rgba(10, 65, 89, 0.08);
}

.payment-panel-head {
  display: grid;
  gap: 7px;
}

.payment-bank-brand {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(226, 43, 34, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(20, 28, 45, 0.06);
  overflow: hidden;
}

.payment-bank-brand img {
  display: block;
  width: min(320px, 100%);
  height: 86px;
  object-fit: cover;
  object-position: center;
  margin: 0;
}

.payment-bank-brand span {
  color: #202a3a;
  font-size: 1.95rem;
  font-weight: 950;
  line-height: 1.25;
}

.payment-qr-card {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 14px;
  border: 1px solid rgba(13, 63, 149, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.94)),
    radial-gradient(circle at 18% 8%, rgba(226, 43, 34, 0.1), transparent 28%);
  box-shadow: 0 16px 34px rgba(13, 63, 149, 0.1);
}

.payment-qr-copy {
  display: grid;
  gap: 5px;
  width: 100%;
  text-align: center;
}

.payment-qr-copy strong {
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 950;
}

.payment-qr-copy span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.75;
}

.payment-qr-card img {
  display: block;
  width: min(300px, 100%);
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 10px;
  border: 1px solid rgba(13, 63, 149, 0.14);
  border-radius: 8px;
  background: #fff;
  box-shadow:
    0 18px 32px rgba(20, 28, 45, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.92);
}

.payment-panel-head strong {
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 950;
}

.payment-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.payment-mini-grid span {
  display: grid;
  gap: 4px;
  min-height: 56px;
  align-content: center;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.9);
}

.payment-mini-grid small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
}

.payment-mini-grid b {
  color: var(--blue-800);
  font-size: 0.82rem;
  font-weight: 950;
}

.payment-actions {
  display: grid;
  gap: 8px;
}

.payment-method-button,
.payment-whatsapp-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--blue-800);
  font-size: 0.82rem;
  font-weight: 950;
  text-decoration: none;
}

.payment-whatsapp-button {
  color: #075c54;
  background: #d5faf4;
}

.payment-method-button.is-selected {
  outline: 2px solid rgba(20, 87, 197, 0.38);
  outline-offset: 2px;
}

.payment-method-button:disabled {
  color: #7a8798;
  background: #e9eef6;
}

.payment-empty-note {
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  color: #733b07;
  background: #fff0d7;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.6;
  text-align: right;
}


.admin-page {
  display: grid;
  gap: 14px;
  padding: 18px 16px;
}

.admin-login,
.admin-dashboard,
.admin-credentials {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.9);
  box-shadow: 0 12px 28px rgba(16, 32, 51, 0.08);
}

.admin-login {
  justify-items: stretch;
  text-align: center;
}

.admin-login h2,
.admin-toolbar h2,
.admin-request-card h3 {
  margin: 0;
}

.admin-login label,
.admin-credentials label,
.admin-place-form label,
.admin-payment-form label {
  display: grid;
  gap: 7px;
  text-align: right;
}

.admin-login span,
.admin-credentials span,
.admin-place-form span,
.admin-payment-form span {
  color: #43546b;
  font-size: 0.82rem;
  font-weight: 900;
}

.admin-login input,
.admin-credentials input,
.admin-place-form input,
.admin-place-form select,
.admin-payment-form input,
.admin-payment-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  outline: 0;
}

.admin-payment-form textarea {
  min-height: 88px;
  padding: 12px;
  resize: vertical;
}

.admin-error {
  margin: 0;
  color: #b42318;
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 8px;
}

.admin-stats article {
  display: grid;
  gap: 5px;
  min-height: 72px;
  align-content: center;
  justify-items: center;
  border-radius: 8px;
  background: var(--soft);
  border: 1px solid rgba(226, 233, 242, 0.9);
}

.admin-stats small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
}

.admin-stats strong {
  color: var(--blue-800);
  font-size: 1.2rem;
  font-weight: 950;
}

.admin-place-manager,
.admin-payment-manager,
.admin-agreements-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe6f5;
  border-radius: 12px;
  background: #f8fbff;
}

.admin-place-form,
.admin-payment-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 10px;
}

.admin-place-form label,
.admin-payment-form label {
  display: grid;
  gap: 6px;
}

.admin-place-form button,
.admin-payment-form button,
.admin-payment-form .wide-field {
  grid-column: 1 / -1;
}

.admin-place-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-agreement-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

[data-admin-agreement-count],
[data-admin-valuation-count] {
  justify-self: end;
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-size: 0.74rem;
  font-weight: 950;
  white-space: nowrap;
}

.admin-valuation-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(20, 87, 197, 0.18);
  border-radius: 10px;
  background: #f8fbff;
}

.admin-valuation-editor label {
  display: grid;
  gap: 6px;
}

.admin-valuation-editor .wide-field {
  grid-column: 1 / -1;
}

.admin-valuation-editor span {
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 950;
}

.admin-valuation-editor input,
.admin-valuation-editor select,
.admin-valuation-editor textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid #cfe0f5;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
}

.admin-valuation-editor textarea {
  resize: vertical;
}

.admin-valuation-editor input:focus,
.admin-valuation-editor select:focus,
.admin-valuation-editor textarea:focus {
  border-color: var(--blue-700);
  box-shadow: 0 0 0 3px rgba(20, 87, 197, 0.12);
  outline: 0;
}

.admin-agreement-list {
  display: grid;
  gap: 10px;
}

.admin-agreement-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(216, 107, 53, 0.24);
  border-radius: 12px;
  background: #fffaf2;
}

.admin-agreement-card.is-approved {
  border-color: rgba(24, 169, 153, 0.3);
  background: #f3fffc;
}

.admin-agreement-card.is-rejected {
  border-color: rgba(180, 35, 24, 0.2);
  background: #fff7f6;
}

.admin-agreement-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.admin-agreement-head h3 {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: 0;
}

.admin-agreement-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.5;
}

.admin-agreement-head > strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  color: #fff;
  background: var(--blue-800);
  font-size: 0.78rem;
  font-weight: 950;
  white-space: nowrap;
}

.admin-agreement-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-agreement-meta span {
  display: grid;
  gap: 4px;
  min-height: 58px;
  align-content: center;
  padding: 8px;
  border: 1px solid rgba(226, 233, 242, 0.9);
  border-radius: 8px;
  background: #fff;
}

.admin-agreement-meta small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
}

.admin-agreement-meta b {
  min-width: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.admin-agreement-proof {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(20, 87, 197, 0.18);
  border-radius: 10px;
  background: #f8fbff;
}

.admin-agreement-verification {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(24, 169, 153, 0.28);
  border-radius: 10px;
  background: #f3fffc;
}

.admin-agreement-verification.is-revoked {
  border-color: rgba(180, 35, 24, 0.18);
  background: #fff7f6;
}

.admin-agreement-verification > i {
  width: 24px;
  height: 24px;
  justify-self: center;
  color: #075c54;
}

.admin-agreement-verification.is-revoked > i {
  color: #9d281d;
}

.admin-agreement-verification div {
  display: grid;
  gap: 3px;
}

.admin-agreement-verification small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
}

.admin-agreement-verification b {
  color: #063f3b;
  font-size: 0.98rem;
  font-weight: 950;
  letter-spacing: 0;
}

.admin-agreement-verification.is-revoked b {
  color: #7d2118;
}

.admin-agreement-verification span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.5;
}

.admin-agreement-proof-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.admin-agreement-proof-head i {
  width: 22px;
  height: 22px;
  justify-self: center;
  color: var(--blue-800);
}

.admin-agreement-proof-head strong {
  display: block;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
}

.admin-agreement-proof-head span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.admin-agreement-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-agreement-proof-grid span {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(226, 233, 242, 0.9);
  border-radius: 8px;
  background: #fff;
}

.admin-agreement-proof-grid small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
}

.admin-agreement-proof-grid b {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.admin-agreement-receipt-link {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 84px;
  padding: 8px;
  border: 1px solid rgba(13, 63, 149, 0.16);
  border-radius: 8px;
  color: var(--blue-800);
  background: #fff;
  font-size: 0.78rem;
  font-weight: 950;
  text-decoration: none;
}

.admin-agreement-receipt-link img {
  width: 96px;
  height: 76px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(13, 63, 149, 0.14);
  background: #fff;
}

.admin-agreement-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-agreement-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--blue-800);
  font-size: 0.78rem;
  font-weight: 950;
}

.admin-agreement-actions button[data-admin-agreement-action="reject-payment"],
.admin-agreement-actions button[data-admin-agreement-action="reset-payment"],
.admin-agreement-actions button[data-admin-valuation-action="reject-payment"],
.admin-agreement-actions button[data-admin-valuation-action="reset-payment"] {
  color: #733b07;
  background: #fff0d7;
}

.admin-place-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 7px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dbe6f5;
  color: #324762;
  font-size: 0.76rem;
  font-weight: 850;
}

.admin-place-pill i {
  width: 15px;
  height: 15px;
  color: #0d3f95;
}

.admin-request-list {
  display: grid;
  gap: 10px;
}

.admin-transfer-inbox {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(216, 107, 53, 0.34);
  border-radius: 8px;
  background: #fff8f1;
}

.admin-transfer-inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-transfer-inbox-head h3 {
  margin: 6px 0 4px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
}

.admin-transfer-inbox-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.5;
}

.admin-transfer-inbox-head > strong {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--blue-800);
  font-weight: 950;
}

.admin-transfer-inbox-list {
  display: grid;
  gap: 10px;
}

.admin-transfer-inbox-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(216, 107, 53, 0.28);
  border-radius: 8px;
  background: #fff;
}

.admin-transfer-waiting {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  color: #733b07;
  background: #fff0d7;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.5;
}

.admin-transfer-waiting i {
  width: 18px;
  height: 18px;
}

.admin-request-card,
.admin-empty {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.94);
}

.admin-empty {
  justify-items: center;
  min-height: 150px;
  align-content: center;
  color: var(--muted);
  text-align: center;
}

.admin-request-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.admin-request-head h3 {
  margin-top: 6px;
  font-size: 1rem;
  font-weight: 950;
}

.admin-request-head p,
.admin-request-head small {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.admin-request-meta,
.admin-product-mini {
  display: grid;
  gap: 6px;
}

.admin-request-meta span,
.admin-product-mini span {
  min-height: 30px;
  padding: 7px 9px;
  border-radius: 8px;
  color: #43546b;
  background: var(--soft);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.4;
}

.admin-product-mini {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-payment-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(216, 107, 53, 0.24);
  background: #fffaf2;
}

.admin-payment-card.is-paid {
  border-color: rgba(24, 169, 153, 0.28);
  background: #f2fffb;
}

.admin-payment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-payment-head strong {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
}

.admin-payment-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.admin-payment-meta span {
  min-height: 30px;
  padding: 7px 9px;
  border-radius: 8px;
  color: #43546b;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.82);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.4;
}

.admin-payment-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.admin-payment-actions button {
  display: grid;
  min-height: 48px;
  place-items: center;
  gap: 3px;
  border: 0;
  border-radius: 8px;
  color: #075c54;
  background: #d5faf4;
  font-size: 0.66rem;
  font-weight: 950;
}

.admin-payment-actions button[data-admin-action="reset-payment"] {
  color: #733b07;
  background: #fff0d7;
}

.admin-payment-actions button:disabled {
  color: #8a98aa;
  background: #eef3f9;
}

.admin-request-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.admin-request-actions button {
  display: grid;
  min-height: 54px;
  place-items: center;
  gap: 3px;
  border: 0;
  border-radius: 8px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-size: 0.66rem;
  font-weight: 950;
}

.admin-request-actions button[data-admin-action="approved"] {
  color: #075c54;
  background: #d5faf4;
}

.admin-request-actions button[data-admin-action="delete"] {
  color: #b42318;
  background: #fff1f0;
}

.admin-save-note {
  margin: 0;
  color: #075c54;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
}

.approval-timeline {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 4px 0;
}

.approval-timeline div {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #43546b;
  background: var(--soft);
  text-align: right;
  font-size: 0.78rem;
  font-weight: 900;
}

.approval-timeline i {
  color: var(--blue-800);
}

.approval-note {
  color: #43546b;
  font-weight: 900;
}

.empty-state {
  display: grid;
  min-height: 52vh;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
}

.empty-state i {
  width: 44px;
  height: 44px;
  color: var(--blue-700);
}

.empty-state h2 {
  margin: 0;
  font-size: 1.2rem;
}

.empty-state p {
  max-width: 18rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.account-page {
  display: grid;
  gap: 12px;
  padding: 18px 16px;
}

.account-dashboard {
  display: grid;
  gap: 12px;
}

.account-status-card,
.account-signin-card,
.account-section-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(226, 233, 242, 0.9);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(16, 32, 51, 0.08);
}

.account-status-card {
  background:
    linear-gradient(135deg, rgba(20, 87, 197, 0.08), rgba(24, 169, 153, 0.08)),
    #fff;
}

.account-status-head,
.account-section-head {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  text-align: right;
}

.account-status-head .approval-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
}

.account-status-head h2 {
  margin: 6px 0 4px;
  color: var(--ink);
  font-size: 1.16rem;
  line-height: 1.35;
  font-weight: 950;
}

.account-status-head p,
.account-section-head small {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.65;
  font-weight: 850;
}

.account-section-head > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  color: var(--blue-800);
  background: var(--blue-100);
}

.account-section-head strong {
  display: block;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 950;
}

.account-signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.account-signal-grid span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(219, 230, 245, 0.86);
}

.account-signal-grid small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.account-signal-grid strong {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.account-main-actions {
  padding: 4px;
  border-radius: 8px;
  background: #edf4ff;
}

.account-device-list {
  display: grid;
  gap: 8px;
}

.account-device-list span {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 8px;
  color: #43546b;
  background: var(--soft);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.5;
}

.account-device-list i {
  color: #128c7e;
}

.account-path-list {
  display: grid;
  gap: 8px;
}

.account-path-list span {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background: var(--soft);
  text-align: right;
}

.account-path-list b {
  grid-row: span 2;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--blue-800);
  font-size: 0.8rem;
}

.account-path-list strong {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 950;
}

.account-path-list small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
  font-weight: 850;
}

.account-card {
  display: grid;
  justify-items: stretch;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(226, 233, 242, 0.9);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(16, 32, 51, 0.08);
  text-align: center;
}

.account-card .approval-icon {
  justify-self: center;
}

.account-intro-card {
  grid-template-columns: 58px 1fr;
  align-items: center;
  text-align: right;
}

.account-intro-card .approval-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
}

.account-intro-card h2 {
  margin-top: 6px;
}

.account-intro-card .mini-chip {
  justify-self: start;
}

.account-avatar {
  overflow: hidden;
  background: var(--blue-100);
}

.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-card h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1.35;
  font-weight: 950;
}

.account-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.7;
  font-weight: 850;
}

.account-mode-switch {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background: #edf4ff;
}

.account-mode-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  border: 0;
  border-radius: 7px;
  color: #43546b;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 950;
}

.account-mode-switch button.is-active {
  color: #fff;
  background: var(--blue-800);
  box-shadow: 0 8px 18px rgba(20, 87, 197, 0.18);
}

.google-signin-button {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  box-shadow: inset 0 0 0 1px #dbe6f5, 0 10px 22px rgba(16, 32, 51, 0.08);
  font-size: 0.92rem;
  font-weight: 950;
}

.google-signin-button:active {
  transform: translateY(1px);
}

.google-signin-button:disabled {
  cursor: wait;
  opacity: 0.76;
}

.secondary-google-action {
  background: #edf4ff;
}

.google-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: #1457c5;
  background: #edf4ff;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: 950;
}

.account-pending-card {
  background:
    linear-gradient(135deg, rgba(20, 87, 197, 0.08), rgba(24, 169, 153, 0.1)),
    #fff;
}

.account-loading-mark i {
  animation: account-auth-spin 0.9s linear infinite;
}

@keyframes account-auth-spin {
  to {
    transform: rotate(360deg);
  }
}

.account-mode-panel {
  display: grid;
  gap: 10px;
}

.account-google-steps .account-step-card {
  box-shadow: none;
}

.account-step-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(226, 233, 242, 0.9);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(16, 32, 51, 0.07);
}

.account-step-card.is-current {
  border-color: rgba(20, 87, 197, 0.28);
}

.account-step-card.is-waiting {
  border-style: dashed;
  background: #f8fbff;
}

.account-step-card.is-final {
  background: linear-gradient(180deg, #ffffff, #f4f8ff);
}

.account-step-head {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: center;
  text-align: right;
}

.account-step-number {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-size: 0.9rem;
  font-weight: 950;
}

.account-step-card.is-current .account-step-number,
.account-login-card .account-step-number {
  color: #fff;
  background: var(--blue-800);
}

.account-step-card.is-complete .account-step-number {
  color: #075c54;
  background: #d5faf4;
}

.account-step-head strong {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 950;
}

.account-step-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
  font-weight: 850;
}

.account-step-placeholder {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: center;
  min-height: 52px;
  padding: 10px;
  border-radius: 8px;
  color: #43546b;
  background: var(--soft);
  text-align: right;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.5;
}

.account-step-placeholder i {
  color: var(--blue-800);
}

.account-form {
  display: grid;
  gap: 10px;
  text-align: right;
}

.account-form label {
  display: grid;
  gap: 7px;
}

.account-form label span {
  color: #43546b;
  font-size: 0.78rem;
  font-weight: 900;
}

.account-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  outline: 0;
}

.account-form input:focus {
  border-color: rgba(20, 87, 197, 0.65);
  box-shadow: 0 0 0 4px rgba(20, 87, 197, 0.1);
}

.account-profile-form {
  padding: 12px;
  border: 1px dashed #c9d8ee;
  border-radius: 8px;
  background: #f8fbff;
}

.account-form button,
.account-actions button,
.account-whatsapp-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--blue-800);
  text-decoration: none;
  font-weight: 950;
}

.account-whatsapp-link {
  color: #075c54;
  background: #d5faf4;
}

.account-otp-status {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  align-items: center;
  min-height: 46px;
  padding: 9px 10px;
  border: 1px solid rgba(24, 169, 153, 0.25);
  border-radius: 8px;
  color: #075c54;
  background: #d5faf4;
  text-align: right;
  font-size: 0.76rem;
  font-weight: 950;
  line-height: 1.5;
}

.account-otp-status i {
  color: #075c54;
}

.account-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.account-actions .secondary-action {
  color: var(--blue-800);
  background: var(--blue-100);
  box-shadow: none;
}

.account-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.account-meta span {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 8px;
  background: var(--soft);
}

.account-meta small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.account-meta strong {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.account-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.account-divider::before,
.account-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: #dbe6f5;
}

.account-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  color: #075c54;
  background: #d5faf4;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
}

.account-note[data-type="error"] {
  color: #b42318;
  background: #fff1f0;
}

.account-note[data-type="success"] {
  color: #075c54;
  background: #d5faf4;
}

.account-shop-hint {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(24, 169, 153, 0.28);
  border-radius: 8px;
  color: #075c54;
  background: #d5faf4;
  text-align: right;
}

.account-shop-hint i {
  width: 32px;
  height: 32px;
}

.account-shop-hint strong,
.account-shop-hint span {
  display: block;
}

.account-shop-hint strong {
  color: #075c54;
  font-size: 0.86rem;
  font-weight: 950;
}

.account-shop-hint span {
  margin-top: 3px;
  color: #336b63;
  font-size: 0.74rem;
  font-weight: 900;
}

.settings-list {
  display: grid;
  gap: 10px;
  padding: 18px 16px;
}

.settings-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 14px;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 9px 24px rgba(16, 32, 51, 0.07);
  font-weight: 900;
}

.settings-list button i {
  color: var(--blue-800);
}

.my-shop-panel {
  display: grid;
  gap: 12px;
  padding: 18px 16px;
}

.owner-documents-library {
  display: grid;
  gap: 10px;
}

.owner-document-grid {
  display: grid;
  gap: 8px;
}

.owner-document-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(226, 233, 242, 0.9);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(16, 32, 51, 0.07);
}

.owner-document-card.is-active {
  border-color: rgba(20, 87, 197, 0.42);
  background: linear-gradient(180deg, #fff, #f6f9ff);
}

.owner-document-shop {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.owner-document-shop img {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--soft);
}

.owner-document-shop strong,
.owner-document-shop span,
.owner-document-shop small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.owner-document-shop strong {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 950;
  line-height: 1.25;
}

.owner-document-shop span,
.owner-document-shop small,
.owner-document-note {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.45;
}

.owner-document-shop small {
  margin-top: 2px;
  color: var(--blue-800);
  font-weight: 950;
}

.owner-document-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.owner-document-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 38px;
  padding: 0 7px;
  border: 0;
  border-radius: 8px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1.2;
}

.owner-document-actions button:first-child {
  color: #fff;
  background: var(--blue-800);
}

.owner-document-actions button[data-edit-owned-request] {
  color: #075c54;
  background: #d5faf4;
}

.owner-document-actions button[data-select-sale-shop] {
  color: #7a3b03;
  background: #fff0d7;
}

.owner-document-actions button:disabled {
  color: #8b98aa;
  background: #edf2f7;
  cursor: not-allowed;
  opacity: 0.78;
}

.owner-document-actions i {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.owner-document-note {
  margin: 0;
  padding: 8px 9px;
  border-radius: 8px;
  background: #f5f8fc;
}

.owner-shop-card {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(226, 233, 242, 0.9);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(16, 32, 51, 0.08);
}

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

.owner-shop-head h2 {
  margin: 8px 0 4px;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 950;
}

.owner-shop-head p,
.owner-shop-meta span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.owner-shop-cover {
  position: relative;
  min-height: 132px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue-950), var(--blue-700));
}

.owner-shop-cover img {
  width: 100%;
  height: 132px;
  object-fit: cover;
}

.owner-shop-cover span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: #fff;
  background: rgba(13, 63, 149, 0.88);
  font-size: 0.74rem;
  font-weight: 950;
}

.owner-shop-meta {
  display: grid;
  gap: 8px;
}

.owner-shop-meta span {
  padding: 10px;
  border-radius: 8px;
  background: #f5f8fc;
}

.owner-shop-meta b {
  color: var(--blue-800);
  font-weight: 950;
}

.owner-rent-sequence {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px dashed rgba(20, 87, 197, 0.28);
  border-radius: 8px;
  background: #f8fbff;
}

.owner-rent-sequence > strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
}

.owner-rent-sequence div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
}

.owner-rent-sequence span {
  color: var(--blue-800);
  font-size: 0.72rem;
  font-weight: 950;
}

.owner-rent-sequence em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.5;
}

.owner-qr-panel,
.owned-shop-switcher,
.title-deed-section,
.identity-card-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(226, 233, 242, 0.9);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(16, 32, 51, 0.08);
}

.owned-shop-tabs {
  display: grid;
  gap: 8px;
}

.owned-shop-tabs button {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 9px;
  align-items: center;
  min-height: 62px;
  padding: 9px;
  border: 1px solid #dbe6f5;
  border-radius: 8px;
  color: var(--ink);
  background: #f8fbff;
  text-align: right;
}

.owned-shop-tabs button.is-active {
  border-color: rgba(20, 87, 197, 0.42);
  background: var(--blue-100);
}

.owned-shop-tabs button > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--blue-800);
  font-size: 0.8rem;
  font-weight: 950;
}

.owned-shop-tabs strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.owned-shop-tabs small {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
}

.add-owned-shop-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-weight: 950;
}

.owner-qr-panel {
  grid-template-columns: minmax(0, 1fr) 112px;
  align-items: center;
}

.owner-qr-panel span,
.owner-section-head span {
  color: var(--blue-800);
  font-size: 0.72rem;
  font-weight: 950;
}

.owner-qr-panel strong,
.owner-section-head strong {
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 950;
}

.owner-qr-panel small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.66rem;
  direction: ltr;
  overflow-wrap: anywhere;
}

.owner-qr-panel img {
  width: 112px;
  height: 112px;
  padding: 7px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.9);
}

.owner-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.title-deed-card {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--deed-accent), #fff 54%);
  border-radius: 8px;
  background: #fff;
}

.title-deed-cover {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  align-items: end;
  min-height: 188px;
  padding: 16px;
  color: #fff;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--deed-accent), transparent 26%),
      color-mix(in srgb, var(--deed-accent), #000 18%)
    ),
    var(--deed-cover) center/cover;
}

.title-deed-floor-mark {
  position: absolute;
  inset-inline-start: 14px;
  top: 14px;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--deed-accent);
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.72rem;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(16, 32, 51, 0.16);
}

.title-deed-cover small,
.title-deed-cover p {
  color: rgba(255, 255, 255, 0.9);
}

.title-deed-cover h3 {
  margin: 4px 0;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 950;
}

.title-deed-logo {
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  color: var(--deed-accent);
  background: #fff center/cover no-repeat;
  font-size: 1.5rem;
  font-weight: 950;
}

.title-deed-logo.has-image {
  color: transparent;
}

.title-deed-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

.title-deed-info {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: 8px;
  background: #f5f8fc;
}

.title-deed-info span,
.title-deed-approval span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.title-deed-info strong,
.title-deed-approval strong {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1.45;
}

.title-deed-footer {
  display: grid;
  grid-template-columns: 1fr 104px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-top: 1px solid rgba(226, 233, 242, 0.9);
}

.title-deed-approval {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
  color: var(--deed-accent);
  background: color-mix(in srgb, var(--deed-accent), #fff 88%);
}

.title-deed-approval strong {
  color: var(--deed-accent);
  font-size: 1.3rem;
}

.title-deed-qr {
  width: 104px;
  height: 104px;
  padding: 7px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.9);
}

.title-deed-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border-radius: 8px;
  color: var(--deed-accent, var(--blue-800));
  background: color-mix(in srgb, var(--deed-accent, var(--blue-800)), #fff 88%);
  font-weight: 950;
}

.title-deed-download:disabled {
  opacity: 0.68;
}

.identity-card {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 16px;
  min-height: 560px;
  aspect-ratio: 9 / 16;
  width: min(100%, 320px);
  justify-self: center;
  overflow: hidden;
  padding: 22px;
  border-radius: 18px;
  color: #fff;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--identity-accent), transparent 78%), rgba(6, 31, 69, 0.42)),
    var(--identity-cover) center/cover,
    linear-gradient(180deg, color-mix(in srgb, var(--identity-accent), #000 10%), #061f45);
  box-shadow: 0 22px 44px rgba(16, 32, 51, 0.18);
}

.identity-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.12));
  pointer-events: none;
}

.identity-card-glow {
  position: absolute;
  inset-inline: -30%;
  top: -20%;
  height: 48%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 62%);
  pointer-events: none;
}

.identity-card-top,
.identity-card-middle,
.identity-qr-box,
.identity-card-footer {
  position: relative;
  z-index: 1;
}

.identity-card-top {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
}

.identity-logo {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, 0.88);
  border-radius: 20px;
  color: var(--identity-accent);
  background: #fff center/cover no-repeat;
  font-size: 1.45rem;
  font-weight: 950;
}

.identity-logo.has-image {
  color: transparent;
}

.identity-card small,
.identity-card p,
.identity-card span {
  color: rgba(255, 255, 255, 0.88);
}

.identity-card h3 {
  margin: 4px 0;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 950;
}

.identity-card-middle {
  display: grid;
  gap: 8px;
}

.identity-card-middle span {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--identity-accent);
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.72rem;
  font-weight: 950;
}

.identity-card-middle strong {
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.identity-qr-box {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  text-align: center;
}

.identity-qr-box img {
  width: min(100%, 190px);
  aspect-ratio: 1;
  height: auto;
  padding: 8px;
  border: 1px solid rgba(226, 233, 242, 0.9);
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
}

.identity-qr-box span {
  color: #43546b;
  font-size: 0.74rem;
  font-weight: 900;
}

.identity-qr-box strong {
  display: block;
  margin-top: 4px;
  color: var(--identity-accent);
  font-size: 0.82rem;
  font-weight: 950;
}

.identity-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.identity-card-footer strong {
  color: #fff;
  font-size: 1.12rem;
  font-weight: 950;
}

.identity-card-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border-radius: 8px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-weight: 950;
}

.identity-card-download:disabled {
  opacity: 0.68;
}

.sale-transfer-section,
.admin-transfer-box,
.seller-transfer-alert,
.transfer-request-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(226, 233, 242, 0.9);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(16, 32, 51, 0.08);
}

.seller-transfer-alert {
  border-color: rgba(216, 107, 53, 0.36);
  background: linear-gradient(180deg, #fff8f1, #fff);
  box-shadow: 0 18px 36px rgba(216, 107, 53, 0.12);
}

.seller-transfer-alert-head {
  display: grid;
  gap: 7px;
}

.seller-transfer-alert-head strong {
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 950;
  line-height: 1.35;
}

.seller-transfer-alert-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.55;
}

.admin-transfer-box {
  background: #f8fbff;
  border-color: #dbe6f5;
  box-shadow: none;
}

.sale-workflow-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.sale-workflow-steps span {
  display: grid;
  min-height: 38px;
  place-items: center;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--muted);
  background: #f5f8fc;
  font-size: 0.68rem;
  font-weight: 950;
  text-align: center;
}

.sale-workflow-steps .is-active {
  color: #075c54;
  background: #d5faf4;
}

.sale-summary-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid #cfe9e5;
  border-radius: 8px;
  background: #f3fffc;
}

.sale-summary-card.is-muted {
  border-color: #dbe6f5;
  background: #f8fbff;
}

.sale-summary-card h3,
.transfer-request-head strong,
.admin-transfer-head strong {
  margin: 0;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 950;
  line-height: 1.35;
}

.sale-summary-card p,
.sale-summary-card small,
.transfer-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.55;
}

.sale-withdraw-button {
  min-height: 44px;
  border-radius: 8px;
  color: #7a3b03;
  background: #fff0d7;
}

.transfer-request-head,
.admin-transfer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.transfer-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.transfer-info-grid span {
  display: grid;
  gap: 4px;
  min-height: 58px;
  align-content: center;
  padding: 9px;
  border-radius: 8px;
  background: #f5f8fc;
}

.transfer-info-grid small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
}

.transfer-info-grid strong {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sale-actions,
.admin-transfer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sale-actions .is-danger,
.admin-transfer-actions button[data-admin-action="reject-transfer"] {
  color: #b42318;
  background: #fff1f0;
}

.admin-transfer-actions button[data-admin-action="approve-transfer"] {
  color: #075c54;
  background: #d5faf4;
}

.transfer-lock-note {
  padding: 9px 10px;
  border-radius: 8px;
  background: #fff7e8;
}

.owner-shop-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.owner-shop-actions:has(button:only-child) {
  grid-template-columns: 1fr;
}

.owner-shop-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border-radius: 8px;
  color: #fff;
  background: var(--blue-800);
  font-weight: 950;
}

.owner-shop-actions .secondary-action {
  color: var(--blue-800);
  background: var(--blue-100);
}

.bottom-nav {
  position: fixed;
  right: 50%;
  bottom: 12px;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  width: min(calc(100% - 20px), 440px);
  padding: 8px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 233, 242, 0.9);
  box-shadow: 0 18px 46px rgba(16, 32, 51, 0.16);
  transform: translateX(50%);
  backdrop-filter: blur(16px);
}

.bottom-nav button {
  display: grid;
  min-width: 0;
  min-height: 58px;
  place-items: center;
  gap: 3px;
  border: 0;
  border-radius: 16px;
  color: #79879a;
  background: transparent;
  font-size: 0.63rem;
  font-weight: 900;
}

.bottom-nav button i {
  width: 21px;
  height: 21px;
}

.bottom-nav-icon,
.bottom-nav-icon i,
.bottom-nav-icon svg {
  display: inline-grid;
  width: 21px;
  height: 21px;
  place-items: center;
}

.bottom-nav button span {
  max-width: 100%;
  overflow: hidden;
  line-height: 1.12;
  text-align: center;
  white-space: normal;
}

.bottom-nav .reserve-tab span {
  max-width: 3.5rem;
}

.bottom-nav .is-active {
  color: var(--blue-800);
  background: var(--blue-100);
}

.bottom-nav .reserve-tab {
  color: #fff;
  background: linear-gradient(145deg, var(--blue-950), var(--blue-700));
  box-shadow: 0 10px 24px rgba(20, 87, 197, 0.24);
}

.bottom-nav .reserve-tab.is-active {
  color: #fff;
}

i[data-lucide] {
  width: 19px;
  height: 19px;
  stroke-width: 2.25;
}

@media (max-width: 420px) {
  .payment-bank-brand {
    padding: 12px;
  }

  .payment-bank-brand img {
    width: min(280px, 100%);
    height: 76px;
  }

  .payment-bank-brand span {
    font-size: 1.65rem;
  }

  .payment-qr-card {
    padding: 12px;
  }

  .payment-qr-card img {
    width: min(270px, 100%);
  }

  .market-type-grid,
  .admin-place-form,
  .admin-payment-form {
    grid-template-columns: 1fr;
  }

  .admin-stats,
  .payment-mini-grid,
  .admin-payment-meta,
  .admin-payment-actions,
  .sale-money-grid,
  .sale-buyer-form,
  .sale-listing-form,
  .agreement-field-grid,
  .agreement-proof-fields,
  .sale-flow-steps,
  .sale-workflow-steps,
  .transfer-info-grid,
  .sale-actions,
  .admin-transfer-actions,
  .resale-card,
  .resale-price-row,
  .auction-info-grid,
  .auction-bid-form,
  .resale-actions,
  .account-signal-grid,
  .account-meta,
  .owner-shop-actions {
    grid-template-columns: 1fr;
  }

  .buyer-account-card {
    grid-template-columns: 1fr;
  }

  .buyer-account-card em {
    grid-column: 1;
    grid-row: auto;
    width: fit-content;
    max-width: 100%;
  }

  .resale-card-media {
    min-height: 170px;
  }

  .details-documents-actions {
    min-width: 142px;
  }

  .account-status-head,
  .account-section-head {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
  }

  .account-status-head .approval-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .building-level {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .building-level-capacity {
    justify-self: center;
  }

  .industrial-map {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(164px, auto) minmax(188px, auto) minmax(236px, auto);
    min-height: 0;
  }

  .industrial-square.is-square-first {
    grid-row: auto;
  }

  .owner-qr-panel,
  .title-deed-body,
  .title-deed-footer {
    grid-template-columns: 1fr;
  }

  .owner-qr-panel img,
  .title-deed-qr {
    justify-self: center;
  }
}

@media (min-width: 760px) {
  .app-shell:has(#reserve-screen.is-active) {
    width: min(100%, 920px);
  }

  .app-shell:has(#reserve-screen.is-active .creator-form[data-current-step="3"]) {
    width: min(100%, 1180px);
  }

  .creator-form[data-current-step="3"] {
    grid-template-columns: minmax(360px, 1fr) minmax(300px, 360px);
    align-items: start;
    gap: 14px;
  }

  .creator-form[data-current-step="3"] .creator-progress,
  .creator-form[data-current-step="3"] .creator-actions {
    grid-column: 1 / -1;
  }

  .creator-form[data-current-step="3"] .design-step {
    grid-column: 2;
    order: 3;
    position: sticky;
    top: 86px;
    max-height: calc(100dvh - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .creator-form[data-current-step="3"] .design-editor-nav {
    top: 0;
  }

  .creator-form[data-current-step="3"] .creator-live-preview {
    grid-column: 1;
    order: 2;
    position: sticky;
    top: 86px;
    align-self: start;
    max-height: none;
    overflow: hidden;
  }

  .creator-form[data-current-step="3"] .creator-live-preview .live-preview-cover {
    min-height: 260px;
  }

  .creator-form[data-current-step="3"] .creator-live-preview .live-preview-body {
    padding: 16px;
  }

  .creator-form[data-current-step="3"] .creator-live-preview .live-preview-products {
    gap: 10px;
  }

  .creator-form[data-current-step="3"] .creator-actions {
    position: static;
    bottom: auto;
    z-index: 1;
  }

  .app-shell:has(#reserve-screen.is-active) .bottom-nav {
    display: none;
  }
}

@media (min-width: 900px) {
  body {
    padding: 24px;
  }

  .app-shell,
  .app-shell:has(#reserve-screen.is-active) {
    width: min(100%, 1180px);
    min-height: calc(100vh - 48px);
  }

  .app-header {
    padding: 24px 28px 30px;
  }

  .topbar,
  .hero,
  #home-screen.is-active,
  .screen:not(#home-screen).is-active > .content-band,
  .screen:not(#home-screen).is-active > .subpage-bar,
  .account-page,
  .my-shop-panel,
  .edit-shop-panel,
  .approval-page,
  .admin-gate,
  .admin-dashboard {
    max-width: 1120px;
    margin-inline: auto;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: center;
    gap: 28px;
    padding-top: 36px;
  }

  .hero-copy {
    max-width: 44rem;
  }

  .hero h1 {
    font-size: 3.35rem;
  }

  .hero p:not(.eyebrow) {
    max-width: 36rem;
    font-size: 1rem;
  }

  .hero-preview {
    min-height: 300px;
    align-content: center;
  }

  main {
    padding-bottom: 112px;
  }

  #home-screen.is-active {
    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.6fr);
    gap: 18px;
    align-items: start;
    padding: 20px 24px 122px;
  }

  #home-screen > .content-band {
    padding: 0;
  }

  .home-intro-band {
    grid-column: 1;
    gap: 12px;
    position: sticky;
    top: 20px;
  }

  #shops-section {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .home-guide-band {
    grid-column: 1;
    grid-row: 2;
  }

  .home-search-shop-grid,
  .home-search-product-grid,
  .home-guide-grid {
    grid-template-columns: 1fr;
  }

  .home-board-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .home-board-grid .shop-card.is-first-floor {
    grid-column: 1 / -1;
  }

  .home-board-grid .shop-card.is-first-floor .shop-image {
    aspect-ratio: 2.75;
  }

  .shop-place-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .market-place-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-shop-results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bottom-nav {
    width: min(560px, calc(100% - 64px));
  }
}

@media (min-width: 430px) {
  .hero {
    grid-template-columns: 1fr 158px;
    align-items: end;
  }

  .hero-preview {
    align-self: end;
  }
}

@media (min-width: 720px) {
  body {
    padding: 20px 0;
  }

  .app-shell {
    min-height: calc(100vh - 40px);
    border-radius: 28px;
  }
}

@media (min-width: 900px) {
  body {
    padding: 24px;
  }

  .app-shell,
  .app-shell:has(#reserve-screen.is-active) {
    width: min(100%, 1180px);
    min-height: calc(100vh - 48px);
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
  }

  .hero-preview {
    min-height: 300px;
    align-self: center;
  }
}

/* Clarity pass for larger phone and desktop reading. */
.app-shell {
  width: min(100%, 520px);
}

.app-header {
  padding: 18px 18px 22px;
}

.brand-name {
  font-size: 1.3rem;
}

.location-chip,
.icon-button {
  min-width: 44px;
  height: 44px;
}

.language-menu-button {
  min-width: 68px;
}

.hero h1 {
  font-size: clamp(2.15rem, 8vw, 3rem);
}

.hero p:not(.eyebrow) {
  font-size: 0.98rem;
}

.primary-action,
.secondary-action,
.submit-button,
.contact-button {
  min-height: 52px;
  padding-inline: 18px;
  font-size: 0.96rem;
}

.content-band,
.my-shop-panel {
  padding-inline: 18px;
}

.section-heading h2,
.subpage-bar h1,
.rent-hero h2 {
  font-size: 1.26rem;
}

.eyebrow,
.section-kicker {
  font-size: 0.86rem;
  font-weight: 900;
}

.home-intro-band {
  gap: 12px;
}

.home-type-choice {
  gap: 10px;
}

.home-type-choice button {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 11px;
  min-height: 90px;
  padding: 14px;
}

.home-type-choice i {
  width: 46px;
  height: 46px;
  padding: 10px;
}

.home-type-choice strong {
  font-size: 0.98rem;
}

.home-type-choice small {
  font-size: 0.78rem;
}

.home-search-card,
.home-market-panel,
.resale-market.is-compact {
  gap: 12px;
  padding: 14px;
}

.home-search-head h3,
.market-browser-lead h3,
.market-selected-head h3,
.market-results-head h3 {
  font-size: 1.1rem;
}

.home-search-field {
  min-height: 54px;
  grid-template-columns: 28px 1fr;
}

.home-search-field input {
  font-size: 0.95rem;
}

.home-search-quick,
.home-search-summary,
.home-search-hint,
.market-browser-lead span,
.market-selected-head span {
  font-size: 0.82rem;
}

.home-search-quick button {
  min-height: 36px;
  padding-inline: 11px;
  font-size: 0.78rem;
}

.home-board-grid,
.shop-grid,
.market-shop-results,
.resale-market-grid {
  gap: 14px;
}

.shop-card {
  border-color: rgba(203, 216, 234, 0.95);
  box-shadow: 0 14px 32px rgba(16, 32, 51, 0.1);
}

.shop-image {
  aspect-ratio: 1.08;
}

.shop-status,
.shop-board-label,
.shop-views,
.mini-chip {
  min-height: 28px;
  padding-inline: 10px;
  font-size: 0.76rem;
}

.shop-body {
  padding: 12px;
}

.shop-body strong {
  font-size: 1.08rem;
  line-height: 1.3;
}

.shop-body p {
  font-size: 0.84rem;
}

.market-empty-state,
.resale-empty {
  min-height: 180px;
  padding: 24px;
}

.market-empty-state i,
.resale-empty i {
  width: 42px;
  height: 42px;
}

.market-empty-state strong,
.resale-empty strong {
  font-size: 1.08rem;
}

.market-empty-state p,
.resale-empty span {
  font-size: 0.86rem;
}

.resale-card {
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
}

.resale-card-media {
  min-height: 178px;
}

.resale-card-body {
  gap: 11px;
}

.resale-card-head strong {
  font-size: 1.12rem;
}

.resale-card-head span,
.resale-note {
  font-size: 0.84rem;
}

.resale-card-head em {
  font-size: 0.76rem;
}

.resale-price-row,
.auction-info-grid {
  gap: 9px;
}

.resale-price-row span,
.auction-info-grid span,
.transfer-info-grid span {
  min-height: 66px;
  padding: 10px;
}

.resale-price-row small,
.auction-info-grid small,
.transfer-info-grid small {
  font-size: 0.74rem;
}

.resale-price-row strong,
.auction-info-grid strong,
.transfer-info-grid strong {
  font-size: 0.92rem;
}

.auction-timer {
  min-height: 46px;
  font-size: 0.86rem;
}

.auction-signin-gate,
.buyer-account-gate,
.buyer-account-card,
.sale-summary-card,
.owner-shop-card,
.owner-document-card {
  padding: 16px;
}

.auction-signin-gate > span,
.buyer-account-gate span,
.sale-summary-card h3,
.transfer-request-head strong,
.admin-transfer-head strong {
  font-size: 1.06rem;
}

.auction-signin-gate p,
.buyer-account-gate p,
.sale-summary-card p,
.sale-summary-card small,
.transfer-note {
  font-size: 0.86rem;
}

.buyer-account-card strong {
  font-size: 1.02rem;
}

.buyer-account-card em {
  min-height: 42px;
  font-size: 0.94rem;
}

.auction-bid-form,
.sale-buyer-form,
.sale-listing-form,
.agreement-service-form,
.agreement-field-grid,
.agreement-proof-form {
  gap: 10px;
}

.agreement-entry-card {
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  min-height: 148px;
  padding: 14px;
}

.agreement-entry-copy strong {
  font-size: 1.08rem;
}

.agreement-entry-copy small {
  font-size: 0.8rem;
}

.agreement-entry-side {
  grid-column: 2;
  grid-template-columns: auto auto;
  justify-content: start;
}

.agreement-doc-preview {
  width: 68px;
  height: 92px;
  padding: 10px 8px;
}

.agreement-doc-preview.is-large {
  width: 86px;
  height: 112px;
}

.agreement-page-hero {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.agreement-route-loading {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.agreement-page-hero h2 {
  font-size: 1.12rem;
}

.agreement-route-loading h2 {
  font-size: 1.08rem;
}

.agreement-card-toggle {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  min-height: 82px;
  padding: 12px;
}

.agreement-card-icon {
  width: 42px;
  height: 42px;
}

.agreement-toggle-icon {
  display: none;
}

.agreement-form-shell {
  padding: 12px;
}

.auction-bid-form label span,
.sale-buyer-form label span,
.sale-listing-form label span,
.agreement-service-form label span {
  font-size: 0.82rem;
}

.auction-bid-form input,
.sale-buyer-form input,
.sale-buyer-form textarea,
.sale-listing-form input,
.sale-listing-form select,
.sale-listing-form textarea,
.agreement-service-form input,
.agreement-service-form select,
.agreement-service-form textarea {
  min-height: 52px;
  padding: 12px;
  font-size: 0.94rem;
}

.auction-bid-form button,
.auction-closed-button,
.resale-actions button,
.resale-actions a,
.sale-buyer-form button,
.sale-listing-form button,
.agreement-service-form button,
.agreement-proof-form button,
.agreement-payment-actions button,
.sale-actions button,
.admin-transfer-actions button {
  min-height: 52px;
  font-size: 0.9rem;
}

.sale-owner-toggle {
  min-height: 98px;
  padding: 16px;
}

.sale-owner-toggle strong {
  font-size: 1.08rem;
}

.sale-owner-toggle small {
  font-size: 0.84rem;
}

.sale-workflow-steps span {
  min-height: 46px;
  font-size: 0.78rem;
}

.owner-shop-card {
  gap: 16px;
}

.owner-shop-head h2 {
  font-size: 1.2rem;
}

.owner-shop-head p,
.owner-shop-meta span {
  font-size: 0.9rem;
}

.owner-shop-cover {
  min-height: 168px;
}

.owner-shop-cover img {
  height: 168px;
}

.bottom-nav {
  width: min(calc(100% - 18px), 500px);
}

.bottom-nav button {
  min-height: 62px;
  font-size: 0.68rem;
}

@media (max-width: 420px) {
  .app-header {
    padding: 14px 14px 16px;
  }

  .brand {
    min-height: 42px;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .brand-mark img {
    border-radius: 10px;
  }

  .brand-name {
    font-size: 1.14rem;
  }

  .location-chip,
  .icon-button {
    min-width: 42px;
    height: 42px;
  }

  .language-menu-button {
    min-width: 64px;
  }

  .hero {
    gap: 10px;
    padding-top: 14px;
  }

  .hero h1 {
    margin-block: 5px 7px;
    font-size: 2.05rem;
  }

  .hero p:not(.eyebrow) {
    max-width: 100%;
    font-size: 0.84rem;
    line-height: 1.48;
  }

  .hero-note {
    min-height: 30px;
    margin-top: 8px;
    font-size: 0.74rem;
  }

  .hero-actions {
    gap: 8px;
    margin-top: 10px;
  }

  .primary-action,
  .secondary-action,
  .submit-button,
  .contact-button {
    min-height: 46px;
    padding-inline: 14px;
    font-size: 0.88rem;
  }

  .hero-preview {
    display: none;
  }

  .content-band {
    padding-top: 16px;
  }

  .home-type-choice button {
    min-height: 84px;
  }

  .shop-card.is-first-floor {
    min-height: 500px;
  }

  .shop-card.is-first-floor .shop-image {
    min-height: 360px;
    aspect-ratio: auto;
  }

  .shop-card.is-first-floor .shop-body {
    min-height: 140px;
  }

  .home-board-grid,
  .shop-grid,
  .market-shop-results {
    grid-template-columns: 1fr;
  }

  .resale-card {
    grid-template-columns: 1fr;
  }

  .resale-card-media {
    min-height: 220px;
  }
}

@media (min-width: 900px) {
  .app-shell,
  .app-shell:has(#reserve-screen.is-active) {
    width: min(100%, 1240px);
  }

  .app-header {
    padding: 32px 36px 38px;
  }

  .topbar,
  .hero,
  #home-screen.is-active,
  .screen:not(#home-screen).is-active > .content-band,
  .screen:not(#home-screen).is-active > .subpage-bar,
  .account-page,
  .my-shop-panel,
  .edit-shop-panel,
  .approval-page,
  .admin-gate,
  .admin-dashboard {
    max-width: 1160px;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 34px;
  }

  .hero h1 {
    font-size: 3.8rem;
  }

  .hero p:not(.eyebrow) {
    font-size: 1.08rem;
  }

  #home-screen.is-active {
    grid-template-columns: minmax(360px, 0.8fr) minmax(0, 1.7fr);
    gap: 24px;
    padding: 26px 32px 132px;
  }

  .home-type-choice {
    grid-template-columns: 1fr;
  }

  .home-board-grid,
  .market-shop-results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .home-board-grid .shop-card.is-first-floor {
    grid-column: auto;
  }

  .home-board-grid .shop-card.is-first-floor .shop-image {
    aspect-ratio: 1.08;
  }

  .resale-market-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .resale-card {
    grid-template-columns: 190px minmax(0, 1fr);
    padding: 18px;
  }

  .resale-card-media {
    min-height: 230px;
  }

  .my-shop-panel {
    gap: 18px;
    padding-block: 24px;
  }

  .owner-shop-cover {
    min-height: 220px;
  }

  .owner-shop-cover img {
    height: 220px;
  }

  .edit-design-workspace {
    grid-template-columns: minmax(320px, 0.82fr) minmax(380px, 1.18fr);
    align-items: start;
  }

  .edit-shop-live-preview {
    position: sticky;
    top: 96px;
  }

  .bottom-nav {
    width: min(640px, calc(100% - 64px));
  }
}

/* Premium 3D shop boards. */
.home-board-grid,
.market-shop-results,
.shop-place-row {
  align-items: stretch;
  perspective: 1200px;
}

.shop-card {
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(112px, 1fr);
  overflow: hidden;
  border: 1px solid rgba(178, 199, 228, 0.92);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 250, 255, 0.98)),
    #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 42px rgba(8, 36, 95, 0.14),
    0 5px 12px rgba(16, 32, 51, 0.08);
  transform: translateZ(0);
  transform-style: preserve-3d;
  transition:
    transform 190ms ease,
    border-color 190ms ease,
    box-shadow 190ms ease;
}

.shop-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55), transparent 28%),
    linear-gradient(315deg, rgba(242, 167, 66, 0.12), transparent 38%);
}

.shop-card:focus-visible {
  outline: 3px solid rgba(20, 87, 197, 0.28);
  outline-offset: 3px;
}

.shop-card:active {
  transform: translateY(1px) scale(0.995);
}

.shop-image {
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  background:
    linear-gradient(135deg, #edf5ff, #d5e4f7),
    #dbe8f8;
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.8) inset,
    0 -18px 34px rgba(8, 36, 95, 0.12) inset;
}

.shop-image img {
  position: relative;
  z-index: 0;
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.025);
  transition: transform 260ms ease, filter 260ms ease;
}

.shop-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.34), transparent 24%, transparent 72%, rgba(255, 255, 255, 0.16)),
    linear-gradient(180deg, rgba(8, 36, 95, 0.05), rgba(8, 36, 95, 0.18));
}

.shop-image::after {
  z-index: 1;
  background: linear-gradient(180deg, transparent 34%, rgba(8, 36, 95, 0.58));
}

.shop-status,
.shop-board-label,
.shop-views {
  z-index: 3;
  min-height: 31px;
  padding-inline: 11px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  box-shadow: 0 10px 24px rgba(8, 36, 95, 0.16);
  backdrop-filter: blur(12px);
}

.shop-board-label {
  color: #08245f;
  background: linear-gradient(135deg, #fff, #fff3da);
}

.shop-views {
  background: rgba(8, 36, 95, 0.86);
}

.shop-body {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98));
}

.shop-body strong {
  color: #071f46;
  font-size: 1.12rem;
  line-height: 1.28;
  letter-spacing: 0;
}

.shop-body p {
  color: #52657f;
  font-size: 0.88rem;
  line-height: 1.55;
  font-weight: 850;
}

.shop-card.is-first-floor {
  grid-column: 1 / -1;
  border-color: rgba(20, 87, 197, 0.38);
  background:
    linear-gradient(180deg, #fff, #f3f8ff),
    #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.94) inset,
    0 24px 62px rgba(8, 36, 95, 0.2),
    0 8px 18px rgba(16, 32, 51, 0.1);
}

.shop-card.is-first-floor .shop-image {
  aspect-ratio: 1.55;
}

.shop-card.is-first-floor .shop-body {
  min-height: 126px;
  padding: 16px;
}

.shop-card.is-first-floor .shop-body strong {
  font-size: 1.34rem;
}

.shop-card.is-first-floor .shop-body p {
  font-size: 0.96rem;
}

@media (hover: hover) and (pointer: fine) {
  .shop-card:hover {
    border-color: rgba(20, 87, 197, 0.5);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.94) inset,
      0 28px 72px rgba(8, 36, 95, 0.22),
      0 10px 22px rgba(16, 32, 51, 0.12);
    transform: translateY(-6px) rotateX(2deg) rotateY(-1.5deg);
  }

  .shop-card:hover .shop-image img {
    filter: saturate(1.16) contrast(1.08);
    transform: scale(1.075);
  }
}

@media (min-width: 760px) {
  .shop-card.is-first-floor {
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.75fr);
    grid-template-rows: 1fr;
    min-height: 286px;
  }

  .shop-card.is-first-floor .shop-image {
    height: 100%;
    min-height: 286px;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .shop-card.is-first-floor .shop-body {
    min-height: 100%;
    align-content: end;
    padding: 22px;
  }

  .shop-card.is-first-floor .shop-body strong {
    font-size: 1.55rem;
  }

  .shop-card.is-first-floor .shop-body p {
    font-size: 1rem;
  }
}

@media (min-width: 900px) {
  .home-board-grid .shop-card.is-first-floor,
  .market-shop-results .shop-card.is-first-floor,
  .shop-place-row .shop-card.is-first-floor {
    grid-column: 1 / -1;
  }

  .home-board-grid .shop-card.is-first-floor .shop-image {
    aspect-ratio: auto;
    min-height: 300px;
  }

  .home-board-grid .shop-card.is-first-floor {
    min-height: 300px;
  }
}

/* Desktop marketplace structure and richer board colors. */
.shop-card:nth-child(6n + 1) {
  --card-accent: #1457c5;
  --card-accent-2: #18a999;
  --card-soft: #e8f2ff;
  --card-glow: rgba(20, 87, 197, 0.24);
}

.shop-card:nth-child(6n + 2) {
  --card-accent: #0f8f84;
  --card-accent-2: #f2a742;
  --card-soft: #e7fbf6;
  --card-glow: rgba(24, 169, 153, 0.22);
}

.shop-card:nth-child(6n + 3) {
  --card-accent: #d86b35;
  --card-accent-2: #1457c5;
  --card-soft: #fff1e5;
  --card-glow: rgba(216, 107, 53, 0.22);
}

.shop-card:nth-child(6n + 4) {
  --card-accent: #2f6f55;
  --card-accent-2: #f2a742;
  --card-soft: #eaf8ef;
  --card-glow: rgba(47, 111, 85, 0.2);
}

.shop-card:nth-child(6n + 5) {
  --card-accent: #7a4cc2;
  --card-accent-2: #18a999;
  --card-soft: #f0ebff;
  --card-glow: rgba(122, 76, 194, 0.2);
}

.shop-card:nth-child(6n) {
  --card-accent: #9c3d5b;
  --card-accent-2: #f2a742;
  --card-soft: #fff0f4;
  --card-glow: rgba(156, 61, 91, 0.2);
}

.shop-card {
  border-color: color-mix(in srgb, var(--card-accent, var(--blue-700)), #ffffff 68%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(249, 252, 255, 0.98)),
    linear-gradient(135deg, var(--card-soft, #e8f2ff), #ffffff);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.94) inset,
    0 20px 46px var(--card-glow, rgba(20, 87, 197, 0.18)),
    0 8px 18px rgba(16, 32, 51, 0.08);
}

.shop-card::after {
  content: "";
  position: absolute;
  inset-block-start: 12px;
  inset-inline: 14px;
  z-index: 4;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--card-accent, var(--blue-700)), var(--card-accent-2, var(--teal)));
  box-shadow: 0 10px 22px var(--card-glow, rgba(20, 87, 197, 0.18));
  pointer-events: none;
}

.shop-image {
  background:
    linear-gradient(135deg, var(--card-soft, #edf5ff), #ffffff),
    #dbe8f8;
}

.shop-image::before {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--card-accent, var(--blue-700)), transparent 74%), transparent 28%, transparent 68%, rgba(255, 255, 255, 0.18)),
    linear-gradient(180deg, rgba(8, 36, 95, 0.02), color-mix(in srgb, var(--card-accent, var(--blue-700)), rgba(8, 36, 95, 0.34) 36%));
}

.shop-body::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 14px;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, var(--card-accent, var(--blue-700)), var(--card-accent-2, var(--teal)));
}

.shop-status.available,
.shop-status.featured,
.shop-status.for-sale,
.shop-status.rented {
  border-color: rgba(255, 255, 255, 0.76);
}

.shop-card .shop-status {
  color: color-mix(in srgb, var(--card-accent, var(--blue-800)), #071f46 24%);
  background: color-mix(in srgb, var(--card-soft, var(--blue-100)), #ffffff 22%);
}

.shop-card .shop-board-label {
  color: #071f46;
  background: linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--card-accent-2, var(--amber)), #ffffff 72%));
}

@media (min-width: 900px) {
  .app-shell,
  .app-shell:has(#reserve-screen.is-active) {
    width: min(100%, 1280px);
  }

  .app-header {
    padding: 20px 32px 20px;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 18px;
  }

  .hero h1 {
    margin-block: 6px 8px;
    font-size: 2.75rem;
  }

  .hero p:not(.eyebrow) {
    font-size: 0.96rem;
    line-height: 1.55;
  }

  .hero-note {
    min-height: 32px;
    margin-top: 10px;
    font-size: 0.78rem;
  }

  .hero-actions {
    margin-top: 12px;
  }

  .hero-actions .primary-action,
  .hero-actions .secondary-action {
    min-height: 46px;
    padding-inline: 16px;
    font-size: 0.9rem;
  }

  .hero-preview {
    display: none;
  }

  .topbar,
  .hero,
  #home-screen.is-active,
  .screen:not(#home-screen).is-active > .content-band,
  .screen:not(#home-screen).is-active > .subpage-bar,
  .account-page,
  .my-shop-panel,
  .edit-shop-panel,
  .approval-page,
  .admin-gate,
  .admin-dashboard {
    max-width: 1180px;
  }

  #home-screen.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 22px 28px 132px;
  }

  #home-screen > .content-band {
    padding: 0;
  }

  .home-intro-band {
    position: static;
    top: auto;
    order: 1;
    grid-column: 1;
    grid-row: auto;
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(420px, 1.35fr);
    gap: 16px;
    align-items: stretch;
    padding: 14px;
    border: 1px solid rgba(178, 199, 228, 0.86);
    border-radius: 20px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 247, 255, 0.96)),
      linear-gradient(135deg, rgba(20, 87, 197, 0.12), rgba(24, 169, 153, 0.1));
    box-shadow: 0 18px 46px rgba(8, 36, 95, 0.1);
  }

  .home-type-choice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .home-type-choice button {
    min-height: 88px;
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(8, 36, 95, 0.09);
  }

  .home-type-choice i {
    width: 42px;
    height: 42px;
  }

  .home-type-choice strong {
    font-size: 0.94rem;
  }

  .home-type-choice small {
    font-size: 0.74rem;
  }

  .home-type-choice button:first-child {
    border-color: rgba(20, 87, 197, 0.32);
    background: linear-gradient(135deg, #ffffff, #e8f2ff);
  }

  .home-type-choice button:last-child {
    border-color: rgba(24, 169, 153, 0.32);
    background: linear-gradient(135deg, #ffffff, #e7fbf6);
  }

  .home-search-panel,
  .home-search-card {
    min-width: 0;
    height: 100%;
  }

  .home-search-card {
    border-radius: 18px;
    padding: 12px;
    background:
      linear-gradient(180deg, #ffffff, #f7fbff),
      linear-gradient(135deg, rgba(242, 167, 66, 0.13), rgba(20, 87, 197, 0.08));
    box-shadow: 0 14px 34px rgba(16, 32, 51, 0.08);
  }

  .home-search-field {
    min-height: 48px;
  }

  .home-guide-band {
    order: 2;
    grid-column: 1;
    grid-row: auto;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(178, 199, 228, 0.82);
    border-radius: 18px;
    background:
      linear-gradient(135deg, #ffffff, #f7fbff),
      linear-gradient(135deg, rgba(216, 107, 53, 0.08), rgba(24, 169, 153, 0.08));
    box-shadow: 0 14px 34px rgba(8, 36, 95, 0.08);
  }

  .home-guide-band .section-heading {
    align-items: flex-start;
  }

  .home-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .home-guide-grid article {
    min-height: 60px;
    padding: 12px;
    border-radius: 16px;
    background:
      linear-gradient(135deg, #ffffff, #f6fbff),
      linear-gradient(135deg, rgba(20, 87, 197, 0.08), rgba(24, 169, 153, 0.08));
    box-shadow: 0 10px 24px rgba(16, 32, 51, 0.06);
  }

  #shops-section {
    order: 3;
    grid-column: 1;
    grid-row: auto;
    padding: 18px;
    border: 1px solid rgba(178, 199, 228, 0.82);
    border-radius: 22px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 255, 0.96)),
      linear-gradient(135deg, rgba(20, 87, 197, 0.08), rgba(242, 167, 66, 0.08));
    box-shadow: 0 20px 54px rgba(8, 36, 95, 0.1);
  }

  #shops-section .section-heading {
    align-items: flex-end;
    padding-bottom: 4px;
  }

  .home-board-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .market-shop-results,
  .shop-place-row {
    gap: 18px;
  }

  .home-board-grid .shop-card.is-first-floor,
  .market-shop-results .shop-card.is-first-floor,
  .shop-place-row .shop-card.is-first-floor {
    grid-column: 1 / -1;
  }

  .home-board-grid .shop-card.is-first-floor,
  .home-board-grid .shop-card.is-first-floor .shop-image {
    min-height: 340px;
  }

  .bottom-nav {
    width: min(660px, calc(100% - 64px));
  }
}

/* Locked shop identity fields and richer public boards. */
.edit-location-lock {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(20, 87, 197, 0.2);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 242, 255, 0.94)),
    linear-gradient(135deg, rgba(20, 87, 197, 0.1), rgba(24, 169, 153, 0.08));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.94) inset,
    0 14px 30px rgba(8, 36, 95, 0.08);
}

.edit-location-lock > i {
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: 14px;
  color: var(--blue-800);
  background: #fff;
  box-shadow: 0 10px 22px rgba(8, 36, 95, 0.1);
}

.edit-location-lock strong {
  display: block;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 950;
}

.edit-location-lock p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.55;
}

.edit-location-lock > span {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding-inline: 12px;
  border-radius: 12px;
  color: var(--blue-800);
  background: #fff;
  font-size: 0.76rem;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(178, 199, 228, 0.66);
}

.edit-floor-card.is-locked {
  cursor: default;
}

.edit-floor-card.is-locked input {
  pointer-events: none;
}

.edit-floor-card.is-locked:not(.is-selected) {
  opacity: 0.68;
  background: #f7f9fd;
}

.edit-floor-card.is-selected::after {
  content: "مثبت";
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  min-height: 24px;
  padding-inline: 9px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-800), var(--teal));
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 24px;
}

.shop-card {
  grid-template-rows: minmax(188px, auto) auto;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--card-soft, #e8f2ff), #ffffff 48%)),
    #fff;
}

.shop-card::after {
  inset-inline: 16px;
  height: 5px;
}

.shop-image {
  min-height: 188px;
  border-radius: 0;
}

.shop-body {
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  align-content: center;
  gap: 12px;
  min-height: 88px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), color-mix(in srgb, var(--card-soft, #e8f2ff), #ffffff 36%)),
    #fff;
}

.shop-card-logo {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 16px;
  color: #fff;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.34), transparent 30%),
    linear-gradient(135deg, var(--card-accent, var(--blue-800)), var(--card-accent-2, var(--teal)));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 14px 30px var(--card-glow, rgba(20, 87, 197, 0.18));
  font-size: 1.4rem;
  font-weight: 950;
}

.shop-card-logo.has-image {
  padding: 3px;
  background: #fff;
}

.shop-card-logo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 13px;
  object-fit: cover;
}

.shop-card-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.shop-card-copy strong,
.shop-body strong {
  color: #061b3f;
  font-size: 1.08rem;
  line-height: 1.28;
}

.shop-card-copy p,
.shop-body p {
  margin: 0;
  color: #4e617b;
  font-size: 0.84rem;
  line-height: 1.48;
}

.shop-card.is-first-floor {
  grid-template-rows: minmax(238px, auto) auto;
}

.shop-card.is-first-floor .shop-image {
  min-height: 238px;
}

.shop-card.is-first-floor .shop-body {
  grid-template-columns: 64px minmax(0, 1fr);
  min-height: 104px;
}

.shop-card.is-first-floor .shop-card-logo {
  width: 64px;
  height: 64px;
  border-radius: 19px;
  font-size: 1.65rem;
}

.shop-card.is-first-floor .shop-card-logo img {
  border-radius: 16px;
}

.shop-card.is-first-floor .shop-card-copy strong,
.shop-card.is-first-floor .shop-body strong {
  font-size: 1.28rem;
}

@media (max-width: 520px) {
  .edit-location-lock {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .edit-location-lock > span {
    grid-column: 1 / -1;
    min-height: 38px;
    justify-content: center;
  }
}

@media (min-width: 760px) {
  .shop-card.is-first-floor {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(330px, auto);
    min-height: 330px;
  }

  .shop-card.is-first-floor .shop-image {
    grid-area: 1 / 1;
    height: 100%;
    min-height: 330px;
    aspect-ratio: auto;
  }

  .shop-card.is-first-floor .shop-body {
    grid-area: 1 / 1;
    align-self: end;
    justify-self: stretch;
    grid-template-columns: 76px minmax(0, 1fr);
    min-height: 0;
    margin: 18px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 20px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(244, 248, 255, 0.84)),
      linear-gradient(135deg, color-mix(in srgb, var(--card-soft, #e8f2ff), transparent 20%), rgba(255, 255, 255, 0.68));
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.86) inset,
      0 18px 46px rgba(8, 36, 95, 0.24);
    backdrop-filter: blur(18px);
  }

  .shop-card.is-first-floor .shop-card-logo {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    font-size: 1.95rem;
  }

  .shop-card.is-first-floor .shop-card-logo img {
    border-radius: 19px;
  }

  .shop-card.is-first-floor .shop-card-copy strong,
  .shop-card.is-first-floor .shop-body strong {
    font-size: 1.5rem;
  }

  .shop-card.is-first-floor .shop-card-copy p,
  .shop-card.is-first-floor .shop-body p {
    font-size: 0.98rem;
  }
}

@media (min-width: 900px) {
  .home-board-grid .shop-card.is-first-floor,
  .market-shop-results .shop-card.is-first-floor,
  .shop-place-row .shop-card.is-first-floor {
    min-height: 360px;
  }

  .home-board-grid .shop-card.is-first-floor .shop-image,
  .market-shop-results .shop-card.is-first-floor .shop-image,
  .shop-place-row .shop-card.is-first-floor .shop-image {
    min-height: 360px;
  }
}

/* Polished board finish without decorative lines over the image. */
.shop-card::after,
.shop-body::before {
  content: none;
  display: none;
}

.shop-card {
  border-color: color-mix(in srgb, var(--card-accent, var(--blue-700)), #ffffff 58%);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--card-soft, #e8f2ff), #ffffff 38%)),
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.92), transparent 34%),
    #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
    0 24px 52px var(--card-glow, rgba(20, 87, 197, 0.2)),
    0 9px 18px rgba(16, 32, 51, 0.08);
}

.shop-card::before {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.48), transparent 24%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.26), transparent 30%),
    linear-gradient(315deg, color-mix(in srgb, var(--card-accent-2, var(--amber)), transparent 84%), transparent 42%);
}

.shop-image {
  box-shadow: inset 0 -26px 44px color-mix(in srgb, var(--card-accent, var(--blue-800)), transparent 78%);
}

.shop-image::before {
  background:
    radial-gradient(circle at 72% 16%, rgba(255, 255, 255, 0.3), transparent 26%),
    linear-gradient(145deg, color-mix(in srgb, var(--card-accent, var(--blue-700)), transparent 78%), transparent 34%),
    linear-gradient(180deg, rgba(4, 17, 42, 0.02), color-mix(in srgb, var(--card-accent, var(--blue-800)), rgba(4, 17, 42, 0.3) 34%));
}

.shop-status,
.shop-board-label,
.shop-views {
  border-color: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82) inset,
    0 12px 26px rgba(8, 36, 95, 0.16);
}

.shop-card .shop-status,
.shop-card .shop-board-label {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--card-soft, #e8f2ff), #ffffff 18%));
}

.shop-card.is-first-floor {
  border-radius: 24px;
  border-color: color-mix(in srgb, var(--card-accent, var(--blue-700)), #ffffff 42%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--card-soft, #e8f2ff), #ffffff 42%), #ffffff),
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--card-accent-2, var(--amber)), transparent 72%), transparent 28%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 0 0 1px rgba(255, 255, 255, 0.66) inset,
    0 34px 82px var(--card-glow, rgba(20, 87, 197, 0.25)),
    0 14px 30px rgba(16, 32, 51, 0.12);
}

.shop-card.is-first-floor .shop-image {
  border-radius: 0;
  box-shadow:
    inset 0 -70px 90px rgba(4, 17, 42, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.shop-card.is-first-floor .shop-image::after {
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(4, 17, 42, 0.03) 0%, rgba(4, 17, 42, 0.12) 46%, rgba(4, 17, 42, 0.46) 100%);
}

.shop-card.is-first-floor .shop-status,
.shop-card.is-first-floor .shop-board-label {
  min-height: 34px;
  padding-inline: 13px;
  border-radius: 999px;
}

.shop-card.is-first-floor .shop-body {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--card-soft, #e8f2ff), #ffffff 28%)),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--card-accent-2, var(--amber)), transparent 76%), transparent 32%);
}

@media (min-width: 760px) {
  .shop-card.is-first-floor {
    grid-template-rows: 1fr;
    height: clamp(360px, 34vw, 480px);
    min-height: 360px;
    max-height: 480px;
  }

  .shop-card.is-first-floor .shop-body {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(246, 250, 255, 0.82)),
      radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--card-accent-2, var(--amber)), transparent 76%), transparent 34%);
  }

  .shop-card.is-first-floor .shop-image {
    min-height: 0;
    height: 100%;
  }

  .shop-card.is-first-floor .shop-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Owner decision messages and compact mobile premium boards. */
.owner-notification-toast {
  position: fixed;
  inset-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right));
  inset-block-start: calc(14px + env(safe-area-inset-top));
  z-index: 80;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 38px;
  gap: 10px;
  align-items: center;
  max-width: 560px;
  margin-inline: auto;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  color: #073b35;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(229, 252, 247, 0.92)),
    linear-gradient(135deg, rgba(24, 169, 153, 0.12), rgba(20, 87, 197, 0.1));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 22px 52px rgba(8, 36, 95, 0.2);
  backdrop-filter: blur(18px);
}

.owner-notification-toast.needs-edit {
  color: #5f3204;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 244, 223, 0.94)),
    linear-gradient(135deg, rgba(242, 167, 66, 0.16), rgba(216, 107, 53, 0.12));
}

.owner-notification-toast > i {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue-700));
  box-shadow: 0 12px 26px rgba(8, 36, 95, 0.18);
}

.owner-notification-toast.needs-edit > i {
  background: linear-gradient(135deg, var(--amber), #d86b35);
}

.owner-notification-toast strong {
  display: block;
  color: inherit;
  font-size: 0.94rem;
  font-weight: 950;
  line-height: 1.35;
}

.owner-notification-toast span {
  display: block;
  margin-top: 3px;
  color: color-mix(in srgb, currentColor, #52657f 42%);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.55;
}

.owner-notification-toast button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  color: #52657f;
  background: rgba(255, 255, 255, 0.72);
}

.owner-notification-toast button i {
  width: 18px;
  height: 18px;
}

.approval-message.is-warning {
  color: #6b3b05;
  background: #fff4df;
  border-color: rgba(242, 167, 66, 0.36);
}

.approval-message.is-warning strong {
  color: #5f3204;
}

.approval-message.is-warning span {
  color: #7a4b12;
}

.shop-card.is-first-floor {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: clamp(410px, 118vw, 520px);
  min-height: 410px;
  max-height: 520px;
}

.shop-card.is-first-floor .shop-image {
  grid-area: 1 / 1;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}

.shop-card.is-first-floor .shop-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-card.is-first-floor .shop-body {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: stretch;
  grid-template-columns: 62px minmax(0, 1fr);
  direction: rtl;
  min-height: 0;
  margin: 12px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(245, 250, 255, 0.82)),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--card-accent-2, var(--amber)), transparent 78%), transparent 34%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 16px 40px rgba(8, 36, 95, 0.24);
  backdrop-filter: blur(16px);
}

.shop-card.is-first-floor .shop-card-copy {
  text-align: right;
}

.shop-card.is-first-floor .shop-card-logo {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  font-size: 1.65rem;
}

.shop-card.is-first-floor .shop-card-copy strong,
.shop-card.is-first-floor .shop-body strong {
  font-size: 1.12rem;
}

.shop-card.is-first-floor .shop-card-copy p,
.shop-card.is-first-floor .shop-body p {
  font-size: 0.8rem;
}

@media (min-width: 760px) {
  .shop-card.is-first-floor {
    height: clamp(360px, 34vw, 480px);
    min-height: 360px;
    max-height: 480px;
  }

  .shop-card.is-first-floor .shop-body {
    grid-template-columns: 76px minmax(0, 1fr);
    direction: rtl;
    margin: 18px;
    padding: 18px;
  }

  .shop-card.is-first-floor .shop-card-copy {
    text-align: right;
  }

  .shop-card.is-first-floor .shop-card-logo {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    font-size: 1.95rem;
  }
}

/* Admin operations dashboard. */
.admin-page {
  gap: 18px;
}

.app-shell.is-admin-view .bottom-nav {
  display: none;
}

.app-shell.is-admin-view .admin-page {
  padding-bottom: 28px;
}

.admin-login {
  width: min(100%, 520px);
  margin: 28px auto 0;
  padding: 22px;
  border-radius: 18px;
  border-color: rgba(178, 199, 228, 0.82);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.96)),
    radial-gradient(circle at 0 0, rgba(20, 87, 197, 0.12), transparent 34%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.94) inset,
    0 22px 56px rgba(8, 36, 95, 0.12);
}

.admin-login-copy {
  max-width: 28rem;
  margin: -2px auto 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.7;
}

.admin-dashboard {
  gap: 18px;
  padding: 18px;
  border-radius: 22px;
  border-color: rgba(178, 199, 228, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.96)),
    radial-gradient(circle at 0 0, rgba(20, 87, 197, 0.1), transparent 34%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.94) inset,
    0 24px 64px rgba(8, 36, 95, 0.12);
}

.admin-dashboard > .admin-toolbar {
  order: 1;
}

.admin-dashboard > .admin-stats {
  order: 2;
}

.admin-dashboard > .admin-command-bar {
  order: 3;
}

.admin-dashboard > .admin-request-workspace {
  order: 4;
}

.admin-dashboard > .admin-agreements-panel {
  order: 5;
}

.admin-dashboard > .admin-space-board {
  order: 6;
}

.admin-dashboard > .admin-place-manager {
  order: 7;
}

.admin-dashboard > .admin-payment-manager {
  order: 8;
}

.admin-dashboard > .admin-security-panel {
  order: 9;
}

.admin-dashboard > .admin-credentials {
  order: 10;
}

.admin-toolbar {
  padding: 14px;
  border: 1px solid rgba(178, 199, 228, 0.72);
  border-radius: 18px;
  background:
    linear-gradient(135deg, #ffffff, #f6fbff),
    linear-gradient(135deg, rgba(20, 87, 197, 0.08), rgba(24, 169, 153, 0.08));
}

.admin-toolbar small {
  display: block;
  margin-top: 4px;
  color: var(--teal-dark);
  font-size: 0.76rem;
  font-weight: 900;
}

.admin-stats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.admin-stats article {
  position: relative;
  overflow: hidden;
  min-height: 86px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, #ffffff, #f4f8ff),
    radial-gradient(circle at 0 0, rgba(20, 87, 197, 0.12), transparent 42%);
  box-shadow: 0 12px 28px rgba(8, 36, 95, 0.08);
}

.admin-stats article::before {
  content: "";
  position: absolute;
  inset-inline: 14px;
  inset-block-start: 0;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, var(--blue-700), var(--teal));
}

.admin-stats small {
  font-size: 0.72rem;
}

.admin-stats strong {
  font-size: 1.55rem;
}

.admin-command-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.admin-command-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  border: 1px solid rgba(178, 199, 228, 0.82);
  border-radius: 14px;
  color: var(--blue-800);
  background: linear-gradient(135deg, #ffffff, #edf5ff);
  box-shadow: 0 10px 24px rgba(8, 36, 95, 0.07);
  font-size: 0.84rem;
  font-weight: 950;
}

.admin-command-bar i {
  width: 19px;
  height: 19px;
}

.admin-space-board,
.admin-place-manager,
.admin-payment-manager,
.admin-request-workspace,
.admin-security-panel,
.admin-credentials {
  border-radius: 18px;
  border: 1px solid rgba(178, 199, 228, 0.82);
  background:
    linear-gradient(180deg, #ffffff, #f7fbff),
    linear-gradient(135deg, rgba(20, 87, 197, 0.07), rgba(242, 167, 66, 0.06));
  box-shadow: 0 16px 38px rgba(8, 36, 95, 0.08);
}

.admin-space-board,
.admin-request-workspace,
.admin-security-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.admin-space-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.admin-space-board-head h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 950;
}

.admin-space-summary,
.admin-space-totals,
.admin-security-grid {
  display: grid;
  gap: 8px;
}

.admin-space-summary {
  grid-template-columns: repeat(3, minmax(78px, 1fr));
  min-width: min(100%, 330px);
}

.admin-space-summary span,
.admin-space-totals span {
  display: grid;
  gap: 2px;
  justify-items: center;
  min-height: 58px;
  align-content: center;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(226, 233, 242, 0.88);
}

.admin-space-summary b,
.admin-space-totals b {
  color: var(--blue-800);
  font-size: 1.18rem;
  font-weight: 950;
}

.admin-space-summary small,
.admin-space-totals small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.admin-space-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 12px;
}

.admin-space-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(178, 199, 228, 0.78);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 247, 255, 0.95)),
    radial-gradient(circle at 100% 0, rgba(24, 169, 153, 0.12), transparent 32%);
  box-shadow: 0 16px 34px rgba(8, 36, 95, 0.08);
}

.admin-space-card.is-full {
  border-color: rgba(216, 107, 53, 0.32);
  background:
    linear-gradient(145deg, #fff, #fff5ea),
    radial-gradient(circle at 100% 0, rgba(216, 107, 53, 0.13), transparent 34%);
}

.admin-space-card-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: center;
}

.admin-space-card-head > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-800), var(--teal));
  box-shadow: 0 12px 26px rgba(8, 36, 95, 0.14);
}

.admin-space-card-head i {
  width: 20px;
  height: 20px;
}

.admin-space-card-head strong {
  display: block;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 950;
  line-height: 1.35;
}

.admin-space-card-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.admin-space-card-head em {
  display: grid;
  place-items: center;
  min-height: 38px;
  border-radius: 999px;
  color: var(--blue-800);
  background: #fff;
  border: 1px solid rgba(178, 199, 228, 0.8);
  font-style: normal;
  font-weight: 950;
}

.admin-space-progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9f1fb;
}

.admin-space-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--blue-700));
}

.admin-space-totals {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-level-list {
  display: grid;
  gap: 8px;
}

.admin-level-row {
  border: 1px solid rgba(226, 233, 242, 0.86);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.admin-level-row summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 10px;
  cursor: pointer;
  list-style: none;
}

.admin-level-row summary::-webkit-details-marker {
  display: none;
}

.admin-level-row summary strong {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
}

.admin-level-row summary span {
  min-width: 54px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--blue-800);
  background: var(--blue-100);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 950;
}

.admin-level-spaces {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
}

.admin-level-spaces small {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.admin-level-spaces div div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-space-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding-inline: 8px;
  border-radius: 999px;
  color: #075c54;
  background: #d5faf4;
  font-size: 0.68rem;
  font-weight: 950;
}

.admin-space-chip.is-booked {
  color: #733b07;
  background: #fff0d7;
}

.admin-space-chip.is-empty {
  color: #7a8797;
  background: #eef3f9;
}

.admin-space-chip em {
  color: inherit;
  font-size: 0.6rem;
  font-style: normal;
  opacity: 0.72;
}

.admin-place-form,
.admin-payment-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-request-tools {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.75fr) auto;
  gap: 10px;
  align-items: center;
}

.admin-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-filter-tabs button {
  min-height: 38px;
  padding-inline: 12px;
  border: 1px solid rgba(178, 199, 228, 0.82);
  border-radius: 999px;
  color: var(--blue-800);
  background: #fff;
  font-size: 0.74rem;
  font-weight: 950;
}

.admin-filter-tabs button.is-selected {
  color: #fff;
  background: linear-gradient(135deg, var(--blue-800), var(--blue-700));
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(20, 87, 197, 0.18);
}

.admin-search-box {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  min-height: 44px;
  border: 1px solid rgba(178, 199, 228, 0.82);
  border-radius: 14px;
  background: #fff;
}

.admin-search-box i {
  justify-self: center;
  width: 18px;
  height: 18px;
  color: var(--blue-800);
}

.admin-search-box input {
  min-width: 0;
  min-height: 42px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 850;
}

[data-admin-filter-count] {
  justify-self: end;
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-size: 0.74rem;
  font-weight: 950;
  white-space: nowrap;
}

.admin-security-panel {
  scroll-margin-top: 18px;
}

.admin-security-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-security-grid article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 78px;
  padding: 10px;
  border: 1px solid rgba(226, 233, 242, 0.86);
  border-radius: 16px;
  background: #fff;
}

.admin-security-grid article > i {
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 13px;
  color: var(--blue-800);
  background: var(--blue-100);
}

.admin-security-grid article.is-good > i {
  color: #075c54;
  background: #d5faf4;
}

.admin-security-grid article.is-warning > i {
  color: #733b07;
  background: #fff0d7;
}

.admin-security-grid strong {
  display: block;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
}

.admin-security-grid span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.45;
}

@media (min-width: 980px) {
  .admin-page {
    padding: 22px 28px 132px;
  }

  .admin-request-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .admin-transfer-inbox,
  .admin-empty {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .admin-dashboard {
    padding: 12px;
    border-radius: 18px;
  }

  .admin-toolbar,
  .admin-space-board-head {
    display: grid;
  }

  .admin-stats,
  .admin-command-bar,
  .admin-space-summary,
  .admin-place-form,
  .admin-payment-form,
  .admin-request-tools,
  .admin-agreement-tools,
  .admin-agreement-meta,
  .admin-agreement-proof-grid,
  .admin-valuation-editor,
  .admin-security-grid {
    grid-template-columns: 1fr 1fr;
  }

  .admin-command-bar button {
    min-height: 46px;
  }

  .admin-search-box,
  [data-admin-filter-count],
  [data-admin-agreement-count],
  [data-admin-valuation-count] {
    grid-column: 1 / -1;
  }

  .admin-filter-tabs {
    grid-column: 1 / -1;
  }

  .admin-place-form button,
  .admin-payment-form button,
  .admin-payment-form .wide-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 460px) {
  .admin-stats,
  .admin-command-bar,
  .admin-space-summary,
  .admin-space-totals,
  .admin-place-form,
  .admin-payment-form,
  .admin-request-tools,
  .admin-agreement-tools,
  .admin-agreement-meta,
  .admin-agreement-proof-grid,
  .admin-valuation-editor,
  .admin-agreement-actions,
  .admin-security-grid {
    grid-template-columns: 1fr;
  }

  .admin-agreement-receipt-link {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .admin-agreement-receipt-link img {
    width: 76px;
    height: 62px;
  }
}

/* Ordered admin request queue. */
.admin-request-section {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(178, 199, 228, 0.82);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.96)),
    radial-gradient(circle at 100% 0, rgba(20, 87, 197, 0.08), transparent 34%);
}

.admin-request-section.is-urgent {
  border-color: rgba(20, 87, 197, 0.28);
}

.admin-request-section.is-new-requests {
  background:
    linear-gradient(180deg, #ffffff, #f7fbff),
    radial-gradient(circle at 100% 0, rgba(20, 87, 197, 0.1), transparent 34%);
}

.admin-request-section.is-payment {
  border-color: rgba(216, 107, 53, 0.3);
  background:
    linear-gradient(180deg, #fff, #fff8ef),
    radial-gradient(circle at 100% 0, rgba(242, 167, 66, 0.12), transparent 34%);
}

.admin-request-section.is-transfer {
  border-color: rgba(122, 76, 194, 0.28);
}

.admin-request-section.is-warning {
  border-color: rgba(242, 167, 66, 0.34);
}

.admin-request-section.is-active {
  border-color: rgba(24, 169, 153, 0.28);
}

.admin-request-section-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(226, 233, 242, 0.86);
}

.admin-request-section-head > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-800), var(--blue-700));
  box-shadow: 0 12px 26px rgba(8, 36, 95, 0.14);
}

.admin-request-section.is-payment .admin-request-section-head > span,
.admin-request-section.is-warning .admin-request-section-head > span {
  background: linear-gradient(135deg, var(--amber), #d86b35);
}

.admin-request-section.is-transfer .admin-request-section-head > span {
  background: linear-gradient(135deg, #7a4cc2, var(--blue-700));
}

.admin-request-section.is-active .admin-request-section-head > span {
  background: linear-gradient(135deg, var(--teal), var(--blue-700));
}

.admin-request-section-head i {
  width: 21px;
  height: 21px;
}

.admin-request-section-head strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
}

.admin-request-section-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.5;
}

.admin-request-section-head em {
  display: grid;
  place-items: center;
  min-height: 38px;
  border-radius: 999px;
  color: var(--blue-800);
  background: var(--blue-100);
  font-style: normal;
  font-weight: 950;
}

.admin-request-lane {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(214, 225, 241, 0.94);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.97)),
    radial-gradient(circle at 100% 0, rgba(20, 87, 197, 0.08), transparent 36%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.admin-request-lane.is-industrial {
  border-color: rgba(24, 169, 153, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 255, 251, 0.96)),
    radial-gradient(circle at 100% 0, rgba(24, 169, 153, 0.13), transparent 34%);
}

.admin-request-lane-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: center;
}

.admin-request-lane-head > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--blue-800);
  background: var(--blue-100);
  border: 1px solid rgba(20, 87, 197, 0.14);
}

.admin-request-lane.is-industrial .admin-request-lane-head > span {
  color: #075c54;
  background: #d5faf4;
  border-color: rgba(24, 169, 153, 0.22);
}

.admin-request-lane-head i {
  width: 19px;
  height: 19px;
}

.admin-request-lane-head strong {
  display: block;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
}

.admin-request-lane-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.45;
}

.admin-request-lane-head em {
  display: grid;
  place-items: center;
  min-height: 32px;
  border-radius: 999px;
  color: var(--blue-800);
  background: #fff;
  border: 1px solid rgba(214, 225, 241, 0.92);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 950;
}

.admin-request-lane-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}

.admin-request-lane-grid .admin-request-card {
  height: 100%;
}

.admin-new-request-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(292px, 360px);
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 2px 0 8px;
  scroll-snap-type: inline proximity;
}

.admin-new-request-row .admin-request-card {
  height: 100%;
  scroll-snap-align: start;
}

.admin-request-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  align-items: start;
}

.admin-request-section-grid .admin-request-card {
  height: 100%;
}

.admin-service-queue {
  display: grid;
  gap: 10px;
}

.admin-history-section {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(178, 199, 228, 0.72);
  border-radius: 16px;
  background: #f8fbff;
}

.admin-history-section summary {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
}

.admin-history-section summary::-webkit-details-marker {
  display: none;
}

.admin-history-section summary > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: var(--blue-800);
  background: var(--blue-100);
}

.admin-history-section summary i {
  width: 19px;
  height: 19px;
}

.admin-history-section summary strong {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 950;
}

.admin-history-section summary small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.admin-history-grid {
  display: grid;
  gap: 8px;
}

.admin-history-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 76px;
  padding: 10px;
  border: 1px solid rgba(226, 233, 242, 0.92);
  border-radius: 12px;
  background: #fff;
}

.admin-history-card > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-history-card strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.admin-history-card small,
.admin-history-card span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.admin-history-card .mini-chip {
  width: fit-content;
  max-width: 100%;
}

.admin-history-card button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--blue-800);
  font-size: 0.72rem;
  font-weight: 950;
}

.admin-empty.is-compact {
  min-height: 104px;
  padding: 12px;
}

.admin-request-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

.admin-request-card-details {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(226, 233, 242, 0.9);
  border-radius: 10px;
  background: #f8fbff;
}

.admin-request-card-details summary {
  min-height: 38px;
  padding: 9px 10px;
  cursor: pointer;
  list-style: none;
  color: var(--blue-800);
  font-size: 0.74rem;
  font-weight: 950;
}

.admin-request-card-details summary::-webkit-details-marker {
  display: none;
}

.admin-request-card-details .admin-request-meta,
.admin-request-card-details .admin-product-mini {
  padding-inline: 8px;
}

.admin-request-card-details .admin-product-mini {
  padding-bottom: 8px;
}

.admin-request-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 5px;
  background: var(--blue-700);
}

.admin-request-card.is-payment::before {
  background: var(--amber);
}

.admin-request-card.is-transfer::before {
  background: #7a4cc2;
}

.admin-request-card.is-warning::before {
  background: #d86b35;
}

.admin-request-card.is-active::before {
  background: var(--teal);
}

@media (min-width: 980px) {
  .admin-request-list {
    grid-template-columns: 1fr;
  }

  .admin-request-section-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-request-lane-grid:has(.admin-request-card:nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-request-lane-grid .admin-request-card:only-child .admin-request-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .admin-request-section {
    padding: 10px;
  }

  .admin-request-section-head {
    grid-template-columns: 40px minmax(0, 1fr) 36px;
  }

  .admin-request-section-head > span {
    width: 40px;
    height: 40px;
  }

  .admin-request-section-grid {
    grid-template-columns: 1fr;
  }

  .admin-history-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .admin-history-card button {
    justify-self: stretch;
  }

  .admin-request-lane {
    padding: 9px;
    border-radius: 14px;
  }

  .admin-request-lane-head {
    grid-template-columns: 36px minmax(0, 1fr) 32px;
  }

  .admin-request-lane-head > span {
    width: 36px;
    height: 36px;
  }

  .admin-request-lane-grid {
    grid-template-columns: 1fr;
  }
}

.marketing-studio-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(20, 87, 197, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 246, 255, 0.94)),
    linear-gradient(90deg, rgba(24, 169, 153, 0.08), rgba(232, 105, 91, 0.07));
  box-shadow: 0 18px 42px rgba(8, 36, 95, 0.12);
}

.marketing-studio-panel .form-section-head {
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(214, 225, 241, 0.9);
}

.marketing-studio-group {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(214, 225, 241, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.marketing-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.marketing-group-head strong {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 950;
}

.marketing-group-head button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-800), #18a999);
  font-size: 0.76rem;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(20, 87, 197, 0.18);
}

.marketing-card-list {
  display: grid;
  gap: 10px;
}

.marketing-editor-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(20, 87, 197, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(180deg, #fff, #f7fbff);
  box-shadow: 0 16px 34px rgba(16, 32, 51, 0.1);
}

.marketing-card-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 34px;
  gap: 10px;
  align-items: center;
}

.marketing-card-head > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-800), #18a999);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 22px rgba(8, 36, 95, 0.18);
}

.marketing-card-head strong {
  display: block;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
}

.marketing-card-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.marketing-card-head button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: #a83232;
  background: #fff1f1;
}

.marketing-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.marketing-editor-grid .wide-field {
  grid-column: 1 / -1;
}

.marketing-image-picker {
  position: relative;
  min-height: 116px;
  overflow: hidden;
  border: 1px dashed rgba(20, 87, 197, 0.42);
  border-radius: 14px;
  background: #edf5ff;
}

.marketing-image-picker input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.marketing-image-picker > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: var(--blue-800);
  font-size: 0.74rem;
  font-weight: 950;
  text-align: center;
}

.marketing-image-picker img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ad-placement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ad-placement-grid label {
  position: relative;
  display: grid;
  min-height: 40px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(214, 225, 241, 0.95);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 950;
}

.ad-placement-grid input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.ad-placement-grid label:has(input:checked) {
  border-color: rgba(24, 169, 153, 0.48);
  color: #087468;
  background: #e8fbf7;
  box-shadow: 0 0 0 3px rgba(24, 169, 153, 0.08);
}

.creator-marketing-preview {
  display: block;
  padding: 0 12px 14px;
}

.creator-marketing-preview[hidden] {
  display: none;
}

.creator-marketing-preview-content {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(20, 87, 197, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(20, 87, 197, 0.08), rgba(24, 169, 153, 0.1)),
    #fff;
}

.creator-marketing-preview-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.creator-marketing-preview-head > span,
.creator-marketing-preview-list article > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-800), #18a999);
}

.creator-marketing-preview-head strong,
.creator-marketing-preview-list strong {
  display: block;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 950;
}

.creator-marketing-preview-head small,
.creator-marketing-preview-list small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.creator-marketing-preview-list {
  display: grid;
  gap: 7px;
}

.creator-marketing-preview-list article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 52px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 8px 18px rgba(16, 32, 51, 0.07);
}

.home-video-ad-panel,
.video-ad-strip,
.shop-posts-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(20, 87, 197, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 255, 0.96)),
    linear-gradient(90deg, rgba(216, 107, 53, 0.06), rgba(24, 169, 153, 0.08));
  box-shadow: 0 18px 42px rgba(8, 36, 95, 0.12);
}

.home-video-ad-head h2,
.video-ad-strip .section-heading h2,
.shop-posts-section .section-heading h2 {
  font-size: 1rem;
  line-height: 1.3;
}

.video-ad-strip .section-heading > span,
.shop-posts-section .section-heading > span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--shop-accent, var(--blue-800));
  background: color-mix(in srgb, var(--shop-accent, var(--blue-800)), #fff 88%);
  font-size: 0.74rem;
  font-weight: 950;
  white-space: nowrap;
}

.home-video-ad-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(176px, 64%);
  gap: 10px;
  margin-inline: -14px;
  padding: 0 14px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.home-video-ad-row::-webkit-scrollbar {
  display: none;
}

.home-video-ad-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(20, 87, 197, 0.16);
  border-radius: 16px;
  color: inherit;
  background: #fff;
  box-shadow: 0 14px 28px rgba(16, 32, 51, 0.1);
  text-align: right;
}

.home-video-thumb {
  display: grid;
  min-height: 110px;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(8, 36, 95, 0.08), rgba(8, 36, 95, 0.6)),
    var(--ad-image) center/cover;
}

.home-video-thumb i {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
}

.home-video-ad-card strong {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.home-video-ad-card small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
}

.video-ad-grid {
  display: grid;
  gap: 12px;
}

.video-ad-grid > .video-ad-card:only-child,
.shop-post-grid > .shop-post-card:only-child {
  grid-column: 1 / -1;
}

.video-ad-card {
  overflow: hidden;
  border: 1px solid rgba(20, 87, 197, 0.14);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(8, 36, 95, 0.14);
}

.video-frame {
  overflow: hidden;
  background: #061b42;
}

.video-frame iframe,
.video-frame video,
.video-frame img,
.video-ad-fallback {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  object-fit: cover;
}

.video-ad-fallback {
  position: relative;
  padding: 0;
  border: 0;
  color: #fff;
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(8, 36, 95, 0.16), rgba(8, 36, 95, 0.72)),
    #113f88;
  cursor: pointer;
}

.video-ad-fallback span,
.video-ad-fallback b {
  position: absolute;
  inset-inline: 0;
  display: grid;
  place-items: center;
}

.video-ad-fallback span {
  inset-block: 0;
}

.video-ad-fallback b {
  bottom: 14px;
  font-size: 0.82rem;
  font-weight: 950;
}

.video-ad-copy {
  display: grid;
  gap: 6px;
  padding: 12px;
}

.video-ad-copy strong {
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.video-ad-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.shop-post-grid {
  display: grid;
  gap: 14px;
}

.shop-post-card {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(20, 87, 197, 0.15);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 46px rgba(8, 36, 95, 0.14);
}

.shop-post-card.is-spotlight {
  border-color: color-mix(in srgb, var(--shop-accent, var(--blue-800)) 32%, #f3c35b);
  box-shadow: 0 24px 56px rgba(8, 36, 95, 0.18);
}

.shop-post-card.is-featured-post {
  border-color: rgba(24, 169, 153, 0.26);
}

.shop-post-signature {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(20, 87, 197, 0.09), rgba(24, 169, 153, 0.09)),
    #fff;
}

.shop-post-logo {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--shop-accent, var(--blue-800)), #18a999);
  font-size: 1.1rem;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 12px 24px rgba(8, 36, 95, 0.16);
}

.shop-post-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-post-signature strong {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.shop-post-signature small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shop-post-qr {
  width: 48px;
  height: 48px;
  padding: 4px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(16, 32, 51, 0.1);
}

.shop-post-media img {
  display: block;
  width: 100%;
  aspect-ratio: 1.05;
  object-fit: cover;
  background: var(--soft);
}

.shop-post-copy {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.shop-post-copy h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 950;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.shop-post-copy p {
  margin: 0;
  color: #43546b;
  font-size: 0.84rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.shop-post-copy a {
  display: inline-flex;
  width: fit-content;
  min-height: 32px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--shop-accent, var(--blue-800));
  background: color-mix(in srgb, var(--shop-accent, var(--blue-800)), #fff 88%);
  font-size: 0.74rem;
  font-weight: 950;
  text-decoration: none;
}

.shop-post-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 12px 12px;
}

.shop-post-actions button {
  display: inline-flex;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(214, 225, 241, 0.94);
  border-radius: 12px;
  color: #43546b;
  background: #f8fbff;
  font-size: 0.7rem;
  font-weight: 950;
}

.shop-post-actions button[aria-pressed="true"] {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue-800), #18a999);
  box-shadow: 0 10px 20px rgba(20, 87, 197, 0.16);
}

.shop-post-actions button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-post-comments {
  display: grid;
  gap: 6px;
  margin: 0 12px 10px;
  padding: 10px;
  border-radius: 14px;
  background: #f5f8fc;
}

.shop-post-comments p {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 7px 8px;
  border-radius: 10px;
  background: #fff;
}

.shop-post-comments strong {
  color: var(--blue-800);
  font-size: 0.68rem;
  font-weight: 950;
}

.shop-post-comments span,
.shop-post-comment-empty {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.shop-post-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 8px;
  padding: 0 12px 12px;
}

.shop-post-comment-form input {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(214, 225, 241, 0.95);
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  font-size: 0.78rem;
  font-weight: 850;
}

.shop-post-comment-form button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--blue-800);
}

@media (hover: hover) and (pointer: fine) {
  .marketing-group-head button:hover,
  .home-video-ad-card:hover,
  .video-ad-card:hover,
  .shop-post-card:hover {
    transform: translateY(-2px);
  }

  .home-video-ad-card,
  .video-ad-card,
  .shop-post-card,
  .marketing-group-head button {
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
}

@media (min-width: 760px) {
  .marketing-editor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .marketing-editor-grid .wide-field {
    grid-column: span 2;
  }

  .video-ad-grid,
  .shop-post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-post-grid > .shop-post-card:only-child {
    grid-template-columns: minmax(280px, 44%) minmax(0, 1fr);
    align-items: stretch;
  }

  .shop-post-card.is-spotlight {
    grid-column: 1 / -1;
    grid-template-columns: minmax(280px, 46%) minmax(0, 1fr);
    align-items: stretch;
  }

  .shop-post-grid > .shop-post-card:only-child .shop-post-signature,
  .shop-post-card.is-spotlight .shop-post-signature {
    grid-column: 1 / -1;
  }

  .shop-post-grid > .shop-post-card:only-child .shop-post-media,
  .shop-post-card.is-spotlight .shop-post-media {
    grid-column: 1;
    grid-row: 2 / span 4;
  }

  .shop-post-grid > .shop-post-card:only-child .shop-post-media img,
  .shop-post-card.is-spotlight .shop-post-media img {
    height: 100%;
    min-height: 360px;
    aspect-ratio: auto;
  }

  .shop-post-grid > .shop-post-card:only-child .shop-post-copy,
  .shop-post-grid > .shop-post-card:only-child .shop-post-actions,
  .shop-post-grid > .shop-post-card:only-child .shop-post-comments,
  .shop-post-grid > .shop-post-card:only-child .shop-post-comment-form,
  .shop-post-card.is-spotlight .shop-post-copy,
  .shop-post-card.is-spotlight .shop-post-actions,
  .shop-post-card.is-spotlight .shop-post-comments,
  .shop-post-card.is-spotlight .shop-post-comment-form {
    grid-column: 2;
  }

  .home-video-ad-row {
    grid-auto-columns: minmax(220px, 32%);
  }
}

@media (min-width: 980px) {
  .marketing-card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .video-ad-strip.placement-hero .video-ad-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .marketing-studio-panel,
  .home-video-ad-panel,
  .video-ad-strip,
  .shop-posts-section {
    padding: 12px;
    border-radius: 16px;
  }

  .marketing-editor-grid,
  .ad-placement-grid,
  .shop-post-actions {
    grid-template-columns: 1fr;
  }

  .shop-post-actions button {
    justify-content: flex-start;
    padding-inline: 12px;
  }

  .home-video-ad-row {
    grid-auto-columns: minmax(188px, 78%);
  }
}