:root {
  color-scheme: light;
  --bg: #f4f3f7;
  --panel: #ffffff;
  --ink: #26232f;
  --muted: #6a6677;
  --line: #dfdbea;
  --brand: #6c68ad;
  --brand-strong: #4c478d;
  --accent: #9d95d6;
  --danger: #a83b3b;
  --soft: #f1effb;
  --cream: #fff8ea;
  --graphite: #55535a;
  --shadow: 0 18px 48px rgba(51, 46, 75, 0.14);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

body:has(.app-shell) {
  background:
    radial-gradient(circle at 12% 8%, rgba(157, 149, 214, 0.22), transparent 30%),
    linear-gradient(135deg, #181525 0%, #2d2854 52%, #f4f3f7 52%, #f4f3f7 100%);
}

.landing-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 92% 4%, rgba(108, 104, 173, 0.28), transparent 26%),
    radial-gradient(circle at 0 100%, rgba(157, 149, 214, 0.24), transparent 30%),
    linear-gradient(135deg, #fbfaf7 0%, #f3f1fb 52%, #ebe9f5 100%);
  color: var(--ink);
}

.landing-page::before,
.landing-page::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: #6c68ad;
  opacity: 0.95;
  pointer-events: none;
}

.landing-page::before {
  right: -150px;
  top: -130px;
}

.landing-page::after {
  left: -210px;
  bottom: -210px;
}

.landing-nav,
.landing-hero,
.landing-section,
.landing-split {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 0;
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.landing-brand img {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(108, 104, 173, 0.26);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 14px 28px rgba(76, 71, 141, 0.18);
}

.landing-brand strong,
.landing-brand small {
  display: block;
}

.landing-brand strong {
  color: #4a4850;
  font-size: 1.12rem;
}

.landing-brand small {
  color: var(--brand);
  font-size: 0.84rem;
  font-weight: 800;
}

.landing-nav nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.landing-nav a {
  min-height: 40px;
  border-radius: 999px;
  padding: 10px 14px;
  color: #4f4d57;
  font-weight: 900;
  text-decoration: none;
}

.landing-nav a:hover {
  background: rgba(108, 104, 173, 0.1);
}

.landing-nav .landing-nav-cta {
  background: #6c68ad;
  color: #fff;
  box-shadow: 0 14px 34px rgba(108, 104, 173, 0.24);
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1fr);
  gap: 34px;
  align-items: center;
  min-height: calc(100vh - 96px);
  padding: 34px 0 74px;
}

.landing-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px dashed rgba(108, 104, 173, 0.42);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(255, 248, 234, 0.82);
  color: #5f5aa3;
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.landing-hero h1,
.landing-section-heading h2,
.landing-split h2 {
  margin: 18px 0 14px;
  color: #4f4d57;
  letter-spacing: 0;
}

.landing-hero h1 {
  max-width: 760px;
  font-size: clamp(2.6rem, 6vw, 5.7rem);
  line-height: 0.95;
}

.landing-hero p,
.landing-split p {
  max-width: 620px;
  color: #5d5a65;
  font-size: 1.08rem;
  line-height: 1.7;
}

.landing-actions,
.landing-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.landing-primary,
.landing-secondary {
  border-radius: 999px;
  text-decoration: none;
}

.landing-primary {
  background: #6c68ad;
  color: #fff;
}

.landing-secondary {
  border: 1px solid rgba(108, 104, 173, 0.28);
  background: rgba(255, 255, 255, 0.66);
  color: #4f4d57;
}

.landing-proof span {
  border: 1px solid rgba(108, 104, 173, 0.2);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.68);
  color: #5f5aa3;
  font-size: 0.84rem;
  font-weight: 900;
}

.landing-showcase {
  min-width: 0;
}

.landing-browser {
  border: 1px solid rgba(108, 104, 173, 0.24);
  border-radius: 30px;
  padding: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 248, 234, 0.42)),
    url("/assets/cadatah-hero.jpg") center/cover;
  box-shadow: 0 30px 90px rgba(76, 71, 141, 0.22);
}

.landing-browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border-radius: 20px 20px 8px 8px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.78);
}

.landing-browser-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ee6c62;
}

.landing-browser-bar span:nth-child(2) {
  background: #f2bc50;
}

.landing-browser-bar span:nth-child(3) {
  background: #52b788;
}

.landing-browser-bar small {
  margin-left: 8px;
  color: #6a6677;
  font-weight: 800;
}

.landing-preview-card {
  margin-top: 12px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 24px;
  padding: clamp(22px, 4vw, 44px);
  background: linear-gradient(135deg, rgba(108, 104, 173, 0.78), rgba(255, 248, 234, 0.44));
  color: #fff;
  backdrop-filter: blur(12px);
}

.landing-preview-logo {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.26);
  color: #fff;
  font-size: 2rem;
  font-weight: 950;
}

.landing-preview-card > span {
  display: inline-flex;
  margin-top: 16px;
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.22);
  font-weight: 950;
}

.landing-preview-card h2 {
  max-width: 720px;
  margin: 18px 0 12px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 1;
}

.landing-preview-card p {
  color: rgba(255, 255, 255, 0.88);
}

.landing-preview-services,
.landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.landing-preview-services article,
.landing-feature-grid article {
  border: 1px solid rgba(108, 104, 173, 0.18);
  border-radius: 18px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.62);
}

.landing-preview-services article {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.16);
}

.landing-preview-services strong,
.landing-preview-services small {
  display: block;
}

.landing-section,
.landing-split {
  padding: 64px 0;
}

.landing-section-heading {
  max-width: 760px;
}

.landing-section-heading h2,
.landing-split h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
}

.landing-feature-grid article strong {
  color: #4f4d57;
  font-size: 1.08rem;
}

.landing-feature-grid article p {
  color: #6a6677;
  line-height: 1.6;
}

.landing-split {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(360px, 1fr);
  gap: 34px;
  align-items: center;
}

.landing-split img {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(108, 104, 173, 0.18);
  border-radius: 28px;
  object-fit: cover;
  box-shadow: 0 22px 70px rgba(76, 71, 141, 0.18);
}

body.landing-page {
  --landing-purple: #6d6ab0;
  --landing-purple-dark: #37306e;
  --landing-lilac: #aaa2df;
  --landing-cream: #fff8ea;
  --landing-paper: #f7f6f8;
  --landing-ink: #49474f;
  --landing-muted: #716d7d;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 92% 0%, rgba(109, 106, 176, 0.28), transparent 24rem),
    radial-gradient(circle at 0% 100%, rgba(170, 162, 223, 0.24), transparent 22rem),
    linear-gradient(135deg, #fbfaf8 0%, #f4f2fb 48%, #edeaf8 100%);
  color: var(--landing-ink);
}

body.landing-page::before,
body.landing-page::after {
  width: 28rem;
  height: 28rem;
  background: var(--landing-purple);
  opacity: 0.95;
}

body.landing-page::before {
  right: -18rem;
  top: -18rem;
  box-shadow: -5rem 4rem 0 -1.8rem var(--landing-purple);
}

body.landing-page::after {
  left: -20rem;
  bottom: -20rem;
  box-shadow: 6rem -4rem 0 -2rem var(--landing-purple);
}

body.landing-page .landing-nav,
body.landing-page .landing-hero,
body.landing-page .landing-section,
body.landing-page .landing-flow {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

body.landing-page .landing-nav {
  min-height: 84px;
  padding-block: 18px;
}

body.landing-page .landing-brand img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
}

body.landing-page .landing-brand strong {
  color: var(--landing-ink);
  font-size: 1.18rem;
}

body.landing-page .landing-brand small {
  color: var(--landing-purple);
  font-weight: 900;
}

body.landing-page .landing-nav nav {
  border: 1px solid rgba(109, 106, 176, 0.18);
  border-radius: 999px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 42px rgba(71, 64, 122, 0.1);
}

body.landing-page .landing-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 999px;
  padding: 0 14px;
  color: var(--landing-muted);
  font-size: 0.92rem;
}

body.landing-page .landing-nav .landing-nav-cta {
  background: var(--landing-purple);
  color: #fff;
}

body.landing-page .landing-hero {
  grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1fr);
  gap: clamp(28px, 5vw, 64px);
  min-height: calc(100vh - 90px);
  padding-block: 48px 74px;
}

body.landing-page .landing-eyebrow {
  border: 1px dashed rgba(109, 106, 176, 0.42);
  background: rgba(255, 248, 234, 0.92);
  color: var(--landing-purple-dark);
  letter-spacing: 0;
}

body.landing-page .landing-hero h1,
body.landing-page .landing-section-heading h2,
body.landing-page .landing-flow h2 {
  color: var(--landing-ink);
  font-weight: 950;
}

body.landing-page .landing-hero h1 {
  max-width: 780px;
  font-size: clamp(3.2rem, 7vw, 6.6rem);
  line-height: 0.9;
}

body.landing-page .landing-hero p,
body.landing-page .landing-flow p,
body.landing-page .landing-feature-grid p {
  color: var(--landing-muted);
}

body.landing-page .landing-primary {
  background: var(--landing-purple);
  color: #fff;
  box-shadow: 0 18px 42px rgba(109, 106, 176, 0.24);
}

body.landing-page .landing-secondary {
  background: rgba(255, 255, 255, 0.76);
}

body.landing-page .landing-proof span {
  background: rgba(255, 255, 255, 0.72);
  color: var(--landing-purple-dark);
}

.landing-product-card {
  position: relative;
  min-width: 0;
}

.landing-product-card::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border: 2px dashed rgba(170, 162, 223, 0.74);
  border-radius: 36px;
}

.landing-window {
  overflow: hidden;
  border: 1px solid rgba(109, 106, 176, 0.2);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 36px 90px rgba(61, 55, 115, 0.2);
}

.landing-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  border-bottom: 1px solid rgba(109, 106, 176, 0.12);
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.78);
}

.landing-window-bar span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef6b62;
}

.landing-window-bar span:nth-child(2) {
  background: #f1bd55;
}

.landing-window-bar span:nth-child(3) {
  background: #49b96d;
}

.landing-window-bar small {
  margin-left: 8px;
  color: var(--landing-muted);
  font-weight: 900;
}

.landing-site-preview {
  padding: 18px;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 248, 234, 0.4), transparent 28%),
    linear-gradient(135deg, #27234a, #6d6ab0 58%, #aaa2df);
}

.landing-preview-hero {
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 26px;
  padding: clamp(24px, 5vw, 54px);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  backdrop-filter: blur(14px);
}

.landing-preview-hero img {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.landing-preview-hero > span {
  display: inline-flex;
  margin-top: 18px;
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.2);
  font-weight: 950;
}

.landing-preview-hero h2 {
  max-width: 680px;
  margin: 18px 0 12px;
  color: #fff;
  font-size: clamp(2.2rem, 4.8vw, 4.7rem);
  line-height: 0.95;
}

.landing-preview-hero p {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.86);
}

.landing-booking-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 10px;
  margin-top: 14px;
}

