/* SIGNATURE NAILS — CANONICAL STYLESHEET
 * Historical styles are inlined in their original cascade order for a safe
 * non-regressing migration. Legacy source stylesheets are no longer requested.
 * The final, scoped application layer below owns new component decisions.
 * The approved Welcome graphics and original appearance are unchanged.
 */

/* ---- Legacy compatibility: ui.css ---- */

/* Signature Nails usability layer. Business logic remains in auth.js. */
:root { --ink:#392631; --muted:#705962; --rose:#964c62; --rose-dark:#703044; --cream:#fffaf8; --line:#ead8d9; --surface:#fff; --soft:#f9eff0; }
html,body {height:auto;min-height:100%;width:100%;overflow:auto;overscroll-behavior:auto;background:#fffaf8;color:var(--ink)}
body {margin:0}
.layout {display:block;width:100%;height:auto;min-height:100dvh;overflow:visible;padding:0;background:var(--cream)}
.layout>.description {display:none}
.phone {display:block;position:relative;width:100%;height:auto;min-height:100dvh;max-width:none;margin:0;border-radius:0;box-shadow:none;overflow:visible;aspect-ratio:auto;background:#fffaf8}
.poster,.hotspot {display:none!important}
#demo-mode-banner {z-index:50!important;position:sticky!important;top:0!important;font-size:12px!important;line-height:1.4}
#demo-mode-banner[hidden] {display:none!important}
.site-header {max-width:1240px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;border-bottom:1px solid var(--line)}
.brand {display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:600 23px Georgia,serif;white-space:nowrap}
.brand-mark {display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#f3d9df;color:#7a3d50;font-size:22px}
.site-nav {display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.site-nav button,.site-button {border:1px solid transparent;background:transparent;color:var(--ink);padding:12px 16px;border-radius:14px;font-size:14px;font-weight:700;text-decoration:none}
.site-nav .nav-accent,.site-button.primary-action {background:var(--rose-dark);color:#fff;border-color:var(--rose-dark)}
.site-nav button:hover,.site-button:hover {background:#f4e4e8}
.site-nav .nav-accent:hover,.site-button.primary-action:hover {background:#512133;color:#fff}
.owner-shortcut {position:static;z-index:1;border-radius:14px;border:1px solid #d6b5bd;box-shadow:none;padding:12px 15px;font-size:13px}
.hero {max-width:1240px;margin:30px auto 0;padding:32px 24px 40px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.hero-eyebrow {text-transform:uppercase;letter-spacing:.22em;font-weight:700;color:var(--rose);font-size:12px}
.hero h1 {font:normal clamp(40px,6vw,78px)/1.05 Georgia,serif;letter-spacing:-.035em;margin:15px 0 20px;color:var(--ink)}
.hero h1 em {color:#934d64;font-style:normal}
.hero p {color:var(--muted);font-size:17px;line-height:1.7;max-width:580px}
.hero-actions {display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}
.site-button {display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:#fff;border-color:#decbd0;cursor:pointer}
.hero-note {font-size:12px!important;line-height:1.55!important}
.hero-art {min-height:420px;border-radius:32px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:radial-gradient(circle at 25% 18%,#fbe6ed 0%,transparent 40%),linear-gradient(140deg,#ecd1db,#f8e7df 60%,#efcbcc);box-shadow:0 28px 55px #763e5420}
.hero-art::before,.hero-art::after {content:"";position:absolute;border:2px solid #ffffffa3;border-radius:48% 52% 54% 46%;width:300px;height:300px;transform:rotate(-28deg);left:-110px;bottom:-125px}
.hero-art::after {left:auto;bottom:auto;right:-120px;top:-110px;width:340px;height:340px}
.hero-art-inner {z-index:1;text-align:center;border:1px solid #ffffffb0;background:#fff9f4b9;backdrop-filter:blur(7px);padding:40px 30px;border-radius:150px 150px 28px 28px;width:72%;box-shadow:0 14px 34px #8f5c5e18}
.hero-art .star {font:normal 52px Georgia,serif;color:#ab7287;display:block}
.hero-art strong {font:normal 39px Georgia,serif;display:block;color:#6e354b;margin:16px 0}
.hero-art small {text-transform:uppercase;letter-spacing:.23em;font-weight:700;font-size:11px;color:#835a69}
.site-section {max-width:1240px;margin:auto;padding:40px 24px}
.section-heading {display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}
.section-heading h2 {font:normal clamp(29px,3.5vw,45px)/1.2 Georgia,serif;margin:0}
.section-heading p {color:var(--muted);margin:8px 0 0}
.service-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.service-tile {border:1px solid var(--line);border-radius:20px;background:#fff;padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:172px}
.service-tile strong {font:normal 24px Georgia,serif;color:#563445}
.service-tile p {font-size:14px;color:var(--muted);line-height:1.5;margin:8px 0}
.service-tile button {background:transparent;border:0;color:#814459;text-decoration:underline;padding:0;align-self:flex-start;font-weight:700;cursor:pointer}
.site-footer {background:#503142;color:#fff6f5;padding:30px 24px;margin-top:20px}
.site-footer-inner {max-width:1192px;margin:auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.site-footer p {color:#f4dcdf;font-size:13px}
.overlay {z-index:100;align-items:center;justify-content:center;overflow:auto;overscroll-behavior:contain}
.dialog {width:min(100%,640px);max-height:calc(100dvh - 30px);padding:30px;background:var(--surface);border-radius:24px}
.overlay.dashboard-view .dialog {width:min(100%,1160px)}
.dialog h2 {font-size:clamp(27px,3vw,39px);color:#513044}
.dialog h3 {color:#503142}
.dialog .primary {max-width:none}
.dialog .back {min-height:40px}
.dialog .field {font-size:14px}
.dialog .note {font-size:13px}
.dialog button {white-space:normal}
.dialog .close {position:sticky;float:right;top:0;z-index:4}
.dialog [hidden] {display:none!important}
.ui-toolbar {display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin:20px 0}
.ui-toolbar .primary {width:auto;margin:0}
.ui-muted {color:var(--muted);font-size:14px;line-height:1.5}
.ui-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:17px 0}
.ui-stats {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}
.ui-stat,.ui-card {border:1px solid var(--line);border-radius:18px;background:#fff;padding:18px}
.ui-stat strong {font-size:30px;color:#682f48;display:block}
.ui-stat span {display:block;font-size:13px;color:var(--muted)}
.ui-card h3 {margin:0 0 9px;font-size:17px}
.ui-card p {color:var(--muted);font-size:14px;line-height:1.5}
.ui-card button {border:0;background:transparent;color:var(--rose-dark);text-decoration:underline;font-weight:700;padding:8px 0;cursor:pointer}
.ui-list {display:grid;gap:8px}
.ui-row {padding:14px;border:1px solid var(--line);border-radius:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.ui-row span,.ui-row small {display:block;color:var(--muted);font-size:13px;margin-top:5px}
.ui-chip {display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:6px 9px;background:#f4e5eb;color:#803f52}
.ui-chip.confirmed,.ui-chip.completed {background:#e3f3ea;color:#286348}
.ui-chip.declined,.ui-chip.cancelled {background:#f8e5e5;color:#952e45}
.ui-chip.requested {background:#fff2db;color:#81571b}
.ui-actions {display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.ui-actions button {width:auto;margin:0}
.booking-progress {display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:22px 0}
.booking-progress div {border-top:4px solid #e9d5dc;padding:10px 0;color:#745b66;font-size:12px}
.booking-progress .current {border-color:#9c5270;color:#612b44;font-weight:700}
.booking-progress .complete {border-color:#b37b92}
.booking-pane {padding:6px 0 10px}
.booking-actions {display:flex;justify-content:space-between;gap:12px;margin-top:24px;flex-wrap:wrap}
.booking-actions button {width:auto;margin:0;min-width:120px}
.booking-price {border:1px solid #ead6dd;background:#fbf2f4;border-radius:13px;padding:14px;margin-top:15px;color:#5f3b4d}
.booking-summary {border:1px solid var(--line);border-radius:16px;padding:16px;margin:15px 0}
.booking-summary div {display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.booking-summary div:last-child {border:0}
.booking-summary span {color:var(--muted)}
.ui-error {color:#9f213e;font-size:14px;margin-top:10px;font-weight:700}
.ui-success {color:#216746;font-size:14px;margin-top:10px;font-weight:700}
.calendar-controls {display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:15px 0}
.calendar-controls label {font-size:13px;color:var(--ink);font-weight:600;flex:1;min-width:140px}
.calendar-controls input,.calendar-controls select {display:block;width:100%;min-height:42px;border:1px solid #d8c4cc;border-radius:10px;padding:9px;background:#fff;margin-top:5px}
.calendar-week,.calendar-month {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;overflow-x:auto}
.calendar-cell {border:1px solid var(--line);border-radius:12px;min-height:126px;padding:10px;min-width:90px;background:#fff}
.calendar-cell.today {background:#fbf1f5;border-color:#c38ca2}
.calendar-cell .day-label {font-size:12px;font-weight:800;color:#6e3950}
.calendar-entry {width:100%;display:block;text-align:left;background:#f6eaf0;border:0;border-radius:8px;padding:7px;margin-top:7px;color:#5c3046;font-size:12px;white-space:normal;cursor:pointer}
.calendar-entry.confirmed {background:#ddf0e6;color:#245c41}
.calendar-entry.cancelled,.calendar-entry.declined {background:#f5e8e8;color:#87515a}
.calendar-day {overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff}
.calendar-day-head,.calendar-day-body {display:grid;grid-template-columns:65px repeat(var(--cols),minmax(145px,1fr));min-width:450px}
.calendar-day-head {position:sticky;top:0;background:#faeef2;z-index:2;border-bottom:1px solid var(--line)}
.calendar-day-head>* {padding:12px 8px;font-size:13px;font-weight:800;text-align:center;border-right:1px solid var(--line)}
.calendar-day-body {height:780px;position:relative}
.calendar-time {position:relative;background:#faf6f8;border-right:1px solid var(--line)}
.calendar-time span {position:absolute;top:var(--top);left:6px;font-size:11px;color:var(--muted)}
.calendar-lane {position:relative;border-right:1px solid var(--line);background:repeating-linear-gradient(to bottom,#fff 0px,#fff 59px,#f0e3e7 59px,#f0e3e7 60px)}
.calendar-block {position:absolute;left:4px;right:4px;top:var(--top);min-height:36px;height:var(--height);background:#f4e1e9;border-left:4px solid #ad7186;border-radius:8px;padding:7px;text-align:left;overflow:auto;font-size:11px;cursor:pointer;color:#512c3f}
.calendar-block.confirmed {background:#e3f4ea;border-color:#49916f}
.calendar-block.cancelled,.calendar-block.declined {background:#f8e9eb;border-color:#bf8a91}
.calendar-block strong {display:block;font-size:12px}
.ui-modal-section {max-width:640px}
.dialog .ui-modal-section h2 {margin-bottom:15px}
@media (max-width:850px) {
 .hero {grid-template-columns:1fr;gap:16px}
 .hero-art {min-height:250px}
 .hero-art-inner {padding:20px;max-width:270px}
 .hero-art strong {font-size:29px}
 .service-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .ui-stats {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px) {
 .site-header {padding:13px 16px;align-items:flex-start;flex-direction:column;gap:8px}
 .brand {font-size:21px}
 .site-nav {gap:4px;width:100%}
 .site-nav button,.owner-shortcut {padding:9px 11px;min-height:43px;font-size:13px}
 .hero {margin:0;padding:28px 18px;gap:20px}
 .hero h1 {font-size:43px}
 .hero p {font-size:15px}
 .hero-art {min-height:220px;border-radius:20px}
 .hero-art-inner {padding:20px 16px}
 .site-section {padding:28px 18px}
 .service-grid {grid-template-columns:1fr}
 .service-tile {min-height:125px}
 .dialog {width:100%;max-height:calc(100dvh - 12px);padding:17px;border-radius:17px}
 .overlay {padding:6px}
 .ui-grid,.ui-stats {grid-template-columns:1fr 1fr}
 .ui-grid .ui-card {padding:13px}
 .ui-row {flex-direction:column;align-items:stretch}
 .booking-progress div {font-size:11px}
 .calendar-week,.calendar-month {gap:4px}
 .calendar-cell {padding:6px;min-width:94px}
 .section-heading {align-items:start;flex-direction:column}
}
@media (prefers-reduced-motion:reduce) { * {scroll-behavior:auto!important;animation:none!important;transition:none!important} }
:focus-visible {outline:3px solid #78334e;outline-offset:3px}

/* Welcome artwork is the primary entrance; the upgraded application is one tap away. */
body.welcome-mode {overflow:hidden;height:100dvh}
body.welcome-mode .layout,body.welcome-mode .phone {height:100dvh;min-height:0;overflow:hidden}
body.welcome-mode .phone>.poster {display:block!important;position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
body.welcome-mode .phone>.hotspot {display:block!important;position:absolute}
body.welcome-mode .phone>#site-shell {display:none!important}
body:not(.welcome-mode) .phone>.poster,
body:not(.welcome-mode) .phone>.hotspot {display:none!important}
body.welcome-mode .phone>.hotspot:focus-visible {outline:3px solid #4f2136;outline-offset:2px}
body.welcome-mode #legacy-owner-shortcut {z-index:6}
#return-welcome {border:1px solid #decbd0;background:#fff;color:#682f48}
@media(min-width:900px) {body.welcome-mode .phone {width:min(100%,510px);height:calc(100dvh - 50px);margin:0 auto;top:25px;box-shadow:0 14px 65px #8c42464a;border-radius:25px}body.welcome-mode .layout {background:radial-gradient(circle at 15% 30%,#f8e5e9,#efcbd1 65%,#f8eee9)}}

/* Operational agenda and request approval controls */
.ops-section{margin:22px 0;padding:17px;border:1px solid var(--line);border-radius:18px;background:#fff}
.ops-section-heading,.ops-request-header,.ops-appointment-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ops-section-heading h3{margin:0 0 12px}.ops-request-list,.ops-agenda{display:grid;gap:12px}
.ops-request,.ops-appointment{border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff}
.ops-request-header p,.ops-appointment p{margin:6px 0;color:var(--muted);font-size:14px}
.ops-request .field{display:block;max-width:420px;margin:12px 0}
.ops-row-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:13px}
.ops-row-actions .site-button{min-height:44px;cursor:pointer}
.ops-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}
.ops-tabs button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:12px 18px;min-height:45px;font-weight:700;cursor:pointer}
.ops-tabs button.active{background:var(--rose-dark);border-color:var(--rose-dark);color:#fff}
.ops-tabs button:disabled{opacity:.5;cursor:not-allowed}
.ops-appointment-top>div{display:flex;flex-direction:column;gap:4px}
.ops-appointment h3{font:normal 22px Georgia,serif;margin:14px 0 6px}
.ops-time{font-size:22px;font-weight:700;color:var(--rose-dark)}
.ops-action-panel{padding:15px;background:var(--soft);border-radius:12px;margin:12px 0}
.ops-action-panel[hidden]{display:none}
.ops-empty{border:1px dashed var(--line);border-radius:16px;text-align:center;padding:30px;color:var(--muted)}
@media(max-width:600px){.ops-section,.ops-request,.ops-appointment{padding:13px}.ops-section-heading{align-items:flex-start}.ops-row-actions .site-button{flex:1 1 140px}.ops-tabs button{flex:1;padding:12px 8px}}

/* Read-only launch readiness view */
.readiness-list{display:grid;gap:12px;margin:20px 0}.readiness-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff}.readiness-item p{margin:6px 0;color:var(--muted);font-size:14px}.readiness-item button{flex-shrink:0}@media(max-width:600px){.readiness-item{align-items:flex-start;flex-direction:column}.readiness-item button{width:100%}}

/* Planning-phase testing interface; intentionally separate from branded welcome artwork. */
.demo-guide{max-width:920px;margin:auto}.demo-guide-heading h2{margin:10px 0}.demo-guide-heading p{line-height:1.65;color:var(--muted)}
.demo-eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-dark);font-weight:800}
.demo-live-status,.demo-safety{padding:14px 17px;border-radius:14px;margin:15px 0;border:1px solid var(--line);background:var(--soft);line-height:1.55;font-size:14px}
.demo-safety{background:#fff9f4}.demo-role-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}
.demo-role-tabs button{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 17px;min-height:44px;color:var(--ink);font-weight:700}
.demo-role-tabs button.is-selected{background:var(--rose-dark);border-color:var(--rose-dark);color:#fff}
.demo-guide-access{color:var(--muted);font-size:14px;line-height:1.5}
.demo-list-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.demo-list-header h3{margin:13px 0}.demo-list-header span{font-weight:700;color:var(--rose-dark)}
.demo-checklist{display:grid;gap:12px;margin:18px 0}
.demo-check-item{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px;border:1px solid var(--line);border-radius:16px;background:#fff}
.demo-check-item label{display:flex;align-items:flex-start;gap:12px;flex:1;cursor:pointer}
.demo-check-item label input{width:22px;height:22px;flex:none;margin:2px 0;accent-color:var(--rose-dark)}
.demo-check-item strong,.demo-check-item small{display:block}
.demo-check-item small{font-size:13px;line-height:1.5;color:var(--muted);margin-top:5px}
.demo-check-item .site-button{flex:none}.demo-guide-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
@media(max-width:600px){.demo-check-item{align-items:stretch;flex-direction:column}.demo-check-item .site-button{width:100%}.demo-role-tabs button{flex:1 1 40%}}


/* ---- Legacy compatibility: premium.css ---- */

/* Signature Nails — premium experience system
   Preserves the original branded welcome poster without restyling its artwork. */
:root{--ink:#382a32;--muted:#766773;--rose:#8b566f;--rose-dark:#63394e;--cream:#fbf7f4;--line:#eaddd9;--surface:#fffefa;--soft:#f5ebe8;--premium-plum:#422b3c;--premium-brass:#a47a58}
body:not(.welcome-mode){background:#fbf7f4;color:var(--ink)}
body:not(.welcome-mode) .layout,body:not(.welcome-mode) .phone{background:#fbf7f4}
body:not(.welcome-mode) .phone{font-family:Inter,"Segoe UI",Arial,sans-serif}
#site-shell{color:var(--ink);background:linear-gradient(180deg,#fcfaf7 0%,#fbf7f4 52%,#f7f0ed 100%)}
.site-header{position:sticky;top:0;z-index:24;max-width:none;padding:15px max(26px,calc((100vw - 1240px)/2));background:rgba(255,253,249,.96);backdrop-filter:blur(16px);box-shadow:0 1px 0 #e5d7d1}
.brand{font-size:25px;letter-spacing:-.045em;font-weight:500;color:var(--premium-plum)}
.brand-mark{background:transparent;border:1px solid #c69da9;width:37px;height:37px;color:var(--rose-dark)}
.site-nav{gap:4px}
.site-nav button{font-size:12px;letter-spacing:.025em;font-weight:650;border-radius:999px;padding:11px 14px}
.site-nav .nav-accent{padding:13px 21px;background:var(--premium-plum);border:1px solid var(--premium-plum);box-shadow:0 8px 20px rgba(80,40,56,.10)}
.site-nav button:hover{color:#573347}
.site-nav .nav-accent:hover{background:#6c4058;color:white}
.hero{max-width:1220px;margin:0 auto;padding:70px 24px 68px;grid-template-columns:1.06fr .94fr;gap:54px}
.hero-eyebrow,.section-kicker,.service-tile-index{color:#916f60;text-transform:uppercase;font-size:10px;letter-spacing:.25em;font-weight:800}
.hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(56px,6.6vw,88px);line-height:1.05;letter-spacing:-.046em;margin:22px 0;color:var(--premium-plum);font-weight:400}
.hero h1 em{font-style:italic;color:var(--rose);letter-spacing:-.06em}
.hero p{color:#73656c;font-size:16px;line-height:1.82;max-width:510px}
.hero-actions{margin:31px 0 25px;gap:12px}
.site-button{border-radius:999px;padding:13px 21px;min-height:48px;background:transparent;border-color:#d9cac6;font-size:13px;font-weight:700;letter-spacing:.012em;transition:transform .16s ease,background .18s ease,box-shadow .18s ease}
.site-button:hover{transform:translateY(-2px);background:#f4e6e5;box-shadow:0 8px 18px rgba(73,38,47,.07)}
.site-button.primary-action{background:var(--premium-plum);color:#fff;border-color:var(--premium-plum)}
.site-button.primary-action:hover{background:#6e435d;color:#fff}
.hero-availability{display:inline-flex;gap:10px;align-items:center;font-size:12px;color:#796b6e;line-height:1.5;max-width:520px}
.hero-availability-dot{width:7px;height:7px;background:#b99078;border-radius:50%;box-shadow:0 0 0 4px #b9907826;flex:none}
.hero-art{min-height:520px;border-radius:5px 125px 5px 5px;background:radial-gradient(circle at 24% 16%,#fff8f3 0%,transparent 42%),linear-gradient(135deg,#d9bdbe,#efd8d0 54%,#b68a9c);box-shadow:30px 32px 0 -14px #eadbd6,0 28px 55px #763e5417}
.hero-art::before{width:340px;height:340px;bottom:-130px;left:-80px}
.hero-art::after{width:300px;height:300px;right:-135px}
.hero-art-inner{background:rgba(255,251,245,.58);border:1px solid #fffaf0aa;border-radius:180px 180px 13px 13px;padding:60px 24px 42px;max-width:340px;box-shadow:0 20px 50px rgba(99,58,66,.07)}
.hero-art .star{color:#86596c;font-size:48px}
.hero-art strong{font-size:clamp(35px,3.5vw,50px);line-height:1.12;margin:24px 0 18px}
.hero-art small{font-size:9px;letter-spacing:.23em;line-height:1.8}
.hero-ornament{display:block;color:#99647c;letter-spacing:.5em;margin:4px 0 22px}
.hero-art-caption{position:absolute;z-index:1;bottom:22px;right:24px;color:#644354;font-size:9px;letter-spacing:.18em;font-weight:800}
.site-section{max-width:1220px;padding:53px 24px 66px}
.section-heading{margin-bottom:30px;align-items:center}
.section-heading h2{font-family:Georgia,serif;font-weight:400;line-height:1.15;letter-spacing:-.035em;color:var(--premium-plum);font-size:clamp(36px,4vw,55px);margin:12px 0 10px}
.section-heading p{font-size:14px;color:#776873;line-height:1.7;max-width:550px}
.service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.service-tile{min-height:245px;border:1px solid #e7dad5;background:linear-gradient(155deg,#fffefa,#fffaf7);border-radius:5px;padding:28px 25px 24px;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;gap:28px}
.service-tile:hover{border-color:#c9aba6;box-shadow:0 20px 45px #50354312;transform:translateY(-3px)}
.service-tile-index{display:block;font-size:9px;letter-spacing:.21em;margin-bottom:25px}
.service-tile strong{font:normal 26px/1.18 Georgia,serif;letter-spacing:-.02em;color:#4f3645}
.service-tile p{font-size:13px;line-height:1.6;color:#84737a;margin:10px 0 0}
.service-tile-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #eaded9;padding-top:16px}
.service-price{font-size:11px;color:#736069;line-height:1.4;font-weight:650}
.service-tile button{border:0;text-decoration:none;color:#744356;white-space:nowrap;font-size:12px}
.service-tile button:hover{text-decoration:underline}
.site-footer{background:var(--premium-plum);border-top:1px solid #704f61;padding:42px 24px}
.site-footer-inner>strong{font:normal 23px Georgia,serif}
.site-footer p{font-size:12px}
.site-footer .site-button{background:transparent;color:white;border-color:#ffffff75}
.site-footer .site-button:hover{background:#ffffff18}
body:not(.welcome-mode) .overlay{padding:16px;align-items:center}
body:not(.welcome-mode) .dialog{border:1px solid #e6d8d1;background:#fffefa;border-radius:16px;padding:35px;box-shadow:0 26px 100px #2f1f2b25}
.dialog h2{font-family:Georgia,serif;font-size:clamp(31px,4.2vw,45px);font-weight:400;letter-spacing:-.035em}
.dialog h3{font-family:Georgia,serif;font-weight:400}
.dialog .field{line-height:1.6}
.dialog input,.dialog select,.dialog textarea{border:1px solid #d8c8c5;border-radius:10px;background:#fffdfb;min-height:46px;color:var(--ink);padding:11px}
.dialog input:focus,.dialog select:focus,.dialog textarea:focus{outline:2px solid #9d6c83;outline-offset:1px}
.dialog button.primary{background:var(--premium-plum);border-radius:11px;min-height:48px;color:#fff}
.dialog button.primary:hover{background:#71445c}
.booking-progress{margin:27px 0 24px;gap:8px}
.booking-progress div{border-top:2px solid #e6d4d1;color:#8d7780;padding:12px 0;font-size:11px;font-weight:700}
.booking-progress .current{border-color:var(--rose-dark);color:#5f394c}
.booking-step-heading{font:normal 28px/1.2 Georgia,serif!important;color:#513646;margin:12px 0!important}
.booking-price,.booking-summary{background:#faf1ed;border-color:#eadbd4}
.ui-card,.ui-stat,.ops-request,.ops-appointment{border-color:#e9dad4;background:#fffefa}
.ui-card{border-radius:12px;padding:23px}
.ui-stat{border-radius:12px}
.ui-card h3,.ops-section h3{font-size:22px}
.ui-toolbar h2{margin:4px 0}
.ops-tabs button,.demo-role-tabs button{border-radius:999px}
.ops-tabs button.active,.demo-role-tabs button.is-selected{background:var(--premium-plum);border-color:var(--premium-plum)}
body.welcome-mode #welcome-explore{font-family:Arial,sans-serif;transition:background .2s ease}
@media(max-width:1000px){.site-header{padding:16px 22px}.hero{gap:25px;padding-top:48px}.hero-art{min-height:420px}.hero h1{font-size:clamp(48px,7vw,70px)}}
@media(max-width:850px){.hero{grid-template-columns:1fr;gap:36px}.hero-art{min-height:330px;max-width:100%}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-header{position:relative}}
@media(max-width:600px){.site-header{padding:14px 17px;gap:12px}.site-nav{gap:5px}.site-nav button{padding:10px 13px;font-size:12px}.hero{padding:40px 19px 30px;gap:33px}.hero h1{font-size:clamp(47px,12.5vw,66px);margin:18px 0}.hero p{font-size:14px;line-height:1.8}.hero-art{min-height:320px;border-radius:4px 70px 4px 4px;box-shadow:14px 17px 0 -7px #eadbd6}.hero-art-inner{max-width:260px;padding:30px 16px}.hero-art strong{font-size:34px}.hero-art-caption{font-size:8px}.site-section{padding:43px 19px}.service-grid{grid-template-columns:1fr}.service-tile{min-height:210px}.section-heading h2{font-size:39px}.service-tile-bottom{align-items:center}.site-footer-inner{align-items:flex-start}.site-footer .site-button{width:100%}body:not(.welcome-mode) .overlay{padding:0;align-items:stretch}body:not(.welcome-mode) .dialog{border-radius:0;width:100%;max-height:100dvh;min-height:100dvh;padding:clamp(17px,5vw,28px);padding-bottom:calc(22px + env(safe-area-inset-bottom));overflow-y:auto}.dialog .close{top:env(safe-area-inset-top)}.booking-progress div{font-size:10px}.ui-grid{grid-template-columns:1fr}.booking-actions button{flex:1;min-height:48px}}
@media(prefers-reduced-motion:reduce){.service-tile,.site-button{transition:none!important}.service-tile:hover,.site-button:hover{transform:none!important}}


/* ---- Legacy compatibility: navigation.css ---- */

/* Signature Nails — persistent navigation, visually aligned with the premium app. */
#signature-app-navigation[hidden]{display:none!important}
#signature-app-navigation{
  position:sticky;top:-35px;z-index:15;background:rgba(255,254,250,.98);
  backdrop-filter:blur(14px);border-bottom:1px solid #e9dbd5;
  margin:-14px -7px 25px;padding:14px 7px 15px;
}
.signature-nav-top{display:flex;align-items:center;gap:12px;justify-content:space-between}
.signature-nav-back,.signature-nav-utils button{
  min-height:42px;padding:9px 14px;border-radius:999px;
  border:1px solid #e2d1ce;background:#fffdf9;color:#664456;
  font:600 12px/1.3 Inter,"Segoe UI",Arial,sans-serif;cursor:pointer;
}
.signature-nav-back:hover,.signature-nav-utils button:hover{background:#f5eae6}
.signature-nav-identity{display:grid;gap:3px;flex:1;min-width:0}
.signature-nav-identity>span{font:700 9px/1.4 Inter,Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#a47a58}
.signature-nav-identity>strong{font:normal 19px/1.2 Georgia,serif;color:#492f42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.signature-nav-utils{display:flex;gap:6px;align-items:center}
.signature-nav-tabs{display:flex;gap:6px;overflow-x:auto;padding:13px 0 2px;scrollbar-width:thin;scroll-snap-type:x proximity}
.signature-nav-tabs button{
  border:1px solid #dfd1cc;background:#fffefa;color:#664a5a;
  border-radius:999px;flex:none;padding:11px 17px;
  min-height:43px;font:700 12px/1 Inter,"Segoe UI",Arial,sans-serif;cursor:pointer;
  scroll-snap-align:start;
}
.signature-nav-tabs button.active,.signature-nav-tabs button[aria-current=page]{
  color:#fff;background:#422b3c;border-color:#422b3c;
}
.signature-nav-tabs button:hover:not(.active){background:#f7edea}
#overlay.app-screen{align-items:stretch;padding:0}
#overlay.app-screen .dialog{
  width:min(100%,1160px);height:auto;min-height:100dvh;max-height:100dvh;
  overflow-y:auto;overflow-x:hidden;margin:auto;border-radius:0;
  padding:32px max(24px,calc((min(100vw, 1160px) - 1050px)/2));
}
#overlay.app-screen .dialog .close{position:absolute;right:19px;top:14px;z-index:16}
#overlay.app-screen .dialog #content{min-width:0;max-width:100%;padding-top:5px}
#overlay.app-screen .dialog .booking-pane,#overlay.app-screen .dialog .ui-modal-section{max-width:760px;margin:0 auto}
#overlay.app-screen .dialog .booking-progress{max-width:840px;margin-left:auto;margin-right:auto}
#overlay.app-screen .dialog:has(.signature-customer-home) .close{display:none}
.signature-customer-home{max-width:990px;margin:16px auto}
.signature-customer-home>h2{font-size:clamp(37px,5vw,63px);max-width:850px}
.signature-customer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:28px 0 20px}
.signature-customer-grid article{
  border:1px solid #eadbd5;background:#fffdfa;padding:26px 22px;min-height:245px;
  display:flex;align-items:flex-start;flex-direction:column;border-radius:9px;
}
.signature-customer-grid h3{font-size:24px;margin:10px 0 5px}
.signature-customer-grid p{font-size:13px;color:#75646e;line-height:1.65;flex:1}
.signature-customer-grid .site-button{margin-top:12px}
.signature-tile-icon{font:normal 28px Georgia,serif;color:#966a7d}
@media(min-width:1100px){
 #overlay.app-screen .dialog{padding:34px 45px}
}
@media(max-width:800px){
 .signature-nav-identity>strong{font-size:17px}
 #overlay.app-screen .dialog{padding:18px}
 .signature-customer-grid{grid-template-columns:1fr}
 .signature-customer-grid article{min-height:170px}
}
@media(max-width:600px){
 #overlay.app-screen{padding:0}
 #overlay.app-screen .dialog{
  border:none;border-radius:0;max-height:100dvh;min-height:100dvh;
  padding:14px 17px calc(25px + env(safe-area-inset-bottom));
 }
 #signature-app-navigation{top:-14px;padding:13px 0 9px;margin:-8px -2px 21px}
 .signature-nav-top{gap:8px}
 .signature-nav-back{padding:10px;min-width:63px}
 .signature-nav-identity>strong{font-size:15px}
 .signature-nav-utils{gap:3px}
 .signature-nav-utils button{padding:9px 10px;font-size:11px}
 .signature-nav-tabs{padding-top:10px;gap:5px}
 .signature-nav-tabs button{min-height:44px;font-size:12px}
 #overlay.app-screen .dialog .close{right:5px;top:6px}
 .signature-customer-grid article{min-height:156px}
}
@media(prefers-reduced-motion:reduce){.signature-nav-tabs{scroll-behavior:auto!important}}

#signature-app-navigation [hidden]{display:none!important}
#overlay.app-screen.signature-root .dialog .close{display:none!important}


/* ---- Legacy compatibility: actionable.css ---- */

/* One-tap drill-downs: visible, accessible, full-surface controls. */
.actionable-stat{display:flex!important;flex-direction:column;align-items:flex-start;text-align:left;gap:5px;cursor:pointer;min-height:110px}
.actionable-stat small{font-size:11px;color:#8e5665;font-weight:650}
.actionable-stat:focus-visible,.actionable-row:focus-visible,.actionable-record:focus-visible,.signature-shortcut:focus-visible,.ops-appointment-open:focus-visible,.actionable-link:focus-visible{outline:3px solid #9b5265;outline-offset:3px}
.actionable-stat:hover,.actionable-row:hover,.actionable-record:hover,.signature-shortcut:hover,.ops-appointment-open:hover{background:linear-gradient(125deg,#fff9f4,#f8dedc)!important;border-color:#b67b7d!important;transform:translateY(-2px)}
.actionable-row{width:100%;cursor:pointer;text-align:left;border:1px solid transparent;border-radius:12px;background:transparent;padding:12px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.actionable-view{max-width:1010px;margin:0 auto;padding-bottom:25px}
.actionable-heading h2{margin:12px 0}.actionable-heading p{line-height:1.6}
.actionable-filterbar{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 16px}
.actionable-filterbar .actionable-link{border-radius:999px}
.actionable-filterbar .actionable-link.selected{background:#8b4d5a!important;color:white!important;border-color:#8b4d5a}
.actionable-record-list{display:grid;gap:11px;margin:14px 0 25px}
.actionable-record,.signature-shortcut{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;gap:18px;padding:17px 18px;background:linear-gradient(135deg,#fffefa,#fcece8);border:1px solid #e0b7b0;border-radius:16px;color:#663e49;cursor:pointer;min-height:72px;transition:background .18s,border-color .18s,transform .18s}
.actionable-record-body{display:grid;gap:6px;min-width:0}
.actionable-record-body strong{font-size:15px;overflow-wrap:anywhere;color:#76414b}
.actionable-record-body small{font-size:12px;line-height:1.5;color:#826b6d}
.actionable-record-end{display:flex;align-items:center;gap:10px;flex:none}
.actionable-arrow{font-size:20px;color:#aa7880}
.actionable-detail,.actionable-change{border:1px solid #e3bdb5;background:linear-gradient(150deg,#fffdfa,#fdf0ec);border-radius:18px;padding:24px}
.actionable-detail-title{display:flex;gap:14px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.actionable-detail h3,.actionable-change h3{font-family:Georgia,serif;color:#754455;font-size:25px}
.actionable-data{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 21px;margin:25px 0}
.actionable-data div{border-bottom:1px solid #ead2ca;padding:0 0 12px;overflow-wrap:anywhere}
.actionable-data dt{font-size:11px;color:#8c7675;text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.actionable-data dd{font-size:14px;margin:6px 0 0;color:#4e3038}
.actionable-link{border:1px solid #d8afa9;border-radius:12px;background:#fce4df;color:#693e4c;cursor:pointer;padding:12px 17px;min-height:44px;font-weight:700;font-size:13px}
.actionable-link:hover{background:#f5cfce}
.actionable-actions{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0}
.actionable-approval{border-top:1px solid #e5bdb8;padding-top:22px;margin-top:24px}
.actionable-change{display:grid;gap:3px}
.actionable-change p{margin:6px 0}
.actionable-info,.actionable-empty{border:1px dashed #e0b7b0;background:#fff8f4;padding:20px;border-radius:12px}
.actionable-info{display:grid;gap:6px}.actionable-info small{color:#86656d}
.actionable-shortcut{display:inline-flex!important;min-height:44px!important;width:auto!important;margin:7px 8px 0 0!important;padding:10px 16px!important;border-radius:999px!important}
.ops-appointment-open{display:block;width:100%;text-align:left;cursor:pointer;border:1px solid transparent;background:transparent;padding:5px;border-radius:12px;color:inherit}
.ops-appointment-open h3{font-size:21px}
.signature-customer-grid .signature-shortcut{display:flex;flex-direction:column;align-items:flex-start;min-height:225px;padding:25px}
.signature-shortcut strong{font:normal 25px/1.2 Georgia,serif;color:#82474d}
.signature-shortcut>span:not(.signature-tile-icon){font-size:13px;color:#75626e;line-height:1.6;flex:1}
.signature-shortcut em{font-style:normal;font-size:13px;font-weight:700;color:#a05c65}
@media(max-width:650px){.actionable-detail{padding:16px}.actionable-data{grid-template-columns:1fr}.actionable-record-end{gap:4px}.actionable-record{padding:15px}.signature-customer-grid .signature-shortcut{min-height:170px}}
@media(prefers-reduced-motion:reduce){.actionable-stat,.actionable-row,.actionable-record,.signature-shortcut,.ops-appointment-open{transition:none!important;transform:none!important}}

.ops-customer-link{border:0;background:transparent;color:#784656;text-align:left;padding:5px 2px;text-decoration:underline;text-decoration-color:#cc9a9b;text-underline-offset:3px;cursor:pointer;font-weight:700;font-size:15px}
.ops-customer-link:hover{color:#542936;text-decoration-color:currentColor}.ops-customer-link:focus-visible{outline:3px solid #9b5265;outline-offset:3px}.actionable-secondary{margin-top:12px}


/* ---- Legacy compatibility: signature-redesign.css ---- */
/* Signature Nails 2026: consolidated premium UI; preserves auth, booking and owner logic. */
:root{color-scheme:light;--sn-wine:#5e2529;--sn-ink:#4e2929;--sn-rose:#b97162;--sn-gold:#be856b;--sn-blush:#f8e9e4;--sn-cream:#fffaf6;--sn-line:#e5c2b4;--sn-shadow:0 15px 45px rgba(93,48,46,.16);font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{min-width:280px;overflow-x:hidden;background:var(--sn-cream)}
body{margin:0;min-width:280px;background:linear-gradient(145deg,#fff9f6,#f8e8e2);color:var(--sn-ink)}
button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #743149!important;outline-offset:3px}
.sn-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.phone{position:relative;margin:auto;isolation:isolate}
body:not(.welcome-mode) .portrait-poster{display:none!important}
body:not(.welcome-mode) .layout{display:block!important;width:100%!important;min-height:100dvh!important;height:auto!important;padding:0!important;overflow:visible!important;background:transparent!important}
body:not(.welcome-mode) .phone{display:block!important;width:100%!important;max-width:none!important;min-height:100dvh!important;height:auto!important;aspect-ratio:auto!important;margin:0!important;overflow:visible!important;border-radius:0!important;box-shadow:none!important;background:var(--sn-cream)!important}
/* Full salon replaces the former multi-layer legacy homepage. */
#site-shell{display:none;margin:0 auto!important;width:100%!important;max-width:none!important;background:linear-gradient(140deg,#fffaf6,#f8e9e4);color:var(--sn-ink);min-height:100dvh}
body:not(.welcome-mode) #site-shell{display:block!important}
#site-shell .site-header{position:sticky;top:0;z-index:9;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;min-height:78px;padding:12px clamp(15px,4vw,60px);background:rgba(255,249,246,.97);border-bottom:1px solid var(--sn-line);backdrop-filter:blur(12px)}
#site-shell .site-header .brand{display:flex;align-items:center;gap:9px;text-decoration:none;min-width:0;color:var(--sn-wine)}
#site-shell .brand-poster-crop{display:none!important}
#site-shell .brand-fallback{display:block!important;font:italic 500 clamp(20px,2.4vw,29px)/1.1 Georgia,serif!important;color:var(--sn-wine);white-space:nowrap}
#site-shell .site-nav{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
#site-shell .site-nav button,.site-button,#site-shell .sn-quick-actions button{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 17px;border:1px solid #d6aa9a;border-radius:999px;background:#fff7f2;color:var(--sn-wine);font-weight:650;text-decoration:none;white-space:normal;line-height:1.25;box-shadow:0 3px 10px rgba(117,57,49,.07)}
#site-shell .site-nav button:hover,.site-button:hover{border-color:#b16c56;background:#fae9e2}
#site-shell .site-nav .nav-accent,#site-shell .primary-action,.primary,.item button{background:linear-gradient(120deg,#8c4551,#6a3037)!important;border:1px solid #753a43!important;color:#fffaf7!important}
#site-shell #return-welcome{background:transparent;box-shadow:none;border-color:transparent}
#site-shell .hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.9fr);align-items:stretch;gap:clamp(18px,5vw,72px);max-width:1300px;margin:0 auto;padding:clamp(34px,5vw,75px) clamp(20px,6vw,80px)!important;min-height:540px;background:transparent}
#site-shell .hero-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;position:relative;z-index:1;min-width:0}
#site-shell .hero-eyebrow,.section-kicker{display:block;letter-spacing:.2em;font-size:11px;font-weight:750;text-transform:uppercase;color:#9e6654}
#site-shell .hero h1{font:400 clamp(44px,5.5vw,83px)/1.06 Georgia,"Times New Roman",serif;color:var(--sn-wine);margin:18px 0 22px;max-width:680px}
#site-shell .hero h1 em{font-weight:400;color:#b47565}
#site-shell .hero p{max-width:550px;font-size:clamp(15px,1.5vw,18px);line-height:1.7;color:#775853}
#site-shell .hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin:22px 0}
#site-shell .hero-availability{font-size:13px;line-height:1.5;border-left:3px solid #c68e78;padding-left:12px}
#site-shell .hero-art{height:100%;min-height:490px;border-radius:25px;box-shadow:var(--sn-shadow);overflow:hidden;background:#f3dcd3}
#site-shell .hero-brand-crop{width:100%;height:100%;display:block;overflow:hidden}
#site-shell .hero-brand-image{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 20%!important;filter:none!important;transform:none!important}
#site-shell .site-section{max-width:1300px;margin:0 auto;padding:clamp(35px,5vw,72px) clamp(20px,6vw,80px);background:transparent}
#site-shell .section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:28px}
#site-shell .section-heading h2{font:400 clamp(30px,3.6vw,52px)/1.1 Georgia,serif;color:var(--sn-wine);margin:13px 0}
#site-shell .section-heading p{max-width:560px;color:#775853;line-height:1.65}
#site-shell .service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#site-shell .service-tile{border:1px solid var(--sn-line);border-radius:20px;background:linear-gradient(145deg,#fffcf9,#f9e9e3);padding:24px;min-width:0;box-shadow:0 6px 16px rgba(116,67,62,.06)}
#site-shell .service-tile h3{font:400 24px Georgia,serif;color:var(--sn-wine);margin:12px 0}
#site-shell .service-tile p{line-height:1.6;color:#785f5a}
#site-shell .service-tile button{margin-top:12px}
#site-shell .sn-quick-actions{display:flex;flex-wrap:wrap;gap:10px}
#site-shell .site-footer{margin-top:24px;background:linear-gradient(135deg,#f7e1d8,#eed0c4);border-top:1px solid var(--sn-line)}
#site-shell .site-footer-inner{max-width:1300px;margin:0 auto;padding:32px clamp(20px,6vw,80px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px}
#site-shell .site-footer strong{font:italic 32px Georgia,serif;color:var(--sn-wine)}
#site-shell .site-footer p{color:#745451}
/* All secondary routes use one refined surface without old fragmented poster pages. */
.overlay{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:clamp(10px,3vw,24px);background:rgba(47,24,29,.69);backdrop-filter:blur(10px)}
.overlay.open{display:flex}
.overlay .dialog{position:relative;width:min(100%,740px);max-width:100%;max-height:calc(100dvh - 30px);overflow-y:auto;overscroll-behavior:contain;padding:clamp(22px,4vw,42px);border:1px solid #dcb3a4;border-radius:24px;background:linear-gradient(145deg,rgba(255,253,250,.99),rgba(251,237,230,.99));color:var(--sn-ink);box-shadow:0 28px 80px rgba(29,11,17,.4)}
.overlay .dialog::before{content:"";display:block;width:65px;height:2px;margin:0 0 17px;background:linear-gradient(90deg,#a56451,#e9beaa)}
.overlay .dialog .close{position:sticky!important;float:right;top:0;right:0;z-index:20;width:44px;height:44px;margin:-10px -10px 0 12px;border:1px solid #e2c0b2;border-radius:50%;background:#fff9f4;color:var(--sn-wine);font-size:30px;line-height:1}
.overlay .dialog h2{font:400 clamp(28px,4vw,42px)/1.2 Georgia,serif;color:var(--sn-wine);margin:15px 0}
.overlay .dialog h3{font:500 21px Georgia,serif;color:var(--sn-wine)}
.overlay .dialog p{line-height:1.6;color:#735651}
.overlay .dialog .eyebrow,.overlay .dialog .section-kicker{letter-spacing:.17em;text-transform:uppercase;color:#a06a59;font-size:11px;font-weight:750}
.overlay .dialog label.field{display:block;font-weight:650;color:#603e3d;margin-top:15px}
.overlay .dialog input:not([type=checkbox]),.overlay .dialog textarea,.overlay .dialog select{display:block;width:100%;min-height:44px;padding:12px 14px;margin-top:7px;border:1px solid #d9b3a6;border-radius:12px;background:#fffefa;color:#4a2a29}
.overlay .dialog .site-button,.overlay .dialog .primary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 19px;border-radius:999px;font-weight:700;cursor:pointer;max-width:100%}
.overlay .dialog .primary{display:flex;width:100%}
.overlay .dialog .item{padding:17px 0;border-bottom:1px solid #ebd2c8;display:flex;justify-content:space-between;align-items:center;gap:12px}
.overlay .dialog .note{border:1px solid #edcfbf;border-radius:12px;padding:13px;background:#fff4ee;color:#785951}
.overlay .dialog .back{min-height:44px;border:0;background:transparent;color:#713e42;text-decoration:underline;cursor:pointer}
.overlay .dialog .ui-card,.overlay .dialog .actionable-record{background:#fffaf7;border-color:#e2c0b0;border-radius:15px}
.overlay .dialog .ui-chip{border-radius:999px}
/* Keep existing role-aware navigation and multi-step booking visible and usable. */
#signature-app-navigation{color:var(--sn-wine)}
#signature-app-navigation button{min-height:42px}
@media(max-width:900px){#site-shell .hero{grid-template-columns:1fr!important;min-height:0}#site-shell .hero-art{height:420px;min-height:0;max-width:600px;width:100%}#site-shell .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#site-shell .site-header{position:relative;gap:9px;justify-content:center}#site-shell .site-nav{justify-content:center}#site-shell .site-nav button{font-size:12px;padding:9px 12px}#site-shell .hero{padding:30px 19px!important;gap:22px}#site-shell .hero h1{font-size:clamp(39px,11vw,55px)}#site-shell .hero-art{height:390px}#site-shell .site-section{padding:30px 19px}#site-shell .service-grid{grid-template-columns:1fr}#site-shell .section-heading{align-items:flex-start} .overlay{padding:8px!important;align-items:center}.overlay .dialog{max-height:calc(100dvh - 16px);padding:22px 18px;border-radius:18px}.overlay .dialog .item{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* 3D welcome controls are now in welcome-3d.css. */


/* ---- Legacy compatibility: welcome-reference.css ---- */
/* Signature Nails luxury welcome — photo-fidelity with functional native elements.
   Scoped strictly to the welcome state; existing booking, auth and shell unaffected. */
body.welcome-mode{margin:0!important;width:100%;min-height:100vh;min-height:100dvh;overflow-x:hidden!important;overflow-y:auto!important;background:#f5dbd0!important}
body.welcome-mode .layout{display:block!important;min-height:100vh!important;min-height:100dvh!important;height:auto!important;width:100%!important;margin:0!important;padding:0!important;overflow:visible!important;background:transparent!important}
body.welcome-mode .phone{position:relative!important;isolation:isolate;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;align-items:center!important;width:100%!important;max-width:none!important;height:auto!important;min-height:100vh!important;min-height:100dvh!important;left:auto!important;transform:none!important;margin:0!important;padding:0!important;overflow:hidden!important;aspect-ratio:auto!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:linear-gradient(180deg,#fae4d6,#fbe9df 70%,#e7b8a7)!important;container-type:normal!important}
body.welcome-mode .phone:before{display:none!important}
body.welcome-mode .sn-brand-hero{position:relative!important;display:block!important;flex:1 0 auto!important;align-self:stretch!important;min-height:0!important;width:100%!important;max-width:none!important;aspect-ratio:864/856!important;overflow:hidden!important;mask-image:none!important;background:radial-gradient(ellipse at 48% 30%,#fff7ee,#f1cdbd 70%,#cf947f)}
body.welcome-mode .portrait-poster{position:absolute!important;inset:0!important;display:block!important;width:100%!important;max-width:none!important;height:100%!important;object-fit:cover!important;object-position:center center!important;aspect-ratio:auto!important;mask-image:none!important;pointer-events:none;-webkit-user-drag:none;user-select:none}
body.welcome-mode .sn-brand-fallback{display:none;position:absolute;inset:0;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:center;padding:20px;color:#752b40;background:linear-gradient(140deg,#ffeadf,#f5d1bd)}
body.welcome-mode .sn-brand-fallback strong{font:italic 700 clamp(35px,9vw,86px) Georgia,serif;color:#a45d57}
body.welcome-mode .sn-brand-fallback span{font:600 clamp(17px,4.4vw,40px) Georgia,serif;letter-spacing:.1em}
body.welcome-mode .sn-brand-hero.is-image-unavailable .sn-brand-fallback{display:flex}
body.welcome-mode .sn-welcome-actions{box-sizing:border-box!important;position:relative!important;isolation:isolate;display:block!important;flex:0 0 auto!important;width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:864/450!important;inset:auto!important;z-index:4!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#f4cbb9 url('./sn-panel.avif') center center/100% 100% no-repeat!important;backdrop-filter:none!important;pointer-events:none!important}
body.welcome-mode .sn-live-button{all:unset;box-sizing:border-box!important;position:absolute!important;display:grid!important;grid-template-columns:minmax(22px,8%) minmax(0,1fr) minmax(15px,5%);align-items:center;column-gap:3.1%;width:76.8%!important;left:11.6%!important;min-height:44px!important;height:23.2%!important;padding:0 4.3%!important;margin:0!important;border-radius:999px!important;border:2px solid #b66e58!important;background:linear-gradient(180deg,#fffcf8 3%,#fff5f4 12%,#f9e1df 50%,#f4d3cf 85%,#fff4e8 100%)!important;box-shadow:0 0 0 1px #ffecdf inset,0 0 0 4px #fff7f5a8 inset,0 2px 0 2px #e4a27e inset,0 4px 0 #a94e3a,0 7px 13px #73283975,inset 0 12px 15px #fffefd!important;color:#6b092b!important;text-shadow:0 1px 0 #fff!important;text-align:center!important;font:700 clamp(16px,4.1vw,33px)/1.05 Georgia,'Times New Roman',serif!important;cursor:pointer!important;pointer-events:auto!important;-webkit-tap-highlight-color:transparent;overflow:hidden}
body.welcome-mode .sn-live-button::before{content:"";display:block!important;position:absolute;pointer-events:none;left:3%;right:3%;top:5%;height:32%;border-radius:999px;background:linear-gradient(#ffffffaa,#ffffff05)}
body.welcome-mode #welcome-book{top:12%!important;background:linear-gradient(180deg,#b52b56 0%,#7c0829 43%,#620321 73%,#970f3c 100%)!important;border-color:#dca170!important;color:#fff9ec!important;box-shadow:0 0 0 2px #f9caa0 inset,0 0 0 5px #98143a inset,0 7px 0 #8b3e28,0 11px 15px #57102770,inset 0 10px 15px #ffd8e644!important;text-shadow:0 1px 2px #3e0923!important}
body.welcome-mode #welcome-explore{top:39.0%!important}
body.welcome-mode #welcome-login{top:65.5%!important}
body.welcome-mode .sn-button-label{z-index:1;display:block!important;min-width:0;white-space:nowrap;overflow:visible;font:inherit;color:inherit}
body.welcome-mode .sn-button-icon{z-index:1;display:block!important;width:100%;max-width:34px;height:auto;max-height:34px;aspect-ratio:1/1;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.welcome-mode .sn-chevron{width:100%;max-width:20px;justify-self:center}
body.welcome-mode .sn-welcome-footer{all:unset;box-sizing:border-box!important;flex:0.55 0 auto!important;display:flex!important;flex-direction:column!important;align-self:stretch!important;align-items:center;justify-content:flex-start;position:relative!important;inset:auto!important;min-height:calc(100vw * 242 / 864)!important;width:100%!important;height:auto!important;aspect-ratio:auto!important;margin:0!important;padding:0 max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;border:0!important;box-shadow:none!important;background:#f1d2c2 url('./sn-footer.avif') center top/cover no-repeat!important;pointer-events:none!important}
body.welcome-mode .sn-welcome-footer::before{content:none!important;display:none!important}
body.welcome-mode .sn-footer-links{display:flex;align-items:center;justify-content:center;gap:clamp(9px,3vw,25px);margin-top:10%!important;pointer-events:auto;flex-wrap:wrap}
body.welcome-mode .sn-footer-link{all:unset;box-sizing:border-box!important;display:inline-flex!important;align-items:center;justify-content:center;min-width:45px!important;min-height:44px!important;padding:5px 7px!important;border-radius:6px;background:transparent!important;color:#6b1730!important;font:700 clamp(14px,3vw,27px)/1.1 Georgia,'Times New Roman',serif!important;cursor:pointer!important;pointer-events:auto!important}
body.welcome-mode .sn-footer-divider{display:inline-block;color:#7d1c38;font:bold clamp(16px,3vw,25px)/1 Georgia,serif}
body.welcome-mode .sn-live-button:focus-visible,body.welcome-mode .sn-footer-link:focus-visible{outline:3px solid #370c25!important;outline-offset:2px!important}
body.welcome-mode .sn-live-button:active{transform:translateY(3px);filter:brightness(.95)}
body.welcome-mode .sn-footer-link:active{text-decoration:underline}
body.welcome-mode #welcome-launch-message{position:absolute!important}
body:not(.welcome-mode) .sn-brand-hero,body:not(.welcome-mode) .sn-welcome-actions,body:not(.welcome-mode) .sn-welcome-footer{display:none!important}
@media(max-width:359px){body.welcome-mode .sn-live-button{grid-template-columns:20px minmax(0,1fr) 14px;padding:0 4%!important;column-gap:3%;font-size:15px!important}}
@media(min-width:720px){body.welcome-mode .phone{max-width:864px!important;margin-inline:auto!important;min-height:0!important}body.welcome-mode .layout{background:linear-gradient(120deg,#cf9a86,#fff5eb 35%,#fce4d8 65%,#d69d8c)!important}}
@media(prefers-reduced-motion:no-preference){body.welcome-mode .sn-live-button{transition:transform .13s ease,filter .13s ease}}
@media(prefers-reduced-motion:reduce){body.welcome-mode .sn-live-button{transition:none!important}}

/* ---- Legacy compatibility: luxury-app.css ---- */
/*
  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}
}


/* ---- Legacy compatibility: stacked-brand.css ---- */
/* Approved brand lock: the same complete five-part vertically stacked asset everywhere.
   Welcome layout is not changed. Never split the lotus from its wordmark. */
body:not(.welcome-mode) #site-shell .site-header{
 flex-direction:column!important;justify-content:center!important;gap:9px!important;
}
body:not(.welcome-mode) #site-shell .site-header .brand{
 display:block!important;align-self:center!important;flex:none!important;
 width:clamp(172px,43vw,270px)!important;max-width:calc(100vw - 28px)!important;
 padding:0!important;margin:0 auto!important;line-height:0!important;
}
.sn-master-brand{display:block!important;position:static!important;
 width:100%!important;height:auto!important;aspect-ratio:864/856;
 object-fit:contain!important;object-position:center!important;
 max-width:100%!important;max-height:none!important;min-width:0;
 margin-inline:auto;filter:none!important;transform:none!important;
 border:0!important;border-radius:0!important;clip-path:none!important;
}
body:not(.welcome-mode) #site-shell .site-nav{
 justify-content:center!important;width:100%!important;gap:7px!important;
}
body:not(.welcome-mode) #site-shell .site-footer-inner{
 flex-direction:column!important;justify-content:center!important;align-items:center!important;
}
body:not(.welcome-mode) #site-shell .sn-master-brand--footer{
 width:clamp(175px,36vw,280px)!important;max-width:100%!important;
}
#signature-app-navigation .signature-nav-top{
 display:grid!important;grid-template-columns:minmax(48px,1fr) minmax(0,2fr) minmax(48px,1fr);
 align-items:center!important;gap:8px!important;
}
#signature-app-navigation .signature-nav-identity{
 display:flex!important;flex-direction:column!important;align-items:center!important;
 justify-content:center!important;gap:3px!important;min-width:0!important;
 text-align:center!important;
}
#signature-app-navigation .sn-master-brand--nav{
 width:clamp(118px,31vw,187px)!important;height:auto!important;
}
#signature-app-navigation #signature-role-label,
#signature-app-navigation #signature-current-title{
 display:block!important;width:100%!important;max-width:100%;
 text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important;
}
#signature-app-navigation .signature-nav-utils{
 justify-content:flex-end!important;flex-wrap:wrap!important;
}
#signature-app-navigation .signature-nav-back{justify-self:start}
@media(max-width:600px){
 body:not(.welcome-mode) #site-shell .site-header .brand{width:clamp(162px,48vw,220px)!important}
 #signature-app-navigation .signature-nav-top{
  grid-template-columns:minmax(52px,1fr) minmax(0,2.3fr) minmax(52px,1fr);
 }
 #signature-app-navigation .sn-master-brand--nav{width:clamp(111px,32vw,160px)!important}
 #signature-app-navigation .signature-nav-utils{flex-direction:column!important;align-items:stretch!important}
 #signature-app-navigation .signature-nav-utils button{min-height:44px!important}
}
@media(max-width:359px){
 #signature-app-navigation .signature-nav-top{
  grid-template-columns:minmax(44px,1fr) minmax(0,2fr) minmax(44px,1fr);
 }
 #signature-app-navigation .sn-master-brand--nav{width:min(100%,110px)!important}
}


/* ---- Legacy compatibility: service-collections.css ---- */
/* Three official Signature Nails collections — welcome and brand untouched. */
.sn-collections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,22px);align-items:start;margin:18px 0}
.sn-collection,.sn-unassigned-services{min-width:0;padding:clamp(15px,2vw,22px);border:2px solid #c79275;border-radius:24px;background:linear-gradient(144deg,#fffaf5fa,#fae2dcf5);box-shadow:0 3px 0 #fffdf6 inset,0 9px 22px #79425132}
.sn-collection--signature{border-color:#b65a7c;background:linear-gradient(150deg,#fff9f4,#f6d8df 96%)}
.sn-collection--luxury{border-color:#962d59;background:linear-gradient(150deg,#fff6ef,#f5cfda 93%);box-shadow:0 0 0 2px #fff9ed inset,0 12px 27px #6c204045}
.sn-collection h3,.sn-unassigned-services h3{font:400 clamp(20px,2.5vw,28px)/1.17 Georgia,serif;color:#700f35;margin:0 0 10px;letter-spacing:.045em}
.sn-collection>p,.sn-unassigned-services>p{color:#6a4450;line-height:1.55;min-height:65px;margin:0 0 12px}
.sn-collection details{border-top:1px solid #c89a84;padding-top:12px}
.sn-collection summary{cursor:pointer;list-style-position:inside;font-weight:750;color:#682740;padding:12px 4px;min-height:44px}
.sn-collection-items{display:grid;gap:12px;padding-top:10px}
.sn-collection-service{min-width:0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1px solid #d9b5a3;border-radius:15px;background:#fffaf6db;padding:13px;box-shadow:0 2px 0 #fff inset}
.sn-collection-service h4{margin:0 0 5px;font:400 21px Georgia,serif;color:#651d37}
.sn-collection-service p{margin:5px 0;color:#6b4b54;line-height:1.45;font-size:13px}
.sn-collection-service .sn-collection-meta{font-weight:700;color:#60263d}
.sn-collection-service button{min-height:44px!important;white-space:normal;cursor:pointer}
.sn-collection-service button:disabled{opacity:.65}
.sn-unassigned-services{margin:18px 0;background:#fff7f3;border-style:dashed}
.sn-unassigned-services .sn-collection-service{margin:9px 0}
.sn-owner-collection-row{display:flex!important;flex-wrap:wrap;align-items:center;gap:9px;padding:12px 0;border-bottom:1px solid #dec0b6}
.sn-owner-collection-row select{flex:1 1 190px;min-height:44px}
.sn-owner-collection-row button{min-height:44px}
.sn-owner-collection-row span[role=status]{font-size:13px}
#ux-collection-picker{display:grid;gap:8px}
#ux-collection-picker label{display:block}
@media(max-width:980px){.sn-collections{grid-template-columns:1fr}.sn-collection>p{min-height:0}}
@media(max-width:390px){.sn-collection{padding:15px}.sn-collection-service{padding:11px}}
@media(prefers-reduced-motion:reduce){.sn-collection,.sn-collection *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


/* ---- Legacy compatibility: welcome-matched-backgrounds.css ---- */
/* 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}
}


/* ---- Legacy compatibility: mobile-navigation-fix.css ---- */
/* Mobile navigation correction prompted by real Samsung screenshot.
   No change to the approved welcome artwork or complete stacked identity. */
@media(max-width:600px){
  #overlay.app-screen .dialog{
    overflow-x:hidden!important;
  }
  #signature-app-navigation{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 0 16px!important;
    padding:8px 0 12px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    border-radius:0!important;
  }
  #signature-app-navigation .signature-nav-top{
    display:grid!important;
    grid-template-columns:minmax(62px,1fr) minmax(0,2fr) minmax(76px,1fr)!important;
    gap:6px!important;
    align-items:center!important;
    min-width:0!important;
    padding-inline:2px;
  }
  #signature-app-navigation .signature-nav-identity{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    text-align:center!important;
    gap:2px!important;
    min-width:0!important;
    width:100%!important;
    margin:0!important;
  }
  #signature-app-navigation .sn-master-brand--nav{
    display:block!important;
    width:clamp(86px,26vw,108px)!important;
    max-width:100%!important;
    height:auto!important;
    aspect-ratio:864/856;
    object-fit:contain!important;
    margin:0 auto!important;
  }
  #signature-app-navigation #signature-role-label{
    font-size:9px!important;
    line-height:1.2!important;
    margin:0!important;
    letter-spacing:.09em!important;
  }
  #signature-app-navigation #signature-current-title{
    font-size:clamp(16px,4vw,19px)!important;
    line-height:1.15!important;
    margin:0!important;
    padding:0!important;
    overflow-wrap:anywhere!important;
  }
  #signature-app-navigation .signature-nav-back{
    justify-self:stretch!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:8px 2px!important;
    font-size:clamp(11px,2.6vw,13px)!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  #signature-app-navigation .signature-nav-utils{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:6px!important;
    justify-content:center!important;
    min-width:0!important;
  }
  #signature-app-navigation .signature-nav-utils button{
    display:block;
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    margin:0!important;
    padding:8px 2px!important;
    font-size:clamp(10px,2.55vw,12px)!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    text-align:center!important;
  }
  #signature-app-navigation .signature-nav-tabs{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    overflow-x:clip!important;
    white-space:normal!important;
    scroll-snap-type:none!important;
    padding:12px 1px 0!important;
    margin:0!important;
    scrollbar-width:none!important;
  }
  #signature-app-navigation .signature-nav-tabs button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
    width:100%!important;
    min-height:44px!important;
    height:auto!important;
    padding:9px 5px!important;
    margin:0!important;
    font-size:clamp(10px,2.6vw,12px)!important;
    line-height:1.2!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    white-space:normal!important;
    text-align:center!important;
    scroll-snap-align:none!important;
  }
  #overlay.app-screen .dialog:has(#signature-app-navigation:not([hidden])) > .close{
    display:none!important;
  }
  #overlay.app-screen .dialog #content{
    padding-top:0!important;
    min-width:0;
  }
  /* Welcome-matched decoration stays around content rather than covering it. */
  #overlay.app-screen .dialog::after{
    opacity:.18!important;
  }
}
@media(max-width:359px){
  #signature-app-navigation .signature-nav-top{
    grid-template-columns:minmax(54px,1fr) minmax(0,2fr) minmax(68px,1fr)!important;
    gap:4px!important;
  }
  #signature-app-navigation .sn-master-brand--nav{
    width:min(100%,86px)!important;
  }
  #signature-app-navigation .signature-nav-tabs{
    gap:5px!important;
  }
  #signature-app-navigation .signature-nav-tabs button{
    font-size:10px!important;
    padding:7px 3px!important;
  }
}
@media(min-width:601px){
  #signature-app-navigation .signature-nav-tabs{
    scrollbar-color:#d7a18b transparent;
  }
}


/* ---- Legacy compatibility: welcome-master-system.css ---- */
/* Signature Nails | Welcome Master Design System
   2026-10-14. The approved Welcome page is deliberately excluded.
   Final visual layer shared by public salon, guest, owner, team and customer routes.
   No text content, booking rules, authentication logic or database dependencies. */

/* 1. Official material and color tokens. All non-welcome routes inherit them. */
body:not(.welcome-mode),
body:not(.welcome-mode) .overlay.open {
  --sn-material-marble:#fff8f1;
  --sn-material-blush:#f9e5df;
  --sn-material-rose:#bc7a85;
  --sn-material-gold:#c88964;
  --sn-material-gold-light:#f5d6b6;
  --sn-material-wine:#750f35;
  --sn-material-dark-wine:#4c0827;
  --sn-material-ink:#512639;
  --sn-material-muted:#73515c;
  --sn-material-border:#c99478;
  --sn-material-glass:linear-gradient(155deg,#fffcf8f8 1%,#fff0ecf8 56%,#f4d5ccf4 100%);
  --sn-material-button:linear-gradient(180deg,#fffdfb 0%,#fff1ee 48%,#f4cec8 100%);
  --sn-material-button-primary:linear-gradient(180deg,#b33c68 0%,#870e40 39%,#570725 78%,#8c1748 100%);
  --sn-material-relief:inset 0 2px 3px #fffdfa,inset 0 -3px 5px #a8695c44,0 3px 0 #ad6c53,0 8px 19px #6b254636;
  --sn-material-depth:0 16px 38px #71364a24,0 3px 10px #d3947755;
  --ink:var(--sn-material-ink);
  --muted:var(--sn-material-muted);
  --line:#dbb6a1;
  --rose-dark:var(--sn-material-wine);
  --rose:var(--sn-material-rose);
  --surface:var(--sn-material-marble);
  --soft:var(--sn-material-blush);
  color:var(--sn-material-ink);
}

/* 2. Continuous marble and candlelit rose-gold atmosphere.
   Decorative photos remain in the margins, not behind editable information. */
body:not(.welcome-mode) #site-shell,
body:not(.welcome-mode) .overlay.open .dialog {
  background-color:#fff7f0!important;
  background-image:
    radial-gradient(ellipse at 94% 12%,#ffd0d83a 0%,transparent 38%),
    radial-gradient(ellipse at 0% 71%,#eab2b32e 0%,transparent 45%),
    linear-gradient(114deg,transparent 0 27%,#c8866125 27.15%,#fffefa33 27.4%,transparent 27.9%),
    linear-gradient(148deg,transparent 0 71%,#bd8c6c1c 71.2%,#fffefa66 71.5%,transparent 72%),
    repeating-linear-gradient(120deg,transparent 0 160px,#c99a7b0b 163px,transparent 167px 302px),
    linear-gradient(140deg,#fffdf9 0%,#f9e7df 51%,#fff7f0 100%)!important;
  background-attachment:scroll!important;
}
body:not(.welcome-mode) #site-shell::before{
  opacity:.40!important;
}
body:not(.welcome-mode) #site-shell::after{
  opacity:.30!important;
}
body:not(.welcome-mode) .overlay.open{
  background-color:#d9b2ad!important;
  background-image:
    linear-gradient(130deg,#3b112c7d,#5d213e8e),
    radial-gradient(ellipse at 15% 5%,#fff7edd1,transparent 54%),
    radial-gradient(ellipse at 87% 86%,#f4b3c1b8,transparent 55%),
    linear-gradient(137deg,#f8e1d6,#eac4bb)!important;
}
body:not(.welcome-mode) .overlay.open .dialog {
  border:2px solid var(--sn-material-border)!important;
  box-shadow:inset 0 0 0 3px #fffbf4,0 20px 64px #48182e68!important;
}
body:not(.welcome-mode) .overlay.open .dialog::before{
  background:linear-gradient(90deg,#ffead2,#ac5879 49%,#f4ca9e)!important;
  box-shadow:0 1px 4px #a24d5d55;
}
body:not(.welcome-mode) .overlay.open .dialog::after{
  opacity:.18!important;
}

/* 3. True glass components. Decorative surfaces never replace real DOM text. */
body:not(.welcome-mode) :is(
  #site-shell .service-tile,
  #site-shell .hero-art,
  #site-shell .site-header,
  #site-shell .site-footer,
  .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 .actionable-record,
  .overlay.open .dialog .actionable-detail,
  .overlay.open .dialog .actionable-change,
  .overlay.open .dialog .actionable-info,
  .overlay.open .dialog .signature-shortcut,
  .overlay.open .dialog .readiness-item,
  .overlay.open .dialog .demo-check-item,
  .overlay.open .dialog .booking-summary,
  .overlay.open .dialog .booking-price,
  .overlay.open .dialog .sn-collection,
  .overlay.open .dialog .sn-unassigned-services,
  .overlay.open .dialog .sn-collection-service
){
  border-color:var(--sn-material-border)!important;
  background-color:#fffaf5!important;
  background-image:var(--sn-material-glass)!important;
  color:var(--sn-material-ink);
  box-shadow:inset 0 2px 0 #ffffffd9,0 6px 18px #87495e21!important;
}
/* Keep dense business tables calmer and more opaque than marketing cards. */
body:not(.welcome-mode) .overlay.open .dialog :is(
  .ui-row,.ops-appointment,.ops-request,.actionable-record,.calendar-cell,
  .calendar-day,.calendar-day-head,.calendar-time,.calendar-lane,
  .actionable-detail,.signature-customer-grid article
){
  background-color:#fffcf8!important;
}
body:not(.welcome-mode) .overlay.open .dialog :is(
  .ui-error,.ui-success,.ui-chip.confirmed,.ui-chip.cancelled,.ui-chip.requested
){
  background-image:none!important;
}
body:not(.welcome-mode) .overlay.open .dialog :is(
  .ui-card,.ui-stat,.ops-section,.ops-request,.ops-appointment,
  .actionable-record,.signature-shortcut,.sn-collection
){
  min-width:0;
  border-radius:clamp(16px,2vw,24px)!important;
}
body:not(.welcome-mode) .overlay.open .dialog :is(.ops-action-panel,.note,.ui-modal-section){
  border-radius:15px;
  border-color:#d5b19d;
}

/* 4. One typography hierarchy across welcome-adjacent and deep app pages. */
body:not(.welcome-mode) :is(
  #site-shell h1,#site-shell h2,
  .overlay.open .dialog h2,
  .overlay.open .dialog .ui-card h3,
  .overlay.open .dialog .ops-section h3,
  .overlay.open .dialog .sn-collection h3
){
  color:var(--sn-material-wine)!important;
  text-shadow:0 1px 0 #fffdf9;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.018em;
  text-wrap:balance;
}
body:not(.welcome-mode) #site-shell .section-heading h2,
body:not(.welcome-mode) .overlay.open .dialog h2{
  line-height:1.17!important;
  margin-top:0;
}
body:not(.welcome-mode) .overlay.open .dialog :is(
  .ui-muted,.ops-request p,.ops-appointment p,.signature-shortcut span,
  .sn-collection p,.sn-collection-service p
){
  color:var(--sn-material-muted);
}
body:not(.welcome-mode) :is(
  #site-shell .section-kicker,
  #site-shell .hero-eyebrow,
  .overlay.open .dialog .eyebrow,
  .overlay.open .dialog .section-kicker,
  .overlay.open .dialog .demo-eyebrow
){
  color:#924362!important;
  letter-spacing:.13em;
  font-weight:800;
}

/* 5. Unified raised burgundy / rose-gold controls across route-specific modules. */
body:not(.welcome-mode) :is(
  #site-shell .site-button,
  #site-shell .site-nav button,
  .overlay.open .dialog button.primary,
  .overlay.open .dialog .site-button,
  .overlay.open .dialog .ops-tabs button,
  .overlay.open .dialog .demo-role-tabs button,
  .overlay.open .dialog .actionable-filterbar button,
  .overlay.open .dialog .actionable-link,
  .overlay.open .dialog .booking-actions button,
  .overlay.open .dialog .ui-actions button,
  .overlay.open .dialog .ui-toolbar button,
  .overlay.open .dialog .sn-collection-service button,
  #signature-app-navigation button
){
  box-sizing:border-box;
  min-height:44px;
  max-width:100%;
  border:1.5px solid var(--sn-material-border)!important;
  border-radius:999px!important;
  background:var(--sn-material-button)!important;
  color:var(--sn-material-wine)!important;
  box-shadow:var(--sn-material-relief)!important;
  text-shadow:0 1px 0 #fff8f5;
  text-decoration:none;
  line-height:1.25;
  white-space:normal;
  overflow-wrap:anywhere;
  -webkit-tap-highlight-color:transparent;
}
body:not(.welcome-mode) :is(
  #site-shell .primary-action,
  #site-shell .nav-accent,
  .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-filterbar button.selected,
  #signature-app-navigation .signature-nav-tabs button.active,
  #signature-app-navigation .signature-nav-tabs button[aria-current="page"]
){
  background:var(--sn-material-button-primary)!important;
  color:#fffafa!important;
  border-color:#d7a681!important;
  box-shadow:inset 0 2px 5px #fff5e74d,inset 0 -4px 6px #3d031c70,0 3px 0 #7b463a,0 9px 18px #5b173b58!important;
  text-shadow:0 1px 2px #3b031b!important;
}
body:not(.welcome-mode) :is(
  #site-shell button,
  .overlay.open button,
  #signature-app-navigation button
):focus-visible{
  outline:3px solid #76123f!important;
  outline-offset:3px!important;
}
body:not(.welcome-mode) :is(
  #site-shell button,.overlay.open button,#signature-app-navigation button
):disabled{
  opacity:.58!important;
  cursor:not-allowed!important;
}
body:not(.welcome-mode) .overlay.open .dialog :is(
  .close,.back
){
  color:var(--sn-material-wine)!important;
  background:var(--sn-material-button)!important;
  box-shadow:inset 0 2px 4px #fff,0 3px 7px #74324730!important;
}

/* 6. Consistent forms, collection tiers, calendars, gallery and contact details. */
body:not(.welcome-mode) .overlay.open .dialog :is(
  input:not([type=checkbox]):not([type=radio]),
  textarea,select
){
  min-height:44px;
  max-width:100%;
  background:#fffcf9!important;
  border:1.5px solid #c39782!important;
  color:var(--sn-material-ink)!important;
  border-radius:13px!important;
  box-shadow:inset 0 2px 4px #a56c6921!important;
}
body:not(.welcome-mode) .overlay.open .dialog :is(input,textarea,select):focus-visible{
  outline:3px solid #8a2350!important;
  outline-offset:1px!important;
}
body:not(.welcome-mode) .overlay.open .dialog :is(label,.field){
  color:var(--sn-material-ink);
}
body:not(.welcome-mode) .overlay.open .dialog .sn-collections{
  align-items:stretch;
  gap:clamp(12px,2vw,20px);
}
body:not(.welcome-mode) .overlay.open .dialog .sn-collection--essential{
  border-color:#c99779!important;
}
body:not(.welcome-mode) .overlay.open .dialog .sn-collection--signature{
  border-color:#b55e83!important;
  box-shadow:inset 0 2px 0 #fff,0 9px 20px #ad5e7d37!important;
}
body:not(.welcome-mode) .overlay.open .dialog .sn-collection--luxury{
  border-color:#a8476e!important;
  box-shadow:inset 0 2px 0 #fff,0 10px 25px #72244038!important;
}
body:not(.welcome-mode) .overlay.open .dialog .sn-collection summary{
  color:var(--sn-material-wine)!important;
  border-radius:12px;
}
body:not(.welcome-mode) .overlay.open .dialog .sn-collection summary:focus-visible{
  outline:3px solid #81264d;
  outline-offset:2px;
}
body:not(.welcome-mode) .overlay.open .dialog :is(.calendar-day,.calendar-week,.calendar-month){
  scrollbar-color:#b7818b #f9e5df;
  scrollbar-width:thin;
}
body:not(.welcome-mode) .overlay.open .dialog :is(.calendar-entry,.calendar-block){
  border-radius:10px;
}
body:not(.welcome-mode) .overlay.open .dialog :is(
  .gallery-grid img,.gallery img,.service-tile img
){
  border:2px solid #c58d70;
  box-shadow:0 3px 10px #6626442a;
  border-radius:18px;
  object-fit:cover;
}
/* 7. Responsive content containment: horizontal scrolling belongs only to data grids. */
body:not(.welcome-mode) .overlay.open .dialog :is(
  #content,.ui-grid,.ui-stats,.signature-customer-grid,.sn-collections,.ops-agenda
){
  min-width:0;max-width:100%;
}
body:not(.welcome-mode) .overlay.open .dialog :is(
  .ui-grid>*,.ui-stats>*,.signature-customer-grid>*,
  .sn-collections>*,.ops-agenda>*
){min-width:0;}
body:not(.welcome-mode) .overlay.open .dialog :is(
  .calendar-month,.calendar-week,.calendar-day,
  .ui-table-wrap,.table-scroll
){max-width:100%;overflow-x:auto;}
body:not(.welcome-mode) .overlay.open .dialog :is(
  .ui-grid,.ui-stats,.sn-collections
){overflow-wrap:anywhere;}
@media(max-width:600px){
  body:not(.welcome-mode) #site-shell::before{opacity:.27!important}
  body:not(.welcome-mode) #site-shell::after{opacity:.20!important}
  body:not(.welcome-mode) .overlay.open .dialog::after{
    opacity:.14!important;
  }
  body:not(.welcome-mode) .overlay.open .dialog{
    border-left:0!important;border-right:0!important;border-radius:0!important;
    box-shadow:inset 0 2px 0 #fffaf4!important;
  }
  body:not(.welcome-mode) .overlay.open .dialog h2{
    font-size:clamp(27px,7.2vw,37px)!important;
  }
  body:not(.welcome-mode) .overlay.open .dialog :is(
    .ui-card,.ops-request,.ops-appointment,.actionable-record,
    .sn-collection,.sn-unassigned-services
  ){
    padding:clamp(12px,3.5vw,17px)!important;
  }
  body:not(.welcome-mode) .overlay.open .dialog .sn-collections{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body:not(.welcome-mode) .overlay.open .dialog button{
    min-height:44px;
  }
}
@media(prefers-reduced-motion:reduce){
  body:not(.welcome-mode) :is(
    #site-shell button,.overlay.open button,.sn-collection,.service-tile
  ){transition:none!important;animation:none!important;}
}
@media(prefers-contrast:more){
  body:not(.welcome-mode) .overlay.open .dialog::after{display:none!important}
  body:not(.welcome-mode) .overlay.open .dialog :is(.ui-card,.ui-stat,.sn-collection){
    background:#fffdfb!important;
    border-color:#773d4a!important;
  }
}


/* ---- Legacy compatibility: brand-backdrop-repair.css ---- */
/* Welcome-approved luxury art: fix the tiny boxed nav-brand and washed-out page.
   Only affects application screens. The approved main Welcome page is unchanged. */
body:not(.welcome-mode) #overlay.app-screen .dialog {
  position:relative;isolation:isolate;
  background:
    radial-gradient(circle at 30% 12%,#fffaf5db,transparent 42%),
    radial-gradient(ellipse at 92% 78%,#f3bfd044,transparent 50%),
    linear-gradient(118deg,transparent 0 32%,#cb9b7550 32.12%,#fff8ed9a 32.36%,transparent 32.85%),
    linear-gradient(155deg,transparent 0 64%,#bc876341 64.12%,#fff5e981 64.4%,transparent 64.8%),
    linear-gradient(142deg,#fff6e8 0%,#f7dcd5 49%,#fae2dd 100%)!important;
}
/* Keep decorative imagery OUTSIDE the interactive layer. */
body:not(.welcome-mode) #overlay.app-screen .dialog .sn-luxury-screen-art{
  position:absolute;z-index:0;inset:0;pointer-events:none;
  overflow:hidden;border-radius:inherit;
}
body:not(.welcome-mode) #overlay.app-screen .dialog .sn-luxury-screen-art::before,
body:not(.welcome-mode) #overlay.app-screen .dialog .sn-luxury-screen-art::after{
  content:"";position:absolute;display:block;pointer-events:none;
  background-image:url('./sn-brand.avif');background-repeat:no-repeat;
  filter:saturate(1.14) contrast(1.04);
}
body:not(.welcome-mode) #overlay.app-screen .dialog .sn-luxury-screen-art::before{
  top:175px;left:-12px;width:clamp(105px,29vw,255px);height:clamp(235px,47vw,460px);
  background-size:auto 150%;background-position:left top;
  opacity:.70;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 100%);
}
body:not(.welcome-mode) #overlay.app-screen .dialog .sn-luxury-screen-art::after{
  right:-10px;bottom:0;width:clamp(150px,38vw,360px);height:clamp(250px,49vw,460px);
  background-size:auto 215%;background-position:right bottom;
  opacity:.58;
  -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 48%,transparent 100%);
  mask-image:linear-gradient(270deg,#000 0%,#000 48%,transparent 100%);
}
body:not(.welcome-mode) #overlay.app-screen .dialog > :not(.sn-luxury-screen-art){
  position:relative;z-index:1;
}
/* Full cohesive logo, never a tiny square badge, and never lotus beside the name.
   Navigation uses a wider borderless panel that preserves the original image aspect ratio. */
body:not(.welcome-mode) #signature-app-navigation{
  background:linear-gradient(156deg,#fff9f1ed,#f6d8d6ef 70%,#f7e5dded)!important;
  border:1px solid #d6a78b!important;border-radius:22px!important;
  box-shadow:inset 0 2px 2px #fffdfa,0 12px 32px #70253b2e!important;
  padding:14px 15px 16px!important;
  margin:0 0 23px!important;
}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-top{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
  gap:9px!important;align-items:center!important;
}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-identity{
  grid-column:1/-1;grid-row:1;
  width:100%!important;max-width:100%!important;align-items:center!important;
  padding:3px 0 8px!important;
  background:radial-gradient(ellipse at center,#fff9f1e6,transparent 67%);
}
body:not(.welcome-mode) #signature-app-navigation .sn-master-brand--nav{
  width:clamp(182px,43vw,300px)!important;max-width:92%!important;
  height:auto!important;aspect-ratio:864/856!important;
  object-fit:contain!important;object-position:center!important;
  border:0!important;box-shadow:none!important;border-radius:0!important;
}
body:not(.welcome-mode) #signature-app-navigation #signature-role-label{
  font-size:10px!important;letter-spacing:.18em!important;color:#85324d!important;
}
body:not(.welcome-mode) #signature-app-navigation #signature-current-title{
  font:400 clamp(20px,3vw,27px)/1.2 Georgia,serif!important;
  color:#721537!important;margin-top:5px!important;
}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-back{
  grid-column:1;grid-row:2;justify-self:start!important;width:auto!important;
  padding:11px 17px!important;
}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-utils{
  grid-column:2;grid-row:2;flex-direction:row!important;align-items:center!important;
  justify-self:end;gap:8px!important;
}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-utils button{
  width:auto!important;min-width:75px!important;padding:10px 12px!important;
}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-tabs{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;margin:12px 0 0!important;padding:12px 0 0!important;
  border-top:1px solid #d4a88f;overflow:visible!important;max-width:100%!important;
}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-tabs button{
  min-width:0!important;width:100%!important;min-height:44px!important;
  padding:11px 7px!important;font-size:clamp(11px,2.7vw,14px)!important;
  white-space:normal!important;
}
/* Salon notices and form panels use the same frosted glass, readable over art. */
body:not(.welcome-mode) #overlay.app-screen #content{
  max-width:100%!important;min-width:0!important;
}
body:not(.welcome-mode) #overlay.app-screen #content>h2{
  color:#760d37!important;
  text-shadow:0 1px #fff8f3!important;
}
body:not(.welcome-mode) #overlay.app-screen .dialog .sn-luxury-screen-art ~ #content :is(p,input,textarea,select){
  position:relative;z-index:1;
}
@media(max-width:600px){
  body:not(.welcome-mode) #signature-app-navigation{padding:13px 12px 15px!important;border-radius:18px!important}
  body:not(.welcome-mode) #signature-app-navigation .sn-master-brand--nav{
    width:clamp(188px,61vw,252px)!important;max-width:95%!important;
  }
  body:not(.welcome-mode) #signature-app-navigation .signature-nav-identity{padding:0 0 7px!important}
  body:not(.welcome-mode) #signature-app-navigation .signature-nav-top{gap:7px!important}
  body:not(.welcome-mode) #signature-app-navigation .signature-nav-utils button{
    min-width:68px!important;padding:10px 9px!important;
  }
  body:not(.welcome-mode) #signature-app-navigation .signature-nav-tabs{gap:7px!important}
  body:not(.welcome-mode) #overlay.app-screen .dialog .sn-luxury-screen-art::before{
    top:140px;width:39vw;height:290px;opacity:.55;
  }
  body:not(.welcome-mode) #overlay.app-screen .dialog .sn-luxury-screen-art::after{
    width:51vw;height:330px;opacity:.50;
  }
}
@media(max-width:359px){
 body:not(.welcome-mode) #signature-app-navigation .sn-master-brand--nav{width:185px!important}
 body:not(.welcome-mode) #signature-app-navigation .signature-nav-tabs{gap:5px!important}
 body:not(.welcome-mode) #signature-app-navigation .signature-nav-tabs button{padding:9px 3px!important;font-size:11px!important}
}
@media(prefers-contrast:more){
 body:not(.welcome-mode) #overlay.app-screen .dialog .sn-luxury-screen-art{display:none}
}


/* ---- Legacy compatibility: crystal-glass-system.css ---- */
/* Signature Nails | Welcome-derived 3D crystal glass.
 * Final visual layer for public salon, guest, owner, staff, customer routes.
 * Approved Welcome artwork and controls are deliberately excluded.
 * Shared materials; no business logic or layout rewrites. */
body:not(.welcome-mode){
 --sn-crystal-ink:#512639;
 --sn-crystal-rim:rgba(250,208,183,.84);
 --sn-crystal-blur:blur(17px) saturate(140%);
 --sn-crystal-blur-small:blur(10px) saturate(125%);
 --sn-crystal-shell:
   linear-gradient(120deg,rgba(255,255,255,.80),rgba(255,255,255,.17) 28%,transparent 51%),
   radial-gradient(ellipse at 96% 0%,rgba(255,229,228,.60),transparent 55%),
   linear-gradient(147deg,rgba(255,253,249,.86),rgba(255,237,232,.73) 55%,rgba(247,208,207,.78));
 --sn-crystal-card:
   linear-gradient(115deg,rgba(255,255,255,.78),rgba(255,255,255,.14) 33%,transparent 59%),
   radial-gradient(ellipse at 94% 3%,rgba(255,240,223,.66),transparent 52%),
   linear-gradient(151deg,rgba(255,253,249,.88),rgba(255,238,234,.74) 54%,rgba(244,207,208,.83));
 --sn-crystal-dense:
   linear-gradient(125deg,rgba(255,255,255,.74),transparent 48%),
   linear-gradient(150deg,rgba(255,254,250,.99),rgba(255,243,238,.96));
 --sn-crystal-shadow:
   inset 0 2px 1px rgba(255,255,255,.96),
   inset 1px 0 0 rgba(255,255,255,.63),
   inset 0 -4px 9px rgba(147,83,88,.13),
   0 3px 0 rgba(165,99,87,.19),
   0 17px 40px rgba(93,31,58,.20),
   0 30px 65px rgba(99,41,57,.10);
 --sn-crystal-card-shadow:
   inset 0 2px 1px rgba(255,255,255,.97),
   inset 1px 0 0 rgba(255,255,255,.56),
   inset 0 -3px 8px rgba(159,82,94,.11),
   0 3px 0 rgba(171,108,94,.18),
   0 10px 24px rgba(91,35,61,.15),
   0 23px 42px rgba(91,35,61,.09);
}
/* Structural glass: multiple highlights, a tinted core, refractive blur,
   bevelled edge and independently layered shadows. Marble art stays behind. */
body:not(.welcome-mode) :is(
 #site-shell .site-header,#site-shell .site-footer,
 #site-shell .hero,#site-shell .hero-art,#site-shell .hero-art-inner,
 #signature-app-navigation,.overlay.open .dialog,#overlay.app-screen .dialog
){
 background-color:rgba(255,246,242,.86)!important;
 background-image:var(--sn-crystal-shell)!important;
 border:1.5px solid var(--sn-crystal-rim)!important;
 box-shadow:var(--sn-crystal-shadow)!important;
 -webkit-backdrop-filter:var(--sn-crystal-blur);
 backdrop-filter:var(--sn-crystal-blur);
 color:var(--sn-crystal-ink);
}
body:not(.welcome-mode) #site-shell .site-header{
 border-left:0!important;border-right:0!important;border-top:0!important;
 box-shadow:inset 0 2px rgba(255,255,255,.96),inset 0 -2px rgba(164,100,91,.15),0 12px 34px rgba(102,42,68,.14)!important;
}
body:not(.welcome-mode) #site-shell .site-footer{
 border-left:0!important;border-right:0!important;border-bottom:0!important;
 box-shadow:inset 0 2px 1px rgba(255,255,255,.88),0 -8px 28px rgba(100,43,67,.09)!important;
}
body:not(.welcome-mode) #site-shell .site-footer :is(p,strong){
 color:var(--sn-crystal-ink)!important;
}
body:not(.welcome-mode) #site-shell .hero{
 border-radius:clamp(22px,3vw,38px);
 margin-top:clamp(16px,3vw,32px);
}
body:not(.welcome-mode) #site-shell .hero-art{
 overflow:hidden;border-radius:clamp(22px,3vw,36px)!important;
}
body:not(.welcome-mode) #site-shell .hero-art-inner{
 border-radius:140px 140px 27px 27px;
 background-image:var(--sn-crystal-card)!important;
 box-shadow:var(--sn-crystal-card-shadow)!important;
 -webkit-backdrop-filter:var(--sn-crystal-blur-small);
 backdrop-filter:var(--sn-crystal-blur-small);
}
body:not(.welcome-mode) #signature-app-navigation{
 border-radius:clamp(18px,2.5vw,26px)!important;
 background-image:var(--sn-crystal-shell)!important;
 box-shadow:var(--sn-crystal-shadow)!important;
}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-identity{
 border-radius:16px;
 background-image:radial-gradient(ellipse at center,rgba(255,252,247,.80),transparent 71%)!important;
}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-tabs{
 border-top-color:rgba(163,95,91,.40)!important;
}
/* The full-screen role-aware dialog is a translucent architectural plane.
   Preserves the approved floral crop, nav structure, scroll and close button. */
body:not(.welcome-mode) .overlay.open .dialog,
body:not(.welcome-mode) #overlay.app-screen .dialog{
 border-radius:clamp(16px,2.4vw,30px)!important;
 background-image:
  linear-gradient(125deg,rgba(255,255,255,.73),rgba(255,255,255,.15) 28%,transparent 51%),
  radial-gradient(ellipse at 100% 11%,rgba(255,225,220,.46),transparent 49%),
  linear-gradient(147deg,rgba(255,252,247,.87),rgba(255,231,231,.78) 55%,rgba(249,220,210,.84))!important;
}
body:not(.welcome-mode) .overlay.open .dialog::before{
 background:linear-gradient(90deg,#ffe5c6,#ad5477 49%,#f6c9a0)!important;
 box-shadow:0 1px 0 rgba(255,255,255,.93),0 3px 8px rgba(118,35,69,.24)!important;
}
/* Shared crystal cards for customer/employee/owner workflows and public salon.
   Dense widgets are deliberately handled separately for legibility. */
body:not(.welcome-mode) :is(
 #site-shell .service-tile,#site-shell .owner-shortcut,
 .overlay.open .dialog .ui-card,
 .overlay.open .dialog .ui-stat,
 .overlay.open .dialog .ops-section,
 .overlay.open .dialog .ops-request,
 .overlay.open .dialog .ops-appointment,
 .overlay.open .dialog .actionable-record,
 .overlay.open .dialog .actionable-detail,
 .overlay.open .dialog .actionable-change,
 .overlay.open .dialog .actionable-info,
 .overlay.open .dialog .signature-shortcut,
 .overlay.open .dialog .signature-customer-grid article,
 .overlay.open .dialog .readiness-item,
 .overlay.open .dialog .demo-check-item,
 .overlay.open .dialog .sn-collection,
 .overlay.open .dialog .sn-unassigned-services,
 .overlay.open .dialog .booking-summary,
 .overlay.open .dialog .booking-price,
 .overlay.open .dialog .ui-modal-section,
 .overlay.open .dialog .booking-pane
){
 background-color:rgba(255,250,246,.86)!important;
 background-image:var(--sn-crystal-card)!important;
 border:1px solid rgba(198,139,112,.70)!important;
 box-shadow:var(--sn-crystal-card-shadow)!important;
 -webkit-backdrop-filter:var(--sn-crystal-blur-small);
 backdrop-filter:var(--sn-crystal-blur-small);
 color:var(--sn-crystal-ink);
}
/* Business tables, calendars and records need near-opaque glass.
   Never recolor statuses, chips, event states or approval indicators. */
body:not(.welcome-mode) .overlay.open .dialog :is(
 .ui-row,.actionable-row,.ops-action-panel,.ops-appointment-open,
 .actionable-data,.sn-collection-service,.calendar-day,.calendar-cell,
 .calendar-lane,.calendar-time,.calendar-day-head,.item,.note,.demo-safety
){
 background-color:rgba(255,251,247,.97)!important;
 background-image:var(--sn-crystal-dense)!important;
 border-color:rgba(191,133,106,.64)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.95),0 4px 11px rgba(95,47,63,.08)!important;
 color:var(--sn-crystal-ink);
}
body:not(.welcome-mode) .overlay.open .dialog :is(.ui-error,.ui-success,.ui-chip,.calendar-block,.calendar-entry){
 background-image:none!important;
}
body:not(.welcome-mode) .overlay.open .dialog :is(table,th,td){
 color:var(--sn-crystal-ink);
}
body:not(.welcome-mode) .overlay.open .dialog th{
 background-color:rgba(255,247,241,.98);
}
body:not(.welcome-mode) .overlay.open .dialog :is(
 input:not([type=checkbox]):not([type=radio]),textarea,select
){
 background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(255,249,244,.97))!important;
 border-color:rgba(178,110,92,.72)!important;
 box-shadow:inset 0 2px 6px rgba(108,46,59,.10),0 1px rgba(255,255,255,.96)!important;
 color:#482033!important;
}
body:not(.welcome-mode) .overlay.open .dialog :is(input,textarea,select):focus-visible{
 outline:3px solid #88254b!important;
 outline-offset:2px!important;
}
/* Raised, illuminated controls: retain primary wine gradient and semantics. */
body:not(.welcome-mode) :is(
 #site-shell .site-button,#site-shell .site-nav button,
 #signature-app-navigation button,
 .overlay.open .dialog button.primary,
 .overlay.open .dialog button.back,.overlay.open .dialog .site-button
){
 border-color:rgba(196,137,109,.90)!important;
 box-shadow:inset 0 2px 2px rgba(255,255,255,.79),
  inset 0 -3px 4px rgba(109,37,59,.12),0 2px 0 rgba(155,91,77,.36),
  0 7px 17px rgba(88,27,55,.20)!important;
}
body:not(.welcome-mode) :is(
 #site-shell .primary-action,#site-shell .nav-accent,
 #signature-app-navigation .signature-nav-tabs button.active,
 #signature-app-navigation .signature-nav-tabs button[aria-current="page"],
 .overlay.open .dialog button.primary
){
 background-image:linear-gradient(115deg,rgba(255,255,255,.23),transparent 41%,rgba(26,0,12,.12)),var(--sn-material-button-primary)!important;
 color:#fffafa!important;
 text-shadow:0 1px 2px rgba(47,2,23,.75)!important;
 box-shadow:inset 0 2px 2px rgba(255,247,239,.29),
  inset 0 -4px 6px rgba(51,3,22,.47),0 3px 0 rgba(105,49,51,.8),
  0 9px 19px rgba(88,27,55,.29)!important;
}
body:not(.welcome-mode) :is(
 #site-shell button,#signature-app-navigation button,
 .overlay.open .dialog button,.overlay.open .dialog a,
 .overlay.open .dialog input,.overlay.open .dialog select
):focus-visible{
 outline:3px solid #812047!important;outline-offset:3px!important;
}
body:not(.welcome-mode) #site-shell .service-tile,
body:not(.welcome-mode) .overlay.open .dialog :is(.signature-shortcut,.actionable-record,.sn-collection){
 transition:box-shadow .24s ease,transform .24s ease,border-color .24s ease;
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 body:not(.welcome-mode) #site-shell .service-tile:hover,
 body:not(.welcome-mode) .overlay.open .dialog :is(.signature-shortcut,.actionable-record,.sn-collection):hover{
  transform:translateY(-2px);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.98),0 4px 0 rgba(173,110,92,.22),0 16px 34px rgba(93,31,58,.21)!important;
 }
}
/* Mobile: smaller blur budgets and no additional outer horizontal space. */
@media(max-width:600px){
 body:not(.welcome-mode){
  --sn-crystal-blur:blur(9px) saturate(120%);
  --sn-crystal-blur-small:blur(5px) saturate(112%);
 }
 body:not(.welcome-mode) #site-shell .hero{
  margin-inline:10px;border-radius:22px;
 }
 body:not(.welcome-mode) .overlay.open .dialog{
  border-left:0!important;border-right:0!important;border-radius:0!important;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.97)!important;
 }
 body:not(.welcome-mode) #signature-app-navigation{
  box-shadow:inset 0 2px rgba(255,255,255,.97),0 10px 23px rgba(98,41,66,.15)!important;
 }
}
/* Accessibility and browser fallback: opacity before spectacle. */
@media(prefers-reduced-transparency:reduce), (prefers-contrast:more){
 body:not(.welcome-mode){
  --sn-crystal-shell:linear-gradient(145deg,#fffdf9,#f5e7e0);
  --sn-crystal-card:linear-gradient(145deg,#fffdf9,#f9ede8);
  --sn-crystal-dense:linear-gradient(145deg,#fffefa,#fff8f3);
  --sn-crystal-blur:none;--sn-crystal-blur-small:none;
 }
}
@media(prefers-reduced-motion:reduce){
 body:not(.welcome-mode) #site-shell .service-tile,
 body:not(.welcome-mode) .overlay.open .dialog :is(.signature-shortcut,.actionable-record,.sn-collection){
  transition:none!important;transform:none!important;
 }
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
 body:not(.welcome-mode){
  --sn-crystal-shell:linear-gradient(145deg,#fffdf8,#f8e5dd);
  --sn-crystal-card:linear-gradient(145deg,#fffdf9,#f9eae3);
  --sn-crystal-dense:linear-gradient(145deg,#fffefa,#fff8f3);
 }
}


/* 2026-10-15 mobile visual QA — align the Full Salon hierarchy with the
   dimensional Welcome buttons while retaining approved full-size branding.
   The old glass layers were almost opaque when multiplied together, so blur
   and relief were practically invisible on the actual Samsung screenshot. */
body:not(.welcome-mode) #site-shell .hero{
  /* A readable, translucent pearlescent sheet above the existing orchid marble. */
  background-color:rgba(253,239,238,.28)!important;
  background-image:
    linear-gradient(125deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.38) 12%,transparent 31%),
    radial-gradient(ellipse at 92% 4%,rgba(255,249,238,.92),transparent 48%),
    linear-gradient(156deg,rgba(255,254,251,.69),rgba(255,239,237,.48) 57%,rgba(244,198,206,.65))!important;
  border:1.5px solid rgba(255,255,255,.92)!important;
  outline:1px solid rgba(175,105,97,.62);
  outline-offset:-4px;
  box-shadow:
    inset 0 3px 2px rgba(255,255,255,.98),
    inset 2px 0 1px rgba(255,255,255,.58),
    inset 0 -7px 17px rgba(146,66,87,.15),
    0 4px 0 rgba(174,108,91,.49),
    0 16px 28px rgba(107,38,65,.25),
    0 34px 58px rgba(101,45,65,.12)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
}
/* Keep real text separate from the ornamental reflection layer. */
body:not(.welcome-mode) #site-shell .hero :is(h1,p,.hero-eyebrow){
  position:relative;
  text-shadow:0 1px 0 rgba(255,253,247,.86);
}
body:not(.welcome-mode) #site-shell .service-tile{
  background-color:rgba(255,248,243,.46)!important;
  background-image:
    linear-gradient(126deg,rgba(255,255,255,.83),rgba(255,255,255,.14) 38%,transparent 55%),
    linear-gradient(154deg,rgba(255,251,247,.78),rgba(255,227,230,.54),rgba(248,198,202,.75))!important;
  border-color:rgba(209,151,120,.82)!important;
}
/* Preserve legible operational glass; add the stronger illuminated rim only
   to large marketing panels and existing interactive crystal navigation. */
body:not(.welcome-mode) #signature-app-navigation{
  border-color:rgba(255,243,231,.83)!important;
  outline:1px solid rgba(170,97,100,.30);
  outline-offset:-3px;
}
@media(max-width:600px){
  /* Preserve the approved full-size brand dimensions; reduce only unused
     container padding and hero whitespace. */
  body:not(.welcome-mode) #site-shell .site-header{
    padding:10px 11px 12px!important;
    gap:8px!important;
  }
  body:not(.welcome-mode) #site-shell .site-nav{
    gap:6px!important;
  }
  body:not(.welcome-mode) #site-shell .hero{
    padding:22px 19px 27px!important;
    gap:24px!important;
    margin-top:14px!important;
    margin-inline:10px!important;
    border-radius:24px!important;
    -webkit-backdrop-filter:blur(10px) saturate(125%);
    backdrop-filter:blur(10px) saturate(125%);
  }
  body:not(.welcome-mode) #site-shell .hero h1{
    font-size:clamp(43px,11.7vw,59px)!important;
    line-height:1.07!important;
    margin:12px 0 17px!important;
  }
  body:not(.welcome-mode) #site-shell .hero p{
    line-height:1.62!important;
  }
  body:not(.welcome-mode) #site-shell .hero-actions{
    margin:20px 0 16px!important;
    gap:10px!important;
  }
  body:not(.welcome-mode) #site-shell .service-tile{
    -webkit-backdrop-filter:blur(6px) saturate(118%);
    backdrop-filter:blur(6px) saturate(118%);
  }
}
@media(prefers-reduced-transparency:reduce), (prefers-contrast:more){
  body:not(.welcome-mode) #site-shell :is(.hero,.service-tile){
    background-color:#fff7f0!important;
    background-image:linear-gradient(155deg,#fffdfb,#f8e5e1)!important;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  body:not(.welcome-mode) #site-shell :is(.hero,.service-tile){
    background-color:#fff7f0!important;
    background-image:linear-gradient(155deg,#fffdfb,#f8e5e1)!important;
  }
}


/* ---- Legacy compatibility: welcome-interactive-polish.css ---- */
/* Signature Nails welcome: interactive glass details from the luxury mobile reference.
   Existing approved artwork, live actions, routes and launch checks remain intact. */
body.welcome-mode .sn-welcome-corner-actions{
  position:absolute;z-index:25;top:clamp(12px,2.1vw,23px);left:clamp(12px,2.4vw,24px);
  right:clamp(12px,2.4vw,24px);display:flex;align-items:flex-start;
  justify-content:space-between;pointer-events:none;
}
body:not(.welcome-mode) .sn-welcome-corner-actions{display:none!important}
body.welcome-mode .sn-corner-menu{position:relative;pointer-events:auto}
body.welcome-mode .sn-corner-control{
  box-sizing:border-box;display:grid;place-items:center;list-style:none;
  width:clamp(45px,10vw,90px);height:clamp(45px,10vw,90px);
  padding:0;margin:0;border:2px solid rgba(255,245,240,.95);border-radius:50%;
  background:linear-gradient(152deg,rgba(255,255,255,.86),rgba(255,228,220,.75) 44%,rgba(247,187,177,.67));
  box-shadow:inset 0 2px 6px #fff, inset 0 -4px 8px #a84d4c30,
    0 0 0 1px #c7836877,0 7px 18px #6e1b3555,0 1px 8px #fff9;
  color:#760e32;backdrop-filter:blur(13px) saturate(150%);
  -webkit-backdrop-filter:blur(13px) saturate(150%);
  cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;
}
body.welcome-mode .sn-corner-menu>summary::-webkit-details-marker{display:none}
body.welcome-mode .sn-corner-control svg{
  display:block;width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
}
body.welcome-mode .sn-corner-control::before{
  content:"";position:absolute;top:9%;left:14%;right:14%;height:26%;
  background:linear-gradient(#fff9,transparent);border-radius:100%;
  pointer-events:none;
}
body.welcome-mode .sn-corner-updates{position:relative}
body.welcome-mode .sn-corner-updates::after{
  content:"";position:absolute;right:8%;top:9%;width:10px;height:10px;
  border:1px solid #ffe6ce;border-radius:45% 55% 42% 58%;
  background:linear-gradient(135deg,#ffb4dc,#ca1356 70%);
  box-shadow:0 0 0 2px #9d3b5290,0 0 9px #f75d9b;
  transform:rotate(45deg);pointer-events:none;
}
body.welcome-mode .sn-corner-menu-panel{
  position:absolute;left:0;top:calc(100% + 10px);
  width:clamp(208px,45vw,285px);box-sizing:border-box;
  padding:12px;display:grid;gap:6px;border:1px solid #fffbf4;
  border-radius:23px;background:linear-gradient(145deg,#fffaf5f5,#f4d3d9f0);
  box-shadow:0 0 0 2px #b96d61bb,0 20px 35px #57233b7a,inset 0 2px 14px #fff;
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
}
body.welcome-mode .sn-menu-entry{
  min-height:44px;box-sizing:border-box;padding:10px 13px;text-align:left;
  border:1px solid #ecc8ba;border-radius:14px;
  color:#651334;background:linear-gradient(140deg,#fffdfaee,#f5d8d9df);
  box-shadow:inset 0 2px 3px #fff,0 3px 8px #6b20311c;
  font:700 clamp(13px,2.5vw,16px)/1.25 Georgia,serif;cursor:pointer;
}
body.welcome-mode .sn-menu-entry:hover{background:#fff7f1}
body.welcome-mode .sn-corner-control:focus-visible,
body.welcome-mode .sn-menu-entry:focus-visible{
  outline:3px solid #42102a;outline-offset:3px;
}
body.welcome-mode .sn-welcome-actions::after{
  content:"";position:absolute;inset:3% 6%;z-index:-1;pointer-events:none;
  border-radius:clamp(18px,4.5vw,42px);border:1px solid #fffaf0aa;
  box-shadow:inset 0 2px 13px #fff7,0 0 16px #f7aeab36;
}
body.welcome-mode .sn-live-button:hover{filter:brightness(1.07)}
body.welcome-mode .sn-live-button:focus-visible{outline:3px solid #401020!important;outline-offset:3px!important}
body.welcome-mode .sn-footer-link{
  flex-direction:column;gap:3px;line-height:1.15!important;
}
body.welcome-mode .sn-footer-icon{
  display:block;width:clamp(17px,3.5vw,34px);height:clamp(17px,3.5vw,34px);
  fill:none;stroke:currentColor;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 1px #fff9);
}
body.welcome-mode .sn-footer-links{margin-top:7%!important}
@media(max-width:359px){
 body.welcome-mode .sn-welcome-corner-actions{top:9px;left:9px;right:9px}
 body.welcome-mode .sn-corner-control{width:44px;height:44px}
 body.welcome-mode .sn-corner-menu-panel{width:204px}
}
@media(prefers-reduced-motion:no-preference){
 body.welcome-mode .sn-corner-control,body.welcome-mode .sn-menu-entry{
   transition:box-shadow .2s ease,filter .2s ease,transform .2s ease;
 }
 body.welcome-mode .sn-corner-control:hover{transform:translateY(-2px);filter:brightness(1.08)}
}
@media(prefers-reduced-motion:reduce){
 body.welcome-mode .sn-corner-control,body.welcome-mode .sn-menu-entry{transition:none!important}
}


/* ---- Canonical application components and responsive shell ---- */

/* ================================================================
 SIGNATURE NAILS — WELCOME-DERIVED APPLICATION SYSTEM
 Approved welcome image, dimensions and functional controls are preserved.
 This is the canonical final material/layout layer for every internal route.
 Two header densities: full brand for the public salon; compact intact brand
 for functional owner, staff, customer and guest screens.
 ================================================================ */
body:not(.welcome-mode){
  --sn-ui-wine:#750f35;
  --sn-ui-dark:#4c0827;
  --sn-ui-gold:#c88964;
  --sn-ui-marble:#fff8f1;
  --sn-ui-pink:#f9e5df;
  --sn-ui-ink:#512639;
  --sn-ui-muted:#694556;
  --sn-ui-glass:linear-gradient(140deg,rgba(255,255,255,.96),rgba(255,237,233,.91) 54%,rgba(244,208,203,.93));
  --sn-ui-rim:rgba(194,130,98,.78);
  --sn-ui-relief:inset 0 2px 2px rgba(255,255,255,.98),inset 0 -3px 7px rgba(117,34,61,.12),0 3px 0 rgba(151,81,73,.24),0 10px 24px rgba(85,22,49,.15);
  --sn-ui-primary:linear-gradient(177deg,#c34b76 0%,#951c4e 34%,#620a32 73%,#760f3d 100%);
  color:var(--sn-ui-ink);
}
/* A salon landing screen retains a generous complete brand asset. */
body:not(.welcome-mode) #site-shell .site-header .brand{
  width:clamp(165px,36vw,240px)!important;
  margin-inline:auto!important;
}
body:not(.welcome-mode) #site-shell .site-header{
  padding:clamp(10px,2.4vw,22px) clamp(12px,3vw,28px)!important;
  gap:11px!important;
}
body:not(.welcome-mode) #site-shell .site-nav{
  gap:clamp(6px,1.2vw,12px)!important;
  max-width:1050px!important;
  margin-inline:auto!important;
}
body:not(.welcome-mode) #site-shell :is(.site-section,.hero){
  max-width:1160px!important;
  margin-inline:auto!important;
}
body:not(.welcome-mode) #site-shell .site-section{
  padding-inline:clamp(18px,4vw,48px)!important;
}
/* App navigation: compact intact five-part logo, page identity, usable controls.
   Only route navigation is affected. No changes to the approved Welcome image. */
body:not(.welcome-mode) #overlay.app-screen .dialog{
  box-sizing:border-box;
  padding:clamp(14px,2.5vw,28px) clamp(14px,3vw,36px) calc(30px + env(safe-area-inset-bottom))!important;
  background-attachment:scroll!important;
}
body:not(.welcome-mode) #signature-app-navigation{
  position:relative!important;
  top:auto!important;left:auto!important;right:auto!important;
  display:block;
  box-sizing:border-box!important;
  width:100%!important;max-width:1100px!important;
  margin:0 auto clamp(14px,2.1vw,22px)!important;
  padding:clamp(9px,1.5vw,15px) clamp(9px,2vw,16px) 10px!important;
  border-radius:clamp(17px,2.2vw,25px)!important;
  border:1.5px solid rgba(192,129,98,.85)!important;
  background:var(--sn-ui-glass)!important;
  box-shadow:var(--sn-ui-relief)!important;
  outline:1px solid rgba(255,255,255,.70);
  outline-offset:-4px;
  overflow:visible!important;
}
body:not(.welcome-mode) #signature-app-navigation[hidden]{display:none!important}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-top{
  display:grid!important;
  grid-template-columns:minmax(0,78px) minmax(0,1fr) minmax(98px,135px)!important;
  align-items:center!important;gap:clamp(6px,1.8vw,14px)!important;
  min-width:0!important;padding:0!important;
}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-identity{
  display:grid!important;
  grid-template-columns:clamp(72px,8vw,105px) minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  gap:3px clamp(9px,1.3vw,17px)!important;
  align-items:center!important;justify-content:center!important;
  min-width:0!important;width:100%!important;
  margin:0!important;padding:0!important;
  text-align:left!important;
}
body:not(.welcome-mode) #signature-app-navigation .sn-master-brand--nav{
  display:block!important;
  grid-column:1!important;grid-row:1 / span 2!important;
  width:clamp(72px,8vw,105px)!important;
  height:auto!important;aspect-ratio:864 / 856!important;
  max-width:100%!important;
  object-fit:contain!important;object-position:center!important;
  align-self:center!important;
  margin:0!important;padding:0!important;
  border:0!important;filter:none!important;transform:none!important;
}
body:not(.welcome-mode) #signature-app-navigation #signature-role-label{
  grid-column:2;grid-row:1;align-self:end;
  display:block!important;
  width:100%!important;min-width:0!important;
  margin:0!important;font:700 10px/1.3 "Segoe UI",Arial,sans-serif!important;
  letter-spacing:.16em!important;color:#90634f!important;
  text-align:left!important;text-transform:uppercase;
}
body:not(.welcome-mode) #signature-app-navigation #signature-current-title{
  grid-column:2;grid-row:2;align-self:start;
  display:block!important;width:100%!important;
  min-width:0!important;margin:0!important;
  font:500 clamp(17px,2.1vw,25px)/1.12 Georgia,serif!important;
  color:var(--sn-ui-wine)!important;
  text-align:left!important;white-space:normal!important;
  overflow-wrap:break-word!important;
  text-shadow:0 1px 0 #fff;
}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-back{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  box-sizing:border-box!important;
  width:auto!important;max-width:100%!important;
  min-width:0!important;min-height:44px!important;
  padding:8px 9px!important;margin:0!important;
  justify-self:stretch!important;white-space:normal!important;
  text-align:center!important;
}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-back[hidden]{display:none!important}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-utils{
  display:flex!important;flex-direction:column!important;
  gap:5px!important;align-items:stretch!important;
  justify-content:center!important;flex-wrap:nowrap!important;
  min-width:0!important;width:100%!important;
}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-utils button{
  box-sizing:border-box!important;width:100%!important;
  min-height:36px!important;padding:5px 6px!important;
  margin:0!important;font-size:clamp(11px,1.25vw,13px)!important;
  line-height:1.15!important;
  border-radius:14px!important;
  white-space:normal!important;
}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-tabs{
  display:flex!important;flex-wrap:nowrap!important;
  width:100%!important;max-width:100%!important;
  min-width:0!important;gap:7px!important;
  margin:10px 0 0!important;padding:4px 1px 5px!important;
  overflow-x:auto!important;overflow-y:hidden!important;
  scroll-snap-type:x proximity!important;
  scroll-padding-inline:6px;
  scrollbar-width:thin!important;
  scrollbar-color:#cb9b88 transparent;
}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-tabs button{
  box-sizing:border-box!important;display:inline-flex!important;
  align-items:center!important;justify-content:center!important;
  flex:1 0 auto!important;
  width:auto!important;min-width:max-content!important;
  max-width:unset!important;min-height:44px!important;
  padding:9px clamp(11px,1.65vw,18px)!important;
  border-radius:999px!important;
  font-size:clamp(11px,1.35vw,13px)!important;
  line-height:1.2!important;white-space:nowrap!important;
  scroll-snap-align:start!important;
}
/* Keep the actual screen heading and its controls visible early in the viewport. */
body:not(.welcome-mode) #overlay.app-screen .dialog #content{
  position:relative;z-index:1;
  box-sizing:border-box!important;
  min-width:0!important;max-width:1100px!important;
  margin-inline:auto!important;
  padding-top:0!important;
}
body:not(.welcome-mode) #overlay.app-screen .dialog #content > :is(h2,.ui-toolbar,.section-kicker):first-child{
  margin-top:0!important;
}
body:not(.welcome-mode) #overlay.app-screen .dialog .sn-luxury-screen-art,
body:not(.welcome-mode) #overlay.app-screen .dialog::after{
  opacity:.16!important;pointer-events:none!important;
}
/* Materials: one family of pale pearlescent panels, richer wine actions. */
body:not(.welcome-mode) :is(
 #site-shell .service-tile,#site-shell .hero,#site-shell .sn-quick-actions,
 #overlay.app-screen .dialog .ui-card,#overlay.app-screen .dialog .ui-stat,
 #overlay.app-screen .dialog .signature-shortcut,
 #overlay.app-screen .dialog .signature-customer-grid article,
 #overlay.app-screen .dialog .actionable-record,
 #overlay.app-screen .dialog .actionable-detail,
 #overlay.app-screen .dialog .ops-section,
 #overlay.app-screen .dialog .ops-appointment,
 #overlay.app-screen .dialog .ops-request,
 #overlay.app-screen .dialog .readiness-item,
 #overlay.app-screen .dialog .demo-check-item,
 #overlay.app-screen .dialog .sn-collection,
 #overlay.app-screen .dialog .sn-unassigned-services,
 #overlay.app-screen .dialog .booking-pane,
 #overlay.app-screen .dialog .booking-summary
){
  border:1.5px solid var(--sn-ui-rim)!important;
  border-radius:clamp(16px,2.4vw,25px)!important;
  background-color:rgba(255,248,245,.91)!important;
  background-image:var(--sn-ui-glass)!important;
  box-shadow:var(--sn-ui-relief)!important;
  color:var(--sn-ui-ink)!important;
}
body:not(.welcome-mode) #overlay.app-screen .dialog .booking-pane{
  padding:clamp(15px,2.2vw,25px)!important;
  margin-block:18px!important;
}
body:not(.welcome-mode) #overlay.app-screen .dialog :is(.ui-card,.ui-stat,.ops-request,.ops-appointment,.signature-shortcut,.sn-collection){
  padding:clamp(14px,2vw,23px)!important;
}
body:not(.welcome-mode) #overlay.app-screen .dialog :is(.ui-stat strong,.signature-shortcut strong,.ui-card h3,.sn-collection h3){
  color:var(--sn-ui-wine)!important;
}
body:not(.welcome-mode) #overlay.app-screen .dialog :is(p,.ui-muted,.actionable-meta){
  line-height:1.5;color:var(--sn-ui-muted);
}
body:not(.welcome-mode) #overlay.app-screen .dialog .signature-shortcut{
  min-height:155px!important;
  text-align:left!important;
}
/* Important actions match the glossy dark wine gemstone on Welcome. */
body:not(.welcome-mode) :is(
 #site-shell .primary-action,#site-shell .nav-accent,
 #overlay.app-screen .dialog button.primary,
 #overlay.app-screen .dialog button.primary-action,
 #overlay.app-screen .dialog .site-button.primary-action,
 #overlay.app-screen .dialog .signature-nav-tabs button.active,
 #overlay.app-screen .dialog .signature-nav-tabs button[aria-current="page"],
 #overlay.app-screen .dialog .actionable-filterbar button.selected,
 #overlay.app-screen .dialog .ops-tabs button.active
){
  color:#fffaf8!important;
  border:1.5px solid #d9a784!important;
  background:var(--sn-ui-primary)!important;
  box-shadow:inset 0 2px 3px #ffdfd266,inset 0 -4px 6px #32091b77,0 3px 0 #924d46,0 7px 14px #73304d4e!important;
  text-shadow:0 1px 2px #34091e!important;
}
body:not(.welcome-mode) :is(
 #site-shell .site-button:not(.primary-action),
 #site-shell .site-nav button:not(.nav-accent),
 #overlay.app-screen .dialog .site-button:not(.primary-action),
 #overlay.app-screen .dialog .signature-nav-back,
 #overlay.app-screen .dialog .signature-nav-utils button,
 #overlay.app-screen .dialog .signature-nav-tabs button:not(.active),
 #overlay.app-screen .dialog .booking-actions button:not(.primary)
){
  color:var(--sn-ui-wine)!important;
  border:1.5px solid #c58a70!important;
  background:linear-gradient(155deg,#fffefa,#fff0ec 60%,#f6d9d6)!important;
  box-shadow:inset 0 2px 3px #fff,inset 0 -3px 5px #a35c5930,0 2px 0 #b77a69,0 5px 12px #8c3b4a31!important;
  text-shadow:none!important;
}
body:not(.welcome-mode) #overlay.app-screen .dialog :is(input:not([type=checkbox]):not([type=radio]),select,textarea){
  box-sizing:border-box!important;
  min-height:46px!important;max-width:100%!important;
  padding:10px 13px!important;
  border:1.5px solid #b98470!important;
  border-radius:13px!important;
  background:linear-gradient(180deg,#fffefa,#fff8f4)!important;
  color:#452533!important;
  box-shadow:inset 0 2px 5px #a66b4c11,0 1px 0 #fff!important;
}
body:not(.welcome-mode) #overlay.app-screen .dialog label{
  line-height:1.35;overflow-wrap:anywhere;
}
body:not(.welcome-mode) #overlay.app-screen .dialog :is(button,a,input,select,textarea,[tabindex]):focus-visible,
body:not(.welcome-mode) #site-shell :is(button,a):focus-visible{
  outline:3px solid #6d163d!important;
  outline-offset:3px!important;
}
/* Screen-specific hierarchy and workable information density. */
body:not(.welcome-mode) #overlay.app-screen .dialog .signature-customer-home{
  max-width:1050px!important;margin:4px auto!important;
}
body:not(.welcome-mode) #overlay.app-screen .dialog .signature-customer-grid{
  margin:16px 0 18px!important;gap:clamp(12px,2vw,18px)!important;
}
body:not(.welcome-mode) #overlay.app-screen .dialog .ui-grid{gap:clamp(11px,2vw,17px)!important}
body:not(.welcome-mode) #overlay.app-screen .dialog .calendar-controls{
  gap:clamp(9px,1.8vw,17px)!important;
}
body:not(.welcome-mode) #overlay.app-screen .dialog :is(.calendar-day,.calendar-cell,.item,.sn-collection-service,.ui-row){
  background-color:rgba(255,251,247,.93)!important;
}
body:not(.welcome-mode) #overlay.app-screen .dialog .booking-progress{
  gap:7px!important;
  margin:15px auto!important;
}
body:not(.welcome-mode) #overlay.app-screen .dialog .booking-progress > div{
  min-width:0;
  border-radius:13px!important;
  background:linear-gradient(158deg,#fffdfa,#f7e1da)!important;
  border:1px solid #d2a58c!important;
  color:#633447!important;
}
body:not(.welcome-mode) #overlay.app-screen .dialog .booking-progress > div.current{
  background:var(--sn-ui-primary)!important;
  color:#fff!important;border-color:#d9a784!important;
  box-shadow:0 4px 12px #6f294b48!important;
}
body:not(.welcome-mode) #overlay.app-screen .dialog .ui-chip{
  box-shadow:none!important;
  text-shadow:none!important;
}
@media(max-width:700px){
 body:not(.welcome-mode) #overlay.app-screen .dialog{
   padding:12px 12px calc(25px + env(safe-area-inset-bottom))!important;
 }
 body:not(.welcome-mode) #signature-app-navigation{
   margin-bottom:13px!important;padding:8px 8px 9px!important;
   border-radius:17px!important;
 }
 body:not(.welcome-mode) #signature-app-navigation .signature-nav-top{
   grid-template-columns:minmax(0,55px) minmax(0,1fr) minmax(70px,78px)!important;
   gap:5px!important;
 }
 body:not(.welcome-mode) #signature-app-navigation .signature-nav-identity{
   grid-template-columns:clamp(56px,17vw,70px) minmax(0,1fr)!important;
   grid-template-rows:auto auto!important;
   gap:2px 6px!important;
 }
 body:not(.welcome-mode) #signature-app-navigation .sn-master-brand--nav{
   width:clamp(56px,17vw,70px)!important;height:auto!important;
 }
 body:not(.welcome-mode) #signature-app-navigation #signature-role-label{
   font-size:9px!important;line-height:1.2!important;
   letter-spacing:.08em!important;
 }
 body:not(.welcome-mode) #signature-app-navigation #signature-current-title{
   font-size:clamp(13px,3.8vw,17px)!important;line-height:1.12!important;
 }
 body:not(.welcome-mode) #signature-app-navigation .signature-nav-back{
   min-height:44px!important;font-size:11px!important;
   padding:7px 3px!important;
 }
 body:not(.welcome-mode) #signature-app-navigation .signature-nav-utils button{
   width:100%!important;min-height:36px!important;
   padding:5px 2px!important;font-size:10px!important;
 }
 body:not(.welcome-mode) #signature-app-navigation .signature-nav-tabs{
   display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
   flex-wrap:unset!important;overflow:visible!important;
   overflow-x:clip!important;overflow-y:visible!important;
   width:100%!important;gap:5px!important;
   margin-top:8px!important;padding:2px 1px 4px!important;
 }
 body:not(.welcome-mode) #signature-app-navigation .signature-nav-tabs button{
   display:flex!important;flex:initial!important;
   width:100%!important;min-width:0!important;max-width:100%!important;
   min-height:44px!important;
   padding:8px 4px!important;
   font-size:clamp(10px,2.8vw,12px)!important;
   white-space:normal!important;overflow-wrap:anywhere!important;
 }
 body:not(.welcome-mode) #overlay.app-screen .dialog :is(.ui-toolbar,.ops-section-heading,.ui-row){gap:10px}
 body:not(.welcome-mode) #overlay.app-screen .dialog .signature-customer-grid{
   grid-template-columns:1fr!important;gap:12px!important;
 }
 body:not(.welcome-mode) #overlay.app-screen .dialog .signature-shortcut{
   min-height:0!important;padding:17px!important;
 }
 body:not(.welcome-mode) #overlay.app-screen .dialog .signature-customer-home>h2{
   font-size:clamp(26px,7vw,36px)!important;
 }
 body:not(.welcome-mode) #overlay.app-screen .dialog .booking-progress > div{
   font-size:clamp(10px,2.9vw,12px)!important;
   padding:9px 4px!important;
 }
 body:not(.welcome-mode) #site-shell .site-header .brand{
   width:clamp(155px,39vw,205px)!important;
 }
 body:not(.welcome-mode) #site-shell .hero{
   padding:22px 17px 25px!important;gap:14px!important;
 }
 body:not(.welcome-mode) #site-shell .hero h1{
   font-size:clamp(37px,10vw,52px)!important;
 }
}
@media(max-width:359px){
 body:not(.welcome-mode) #signature-app-navigation .signature-nav-top{
  grid-template-columns:minmax(0,49px) minmax(0,1fr) minmax(66px,73px)!important;
 }
 body:not(.welcome-mode) #signature-app-navigation .signature-nav-identity{
  grid-template-columns:54px minmax(0,1fr)!important;
 }
 body:not(.welcome-mode) #signature-app-navigation .sn-master-brand--nav{
  width:54px!important;
 }
}
/* Operational screens are deliberately quieter for sustained readability. */
@media(prefers-contrast:more),(prefers-reduced-transparency:reduce){
 body:not(.welcome-mode) #overlay.app-screen .dialog :is(.ui-card,.ui-stat,.ops-section,.sn-collection,.booking-pane){
  background:#fffaf7!important;box-shadow:0 0 0 1px #8b4e55!important;
 }
}
@media(prefers-reduced-motion:reduce){
 body:not(.welcome-mode) :is(#signature-app-navigation button,#site-shell button,#overlay.app-screen button){
  animation:none!important;transition:none!important;transform:none!important;
 }
}


/* ============================================================
   2026-10-16 — MOBILE-FIRST SIGNATURE INTERIOR (APP BAR V2)
   Replaces the six-row navigation shown in customer screenshot with
   one compact premium bar and intentional expandable navigation.
   The welcome landing page is not altered.
   ============================================================ */
body:not(.welcome-mode) #overlay.app-screen .dialog{
  background-color:#fff6f0!important;
  background-image:
    radial-gradient(ellipse at 10% 0%,rgba(246,195,202,.48),transparent 36%),
    radial-gradient(ellipse at 100% 90%,rgba(227,178,157,.30),transparent 42%),
    linear-gradient(125deg,transparent 0 46%,rgba(187,115,98,.075) 46.3%,transparent 47%),
    linear-gradient(160deg,#fffaf6 0%,#fbece8 56%,#fff8f2 100%)!important;
}
body:not(.welcome-mode) #signature-app-navigation{
  position:relative!important;
  isolation:isolate;
  max-width:1100px!important;
  padding:10px 13px!important;
  margin-bottom:20px!important;
  background:linear-gradient(140deg,rgba(255,255,255,.98),rgba(255,239,238,.96) 58%,rgba(246,220,215,.96))!important;
  border:1px solid rgba(200,140,106,.70)!important;
  border-radius:20px!important;
  outline:1px solid rgba(255,255,255,.74);
  outline-offset:-4px;
  box-shadow:inset 0 2px 2px #fff,0 3px 0 rgba(184,115,91,.21),0 11px 28px rgba(104,44,64,.13)!important;
  backdrop-filter:blur(16px) saturate(110%);
  -webkit-backdrop-filter:blur(16px) saturate(110%);
}
body:not(.welcome-mode) #signature-app-navigation[hidden]{display:none!important}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-top{
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr) 44px!important;
  align-items:center!important;
  gap:11px!important;
  padding:0!important;
}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-identity{
  display:grid!important;
  grid-template-columns:clamp(62px,6.4vw,78px) minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  column-gap:12px!important;
  row-gap:3px!important;
  justify-content:start!important;align-items:center!important;
  margin:0!important;padding:0!important;
  min-width:0!important;
  text-align:left!important;
}
body:not(.welcome-mode) #signature-app-navigation .sn-master-brand--nav{
  grid-column:1!important;grid-row:1 / 3!important;
  width:clamp(62px,6.4vw,78px)!important;
  height:auto!important;
  max-width:100%!important;
  object-fit:contain!important;object-position:center!important;
  margin:0!important;padding:0!important;transform:none!important;filter:none!important;
}
body:not(.welcome-mode) #signature-app-navigation #signature-role-label{
  display:block!important;grid-column:2!important;grid-row:1!important;
  color:#977060!important;
  font:700 10px/1.25 "Segoe UI",Arial,sans-serif!important;
  letter-spacing:.11em!important;
  align-self:end!important;
}
body:not(.welcome-mode) #signature-app-navigation #signature-current-title{
  display:block!important;grid-column:2!important;grid-row:2!important;
  text-align:left!important;align-self:start!important;
  font:500 clamp(18px,2.2vw,23px)/1.15 Georgia,"Times New Roman",serif!important;
  color:#741239!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  letter-spacing:-.02em!important;
}
body:not(.welcome-mode) #signature-app-navigation :is(.signature-nav-back,.sn-nav-menu-toggle){
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;justify-content:center!important;
  min-height:44px!important;height:44px!important;
  min-width:44px!important;width:44px!important;
  padding:0!important;margin:0!important;
  background:linear-gradient(140deg,#fffefa,#ffefea 63%,#f4d9d5)!important;
  border:1.5px solid #c18c74!important;
  border-radius:14px!important;
  box-shadow:inset 0 2px 2px #fff,0 3px 0 #b78269,0 6px 12px #79384b25!important;
  color:#7a153c!important;
  font:500 34px/1 Georgia,serif!important;
  cursor:pointer!important;
}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-back[hidden]{display:none!important}
body:not(.welcome-mode) #signature-app-navigation .sn-nav-menu-toggle svg{
  width:21px;height:21px;display:block;
}
body:not(.welcome-mode) #signature-app-navigation :is(.signature-nav-back,.sn-nav-menu-toggle):focus-visible{
  outline:3px solid #601333!important;outline-offset:3px!important;
}
body:not(.welcome-mode) #signature-app-navigation .sn-nav-panel{
  position:relative!important;
  margin-top:9px!important;
}
body:not(.welcome-mode) #signature-app-navigation .sn-nav-panel .signature-nav-tabs{
  display:flex!important;flex-wrap:wrap!important;gap:7px!important;
  overflow:visible!important;width:100%!important;
  margin:0!important;padding:5px 1px!important;
  scroll-snap-type:none!important;
}
body:not(.welcome-mode) #signature-app-navigation .sn-nav-panel .signature-nav-tabs button{
  flex:1 1 auto!important;min-width:100px!important;
  padding:9px 11px!important;width:auto!important;
  white-space:normal!important;min-height:42px!important;
  font-size:12px!important;
}
body:not(.welcome-mode) #signature-app-navigation .sn-nav-panel .signature-nav-utils{
  display:none!important;
}
body:not(.welcome-mode) #signature-app-navigation.sn-nav-menu-open .sn-nav-panel .signature-nav-utils{
  position:absolute!important;z-index:22!important;
  right:0!important;top:calc(100% + 8px)!important;
  display:flex!important;flex-direction:column!important;
  min-width:190px!important;width:auto!important;
  padding:12px!important;gap:8px!important;
  background:linear-gradient(145deg,#fffcf9,#f6dfe0)!important;
  border:1.5px solid #c18a72!important;
  border-radius:17px!important;
  box-shadow:0 17px 30px #571f4060,inset 0 2px 1px #fff!important;
}
body:not(.welcome-mode) #signature-app-navigation.sn-nav-menu-open .sn-nav-menu-toggle{
  background:linear-gradient(#a93c69,#741239)!important;
  color:white!important;
}
body:not(.welcome-mode) #signature-app-navigation .signature-nav-utils button{
  min-height:44px!important;padding:10px 14px!important;
  font-size:13px!important;
}
body:not(.welcome-mode) #overlay.app-screen .dialog #content{
  position:relative!important;
  z-index:1!important;
}
/* The booking-closed state is useful content, not an enormous blank modal. */
body:not(.welcome-mode) #overlay.app-screen .dialog .sn-booking-unavailable{
  position:relative;
  box-sizing:border-box;
  width:min(100%,630px);
  margin:clamp(14px,4vh,45px) auto!important;
  padding:clamp(27px,5vw,49px) clamp(22px,5vw,44px)!important;
  text-align:center;
  border:1.5px solid rgba(201,140,104,.85)!important;
  border-radius:clamp(24px,4vw,34px)!important;
  background:linear-gradient(143deg,rgba(255,255,255,.99),rgba(255,245,241,.96) 52%,rgba(246,218,216,.94))!important;
  box-shadow:inset 0 3px 2px #fff,inset 0 -5px 13px #a74c6330,0 4px 0 #b8756191,0 21px 45px #78294437!important;
}
body:not(.welcome-mode) .sn-booking-unavailable .sn-booking-emblem{
  display:grid;place-items:center;
  width:76px;height:76px;margin:0 auto 20px;
  border-radius:26px;
  color:#fff8ed;
  background:linear-gradient(130deg,#d95791,#9c154c 55%,#650c35 87%);
  border:2px solid #ecbb9a;
  box-shadow:inset 0 3px 3px #ffe9e588,inset 0 -6px 10px #4a092c80,0 3px 0 #8e514c,0 11px 22px #68204450;
  font:normal 46px Georgia,serif;
  transform:rotate(-5deg);
}
body:not(.welcome-mode) .sn-booking-unavailable .sn-booking-emblem span{
  transform:rotate(5deg);
}
body:not(.welcome-mode) .sn-booking-unavailable .sn-booking-eyebrow{
  margin:0 0 12px!important;
  color:#8d4160!important;
  letter-spacing:.15em;font:700 11px/1.5 "Segoe UI",Arial,sans-serif;
  text-transform:uppercase;
}
body:not(.welcome-mode) .sn-booking-unavailable #dialog-title{
  margin:0 0 14px!important;
  font:500 clamp(31px,5.1vw,44px)/1.12 Georgia,serif!important;
  color:#71133c!important;
  letter-spacing:-.025em!important;
}
body:not(.welcome-mode) .sn-booking-unavailable .sn-booking-description{
  max-width:38ch;margin:0 auto 24px!important;
  color:#704f5a!important;
  font:400 clamp(15px,2vw,17px)/1.6 "Segoe UI",Arial,sans-serif!important;
}
body:not(.welcome-mode) .sn-booking-unavailable .sn-booking-cta{
  display:flex;align-items:center;justify-content:center;
  width:min(100%,340px)!important;
  min-height:54px!important;margin:0 auto!important;
  border:1.5px solid #d9a784!important;
  border-radius:999px!important;
  background:linear-gradient(174deg,#c14b79,#8f1649 48%,#5a0a2f)!important;
  color:#fff9f6!important;
  box-shadow:inset 0 2px 4px #ffe5e95b,inset 0 -5px 8px #31052270,0 3px 0 #914943,0 10px 18px #7e2e4a4a!important;
  font:700 16px/1.25 "Segoe UI",Arial,sans-serif!important;
}
body:not(.welcome-mode) .sn-booking-unavailable .sn-booking-note{
  margin:19px auto 0!important;font:500 12px/1.4 "Segoe UI",Arial,sans-serif!important;
  color:#876d73!important;
}
@media(max-width:700px){
 body:not(.welcome-mode) #overlay.app-screen .dialog{
   padding:12px 13px calc(28px + env(safe-area-inset-bottom))!important;
 }
 body:not(.welcome-mode) #signature-app-navigation{
   margin-bottom:15px!important;
   padding:9px 10px!important;
   border-radius:18px!important;
 }
 body:not(.welcome-mode) #signature-app-navigation .signature-nav-top{
   grid-template-columns:44px minmax(0,1fr) 44px!important;gap:7px!important;
 }
 body:not(.welcome-mode) #signature-app-navigation .signature-nav-identity{
   grid-template-columns:clamp(58px,16vw,72px) minmax(0,1fr)!important;
   column-gap:7px!important;row-gap:3px!important;
 }
 body:not(.welcome-mode) #signature-app-navigation .sn-master-brand--nav{
   width:clamp(58px,16vw,72px)!important;
 }
 body:not(.welcome-mode) #signature-app-navigation #signature-current-title{
   font-size:clamp(15px,4vw,19px)!important;
   line-height:1.16!important;
 }
 body:not(.welcome-mode) #signature-app-navigation #signature-role-label{
   font-size:9px!important;
 }
 body:not(.welcome-mode) #signature-app-navigation .sn-nav-panel{
   display:none!important;
 }
 body:not(.welcome-mode) #signature-app-navigation.sn-nav-menu-open .sn-nav-panel{
   display:block!important;margin-top:12px!important;padding-top:10px!important;
   border-top:1px solid #d4a48e!important;
 }
 body:not(.welcome-mode) #signature-app-navigation.sn-nav-menu-open .sn-nav-panel .signature-nav-tabs{
   display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
   gap:8px!important;overflow:visible!important;
 }
 body:not(.welcome-mode) #signature-app-navigation.sn-nav-menu-open .sn-nav-panel .signature-nav-tabs button{
   width:100%!important;min-width:0!important;min-height:46px!important;
   padding:9px 7px!important;font-size:13px!important;
 }
 body:not(.welcome-mode) #signature-app-navigation.sn-nav-menu-open .sn-nav-panel .signature-nav-utils{
   display:grid!important;position:static!important;
   grid-template-columns:repeat(2,minmax(0,1fr))!important;
   width:100%!important;min-width:0!important;
   margin-top:9px!important;padding:9px 0 0!important;
   border:none!important;border-top:1px solid #e6c2b6!important;
   border-radius:0!important;background:transparent!important;box-shadow:none!important;
 }
 body:not(.welcome-mode) #signature-app-navigation.sn-nav-menu-open .signature-nav-utils button{
   width:100%!important;min-height:44px!important;
 }
 body:not(.welcome-mode) #overlay.app-screen .dialog .sn-booking-unavailable{
   margin:18px auto 24px!important;
   padding:30px 21px 35px!important;
   border-radius:26px!important;
 }
 body:not(.welcome-mode) .sn-booking-unavailable .sn-booking-emblem{
   width:69px;height:69px;margin-bottom:21px;
 }
 body:not(.welcome-mode) .sn-booking-unavailable #dialog-title{
   font-size:clamp(28px,8vw,36px)!important;
 }
}
/* Preserve accessible interaction across touch and keyboard layouts. */
@media(prefers-reduced-motion:reduce){
 body:not(.welcome-mode) #signature-app-navigation :is(button,svg){transition:none!important}
}