/*
  SIGNATURE NAILS · Unified luxury UI system
  Approved welcome remains unchanged. All business behavior is in existing JS.
  Layers: tokens -> salon -> dialogs/screens -> shared components -> mobile/a11y.
*/
body:not(.welcome-mode), .overlay.open {
  --sn-lux-wine:#710e32;
  --sn-lux-deep:#500722;
  --sn-lux-burgundy:#870d3a;
  --sn-lux-rose:#ae4d70;
  --sn-lux-gold:#bc785c;
  --sn-lux-light-gold:#f3c7a3;
  --sn-lux-edge:#c28a6c;
  --sn-lux-ink:#4b2432;
  --sn-lux-muted:#74525b;
  --sn-lux-ivory:#fffaf6;
  --sn-lux-blush:#f9e4df;
  --sn-lux-line:#e5bda9;
  --sn-lux-glass:linear-gradient(143deg,rgba(255,251,247,.98),rgba(255,237,235,.95) 55%,rgba(240,201,188,.9));
  --sn-lux-raised:0 2px 0 #fff7eb inset, 0 -3px 7px #b76d5960 inset,0 4px 0 #a15e4e,0 9px 18px #64324b35;
  --sn-lux-shadow:0 19px 42px #74394d25,0 4px 15px #a9695530;
  --ink:var(--sn-lux-ink);
  --muted:var(--sn-lux-muted);
  --rose:var(--sn-lux-rose);
  --rose-dark:var(--sn-lux-wine);
  --cream:var(--sn-lux-ivory);
  --surface:var(--sn-lux-ivory);
  --line:var(--sn-lux-line);
  --soft:var(--sn-lux-blush);
  --premium-plum:var(--sn-lux-deep);
  --premium-brass:var(--sn-lux-gold);
  --sn-wine:var(--sn-lux-wine);
  --sn-ink:var(--sn-lux-ink);
  --sn-rose:var(--sn-lux-rose);
  --sn-gold:var(--sn-lux-gold);
  --sn-blush:var(--sn-lux-blush);
  --sn-cream:var(--sn-lux-ivory);
  --sn-line:var(--sn-lux-line);
  color:var(--sn-lux-ink);
}
/* Marble and ambient rose-gold detailing appear in non-welcome screens. */
body:not(.welcome-mode),body:not(.welcome-mode) .layout,body:not(.welcome-mode) .phone{
  background-color:#f8e9e2!important;
}
body:not(.welcome-mode) #site-shell{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 4% 6%,#f9d2d6a6,transparent 37%),
    radial-gradient(ellipse at 98% 55%,#f0cbc2b5,transparent 44%),
    repeating-linear-gradient(118deg,transparent 0 168px,#d4a98f24 170px,transparent 172px 290px),
    linear-gradient(145deg,#fffaf5 5%,#f8e8e1 47%,#fff7f1 100%)!important;
}
body:not(.welcome-mode) #site-shell::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(35deg,transparent 48%,#d5a17f17 49%,transparent 50%),
             linear-gradient(147deg,transparent 37%,#fffefd6e 39%,transparent 42%);
  opacity:.65;
}
/* Rose-gold glass navigation and the approved crystal lotus identity. */
body:not(.welcome-mode) #site-shell .site-header{
  border-bottom:2px solid #ce9476!important;
  background:linear-gradient(140deg,#fffbf6ed,#f9e6e3ed)!important;
  box-shadow:0 3px 0 #fff7ec inset,0 9px 25px #7734462b!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
body:not(.welcome-mode) #site-shell .site-header .brand{
  font:italic 500 clamp(21px,2.4vw,28px)/1.1 Georgia,"Times New Roman",serif!important;
  color:var(--sn-lux-wine)!important;text-shadow:0 1px 0 #fff,1px 1px 2px #b86c5470;
}
body:not(.welcome-mode) #site-shell .brand-poster-crop{
  display:block!important;position:relative;overflow:hidden;flex:none;
  width:45px;height:45px;border:2px solid #c79371;border-radius:50%;
  background:#fff1ed;box-shadow:0 0 0 2px #fff inset,0 4px 9px #6f34432f;
}
body:not(.welcome-mode) #site-shell .brand-logo-image{
  display:block!important;position:absolute;max-width:none!important;
  width:136px!important;height:136px!important;left:50%;top:40%;
  object-fit:cover;transform:translate(-50%,-50%);
  filter:none!important;
}
body:not(.welcome-mode) #site-shell .brand-fallback{color:var(--sn-lux-wine)!important}
body:not(.welcome-mode) #site-shell .site-nav button,
body:not(.welcome-mode) #site-shell .sn-quick-actions button{
  min-height:44px;border-radius:999px!important;
}
/* The glass navigation surface is refined, but action text always stays live. */
body:not(.welcome-mode) #site-shell .hero{
  position:relative;
  background:linear-gradient(145deg,#fffaf37a,#ffedea28)!important;
}
body:not(.welcome-mode) #site-shell .hero h1,
body:not(.welcome-mode) #site-shell .section-heading h2{
  color:var(--sn-lux-wine)!important;text-shadow:0 1px 0 #fffcf8;
}
body:not(.welcome-mode) #site-shell .hero h1 em{color:#ae546a!important}
body:not(.welcome-mode) #site-shell .hero-art{
  border:3px solid #d5a17e!important;border-radius:32px!important;
  background:#f9e9e2!important;
  box-shadow:0 0 0 4px #fffcf7 inset,0 0 0 7px #be84614c inset,var(--sn-lux-shadow)!important;
}
body:not(.welcome-mode) #site-shell .hero-brand-image{
  object-fit:cover!important;object-position:50% 30%!important;
}
body:not(.welcome-mode) #site-shell .hero-art::before,
body:not(.welcome-mode) #site-shell .hero-art::after{display:none}
body:not(.welcome-mode) #site-shell .hero-eyebrow,
body:not(.welcome-mode) #site-shell .section-kicker,
body:not(.welcome-mode) .demo-eyebrow{
  color:#8d3b55;letter-spacing:.18em;font-weight:800;
}
body:not(.welcome-mode) #site-shell .site-footer{
  border-top:2px solid var(--sn-lux-edge)!important;
  background:linear-gradient(130deg,#fff1ea,#f1d2c8 75%,#f8e3d8)!important;
  box-shadow:0 3px 0 #fffdf4 inset!important;
}
body:not(.welcome-mode) #site-shell .site-footer strong{
  color:var(--sn-lux-wine)!important;text-shadow:0 1px 0 #fff;
}
/* App routes use luxurious but restrained glass surfaces.
   Never use strong ornamentation directly under dense operational data. */