.landing-booking-preview article,
.landing-booking-preview button {
  min-height: 74px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.landing-booking-preview strong,
.landing-booking-preview small {
  display: block;
}

.landing-booking-preview small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.75);
}

.landing-booking-preview button {
  border: 0;
  background: var(--landing-purple-dark);
  font-weight: 950;
  white-space: nowrap;
}

body.landing-page .landing-section,
body.landing-page .landing-flow {
  padding-block: 80px;
}

body.landing-page .landing-feature-grid article,
.landing-flow-grid article {
  border: 1px solid rgba(109, 106, 176, 0.16);
  border-radius: 24px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 18px 46px rgba(71, 64, 122, 0.08);
}

.landing-flow {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.landing-flow-grid {
  display: grid;
  gap: 12px;
}

.landing-flow-grid span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--landing-purple);
  color: #fff;
  font-weight: 950;
}

.landing-flow-grid strong {
  display: block;
  margin-top: 14px;
  color: var(--landing-ink);
  font-size: 1.1rem;
}

.login-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 20%, rgba(108, 104, 173, 0.26), transparent 34%),
    linear-gradient(135deg, #171522, #272344);
}

.login-page.cadatah-auth-page {
  background:
    radial-gradient(circle at 18% 16%, rgba(157, 149, 214, 0.34), transparent 30%),
    radial-gradient(circle at 86% 82%, rgba(255, 248, 234, 0.58), transparent 28%),
    linear-gradient(135deg, #fbfaf8 0%, #f1eff8 54%, #e7e4f2 100%);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 304px minmax(0, 1fr);
  min-height: 100vh;
  background:
    radial-gradient(circle at 92% 2%, rgba(170, 163, 223, 0.18), transparent 32%),
    linear-gradient(135deg, #181525 0%, #272344 42%, #f4f3f7 42%, #f4f3f7 100%);
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 100vh;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 34%),
    #171522;
  color: #fbfaf7;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #fff;
  font-weight: 900;
}

.brand-mark-image {
  display: block;
  border-radius: 50%;
  background: #fbfaf7;
  object-fit: cover;
  box-shadow: 0 12px 30px rgba(76, 71, 141, 0.2);
}

.brand small,
.sidebar .muted {
  display: block;
  color: #cbc7e6;
}

.nav-tabs {
  display: grid;
  gap: 8px;
}

.nav-tab {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #f8fbf6;
  text-align: left;
  padding: 0 14px;
}

.nav-tab.active {
  background: #fbfaf7;
  color: #30265f;
}

.sidebar-card,
.sidebar-note {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-note {
  margin-top: auto;
}

.sidebar-note p {
  margin: 8px 0 0;
  color: #d8d4ee;
  line-height: 1.45;
}

.full-btn {
  width: 100%;
  margin-top: 14px;
}

#businessSelect {
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  border: 0;
  border-radius: 8px;
  padding: 0 10px;
}

.main {
  padding: 28px;
  background:
    radial-gradient(circle at 100% 0, rgba(170, 163, 223, 0.16), transparent 28%),
    #f4f3f7;
  border-top-left-radius: 28px;
  border-bottom-left-radius: 28px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  min-height: 260px;
  border-radius: 8px;
  padding: 34px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(13, 28, 24, 0.93), rgba(13, 28, 24, 0.38)),
    url("https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=1800&q=80")
      center/cover;
  box-shadow: var(--shadow);
}

.eyebrow {
  margin: 0 0 10px;
  color: #d8eee5;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

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

h1 {
  max-width: 830px;
  margin-bottom: 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.04;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 16px;
  font-size: 1.35rem;
}

h3 {
  margin-bottom: 8px;
  font-size: 1rem;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 10px;
}

.hero-stats div {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(8px);
}

.hero-stats strong {
  display: block;
  font-size: 1.22rem;
}

.hero-stats span {
  color: #d9e5dd;
  font-size: 0.86rem;
}

.view {
  display: none;
  margin-top: 24px;
}

.active-view {
  display: block;
}

.grid {
  display: grid;
  gap: 16px;
}

.two-cols {
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.52fr);
}

.three-cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.support-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  align-items: stretch;
}

.panel,
.business-card,
.booking-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 26px rgba(32, 35, 31, 0.06);
}

.app-shell .panel,
.app-shell .business-card,
.app-shell .booking-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 50px rgba(13, 20, 17, 0.1);
}

.panel {
  padding: 18px;
}

.business-card,
.booking-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 176px;
  padding: 16px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 10px;
  background: var(--badge-bg, var(--soft));
  color: var(--badge-color, var(--brand-strong));
  font-size: 0.78rem;
  font-weight: 800;
}

.badge-line {
  width: fit-content;
  border-radius: 0;
  border-bottom: 2px solid currentColor;
  background: transparent;
  padding: 0 0 4px;
}

.badge-soft {
  border-radius: 8px;
  background: color-mix(in srgb, var(--badge-bg, #ffffff) 22%, transparent);
  color: var(--badge-color, #fff);
}

.badge-solid {
  background: var(--badge-bg, var(--site-primary, #111827));
  color: var(--badge-color, #fff);
}

.badge-gradient {
  background: linear-gradient(135deg, var(--badge-from, var(--site-primary, #111827)), var(--badge-to, var(--site-secondary, #d98b74)));
  color: var(--badge-color, #fff);
}

.badge-outline {
  border: 1px solid var(--badge-bg, rgba(255, 255, 255, 0.45));
  background: transparent;
  color: var(--badge-color, #fff);
}

.badge-small {
  min-height: 20px;
  font-size: 0.68rem;
}

.badge-large {
  min-height: 34px;
  padding: 0 14px;
  font-size: 0.95rem;
}

.badge-align-left {
  justify-self: start;
  margin-right: auto;
}

.badge-align-center {
  justify-self: center;
  margin-right: auto;
  margin-left: auto;
}

.badge-align-right {
  justify-self: end;
  margin-left: auto;
}

.badge-width-fit {
  width: fit-content;
  max-width: 100%;
}

.badge-width-medium {
  width: min(360px, 100%);
  justify-content: center;
}

.badge-width-full {
  width: 100%;
  justify-content: center;
}

.badge.standalone {
  display: flex;
  margin-bottom: 14px;
}

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

.helper {
  font-size: 0.9rem;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.metric {
  min-width: 0;
  border-radius: 8px;
  padding: 10px;
  background: #f4f6f1;
}

.metric strong {
  display: block;
  overflow-wrap: anywhere;
}

.metric span {
  color: var(--muted);
  font-size: 0.78rem;
}

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

.field {
  display: grid;
  gap: 6px;
}

.field.full {
  grid-column: 1 / -1;
}

label {
  color: #3f463d;
  font-size: 0.86rem;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  background: #fff;
  color: var(--ink);
}

input[type="file"] {
  border-style: dashed;
  padding: 10px;
  background: #fbfcfa;
}

input[type="file"]::file-selector-button {
  margin-right: 10px;
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--brand);
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}

textarea {
  min-height: 88px;
  resize: vertical;
}

.code-editor {
  min-height: 180px;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.86rem;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  background: var(--brand);
  color: #fff;
  font-weight: 850;
  text-decoration: none;
}

.btn.secondary {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.btn.warning {
  background: var(--accent);
}

.btn.danger {
  background: var(--danger);
}

.login-shell {
  width: min(460px, 100%);
}

.login-card {
  display: grid;
  gap: 20px;
  border: 1px solid rgba(108, 104, 173, 0.2);
  border-radius: 28px;
  padding: 32px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 249, 253, 0.94)),
    radial-gradient(circle at 100% 0, rgba(157, 149, 214, 0.18), transparent 38%);
  box-shadow: 0 28px 80px rgba(76, 71, 141, 0.18);
}

.login-card .brand-mark-image {
  width: 64px;
  height: 64px;
}

.login-card h1 {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: clamp(2rem, 7vw, 3.2rem);
}

.login-card .eyebrow {
  color: var(--brand-strong);
}

.login-form {
  display: grid;
  gap: 14px;
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 86px;
}

.password-toggle {
  position: absolute;
  right: 8px;
  bottom: 8px;
  min-height: 34px;
  border: 1px solid rgba(108, 104, 173, 0.22);
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: var(--brand-strong);
  font-weight: 850;
}

.service-list,
.booking-list,
.field-list {
  display: grid;
  gap: 10px;
}

.list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfa;
}

.list-item p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.owner-editor-details {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

.owner-editor-details > summary {
  list-style: none;
}

.owner-editor-details > summary::-webkit-details-marker {
  display: none;
}

.owner-editor-summary {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  cursor: pointer;
}

.owner-editor-summary::after {
  content: "Editar";
  justify-self: end;
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: #fff;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
}

.owner-editor-details[open] .owner-editor-summary::after {
  content: "Fechar";
}

.owner-editor-summary > span {
  display: grid;
  min-width: 0;
}

.owner-editor-summary strong,
.owner-editor-summary small,
.owner-editor-summary em {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.owner-editor-summary small {
  margin-top: 2px;
  color: var(--muted);
}

.owner-editor-summary em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.84rem;
  font-style: normal;
  line-height: 1.35;
}

.owner-editor-thumb,
.owner-editor-thumb-fallback,
.owner-editor-summary .professional-avatar,
.owner-editor-summary .professional-avatar-fallback {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: cover;
}

.owner-editor-thumb-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #dfe9e2, #f7f2ec);
  color: #29362f;
  font-weight: 950;
}

.owner-editor-details > .service-editor-grid,
.owner-editor-details > .actions {
  margin: 0 12px 12px;
}

.empty-state {
  display: grid;
  gap: 6px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 16px;
  background: #f7f9f5;
  color: var(--ink);
}

.empty-state strong {
  font-size: 0.98rem;
}

.empty-state span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.site-frame {
  min-height: 720px;
  border-radius: 8px;
  padding: 28px;
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 255, 255, 0.68), transparent 24%),
    linear-gradient(135deg, var(--site-primary, #085f52), var(--site-secondary, #d27145)),
    var(--site-bg, #0f1d1a);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.site-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--site-image, none) center/cover;
  opacity: 0.2;
}

.site-content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(370px, 0.55fr);
  gap: 22px;
  align-items: start;
}

.glass-card {
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(18px);
}

.site-hero-card {
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
}

.site-logo {
  display: grid;
  place-items: center;
  width: var(--site-logo-size, 74px);
  height: var(--site-logo-size, 74px);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
}

.site-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-title {
  max-width: 680px;
  margin: 20px 0 12px;
  font-size: clamp(2.2rem, 5vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.site-subtitle {
  max-width: 620px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.05rem;
  line-height: 1.55;
}

.site-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.site-link-row a,
.site-link-fragment {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 9px 13px;
  color: var(--link-color, var(--site-link-color, #fff));
  background: var(--link-bg, var(--site-link-bg, rgba(255, 255, 255, 0.13)));
  text-decoration: none;
  font-weight: 800;
}

.confirm-btn {
  border-radius: var(--confirm-radius, 10px);
  background: var(--confirm-bg, var(--site-primary, #063f35));
  color: var(--confirm-color, #fff);
}

.booking-glass {
  padding: 20px;
}

.panel-solid {
  background: var(--site-panel, rgba(20, 36, 32, 0.94));
}

.panel-gradient {
  background: linear-gradient(135deg, var(--site-panel-from), var(--site-panel-to));
}

.panel-glass {
  background: rgba(255, 255, 255, 0.18);
}

.with-bg-blur {
  backdrop-filter: blur(18px);
}

.no-bg-blur {
  backdrop-filter: none;
}

.booking-glass label {
  color: rgba(255, 255, 255, 0.9);
}

.booking-glass input,
.booking-glass select,
.booking-glass textarea {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.booking-glass input::placeholder,
.booking-glass textarea::placeholder {
  color: rgba(255, 255, 255, 0.62);
}

.booking-glass option {
  color: #161916;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
}

.slot {
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 800;
}

.slot.selected {
  border-color: #fff;
  background: #fff;
  color: var(--site-primary, #085f52);
}

.slot[aria-disabled="true"] {
  cursor: help;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.42);
}

.slot strong,
.slot small {
  display: block;
}

.slot small {
  margin-top: 2px;
  font-size: 0.72rem;
}

.slot.free {
  border-color: rgba(255, 255, 255, 0.46);
}

.slot.blocked {
  border-style: dashed;
}

.slot.occupied {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}

.summary-box {
  border-radius: 8px;
  padding: 14px;
  background: #f3f7f5;
}

.summary-box strong {
  display: block;
  margin-bottom: 6px;
}

.booking-glass .summary-box {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.public-page {
  min-height: 100vh;
  background: #0e1714;
}

.public-site {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.28), transparent 24%),
    linear-gradient(135deg, var(--site-primary, #085f52), var(--site-secondary, #d27145));
}

.public-site::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--site-image, none) center/cover;
  opacity: 0.18;
}

.public-site.bg-blur::before {
  filter: blur(10px);
  transform: scale(1.04);
}

.public-site.bg-sharp::before {
  filter: none;
}

.public-topbar,
.public-booking-wrap {
  position: relative;
  z-index: 1;
}

.public-topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}

.public-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.public-brand strong,
.public-brand span {
  display: block;
}

.public-brand span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
}

.site-link-row.compact {
  margin-top: 0;
}

.public-booking-wrap {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: calc(100vh - 122px);
  padding: 34px 0;
}

.public-booking-card {
  width: min(940px, 100%);
  max-width: 100%;
  min-width: 0;
  padding: 24px;
}

.public-site.layout-split .public-booking-card {
  width: min(1180px, 100%);
}

.public-site.layout-compact .public-booking-card,
.public-site.layout-essential .public-booking-card {
  width: min(760px, 100%);
}

.public-heading {
  margin: 0 0 18px;
}

.public-heading h1 {
  margin: 16px 0 10px;
}

.public-heading p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
}

.public-heading.preview-hero {
  max-width: none;
  text-align: inherit;
}

.public-booking-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.public-step {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.11);
  overflow: hidden;
}

.hidden {
  display: none !important;
}

.public-step.full {
  grid-column: 1 / -1;
}

.step-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.step-title span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--site-primary, #085f52);
  font-size: 0.82rem;
  font-weight: 900;
}

.service-choice-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.professional-choice-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.professional-choice {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 82px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.professional-choice:hover {
  transform: translateY(-1px);
}

.professional-choice.selected,
.professional-choice:has(input:checked) {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.13);
}

.professional-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  accent-color: var(--site-primary);
}

.professional-choice strong,
.professional-choice small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.professional-avatar,
.professional-avatar-fallback {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  object-fit: cover;
}

.professional-avatar-fallback {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 900;
}

.service-choice-list.service-display-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 72%);
  grid-template-columns: none;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  padding: 2px 2px 10px;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

.service-choice-list.service-display-carousel::-webkit-scrollbar {
  display: none;
}

.service-display-carousel .service-choice {
  scroll-snap-align: start;
}

.service-choice {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 96px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.12);
  position: relative;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
  cursor: pointer;
}

.builder-preview .service-choice {
  cursor: grab;
}

.service-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.service-choice:has(input:checked) {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

.service-choice:has(input:checked)::after {
  content: "Selecionado";
  position: absolute;
  top: 10px;
  right: 10px;
  max-width: calc(100% - 20px);
  border-radius: 999px;
  padding: 4px 8px;
  background: #fff;
  color: var(--site-primary);
  font-size: 0.7rem;
  font-weight: 900;
}

.service-choice:has(input:checked) > span {
  padding-top: 18px;
}

.service-choice img,
.service-image-fallback {
  width: 74px;
  height: 74px;
  border-radius: 10px;
  object-fit: cover;
}

.service-image-fallback {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.2);
  font-size: 1.4rem;
  font-weight: 900;
}

.service-choice strong,
.service-choice small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.service-choice small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.74);
}

.service-choice em {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.35;
}

.service-info-btn,
.service-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 28px;
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 900;
}

.product-store-step {
  display: grid;
  gap: 12px;
}

.store-title span {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.26);
}

.product-store-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.product-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.product-card img,
.product-image-fallback {
  width: 86px;
  height: 86px;
  border-radius: 12px;
  object-fit: cover;
}

.product-image-fallback {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1.55rem;
  font-weight: 900;
}

.product-card strong,
.product-card small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.product-card small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 800;
}

.product-card p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.84rem;
  line-height: 1.35;
}

.product-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 30px;
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  padding: 0 11px;
  background: var(--site-link-bg, #111827);
  color: var(--site-link-color, #fff);
  font-size: 0.76rem;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.product-cta.disabled {
  opacity: 0.68;
}

.service-info-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.52);
}

.service-info-modal.show {
  display: grid;
}

.service-info-card {
  width: min(520px, 100%);
  border-radius: 18px;
  padding: 18px;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow);
}

.service-info-card.panel-glass,
.service-info-card.panel-gradient,
.service-info-card.panel-solid {
  color: #fff;
}

.service-info-card.panel-glass {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px);
}

