.velora-app {
  font-family: "Segoe UI", Arial, sans-serif;
  color: #291f36;
}
.velora-app *,
.v-dialog * {
  box-sizing: border-box;
}
.v-demo {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 10px 16px;
  border: 1px solid #e3dce9;
  border-radius: 8px;
  color: #594a66;
  background: #f5f0f8;
}
.v-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 45px 0 32px;
}
.v-page-heading h1 {
  font-size: clamp(38px, 5vw, 60px);
  margin: 8px 0 18px;
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.1;
}
.v-page-heading em {
  font-family: Georgia, serif;
  color: #846595;
}
.v-page-heading p {
  color: #746a7c;
  margin: 8px 0;
}
.v-eyebrow {
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 0.16em !important;
  color: #755d88 !important;
  text-transform: uppercase;
}
.v-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  border: 1px solid #30213c;
  border-radius: 99px;
  background: #30213c;
  color: white !important;
  font-size: 13px;
  font-weight: 500;
  padding: 14px 22px;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 0.2s,
    background 0.2s;
}
.v-button:hover {
  background: #573768;
  transform: translateY(-1px);
}
.v-secondary {
  background: transparent;
  color: #30213c !important;
  border-color: #d5cadf;
}
.v-secondary:hover {
  background: #f0e8f6;
}
.v-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.v-search {
  display: flex;
  align-items: end;
  gap: 16px;
  background: white;
  border: 1px solid #e7dfeb;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 15px 45px #46305208;
}
.v-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  flex: 1;
}
.v-field > span {
  color: #74677b;
  font-size: 11px;
}
.velora-app input,
.velora-app select,
.v-dialog input,
.v-dialog textarea,
.v-dialog select {
  font: inherit;
  color: #30213c;
  background: #fff;
  border: 1px solid #ded5e5;
  border-radius: 8px;
  padding: 12px;
  min-width: 0;
  width: 100%;
}
.v-field input,
.v-field select {
  height: 45px;
  font-size: 13px;
}
.v-mode {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: 6px;
  background: #f4eff7;
  border-radius: 12px;
  padding: 5px;
}
.v-mode label {
  padding: 10px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 12px;
  border-radius: 8px;
}
.v-mode label:has(input:checked) {
  background: white;
  box-shadow: 0 2px 10px #301a4310;
}
.v-mode input {
  width: auto;
  margin-right: 4px;
  accent-color: #745391;
}
.v-result-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  margin: 30px 0 20px;
  color: #716879;
}
.v-alternative {
  width: 100%;
  background: #f0eaf7;
  border-left: 3px solid #9776ae;
  padding: 15px 20px;
  border-radius: 0 8px 8px 0;
  color: #62437a;
}
.v-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  min-height: 240px;
}
.v-service-card {
  border: 1px solid #e5dce9;
  border-radius: 20px;
  overflow: hidden;
  background: white;
}
.v-service-art {
  height: 155px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 90%, #fff9 0, transparent 55%),
    linear-gradient(120deg, #f1dadf, #e0c4d6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.v-service-art:before {
  content: "";
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1px solid #ffffffad;
  position: absolute;
  box-shadow:
    0 0 0 16px #ffffff13,
    0 0 0 32px #ffffff0b;
}
.v-service-art.lilac {
  background: linear-gradient(120deg, #e4dcef, #cbb6df);
}
.v-service-art.peach {
  background: linear-gradient(120deg, #fae4d7, #ecc1b7);
}
.v-service-art.sage {
  background: linear-gradient(120deg, #e6eadf, #c4d1c0);
}
.v-art-symbol {
  font-size: 83px;
  color: #ffffffd9;
  text-shadow: 0 5px 15px #63437425;
  line-height: 1;
}
.v-service-tag,
.v-sample-tag {
  position: absolute;
  bottom: 12px;
  left: 14px;
  background: #ffffffb8;
  border-radius: 99px;
  padding: 4px 10px;
  font-size: 10px;
}
.v-sample-tag {
  left: auto;
  right: 14px;
  top: 12px;
  bottom: auto;
  background: #fff8;
}
.v-service-body {
  padding: 24px;
}
.v-service-body h2 {
  font-size: 23px !important;
  letter-spacing: -0.03em;
  margin: 7px 0 14px !important;
}
.v-service-body h3 {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 7px;
}
.v-service-body > p:not(.v-eyebrow) {
  font-size: 12px;
  color: #7b7181;
  line-height: 1.7;
  min-height: 40px;
}
.v-service-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  border-top: 1px solid #efeaf2;
  padding-top: 16px;
  margin-top: 18px;
}
.v-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.v-slots button {
  border: 1px solid #e0d5e8;
  background: #faf7fc;
  border-radius: 7px;
  padding: 7px 12px;
  color: #664580;
  cursor: pointer;
  font-size: 12px;
}
.v-slots button:hover {
  background: #664580;
  color: white;
}
.v-full {
  font-size: 12px;
  padding: 7px;
  color: #8b7c91;
}
.v-error {
  background: #fff0f0;
  color: #9c3030;
  border: 1px solid #f0cdcd;
  border-radius: 10px;
  padding: 20px;
  grid-column: 1/-1;
}
.v-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 65px 20px;
  background: #f4eef8;
  border-radius: 24px;
}
.v-empty > span {
  font-size: 40px;
  color: #9676ae;
}
.v-empty h3 {
  font-size: 28px;
}
.v-fine {
  font-size: 11px !important;
  line-height: 1.8;
  color: #786c80;
}
.v-dialog {
  color: #30213c;
  border: 1px solid #e7dbef;
  border-radius: 28px;
  max-width: 540px;
  width: calc(100% - 32px);
  padding: 42px;
  font:
    15px/1.6 "Segoe UI",
    Arial,
    sans-serif;
  box-shadow: 0 30px 120px #24103030;
  max-height: 90dvh;
  overflow: auto;
}
.v-dialog::backdrop {
  background: #24182c72;
  backdrop-filter: blur(6px);
}
.v-close {
  position: absolute;
  right: 20px;
  top: 16px;
  background: transparent;
  border: 0;
  font-size: 27px;
  cursor: pointer;
  color: #6f5e7d;
}
.v-dialog h2 {
  font-size: 36px;
  line-height: 1.12;
  letter-spacing: -0.045em;
  font-weight: 400;
}
.v-dialog > p {
  color: #73627d;
}
.v-quote {
  background: #f8f3fa;
  border-radius: 14px;
  padding: 20px;
  margin: 22px 0;
  font-size: 13px;
}
.v-quote > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0;
}
.v-quote > div:last-of-type {
  border-top: 1px solid #e5dbea;
  padding-top: 14px;
  font-size: 20px;
}
.v-quote small {
  display: block;
  margin-top: 14px;
  color: #7c6c88;
}
.v-promo > div {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.v-promo label {
  font-size: 12px;
}
.v-consent {
  display: flex;
  align-items: start;
  gap: 12px;
  margin: 22px 0;
  font-size: 12px;
}
.v-consent input {
  width: auto;
  margin-top: 4px;
  accent-color: #806094;
}
.v-confirm {
  width: 100%;
}
.v-modal-error {
  color: #a13e50 !important;
  font-size: 13px;
}
.v-success {
  border: 1px solid #d5c6df;
  background: #f1eaf6;
  color: #866399;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  font-size: 30px;
}
.v-assistant-orb {
  height: 90px;
  width: 90px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 25%,
    white,
    #e7c9ef 30%,
    #927bb9 65%,
    #cec4de
  );
  box-shadow:
    0 0 40px #d0b8ee80,
    inset 0 -10px 16px #5f408244;
  margin: 20px auto;
  color: white;
  display: grid;
  place-items: center;
  font-size: 42px;
}
.v-assistant-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.v-assistant-actions .v-button {
  font-size: 11px;
  padding: 12px 15px;
}
.v-demo-label {
  background: #f2eaf7;
  padding: 8px;
  text-align: center;
  font-size: 11px;
  border-radius: 8px;
}
.v-appointment {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 28px;
  margin: 20px 0;
  background: white;
  border: 1px solid #e5dce9;
  border-radius: 20px;
}
.v-appointment-icon {
  background: #eee3f5;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 34px;
  color: #8b67a6;
}
.v-appointment h2 {
  font-size: 24px;
  margin: 8px 0;
}
.v-appointment p {
  font-size: 13px;
  margin: 5px 0;
}
.v-appointment small {
  color: #897b93;
}
.v-appointment .v-button {
  margin-left: auto;
}
.v-status {
  font-size: 10px;
  background: #edf2e9;
  padding: 4px 9px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #5d6e4f;
}
.v-portal {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 35px;
  margin-top: 28px;
}
.v-sidebar {
  background: #f1ebf5;
  border-radius: 18px;
  padding: 24px;
}
.v-sidebar h2 {
  font-size: 29px;
}
.v-sidebar > p,
.v-sidebar > a {
  font-size: 12px;
}
.v-sidebar nav {
  display: grid;
  gap: 7px;
  margin: 34px 0;
}
.v-sidebar button {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 12px;
  border-radius: 8px;
  font:
    13px "Segoe UI",
    sans-serif;
  color: #73617f;
  cursor: pointer;
}
.v-sidebar button.active {
  background: #fff;
  color: #452d58;
  box-shadow: 0 3px 10px #30203e08;
}
.v-portal-main .v-page-heading {
  margin-top: 10px;
}
.v-portal-main h1 {
  font-size: 39px;
}
.v-calendar-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.v-calendar-heading h2 {
  font-size: 24px;
}
.v-calendar-heading .v-field {
  max-width: 190px;
}
.v-calendar-scroll {
  overflow: auto;
  border: 1px solid #e4dce9;
  border-radius: 12px;
}
.v-calendar {
  display: grid;
  grid-template-columns: 55px repeat(4, minmax(120px, 1fr));
  min-width: 600px;
  background: #fff;
}
.v-calendar-cell {
  border-right: 1px solid #f0eaf4;
  border-bottom: 1px solid #f0eaf4;
  min-height: 63px;
  padding: 6px;
  font-size: 10px;
}
.v-calendar-head {
  background: #f7f2fa;
  min-height: 40px;
  padding: 12px;
  text-align: center;
  font-weight: 600;
}
.v-calendar-time {
  color: #8c7e95;
  padding: 13px 7px;
}
.v-calendar-event {
  background: #e9ddf2;
  color: #64417f;
  padding: 7px;
  border-left: 2px solid #a180b9;
  border-radius: 5px;
  height: 100%;
  font-size: 10px;
}
.v-calendar-event small {
  display: block;
}
.v-calendar-blocked {
  display: block;
  color: #776b80;
  background: repeating-linear-gradient(
    45deg,
    #f7f4f9,
    #f7f4f9 3px,
    #eee9f2 3px,
    #eee9f2 4px
  );
  height: 100%;
  padding: 8px;
}
.v-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 25px 0;
}
.v-metrics article {
  background: white;
  border: 1px solid #e3d9ea;
  border-radius: 15px;
  padding: 24px;
}
.v-metrics span {
  font-size: 11px;
  display: block;
}
.v-metrics strong {
  font-size: 26px;
  font-weight: 400;
  display: block;
  margin-top: 14px;
}
.v-calculator {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.v-calculator h2 {
  font-size: 30px;
}
.v-calculator p {
  font-size: 13px;
}
.v-calc-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.v-calc-output {
  padding: 28px;
  background: #f0e7f7;
  border-radius: 20px;
  align-self: start;
}
.v-calc-output > strong {
  display: block;
  font-size: 38px;
  font-weight: 400;
  margin: 15px 0 28px;
}
.v-calc-output > div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #dbcee4;
  padding: 12px 0;
  font-size: 11px;
}
.v-offer-preview {
  background: radial-gradient(at 90% 0, #e8bfd4, transparent 65%), #e6d8f0;
  padding: 35px;
  border-radius: 22px;
  max-width: 480px;
}
.v-offer-preview > span {
  font-size: 10px;
  letter-spacing: 0.16em;
}
.v-offer-preview h3 {
  font-family: Georgia, serif;
  font-size: 35px;
  font-weight: 400;
  line-height: 1.1;
}
.v-offer-preview b {
  display: inline-block;
  letter-spacing: 0.16em;
  background: #fff7;
  border: 1px dashed #967ba8;
  border-radius: 8px;
  padding: 10px 22px;
}
.velora-app :focus-visible,
.v-dialog :focus-visible {
  outline: 3px solid #9b72b8;
  outline-offset: 3px;
}
@media (max-width: 1000px) {
  .v-search {
    flex-wrap: wrap;
  }
  .v-mode {
    flex-basis: 100%;
  }
  .v-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .v-portal {
    grid-template-columns: 1fr;
  }
  .v-sidebar nav {
    display: flex;
    flex-wrap: wrap;
    margin: 12px 0;
  }
  .v-sidebar h2,
  .v-sidebar > p:last-child {
    display: none;
  }
  .v-sidebar {
    padding: 18px;
  }
}
@media (max-width: 600px) {
  .v-demo {
    flex-wrap: wrap;
  }
  .v-demo > span {
    flex-basis: 100%;
  }
  .v-page-heading {
    display: block;
    margin-top: 30px;
  }
  .v-page-heading .v-button {
    margin-top: 16px;
  }
  .v-page-heading h1 {
    font-size: 40px;
  }
  .v-search {
    padding: 16px;
    gap: 12px;
  }
  .v-search .v-field {
    flex-basis: 44%;
  }
  .v-search > .v-button {
    width: 100%;
  }
  .v-results {
    grid-template-columns: 1fr;
  }
  .v-service-art {
    height: 175px;
  }
  .v-appointment {
    flex-wrap: wrap;
    padding: 20px;
    gap: 15px;
  }
  .v-appointment .v-button {
    margin-left: 0;
  }
  .v-appointment-icon {
    display: none;
  }
  .v-dialog {
    padding: 30px 22px;
  }
  .v-dialog h2 {
    font-size: 30px;
  }
  .v-calculator,
  .v-metrics {
    grid-template-columns: 1fr;
  }
  .v-portal-main h1 {
    font-size: 34px;
  }
  .v-metrics article {
    padding: 18px;
  }
  .v-result-summary > span {
    font-size: 11px;
  }
  .v-calendar-heading {
    flex-wrap: wrap;
  }
  .v-sidebar nav {
    gap: 2px;
  }
  .v-sidebar button {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .v-button {
    transition: none;
  }
  .v-button:hover {
    transform: none;
  }
}

.v-ai-card {padding:1.2rem;margin-block:1rem;border:1px solid #e2d2e8;border-radius:1.5rem;background:linear-gradient(125deg,#fff5fa,#f3efff);}
.v-ai-results .v-slots {display:flex;flex-wrap:wrap;gap:.5rem;}

.v-consent[hidden] { display: none; }

.v-service-art {position:relative;overflow:hidden;} .v-catalog-image {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .v-catalog-image + .v-art-symbol {visibility:hidden;} .v-service-tag,.v-sample-tag {z-index:1;} .v-ai-image {width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:1rem;}
.v-location-controls {margin:1rem 0 1.5rem;padding:1rem;border:1px solid #e7deeb;border-radius:1rem;} .v-location-controls [hidden] {display:none !important;}

.v-salon-select{display:block;color:inherit;text-decoration:none}.v-directory-image{width:100%;height:240px;object-fit:cover}.v-search [hidden]{display:none!important}

.v-service-availability[hidden]{display:none!important}.v-service-availability{margin-top:20px;padding-top:16px;border-top:1px solid #ded4e9}.v-service-availability h4{margin:0 0 8px}.v-select-service[aria-expanded="true"]{background:#5d476e;color:white}

.v-category-choices{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 28px}

.v-ai-card [hidden]{display:none!important}

.v-assistant-examples{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.v-assistant-examples button{border:1px solid #dbcfeb;border-radius:18px;padding:8px 12px;background:#f4edf8;color:#4c3b60;cursor:pointer}

.v-chat-log{max-height:48vh;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding:12px;background:#f7f3fa;border-radius:18px;margin:16px 0}.v-chat-user{align-self:flex-end;max-width:90%;padding:12px 16px;background:#654b79;color:white;border-radius:18px 18px 4px 18px;white-space:pre-wrap}.v-chat-reply{padding:14px;background:white;border-radius:18px 18px 18px 4px;min-width:0}.v-chat-services{display:flex;gap:8px;flex-wrap:wrap}.v-chat-log .v-ai-image{max-height:120px;object-fit:cover}

.velora-app [hidden]{display:none!important}.v-appointment-date{max-width:300px;margin:24px 0}

.v-loyalty{padding:32px;margin:32px 0;border:1px solid #ded2eb;border-radius:24px;background:linear-gradient(120deg,#f9f1fa,#f2ecff)}
.v-loyalty progress{display:block;width:min(100%,480px);height:12px;margin:18px 0;accent-color:#78569a}.v-loyalty .v-button:disabled{opacity:.5;cursor:not-allowed}.v-loyalty strong{font-variant-numeric:tabular-nums}

.v-keyword-bar{display:flex;align-items:end;gap:12px;margin:0 0 20px;padding:20px;background:#f3edf7;border-radius:20px}.v-keyword-bar .v-field{margin:0}.v-keyword-bar .v-field>span{font-size:14px;color:#493651}.v-keyword-bar input{background:white}@media(max-width:500px){.v-keyword-bar{flex-wrap:wrap}.v-keyword-bar .v-field{flex-basis:100%}}
.v-dialog .v-stop-voice[hidden]{display:none!important}

.v-request-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 8px}.v-microphone{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;border-radius:50%;border:1px solid #d8c8e4;background:#f1e8f7;color:#694582;cursor:pointer}.v-microphone:hover,.v-microphone[aria-pressed="true"]{background:#694582;color:white}.v-microphone:disabled{opacity:.45;cursor:not-allowed}.v-microphone:focus-visible{outline:3px solid #b893d0;outline-offset:3px}#velora-chat-request{box-sizing:border-box;width:100%}
.v-photo-gallery{margin:16px 0}.v-photo-gallery summary{cursor:pointer;font-weight:600}.v-photo-gallery>div{display:flex;gap:12px;overflow-x:auto;padding:12px 0}.v-photo-gallery img{width:180px;height:130px;object-fit:cover;border-radius:12px}.v-photo-gallery a{flex-shrink:0}