.overlay.open{
  background:linear-gradient(140deg,#3f1621c9,#4d1e2bd8)!important;
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
}
.overlay.open .dialog{
  position:relative;isolation:isolate;
  border:2px solid #c98c6c!important;
  border-radius:clamp(16px,2.4vw,29px)!important;
  background:
    radial-gradient(ellipse at 96% -5%,#f3c4d333,transparent 45%),
    linear-gradient(138deg,#fffcf7fa,#fbece7fc 60%,#f5dcd3fa)!important;
  box-shadow:0 0 0 3px #fffcf6 inset,0 0 0 6px #b16b513b inset,0 24px 75px #2f0d2296!important;
  color:var(--sn-lux-ink);
}
.overlay.open .dialog::before{
  width:86px;height:5px;border-radius:999px;
  margin:0 0 15px;
  background:linear-gradient(90deg,#f9e0bb,#ae6573 48%,#f1c494)!important;
  box-shadow:0 2px 5px #a5556345;
}
.overlay.open .dialog h2,
.overlay.open .dialog h3,
.overlay.open .dialog .booking-step-heading{
  color:var(--sn-lux-wine)!important;
  overflow-wrap:anywhere;
  text-shadow:0 1px 0 #fff9f4;
}
.overlay.open .dialog h2{font:400 clamp(27px,4vw,43px)/1.12 Georgia,serif!important}
.overlay.open .dialog h3{font:400 clamp(19px,2vw,27px)/1.2 Georgia,serif!important}
.overlay.open .dialog p,.overlay.open .dialog .ui-muted{color:var(--sn-lux-muted)}
.overlay.open .dialog .close{
  display:inline-grid;place-items:center;min-width:44px!important;min-height:44px!important;
  border:2px solid #c2896d!important;border-radius:50%!important;
  background:linear-gradient(150deg,#fffdfa,#f7ddd7)!important;
  color:var(--sn-lux-wine)!important;
  box-shadow:inset 0 2px 2px #fff,0 4px 10px #77394835!important;
}
/* Shared reusable native glass component styling: button variants. */
body:not(.welcome-mode) #site-shell .site-button,
body:not(.welcome-mode) #site-shell .site-nav button,
body:not(.welcome-mode) #site-shell .sn-quick-actions button,
.overlay.open .dialog .site-button,
.overlay.open .dialog .primary,
.overlay.open .dialog .back,
.overlay.open .dialog .actionable-link,
.overlay.open .dialog .ops-tabs button,
.overlay.open .dialog .demo-role-tabs button,
.overlay.open .dialog .actionable-filterbar button,
.overlay.open .dialog .booking-actions button,
.overlay.open .dialog .ui-actions button,
.overlay.open .dialog .ui-toolbar button,
.overlay.open .dialog .signature-nav-tabs button,
.overlay.open .dialog .signature-nav-back,
.overlay.open .dialog .signature-nav-utils button{
  box-sizing:border-box;min-height:44px!important;
  max-width:100%;white-space:normal;overflow-wrap:anywhere;
  border:1.5px solid #bf886c!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#fffefa 0%,#fce9e5 56%,#f5cfc9 100%)!important;
  color:var(--sn-lux-wine)!important;
  box-shadow:inset 0 2px 4px #fffdf9,inset 0 -2px 4px #c88b7771,0 3px 0 #ae6d58,0 6px 12px #6c344633!important;
  font-weight:700;line-height:1.25;
  text-shadow:0 1px 0 #fff8f6;
  -webkit-tap-highlight-color:transparent;
  transition:box-shadow .16s ease,transform .12s ease,filter .16s ease;
}
body:not(.welcome-mode) #site-shell .site-button.primary-action,
body:not(.welcome-mode) #site-shell .site-nav .nav-accent,
.overlay.open .dialog .primary,
.overlay.open .dialog button.primary,
.overlay.open .dialog .primary-action,
.overlay.open .dialog .ops-tabs button.active,
.overlay.open .dialog .demo-role-tabs button.is-selected,
.overlay.open .dialog .actionable-link.selected,
.overlay.open .dialog .signature-nav-tabs button.active,
.overlay.open .dialog .signature-nav-tabs button[aria-current="page"]{
  border-color:#d49b72!important;
  background:linear-gradient(180deg,#ae365e,#7c0d39 48%,#590720 77%,#891442)!important;
  color:#fff9f6!important;
  box-shadow:inset 0 2px 5px #fff4e654,inset 0 -4px 5px #3f041c66,0 4px 0 #77392c,0 9px 19px #65183c62!important;
  text-shadow:0 1px 2px #490c25!important;
}
body:not(.welcome-mode) #site-shell .site-button:hover:not(:disabled),
body:not(.welcome-mode) #site-shell .site-nav button:hover:not(:disabled),
.overlay.open .dialog button:hover:not(:disabled){
  filter:brightness(1.04);
}
body:not(.welcome-mode) #site-shell button:active:not(:disabled),
.overlay.open .dialog button:active:not(:disabled){
  transform:translateY(2px);box-shadow:inset 0 3px 5px #89435955,0 2px 4px #6d315a30!important;
}
body:not(.welcome-mode) #site-shell button:disabled,
.overlay.open .dialog button:disabled{
  opacity:.58!important;cursor:not-allowed!important;
  filter:grayscale(.2);
}
.overlay.open .dialog .back{background:transparent!important;box-shadow:none!important;text-decoration:none!important}
#site-shell #return-welcome{
  color:var(--sn-lux-wine)!important;
  background:linear-gradient(180deg,#fffcf7,#fbe6df)!important;
  border-color:#b9795c!important;box-shadow:0 2px 0 #fff inset,0 3px 0 #bd7b61!important;
}
/* Shared premium glass panels: public cards, account panels, operational cards. */
body:not(.welcome-mode) #site-shell .service-tile,
.overlay.open .dialog .ui-card,
.overlay.open .dialog .ui-stat,
.overlay.open .dialog .ui-row,
.overlay.open .dialog .ops-section,
.overlay.open .dialog .ops-request,
.overlay.open .dialog .ops-appointment,
.overlay.open .dialog .readiness-item,
.overlay.open .dialog .demo-check-item,
.overlay.open .dialog .signature-shortcut,
.overlay.open .dialog .signature-customer-grid article,
.overlay.open .dialog .actionable-record,
.overlay.open .dialog .actionable-detail,
.overlay.open .dialog .actionable-change,
.overlay.open .dialog .actionable-info,
.overlay.open .dialog .actionable-empty,
.overlay.open .dialog .ui-modal-section,
.overlay.open .dialog .booking-summary,
.overlay.open .dialog .booking-price{
  border:1.5px solid #d6a48d!important;
  border-radius:clamp(14px,2.5vw,22px)!important;
  background:var(--sn-lux-glass)!important;
  color:var(--sn-lux-ink);
  box-shadow:inset 0 2px 0 #fffcf7,0 6px 15px #7d3a5321!important;
}
body:not(.welcome-mode) #site-shell .service-tile,
.overlay.open .dialog .ui-card,
.overlay.open .dialog .ui-stat,
.overlay.open .dialog .ops-request,
.overlay.open .dialog .ops-appointment,
.overlay.open .dialog .actionable-record,
.overlay.open .dialog .readiness-item,
.overlay.open .dialog .demo-check-item{
  padding:clamp(14px,2vw,24px);
}
body:not(.welcome-mode) #site-shell .service-tile:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 2px 0 #fff,0 14px 24px #803d5330!important;
}
body:not(.welcome-mode) #site-shell .service-tile strong,
.overlay.open .dialog .ui-card h3,
.overlay.open .dialog .ui-stat strong,
.overlay.open .dialog .ops-time,
.overlay.open .dialog .signature-shortcut strong{
  color:var(--sn-lux-wine)!important;
}
/* Functional controls, labels, selection and semantic status states. */
.overlay.open .dialog input:not([type="checkbox"]):not([type="radio"]),
.overlay.open .dialog textarea,
.overlay.open .dialog select,
.overlay.open .dialog .calendar-controls input,
.overlay.open .dialog .calendar-controls select{
  box-sizing:border-box;width:100%;min-width:0;
  min-height:44px!important;
  border:1.5px solid #b9816b!important;border-radius:14px!important;
  background:linear-gradient(#fffcf9,#fff4ef)!important;
  color:#482433!important;
  box-shadow:inset 0 2px 5px #be887828,0 2px 0 #fff9ee!important;
}
.overlay.open .dialog input:focus-visible,.overlay.open .dialog select:focus-visible,
.overlay.open .dialog textarea:focus-visible{
  outline:3px solid #862448!important;outline-offset:2px!important;border-color:#8a2148!important;
}
.overlay.open .dialog label.field,.overlay.open .dialog .calendar-controls label{color:#5d303d;font-weight:700}
.overlay.open .dialog input[type="checkbox"],.overlay.open .dialog input[type="radio"]{accent-color:#7a1240}
.overlay.open .dialog .ui-chip{border:1px solid #d2ab97;background:#f8e6e0;color:#662943;border-radius:999px!important}
.overlay.open .dialog .ui-chip.confirmed,.overlay.open .dialog .ui-chip.completed{background:#e3f3e7!important;color:#245d3f!important;border-color:#93c8ae}
.overlay.open .dialog .ui-chip.cancelled,.overlay.open .dialog .ui-chip.declined{background:#f9e2e0!important;color:#892a42!important;border-color:#dfaab0}
.overlay.open .dialog .ui-chip.requested{background:#fff0d7!important;color:#745014!important;border-color:#e6cb91}
.overlay.open .dialog .ui-error{color:#97152f}
.overlay.open .dialog .ui-success{color:#1e6547}
.overlay.open .dialog .note,.overlay.open .dialog .demo-live-status,.overlay.open .dialog .demo-safety,
.overlay.open .dialog .ops-empty{
  background:#fff5ef!important;
  border:1px solid #d6b29d!important;border-radius:15px;color:#694855;
}
.overlay.open .dialog .booking-progress div{border-top:4px solid #e8c9ba;color:#795967}
.overlay.open .dialog .booking-progress .current{border-top-color:#8a1e43;color:#601c3b}
.overlay.open .dialog .booking-progress .complete{border-top-color:#b46e6e}
.overlay.open .dialog .calendar-day,.overlay.open .dialog .calendar-cell{
  border-color:#d6ac99;background:#fffbf8;
  border-radius:13px;
}
.overlay.open .dialog .calendar-cell.today{background:#f6e1e0;border-color:#bb7682}
.overlay.open .dialog .calendar-day-head{background:#f4d9d4}
.overlay.open .dialog .calendar-time{background:#f8ece8}
.overlay.open .dialog .calendar-lane{
  background:repeating-linear-gradient(to bottom,#fffcf9 0,#fffcf9 59px,#e9cdc1 59px,#e9cdc1 60px);
}
.overlay.open .dialog .calendar-block{border-left-color:#ae6080;background:#f5e3eb;color:#51263f}
.overlay.open .dialog .calendar-entry{background:#f6e3e9;color:#5c2b41}
.overlay.open .dialog .calendar-block.confirmed,.overlay.open .dialog .calendar-entry.confirmed{background:#e1f3e8;color:#245a3e}
.overlay.open .dialog .calendar-block.cancelled,.overlay.open .dialog .calendar-entry.cancelled{background:#f7e5e5;color:#793449}
.overlay.open .dialog .actionable-stat,.overlay.open .dialog .actionable-row,
.overlay.open .dialog .ops-appointment-open{
  color:var(--sn-lux-ink);
}
.overlay.open .dialog .actionable-record:focus-visible,
.overlay.open .dialog .signature-shortcut:focus-visible{
  outline:3px solid #85294f;outline-offset:3px;
}
/* The shared role-aware navigation is an independent rose-gold glass component. */
#signature-app-navigation{
  border-bottom:2px solid #c99474!important;
  background:linear-gradient(145deg,#fffcf6f7,#f8e4e0f5)!important;
  box-shadow:0 5px 14px #7834471a,inset 0 1px #fff!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
#signature-app-navigation .signature-nav-identity>strong{
  color:var(--sn-lux-wine)!important;font:400 clamp(17px,2vw,23px)/1.2 Georgia,serif!important;
}
#signature-app-navigation .signature-nav-identity>span{
  color:#8c4960!important;font-size:10px;letter-spacing:.12em;
}
#signature-app-navigation .signature-nav-back,
#signature-app-navigation .signature-nav-tabs button,
#signature-app-navigation .signature-nav-utils button{
  min-height:44px!important;border-radius:999px!important;
}
#signature-app-navigation .signature-nav-tabs button.active,
#signature-app-navigation .signature-nav-tabs button[aria-current="page"]{
  border-color:#d29a78!important;
  background:linear-gradient(180deg,#ae365e,#790e36 55%,#510921)!important;
  color:#fffafa!important;
}
#signature-app-navigation .signature-nav-tabs{scroll-padding-inline:12px;}
#signature-app-navigation .signature-nav-tabs button:focus-visible{
  outline:3px solid #692349!important;outline-offset:2px;
}
/* Keep tables and rich data spacious rather than ornamental. */
.overlay.open .dialog table{width:100%;border-collapse:separate;border-spacing:0 4px}
.overlay.open .dialog th{color:#652c42;font-size:12px}
.overlay.open .dialog th,.overlay.open .dialog td{padding:9px 10px;overflow-wrap:anywhere}
.overlay.open .dialog .ui-list,.overlay.open .dialog .ops-agenda{gap:11px}
.overlay.open .dialog .ui-grid,.overlay.open .dialog .ui-stats{min-width:0}
.overlay.open .dialog .ui-grid>*,
.overlay.open .dialog .ui-stats>*,
.overlay.open .dialog .signature-customer-grid>*{min-width:0}
.overlay.open .dialog :is(p,span,small,dd,dt,label){overflow-wrap:anywhere}
.overlay.open .dialog .calendar-week,.overlay.open .dialog .calendar-month{
  overflow-x:auto;overscroll-behavior-inline:contain;
  scrollbar-width:thin;
}
/* Breakpoints: compact phones, tablets, landscape / reduced motion. */
@media(max-width:900px){
  body:not(.welcome-mode) #site-shell .site-header{padding:14px 18px!important}
  .overlay.open .dialog{padding:22px 19px}
  .overlay.open .dialog .signature-customer-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  body:not(.welcome-mode) #site-shell .site-header{padding:12px max(14px,env(safe-area-inset-right)) 13px max(14px,env(safe-area-inset-left))!important}
  body:not(.welcome-mode) #site-shell .hero-art{height:clamp(250px,80vw,390px)!important;min-height:250px!important}
  body:not(.welcome-mode) #site-shell .service-grid{grid-template-columns:1fr!important}
  .overlay.open{padding:0!important;align-items:stretch!important}
  .overlay.open .dialog{
    width:100%!important;max-height:100dvh!important;min-height:100dvh!important;
    margin:0!important;padding:calc(20px + env(safe-area-inset-top)) max(15px,env(safe-area-inset-right))
       calc(25px + env(safe-area-inset-bottom)) max(15px,env(safe-area-inset-left))!important;
    border-left:0!important;border-right:0!important;border-radius:0!important;
    box-shadow:inset 0 3px 0 #fff7ee!important;
  }
  .overlay.open .dialog .ui-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .overlay.open .dialog .ui-grid{grid-template-columns:1fr}
  .overlay.open .dialog .booking-actions{flex-direction:column}
  .overlay.open .dialog .booking-actions button{width:100%;min-height:46px}
  .overlay.open .dialog .ui-row{align-items:stretch;flex-direction:column}
  .overlay.open .dialog .ui-card,.overlay.open .dialog .ops-request,.overlay.open .dialog .ops-appointment{padding:14px}
  #signature-app-navigation{top:0!important;margin:-8px 0 17px!important;padding:12px 0!important}
  #signature-app-navigation .signature-nav-top{gap:7px;flex-wrap:wrap}
  #signature-app-navigation .signature-nav-identity{min-width:90px}
  #signature-app-navigation .signature-nav-identity>strong{font-size:16px!important}
  #signature-app-navigation .signature-nav-utils{gap:5px}
  #signature-app-navigation .signature-nav-utils button{font-size:12px;padding:9px 11px}
  #signature-app-navigation .signature-nav-tabs{gap:7px;padding:11px 2px 3px}
  #signature-app-navigation .signature-nav-tabs button{font-size:12px;min-height:44px}
}
@media(max-width:360px){
  .overlay.open .dialog h2{font-size:29px!important}
  .overlay.open .dialog .ui-stat{padding:12px}
  .overlay.open .dialog .ui-stat strong{font-size:23px}
  .overlay.open .dialog .calendar-cell{min-width:87px}
  #signature-app-navigation .signature-nav-utils button{padding:8px}
}
@media(prefers-reduced-motion:reduce){
  .overlay.open .dialog button,body:not(.welcome-mode) #site-shell button,
  .overlay.open .dialog .service-tile{transition:none!important;transform:none!important}
}