.service-info-card.panel-gradient {
  background: linear-gradient(135deg, var(--site-panel-from), var(--site-panel-to));
}

.service-info-card.panel-solid {
  background: var(--site-panel);
}

.service-info-card img {
  width: 100%;
  max-height: 260px;
  border-radius: 12px;
  object-fit: cover;
}

.service-info-close {
  float: right;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  background: #eef0eb;
}

.coupon-control {
  display: grid;
  gap: 6px;
  min-width: 190px;
}

.footer-links {
  justify-content: center;
  margin-top: 18px;
}

.calendar-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.calendar-day {
  min-width: 0;
  min-height: 86px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.calendar-day.selected {
  border-color: var(--site-date-selected, #fff);
  background: var(--site-date-selected, #fff);
  color: var(--site-date-selected-text, var(--site-primary));
}

.calendar-day.disabled-day {
  cursor: not-allowed;
  border-style: dashed;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.42);
}

.calendar-day span,
.calendar-day small {
  display: block;
  font-size: 0.78rem;
  text-transform: capitalize;
}

.calendar-day strong {
  display: block;
  margin: 3px 0;
  font-size: 1.35rem;
}

.slot-reason {
  min-height: 20px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
}

.service-editor {
  grid-template-columns: 1fr;
}

.service-editor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.builder-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(10, 124, 104, 0.08), transparent 26%),
    #e9ebe4;
}

.builder-error {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}

.builder-error .panel {
  max-width: 560px;
}

.builder-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 340px;
  height: 100vh;
  overflow: hidden;
}

.builder-sidebar,
.builder-inspector {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100vh;
  height: 100vh;
  overflow: auto;
  padding: 18px;
  background: #151f1b;
  color: #f8fbf6;
}

.builder-inspector {
  background:
    radial-gradient(circle at 88% 0%, rgba(10, 124, 104, 0.18), transparent 30%),
    #101815;
  color: #f8fbf6;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -18px 0 42px rgba(6, 10, 8, 0.24);
}

.builder-sidebar .field label,
.builder-inspector .field label {
  color: inherit;
}

.builder-inspector input,
.builder-inspector select,
.builder-inspector textarea {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: #f8fbf6;
}

.builder-inspector option {
  color: #121713;
}

.builder-section {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.065);
}

.builder-section h2,
.builder-inspector h2 {
  margin-bottom: 12px;
  font-size: 1rem;
}

.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.section-heading-row h2 {
  margin-bottom: 0;
}

.section-heading-row span {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #dff5ec;
  font-size: 0.78rem;
  font-weight: 900;
}

.builder-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.tool-tab {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.tool-tab.active {
  background: #fff;
  color: #151f1b;
}

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

.component-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.05);
  cursor: grab;
}

.component-row.active {
  background: rgba(255, 255, 255, 0.16);
}

.component-row.dragging {
  opacity: 0.55;
}

.component-row button {
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.component-name {
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  padding: 0 10px;
}

.component-actions {
  display: flex;
  gap: 5px;
}

.component-actions button {
  min-width: 44px;
  padding: 0 8px;
}

.fragment-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fragment-chip {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 800;
  cursor: grab;
}

.fragment-chip.dragging-live {
  opacity: 0.55;
}

.hero-fragment-manager {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.045);
}

.hero-layer-list {
  display: grid;
  gap: 8px;
}

.hero-layer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.055);
  cursor: grab;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    opacity 0.18s ease;
}

.hero-layer-row.active {
  border-color: rgba(139, 207, 188, 0.72);
  background: rgba(10, 124, 104, 0.2);
  box-shadow: inset 0 0 0 1px rgba(139, 207, 188, 0.12);
}

.hero-layer-row.is-hidden {
  opacity: 0.58;
}

.hero-layer-row.dragging {
  opacity: 0.55;
  transform: scale(0.985);
}

.hero-layer-row.drag-over {
  border-color: rgba(255, 255, 255, 0.46);
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(2px);
}

.hero-layer-main {
  display: grid;
  min-width: 0;
  gap: 2px;
  border: 0;
  border-radius: 9px;
  padding: 8px 10px;
  background: transparent;
  color: #fff;
  text-align: left;
}

.hero-layer-main strong,
.hero-layer-main small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hero-layer-main small {
  color: #a9b8b0;
  font-size: 0.72rem;
}

.hero-layer-type {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(255, 255, 255, 0.1);
  color: #cde8dc;
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-layer-actions {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 5px;
}

.hero-layer-actions button {
  min-height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}

.hero-layer-actions [data-delete-hero-fragment] {
  color: #ffd3d3;
}

.builder-canvas {
  min-width: 0;
  height: 100vh;
  padding: 18px;
  overflow: auto;
}

.builder-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 58px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
}

.builder-topbar strong,
.builder-topbar span {
  display: block;
}

.builder-topbar span {
  color: var(--muted);
  font-size: 0.86rem;
}

.device-frame {
  margin: 0 auto;
  border-radius: 22px;
  background: #111;
  padding: 12px;
  box-shadow: var(--shadow);
  transition:
    width 0.18s ease,
    max-height 0.18s ease,
    border-radius 0.18s ease;
}

