:root {
  --pink: #ec4899;
  --pink-dark: #db2777;
  --purple: #8b5cf6;
  --purple-dark: #7c3aed;
  --grad: linear-gradient(135deg, #ec4899, #8b5cf6);
  --grad-soft: linear-gradient(135deg, #fdf2f8, #f5f3ff);
  --bg: #fdf9fc;
  --surface: #ffffff;
  --text: #1f1530;
  --muted: #6b6475;
  --border: #efe6f2;
  --shadow: 0 4px 20px rgba(139, 92, 246, .10);
  --shadow-lg: 0 12px 40px rgba(139, 92, 246, .18);
  --radius: 16px;
  --radius-sm: 10px;
  --ok: #16a34a;
  --err: #dc2626;
  --warn: #d97706;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.app { flex: 1; }
.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
img { max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }

h1, h2, h3, h4 { line-height: 1.2; }
.font-display { font-family: 'Playfair Display', serif; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s, border-color .25s;
}
.header.scrolled { box-shadow: var(--shadow); border-color: var(--border); }

/* Public salon pages */
.salon-mode #header .logo {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  background: none; color: var(--text); font-family: 'Inter', sans-serif; font-size: 1.05rem;
}
.salon-mode #header .logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salon-logo { width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px; object-fit: contain; }
.salon-mode #navMobile > a { display: none; }
.salon-mode .btn-primary, .salon-mode .avatar, .salon-mode .slot.selected,
.salon-mode .wz-dot.done::before, .salon-mode .wz-dot.active::before { color: var(--brand-text); }
.salon-mode .btn-primary { box-shadow: var(--shadow); }
.salon-description { margin-top: 24px; max-width: 760px; white-space: pre-line; overflow-wrap: anywhere; }
.salon-footer { padding: 28px 16px; }
.salon-footer p { margin-top: 8px; }
.salon-footer a { display: inline-block; margin-top: 12px; }
.public-page-card { padding: 22px; max-width: 760px; }
.public-link-label { display: block; font-weight: 600; margin: 18px 0 8px; }
.public-page-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.input.page-color { width: 76px; height: 46px; padding: 5px; cursor: pointer; }
.salon-mode .header-inner { gap: 12px; }
@media (min-width: 820px) { .salon-mode #header .logo { max-width: 40%; } }
.header-inner { display: flex; align-items: center; gap: 20px; height: 64px; }
.logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem; font-weight: 800; text-decoration: none;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo-dot { color: var(--pink); -webkit-text-fill-color: var(--pink); }
.logo-light { -webkit-text-fill-color: #fff; color: #fff; background: none; }
.logo-light .logo-dot { -webkit-text-fill-color: var(--pink); }
.nav-desktop { display: none; gap: 22px; margin-left: 8px; }
.nav-desktop a { text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--muted); transition: color .2s; }
.nav-desktop a:hover, .nav-desktop a.active { color: var(--pink-dark); }
.header-actions { margin-left: auto; display: none; align-items: center; gap: 10px; }
.hamburger {
  margin-left: auto; display: flex; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.hamburger span { width: 24px; height: 2.5px; border-radius: 2px; background: var(--text); transition: .25s; }
.hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.nav-mobile {
  display: none; flex-direction: column; gap: 4px;
  padding: 10px 16px 18px; border-top: 1px solid var(--border);
  background: #fff;
}
.nav-mobile.open { display: flex; }
.nav-mobile a { text-decoration: none; font-weight: 600; padding: 10px 8px; border-radius: var(--radius-sm); }
.nav-mobile a:hover { background: var(--grad-soft); }
.nav-mobile-auth { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 12px; }

.user-menu { position: relative; }
.user-chip {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--border); background: #fff; border-radius: 999px;
  padding: 5px 12px 5px 5px; font-weight: 600; font-size: .9rem; transition: box-shadow .2s;
}
.user-chip:hover { box-shadow: var(--shadow); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff; font-weight: 700; font-size: .8rem;
}
.avatar-lg { width: 64px; height: 64px; font-size: 1.3rem; }
.avatar-xl { width: 88px; height: 88px; font-size: 1.8rem; }
.dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 6px; display: none; z-index: 120;
}
.dropdown.open { display: block; animation: fadeUp .18s ease; }
.dropdown a, .dropdown button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; background: none; text-align: left;
  text-decoration: none; font-size: .92rem; font-weight: 500; color: var(--text);
  border-radius: 8px; cursor: pointer;
}
.dropdown a:hover, .dropdown button:hover { background: var(--grad-soft); color: var(--pink-dark); }
.dropdown .dropdown-sep { height: 1px; background: var(--border); margin: 6px 4px; }

@media (min-width: 820px) {
  .nav-desktop { display: flex; }
  .header-actions { display: flex; }
  .hamburger { display: none; }
  .nav-mobile { display: none !important; }
}

/* ---------- Buttons / forms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  font-weight: 700; font-size: .95rem; padding: 12px 22px; transition: .2s;
}
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 6px 18px rgba(236, 72, 153, .35); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(236, 72, 153, .45); }
.btn-outline { background: #fff; color: var(--purple-dark); border: 1.5px solid #e2d4f5; }
.btn-outline:hover { border-color: var(--purple); background: #faf7ff; }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--pink-dark); }
.btn-danger { background: #fef2f2; color: var(--err); }
.btn-danger:hover { background: #fee2e2; }
.btn-sm { padding: 8px 14px; font-size: .85rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.input, .select, .textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; font-size: .95rem; background: #fff; color: var(--text); transition: border-color .2s, box-shadow .2s;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(139, 92, 246, .15); }
.textarea { resize: vertical; min-height: 90px; }
.field-error { color: var(--err); font-size: .8rem; margin-top: 4px; display: none; }
.field.invalid .field-error { display: block; }
.field.invalid .input { border-color: var(--err); }

/* ---------- Hero ---------- */
.hero { background: var(--grad-soft); padding: 56px 0 40px; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, .16), transparent 70%);
  top: -140px; right: -120px;
}
.hero::after {
  content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, .15), transparent 70%);
  bottom: -160px; left: -100px;
}
.hero-inner { position: relative; z-index: 1; text-align: center; max-width: 760px; margin: 0 auto; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 14px; font-size: .82rem; font-weight: 600; color: var(--purple-dark);
  box-shadow: var(--shadow); margin-bottom: 18px;
}
.hero h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); font-weight: 800; letter-spacing: -1px; }
.hero h1 .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.sub { color: var(--muted); font-size: 1.06rem; margin: 14px auto 26px; max-width: 560px; }
.searchbar {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; background: #fff; padding: 12px;
  border-radius: 18px; box-shadow: var(--shadow-lg); border: 1px solid var(--border);
}
.searchbar .input, .searchbar .select { min-width: 0; border-color: transparent; background: #faf8fd; }
.searchbar .btn { white-space: nowrap; }
.hero-proof {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  color: var(--muted); font-size: .8rem; margin-top: 11px;
}
.hero-proof i { color: var(--ok); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 16px; font-size: .88rem; font-weight: 600; text-decoration: none;
  color: var(--text); box-shadow: 0 2px 8px rgba(139, 92, 246, .07); transition: .2s; cursor: pointer;
}
.chip:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #e9d5ff; color: var(--purple-dark); }
.chip.active { background: var(--grad); color: #fff; border-color: transparent; }
@media (min-width: 700px) {
  .searchbar { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr) auto; align-items: center; }
}

/* ---------- Sections ---------- */
.section { padding: 52px 0; }
.section-alt { background: #fff; }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 34px; }
.section-head h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 800; letter-spacing: -.5px; }
.section-head p { color: var(--muted); margin-top: 8px; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: var(--shadow); overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.card.hoverable:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-cover {
  height: 140px; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; position: relative;
}
.card-cover .cover-emoji { color: rgba(255,255,255,.94); filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)); }
.card-cover.has-photo { height: 160px; }
.card-body { padding: 16px 18px 18px; }
.card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card h3 { font-size: 1.08rem; font-weight: 700; }
.card .meta { color: var(--muted); font-size: .86rem; margin-top: 3px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }
.price-from { font-size: .85rem; color: var(--muted); }
.price-from strong { color: var(--text); font-size: 1rem; }

.badge-cat {
  display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 700;
  background: rgba(255,255,255,.92); color: var(--purple-dark); border-radius: 999px; padding: 4px 10px;
}
.rating-pill {
  display: inline-flex; align-items: center; gap: 4px; background: #fff7ed; color: #b45309;
  font-weight: 700; font-size: .82rem; border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.stars { color: #f59e0b; letter-spacing: 1px; }
.stars .dim { color: #e7ddf1; }

.fav-btn {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); font-size: 1.1rem; box-shadow: var(--shadow); transition: transform .15s;
}
.fav-btn:hover { transform: scale(1.12); }
.fav-btn { color: var(--pink-dark); }
.fav-btn.faved { background: var(--pink); color: #fff; }

/* ---------- Steps / testimonials / FAQ / CTA ---------- */
.steps { counter-reset: step; }
.step-card { padding: 26px 22px; text-align: center; position: relative; }
.step-card .feature-icon {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-soft); color: var(--purple); font-size: 1.35rem;
}
.step-card .step-num {
  counter-increment: step; width: 46px; height: 46px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; font-size: 1.1rem;
}
.step-card .step-num::before { content: counter(step); }
.step-card h3 { margin-bottom: 6px; }
.step-card p { color: var(--muted); font-size: .92rem; }
.friction-item {
  min-height: 126px; padding: 22px 18px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: .88rem; font-weight: 600; box-shadow: var(--shadow);
}
.friction-item i { color: var(--pink); font-size: 1.25rem; }
.testi-card { padding: 22px; }
.testi-card p { font-size: .95rem; margin: 10px 0 14px; color: #3d3350; }
.testi-head { display: flex; align-items: center; gap: 12px; }
.testi-head .who strong { display: block; font-size: .92rem; }
.testi-head .who span { font-size: .8rem; color: var(--muted); }

.faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; margin-bottom: 10px; overflow: hidden; }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 18px; background: none; border: 0; cursor: pointer; text-align: left;
  font-weight: 600; font-size: .97rem; color: var(--text);
}
.faq-q .chev { transition: transform .25s; color: var(--purple); font-size: 1.1rem; }
.faq-item.open .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { padding: 0 18px 16px; color: var(--muted); font-size: .92rem; }

.cta-band { background: var(--grad); border-radius: 22px; padding: 44px 26px; text-align: center; color: #fff; box-shadow: var(--shadow-lg); }
.cta-band h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); margin-bottom: 8px; }
.cta-band p { opacity: .92; margin-bottom: 20px; }
.btn-white { background: #fff; color: var(--pink-dark); }
.btn-white:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }

/* ---------- Explore layout ---------- */
.explore-layout { display: flex; flex-direction: column; gap: 22px; padding: 28px 0 56px; }
.filters { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); height: max-content; }
.filters h3 { font-size: 1rem; margin-bottom: 12px; }
.filters .field { margin-bottom: 12px; }
.filters .field label { font-size: .8rem; }
.filters-toggle { display: flex; }
@media (min-width: 900px) {
  .explore-layout { flex-direction: row; align-items: flex-start; }
  .filters { width: 260px; flex-shrink: 0; position: sticky; top: 84px; }
  .explore-list { flex: 1; }
}
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.results-head h1 { font-size: 1.4rem; }
.results-count { color: var(--muted); font-size: .88rem; }

/* ---------- Place page ---------- */
.place-hero { height: 210px; display: flex; align-items: flex-end; color: #fff; position: relative; }
.place-hero .container { padding-bottom: 18px; position: relative; z-index: 1; width: 100%; }
.place-hero h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.place-hero .place-sub { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: .9rem; margin-top: 6px; text-shadow: 0 1px 6px rgba(0,0,0,.3); }
.place-info-row { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 16px 0; border-bottom: 1px solid var(--border); font-size: .9rem; color: var(--muted); }
.place-info-row b { color: var(--text); }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab {
  border: 0; background: none; padding: 13px 16px; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--muted); border-bottom: 2.5px solid transparent; white-space: nowrap;
}
.tab.active { color: var(--pink-dark); border-bottom-color: var(--pink); }
.tab-panel { padding: 22px 0 56px; }

