/* Signature Nails · Welcome-matched background treatment
   Background-only refinement: original approved welcome image and controls remain untouched.
   Reuse crops of the approved brand image via bounded CSS pseudo-elements,
   never as a flattened replacement for working pages or form controls. */

/* Salon exploration background: polished ivory marble, blush reflections,
   fine rose-gold veining, and the same approved orchid / floral-nail motif. */
body:not(.welcome-mode) #site-shell {
  position:relative;
  isolation:isolate;
  background-color:#fff8f2!important;
  background-image:
    radial-gradient(ellipse at 78% 12%,rgba(255,255,250,.85) 0%,transparent 39%),
    radial-gradient(ellipse at 8% 47%,rgba(239,176,183,.20) 0%,transparent 45%),
    radial-gradient(ellipse at 94% 79%,rgba(211,154,130,.18) 0%,transparent 43%),
    linear-gradient(117deg,transparent 0 29%,rgba(186,120,89,.08) 29.1%,rgba(255,253,250,.3) 29.5%,transparent 30.1%),
    linear-gradient(159deg,transparent 0 67%,rgba(195,139,107,.09) 67.2%,transparent 67.8%),
    repeating-linear-gradient(116deg,transparent 0 170px,rgba(192,128,91,.035) 172px,rgba(255,255,250,.18) 175px,transparent 179px,transparent 310px),
    linear-gradient(144deg,#fffbf6 1%,#f8e9e2 48%,#fff7f1 100%)!important;
}
body:not(.welcome-mode) #site-shell::before,
body:not(.welcome-mode) #site-shell::after {
  content:"";display:block;position:absolute;inset:auto;
  pointer-events:none;z-index:0;border:0;transform:none;
  background-color:transparent;
  background-image:url('./sn-brand.avif');
  background-repeat:no-repeat;
  filter:saturate(.94);
}
/* Show ONLY the original upper-left orchid portion, not the centered wordmark. */
body:not(.welcome-mode) #site-shell::before {
  top:clamp(178px,24vw,320px);left:0;
  width:clamp(145px,22vw,228px);
  height:clamp(245px,36vw,398px);
  background-size:auto 200%;
  background-position:left top;
  opacity:.30;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 58%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 71%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,#000 0%,#000 58%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 71%,transparent 100%);
  mask-composite:intersect;
}
/* Show ONLY the manicure portion in the opposite margin. */
body:not(.welcome-mode) #site-shell::after {
  top:clamp(580px,66vw,910px);right:0;
  width:clamp(128px,20vw,205px);
  height:clamp(164px,28vw,247px);
  background-size:auto 345%;
  background-position:right bottom;
  opacity:.24;
  -webkit-mask-image:linear-gradient(to left,#000 0%,#000 65%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to left,#000 0%,#000 65%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
  mask-composite:intersect;
}
/* Actual shell sections stay above decorative layers. Sticky nav remains sticky. */
body:not(.welcome-mode) #site-shell > * {
  z-index:1;
}
/* Matching background continues through dialogs, including booking, login,
   owner dashboard, team screens and customer management. */
.overlay.open {
  background-color:#e6cbbf!important;
  background-image:
    linear-gradient(115deg,rgba(62,21,38,.24),rgba(79,28,49,.36)),
    radial-gradient(ellipse at 10% 5%,rgba(255,246,238,.92),transparent 57%),
    radial-gradient(ellipse at 85% 90%,rgba(234,171,180,.56),transparent 55%),
    linear-gradient(139deg,#fff9f2 0%,#f5dfd5 60%,#ebcabc 100%)!important;
  background-repeat:no-repeat;
}
.overlay.open .dialog {
  isolation:isolate;
  background-color:#fff8f3!important;
  background-image:
    radial-gradient(ellipse at 95% 7%,rgba(247,190,208,.25),transparent 39%),
    radial-gradient(ellipse at 2% 93%,rgba(230,173,156,.17),transparent 46%),
    linear-gradient(122deg,transparent 0 40%,rgba(196,136,105,.055) 40.3%,transparent 40.9%),
    linear-gradient(157deg,transparent 0 72%,rgba(187,111,91,.050) 72.2%,transparent 72.6%),
    linear-gradient(144deg,#fffdf8 0%,#fff0e9 65%,#f9e3d9 100%)!important;
}
/* A faint *cropped* petal accent at the lower-right of dialogs.
   It cannot receive clicks and never replaces text or inputs. */
.overlay.open .dialog::after {
  content:"";display:block;position:absolute;
  right:0;bottom:0;top:auto;left:auto;
  width:clamp(118px,22vw,190px);
  height:clamp(149px,26vw,215px);
  background:url('./sn-brand.avif') right bottom/auto 345% no-repeat;
  -webkit-mask-image:linear-gradient(to left,#000 0%,#000 50%,transparent 100%),linear-gradient(to top,#000 0%,#000 57%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to left,#000 0%,#000 50%,transparent 100%),linear-gradient(to top,#000 0%,#000 57%,transparent 100%);
  mask-composite:intersect;
  opacity:.15;
  z-index:0;
  pointer-events:none;
}
.overlay.open .dialog > * {
  position:relative;
  z-index:1;
}
.overlay.open .dialog > .close {
  position:sticky;
  z-index:20;
}
/* Keep the existing frosted-glass panels readable on the new marble backdrop. */
.overlay.open .dialog .ui-card,
.overlay.open .dialog .ui-stat,
.overlay.open .dialog .sn-collection,
.overlay.open .dialog .ops-section,
.overlay.open .dialog .actionable-record {
  background-color:rgba(255,251,247,.97)!important;
}
@media(max-width:600px) {
  body:not(.welcome-mode) #site-shell::before {
    top:260px;opacity:.17;
  }
  body:not(.welcome-mode) #site-shell::after {
    top:810px;opacity:.15;
  }
  .overlay.open .dialog::after {
    width:128px;height:150px;opacity:.11;
  }
}
@media(prefers-reduced-transparency:reduce) {
  .overlay.open .dialog{background-image:linear-gradient(#fffaf6,#f9e9e2)!important}
  .overlay.open .dialog::after{display:none}
}