.device-frame.desktop {
  width: min(1240px, 100%);
}

.device-frame.tablet {
  width: min(780px, 100%);
}

.device-frame.mobile {
  width: min(412px, 100%);
  aspect-ratio: 9 / 19.5;
  max-height: min(780px, calc(100vh - 118px));
  overflow: hidden;
  border-radius: 30px;
  padding: 10px;
}

.builder-preview {
  min-height: 760px;
  border-radius: 12px;
  padding: 22px;
}

.live-editable {
  touch-action: none;
  cursor: grab;
  transition:
    transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
    outline-color 0.16s ease,
    box-shadow 0.16s ease;
}

.live-editable:hover {
  outline: 2px dashed rgba(255, 255, 255, 0.65);
  outline-offset: 5px;
}

.dragging-live {
  cursor: grabbing;
  outline: 2px solid #fff;
  outline-offset: 6px;
  transition:
    outline-color 0.16s ease,
    box-shadow 0.16s ease;
}

.snapping-live {
  transition: transform 0.24s cubic-bezier(0.2, 0.9, 0.2, 1.12);
}

.preview-stage {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  max-width: 940px;
  min-height: 700px;
  margin: 0 auto;
  align-content: center;
}

.layout-center {
  grid-template-columns: 1fr;
}

.layout-split {
  grid-template-columns: minmax(0, 0.8fr) minmax(380px, 0.55fr);
  max-width: 1180px;
}

.layout-compact {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
  max-width: 760px;
}

.layout-essential {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
  max-width: 760px;
}

.layout-essential .preview-hero {
  display: none;
}

.preview-hero,
.preview-booking {
  border-radius: var(--builder-radius, 18px);
  padding: var(--builder-padding, 24px);
}

.public-booking-card {
  border-radius: var(--builder-radius, 18px);
  padding: var(--builder-padding, 24px);
}

.public-heading h1 {
  font-size: calc(clamp(2rem, 5vw, 4.8rem) * var(--builder-title-scale, 1));
}

.preview-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 320px;
  background: rgba(255, 255, 255, var(--builder-opacity, 0.18));
}

.preview-hero > :not(.snap-zone-layer) {
  position: relative;
  z-index: 1;
}

.hero-slot-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas:
    "top-left top-center top-right"
    "eyebrow eyebrow eyebrow"
    "main main main"
    "sub sub sub"
    "actions-left actions-center actions-right"
    "bottom-left bottom-center bottom-right";
  gap: 10px;
  width: 100%;
  align-items: center;
}

.hero-slot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  transition:
    min-height 0.18s ease,
    background 0.18s ease,
    outline-color 0.18s ease;
}

.slot-align-start {
  justify-content: flex-start;
  text-align: left;
}

.slot-align-center {
  justify-content: center;
  text-align: center;
}

.slot-align-end {
  justify-content: flex-end;
  text-align: right;
}

.slot-align-stack {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.builder-slot-layout .hero-slot {
  border-radius: 16px;
}

.preview-hero.slot-dragging .hero-slot {
  min-height: 62px;
  outline: 1px dashed rgba(255, 255, 255, 0.28);
  outline-offset: 4px;
  background: rgba(255, 255, 255, 0.045);
}

.preview-hero.slot-dragging .hero-slot.slot-over {
  outline-color: #fff;
  background: rgba(255, 255, 255, 0.17);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.hero-slot-top-left {
  grid-area: top-left;
}

.hero-slot-top-center {
  grid-area: top-center;
}

.hero-slot-top-right {
  grid-area: top-right;
}

.hero-slot-eyebrow {
  grid-area: eyebrow;
}

.hero-slot-main {
  grid-area: main;
}

.hero-slot-sub {
  grid-area: sub;
}

.hero-slot-actions-left {
  grid-area: actions-left;
}

.hero-slot-actions-center {
  grid-area: actions-center;
}

.hero-slot-actions-right {
  grid-area: actions-right;
}

.hero-slot-bottom-left {
  grid-area: bottom-left;
}

.hero-slot-bottom-center {
  grid-area: bottom-center;
}

.hero-slot-bottom-right {
  grid-area: bottom-right;
}

.hero-fragment {
  max-width: 100%;
  min-width: 0;
}

.hero-fragment[draggable="true"] {
  cursor: grab;
}

.site-link-fragment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.custom-hero-fragment {
  color: var(--fragment-color, #fff);
  font-size: var(--fragment-size, 16px);
  border-radius: var(--fragment-radius, 999px);
}

.custom-fragment-style-solid,
.custom-fragment-style-glass,
.custom-fragment-style-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
}

.custom-fragment-style-solid {
  background: var(--fragment-bg, #111827);
}

.custom-fragment-style-glass {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
}

.custom-fragment-style-gradient {
  background: linear-gradient(135deg, var(--fragment-from), var(--fragment-to));
}

.custom-fragment-heading {
  margin: 6px 0;
  font-weight: 900;
  line-height: 1.02;
}

.custom-fragment-text {
  margin: 0;
}

.custom-fragment-image {
  overflow: hidden;
}

.custom-fragment-image img {
  display: block;
  width: min(140px, 28vw);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: inherit;
}

.hero-slot-layout h1.hero-fragment,
.hero-slot-layout h1.live-editable {
  width: 100%;
}

.hero-slot-layout p.hero-fragment,
.hero-slot-layout p.live-editable {
  width: 100%;
}

.hero-align-left {
  align-items: flex-start;
  text-align: left;
}

.hero-align-center {
  align-items: center;
  text-align: center;
}

.hero-align-right {
  align-items: flex-end;
  text-align: right;
}

.preview-hero h1 {
  margin: 16px 0 10px;
  color: var(--hero-title-color, #fff);
  font-family: var(--hero-title-font, Inter, system-ui, sans-serif);
  font-size: calc(clamp(2rem, 5vw, 4.8rem) * var(--builder-title-scale, 1));
  line-height: 0.98;
}

.preview-hero p {
  max-width: 660px;
  color: var(--hero-text-color, rgba(255, 255, 255, 0.82));
  font-family: var(--hero-text-font, Inter, system-ui, sans-serif);
  line-height: 1.55;
}

.public-heading {
  display: flex;
  flex-direction: column;
}

.public-heading h1 {
  font-family: var(--hero-title-font, Inter, system-ui, sans-serif);
}

.public-heading p {
  font-family: var(--hero-text-font, Inter, system-ui, sans-serif);
  color: var(--hero-text-color, rgba(255, 255, 255, 0.82));
}

.required-dot {
  color: var(--site-required, #ff4d4d);
  margin-left: 4px;
}

.preview-booking {
  display: grid;
  gap: 16px;
}

.preview-slots {
  margin-top: 10px;
}

.inspector-service-list {
  display: grid;
  gap: 10px;
}

.inspector-service-list details {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.055);
}

.service-detail-editor {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.service-detail-editor.dragging {
  opacity: 0.7;
  transform: scale(0.985);
  border-color: var(--brand);
  box-shadow: 0 14px 34px rgba(10, 124, 104, 0.14);
}

.service-sort-card {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.service-sort-card.drag-over,
.service-detail-editor.drag-over {
  border-color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.32);
}

.field-order-list details {
  cursor: grab;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.field-order-list details.dragging {
  opacity: 0.58;
  transform: scale(0.99);
}

.inspector-card {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.055);
}

.inspector-card h3 {
  margin-bottom: 0;
  font-size: 0.94rem;
}

.inspector-service-list summary {
  cursor: pointer;
  font-weight: 800;
  margin-bottom: 10px;
}

.compact-color-field {
  max-width: 180px;
}

.color-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.color-control input[type="color"] {
  width: 46px;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: var(--picked-color);
  overflow: hidden;
}

.color-control input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-control input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 999px;
}

.color-control span {
  color: #c2cec7;
  font-size: 0.82rem;
}

.theme-preset-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.theme-preset {
  display: flex;
  align-items: center;
  gap: 0;
  width: 54px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  background: #fff;
}

.theme-preset span {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  margin-left: -3px;
}

.theme-preset span:first-child {
  margin-left: 0;
}

.niche-template-list {
  display: grid;
  gap: 8px;
}

.niche-template {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: #f8fbf6;
  text-align: left;
}

.niche-template:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
}

.niche-template span {
  width: 42px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--a), var(--b));
}

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

.background-preset {
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background-size: cover;
  background-position: center;
}

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

.exclusive-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.exclusive-list input {
  width: 16px;
  min-height: 16px;
}

.professional-picker-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  min-width: 0;
}

.professional-picker-list > .helper {
  grid-column: 1 / -1;
}

.professional-picker-item {
  position: relative;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.professional-picker-item:hover {
  transform: translateY(-1px);
  border-color: rgba(10, 124, 104, 0.32);
}

.professional-picker-item:has(input:checked) {
  border-color: rgba(10, 124, 104, 0.72);
  background: #eef8f3;
  box-shadow: inset 0 0 0 1px rgba(10, 124, 104, 0.18);
}

.professional-picker-item input {
  grid-column: 3;
  width: 18px;
  min-height: 18px;
  accent-color: var(--brand);
}

.professional-picker-item .professional-avatar,
.professional-picker-item .professional-avatar-fallback {
  grid-column: 1;
  grid-row: 1;
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.professional-picker-item > span:not(.professional-avatar):not(.professional-avatar-fallback) {
  min-width: 0;
}

.professional-picker-item strong,
.professional-picker-item small {
  display: block;
  overflow-wrap: anywhere;
}

.professional-picker-item small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

.builder-page .professional-picker-item {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: #f8fbf6;
}

.builder-page .professional-picker-item:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
}

.builder-page .professional-picker-item:has(input:checked) {
  border-color: rgba(139, 207, 188, 0.74);
  background: rgba(10, 124, 104, 0.22);
  box-shadow: inset 0 0 0 1px rgba(139, 207, 188, 0.18);
}

.builder-page .professional-picker-item small {
  color: #a9b8b0;
}

.whatsapp-btn {
  background: #1f9d55;
}

.device-frame.mobile .layout-split,
.device-frame.mobile .layout-center,
.device-frame.mobile .layout-compact,
.device-frame.mobile .layout-essential {
  grid-template-columns: 1fr;
}

.device-frame.mobile .preview-stage {
  align-content: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: auto;
  gap: 12px;
}

.device-frame.mobile .builder-preview {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 20px;
  padding: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.42) transparent;
  scroll-behavior: smooth;
}

.device-frame.mobile .builder-preview::-webkit-scrollbar {
  width: 6px;
}

.device-frame.mobile .builder-preview::-webkit-scrollbar-track {
  background: transparent;
}

.device-frame.mobile .builder-preview::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
}

.device-frame.mobile .preview-booking,
.device-frame.mobile .preview-hero {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 16px;
}

.device-frame.mobile .public-booking-grid,
.device-frame.mobile .form-grid,
.device-frame.mobile .summary-step {
  grid-template-columns: 1fr;
}