.service-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(139,92,246,.06);
}
.service-row .svc-name { font-weight: 700; }
.service-row > div:first-child, .pick-card .grow { min-width: 0; }
.svc-description { display: block; margin: 6px 0; font-size: .85rem; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }
.tbl .svc-description { max-width: 340px; }
.professional-avatar { position: relative; overflow: hidden; }
.professional-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.professional-photo-preview { margin-bottom: 12px; }
@media (max-width: 520px) {
  .service-row { flex-wrap: wrap; }
  .service-row > div:first-child { flex-basis: 100%; }
  .service-row .svc-right { width: 100%; justify-content: space-between; }
}
.service-row .svc-meta { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.service-row .svc-right { text-align: right; display: flex; align-items: center; gap: 14px; }
.service-row .svc-price { font-weight: 800; color: var(--purple-dark); white-space: nowrap; }

.team-card { padding: 20px; text-align: center; }
.team-card p { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.review-card { padding: 18px; margin-bottom: 12px; }
.review-card .r-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.review-card .r-head .r-author { font-weight: 700; font-size: .92rem; }
.review-card .r-head .r-date { color: var(--muted); font-size: .78rem; margin-left: auto; }
.review-card p { font-size: .92rem; color: #3d3350; }

/* ---------- Wizard ---------- */
.wizard { max-width: 720px; margin: 0 auto; padding: 30px 0 60px; }
.wizard-steps { display: flex; align-items: center; gap: 6px; margin: 18px 0 26px; }
.wz-dot {
  flex: 1; text-align: center; font-size: .78rem; font-weight: 700; color: var(--muted); position: relative; padding-top: 26px;
}
.wz-dot::before {
  content: attr(data-n); position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%; background: #f1e9f7; color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-size: .78rem;
}
.wz-dot.done::before, .wz-dot.active::before { background: var(--grad); color: #fff; }
.wz-dot.active { color: var(--pink-dark); }
.pick-card {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer; font: inherit; transition: .15s;
}
.pick-card:hover { border-color: #d8c6f0; }
.pick-card.selected { border-color: var(--purple); background: #faf7ff; box-shadow: 0 0 0 3px rgba(139,92,246,.12); }
.pick-card .grow { flex: 1; }
.pick-card .pc-title { font-weight: 700; }
.pick-card .pc-sub { color: var(--muted); font-size: .84rem; }
.day-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.day-card {
  min-width: 76px; border: 1.5px solid var(--border); background: #fff; border-radius: var(--radius-sm);
  padding: 10px 6px; text-align: center; cursor: pointer; font: inherit; transition: .15s; flex-shrink: 0;
}
.day-card .day-relative {
  min-height: 16px; margin-bottom: 3px; color: var(--purple-dark);
  font-size: .65rem; font-weight: 700; line-height: 1.2;
}
.day-card .dow { font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.day-card .dnum { font-size: 1.25rem; font-weight: 800; }
.day-card .dmon { font-size: .72rem; color: var(--muted); }
.day-card.selected { border-color: var(--pink); background: #fdf2f8; }
.day-card.selected .dnum { color: var(--pink-dark); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-top: 14px; }
.booking-times { min-height: 230px; }
.slot-period { border: 0; min-width: 0; margin-top: 20px; }
.slot-period legend { font-size: .88rem; font-weight: 600; color: var(--muted); }
.slot-period .slots { margin-top: 8px; }
.slot {
  border: 1.5px solid var(--border); background: #fff; border-radius: 8px; padding: 9px 4px;
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; transition: .15s;
}
.slot:hover:not([disabled]) { border-color: var(--purple); color: var(--purple-dark); }
.slot.selected { background: var(--grad); color: #fff; border-color: transparent; }
.slot[disabled] { background: #f6f2fa; color: #c3b8d1; text-decoration: line-through; cursor: not-allowed; }
.wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.summary-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.summary-line { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--border); font-size: .95rem; }
.summary-line:last-child { border-bottom: 0; }
.summary-line .sl-label { color: var(--muted); }
.summary-line .sl-value { font-weight: 600; text-align: right; }
.summary-total { font-size: 1.15rem; font-weight: 800; color: var(--purple-dark); }

/* ---------- Auth ---------- */
.auth-wrap { max-width: 420px; margin: 0 auto; padding: 44px 0 70px; }
.auth-card { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 30px 26px; box-shadow: var(--shadow-lg); }
.auth-card h1 { font-size: 1.5rem; text-align: center; }
.auth-card .auth-sub { text-align: center; color: var(--muted); font-size: .9rem; margin: 6px 0 22px; }
.demo-notice { padding: 12px 20px; background: #f5f3ff; color: #5b21b6; font-size: .85rem; text-align: center; }
.auth-alt { text-align: center; font-size: .9rem; margin-top: 18px; color: var(--muted); }
.auth-alt a { color: var(--pink-dark); font-weight: 700; }

/* ---------- Appointments ---------- */
.page-head { padding: 30px 0 0; }
.page-head h1 { font-size: 1.7rem; }
.appt-card { display: flex; gap: 14px; padding: 16px; align-items: flex-start; }
.appt-card .appt-datebox {
  width: 62px; flex-shrink: 0; text-align: center; border-radius: var(--radius-sm);
  background: var(--grad-soft); border: 1px solid var(--border); padding: 8px 4px;
}
.appt-datebox .ad-dow { font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--purple-dark); }
.appt-datebox .ad-day { font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.appt-datebox .ad-mon { font-size: .72rem; color: var(--muted); }
.appt-main { flex: 1; min-width: 0; }
.appt-main .appt-est { font-weight: 700; }
.appt-main .appt-detail { color: var(--muted); font-size: .87rem; margin-top: 2px; }
.appt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.status-pill { display: inline-flex; align-items: center; font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.status-confirmado { background: #ecfdf5; color: #047857; }
.status-concluido { background: #eff6ff; color: #1d4ed8; }
.status-cancelado { background: #fef2f2; color: #b91c1c; }
.status-faltou { background: #fff7ed; color: #9a3412; }
.status-pendente { background: #fffbeb; color: #b45309; }
.pill-warn { background: #fffbeb; color: #b45309; margin-left: 6px; }

.prod-usage-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.prod-usage-row .svc-prod-id { flex: 1; min-width: 0; }
.prod-usage-row .svc-prod-qty { width: 92px; flex: none; }

.empty-state { text-align: center; padding: 60px 20px; }
.empty-state .es-emoji { font-size: 2.5rem; color: var(--purple); }
.empty-state h3 { margin: 12px 0 6px; }
.empty-state p { color: var(--muted); margin-bottom: 18px; }

/* ---------- Pro ---------- */
.pro-hero { background: linear-gradient(135deg, #3b0764, #831843); color: #fff; padding: 64px 0; text-align: center; }
.pro-hero h1 { font-size: clamp(1.8rem, 5vw, 3rem); }
.pro-hero p { opacity: .9; max-width: 560px; margin: 14px auto 26px; }
.pro-hero .pro-proof { margin: 16px auto 0; font-size: .82rem; opacity: .78; }
.plan-card { padding: 28px 22px 24px; text-align: center; position: relative; display: flex; flex-direction: column; overflow: visible; }
.plan-card.featured { border: 2px solid var(--pink); box-shadow: var(--shadow-lg); }
.plan-tag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  background: var(--grad); color: #fff; font-size: .68rem; line-height: 1; letter-spacing: .35px;
  font-weight: 800; white-space: nowrap; padding: 7px 16px; border-radius: 999px;
  box-shadow: 0 5px 14px rgba(139, 92, 246, .24);
}
.plan-price { display: flex; align-items: baseline; justify-content: center; font-size: 2rem; font-weight: 800; margin: 8px 0; }
.plan-price small { margin-left: 2px; font-size: .85rem; font-weight: 500; color: var(--muted); }
.plan-audience { min-height: 38px; max-width: 250px; margin: 5px auto 2px; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.plan-card ul { list-style: none; text-align: left; margin: 16px 0 22px; flex: 1; }
.plan-card li { padding: 6px 0 6px 26px; position: relative; font-size: .9rem; color: #3d3350; }
.plan-card li::before {
  content: '\f00c'; position: absolute; left: 0; top: 8px;
  color: var(--ok); font-family: "Font Awesome 6 Free"; font-size: .75rem; font-weight: 900;
}
.pain-card { padding: 22px 20px; }
.pain-card .pain-icon {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: #fef2f2; color: #be123c; margin-bottom: 14px;
}
.pain-card h3 { margin-bottom: 7px; }
.pain-card p { color: var(--muted); font-size: .88rem; line-height: 1.55; }
.pain-close { max-width: 720px; margin: 26px auto 0; text-align: center; color: var(--text); font-weight: 600; }
.plan-assurance { margin: 22px auto 0; text-align: center; color: var(--muted); font-size: .82rem; }
.plan-assurance i { color: var(--ok); margin-right: 5px; }

/* ---------- Dashboard ---------- */
.dash-layout { display: flex; flex-direction: column; gap: 22px; padding: 26px 0 60px; }
.dash-side { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.dash-side .dash-est { display: flex; align-items: center; gap: 12px; padding: 8px 10px 14px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.dash-side .dash-est strong { display: block; font-size: .95rem; }
.dash-side .dash-est span { font-size: .78rem; color: var(--muted); }
.dash-side .dash-est .avatar { color: #fff; }
.dash-nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; }
.dash-nav a {
  text-decoration: none; font-weight: 600; font-size: .88rem; color: var(--muted);
  padding: 9px 13px; border-radius: var(--radius-sm); display: flex; align-items: center; gap: 8px;
}
.dash-nav a:hover { background: var(--grad-soft); color: var(--purple-dark); }
.dash-nav a.active { background: var(--grad); color: #fff; }
@media (min-width: 900px) {
  .dash-layout { flex-direction: row; align-items: flex-start; }
  .dash-side { width: 240px; flex-shrink: 0; position: sticky; top: 84px; }
  .dash-nav { flex-direction: column; }
  .dash-main { flex: 1; min-width: 0; }
}
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 22px; }
@media (min-width: 760px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-card { padding: 18px; }
.stat-card .st-label { font-size: .78rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.stat-card .st-value { font-size: 1.5rem; font-weight: 800; margin-top: 4px; }
.stat-card .st-emoji { float: right; font-size: 1.25rem; color: var(--purple); }
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
table.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th { text-align: left; padding: 12px 14px; font-size: .76rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); border-bottom: 1px solid var(--border); }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; bottom: 18px; right: 18px; z-index: 300; display: flex; flex-direction: column; gap: 10px; max-width: min(360px, calc(100vw - 36px)); }
.toast {
  background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); border-left: 4px solid var(--purple);
  padding: 13px 16px; font-size: .9rem; font-weight: 500; display: flex; align-items: center; gap: 10px;
  animation: toastIn .25s ease;
}
.toast.success { border-left-color: var(--ok); }
.toast .toast-icon { color: var(--purple); font-size: 1.05rem; }
.toast.success .toast-icon { color: var(--ok); }
.toast.error .toast-icon { color: var(--danger); }

.category-icon {
  width: 38px; height: 38px; border-radius: 12px; flex: 0 0 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-soft); color: var(--purple); font-size: 1rem;
}
.toast.error { border-left-color: var(--err); }
.toast.info { border-left-color: var(--purple); }
.toast.leaving { animation: toastOut .25s ease forwards; }
@keyframes toastIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastOut { to { transform: translateX(30px); opacity: 0; } }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(31, 21, 48, .55); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  animation: fadeIn .2s ease;
}
.modal-box {
  background: #fff; border-radius: 18px; width: 100%; max-width: 460px; max-height: 88vh;
  overflow-y: auto; box-shadow: var(--shadow-lg); animation: fadeUp .22s ease; position: relative;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 0; }
.modal-head h3 { font-size: 1.15rem; }
.pro-service-details { border-bottom: 1px solid var(--border); }
.pro-service-details summary {
  cursor: pointer; padding: 12px 0; display: flex; align-items: center; gap: 10px;
}
.pro-service-details summary::before { content: '▸'; color: var(--purple); }
.pro-service-details[open] summary::before { content: '▾'; }
.pro-service-details summary > span { flex: 1; min-width: 0; }
.pro-service-details summary > strong { white-space: nowrap; }
.pro-service-details summary:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.pro-service-appointments { list-style: none; margin: 0; padding: 0 0 12px; }
.pro-service-appointments li { padding: 10px; background: var(--bg); border-radius: 8px; }
.pro-service-appointments li + li { margin-top: 8px; }
.pro-service-appointments .flex-between { gap: 10px; flex-wrap: wrap; }
.modal-close { border: 0; background: #f5f0fa; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1rem; color: var(--muted); }
.modal-close:hover { background: #ece2f7; color: var(--text); }
.modal-body { padding: 16px 20px 22px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 0 20px 20px; }
.star-input { display: flex; gap: 6px; justify-content: center; font-size: 2rem; margin: 8px 0 14px; }
.star-input button { background: none; border: 0; cursor: pointer; color: #e7ddf1; transition: transform .12s, color .12s; font-size: 2rem; line-height: 1; padding: 0 2px; }
.star-input button.on { color: #f59e0b; }
.star-input button:hover { transform: scale(1.15); }
.modal-success { text-align: center; padding: 10px 0; }
.modal-success .ms-icon {
  width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 50%;
  background: #ecfdf5; color: var(--ok); font-size: 2rem; display: flex; align-items: center; justify-content: center;
}
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeUp { from { transform: translateY(14px); opacity: 0; } }

/* ---------- Footer ---------- */
.footer { background: #231233; color: #cbb9de; margin-top: auto; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 26px; padding: 44px 16px 30px; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-col h4 { color: #fff; font-size: .95rem; margin-bottom: 12px; }
.footer-col a { display: block; text-decoration: none; font-size: .88rem; padding: 5px 0; transition: color .2s; }
.footer-col a:hover { color: #fff; }
.footer-brand p { font-size: .88rem; margin: 10px 0 14px; max-width: 280px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}
.footer-social a:hover { background: rgba(255,255,255,.18); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 16px; font-size: .8rem; text-align: center; }

/* ---------- Misc ---------- */
.section-pad { padding: 26px 0 60px; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-2 { margin-bottom: 16px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.text-center { text-align: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hide-mobile { display: none; }
@media (min-width: 700px) { .hide-mobile { display: inline; } }

/* ---------- Motion and light ---------- */
.hero::before, .hero::after { pointer-events: none; }
.pro-hero { position: relative; overflow: hidden; isolation: isolate; }
.pro-hero::before {
  content: ''; position: absolute; inset: -50%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 35% 45%, rgba(236,72,153,.42), transparent 48%),
    radial-gradient(ellipse at 70% 55%, rgba(139,92,246,.45), transparent 45%);
}
.card.hoverable, .plan-card { position: relative; }
.card.hoverable::after, .plan-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(280px circle at var(--pointer-x, 50%) var(--pointer-y, 0%), rgba(167,139,250,.08), transparent 75%);
  opacity: 0; transition: opacity .6s;
}
.pointer-lit::after { opacity: 1; }
.btn:focus-visible, .chip:focus-visible, .nav-desktop a:focus-visible {
  outline: 3px solid var(--purple); outline-offset: 5px;
}

@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: belloAurora 20s ease-in-out 2 alternate; }
  .hero::after { animation: belloAurora 24s ease-in-out 2 alternate-reverse; }
  .pro-hero::before { animation: belloAurora 24s ease-in-out 2 alternate; }
  .hero-inner > *, .pro-hero > .container > * {
    animation: belloEntrance 1.1s cubic-bezier(.25,.46,.45,.94) both;
  }
  .hero-inner > :nth-child(2), .pro-hero h1 { animation-delay: .08s; }
  .hero-inner > :nth-child(3), .pro-hero p { animation-delay: .16s; }
  .hero-inner > :nth-child(4), .pro-hero .btn { animation-delay: .24s; }
  .hero-inner > :nth-child(5) { animation-delay: .32s; }
  .hero-inner > :nth-child(6) { animation-delay: .4s; }
  .hero h1 .grad-text {
    background-image: linear-gradient(110deg, #db2777, #7c3aed, #ec4899, #7c3aed);
    background-size: 250% 100%; animation: belloSpectrum 14s ease-in-out 2 alternate;
  }
  .searchbar { transition: box-shadow .6s; }
  .searchbar:focus-within { box-shadow: 0 12px 36px rgba(139,92,246,.16); }
  .btn-primary, .btn-white { position: relative; overflow: hidden; isolation: isolate; }
  .btn-primary::after, .btn-white::after {
    content: ''; position: absolute; inset: -60% -30%; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%);
    transform: translateX(-110%); transition: transform 1.1s ease-in-out;
  }
  .btn-primary:hover::after, .btn-white:hover::after { transform: translateX(110%); }
  .btn:active:not([disabled]) { transform: scale(.99); }
  .fav-btn.faved i { animation: belloHeart .7s ease-in-out; }
  .modal-box { animation: belloEntrance .55s ease-out; }
  .modal-success .ms-icon { animation: belloHeart .8s ease-in-out; }
  .nav-desktop a { position: relative; }
  .nav-desktop a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
    border-radius: 2px; background: var(--grad); transform: scaleX(0);
    transform-origin: left; transition: transform .3s;
  }
  .nav-desktop a:hover::after, .nav-desktop a.active::after { transform: scaleX(1); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card.hoverable, .plan-card, .friction-item, .pain-card {
    transition: transform .6s ease, box-shadow .6s, border-color .6s;
  }
  .card.hoverable:hover, .plan-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(139,92,246,.14); border-color: #e2d4f5;
  }
  .friction-item:hover, .pain-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .cover-emoji, .feature-icon i, .pain-icon i { transition: transform .6s ease; }
  .card:hover .cover-emoji { transform: scale(1.04); }
  .card:hover .feature-icon i, .card:hover .pain-icon i { transform: scale(1.04); }
}
@keyframes belloEntrance {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes belloAurora {
  from { transform: translate3d(-6px, 0, 0) scale(1); }
  to { transform: translate3d(12px, 8px, 0) scale(1.04); }
}
@keyframes belloSpectrum { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes belloHeart { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pointer-lit::after { opacity: 0; }
}

/* Company setup and platform administration */
.company-active { background: #dcfce7; color: #166534; }
.company-draft { background: #fef3c7; color: #92400e; }
.company-suspended { background: #fee2e2; color: #991b1b; }
.setup-notice { padding: 16px; border: 1px solid #ddd6fe; border-radius: var(--radius-sm); background: #f5f3ff; color: #4c1d95; line-height: 1.6; }
.setup-notice .btn { margin-top: 8px; }
.company-wizard { max-width: 860px; }
.company-wizard h1 { margin-top: 16px; }
.setup-progress { display: flex; gap: 12px; list-style: none; padding: 0; margin: 24px 0 30px; }
.setup-progress li { flex: 1; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .88rem; }
.setup-progress li > span { display: grid; place-items: center; background: #f3f0f7; border-radius: 50%; width: 30px; height: 30px; flex-shrink: 0; }
.setup-progress .done > span { background: var(--grad); color: #fff; }
.setup-progress [aria-current] { color: var(--purple-dark); font-weight: 700; }
.setup-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.setup-fieldset { border: 0; padding: 0; margin: 18px 0; min-width: 0; }
.setup-fieldset legend { font-weight: 600; padding: 0; margin-bottom: 12px; }
.setup-choices { display: flex; flex-wrap: wrap; gap: 12px; }
.setup-choice { display: flex; align-items: center; gap: 10px; cursor: pointer; line-height: 1.5; }
.setup-choice input, .preset-choice input { accent-color: var(--purple); width: 18px; height: 18px; flex-shrink: 0; }
.setup-choice strong { overflow-wrap: anywhere; }
.setup-choices .setup-choice { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.preset-card, .catalog-item { padding: 20px; }
.preset-card h3 { font-size: 1.1rem; }
.preset-choice { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.preset-choice input { margin-top: 4px; }
.preset-choice span { display: block; }
.preset-choice:has(input:checked) { border-color: var(--purple); background: #faf5ff; }
.setup-catalog-help p, .setup-catalog-empty p { margin-top: 6px; }
.setup-preset-grid { align-items: stretch; }
.setup-preset:has(input:checked) { border-color: var(--purple); background: #faf5ff; }
.setup-preset:has(input:focus-visible) { outline: 2px solid var(--purple); outline-offset: 3px; }
.setup-service-preview { list-style: none; margin: 16px 0 12px; padding: 0; border-top: 1px solid var(--border); }
.setup-service-preview li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .85rem; }
.setup-service-preview strong { font-weight: 500; overflow-wrap: anywhere; }
.setup-service-preview span { color: var(--muted); white-space: nowrap; }
.setup-product-preview { font-size: .8rem; color: var(--muted); line-height: 1.6; }
.setup-catalog-empty { padding: 16px; border: 1px dashed var(--border); border-radius: var(--radius-sm); font-size: .9rem; color: var(--muted); }
.catalog-item details summary { cursor: pointer; color: var(--purple-dark); font-size: .9rem; }
.catalog-item > .setup-choice { flex-wrap: wrap; }
.admin-filters { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.admin-filters .field { margin: 0; }
.setup-team-row, .preset-usage-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-bottom: 16px; }
.setup-team-row .field, .preset-usage-row .field { margin: 0; }
.preset-editor { max-width: 960px; }
.preset-editor > h1 { margin-top: 16px; }
.modal-wide { max-width: 800px; }
.dash-main > .flex-between { flex-wrap: wrap; gap: 14px; }
@media (max-width: 700px) {
  .admin-filters { grid-template-columns: 1fr 1fr; }
  .admin-filters > .field:first-child { grid-column: 1 / -1; }
  .setup-team-row, .preset-usage-row { grid-template-columns: 1fr 1fr; }
  .setup-team-row > button, .preset-usage-row > button { justify-self: start; }
}
@media (max-width: 480px) {
  .setup-fields { grid-template-columns: 1fr; gap: 0; }
  .setup-progress { gap: 6px; }
  .setup-progress li { flex-direction: column; font-size: .75rem; gap: 5px; }
  .catalog-item, .preset-card { padding: 14px; }
}

/* Color variations and appointment consumption */
.color-swatch { display: inline-block; width: 26px; height: 26px; flex-shrink: 0; border: 1px solid rgba(31,21,48,.2); border-radius: 50%; background: repeating-linear-gradient(45deg, #eee, #eee 4px, #fff 4px, #fff 8px); }
.color-variant { padding: 18px; }
.color-variant[hidden] { display: none; }
.color-variant-title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; overflow-wrap: anywhere; }
.color-variant-title strong { min-width: 0; }
.color-completion-group { border-top: 1px solid var(--border); padding-top: 16px; }
.color-usage-row { padding: 16px; margin-bottom: 12px; }
.usage-history-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.usage-history-row:last-child { border: 0; }
.appointment-colors { color: var(--muted); }
.prod-usage-row .svc-prod-qty { width: 100px; flex-shrink: 0; }
@media (max-width: 480px) {
  .prod-usage-row { flex-wrap: wrap; }
  .prod-usage-row .svc-prod-id { flex-basis: 100%; }
  .color-usage-row { padding: 12px; }
}
.modal-box:has(#completionForm) .modal-head { position: sticky; top: 0; z-index: 1; background: #fff; padding-bottom: 14px; }

/* Company finance */
.finance-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.finance-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: 12px; align-items: end; }
.finance-filters .field { margin: 0; }
.finance-table .tbl { min-width: 620px; }
.finance-table th { white-space: nowrap; }
.finance-subtitle { font-size: 1.12rem; }
.finance-value { font-size: clamp(1.05rem, 2vw, 1.5rem); overflow-wrap: anywhere; }
.finance-negative { color: #b91c1c; }
.finance-position, .finance-bill, .finance-record { padding: 20px; min-width: 0; overflow-wrap: anywhere; }
.finance-position strong { display: block; font-size: 1.4rem; margin: 8px 0; }
.finance-bill .flex-between, .finance-record .flex-between { align-items: start; flex-wrap: wrap; gap: 8px; }
.finance-bill-values { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 14px; font-size: .85rem; }
.finance-bill-values b { display: block; font-size: 1rem; margin-top: 4px; }
.finance-account-balance { font-size: 1.75rem; font-weight: 700; margin: 14px 0 6px; }
.finance-paid { background: #dcfce7; color: #166534; }
.finance-partial, .finance-warn { background: #fef3c7; color: #92400e; }
.finance-muted { background: #f3f0f7; color: #635872; }
.finance-count { border-bottom: 1px solid var(--border); padding: 10px 0; }
[data-finance-action] .row-actions, .finance-bill .row-actions, .finance-record .row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#finCardFields[hidden], #finExpectedFields[hidden] { display: none; }

/* Store subscriptions */
.pro-plan-section { padding: 88px 0; background: radial-gradient(ellipse at 85% 40%, #f0e6ff 0, transparent 55%), linear-gradient(135deg, #fffafd, #faf7ff); }
.pro-plan-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 72px; }
.offer-eyebrow { display: block; color: var(--purple-dark); font-size: .7rem; font-weight: 800; letter-spacing: 1.6px; line-height: 1.5; }
.pro-plan-intro h2 { margin-top: 20px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; font-weight: 800; letter-spacing: -1.5px; }
.pro-plan-intro h2 > span { color: var(--purple-dark); }
.pro-plan-intro > p { margin-top: 22px; max-width: 420px; color: var(--muted); font-size: 1.02rem; line-height: 1.8; }
.pro-plan-support { display: flex; align-items: flex-start; gap: 14px; border-top: 1px solid #e8ddf1; padding-top: 28px; margin-top: 34px; max-width: 420px; }
.pro-plan-support > span { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px; color: var(--purple-dark); background: #efe6fb; }
.pro-plan-support strong { font-size: .9rem; }
.pro-plan-support p { margin-top: 7px; color: var(--muted); font-size: .88rem; line-height: 1.7; }
.subscription-offer { position: relative; min-width: 0; padding: 36px; border: 1px solid #e5d6f5; border-radius: 26px; background: #fff; box-shadow: 0 18px 60px -20px rgba(91, 33, 182, .22), 0 4px 12px rgba(91, 33, 182, .03); }
.offer-heading { display: flex; align-items: center; gap: 16px; }
.offer-symbol { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; background: var(--grad); color: #fff; border-radius: 16px; font-size: 1.25rem; }
.offer-heading h3 { margin-top: 5px; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.3; letter-spacing: -.6px; }
.offer-description { margin-top: 22px; color: var(--muted); font-size: .94rem; line-height: 1.7; }
.offer-features { display: grid; gap: 22px; list-style: none; margin: 28px 0; padding: 26px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.offer-features li { display: flex; align-items: flex-start; gap: 14px; }
.offer-feature-icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px; color: var(--purple-dark); background: #f6f0fd; font-size: .95rem; }
.offer-features strong { display: block; font-size: .9rem; line-height: 1.4; font-weight: 650; }
.offer-features li div > span { display: block; margin-top: 5px; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.offer-terms { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.offer-terms .offer-eyebrow { font-size: .65rem; letter-spacing: 1px; }
.offer-terms p { margin-top: 6px; font-size: .9rem; font-weight: 600; }
.offer-terms-icon { color: #a78bca; font-size: 1.1rem; }
.offer-cta { gap: 16px; min-height: 52px; border-radius: 13px; font-size: .95rem; }
.offer-cta i { font-size: .8rem; transition: transform .2s; }
.offer-cta:hover i { transform: translateX(3px); }
@media (max-width: 900px) {
  .pro-plan-layout { gap: 36px; }
  .subscription-offer { padding: 28px; }
}
@media (max-width: 700px) {
  .pro-plan-section { padding: 52px 0; }
  .pro-plan-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 560px; }
  .pro-plan-intro h2 { letter-spacing: -.8px; }
  .pro-plan-intro > p { font-size: .95rem; }
  .pro-plan-support { margin-top: 24px; padding-top: 22px; }
  .subscription-offer { padding: 26px 22px; border-radius: 22px; }
  .offer-heading { gap: 12px; }
  .offer-symbol { width: 46px; height: 46px; border-radius: 14px; }
  .offer-features { gap: 20px; }
}
.subscription-notice { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.subscription-notice > span:nth-child(2) { flex: 1; min-width: 180px; }
.subscription-details, .subscription-record { padding: 22px; overflow-wrap: anywhere; }
.subscription-details .flex-between { flex-wrap: wrap; gap: 12px; }
.subscription-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 24px 0; }
.subscription-values dt { font-size: .85rem; color: var(--muted); }
.subscription-values dd { margin: 8px 0 0; font-weight: 600; }
.subscription-subtitle { font-size: 1.1rem; }
.subscription-history { display: grid; gap: 12px; }
.subscription-filters { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.subscription-filters .field { margin: 0; }
.subscription-table .tbl { min-width: 680px; }
.subscription-table .row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.subscription-active { background: #dcfce7; color: #166534; }
.subscription-trial, .subscription-scheduled { background: #ede9fe; color: #6d28d9; }
.subscription-grace { background: #fef3c7; color: #92400e; }
.subscription-overdue, .subscription-expired { background: #fee2e2; color: #b91c1c; }
.subscription-pending, .subscription-cancelled { background: #f3f0f7; color: #635872; }
@media (max-width: 700px) {
  .subscription-values, .subscription-filters { grid-template-columns: minmax(0, 1fr); }
  .subscription-filters > button { justify-self: start; }
  .subscription-details, .subscription-record { padding: 16px; }
}
@media (max-width: 700px) {
  .finance-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .finance-filters > .field:nth-child(3) { grid-column: 1 / -1; }
  .finance-filters > button { justify-self: start; }
  .finance-position, .finance-bill, .finance-record { padding: 16px; }
}
@media (max-width: 480px) {
  .finance-value { font-size: 1.05rem; }
  .finance-bill-values { gap: 12px; }
}

/* Shared workspace for salon owners and platform administrators */
body.workspace-mode { background: #f7f8fb; }
.workspace-mode .footer, .workspace-mode #hamburger, .workspace-mode #navMobile { display: none; }
.workspace-mode .header-inner { max-width: 1440px; padding-left: 32px; padding-right: 32px; }
.workspace-mode .header-actions { display: flex; }
.workspace-brand { font-family: Inter, sans-serif; font-size: .6rem; font-weight: 800; letter-spacing: 1.2px; color: var(--purple-dark); margin-left: 10px; border-left: 1px solid var(--border); padding-left: 10px; }
.workspace-caption { font-size: .82rem; color: var(--muted); }
.workspace-mode .user-chip { background: #fff; }
.workspace-mode .user-chip > i { color: var(--muted); font-size: .65rem; }
.workspace-mode .btn-primary { background: #7c3aed; box-shadow: none; }
.workspace-mode .btn-primary:hover { background: #6d28d9; box-shadow: 0 4px 12px rgba(109,40,217,.15); }
.workspace-mode .btn { min-height: 42px; border-radius: 10px; font-size: .86rem; }
.workspace-mode .btn-sm { min-height: 36px; font-size: .78rem; }
.workspace-mode .input, .workspace-mode .select { border-color: #e3e4ec; border-radius: 10px; font-size: .88rem; min-width: 0; }
.workspace-mode :is(a, button, summary):focus-visible { outline: 3px solid #c4b5fd; outline-offset: 3px; }
.workspace-layout { max-width: 1440px; padding: 30px 32px 56px; gap: 32px; align-items: flex-start; flex-direction: row; }
.workspace-layout .dash-side { width: 210px; border: 0; background: transparent; box-shadow: none; padding: 0; position: sticky; top: 92px; flex-shrink: 0; }
.workspace-layout .dash-est { padding: 0 10px 22px; margin-bottom: 20px; border-bottom: 1px solid #e4e5ed; }
.workspace-layout .dash-est .avatar { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: #ede9fe; color: #6d28d9; font-size: .86rem; }
.workspace-layout .dash-est strong { font-size: .9rem; }
.workspace-layout .dash-est div > span { display: block; margin-top: 4px; }
.workspace-layout .dash-nav { display: block; }
.dash-nav-group { margin-bottom: 24px; }
.dash-nav-group > span { display: block; padding: 0 12px; margin-bottom: 9px; color: #898294; font-size: .67rem; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; }
.dash-nav-group a { gap: 12px; padding: 11px 12px; margin: 3px 0; font-size: .82rem; font-weight: 550; }
.dash-nav-group a > i { width: 18px; text-align: center; color: #898294; }
.dash-nav-group a.active { background: #ede9fe; color: #6d28d9; font-weight: 700; }
.dash-nav-group a.active > i { color: #7c3aed; }
.dash-public-link { display: flex; align-items: center; gap: 10px; padding: 16px 12px 0; border-top: 1px solid #e4e5ed; text-decoration: none; color: var(--muted); font-size: .76rem; }
.workspace-layout .dash-main { flex: 1; min-width: 0; width: 100%; }
.dash-page-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.dash-page-header h1 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 750; letter-spacing: -.8px; line-height: 1.25; }
.dash-page-header p { color: var(--muted); font-size: .85rem; margin-top: 7px; line-height: 1.6; }
.dash-page-actions { display: flex; flex-shrink: 0; gap: 10px; flex-wrap: wrap; }
.dash-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.dash-metrics.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-metric { display: block; min-width: 0; padding: 22px; border: 1px solid #e7e7ef; border-radius: 15px; background: #fff; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.dash-metric:hover { border-color: #c4b5fd; box-shadow: 0 4px 16px rgba(109,40,217,.04); }
.dash-metric-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dash-metric-top > span:first-child { color: var(--muted); font-size: .77rem; font-weight: 600; }
.dash-metric-icon { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; background: #f5f1ff; color: #8b5cf6; border-radius: 9px; font-size: .84rem; }
.dash-metric > strong { display: block; margin: 12px 0 9px; font-size: clamp(1.35rem, 2.1vw, 1.85rem); letter-spacing: -.8px; line-height: 1.2; overflow-wrap: anywhere; }
.dash-metric-note { display: block; color: #817a8b; font-size: .69rem; line-height: 1.6; }
.dash-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 24px; }
.dash-overview-aside { display: grid; gap: 24px; }
.dash-panel { min-width: 0; background: #fff; border: 1px solid #e7e7ef; border-radius: 16px; }
.dash-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; }
.dash-section-head h2 { font-size: 1rem; font-weight: 700; line-height: 1.5; }
.dash-section-head p { margin-top: 4px; color: var(--muted); font-size: .76rem; line-height: 1.6; }
.dash-text-link { display: inline-flex; align-items: center; gap: 8px; color: #6d28d9; font-size: .77rem; font-weight: 650; text-decoration: none; flex-shrink: 0; }
.dash-text-link i { font-size: .65rem; }
.dash-text-link:hover { text-decoration: underline; }
.dash-count { display: grid; place-items: center; width: 25px; height: 25px; background: #f5f1ff; color: #7c3aed; border-radius: 8px; font-size: .75rem; font-weight: 700; }
.dash-schedule-list { min-width: 0; }
.dash-appointment { display: grid; grid-template-columns: 70px minmax(130px, 1fr) minmax(140px, 170px) auto; gap: 18px; align-items: center; padding: 22px 24px; border-top: 1px solid #eeeef4; }
.dash-appointment-time { align-self: start; padding-top: 3px; }
.dash-appointment-time strong { display: block; font-size: 1.12rem; letter-spacing: -.5px; }
.dash-appointment-time > span { display: block; margin-top: 5px; color: var(--muted); font-size: .73rem; }
.dash-appointment-person { min-width: 0; }
.dash-name-button { border: 0; background: transparent; padding: 0; color: var(--text); font: inherit; font-size: .89rem; font-weight: 650; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.dash-name-button:hover { color: #6d28d9; }
.dash-appointment-person p { font-size: .79rem; color: #635a70; line-height: 1.6; margin-top: 5px; }
.dash-appointment-person > span { display: block; font-size: .72rem; color: #898294; margin-top: 4px; line-height: 1.6; }
.dash-appointment-person > span > i { font-size: .62rem; margin-right: 2px; }
.dash-appointment-badges { display: flex; gap: 9px 14px; flex-wrap: wrap; }
.dash-appointment-badges > div { display: grid; gap: 5px; justify-items: start; }
.dash-badge-label { font-size: .62rem; color: #898294; }
.dash-appointment-actions { display: flex; align-items: center; gap: 8px; }
.dash-action-menu { position: relative; flex-shrink: 0; }
.dash-action-menu > summary { display: grid; place-items: center; list-style: none; width: 36px; height: 36px; border: 1px solid #e7e7ef; border-radius: 9px; background: #fff; color: #817a8b; cursor: pointer; }
.dash-action-menu > summary::-webkit-details-marker { display: none; }
.dash-action-menu[open] > summary { color: #6d28d9; border-color: #c4b5fd; background: #f5f1ff; }
.dash-action-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; width: 222px; padding: 6px; border: 1px solid #e7e7ef; border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(31,21,48,.12); }
.dash-action-list button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-radius: 7px; background: transparent; padding: 11px 10px; color: #51495e; font-size: .78rem; text-align: left; cursor: pointer; }
.dash-action-list button:hover { background: #f7f5fb; }
.dash-action-list button > i { width: 16px; text-align: center; }
.dash-action-list .action-danger { color: #b91c1c; }
.dash-action-list button[disabled] { opacity: .5; cursor: not-allowed; }
.dash-appointment.compact { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px 16px; }
.dash-appointment.compact .dash-appointment-time { grid-column: 1; grid-row: 1 / span 2; }
.dash-appointment.compact .dash-appointment-person { grid-column: 2; }
.dash-appointment.compact .dash-appointment-badges { grid-column: 2; }
.dash-appointment.compact .dash-appointment-actions { grid-column: 3; grid-row: 1 / span 2; align-self: start; }
.dash-attention-list { padding: 0 18px 8px; }
.dash-attention-list a { display: flex; align-items: center; gap: 12px; padding: 16px 4px; border-top: 1px solid #eeeef4; text-decoration: none; }
.dash-attention-icon { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; color: #b7791f; background: #fffbeb; font-size: .85rem; }
.dash-attention-list strong { font-size: .78rem; line-height: 1.6; }
.dash-attention-list p { margin-top: 4px; font-size: .69rem; line-height: 1.6; color: var(--muted); }
.dash-attention-list a > i { margin-left: auto; font-size: .65rem; color: #ada5b8; }
.dash-all-clear { display: grid; justify-items: center; gap: 10px; padding: 24px 20px 32px; text-align: center; }
.dash-all-clear > i { font-size: 1.6rem; color: #16a34a; }
.dash-all-clear strong { font-size: .88rem; }
.dash-all-clear p { font-size: .77rem; color: var(--muted); }
.dash-shortcuts { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 0 18px 18px; }
.dash-shortcuts a, .dash-shortcuts button { display: flex; align-items: center; gap: 12px; border: 0; background: #f8f7fb; border-radius: 10px; padding: 13px; text-decoration: none; color: #635a70; font-size: .76rem; text-align: left; cursor: pointer; }
.dash-shortcuts i { color: #8b5cf6; width: 16px; text-align: center; }
.dash-shortcuts :is(a, button):hover { background: #f0eafb; color: #6d28d9; }
.dash-empty { padding: 40px 24px; text-align: center; }
.dash-empty-icon { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #9b80cd; background: #f5f1ff; font-size: 1.4rem; }
.dash-empty h3 { margin-top: 16px; font-size: .98rem; }
.dash-empty p { color: var(--muted); font-size: .83rem; line-height: 1.7; margin: 8px auto 18px; max-width: 380px; }
.dash-agenda-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
.dash-segments { display: inline-flex; gap: 3px; padding: 4px; border: 1px solid #e7e7ef; background: #f0f1f6; border-radius: 11px; }
.dash-segments a { text-decoration: none; color: #817a8b; font-size: .8rem; font-weight: 600; padding: 8px 14px; border-radius: 7px; }
.dash-segments a.active { background: #fff; color: #6d28d9; box-shadow: 0 1px 4px rgba(31,21,48,.06); }
.dash-date-controls { display: flex; align-items: center; gap: 8px; }
.dash-date-controls input { max-width: 166px; }
.dash-icon-button { width: 42px; padding: 0; flex-shrink: 0; }
.dash-search-form, .dash-agenda-filters { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.dash-search-field { position: relative; flex: 1; min-width: 200px; }
.dash-search-field > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #a39aad; font-size: .85rem; }
.dash-search-field > input { padding-left: 38px; background: #fff; }
.dash-search-form > .select { max-width: 220px; }
.dash-agenda-filters > div:not(.dash-search-field) { width: 180px; }
.dash-table-panel .table-wrap { border: 0; border-radius: 0 0 16px 16px; box-shadow: none; overflow: visible; }
.dash-table-panel .tbl { table-layout: fixed; }
.dash-table-panel .tbl th { background: #fbfbfd; padding: 12px 20px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.dash-table-panel .tbl td { padding: 20px; overflow-wrap: anywhere; font-size: .82rem; border-color: #eeeef4; }
.dash-table-panel .tbl th:first-child { width: 27%; }
.dash-table-panel .tbl th:last-child { width: 145px; }
.dash-table-secondary { font-size: .73rem; color: var(--muted); line-height: 1.6; margin-top: 5px; }
.dash-client-name { display: flex; align-items: center; gap: 12px; }
.dash-client-name .avatar { width: 34px; height: 34px; flex-shrink: 0; background: #f1ebfb; color: #8b5cf6; font-size: .7rem; }
.dash-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.dash-team-card { min-width: 0; padding: 24px; background: #fff; border: 1px solid #e7e7ef; border-radius: 16px; }
.dash-team-heading { display: flex; align-items: center; gap: 14px; }
.dash-team-heading > .dash-action-menu { margin-left: auto; }
.dash-team-heading .professional-avatar { width: 48px; height: 48px; margin: 0; flex-shrink: 0; font-size: .9rem; }
.dash-team-heading > div { min-width: 0; }
.dash-team-heading h2 { font-size: .92rem; font-weight: 650; overflow-wrap: anywhere; }
.dash-team-heading p { font-size: .77rem; color: var(--muted); margin-top: 5px; }
.dash-team-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; padding: 20px 0; border-top: 1px solid #eeeef4; border-bottom: 1px solid #eeeef4; }
.dash-team-numbers strong { display: block; font-size: 1.3rem; }
.dash-team-numbers span { display: block; margin-top: 5px; font-size: .69rem; color: var(--muted); }
.dash-team-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dash-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.dash-form-panel { padding: 24px; }
.dash-form-panel .dash-section-head { padding: 0 0 24px; }
.dash-form-panel .field label { font-size: .82rem; }
.dash-config-location { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; margin-top: 24px; }
.dash-page-preview { border: 1px solid #eeeef4; border-radius: 12px; overflow: hidden; margin-top: 28px; }
.dash-page-preview img { width: 100%; height: 170px; object-fit: cover; display: block; }
.dash-page-preview > div { padding: 18px; }
.dash-page-preview strong, .dash-page-preview span { display: block; }
.dash-page-preview span { color: var(--muted); font-size: .8rem; margin-top: 5px; }
.dash-detail-person { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.dash-detail-person .avatar { width: 48px; height: 48px; flex-shrink: 0; }
.dash-detail-person h4 { font-size: 1rem; }
.dash-detail-person p { margin-top: 5px; color: var(--muted); font-size: .78rem; }
.dash-detail-values { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 24px 0; border-top: 1px solid #eeeef4; border-bottom: 1px solid #eeeef4; }
.dash-detail-values dt { color: var(--muted); font-size: .75rem; }
.dash-detail-values dd { margin: 8px 0 0; font-size: .87rem; overflow-wrap: anywhere; }
.dash-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.workspace-mode .finance-tabs { padding: 5px; border: 1px solid #e7e7ef; border-radius: 12px; background: #f0f1f6; gap: 3px; }
.workspace-mode .finance-tabs .btn { min-height: 36px; background: transparent; border: 0; color: #817a8b; border-radius: 8px; }
.workspace-mode .finance-tabs .btn-primary { background: #fff; color: #6d28d9; box-shadow: 0 1px 4px rgba(31,21,48,.06); }
.workspace-mode .finance-filters { padding: 20px; border-radius: 14px; background: #fff; border: 1px solid #e7e7ef; }
.workspace-mode .card { box-shadow: none; border-color: #e7e7ef; }
.workspace-mode .stat-card { border-radius: 15px; padding: 22px; }
.workspace-mode .stat-card .st-label { text-transform: none; letter-spacing: 0; font-size: .77rem; }
.workspace-mode .finance-position strong { font-size: 1.3rem; }
.workspace-mode .finance-position { border-radius: 15px; }
.workspace-mode .subscription-notice, .dash-business-notice { display: flex; align-items: center; gap: 12px; padding: 13px 16px; font-size: .78rem; background: #fff; border-color: #e7e7ef; border-radius: 11px; }
.workspace-mode .subscription-notice > span:nth-child(2), .dash-business-notice > span:nth-child(2) { min-width: 0; flex: 1; }
.workspace-mode .subscription-notice:has(.subscription-overdue, .subscription-expired, .subscription-cancelled) { background: #fff7f7; border-color: #fecaca; }
.dash-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dash-more-card { display: flex; align-items: center; gap: 14px; padding: 20px; background: #fff; border: 1px solid #e7e7ef; border-radius: 14px; text-decoration: none; }
.dash-more-card > span { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; background: #f5f1ff; color: #8b5cf6; border-radius: 12px; }
.dash-more-card strong { font-size: .86rem; }
.dash-more-card p { font-size: .73rem; color: var(--muted); line-height: 1.6; margin-top: 4px; }
.dash-more-card > i { margin-left: auto; color: #a39aad; font-size: .7rem; }
.dash-mobile-nav { display: none; }
@media (max-width: 1150px) {
  .dash-overview-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-overview-aside { grid-template-columns: 1fr 1fr; }
  .dash-page-header { flex-wrap: wrap; gap: 16px; }
  .dash-metric { padding: 18px; }
}
@media (max-width: 900px) {
  .workspace-mode .header-inner { padding-left: 20px; padding-right: 20px; }
  .workspace-layout { padding: 24px 20px 100px; }
  .workspace-layout .dash-side { display: none; }
  .dash-mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: flex; padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #e7e7ef; box-shadow: 0 -4px 16px rgba(31,21,48,.03); }
  .dash-mobile-nav a { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 0; text-decoration: none; color: #898294; font-size: .66rem; font-weight: 600; border-radius: 10px; }
  .dash-mobile-nav a > i { font-size: 1.12rem; }
  .dash-mobile-nav a.active { color: #7c3aed; background: #f5f1ff; }
  .workspace-mode .toasts { bottom: 90px; }
}
@media (max-width: 700px) {
  .dash-metrics, .dash-metrics.three { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dash-metrics.three .dash-metric:last-child { grid-column: 1 / -1; }
  .dash-metric { padding: 16px; }
  .dash-metric-top > span:first-child { font-size: .71rem; }
  .dash-metric-top { align-items: flex-start; }
  .dash-metric-icon { width: 26px; height: 26px; font-size: .72rem; }
  .dash-metric-note { font-size: .65rem; }
  .dash-overview-aside, .dash-settings-grid, .dash-more-grid { grid-template-columns: 1fr; }
  .dash-section-head { padding: 20px; align-items: flex-start; }
  .dash-section-head p { font-size: .72rem; }
  .dash-appointment, .dash-appointment.compact { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 20px; }
  .dash-appointment .dash-appointment-time, .dash-appointment.compact .dash-appointment-time { grid-column: 1; grid-row: 1; }
  .dash-appointment .dash-appointment-person, .dash-appointment.compact .dash-appointment-person { grid-column: 2; grid-row: 1; }
  .dash-appointment .dash-appointment-badges, .dash-appointment.compact .dash-appointment-badges { grid-column: 1 / -1; grid-row: 2; gap: 24px; }
  .dash-appointment .dash-appointment-actions, .dash-appointment.compact .dash-appointment-actions { grid-column: 1 / -1; grid-row: 3; justify-content: flex-end; }
  .workspace-mode .dash-action-menu > summary { width: 42px; height: 42px; }
  .workspace-mode .dash-appointment-actions .btn { min-height: 42px; }
  .dash-agenda-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .dash-agenda-filters > .dash-search-field { grid-column: 1 / -1; min-width: 0; }
  .dash-agenda-filters > div:not(.dash-search-field) { width: auto; min-width: 0; }
  .dash-agenda-filters > button { justify-self: start; }
  .dash-date-controls { width: 100%; gap: 6px; }
  .dash-date-controls input { flex: 1; width: 0; max-width: none; padding-left: 9px; padding-right: 9px; }
  .dash-search-form .dash-search-field { min-width: 0; flex-basis: 100%; }
  .dash-search-form > .select { flex: 1; max-width: none; width: auto; }
  .dash-table-panel .table-wrap, .workspace-mode .finance-table { overflow: visible; background: transparent; border: 0; box-shadow: none; }
  .workspace-mode .responsive-table { min-width: 0 !important; display: block; width: 100%; }
  .workspace-mode .responsive-table thead { display: none; }
  .workspace-mode .responsive-table tbody { display: grid; gap: 12px; width: 100%; }
  .workspace-mode .responsive-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 16px; padding: 20px; background: #fff; border: 1px solid #e7e7ef; border-radius: 14px; }
  .workspace-mode .responsive-table td { display: block; min-width: 0; padding: 0; border: 0; font-size: .82rem; overflow-wrap: anywhere; }
  .workspace-mode .responsive-table td:first-child, .workspace-mode .responsive-table td:last-child, .workspace-mode .responsive-table td[data-wide] { grid-column: 1 / -1; }
  .workspace-mode .responsive-table td:not(:first-child)::before { display: block; content: attr(data-label); color: #898294; font-size: .69rem; margin-bottom: 5px; }
  .workspace-mode .responsive-table td:last-child::before { display: none; }
  .workspace-mode .responsive-table td:last-child .row-actions { justify-content: flex-end; }
  .dash-table-panel { border: 0; background: transparent; }
  .dash-table-panel .dash-section-head { padding-left: 0; padding-right: 0; padding-top: 6px; }
  .dash-team-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-form-panel { padding: 20px; }
  .workspace-mode .finance-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 16px; }
  .workspace-mode .finance-tabs { gap: 3px; }
  .workspace-mode .finance-tabs .btn { flex: 1 0 auto; }
}
@media (max-width: 480px) {
  .workspace-mode .header-inner { padding-left: 16px; padding-right: 16px; }
  .workspace-layout { padding: 22px 16px 100px; }
  .dash-page-header { display: block; }
  .dash-page-header h1 { font-size: 1.5rem; }
  .dash-page-actions:not(:empty) { margin-top: 16px; }
  .dash-page-header p { font-size: .79rem; }
  .dash-metric > strong { font-size: 1.35rem; }
  .dash-metric-icon { display: none; }
  .dash-detail-values { grid-template-columns: 1fr; }
  .workspace-mode .subscription-notice { font-size: .74rem; gap: 9px; }
  .workspace-mode .subscription-notice .dash-text-link { margin-left: auto; }
}

/* ---------- Dates: DD-MM-AAAA with a native calendar ---------- */
.date-field { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; width: 100%; }
.date-field .date-display { grid-area: 1 / 1; width: 100%; max-width: none; padding-right: 48px; font-variant-numeric: tabular-nums; }
.date-native { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; clip-path: inset(50%); pointer-events: none; }
.date-picker-button { grid-area: 1 / 1; justify-self: end; align-self: stretch; display: grid; place-items: center; width: 42px; margin: 1px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--purple-dark); cursor: pointer; }
.date-picker-button:hover { background: #f3edff; }
.date-picker-button:disabled { color: var(--muted); cursor: default; }
.field-error { color: #b91c1c; font-size: .82rem; line-height: 1.5; margin: 6px 0 12px; }
.field-error[role="alert"] { display: block; }
.field-error[hidden] { display: none; }
.date-error { grid-area: 2 / 1; display: block; margin-bottom: 0; }
.input[aria-invalid="true"] { border-color: #dc2626; }
.day-card { min-width: 116px; }
.day-card .day-full-date { font-size: .82rem; font-weight: 700; margin-top: 8px; white-space: nowrap; }
.appt-datebox { min-width: 110px; }
.appt-datebox .ad-full-date { font-size: .85rem; font-weight: 700; margin-top: 8px; white-space: nowrap; }

/* ---------- Daily work in the salon ---------- */
.workspace-mode .dash-metric-top > span:first-child { font-size: .86rem; }
.workspace-mode .dash-metric-note, .workspace-mode .dash-badge-label { font-size: .78rem; color: #625a70; }
.workspace-mode .dash-appointment-person > span { font-size: .8rem; color: #625a70; }
.workspace-mode .dash-appointment-person p { font-size: .86rem; }
.workspace-mode .dash-name-button { font-size: .96rem; }
.workspace-mode .dash-appointment-time > span { font-size: .76rem; white-space: nowrap; }
.workspace-mode .dash-appointment { grid-template-columns: 94px minmax(130px, 1fr) minmax(150px, 180px) auto; }
.workspace-mode .dash-appointment.compact { grid-template-columns: 94px minmax(0, 1fr) auto; }
.workspace-mode .status-pill { font-size: .78rem; }
.workspace-mode .dash-section-head p, .workspace-mode .dash-table-secondary, .workspace-mode .dash-text-link { font-size: .82rem; }
.workspace-mode .dash-nav-group > span { font-size: .75rem; color: #625a70; }
.workspace-mode .dash-nav-group a { font-size: .9rem; }
.workspace-mode .dash-attention-list strong { font-size: .87rem; }
.workspace-mode .dash-attention-list p { font-size: .8rem; }
.dash-attention-list .attention-urgent .dash-attention-icon { color: #b91c1c; background: #fef2f2; }
.dash-attention-list .attention-warning .dash-attention-icon { color: #92400e; background: #fffbeb; }
.dash-filter-note { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; background: #fff7ed; color: #9a3412; font-size: .85rem; }
.dash-date-controls .date-field { flex: 1; width: 170px; max-width: 170px; }
.dash-date-controls .date-field .date-display { width: 100%; }
.finance-periods { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 18px 0 12px; }
.finance-periods > span { margin-left: auto; color: #625a70; font-size: .82rem; font-variant-numeric: tabular-nums; }
.finance-bill-filters { margin-bottom: 22px; width: fit-content; max-width: 100%; flex-wrap: wrap; }
.dash-setup-guide { padding: 22px; margin-bottom: 24px; border: 1px solid #ddd6fe; border-radius: 16px; background: #fcfaff; }
.dash-setup-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.dash-setup-heading h2 { font-size: 1rem; }
.dash-setup-heading p { margin-top: 6px; font-size: .85rem; color: #625a70; }
.dash-setup-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.dash-setup-steps a { display: flex; align-items: center; gap: 10px; padding: 14px 12px; background: #fff; border: 1px solid #e7e7ef; border-radius: 12px; text-decoration: none; }
.dash-setup-steps a:hover { border-color: #a78bfa; }
.dash-setup-steps a > span { color: #7c3aed; }
.dash-setup-steps .done > span { color: #15803d; }
.dash-setup-steps strong { display: block; font-size: .81rem; }
.dash-setup-steps small { display: block; font-size: .75rem; margin-top: 5px; color: #625a70; }
.dash-client-results:empty { display: none; }
.dash-client-results { margin-top: 6px; border: 1px solid #e7e7ef; border-radius: 10px; overflow: hidden; }
.dash-client-results button { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-bottom: 1px solid #e7e7ef; padding: 12px; text-align: left; background: #fff; cursor: pointer; }
.dash-client-results button:last-child { border-bottom: 0; }
.dash-client-results button:hover { background: #f5f1ff; }
.dash-client-results strong, .dash-client-results small { display: block; }
.dash-client-results small { color: #625a70; margin-top: 4px; }
.dash-client-results button > i { margin-left: auto; color: #7c3aed; }
.dash-client-results p { padding: 14px; font-size: .85rem; color: #625a70; }
.dash-config-form { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.dash-hours-day { position: relative; border: 1px solid #e7e7ef; border-radius: 12px; padding: 16px; margin: 0 0 18px; min-width: 0; }
.dash-hours-day legend { padding: 0 6px; font-size: .9rem; font-weight: 700; }
.dash-hours-closed { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: #625a70; margin-bottom: 14px; width: fit-content; min-height: 32px; cursor: pointer; }
.dash-hours-closed input { width: 18px; height: 18px; accent-color: #7c3aed; }
.dash-hours-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 36px; gap: 8px; align-items: end; }
.dash-hours-row .field { margin: 0 0 14px; min-width: 0; }
.dash-hours-row .field label { font-size: .78rem; }
.dash-hours-row .input { padding: 10px 8px; }
.dash-hours-row > button { margin-bottom: 14px; min-width: 36px; width: 36px; }
.dash-hours-separator { align-self: end; margin-bottom: 26px; font-size: .8rem; color: #625a70; }
.dash-hours-help { font-size: .8rem; color: #625a70; line-height: 1.6; margin-bottom: 8px; }

/* ---------- Agenda by time and professional ---------- */
.dash-calendar-mobile-list { display: none; }
.dash-calendar-service { display: flex; align-items: center; gap: 14px; padding: 0 24px; }
.dash-calendar-service label { color: #625a70; font-size: .85rem; white-space: nowrap; }
.dash-calendar-service .select { max-width: 340px; }
.dash-calendar-help { padding: 12px 24px 20px; font-size: .82rem; color: #625a70; }
.dash-calendar-scroll { overflow: auto; max-height: 660px; border-top: 1px solid #e7e7ef; border-radius: 0 0 16px 16px; }
.dash-calendar-grid { display: grid; min-width: 100%; }
.dash-calendar-column { min-width: 0; border-left: 1px solid #e7e7ef; }
.dash-calendar-head { display: flex; align-items: center; gap: 10px; height: 78px; padding: 12px; background: #fff; border-bottom: 1px solid #e7e7ef; position: sticky; top: 0; z-index: 5; }
.dash-calendar-head .avatar, .dash-calendar-head .professional-avatar { width: 36px; height: 36px; font-size: .8rem; flex-shrink: 0; }
.dash-calendar-head strong { display: block; font-size: .87rem; }
.dash-calendar-head div > span { display: block; font-size: .75rem; color: #625a70; margin-top: 4px; }
.dash-calendar-hours { position: sticky; left: 0; z-index: 6; background: #fff; }
.dash-calendar-hours .dash-calendar-head { font-size: .73rem; padding: 8px; }
.dash-calendar-track { position: relative; background: repeating-linear-gradient(to bottom, #fff 0, #fff 47px, #eeeef4 47px, #eeeef4 48px); }
.dash-calendar-tick { position: absolute; left: 8px; padding-top: 5px; color: #625a70; font-size: .75rem; font-variant-numeric: tabular-nums; }
.dash-calendar-free { display: flex; align-items: center; justify-content: center; gap: 8px; position: absolute; left: 6px; right: 6px; height: 42px; border: 1px dashed #e2ddef; border-radius: 8px; background: #fff; color: #766a86; cursor: pointer; font-size: .78rem; }
.dash-calendar-free:hover, .dash-calendar-free:focus-visible { background: #f5f1ff; border-color: #a78bfa; color: #6d28d9; }
.dash-calendar-break, .dash-calendar-hidden { position: absolute; left: 0; right: 0; display: grid; place-items: center; background: repeating-linear-gradient(135deg, #f7f8fb 0, #f7f8fb 6px, #eff0f5 6px, #eff0f5 7px); font-size: .75rem; color: #766a86; padding: 8px; }
.dash-calendar-hidden { left: 6px; right: 6px; border-radius: 8px; background: #eeeef4; }
.dash-calendar-appointment { position: absolute; left: 6px; right: 6px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; overflow: hidden; border: 1px solid #c4b5fd; border-left: 4px solid #7c3aed; border-radius: 9px; padding: 8px 10px; background: #f5f1ff; color: #4c1d95; text-align: left; cursor: pointer; }
.dash-calendar-appointment:hover { box-shadow: 0 3px 10px rgba(76,29,149,.12); }
.dash-calendar-appointment strong { font-size: .87rem; }
.dash-calendar-appointment > span:not(.dash-calendar-time) { font-size: .8rem; }
.dash-calendar-time { font-size: .75rem; font-weight: 600; }
.dash-calendar-appointment small { font-size: .73rem; }
.calendar-pendente { border-color: #fde68a; border-left-color: #b45309; background: #fffbeb; color: #78350f; }
.calendar-concluido { border-color: #bbf7d0; border-left-color: #15803d; background: #f0fdf4; color: #166534; }
.dash-calendar-now { position: absolute; left: 0; right: 0; z-index: 3; border-top: 2px solid #dc2626; pointer-events: none; }
.dash-calendar-now::before { content: ''; position: absolute; top: -5px; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: #dc2626; }
@media (max-width: 1150px) {
  .dash-setup-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-config-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .dash-calendar-desktop, .dash-calendar-toggle { display: none; }
  .dash-calendar-mobile-list { display: block; }
  .workspace-mode .dash-appointment, .workspace-mode .dash-appointment.compact { grid-template-columns: 88px minmax(0, 1fr); padding: 16px; gap: 10px 12px; }
  .workspace-mode .dash-appointment .dash-appointment-badges { grid-column: 2; grid-row: 2; gap: 8px 12px; }
  .workspace-mode .dash-appointment .dash-appointment-actions { grid-column: 2; grid-row: 3; justify-content: flex-start; }
  .workspace-mode .dash-appointment .dash-badge-label { font-size: .75rem; }
  .dash-date-controls .date-field { max-width: none; width: 0; }
  .finance-periods > span { flex-basis: 100%; margin: 4px 0; }
  .dash-setup-heading { flex-wrap: wrap; }
  .dash-setup-guide { padding: 18px; }
  .dash-setup-steps { grid-template-columns: minmax(0, 1fr); }
  .dash-hours-day { padding: 12px; }
  .dash-config-form .dash-form-panel { padding: 16px; }
}

/* ---------- Platform administration ---------- */
.admin-filter-panel { padding: 20px; background: #fff; border: 1px solid #e7e7ef; border-radius: 14px; margin-bottom: 24px; }
.admin-filter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 46px; }
.admin-workspace .dash-table-panel .table-wrap { overflow: visible; border: 0; border-radius: 0 0 16px 16px; box-shadow: none; }
.admin-workspace .responsive-table { table-layout: fixed; min-width: 0; }
.admin-workspace .responsive-table td { overflow-wrap: anywhere; }
.admin-company-table th:nth-child(1), .admin-company-table th:nth-child(2) { width: 24%; }
.admin-company-table th:nth-child(3) { width: 16%; }
.admin-company-table th:nth-child(4) { width: 14%; }
.admin-company-table th:nth-child(5) { width: 22%; }
.admin-company-table .row-actions { justify-content: flex-end; flex-wrap: nowrap; }
.admin-subscription-table th:first-child { width: 25%; }
.admin-subscription-table th:nth-child(2) { width: 19%; }
.admin-subscription-table th:last-child { width: 25%; }
.admin-subscription-table .row-actions { justify-content: flex-end; }
.admin-catalog-notice { display: flex; align-items: flex-start; gap: 12px; background: #fff; border-color: #e7e7ef; border-radius: 12px; margin-bottom: 24px; font-size: .85rem; }
.admin-catalog-notice > i { margin-top: 3px; color: #7c3aed; }
.admin-catalog-card { display: flex; flex-direction: column; padding: 24px; min-width: 0; }
.admin-catalog-card .dash-team-footer { margin-top: auto; }
.admin-catalog-heading { display: flex; align-items: center; gap: 12px; }
.admin-catalog-heading > div { flex: 1; min-width: 0; }
.admin-catalog-heading h2 { font-size: 1rem; overflow-wrap: anywhere; }
.admin-catalog-heading p { font-size: .82rem; color: #625a70; margin-top: 5px; }
.admin-catalog-icon { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: #f5f1ff; color: #7c3aed; }
.admin-editor-back { display: inline-block; margin-bottom: 20px; font-size: .85rem; }
.admin-company-wizard { max-width: 860px; }
.admin-company-wizard .setup-progress { margin-top: 24px; }
.admin-preset-editor h2, .admin-company-wizard h2 { font-size: 1.1rem; }
.admin-preset-editor .catalog-item { background: #f9f9fc; border-color: #e7e7ef; }
.admin-preset-editor .flex-between { gap: 12px; flex-wrap: wrap; }
.admin-workspace .dash-action-list { max-width: calc(100vw - 48px); }
@media (max-width: 700px) {
  .admin-filter-panel { padding: 16px; }
  .admin-filter-actions { grid-column: 1 / -1; }
  .admin-catalog-card { padding: 20px; }
  .admin-company-wizard { padding: 20px; }
}