.device-frame.mobile .layout-essential {
  max-width: 100%;
}

.device-frame.mobile .layout-essential .preview-booking {
  padding: 8px;
}

.device-frame.mobile .public-step.full {
  grid-column: auto;
}

.device-frame.mobile .service-choice-list:not(.service-display-carousel),
.device-frame.mobile .professional-choice-list,
.device-frame.mobile .product-store-list {
  grid-template-columns: 1fr;
}

.device-frame.mobile .service-choice-list.service-display-carousel {
  grid-auto-columns: minmax(0, 100%);
  gap: 8px;
  mask-image: none;
  padding: 2px 0 8px;
}

.device-frame.mobile .service-choice {
  grid-template-columns: 54px minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  min-height: 80px;
  gap: 8px;
  padding: 9px;
}

.device-frame.mobile .layout-essential .service-choice-list.service-display-carousel {
  grid-auto-columns: minmax(0, 100%);
}

.device-frame.mobile .layout-essential .public-step {
  padding: 9px;
}

.device-frame.mobile .layout-essential .step-title {
  gap: 7px;
  font-size: 0.9rem;
}

.device-frame.mobile .service-choice:has(input:checked)::after {
  top: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  padding: 0;
  overflow: hidden;
  color: transparent;
  font-size: 0;
}

.device-frame.mobile .service-choice:has(input:checked) > span {
  padding-top: 0;
}

.device-frame.mobile .service-choice img,
.device-frame.mobile .service-image-fallback,
.device-frame.mobile .product-card img,
.device-frame.mobile .product-image-fallback,
.device-frame.mobile .professional-avatar,
.device-frame.mobile .professional-avatar-fallback {
  width: 54px;
  height: 54px;
}

.device-frame.mobile .service-choice strong {
  font-size: 0.84rem;
  line-height: 1.15;
}

.device-frame.mobile .service-choice small {
  margin-top: 2px;
  font-size: 0.74rem;
  line-height: 1.2;
}

.device-frame.mobile .service-choice em {
  margin-top: 4px;
  font-size: 0.72rem;
  line-height: 1.25;
}

.device-frame.mobile .service-info-btn,
.device-frame.mobile .service-more {
  min-height: 24px;
  margin-top: 6px;
  padding: 0 8px;
  font-size: 0.68rem;
}

.device-frame.mobile .product-card {
  grid-template-columns: 58px minmax(0, 1fr);
  padding: 10px;
}

.device-frame.mobile .calendar-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.device-frame.mobile .slot-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.device-frame.mobile .field.full,
.device-frame.mobile .summary-step .summary-box,
.device-frame.mobile .payment-control,
.device-frame.mobile .coupon-control {
  min-width: 0;
}

.device-frame.mobile .confirm-btn {
  width: 100%;
}

.summary-step {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.summary-step .summary-box {
  flex: 1 1 360px;
}

.admin-command,
.owner-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 16px;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(13, 21, 18, 0.96), rgba(24, 44, 37, 0.92)),
    radial-gradient(circle at 82% 20%, rgba(10, 124, 104, 0.24), transparent 32%);
  color: #fff;
  box-shadow: 0 22px 54px rgba(7, 12, 10, 0.22);
}

.admin-command h2,
.owner-dashboard h2 {
  margin-bottom: 8px;
  font-size: clamp(1.65rem, 2.4vw, 2.8rem);
}

.admin-command p,
.owner-dashboard p {
  margin-bottom: 0;
  color: #c8d7cf;
}

.owner-dashboard {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 248, 234, 0.12), transparent 28%),
    linear-gradient(135deg, #30265f, #6c68ad);
  box-shadow: 0 24px 64px rgba(48, 38, 95, 0.22);
}

.owner-layout {
  align-items: start;
  height: calc(100vh - 300px);
  min-height: 620px;
  overflow: hidden;
}

.owner-layout-focus {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.46fr);
}

.owner-settings-stack,
.owner-side {
  align-content: start;
  max-height: 100%;
  min-height: 0;
  overflow: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(108, 104, 173, 0.6) rgba(108, 104, 173, 0.08);
}

.owner-side {
  position: static;
}

.owner-settings-stack::-webkit-scrollbar,
.owner-side::-webkit-scrollbar {
  width: 8px;
}

.owner-settings-stack::-webkit-scrollbar-thumb,
.owner-side::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(108, 104, 173, 0.5);
}

.owner-section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}

.owner-section-tabs button {
  min-height: 42px;
  border: 1px solid rgba(108, 104, 173, 0.2);
  border-radius: 999px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--brand-strong);
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(76, 71, 141, 0.08);
}

.owner-section-tabs button.active {
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #fff;
}

.owner-section-pane {
  display: none;
}

.owner-section-pane.active {
  display: grid;
  gap: 16px;
}

.owner-hero-panel .actions {
  margin-top: 18px;
}

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

.quick-metrics .metric,
.admin-command .metric {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.quick-metrics .metric span {
  color: #ebe8ff;
}

.storage-admin-panel {
  margin-top: 18px;
}

.panel-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.panel-heading-row h2 {
  margin-bottom: 6px;
}

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

.storage-grid > div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: var(--soft);
}

.storage-grid p,
.storage-grid small {
  overflow-wrap: anywhere;
}

.storage-grid small {
  color: var(--muted);
}

.settings-panel {
  padding: 0;
  overflow: hidden;
}

.section-highlight {
  animation: sectionPulse 1.2s ease;
}

@keyframes sectionPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(13, 141, 116, 0.36), 0 10px 26px rgba(32, 35, 31, 0.06);
  }

  100% {
    box-shadow: 0 0 0 18px rgba(13, 141, 116, 0), 0 10px 26px rgba(32, 35, 31, 0.06);
  }
}

.settings-panel > summary {
  cursor: pointer;
  padding: 18px;
  font-size: 1.05rem;
  font-weight: 900;
}

.settings-panel > form,
.settings-panel > .field-list,
.settings-panel > .service-list,
.settings-panel > form + * {
  padding: 0 18px 18px;
}

.owner-form-block {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 247, 0.98)),
    radial-gradient(circle at 100% 0, rgba(108, 104, 173, 0.09), transparent 36%);
}

.owner-form-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.owner-form-block-head strong,
.owner-form-block-head span {
  display: block;
}

.owner-form-block-head strong {
  font-size: 1rem;
}

.owner-form-block-head span {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}

.owner-form-block-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.owner-form-block-grid > .field.full,
.owner-form-block-grid > .payment-box,
.owner-form-block-grid > .policy-box {
  grid-column: 1 / -1;
}

.payment-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: #f7f5fd;
}

.policy-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: #f8f7fd;
}

.payment-box > label,
.payment-box .field.full,
.policy-box > label,
.policy-box .field.full {
  grid-column: 1 / -1;
}

.professional-picker-box > .helper,
.professional-picker-box > .professional-picker-list {
  grid-column: 1 / -1;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 10px;
  background: #fff;
  font-weight: 750;
}

.check-row input {
  width: 18px;
  min-height: 18px;
}

.public-url-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px;
}

.badge.published {
  color: #0a5c48;
  background: #dff7ec;
}

.badge.draft {
  color: #7a4b00;
  background: #fff1cd;
}

.public-url-card strong {
  display: block;
  margin-top: 8px;
  font-size: 1.12rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.public-url-card p {
  max-width: 38ch;
  margin: 6px 0 0;
}

.public-url-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  margin-top: 0;
}

.public-url-actions .btn {
  width: 100%;
  white-space: normal;
  text-align: center;
}

.link-agenda-card {
  border-color: rgba(108, 104, 173, 0.22);
  background:
    radial-gradient(circle at 100% 0, rgba(170, 163, 223, 0.2), transparent 36%),
    #fff;
}

.agenda-link-row {
  align-items: center;
}

.agenda-link-row small,
.finance-movement-row small {
  display: block;
  color: var(--muted);
}

.owner-workspace-card {
  min-height: 100%;
  border-radius: 22px;
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 249, 253, 0.98)),
    radial-gradient(circle at 100% 0, rgba(170, 163, 223, 0.16), transparent 34%);
}

.owner-finance-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.owner-finance-kpis .metric,
.finance-compact-card .metric {
  border-color: rgba(108, 104, 173, 0.12);
  background: #f5f3fb;
}

.finance-period-control {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.finance-period-control button {
  min-height: 36px;
  border: 1px solid rgba(108, 104, 173, 0.18);
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: var(--brand-strong);
  font-weight: 850;
}

.finance-period-control button.active {
  background: var(--brand);
  color: #fff;
}

.finance-chart-card {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(108, 104, 173, 0.16);
  border-radius: 18px;
  padding: 16px;
  background: #fff;
}

.finance-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  min-height: 170px;
  padding-top: 10px;
}

.finance-bar-item {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 8px;
  height: 170px;
  text-align: center;
}

.finance-bar-item span {
  align-self: end;
  min-height: 10px;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, var(--accent), var(--brand));
  box-shadow: 0 10px 22px rgba(108, 104, 173, 0.18);
}

.finance-bar-item small {
  color: var(--muted);
  font-weight: 800;
}

.finance-table {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.finance-table-head,
.finance-movement-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.finance-movement-row {
  border: 1px solid rgba(108, 104, 173, 0.12);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}

.account-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  gap: 16px;
}

.account-form,
.account-password-card {
  border: 1px solid rgba(108, 104, 173, 0.14);
  border-radius: 18px;
  padding: 16px;
  background: #fff;
}

.owner-profile-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(108, 104, 173, 0.14);
  border-radius: 16px;
  padding: 12px;
  background: #f5f3fb;
}

.owner-profile-preview img,
.owner-profile-preview > span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #fff;
  font-size: 1.4rem;
  font-weight: 950;
  object-fit: cover;
}

.compact-events {
  margin-bottom: 16px;
}

.owner-setup-guide {
  display: grid;
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 246, 0.98)),
    radial-gradient(circle at 0 0, rgba(13, 141, 116, 0.1), transparent 36%);
}

.owner-setup-guide .panel-heading-row {
  margin-bottom: 0;
}

.owner-setup-guide h2 {
  margin: 8px 0 6px;
}

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

.owner-guide-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.owner-guide-item:hover {
  border-color: rgba(13, 141, 116, 0.42);
  box-shadow: 0 12px 28px rgba(18, 42, 34, 0.1);
  transform: translateY(-1px);
}

.owner-guide-item > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  grid-row: span 2;
  border-radius: 999px;
  background: #fff1cd;
  color: #7a4b00;
  font-size: 0.76rem;
  font-weight: 950;
}

.owner-guide-item.done > span {
  background: #dff7ec;
  color: #0a5c48;
}

.owner-guide-item strong,
.owner-guide-item small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.owner-guide-item small {
  color: var(--muted);
  line-height: 1.35;
}

.terms-control {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.12);
}

.terms-control strong,
.terms-control p,
.terms-control small {
  color: inherit;
}

.terms-control p {
  margin: 0;
  line-height: 1.45;
  opacity: 0.88;
}

.terms-control small {
  opacity: 0.78;
}

.terms-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 4px;
  font-weight: 850;
}

.terms-check input {
  width: 18px;
  min-height: 18px;
  margin-top: 2px;
}

.publication-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-left: 5px solid #b98a22;
}

.publication-card.online {
  border-left-color: #0d8d74;
}

.publication-card h2 {
  margin: 8px 0 6px;
}

.publication-actions {
  display: flex;
  justify-content: flex-end;
}

.share-kit-card {
  display: grid;
  gap: 14px;
}

.demo-launch-card {
  display: grid;
  gap: 14px;
  overflow: hidden;
  border-color: rgba(13, 141, 116, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 247, 0.98)),
    radial-gradient(circle at 100% 0, rgba(13, 141, 116, 0.12), transparent 38%);
}

.demo-launch-card.draft {
  border-color: rgba(185, 138, 34, 0.28);
}

.demo-launch-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.demo-launch-head h2 {
  margin: 8px 0 6px;
}

.demo-launch-head > strong {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  background: #fff;
  color: #0b6d58;
  font-size: 0.82rem;
}

.demo-flow {
  display: grid;
  gap: 8px;
}

.demo-flow-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.82);
}

.demo-flow-step > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  background: #10251f;
  color: #fff;
  font-weight: 900;
}

.demo-flow-step strong,
.demo-flow-step small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.demo-flow-step small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.demo-flow-step .btn {
  min-height: 36px;
  padding: 0 12px;
}

.demo-url-stack {
  display: grid;
  gap: 8px;
}

.demo-url-stack > div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #fbfcfa;
}

.demo-url-stack small,
.demo-url-stack strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.demo-url-stack small {
  margin-bottom: 3px;
  color: var(--muted);
}

.demo-warning,
.demo-success {
  display: grid;
  gap: 3px;
  border-radius: 14px;
  padding: 12px;
}

.demo-warning {
  border: 1px solid rgba(185, 96, 52, 0.24);
  background: #fff4eb;
  color: #6e3218;
}

.demo-success {
  border: 1px solid rgba(13, 141, 116, 0.22);
  background: #eaf8f2;
  color: #0a5c48;
}

.demo-warning span,
.demo-success span {
  line-height: 1.35;
}

.share-kit-card h2 {
  margin: 8px 0 6px;
}

.share-link-list {
  display: grid;
  gap: 8px;
}

.share-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #fbfcfa;
}

.share-link-row strong,
.share-link-row span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.share-link-row span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.82rem;
}

.share-link-row .btn {
  min-height: 36px;
  padding: 0 12px;
}

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

.share-actions .btn {
  width: 100%;
  white-space: normal;
}

.export-center-card {
  display: grid;
  gap: 14px;
}

.export-center-card h2 {
  margin: 8px 0 6px;
}

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

.export-summary-grid .metric {
  min-height: 70px;
}

.export-actions,
.admin-command-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
}

.export-actions .btn,
.admin-command-actions .btn {
  width: 100%;
  white-space: normal;
}

.ops-card {
  display: grid;
  gap: 14px;
}

.ops-card h2 {
  margin: 8px 0 4px;
}

.ops-grid {
  display: grid;
  gap: 8px;
}

.ops-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #fbfcfa;
}

.ops-item > span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #9aa59c;
}

.ops-item.ok > span {
  background: #0a7c68;
}

.ops-item.warn > span {
  background: #c6633b;
}

.ops-item strong,
.ops-item small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ops-item small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

.unpublished-site {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  color: #fff;
}

.unpublished-site::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(7, 11, 18, 0.78), rgba(26, 42, 36, 0.62)),
    var(--site-image) center / cover;
  z-index: -2;
}

.unpublished-site.bg-blur::before {
  filter: blur(10px) scale(1.04);
}

.unpublished-card {
  width: min(520px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 24px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(22px);
}

.unpublished-card.panel-solid {
  background: var(--site-panel);
}

.unpublished-card.panel-gradient {
  background: linear-gradient(135deg, var(--site-panel-from), var(--site-panel-to));
}

.unpublished-card img,
.unpublished-card .fallback-logo {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 22px;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  font-size: 2rem;
  font-weight: 900;
}

.unpublished-card span {
  display: inline-flex;
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.2);
  font-weight: 900;
}

.unpublished-card h1 {
  margin: 16px 0 10px;
  font-size: clamp(2rem, 8vw, 4rem);
}

.unpublished-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
}

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

.readiness-card {
  display: grid;
  gap: 14px;
}

.readiness-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.readiness-head h2 {
  margin: 8px 0 4px;
}

.readiness-head > strong {
  display: grid;
  place-items: center;
  min-width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #edf6f1;
  color: var(--brand-strong);
  font-size: 1.05rem;
}

.readiness-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf0e8;
}

.readiness-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transition: width 0.22s ease;
}

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

.readiness-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #fbfcfa;
}

.readiness-item > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #fff1df;
  color: #8a4c16;
  font-size: 0.72rem;
  font-weight: 950;
}

.readiness-item.done > span {
  background: #e4f5ed;
  color: var(--brand-strong);
}

.readiness-item strong,
.readiness-item small {
  display: block;
}

.readiness-item small {
  margin-top: 2px;
  color: var(--muted);
  line-height: 1.35;
}

.booking-support-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: #fbfcfa;
}

.booking-support-details {
  padding: 0;
  overflow: hidden;
}

.booking-support-details > summary {
  list-style: none;
}

.booking-support-details > summary::-webkit-details-marker {
  display: none;
}

.booking-support-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  cursor: pointer;
}

.booking-support-head strong,
.booking-support-head span,
.booking-support-head small {
  display: block;
}

.booking-support-head > div > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.9rem;
}

.booking-support-head > div > small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.booking-support-body {
  display: grid;
  gap: 5px;
  padding: 0 14px;
  color: #344039;
  line-height: 1.45;
}

.booking-support-body p {
  margin: 0;
  overflow-wrap: anywhere;
}

.booking-support-details > .actions {
  margin: 0 14px 14px;
}

.booking-support-details:not([open]) {
  background: #fff;
}

.booking-support-details:not([open]) .booking-support-head {
  align-items: center;
}

.event-timeline {
  display: grid;
  gap: 10px;
}

.event-item {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: #fbfcfa;
}

.event-item strong,
.event-item span {
  display: block;
}

.event-item strong {
  line-height: 1.35;
}

.event-item span,
.event-item p {
  color: var(--muted);
  font-size: 0.86rem;
}

.event-item p {
  margin: 0;
}

.payment-control {
  display: grid;
  gap: 6px;
  flex: 1 1 240px;
  min-width: 220px;
}

.payment-control small {
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.35;
}

.payment-control.disabled {
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  padding: 12px;
  color: #fff;
}

.pix-copy-card {
  display: grid;
  gap: 12px;
}

.pix-qr-image {
  width: min(220px, 72vw);
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 16px;
  padding: 10px;
  background: #fff;
  object-fit: contain;
}

.pix-copy-card textarea {
  min-height: 120px;
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  font-size: 0.82rem;
  resize: none;
}

.site-link-row a.link-style-gradient,
.site-link-fragment.link-style-gradient {
  background: linear-gradient(135deg, var(--link-from), var(--link-to));
}

.site-link-row a.link-style-glass,
.site-link-fragment.link-style-glass {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
}

.placement-grid button {
  min-height: 30px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 850;
  transition:
    transform 0.16s ease,
    background 0.16s ease;
}

.placement-grid button:hover {
  transform: translateY(-1px);
}

.snap-zone-layer {
  position: absolute;
  inset: clamp(18px, 4vw, 42px);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.builder-preview.is-dragging-magnet .snap-zone-layer {
  opacity: 1;
}

.snap-zone {
  position: absolute;
  display: grid;
  place-items: center;
  width: min(28%, 240px);
  height: min(34%, 138px);
  border: 1px dashed rgba(255, 255, 255, 0.36);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(7, 13, 11, 0.12);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 20px 44px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.snap-zone::after {
  content: attr(data-label);
}

.snap-zone.active {
  transform: scale(1.035);
  border-color: #fff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.1)),
    rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.32),
    0 18px 60px rgba(255, 255, 255, 0.12);
}

.zone-top-center.active,
.zone-bottom-center.active {
  transform: translateX(-50%) scale(1.035);
}

.zone-top-left {
  top: 0;
  left: 0;
}

.zone-top-center {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.zone-top-right {
  top: 0;
  right: 0;
}

.zone-bottom-left {
  bottom: 0;
  left: 0;
}

.zone-bottom-center {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.zone-bottom-right {
  right: 0;
  bottom: 0;
}

.placement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.placement-grid button {
  min-height: 42px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
  color: transparent;
  font-size: 0;
}

.placement-grid button::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 auto;
  border-radius: 999px;
  background: #dff2eb;
}

.inspector-accordion summary {
  cursor: pointer;
  font-weight: 900;
}

.weekly-schedule-editor {
  display: grid;
  gap: 14px;
}

.week-row {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035)),
    rgba(10, 20, 17, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.week-row-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.week-day-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.week-day-label strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.95rem;
}

.week-day-label small {
  min-width: 0;
  color: rgba(248, 251, 246, 0.66);
  font-size: 0.76rem;
  font-weight: 800;
  text-align: right;
}

.week-status-field .field {
  gap: 7px;
}

.week-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.week-time-grid .field {
  gap: 7px;
  min-width: 0;
}

.week-time-grid input {
  min-width: 0;
  min-height: 44px;
}

.week-row.is-closed {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.week-row.is-closed .week-time-grid {
  opacity: 0.68;
}

.builder-preview img,
.public-site img,
.site-logo,
.site-link-row a {
  -webkit-user-drag: none;
  user-select: none;
}

.builder-preview [data-preview-component]:hover {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.status {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--soft);
  color: var(--brand-strong);
  font-size: 0.78rem;
  font-weight: 850;
}

.status.cancelled {
  background: #f7e8e8;
  color: var(--danger);
}

.status.warning {
  background: #fff1cd;
  color: #7a4b00;
}

.status.paid {
  background: #e6f6ee;
  color: #0b6b4e;
}

.status.pending {
  background: #fff1df;
  color: #8a4c16;
}

.status.payment-pending {
  background: #f5e9ff;
  color: #67348e;
}

.onboarding-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 10%, rgba(12, 137, 111, 0.18), transparent 34%),
    linear-gradient(135deg, #0b1512, #18241f 46%, #f3f5ef);
  color: #f8fbf6;
}

.onboarding-shell {
  display: grid;
  grid-template-columns: minmax(320px, 440px) minmax(0, 1fr);
  gap: 24px;
  min-height: 100vh;
  padding: 20px;
}

.onboarding-panel {
  display: grid;
  align-content: start;
  gap: 16px;
}

.onboarding-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.onboarding-brand > span,
.onboarding-brand > img {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #d86d42;
  font-weight: 950;
}

.onboarding-brand > img {
  border-radius: 50%;
  background: #fbfaf7;
  object-fit: cover;
}

.onboarding-brand small,
.onboarding-card .muted {
  color: rgba(248, 251, 246, 0.68);
}

.onboarding-progress {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.onboarding-progress button {
  display: grid;
  gap: 6px;
  align-content: center;
  justify-items: center;
  min-width: 0;
  min-height: 66px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(248, 251, 246, 0.72);
  font-size: 0.74rem;
  font-weight: 850;
  text-align: center;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.onboarding-progress button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.onboarding-progress span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.onboarding-progress strong {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.12;
}

.onboarding-progress button.active,
.onboarding-progress button.done {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.onboarding-progress button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.onboarding-progress button:disabled:hover {
  transform: none;
  box-shadow: none;
}

.onboarding-card {
  display: grid;
  gap: 14px;
  min-height: 560px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 20px;
  background: rgba(12, 24, 20, 0.82);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  animation: onboarding-card-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.onboarding-card h1 {
  margin: 0;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.05;
}

.onboarding-card .field span,
.onboarding-card .field label {
  color: #f8fbf6;
}

.onboarding-card input,
.onboarding-card select,
.onboarding-card textarea {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.onboarding-card input:focus,
.onboarding-card select:focus,
.onboarding-card textarea:focus {
  border-color: rgba(31, 185, 153, 0.75);
  box-shadow: 0 0 0 4px rgba(31, 185, 153, 0.16);
  outline: 0;
}

.onboarding-card textarea {
  min-height: 110px;
  resize: vertical;
}

.password-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.password-input-wrap button {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 900;
}

.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}

.onboarding-two,
.onboarding-service-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

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

.template-choice {
  display: grid;
  gap: 8px;
  min-height: 112px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-align: left;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.template-choice > span {
  width: 100%;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--from), var(--to));
}

.template-choice small {
  color: rgba(248, 251, 246, 0.62);
}

.template-choice.selected {
  border-color: rgba(255, 255, 255, 0.54);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.template-choice:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.1);
}

.hero-picker {
  display: grid;
  gap: 10px;
}

.hero-picker > strong {
  color: #f8fbf6;
}

.hero-picker > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.hero-picker button {
  position: relative;
  min-height: 78px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.58)),
    var(--hero-thumb) center/cover;
  color: #fff;
  font-weight: 900;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.hero-picker button:hover,
.hero-picker button.selected {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
}

.hero-picker button span {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  text-align: left;
  font-size: 0.75rem;
}

.onboarding-upload-highlight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(31, 185, 153, 0.34);
  border-radius: 18px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(31, 185, 153, 0.16), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.04);
}

.onboarding-upload-highlight strong,
.onboarding-upload-highlight span {
  display: block;
}

.onboarding-upload-highlight span,
.onboarding-upload-preview span {
  color: rgba(248, 251, 246, 0.68);
  font-size: 0.82rem;
}

.onboarding-upload-highlight label {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(248, 251, 246, 0.94);
  color: #07120e;
  font-weight: 950;
  cursor: pointer;
}

.onboarding-upload-highlight input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.onboarding-upload-preview {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 6px 10px 6px 6px;
  background: rgba(255, 255, 255, 0.08);
}

.onboarding-upload-preview img {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
}

.weekday-picker {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.weekday-picker button {
  display: grid;
  place-items: center;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(248, 251, 246, 0.7);
  font-weight: 900;
  transition:
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.weekday-picker button.active {
  background: #f8fbf6;
  color: #0f1c18;
  box-shadow: 0 10px 24px rgba(248, 251, 246, 0.18);
}

.weekday-picker button:hover {
  transform: translateY(-2px);
}

.week-schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.week-day-card {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.055);
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.week-day-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.22);
}

.week-day-card.closed {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(248, 251, 246, 0.62);
}

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

.week-day-head strong {
  color: #fff;
  font-size: 1rem;
}

.week-day-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.week-day-head button,
.week-day-actions button {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #f8fbf6;
  font-weight: 900;
}

.week-day-head button[aria-pressed="true"],
.week-day-actions button[aria-pressed="true"] {
  border-color: rgba(31, 185, 153, 0.56);
  background: rgba(31, 185, 153, 0.18);
}

.week-day-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

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

.compact-time-field {
  gap: 5px;
}

.compact-time-field span {
  font-size: 0.78rem;
}

.compact-time-field input:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.payment-choice-grid {
  display: grid;
  gap: 10px;
}

.payment-choice-grid button,
.deposit-card > button {
  display: grid;
  gap: 5px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.065);
  color: #fff;
  text-align: left;
  transition:
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.payment-choice-grid button small,
.deposit-card small {
  color: rgba(248, 251, 246, 0.62);
}

.payment-choice-grid button.active,
.deposit-card.active > button {
  border-color: rgba(31, 185, 153, 0.62);
  background: linear-gradient(135deg, rgba(31, 185, 153, 0.22), rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.payment-choice-grid button:hover,
.deposit-card > button:hover {
  transform: translateY(-2px);
}

.deposit-card {
  display: grid;
  gap: 12px;
}

.onboarding-services-editor {
  display: grid;
  gap: 14px;
}

.onboarding-service-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.055);
  transition:
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.2s ease,
    background 0.2s ease;
}

.onboarding-service-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
}

.service-photo-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 82px;
  min-height: 82px;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 950;
}

.service-photo-uploader {
  cursor: pointer;
}

.service-photo-uploader input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.service-photo-uploader small {
  position: absolute;
  right: 6px;
  bottom: 6px;
  left: 6px;
  border-radius: 999px;
  padding: 4px 6px;
  background: rgba(7, 18, 14, 0.78);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 900;
  text-align: center;
}

.service-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px 82px;
  gap: 9px;
}

.service-edit-grid label {
  display: grid;
  gap: 5px;
}

.service-edit-grid label span {
  color: rgba(248, 251, 246, 0.78);
  font-size: 0.72rem;
  font-weight: 900;
}

.service-edit-grid label small {
  color: rgba(248, 251, 246, 0.58);
  font-size: 0.7rem;
}

.service-url-field,
.service-description-field {
  grid-column: 1 / -1;
}

.service-edit-grid textarea {
  min-height: 72px;
}

.service-card-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.upload-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
  font-weight: 900;
  cursor: pointer;
}

.upload-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.service-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  border: 1px solid rgba(255, 131, 131, 0.34);
  border-radius: 999px;
  padding: 0 12px 0 14px;
  background: linear-gradient(135deg, rgba(210, 64, 64, 0.18), rgba(255, 255, 255, 0.07));
  color: #ffe8e8;
  font-weight: 900;
  transition:
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.18s ease,
    background 0.18s ease;
}

.service-remove-btn strong {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  line-height: 1;
}

.service-remove-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 131, 131, 0.7);
  background: linear-gradient(135deg, rgba(210, 64, 64, 0.28), rgba(255, 255, 255, 0.09));
}

.onboarding-summary,
.success-box {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.08);
}

.success-box {
  border-color: rgba(62, 207, 142, 0.45);
  background: rgba(62, 207, 142, 0.16);
  color: #dffbea;
  font-weight: 850;
  animation: success-pop 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.error-box {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 111, 111, 0.42);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(180, 39, 39, 0.16);
  color: #ffe7e7;
  font-weight: 800;
}

.onboarding-preview-wrap {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}

.preview-browser-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.92);
  color: #101712;
}

.preview-browser-bar span {
  color: #667066;
}

.onboarding-site-preview {
  position: relative;
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: calc(100vh - 90px);
  overflow: hidden;
  border: 12px solid #111827;
  border-radius: 26px;
  padding: clamp(18px, 4vw, 54px);
  color: #fff;
  transition:
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.onboarding-site-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(11, 21, 18, 0.74), rgba(0, 0, 0, 0.2)),
    var(--site-image) center/cover;
  filter: blur(2px);
  transform: scale(1.02);
  transition:
    background 0.36s ease,
    filter 0.36s ease,
    transform 0.36s ease;
}

.onboarding-site-card,
.onboarding-booking-card {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel-from) 72%, transparent), color-mix(in srgb, var(--panel-to) 62%, transparent));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.2);
  animation: preview-soft-in 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.onboarding-site-card {
  display: grid;
  gap: 14px;
  max-width: 900px;
  padding: clamp(20px, 4vw, 44px);
}

.onboarding-logo {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 2rem;
  font-weight: 950;
}

.onboarding-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.onboarding-segment {
  justify-self: start;
  border-radius: 999px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.82rem;
  font-weight: 900;
}

.onboarding-site-card h2 {
  max-width: 780px;
  font-size: clamp(2.4rem, 7vw, 5.6rem);
  line-height: 0.98;
}

.onboarding-site-card p {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.82);
}

.onboarding-booking-card {
  display: grid;
  gap: 14px;
  max-width: 900px;
  padding: 20px;
}

.onboarding-preview-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.onboarding-preview-services button {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 92px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
  text-align: left;
  transition:
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.2s ease,
    background 0.2s ease;
}

.onboarding-preview-services img {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  object-fit: cover;
}

.onboarding-preview-services button.selected {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

.onboarding-preview-services button:hover {
  transform: translateY(-2px);
}

.preview-payment-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.preview-payment-row span {
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.78rem;
  font-weight: 900;
}

.onboarding-calendar {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.confirm-preview {
  justify-self: start;
}

.onboarding-summary-preview {
  margin-top: 2px;
}

.onboarding-summary-preview .summary-box,
.onboarding-summary-preview .payment-control {
  min-width: 0;
}

.onboarding-summary-preview .summary-box {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background:
    linear-gradient(135deg, rgba(7, 18, 14, 0.92), rgba(20, 44, 37, 0.78)),
    radial-gradient(circle at 100% 0, rgba(31, 185, 153, 0.18), transparent 36%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 16px 34px rgba(0, 0, 0, 0.18);
}

.onboarding-summary-preview .summary-box strong,
.onboarding-summary-preview .summary-box span,
.onboarding-summary-preview .payment-control label,
.onboarding-summary-preview .payment-control small {
  color: #fff;
}

.onboarding-summary-preview .payment-control select {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.9);
  color: #111827;
}

.onboarding-summary-preview select {
  width: 100%;
}

.onboarding-leads-panel {
  margin-top: 18px;
}

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

.lead-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}

.compact-empty {
  min-height: auto;
  padding: 18px;
}

@keyframes onboarding-card-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes preview-soft-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes success-pop {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  70% {
    transform: scale(1.015);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-page *,
  .onboarding-page *::before,
  .onboarding-page *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 1100px) {
  .onboarding-shell {
    grid-template-columns: 1fr;
  }

  .onboarding-site-preview {
    min-height: 720px;
  }

  .lead-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .onboarding-shell {
    padding: 12px;
  }

  .onboarding-progress {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .onboarding-progress button {
    min-height: 58px;
    padding: 8px 6px;
  }

  .onboarding-progress strong {
    font-size: 0.72rem;
  }

  .onboarding-two,
  .template-choice-grid,
  .onboarding-preview-services,
  .onboarding-calendar {
    grid-template-columns: 1fr;
  }

  .weekday-picker,
  .week-schedule-grid,
  .week-time-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-service-row {
    grid-template-columns: 1fr;
  }

  .hero-picker > div,
  .payment-choice-grid,
  .service-edit-grid,
  .onboarding-service-card {
    grid-template-columns: 1fr;
  }

  .service-card-actions {
    grid-column: auto;
  }
}

.booking-confirmation-card .confirmation-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10;
  max-width: 360px;
  border-radius: 8px;
  padding: 14px 16px;
  background: #151f1b;
  color: #fff;
  box-shadow: var(--shadow);
  transform: translateY(18px);
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 1100px) {
  .landing-hero,
  .landing-split,
  .landing-flow {
    grid-template-columns: 1fr;
  }

  .landing-hero {
    min-height: auto;
    padding-top: 24px;
  }

  .site-content,
  .hero,
  .two-cols,
  .three-cols {
    grid-template-columns: 1fr;
  }

  .owner-side {
    position: static;
  }

  .owner-layout,
  .owner-layout-focus {
    height: auto;
    min-height: 0;
    overflow: visible;
    grid-template-columns: 1fr;
  }

  .owner-settings-stack,
  .owner-side {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .owner-finance-kpis,
  .account-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 880px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .main {
    padding: 18px;
  }
}

@media (max-width: 620px) {
  .landing-page::before {
    right: -220px;
    top: -190px;
  }

  .landing-page::after {
    left: -260px;
    bottom: -260px;
  }

  .landing-nav,
  .landing-hero,
  .landing-section,
  .landing-split,
  .landing-flow {
    width: min(100% - 24px, 1180px);
  }

  .landing-nav {
    align-items: flex-start;
    flex-direction: column;
  }

  .landing-nav nav {
    width: 100%;
    justify-content: flex-start;
  }

  .landing-nav a {
    padding-inline: 10px;
  }

  .landing-hero {
    gap: 22px;
    padding-bottom: 44px;
  }

  .landing-hero h1 {
    font-size: clamp(2.5rem, 16vw, 4rem);
  }

  .landing-browser {
    border-radius: 22px;
    padding: 10px;
  }

  .landing-preview-card {
    border-radius: 18px;
  }

  .landing-preview-services,
  .landing-feature-grid,
  .landing-booking-preview {
    grid-template-columns: 1fr;
  }

  .landing-product-card::before {
    inset: -10px;
    border-radius: 26px;
  }

  .landing-window {
    border-radius: 24px;
  }

  .landing-site-preview {
    padding: 12px;
  }

  .landing-preview-hero {
    border-radius: 20px;
    padding: 22px;
  }

  .landing-preview-hero h2 {
    font-size: clamp(2rem, 12vw, 3.2rem);
  }

  .landing-section,
  .landing-split,
  .landing-flow {
    padding: 44px 0;
  }

  .landing-split {
    gap: 22px;
  }

  html,
  body,
  #publicApp {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .public-site {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding: 12px;
  }

  .public-booking-wrap {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    min-height: auto;
    padding: 10px 0;
    place-items: start center;
  }

  .public-booking-card {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    min-width: 0;
    padding: 16px;
  }

  .public-site.layout-essential {
    padding: 8px;
  }

  .public-site.layout-essential .public-booking-wrap,
  .public-site.layout-essential .public-booking-card {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }

  .public-site.layout-essential .public-booking-card {
    padding: 10px;
  }

  .hero,
  .site-frame,
  .site-hero-card {
    padding: 22px;
  }

  .hero-stats,
  .form-grid,
  .owner-form-block-grid,
  .metric-row,
  .owner-guide-grid,
  .public-booking-grid {
    grid-template-columns: 1fr;
  }

  .public-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .public-step.full {
    grid-column: auto;
  }

  .public-step {
    width: 100%;
    max-width: calc(100vw - 56px);
    min-width: 0;
    padding: 12px;
  }

  .service-choice-list:not(.service-display-carousel),
  .professional-choice-list,
  .product-store-list {
    grid-template-columns: 1fr;
  }

  .service-choice-list.service-display-carousel {
    grid-auto-columns: minmax(232px, 92%);
    gap: 10px;
    mask-image: none;
    padding: 2px 0 10px;
    scroll-padding-inline: 0;
  }

  .public-site.layout-essential .service-choice-list.service-display-carousel {
    grid-auto-columns: minmax(226px, 92%);
  }

  .service-choice {
    grid-template-columns: 56px minmax(0, 1fr);
    min-height: 82px;
    gap: 9px;
    padding: 10px;
  }

  .service-choice:has(input:checked)::after {
    top: 8px;
    right: 8px;
    padding: 3px 7px;
    font-size: 0.62rem;
  }

  .service-choice:has(input:checked) > span {
    padding-top: 16px;
  }

  .service-choice img,
  .service-image-fallback,
  .product-card img,
  .product-image-fallback,
  .professional-avatar,
  .professional-avatar-fallback {
    width: 56px;
    height: 56px;
  }

  .service-choice strong {
    font-size: 0.88rem;
    line-height: 1.16;
  }

  .service-choice small {
    margin-top: 2px;
    font-size: 0.76rem;
    line-height: 1.22;
  }

  .service-choice em {
    margin-top: 4px;
    font-size: 0.74rem;
    line-height: 1.28;
  }

  .service-info-btn,
  .service-more {
    min-height: 25px;
    margin-top: 6px;
    padding: 0 8px;
    font-size: 0.7rem;
  }

  .product-card {
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 10px;
  }

  .owner-editor-summary {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .owner-editor-summary::after {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
  }

  .owner-editor-thumb,
  .owner-editor-thumb-fallback,
  .owner-editor-summary .professional-avatar,
  .owner-editor-summary .professional-avatar-fallback {
    width: 48px;
    height: 48px;
  }

  .calendar-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .public-site.layout-essential .calendar-strip,
  .public-site.layout-essential .slot-grid {
    gap: 6px;
  }

  .public-site.layout-essential .calendar-day,
  .public-site.layout-essential .slot {
    min-height: 52px;
    padding: 7px 5px;
  }

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

  .summary-step {
    display: grid;
    grid-template-columns: 1fr;
  }

  .summary-step .summary-box,
  .payment-control,
  .coupon-control {
    min-width: 0;
  }

  .confirm-btn {
    width: 100%;
  }

  .service-editor-grid {
    grid-template-columns: 1fr;
  }

  .builder-shell {
    grid-template-columns: 1fr;
  }

  .builder-sidebar,
  .builder-inspector {
    height: auto;
  }

  .layout-split {
    grid-template-columns: 1fr;
  }

  .hero-slot-layout {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "top-left top-right"
      "top-center top-center"
      "eyebrow eyebrow"
      "main main"
      "sub sub"
      "actions-left actions-right"
      "actions-center actions-center"
      "bottom-left bottom-right"
      "bottom-center bottom-center";
  }
}

/* Cadatah production auth polish */
.login-page.cadatah-auth-page {
  --auth-ink: #302d3b;
  --auth-muted: #746f82;
  --auth-line: #dad5ec;
  --auth-purple: #6c68ad;
  --auth-purple-strong: #4c478d;
  --auth-lilac: #9d95d6;
  place-items: center end;
  padding: clamp(18px, 4vw, 54px);
  background:
    radial-gradient(circle at 12% 18%, rgba(108, 104, 173, 0.28), transparent 28%),
    radial-gradient(circle at 86% 84%, rgba(157, 149, 214, 0.28), transparent 30%),
    linear-gradient(135deg, #fbfaf7 0%, #f3f1fb 50%, #ebe9f5 100%);
  color: var(--auth-ink);
}

.login-page.cadatah-auth-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(251, 250, 247, 0.42), rgba(251, 250, 247, 0.1)),
    radial-gradient(circle at 0 100%, rgba(76, 71, 141, 0.16), transparent 32%);
  pointer-events: none;
}

.cadatah-auth-page .login-shell {
  position: relative;
  z-index: 1;
  width: min(470px, 100%);
}

.cadatah-auth-page .login-card {
  gap: 22px;
  border: 1px solid rgba(108, 104, 173, 0.22);
  border-radius: 28px;
  padding: clamp(26px, 4vw, 34px);
  background:
    radial-gradient(circle at 100% 0, rgba(157, 149, 214, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 249, 253, 0.96));
  box-shadow:
    0 36px 90px rgba(76, 71, 141, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.cadatah-auth-page .login-card .brand-mark-image {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(108, 104, 173, 0.24);
  background: #fbfaf7;
  box-shadow: 0 18px 38px rgba(76, 71, 141, 0.16);
}

.cadatah-auth-page .login-card .eyebrow {
  margin: 0 0 12px;
  color: var(--auth-purple-strong);
  letter-spacing: 0.08em;
}

.cadatah-auth-page .login-card h1 {
  max-width: 9.8em;
  color: var(--auth-ink);
  font-size: clamp(2.35rem, 5.5vw, 3.4rem);
  line-height: 0.98;
}

.cadatah-auth-page .login-card .muted,
.cadatah-auth-page .login-card .helper {
  color: var(--auth-muted);
}

.cadatah-auth-page .login-form {
  gap: 16px;
}

.cadatah-auth-page .field label {
  color: var(--auth-ink);
}

.cadatah-auth-page input,
.cadatah-auth-page select,
.cadatah-auth-page textarea {
  border-color: var(--auth-line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--auth-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.cadatah-auth-page input:focus,
.cadatah-auth-page select:focus,
.cadatah-auth-page textarea:focus {
  outline: 3px solid rgba(157, 149, 214, 0.2);
  border-color: rgba(108, 104, 173, 0.62);
}

.cadatah-auth-page .password-field input {
  padding-right: 94px;
}

.cadatah-auth-page .password-toggle {
  position: absolute;
  top: 31px;
  right: 8px;
  bottom: auto;
  width: auto;
  min-width: 74px;
  min-height: 34px;
  border: 1px solid rgba(108, 104, 173, 0.24);
  border-radius: 999px;
  padding: 0 12px;
  background: #f5f2ff;
  color: var(--auth-purple-strong);
  font-size: 0.82rem;
  font-weight: 900;
  appearance: none;
  box-shadow: none;
}

.cadatah-auth-page .password-toggle:hover {
  border-color: rgba(108, 104, 173, 0.5);
  background: #eeeafd;
}

.cadatah-auth-page .btn {
  min-height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--auth-purple), var(--auth-lilac));
  color: #fff;
  box-shadow: 0 16px 34px rgba(76, 71, 141, 0.22);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.cadatah-auth-page .btn:hover {
  transform: translateY(-1px);
  filter: saturate(1.04);
  box-shadow: 0 20px 42px rgba(76, 71, 141, 0.28);
}

.cadatah-auth-page .btn:active {
  transform: translateY(0);
}

.cadatah-auth-page .toast {
  background: #302d3b;
  color: #fbfaf7;
  border: 1px solid rgba(157, 149, 214, 0.32);
}

@media (max-width: 760px) {
  .login-page.cadatah-auth-page {
    place-items: center;
  }
}