@import url('data:text/css,');

:root {
  --ink: #101820;
  --ink-2: #182631;
  --ink-3: #263844;
  --paper: #f4f2ed;
  --paper-2: #ece9e2;
  --card: #fff;
  --muted: #697780;
  --muted-2: #8b979e;
  --line: #e4e5e2;
  --aqua: #20a9b4;
  --aqua-dark: #087a86;
  --aqua-soft: #e2f5f5;
  --mint: #7bc8b5;
  --sand: #d6b98c;
  --sand-soft: #f5ead8;
  --plum: #745d79;
  --plum-soft: #f0e8f1;
  --rose: #ca7b83;
  --rose-soft: #f8e8e9;
  --green: #3e9b70;
  --green-soft: #e4f4eb;
  --orange: #d98a3d;
  --orange-soft: #fbefdf;
  --red: #bf575e;
  --red-soft: #f9e6e7;
  --shadow-sm: 0 5px 16px rgba(19, 28, 33, .06);
  --shadow-md: 0 15px 38px rgba(19, 28, 33, .10);
  --shadow-lg: 0 30px 80px rgba(8, 18, 24, .20);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --sidebar: 252px;
  --topbar: 82px;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.app-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  display: flex;
  flex-direction: column;
  padding: 22px 14px 14px;
  background:
    radial-gradient(circle at 15% 8%, rgba(32,169,180,.13), transparent 26%),
    linear-gradient(180deg, #111b22 0%, #0d151b 100%);
  color: #e8eef0;
  overflow-y: auto;
  z-index: 30;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 23px; }
.brand-mark, .public-logo {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(145deg, #29bcc6, #087884); color: white; box-shadow: 0 8px 18px rgba(32,169,180,.24);
  font-weight: 800; font-size: 20px; letter-spacing: -.06em;
}
.brand-mark span { transform: translateX(-1px); }
.brand-copy { display: flex; flex-direction: column; min-width: 0; }
.brand-copy strong { font-size: 17px; letter-spacing: -.02em; }
.brand-copy small { font-size: 10px; color: #8da0aa; text-transform: uppercase; letter-spacing: .09em; white-space: nowrap; }
.main-nav { display: flex; flex-direction: column; gap: 3px; }
.nav-item {
  width: 100%; min-height: 43px; display: flex; align-items: center; gap: 12px;
  border: 0; border-radius: 11px; padding: 0 12px; color: #9fb0b8; background: transparent;
  text-align: left; transition: .18s ease; position: relative;
}
.nav-item svg { width: 18px; height: 18px; }
.nav-item span { flex: 1; font-size: 13px; font-weight: 560; }
.nav-item em { min-width: 23px; height: 21px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: #23343e; color: #b8c8ce; font-size: 10px; font-style: normal; }
.nav-item:hover { color: white; background: rgba(255,255,255,.055); transform: translateX(2px); }
.nav-item.is-active { color: white; background: rgba(255,255,255,.09); box-shadow: inset 3px 0 var(--aqua); }
.nav-item.is-active svg { color: #59d1d8; }
.accent-nav { margin: 8px 0 7px; background: linear-gradient(100deg, rgba(32,169,180,.16), rgba(32,169,180,.04)); color: #c9f4f6; border: 1px solid rgba(66,203,212,.13); }
.sidebar-spacer { flex: 1; min-height: 24px; }
.capacity-card {
  display: grid; grid-template-columns: 36px 1fr 42px; align-items: center; gap: 9px;
  margin: 0 4px 10px; padding: 12px; border-radius: 14px; color: white;
  background: linear-gradient(145deg, rgba(32,169,180,.16), rgba(255,255,255,.055)); border: 1px solid rgba(255,255,255,.07);
}
.capacity-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(60,198,207,.15); color: #69dce2; }
.capacity-icon svg { width: 17px; }
.capacity-card small { display: block; color: #91a5ad; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.capacity-card strong { font-size: 13px; }
.mini-ring, .big-ring {
  --p: calc(var(--value) * 1%);
  border-radius: 50%; background: conic-gradient(#48c7cf var(--p), rgba(255,255,255,.12) 0); position: relative;
}
.mini-ring { width: 38px; height: 38px; display: grid; place-items: center; }
.mini-ring::after { content: ""; position: absolute; inset: 4px; background: #17242c; border-radius: inherit; }
.mini-ring span { position: relative; z-index: 1; font-size: 8px; font-weight: 700; }
.sidebar-settings { margin-top: 2px; }
.prototype-label { margin: 10px 10px 0; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.06); color: #60737c; font-size: 8px; text-align: center; text-transform: uppercase; letter-spacing: .08em; }

.main-area { grid-column: 2; min-width: 0; min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--topbar); display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 28px; background: rgba(244,242,237,.88); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(212,214,210,.72);
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.eyebrow, .section-kicker { margin: 0 0 2px; color: var(--muted-2); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .13em; }
.topbar h1 { margin: 0; font-size: 22px; line-height: 1.15; letter-spacing: -.035em; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.search-trigger {
  width: min(330px, 27vw); height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 10px 0 12px;
  border: 1px solid #dcddd9; border-radius: 12px; background: rgba(255,255,255,.72); color: #829098; box-shadow: 0 2px 5px rgba(21,35,43,.025);
}
.search-trigger svg { width: 16px; }
.search-trigger span { flex: 1; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
kbd { border: 1px solid #d9dbd8; background: #f7f7f5; border-radius: 5px; padding: 2px 5px; font-size: 9px; color: #839097; box-shadow: 0 1px 0 #cfd2cf; }
.icon-button {
  width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #dcddd9; border-radius: 12px; background: rgba(255,255,255,.74); color: #53646e; transition: .17s ease;
}
.icon-button:hover { background: white; color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.icon-button.small { width: 32px; height: 32px; border-radius: 9px; }
.icon-button.small svg { width: 16px; }
.notification-btn { position: relative; }
.notification-dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border: 2px solid var(--paper); border-radius: 50%; background: var(--rose); }
.avatar-button { height: 43px; display: flex; align-items: center; gap: 9px; border: 0; background: transparent; padding: 0 2px 0 4px; color: var(--ink); }
.avatar-button > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #d7c4a5, #b89367); color: white; font-size: 11px; font-weight: 800; }
.avatar-button div { display: flex; flex-direction: column; text-align: left; }
.avatar-button strong { font-size: 11px; }
.avatar-button small { color: var(--muted-2); font-size: 9px; }
.avatar-button svg { width: 13px; transform: rotate(90deg); color: #87949b; }
.mobile-menu { display: none; width: 38px; height: 38px; border: 0; border-radius: 10px; background: white; padding: 9px; }
.mobile-menu span { display: block; height: 2px; background: var(--ink); margin: 4px 0; }

.content-wrap { padding: 0 28px 32px; max-width: 1640px; margin: 0 auto; }
.view { display: none; padding-top: 22px; animation: viewIn .25s ease; }
.view.is-visible { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.hero-strip {
  min-height: 150px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 28px 32px;
  border-radius: var(--radius-lg); color: white; overflow: hidden; position: relative;
  background:
    radial-gradient(circle at 78% 30%, rgba(97,223,224,.28), transparent 23%),
    radial-gradient(circle at 56% 120%, rgba(215,187,139,.16), transparent 35%),
    linear-gradient(115deg, #101a21 0%, #16303a 62%, #0d5961 140%);
  box-shadow: var(--shadow-md);
}
.hero-strip::after { content: ""; position: absolute; width: 240px; height: 240px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; right: 8%; top: -120px; box-shadow: 0 0 0 35px rgba(255,255,255,.025), 0 0 0 70px rgba(255,255,255,.015); }
.hero-strip > * { position: relative; z-index: 1; }
.hero-kicker { display: inline-flex; align-items: center; gap: 6px; color: #80dce1; font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .13em; }
.hero-kicker svg { width: 13px; height: 13px; }
.hero-strip h2 { margin: 9px 0 5px; font-size: clamp(24px, 2.4vw, 38px); line-height: 1.04; letter-spacing: -.05em; font-weight: 660; }
.hero-strip p { margin: 0; color: #b8c9ce; font-size: 12px; }
.button {
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px;
  border-radius: 11px; border: 1px solid transparent; font-weight: 680; font-size: 11px; transition: .18s ease; white-space: nowrap;
}
.button svg { width: 15px; height: 15px; }
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.button-primary { background: var(--ink); color: white; }
.button-primary:hover { background: #20323d; }
.button-secondary { background: white; border-color: #dcddd9; color: #52636d; }
.button-light { background: rgba(255,255,255,.95); color: #16262e; }
.button.full { width: 100%; }
.text-button { border: 0; background: transparent; color: var(--aqua-dark); padding: 0; font-size: 11px; font-weight: 700; }
.panel-link { width: 100%; height: 43px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-top: 1px solid var(--line); background: transparent; color: #5d6b73; font-size: 10px; font-weight: 700; }
.panel-link svg { width: 13px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.kpi-card { min-height: 113px; padding: 17px 18px; border: 1px solid rgba(221,222,218,.8); border-radius: var(--radius); background: rgba(255,255,255,.84); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.kpi-card::after { content: ""; position: absolute; width: 70px; height: 70px; border-radius: 50%; right: -25px; top: -25px; background: var(--soft, var(--aqua-soft)); opacity: .72; }
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-head span:first-child { color: var(--muted); font-size: 10px; font-weight: 650; }
.kpi-icon { width: 29px; height: 29px; border-radius: 9px; display: grid; place-items: center; background: var(--soft, var(--aqua-soft)); color: var(--tone, var(--aqua-dark)); position: relative; z-index: 1; }
.kpi-icon svg { width: 14px; height: 14px; }
.kpi-main { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.kpi-main strong { font-size: 25px; line-height: 1; letter-spacing: -.045em; }
.trend { font-size: 9px; font-weight: 800; border-radius: 999px; padding: 3px 6px; }
.trend.positive { color: var(--green); background: var(--green-soft); }
.trend.negative { color: var(--red); background: var(--red-soft); }
.kpi-card > small { display: block; margin-top: 8px; color: var(--muted-2); font-size: 9px; }
.sparkline { position: absolute; right: 12px; bottom: 8px; width: 76px; height: 28px; opacity: .48; }
.sparkline path { stroke: var(--tone, var(--aqua)); stroke-width: 2; fill: none; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(330px, .95fr); gap: 16px; align-items: start; }
.panel { border: 1px solid rgba(221,222,218,.85); border-radius: var(--radius); background: rgba(255,255,255,.88); box-shadow: var(--shadow-sm); overflow: hidden; }
.panel-head { min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.panel-head h3 { margin: 0; font-size: 14px; letter-spacing: -.02em; }
.segmented { display: inline-flex; align-items: center; padding: 3px; border-radius: 10px; background: #eeefec; }
.segmented button { min-height: 29px; border: 0; border-radius: 8px; padding: 0 11px; background: transparent; color: #77858c; font-size: 9px; font-weight: 700; }
.segmented button.is-active { color: var(--ink); background: white; box-shadow: 0 2px 7px rgba(18,29,35,.08); }
.compact-select { height: 34px; border: 1px solid #dcddd9; border-radius: 9px; background: white; color: #5e6e77; padding: 0 30px 0 10px; font-size: 10px; }
.schedule-panel { min-height: 440px; }
.journey-list { padding: 4px 17px 8px; }
.journey-item { display: grid; grid-template-columns: 50px 3px minmax(0, 1fr) auto; gap: 11px; align-items: center; min-height: 67px; border-bottom: 1px solid #ecece9; cursor: pointer; transition: .16s ease; }
.journey-item:last-child { border-bottom: 0; }
.journey-item:hover { background: #fafaf7; margin: 0 -8px; padding: 0 8px; border-radius: 10px; }
.journey-time strong { display: block; font-size: 12px; }
.journey-time span { font-size: 8px; color: var(--muted-2); }
.journey-line { width: 3px; height: 34px; border-radius: 999px; background: var(--tone, var(--aqua)); }
.journey-client { min-width: 0; }
.journey-client strong { display: block; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journey-client span { display: block; color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journey-meta { display: flex; align-items: center; gap: 9px; }
.avatar-stack { display: flex; }
.mini-avatar { width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center; background: var(--avatar, #d9b18b); color: white; border: 2px solid white; font-size: 7px; font-weight: 800; margin-left: -5px; }
.avatar-stack .mini-avatar:first-child { margin-left: 0; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 8px; border-radius: 999px; font-size: 8px; font-weight: 750; white-space: nowrap; }
.status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-confirmed { color: #2a7d83; background: #e2f3f3; }
.status-arrived { color: #8d6a32; background: #f7eedf; }
.status-care { color: #6e5279; background: #f1eaf3; }
.status-done { color: #367c5e; background: #e4f2eb; }
.status-cancelled { color: #a64f56; background: #f8e5e7; }
.status-present, .status-balneo, .status-tisanerie { color: #367c5e; background: #e4f2eb; }
.status-no_show { color: #a64f56; background: #f8e5e7; }
.status-wait { color: #5f6d74; background: #ebeeef; }
.revenue-panel { min-height: 440px; }
.chart-summary { display: flex; align-items: center; gap: 8px; padding: 20px 20px 4px; }
.chart-summary strong { font-size: 25px; letter-spacing: -.04em; }
.chart-summary small { color: var(--muted-2); font-size: 8px; }
.line-chart { height: 245px; margin: 2px 12px 0; position: relative; }
.line-chart svg { width: 100%; height: 100%; overflow: visible; }
.line-chart .grid-line { stroke: #e7e8e5; stroke-width: 1; stroke-dasharray: 3 5; }
.line-chart .area { stroke: none; fill: url(#chartGradient); }
.line-chart .line { fill: none; stroke: var(--aqua); stroke-width: 2.3; }
.line-chart .dot { fill: white; stroke: var(--aqua); stroke-width: 2; }
.line-chart text { fill: #8a969c; font-size: 8px; }
.chart-tooltip { position: absolute; display: none; min-width: 90px; padding: 7px 9px; border-radius: 8px; background: var(--ink); color: white; font-size: 8px; pointer-events: none; box-shadow: var(--shadow-md); z-index: 3; }
.chart-legend { display: grid; grid-template-columns: repeat(7, 1fr); margin: -5px 24px 15px 38px; color: var(--muted-2); font-size: 8px; text-align: center; }
.occupancy-panel { min-height: 310px; }
.live-pill { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.live-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px var(--green-soft); animation: pulse 1.7s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px transparent; } }
.occupancy-main { display: flex; align-items: center; gap: 19px; padding: 18px 20px 8px; }
.big-ring { width: 106px; height: 106px; display: grid; place-items: center; background: conic-gradient(var(--aqua) var(--p), #edf0ed 0); flex: 0 0 auto; }
.big-ring::after { content: ""; position: absolute; inset: 9px; border-radius: inherit; background: white; }
.big-ring > div { position: relative; z-index: 1; text-align: center; }
.big-ring strong { display: block; font-size: 29px; line-height: 1; letter-spacing: -.05em; }
.big-ring span { color: var(--muted-2); font-size: 8px; }
.occupancy-copy strong { font-size: 12px; }
.occupancy-copy p { margin: 3px 0 7px; color: var(--muted); font-size: 9px; }
.capacity-timeline { height: 50px; display: flex; align-items: flex-end; gap: 4px; padding: 0 20px; }
.capacity-bar { flex: 1; min-width: 4px; height: var(--h); border-radius: 4px 4px 2px 2px; background: var(--bar); position: relative; cursor: pointer; transition: .15s; }
.capacity-bar:hover { transform: scaleY(1.08); transform-origin: bottom; }
.capacity-bar span { position: absolute; opacity: 0; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); padding: 3px 5px; border-radius: 5px; background: var(--ink); color: white; font-size: 7px; white-space: nowrap; pointer-events: none; }
.capacity-bar:hover span { opacity: 1; }
.capacity-legend { display: flex; justify-content: center; gap: 13px; margin: 8px 0 15px; color: var(--muted-2); font-size: 7px; }
.capacity-legend span { display: flex; align-items: center; gap: 4px; }
.capacity-legend i { width: 6px; height: 6px; border-radius: 2px; }
.capacity-legend .low { background: var(--mint); }.capacity-legend .medium { background: var(--sand); }.capacity-legend .high { background: var(--rose); }
.opportunities-panel { min-height: 310px; }
.opportunity-list { padding: 5px 16px 12px; }
.opportunity-item { display: grid; grid-template-columns: 35px 1fr auto; gap: 10px; align-items: center; min-height: 65px; border-bottom: 1px solid #ecece9; }
.opportunity-item:last-child { border-bottom: 0; }
.opportunity-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--soft); color: var(--tone); }
.opportunity-icon svg { width: 15px; }
.opportunity-item p { margin: 0; }
.opportunity-item strong { display: block; font-size: 10px; }
.opportunity-item span { display: block; color: var(--muted); font-size: 8px; }
.opportunity-item button { border: 0; background: transparent; color: var(--aqua-dark); font-size: 8px; font-weight: 800; }

.page-toolbar { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.toolbar-right { display: flex; align-items: center; gap: 9px; }
.date-nav { display: flex; align-items: center; gap: 7px; }
.date-button { height: 40px; display: flex; align-items: center; gap: 8px; border: 1px solid #dcddd9; border-radius: 11px; background: white; padding: 0 13px; color: var(--ink); }
.date-button svg { width: 15px; color: var(--aqua-dark); }
.date-button strong { font-size: 11px; }
.page-subtitle { margin: 1px 0 0; font-size: 20px; letter-spacing: -.035em; }
.planning-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 13px; }
.summary-chip { min-height: 61px; display: flex; align-items: center; gap: 11px; padding: 10px 13px; border: 1px solid #e0e1de; border-radius: 13px; background: rgba(255,255,255,.78); }
.summary-chip .summary-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--soft); color: var(--tone); }
.summary-chip svg { width: 14px; }
.summary-chip strong { display: block; font-size: 15px; }
.summary-chip small { color: var(--muted-2); font-size: 8px; }
.planner-shell { border: 1px solid #dfe0dc; border-radius: var(--radius); background: white; overflow: hidden; box-shadow: var(--shadow-sm); }
.planner-head { height: 68px; display: grid; grid-template-columns: 64px repeat(var(--cols, 4), minmax(170px, 1fr)); border-bottom: 1px solid var(--line); position: relative; z-index: 5; background: white; }
.planner-corner { border-right: 1px solid var(--line); }
.resource-head { display: flex; align-items: center; gap: 9px; padding: 0 12px; border-right: 1px solid var(--line); min-width: 0; }
.resource-head:last-child { border-right: 0; }
.resource-avatar { width: 33px; height: 33px; border-radius: 10px; display: grid; place-items: center; color: white; font-size: 9px; font-weight: 800; flex: 0 0 auto; }
.resource-head div { min-width: 0; }
.resource-head strong { display: block; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-head span { color: var(--muted-2); font-size: 8px; }
.resource-util { margin-left: auto; font-size: 8px; font-weight: 750; color: var(--aqua-dark); background: var(--aqua-soft); border-radius: 999px; padding: 3px 6px; }
.planner-scroll { overflow: auto; max-height: calc(100vh - 260px); min-height: 560px; }
.planner-body { position: relative; min-width: calc(64px + var(--cols, 4) * 170px); height: var(--planner-height, 760px); display: grid; grid-template-columns: 64px repeat(var(--cols, 4), minmax(170px, 1fr)); }
.time-column { position: relative; border-right: 1px solid var(--line); }
.time-label { position: absolute; right: 10px; transform: translateY(-50%); color: #7f8a8f; font-size: 7px; font-variant-numeric: tabular-nums; }
.time-label.is-hour { color: #657278; font-weight: 750; }
.resource-column { position: relative; border-right: 1px solid var(--line); background-image: linear-gradient(to bottom, transparent calc(var(--slot-h) - 1px), #eef0ed 0); background-size: 100% var(--slot-h); }
.resource-column:last-child { border-right: 0; }
.staff-closed-range { position: absolute; left: 0; right: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; background: repeating-linear-gradient(135deg, rgba(69,75,74,.34) 0, rgba(69,75,74,.34) 8px, rgba(55,61,60,.40) 8px, rgba(55,61,60,.40) 16px); border-bottom: 1px solid rgba(43,49,48,.30); color: #24302e; pointer-events: none; overflow: hidden; }
.staff-closed-range[data-closed-range="after"] { border-top: 1px solid rgba(43,49,48,.30); border-bottom: 0; }
.staff-closed-range span { padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.70); color: #34413e; font-size: 7px; font-weight: 800; white-space: nowrap; box-shadow: 0 1px 4px rgba(28,36,34,.10); }
.staff-block { position: absolute; left: 6px; right: 6px; top: var(--top); height: var(--height); z-index: 3; display: block; width: auto; min-height: 18px; padding: 5px 8px; overflow: hidden; border: 1px solid rgba(89,98,96,.28); border-left: 4px solid #697976; border-radius: 9px; background: #e5e8e5; color: #293633; text-align: left; cursor: pointer; box-shadow: 0 3px 9px rgba(30,42,39,.08); }
.staff-block:hover { z-index: 6; transform: translateY(-1px); box-shadow: 0 7px 15px rgba(30,42,39,.14); }
.staff-block strong, .staff-block span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-block strong { font-size: 8.5px; line-height: 1.15; }
.staff-block span { margin-top: 2px; color: #5d6966; font-size: 7px; }
.staff-block-admin { border-left-color: #6f6684; background: #eee9f1; }
.staff-block-reception { border-left-color: #b48447; background: #f5ead9; }
.staff-range-selection { position: absolute; left: 6px; right: 6px; z-index: 7; min-height: 22px; padding: 6px 8px; overflow: hidden; border: 2px solid var(--aqua); border-radius: 9px; background: rgba(213,239,232,.90); color: var(--aqua-dark); pointer-events: none; box-shadow: 0 8px 20px rgba(35,92,83,.16); }
.staff-range-selection strong, .staff-range-selection span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-range-selection strong { font-size: 8px; }
.staff-range-selection span { margin-top: 2px; font-size: 7px; }
.staff-range-selection.is-invalid { border-color: #c45c66; background: rgba(248,226,228,.94); color: #963f48; }
.resource-column.is-selecting-range { cursor: ns-resize; }
body.is-selecting-planning-range { cursor: ns-resize; user-select: none; }
.planner-empty-head { justify-content: center; text-align: center; }
.planner-empty-column { display: grid; place-items: start center; padding-top: 90px; background: #e2e2de; }
.planner-empty-message { max-width: 270px; padding: 16px; border: 1px solid #c9cbc7; border-radius: 13px; background: rgba(255,255,255,.78); text-align: center; }
.planner-empty-message strong, .planner-empty-message span { display: block; }
.planner-empty-message strong { color: var(--ink); font-size: 10px; }
.planner-empty-message span { margin-top: 5px; color: var(--muted); font-size: 8px; }
.quarter-hour-line { position: absolute; left: 0; right: 0; border-top: 1px dashed #d9d5cc; }
.quarter-hour-line.is-hour { border-top-style: solid; border-top-color: #cec9bf; }
.current-time-line { position: absolute; left: 64px; right: 0; height: 2px; background: #e07378; z-index: 4; pointer-events: none; }
.current-time-line::before { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #e07378; left: -3px; top: -3px; }
.current-time-label { position: absolute; left: -58px; top: 50%; width: 49px; transform: translateY(-50%); padding: 3px 5px; border-radius: 7px; background: #c16368; color: white; font-size: 8px; font-weight: 800; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 2px 7px rgba(117,45,51,.18); }
.appointment-block { position: absolute; left: 6px; right: 6px; top: var(--top); height: var(--height); min-height: 35px; padding: 7px 8px; border-radius: 9px; border-left: 3px solid var(--tone); background: var(--soft); color: #24343d; overflow: hidden; z-index: 2; cursor: pointer; transition: .15s ease; box-shadow: 0 2px 5px rgba(22,38,46,.035); }
.appointment-block:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(20,34,41,.12); z-index: 5; }
.appointment-block strong { display: block; font-size: 9px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appointment-block span { display: block; margin-top: 2px; color: #65757d; font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appointment-block .appt-status { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }
.appointment-block.is-draggable { cursor: grab; touch-action: none; }
.appointment-block.is-draggable:active { cursor: grabbing; }
.appointment-block.is-dragging { opacity: .28; transform: none; box-shadow: none; }
body.is-dragging-appointment { cursor: grabbing; user-select: none; }
body.is-dragging-appointment .appointment-block { transition: none; }
.appointment-drag-ghost { position: fixed !important; right: auto !important; margin: 0; z-index: 220 !important; pointer-events: none; opacity: .96; cursor: grabbing; border: 2px solid var(--aqua); border-left-width: 4px; box-shadow: 0 16px 34px rgba(20,52,46,.24); transform: scale(1.015); transition: left .08s ease, top .08s ease, width .08s ease, border-color .12s ease; }
.appointment-drag-ghost.is-invalid { border-color: #c45c66; background: #f8e5e6; box-shadow: 0 13px 28px rgba(133,50,59,.18); }
.appointment-drag-feedback { display: block; margin-top: 4px; color: var(--aqua-dark); font-size: 7px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appointment-drag-ghost.is-invalid .appointment-drag-feedback { color: #9f3f48; }
.resource-column.is-drop-target { background-color: rgba(213,239,232,.72); box-shadow: inset 0 0 0 2px rgba(47,129,121,.35); }
.resource-column.is-drop-invalid { background-color: rgba(248,226,228,.68); box-shadow: inset 0 0 0 2px rgba(196,92,102,.28); }
.appointment-move-head { padding-bottom: 12px; }
.move-success-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 14px; background: var(--aqua); color: white; }
.move-success-icon svg { width: 20px; height: 20px; }
.appointment-move-summary { display: grid; grid-template-columns: minmax(0,1fr) 30px minmax(0,1fr); align-items: center; gap: 10px; padding: 14px; border: 1px solid #dfe3de; border-radius: 14px; background: #fafaf7; }
.appointment-move-summary div { min-width: 0; }
.appointment-move-summary span { display: block; margin-bottom: 4px; color: var(--muted-2); font-size: 8px; }
.appointment-move-summary strong { display: block; color: var(--ink); font-size: 10px; line-height: 1.45; }
.appointment-move-summary .move-summary-arrow { display: grid; place-items: center; margin: 0; color: var(--aqua-dark); }
.move-summary-arrow svg { width: 17px; }
.sms-confirmation-card { display: flex; align-items: flex-start; gap: 12px; margin-top: 13px; padding: 15px; border-radius: 14px; background: var(--aqua-soft); color: var(--ink); }
.sms-confirmation-icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: white; color: var(--aqua-dark); }
.sms-confirmation-icon svg { width: 17px; }
.sms-confirmation-card h3 { margin: 1px 0 5px; font-size: 11px; line-height: 1.4; }
.sms-confirmation-card p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.empty-slot-hint { position: absolute; left: 8px; right: 8px; height: 26px; display: none; align-items: center; justify-content: center; border: 1px dashed var(--aqua); border-radius: 7px; color: var(--aqua-dark); background: rgba(226,245,245,.8); font-size: 8px; z-index: 1; }
.resource-column:hover .empty-slot-hint { display: flex; }

.booking-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(290px, .55fr); gap: 18px; align-items: start; }
.booking-preview { min-height: calc(100vh - 130px); border-radius: var(--radius-lg); background: #fcfbf7; border: 1px solid #deded8; box-shadow: var(--shadow-md); overflow: hidden; }
.public-brand { height: 83px; display: flex; align-items: center; gap: 12px; padding: 0 25px; border-bottom: 1px solid #e8e7e1; }
.public-logo { border-radius: 50%; width: 38px; height: 38px; background: var(--ink); box-shadow: none; }
.public-logo.small { width: 31px; height: 31px; font-size: 15px; }
.public-brand > div:last-child { display: flex; flex-direction: column; }
.public-brand strong { font-size: 12px; letter-spacing: .08em; }
.public-brand small { color: var(--muted-2); font-size: 8px; letter-spacing: .12em; }
.booking-steps { min-height: 70px; display: flex; align-items: center; justify-content: center; gap: 0; padding: 14px 20px; border-bottom: 1px solid #ecebe6; background: white; }
.booking-step { display: flex; align-items: center; color: #9ca5a8; }
.booking-step:not(:last-child)::after { content: ""; width: clamp(24px, 5vw, 70px); height: 1px; background: #dfe2df; margin: 0 10px; }
.booking-step-index { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #d9ddda; background: white; font-size: 9px; font-weight: 800; }
.booking-step span { margin-left: 7px; font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.booking-step.is-active { color: var(--aqua-dark); }
.booking-step.is-active .booking-step-index, .booking-step.is-done .booking-step-index { border-color: var(--aqua); background: var(--aqua); color: white; }
.booking-step.is-done { color: #66767d; }
.booking-stage { padding: 27px; min-height: 590px; }
.booking-stage-head { max-width: 610px; margin: 0 auto 24px; text-align: center; }
.booking-stage-head span { color: var(--aqua-dark); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.booking-stage-head h2 { margin: 6px 0; font-size: clamp(24px, 3vw, 35px); letter-spacing: -.045em; }
.booking-stage-head p { margin: 0; color: var(--muted); font-size: 10px; }
.public-category-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-bottom: 17px; }
.public-category-tabs button { height: 31px; border: 1px solid #dedfdc; border-radius: 999px; background: white; padding: 0 13px; color: #6f7c82; font-size: 9px; font-weight: 700; }
.public-category-tabs button.is-active { border-color: var(--ink); background: var(--ink); color: white; }
.public-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.public-service-card { min-height: 163px; display: flex; flex-direction: column; border: 1px solid #e2e2dc; border-radius: 15px; background: white; padding: 15px; text-align: left; transition: .18s; position: relative; overflow: hidden; }
.public-service-card::before { content: ""; position: absolute; width: 85px; height: 85px; border-radius: 50%; background: var(--soft); right: -34px; top: -36px; }
.public-service-card:hover, .public-service-card.is-selected { border-color: var(--aqua); transform: translateY(-2px); box-shadow: 0 9px 24px rgba(17,46,54,.09); }
.public-service-card .service-symbol { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--soft); color: var(--tone); margin-bottom: 13px; position: relative; }
.public-service-card .service-symbol svg { width: 16px; }
.public-service-card strong { font-size: 11px; }
.public-service-card p { flex: 1; margin: 4px 0 9px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.public-service-card footer { display: flex; align-items: center; justify-content: space-between; }
.public-service-card footer span { color: #7b878c; font-size: 8px; }
.public-service-card footer b { font-size: 12px; }
.booking-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 17px; border-top: 1px solid #e6e6e0; }
.booking-nav .button { min-width: 120px; }
.booking-sidebar { min-height: 500px; padding: 25px; border-radius: var(--radius-lg); background: var(--ink); color: white; position: sticky; top: calc(var(--topbar) + 22px); overflow: hidden; }
.booking-sidebar::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(32,169,180,.15); right: -100px; top: -100px; }
.booking-sidebar > * { position: relative; z-index: 1; }
.preview-badge { display: inline-block; padding: 5px 8px; border-radius: 999px; background: rgba(70,207,215,.14); color: #79dce1; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.booking-sidebar h3 { margin: 18px 0 8px; font-size: 26px; letter-spacing: -.045em; line-height: 1.05; }
.booking-sidebar > p { color: #aebdc3; font-size: 10px; line-height: 1.6; }
.booking-benefits { margin: 24px 0; border-top: 1px solid rgba(255,255,255,.09); }
.booking-benefits > div { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.booking-benefits > div > span { color: #62cdd4; font-size: 9px; font-weight: 800; }
.booking-benefits p { margin: 0; }
.booking-benefits strong { display: block; font-size: 10px; }
.booking-benefits small { color: #84979f; font-size: 8px; }
.share-link-card { padding: 13px; border-radius: 12px; background: rgba(255,255,255,.06); }
.share-link-card > small { color: #8da0a8; font-size: 8px; }
.share-link-card > div { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.share-link-card code { flex: 1; min-width: 0; color: #dbe5e8; font-size: 8px; overflow: hidden; text-overflow: ellipsis; }
.share-link-card button { border: 0; border-radius: 7px; background: white; color: var(--ink); padding: 5px 7px; font-size: 8px; font-weight: 800; }
.booking-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; max-width: 680px; margin: 0 auto 20px; }
.date-chip { min-height: 63px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #dedfdc; border-radius: 12px; background: white; color: #65747b; }
.date-chip span { font-size: 8px; text-transform: uppercase; }
.date-chip strong { font-size: 15px; }
.date-chip small { font-size: 7px; }
.date-chip.is-active { border-color: var(--aqua); background: var(--aqua-soft); color: var(--aqua-dark); }
.slot-groups { max-width: 680px; margin: 0 auto; }
.slot-group { margin-bottom: 14px; }
.slot-group h4 { margin: 0 0 8px; color: #7e8a8f; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.slot-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.time-slot { min-height: 38px; border: 1px solid #dedfdc; border-radius: 10px; background: white; color: #40525b; font-size: 10px; font-weight: 750; }
.time-slot:hover, .time-slot.is-active { border-color: var(--aqua); color: var(--aqua-dark); background: var(--aqua-soft); }
.time-slot.is-limited::after { content: "1 place"; display: block; color: var(--rose); font-size: 6px; font-weight: 700; }
.booking-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 680px; margin: 0 auto; }
.booking-form-grid label, .form-field { display: flex; flex-direction: column; gap: 5px; color: #5b6b73; font-size: 8px; font-weight: 700; }
.booking-form-grid input, .booking-form-grid select, .booking-form-grid textarea, .form-field input, .form-field select, .form-field textarea, .settings-form input, .settings-form select, .gift-options select, .gift-options textarea {
  width: 100%; min-height: 41px; border: 1px solid #dadcd9; border-radius: 10px; background: white; padding: 0 11px; color: var(--ink); outline: none;
}
.booking-form-grid textarea, .form-field textarea, .gift-options textarea { min-height: 76px; padding-top: 10px; resize: vertical; }
.booking-form-grid input:focus, .booking-form-grid select:focus, .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--aqua); box-shadow: 0 0 0 3px var(--aqua-soft); }
.form-span-2 { grid-column: 1 / -1; }
.addon-list { max-width: 680px; margin: 16px auto 0; }
.addon-list h4 { margin: 0 0 8px; font-size: 10px; }
.addon-option { min-height: 54px; display: grid; grid-template-columns: 19px 1fr auto; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid #e0e1de; border-radius: 11px; background: white; margin-bottom: 7px; cursor: pointer; }
.addon-option input { accent-color: var(--aqua); }
.addon-option strong { display: block; font-size: 9px; }
.addon-option span { color: var(--muted); font-size: 8px; }
.addon-option b { font-size: 10px; }
.booking-summary-card { max-width: 680px; margin: 0 auto; border: 1px solid #dedfdc; border-radius: 16px; background: white; overflow: hidden; }
.summary-service { padding: 17px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid #e8e8e3; }
.summary-service .service-symbol { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: var(--aqua-soft); color: var(--aqua-dark); }
.summary-service strong { display: block; font-size: 12px; }
.summary-service span { color: var(--muted); font-size: 9px; }
.summary-service b { margin-left: auto; font-size: 15px; }
.summary-lines { padding: 13px 17px; }
.summary-line { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; color: #617178; font-size: 9px; }
.summary-line.total { margin-top: 5px; padding-top: 13px; border-top: 1px solid #e7e7e2; color: var(--ink); font-weight: 800; font-size: 12px; }
.payment-methods { max-width: 680px; margin: 13px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.payment-method { min-height: 55px; display: flex; align-items: center; gap: 9px; border: 1px solid #dedfdc; border-radius: 12px; background: white; padding: 0 13px; color: #576870; }
.payment-method.is-active { border-color: var(--aqua); box-shadow: 0 0 0 2px var(--aqua-soft); }
.payment-method svg { color: var(--aqua-dark); }
.booking-confirmation { max-width: 580px; margin: 30px auto; text-align: center; }
.confirmation-check { width: 67px; height: 67px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 50%; background: var(--green-soft); color: var(--green); }
.confirmation-check svg { width: 31px; height: 31px; stroke-width: 2.2; }
.booking-confirmation h2 { margin: 0 0 7px; font-size: 28px; letter-spacing: -.04em; }
.booking-confirmation > p { color: var(--muted); font-size: 10px; }
.confirmation-ticket { margin: 20px auto; max-width: 420px; display: grid; grid-template-columns: 1fr 90px; text-align: left; border: 1px solid #dfe0dc; border-radius: 15px; background: white; overflow: hidden; }
.ticket-copy { padding: 16px; }
.ticket-copy small { color: var(--muted-2); font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }
.ticket-copy strong { display: block; margin: 4px 0 7px; font-size: 12px; }
.ticket-copy span { display: block; color: var(--muted); font-size: 8px; }
.ticket-qr { display: grid; place-items: center; border-left: 1px dashed #dfe0dc; color: var(--ink); }
.ticket-qr svg { width: 50px; height: 50px; }
.fiscal-receipt .receipt-mark { display: inline-flex; margin-top: 10px; padding: 5px 9px; border: 1px solid currentColor; border-radius: 6px; font-size: 9px; letter-spacing: .08em; }
.receipt-meta { display: grid; gap: 3px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); color: var(--muted); font-size: 9px; }
.receipt-lines { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.receipt-lines > div, .receipt-totals > div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 10px; }
.receipt-lines span small { display: block; margin-top: 2px; color: var(--muted-2); font-size: 8px; }
.receipt-totals { padding: 8px 0; }
.receipt-grand-total { margin-top: 4px; padding-top: 10px !important; border-top: 1px solid var(--ink); font-size: 14px !important; }
.receipt-proof { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; }

.inline-search { height: 40px; width: min(390px, 40vw); display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #dcddd9; border-radius: 11px; background: white; }
.inline-search.compact { width: 210px; height: 35px; }
.inline-search svg { width: 15px; color: #809097; }
.inline-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 10px; color: var(--ink); }
.client-kpis, .gift-kpis, .analytics-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 15px; }
.client-stat, .gift-stat, .analytics-stat { min-height: 86px; padding: 14px 16px; border: 1px solid #e0e1dd; border-radius: 14px; background: rgba(255,255,255,.82); box-shadow: var(--shadow-sm); }
.client-stat span, .gift-stat span, .analytics-stat span { color: var(--muted-2); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.client-stat strong, .gift-stat strong, .analytics-stat strong { display: block; margin-top: 5px; font-size: 21px; letter-spacing: -.04em; }
.client-stat small, .gift-stat small, .analytics-stat small { color: var(--muted); font-size: 8px; }
.table-panel { overflow: visible; }
.table-filters { display: flex; align-items: center; gap: 5px; }
.filter-chip { height: 28px; border: 1px solid #dedfdc; border-radius: 999px; background: white; color: #75828a; padding: 0 10px; font-size: 8px; font-weight: 700; }
.filter-chip.is-active { border-color: var(--ink); background: var(--ink); color: white; }
.data-table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.data-table th { height: 42px; padding: 0 17px; border-bottom: 1px solid #e7e8e4; color: #879399; font-size: 7px; text-align: left; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.data-table td { height: 62px; padding: 0 17px; border-bottom: 1px solid #eeeeeb; color: #56666f; font-size: 9px; }
.data-table tbody tr { transition: .14s; cursor: pointer; }
.data-table tbody tr:hover { background: #fafaf7; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.client-cell { display: flex; align-items: center; gap: 10px; min-width: 175px; }
.client-avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: white; font-size: 9px; font-weight: 800; background: var(--avatar); }
.client-cell strong { display: block; color: var(--ink); font-size: 10px; }
.client-cell span { display: block; color: var(--muted-2); font-size: 8px; }
.tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; min-height: 21px; padding: 0 7px; border-radius: 999px; background: #eff1ef; color: #64737a; font-size: 7px; font-weight: 700; }
.tag.vip { color: #8b6429; background: #f7ecd8; }
.tag.alert { color: #a35258; background: #f8e7e8; }
.table-action { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #8a979d; }
.table-action:hover { background: #eff1ef; color: var(--ink); }
.table-action svg { width: 14px; }
.empty-state { padding: 45px; text-align: center; color: var(--muted); }

.catalog-insight { min-height: 61px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 12px 15px; border-radius: 14px; background: linear-gradient(90deg, #e5f4f3, #f5eee3); border: 1px solid #dae8e5; }
.catalog-insight > div { display: flex; align-items: center; gap: 11px; }
.catalog-insight svg { width: 21px; color: var(--aqua-dark); }
.catalog-insight p { margin: 0; }
.catalog-insight strong { display: block; font-size: 9px; }
.catalog-insight span { color: #63747b; font-size: 8px; }
.catalog-insight button { border: 0; border-radius: 9px; background: white; padding: 8px 11px; color: var(--aqua-dark); font-size: 8px; font-weight: 800; }
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.service-card { min-height: 205px; display: flex; flex-direction: column; padding: 16px; border: 1px solid #dfdfdb; border-radius: 16px; background: rgba(255,255,255,.88); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: .17s ease; }
.service-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.service-card::after { content: ""; position: absolute; width: 105px; height: 105px; border-radius: 50%; right: -45px; top: -48px; background: var(--soft); }
.service-card-head { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 1; }
.service-symbol { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; background: var(--soft); color: var(--tone); }
.service-symbol svg { width: 17px; }
.service-card h3 { margin: 14px 0 5px; font-size: 12px; line-height: 1.25; }
.service-card > p { flex: 1; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.service-meta { display: flex; align-items: center; gap: 9px; margin: 12px 0; color: #708087; font-size: 8px; }
.service-meta span { display: flex; align-items: center; gap: 4px; }
.service-meta svg { width: 11px; }
.service-foot { display: flex; align-items: flex-end; justify-content: space-between; padding-top: 11px; border-top: 1px solid #e9e9e5; }
.service-foot strong { font-size: 15px; }
.service-foot small { color: var(--muted-2); font-size: 7px; }
.service-foot button { border: 0; border-radius: 8px; background: #eef1ef; color: #53636c; padding: 7px 9px; font-size: 8px; font-weight: 750; }
.cure-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cure-book-card { min-height: 310px; display: flex; flex-direction: column; position: relative; overflow: hidden; padding: 18px 18px 17px 23px; border: 1px solid #d9ddd7; border-radius: 18px; background: linear-gradient(145deg,#fffefa,#f6f2e9); box-shadow: var(--shadow-sm); transition: .18s ease; }
.cure-book-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cure-book-card.is-inactive { opacity: .62; }
.cure-book-edge { position: absolute; inset: 0 auto 0 0; width: 9px; background: repeating-linear-gradient(to bottom,var(--aqua) 0 14px,transparent 14px 22px); opacity: .8; }
.cure-book-head { display: flex; align-items: center; justify-content: space-between; }
.cure-book-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; background: var(--aqua-soft); color: var(--aqua-dark); }
.cure-book-icon svg { width: 19px; }
.cure-book-label { margin-top: 14px; color: var(--aqua-dark); font-size: 7px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.cure-book-card h3 { margin: 6px 0; font-family: var(--display); font-size: 19px; font-weight: 600; line-height: 1.15; }
.cure-book-card > p { min-height: 38px; margin: 0 0 13px; color: var(--muted); font-size: 8px; line-height: 1.55; }
.cure-stamps { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; border: 1px dashed #cdd8d2; border-radius: 12px; background: rgba(255,255,255,.65); }
.cure-stamp { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #cbd4cf; border-radius: 50%; color: #83928d; background: #fff; font-size: 7px; font-weight: 850; }
.cure-stamp.is-stamped { color: #fff; border-color: var(--aqua); background: var(--aqua); box-shadow: inset 0 0 0 2px rgba(255,255,255,.28); }
.cure-stamp-more { align-self: center; color: var(--muted); font-size: 7px; font-weight: 800; }
.cure-linked-service { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.cure-linked-service small { color: var(--muted-2); font-size: 7px; }
.cure-linked-service strong { color: var(--ink); font-size: 8px; }
.cure-book-stats { display: flex; gap: 13px; margin: 12px 0; color: var(--muted); font-size: 7px; }
.cure-book-stats b { color: var(--aqua-dark); font-size: 10px; }
.cure-book-card footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 13px; border-top: 1px solid #e2ded5; }
.cure-book-card footer > strong { font-size: 15px; }
.cure-book-card footer button { border: 0; border-radius: 9px; background: var(--forest); color: #fff; padding: 9px 12px; font-size: 8px; font-weight: 800; }
.cure-book-card footer button:disabled { cursor: not-allowed; opacity: .45; }

/* Messages clients & rappels automatiques */
.automation-live { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid #cde2d9; border-radius: 999px; background: #e7f3ee; color: #2f7259; font-size: 8px; font-weight: 800; }
.automation-live i { width: 7px; height: 7px; border-radius: 50%; background: #38916d; box-shadow: 0 0 0 4px rgba(56,145,109,.12); }
.automation-live.is-paused { border-color: #e5d4b7; background: #f8efe1; color: #906b37; }
.automation-live.is-paused i { background: #b98a4a; box-shadow: 0 0 0 4px rgba(185,138,74,.12); }
.message-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 15px; }
.message-kpi { min-height: 90px; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #e0ded7; border-radius: 16px; background: #fffefa; box-shadow: var(--shadow-sm); }
.message-kpi-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: #e5f1ed; color: var(--aqua-dark); }
.message-kpi-icon.tone-1 { background: #e8eef4; color: #536f8a; }
.message-kpi-icon.tone-2 { background: #f7e9e7; color: #a55e5d; }
.message-kpi-icon.tone-3 { background: #f5ecdf; color: #9b7040; }
.message-kpi-icon svg { width: 17px; }
.message-kpi div { display: grid; gap: 2px; }
.message-kpi small { color: var(--muted); font-size: 7px; }
.message-kpi strong { font-family: var(--display); font-size: 23px; font-weight: 600; line-height: 1; }
.message-kpi div > span { color: var(--muted-2); font-size: 7px; }
.message-center-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(320px,.8fr); gap: 15px; align-items: start; }
.message-rules-panel, .message-queue-panel { padding: 17px; }
.message-queue-panel { position: sticky; top: calc(var(--topbar) + 18px); max-height: calc(100vh - var(--topbar) - 38px); overflow: auto; }
.message-automation-form { display: grid; gap: 12px; }
.message-global-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; border-radius: 14px; background: #f4f7f5; }
.message-switch { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; cursor: pointer; }
.message-switch input { position: absolute; opacity: 0; }
.message-switch > span { width: 34px; height: 19px; position: relative; border-radius: 999px; background: #c8cfcb; transition: .18s; }
.message-switch > span::after { content: ''; width: 13px; height: 13px; position: absolute; left: 3px; top: 3px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.18); transition: .18s; }
.message-switch input:checked + span { background: var(--aqua); }
.message-switch input:checked + span::after { transform: translateX(15px); }
.message-switch strong { font-size: 9px; }
.message-rule-card { padding: 14px; border: 1px solid #e2dfd8; border-left: 4px solid #6f9f93; border-radius: 0 15px 15px 0; background: #fffefa; }
.message-rule-card.priority-urgent { border-left-color: #b97865; }
.message-rule-card.priority-waitlist { border-left-color: #b38a4b; }
.message-rule-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.message-rule-card header h3 { margin: 4px 0 3px; font-size: 12px; }
.message-rule-card header p { margin: 0; color: var(--muted); font-size: 7px; line-height: 1.5; }
.message-priority { display: inline-flex; padding: 4px 7px; border-radius: 999px; background: #e6f1ed; color: #397563; font-size: 6px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.priority-urgent .message-priority { background: #f5e5e2; color: #9b554c; }
.priority-waitlist .message-priority { background: #f5ecdc; color: #90682f; }
.message-rule-toggle { display: flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--aqua-dark); font-size: 7px; font-weight: 800; }
.message-rule-toggle input { accent-color: var(--aqua); }
.message-rule-card > label { display: grid; gap: 5px; margin-top: 9px; color: #596970; font-size: 7px; font-weight: 780; }
.message-rule-card input, .message-rule-card textarea { width: 100%; border: 1px solid #d9ddd9; border-radius: 9px; background: #fff; padding: 9px 10px; color: var(--ink); outline: none; font: inherit; font-size: 8px; line-height: 1.5; }
.message-rule-card textarea { min-height: 72px; resize: vertical; }
.message-rule-card input:focus, .message-rule-card textarea:focus { border-color: var(--aqua); box-shadow: 0 0 0 3px var(--aqua-soft); }
.message-variables { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 10px; background: #f0eee8; }
.message-variables strong { margin-right: 4px; font-size: 7px; }
.message-variables code { padding: 3px 5px; border-radius: 5px; background: white; color: #5f716b; font-size: 6px; }
.message-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.message-form-actions small { color: var(--muted); font-size: 7px; }
.message-queue-legend { display: flex; flex-wrap: wrap; gap: 9px; margin: 6px 0 12px; color: var(--muted); font-size: 6px; }
.message-queue-legend span { display: flex; align-items: center; gap: 4px; }
.message-queue-legend i { width: 6px; height: 6px; border-radius: 50%; background: #80958d; }
.message-queue-legend i.pending { background: #b68843; }
.message-queue-legend i.fallback { background: #b56262; }
.message-queue { display: grid; gap: 9px; }
.message-queue-item { padding: 11px; border: 1px solid #e1e1dc; border-left: 3px solid #7e9f95; border-radius: 0 12px 12px 0; background: #fffefa; }
.message-queue-item.tone-pending { border-left-color: #b88a44; background: #fdf9f1; }
.message-queue-item.tone-fallback, .message-queue-item.tone-failed { border-left-color: #b76666; background: #fdf5f4; }
.message-queue-item.tone-delivered { border-left-color: #3b8a69; background: #f3faf6; }
.message-queue-item.tone-cancelled { opacity: .55; }
.message-queue-top, .message-queue-meta, .message-queue-actions { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.message-stage { color: #5d6d72; font-size: 7px; font-weight: 850; }
.message-status { padding: 4px 6px; border-radius: 999px; background: #edf1ef; color: #5c7169; font-size: 6px; font-weight: 800; }
.message-target { width: 100%; display: grid; gap: 3px; margin: 9px 0; border: 0; background: transparent; padding: 0; text-align: left; }
.message-target strong { font-size: 9px; }
.message-target span { color: var(--muted); font-size: 7px; line-height: 1.4; }
.message-queue-meta { color: var(--muted-2); font-size: 6px; }
.message-queue-actions { margin-top: 9px; padding-top: 8px; border-top: 1px solid #e9e4d9; }
.message-queue-actions button { border: 0; background: transparent; color: var(--aqua-dark); padding: 0; font-size: 6px; font-weight: 850; }
.message-queue-actions button:last-child { color: #a65e5e; }

@media (max-width: 1180px) {
  .message-center-layout { grid-template-columns: 1fr; }
  .message-queue-panel { position: static; max-height: none; }
}
@media (max-width: 760px) {
  .message-kpis { grid-template-columns: 1fr 1fr; }
  .message-global-settings { grid-template-columns: 1fr; }
  .message-global-settings .full, .message-switch { grid-column: 1; }
  .message-form-actions { align-items: stretch; flex-direction: column; }
  .message-form-actions .button { width: 100%; }
}

.two-column-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: 15px; align-items: start; }
.gift-design-panel { position: sticky; top: calc(var(--topbar) + 20px); }
.gift-card-preview { min-height: 240px; margin: 18px; padding: 20px; border-radius: 18px; color: white; background: linear-gradient(135deg, #15232b 0%, #143d46 66%, #876e55 160%); position: relative; overflow: hidden; box-shadow: 0 20px 35px rgba(15,29,36,.22); }
.gift-orb { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.13); }
.gift-orb.one { width: 170px; height: 170px; right: -55px; top: -65px; box-shadow: 0 0 0 24px rgba(255,255,255,.03), 0 0 0 48px rgba(255,255,255,.018); }
.gift-orb.two { width: 90px; height: 90px; left: -45px; bottom: -35px; }
.gift-card-top, .gift-card-foot { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.gift-card-top span { font-size: 8px; letter-spacing: .1em; }
.gift-card-main { margin: 35px 0 34px; position: relative; z-index: 1; }
.gift-card-main small { color: #8fdae0; font-size: 7px; letter-spacing: .13em; }
.gift-card-main strong { display: block; margin: 3px 0; font-size: 37px; font-weight: 570; letter-spacing: -.04em; }
.gift-card-main p { margin: 0; color: #c1cdd0; font-size: 9px; }
.gift-card-foot code { font-size: 8px; color: #dfe8e9; }
.gift-card-foot span { color: #9fb0b5; font-size: 8px; }
.gift-options { padding: 0 18px 18px; }
.gift-options label { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; color: var(--muted); font-size: 8px; font-weight: 700; }
.gift-options textarea { min-height: 65px; }
.gift-code { display: inline-flex; align-items: center; gap: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; color: var(--ink); }
.balance-bar { width: 90px; height: 5px; border-radius: 999px; background: #e9ebe8; overflow: hidden; margin-top: 5px; }
.balance-bar span { display: block; width: var(--balance); height: 100%; border-radius: inherit; background: var(--aqua); }

.pos-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 16px; align-items: start; }
.pos-catalog { min-width: 0; }
.pos-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pos-product { min-height: 142px; display: flex; flex-direction: column; padding: 13px; border: 1px solid #dfdfdb; border-radius: 14px; background: white; text-align: left; transition: .16s; }
.pos-product:hover { transform: translateY(-2px); border-color: var(--aqua); box-shadow: var(--shadow-sm); }
.pos-product .service-symbol { width: 33px; height: 33px; border-radius: 10px; }
.pos-product strong { display: block; margin-top: 10px; font-size: 10px; }
.pos-product span { flex: 1; margin-top: 3px; color: var(--muted-2); font-size: 8px; }
.pos-product footer { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.pos-product footer b { font-size: 12px; }
.pos-product footer i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--ink); color: white; font-style: normal; font-size: 14px; }
.checkout-panel { position: sticky; top: calc(var(--topbar) + 20px); min-height: calc(100vh - 128px); display: flex; flex-direction: column; border: 1px solid #dddedb; border-radius: var(--radius); background: white; box-shadow: var(--shadow-md); overflow: hidden; }
.checkout-head { min-height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.checkout-head h3 { margin: 0; font-size: 15px; }
.client-attach { min-height: 58px; display: grid; grid-template-columns: 31px 1fr 14px; gap: 9px; align-items: center; margin: 12px 13px 6px; border: 1px dashed #cfd6d4; border-radius: 11px; background: #f8faf8; padding: 8px 10px; color: #52656e; text-align: left; }
.client-attach > svg:first-child { width: 16px; height: 16px; padding: 7px; box-sizing: content-box; border-radius: 9px; background: var(--aqua-soft); color: var(--aqua-dark); }
.client-attach > svg:last-child { width: 12px; transform: none; }
.client-attach strong { display: block; font-size: 9px; }
.client-attach small { display: block; color: var(--muted-2); font-size: 7px; }
.cart-list { flex: 1; padding: 7px 14px; overflow: auto; max-height: calc(100vh - 380px); }
.cart-empty { display: grid; place-items: center; min-height: 220px; text-align: center; color: var(--muted-2); }
.cart-empty .empty-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: #f1f3f0; margin: 0 auto 10px; }
.cart-empty svg { width: 21px; }
.cart-empty strong { display: block; color: #64737a; font-size: 10px; }
.cart-empty span { font-size: 8px; }
.cart-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 11px 0; border-bottom: 1px solid #ecece8; }
.cart-item strong { display: block; font-size: 9px; }
.cart-item span { color: var(--muted-2); font-size: 7px; }
.cart-item-price { text-align: right; }
.cart-item-price b { display: block; font-size: 10px; }
.qty-controls { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.qty-controls button { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid #dadcda; border-radius: 6px; background: white; font-size: 11px; color: #67777f; }
.qty-controls span { color: var(--ink); }
.checkout-summary { padding: 11px 15px; border-top: 1px solid var(--line); background: #fafaf7; }
.checkout-summary .summary-line { padding: 4px 0; }
.checkout-actions { padding: 12px 14px 14px; }
.checkout-actions .button-secondary { width: 100%; margin-bottom: 8px; }
.pay-button { width: 100%; justify-content: space-between; min-height: 48px; padding: 0 17px; }
.pay-button strong { font-size: 13px; }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 15px; }
.team-card { padding: 16px; border: 1px solid #dfdfdb; border-radius: 16px; background: white; box-shadow: var(--shadow-sm); }
.team-card-head { display: flex; align-items: center; justify-content: space-between; }
.team-avatar { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; color: white; font-size: 11px; font-weight: 800; background: var(--avatar); }
.team-card h3 { margin: 12px 0 2px; font-size: 12px; }
.team-card > span { color: var(--muted); font-size: 8px; }
.skill-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 11px 0 13px; }
.team-progress { display: flex; align-items: center; gap: 8px; }
.team-progress-bar { flex: 1; height: 6px; border-radius: 999px; background: #eceeeb; overflow: hidden; }
.team-progress-bar span { display: block; width: var(--value); height: 100%; background: var(--aqua); border-radius: inherit; }
.team-progress small { color: var(--muted-2); font-size: 7px; }
.team-card footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e9e9e5; }
.team-card footer span { color: var(--green); font-size: 8px; font-weight: 700; }
.team-card footer span.is-unavailable { color: var(--red); }
.team-card footer button { border: 0; background: transparent; color: var(--aqua-dark); font-size: 8px; font-weight: 800; }
.room-panel { padding-bottom: 17px; }
.room-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 15px 17px 0; }
.room-card { min-height: 100px; padding: 13px; border: 1px solid #e0e1de; border-radius: 13px; background: #fafaf7; }
.room-card-head { display: flex; align-items: center; justify-content: space-between; }
.room-card-actions { display: flex; align-items: center; gap: 7px; }
.room-card-actions .table-action { width: 27px; height: 27px; }
.room-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: var(--soft); color: var(--tone); }
.room-icon svg { width: 14px; }
.room-card h4 { margin: 10px 0 2px; font-size: 9px; }
.room-capacity-badge { display: inline-flex; margin: 3px 0 5px; padding: 3px 7px; border-radius: 999px; background: var(--aqua-soft); color: var(--aqua-dark); font-size: 7px; font-weight: 800; }
.room-card p { margin: 0; color: var(--muted-2); font-size: 7px; }
.room-capacity-field { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.room-capacity-field legend { margin-bottom: 7px; color: #607079; font-size: 8px; font-weight: 750; }
.room-capacity-field > p { margin: 7px 0 0; color: var(--muted-2); font-size: 7px; line-height: 1.45; }
.room-capacity-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.room-capacity-options label { position: relative; cursor: pointer; }
.room-capacity-options input { position: absolute; opacity: 0; pointer-events: none; }
.room-capacity-options span { min-height: 64px; display: flex; flex-direction: column; justify-content: center; padding: 10px 12px; border: 1px solid #d9ddda; border-radius: 12px; background: #fffefa; color: #5d6c73; transition: .15s ease; }
.room-capacity-options strong, .room-capacity-options small { display: block; }
.room-capacity-options strong { font-size: 9px; }
.room-capacity-options small { margin-top: 3px; color: var(--muted-2); font-size: 7px; }
.room-capacity-options input:checked + span { border-color: #3e9b70; background: #3e9b70; color: white; box-shadow: 0 6px 14px rgba(62,155,112,.18); }
.room-capacity-options input:checked + span small { color: rgba(255,255,255,.78); }
.room-capacity-options input:focus-visible + span { outline: 3px solid rgba(47,129,121,.25); outline-offset: 2px; }

.analytics-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 15px; align-items: start; }
.analytics-main, .funnel-panel, .ranking-panel, .source-panel { min-height: 330px; }
.stacked-chart { height: 205px; display: flex; align-items: flex-end; gap: 14px; padding: 22px 24px 0; border-bottom: 1px solid #e8e9e5; }
.stack-column { flex: 1; display: flex; flex-direction: column-reverse; height: 100%; gap: 1px; position: relative; }
.stack-piece { width: 100%; height: var(--height); background: var(--tone); border-radius: 4px 4px 1px 1px; opacity: .9; transition: .15s; }
.stack-column:hover .stack-piece { filter: brightness(.95); }
.stack-column label { position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); color: var(--muted-2); font-size: 7px; }
.analytics-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; padding: 20px; }
.analytics-legend span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; }
.analytics-legend i { width: 7px; height: 7px; border-radius: 2px; background: var(--tone); }
.funnel { padding: 20px; }
.funnel-row { margin-bottom: 12px; }
.funnel-row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; font-size: 8px; }
.funnel-row-head strong { font-size: 9px; }
.funnel-bar { height: 28px; width: var(--width); display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; border-radius: 6px; background: linear-gradient(90deg, var(--aqua), var(--aqua-dark)); color: white; font-size: 7px; font-weight: 800; }
.ranking-list { padding: 7px 17px 15px; }
.ranking-item { display: grid; grid-template-columns: 25px 1fr auto; gap: 9px; align-items: center; padding: 12px 0; border-bottom: 1px solid #ebebe7; }
.ranking-item:last-child { border-bottom: 0; }
.rank-number { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: #eff1ee; color: #6b7980; font-size: 8px; font-weight: 800; }
.ranking-item strong { display: block; font-size: 9px; }
.ranking-item span { color: var(--muted-2); font-size: 7px; }
.ranking-item b { font-size: 10px; }
.donut-wrap { min-height: 260px; display: flex; align-items: center; justify-content: center; gap: 28px; padding: 20px; }
.donut { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--aqua) 0 calc(var(--a)*1%), var(--sand) 0 calc((var(--a) + var(--b))*1%), var(--plum) 0 calc((var(--a) + var(--b) + var(--c))*1%), var(--rose) 0); position: relative; }
.donut::after { content: ""; position: absolute; inset: 22px; background: white; border-radius: inherit; }
.donut > div { position: relative; z-index: 1; text-align: center; }
.donut strong { display: block; font-size: 22px; letter-spacing: -.04em; }
.donut span { color: var(--muted-2); font-size: 7px; }
.donut-legend { min-width: 130px; }
.donut-legend span { display: grid; grid-template-columns: 7px 1fr auto; gap: 7px; align-items: center; margin: 10px 0; color: var(--muted); font-size: 8px; }
.donut-legend i { width: 7px; height: 7px; border-radius: 2px; }.donut-legend .web{background:var(--aqua)}.donut-legend .phone{background:var(--sand)}.donut-legend .desk{background:var(--plum)}.donut-legend .gift{background:var(--rose)}
.donut-legend strong { color: var(--ink); font-size: 8px; }

.settings-layout { display: grid; grid-template-columns: 215px minmax(0, 760px); gap: 16px; align-items: start; }
.settings-nav { display: flex; flex-direction: column; padding: 8px; border: 1px solid #dedfdb; border-radius: 14px; background: white; }
.settings-nav button { min-height: 39px; border: 0; border-radius: 9px; background: transparent; color: #69777e; padding: 0 10px; text-align: left; font-size: 9px; font-weight: 700; }
.settings-nav button.is-active { background: var(--ink); color: white; }
.settings-panel { overflow: hidden; }
.save-status { display: flex; align-items: center; gap: 5px; color: var(--green); font-size: 8px; }
.save-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.settings-form { padding: 18px; }
.settings-form > label, .form-row label { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; color: #5e6e76; font-size: 8px; font-weight: 700; }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.setting-toggle { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #e8e8e4; padding: 12px 0; }
.setting-toggle strong { display: block; font-size: 9px; }
.setting-toggle p { margin: 3px 0 0; color: var(--muted-2); font-size: 8px; }
.toggle { width: 41px; height: 23px; flex: 0 0 auto; border: 0; border-radius: 999px; background: #ced3d1; padding: 3px; }
.toggle span { display: block; width: 17px; height: 17px; border-radius: 50%; background: white; transition: .18s; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.toggle.is-on { background: var(--aqua); }
.toggle.is-on span { transform: translateX(18px); }

.modal-overlay, .drawer-overlay, .command-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(8,17,22,.50); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: .2s ease; }
.modal-overlay.is-open, .drawer-overlay.is-open, .command-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal { width: min(620px, calc(100vw - 28px)); max-height: calc(100vh - 34px); overflow: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -47%) scale(.98); border-radius: 19px; background: white; box-shadow: var(--shadow-lg); transition: .22s ease; }
.modal-overlay.is-open .modal { transform: translate(-50%, -50%) scale(1); }
.modal-close, .drawer-close { width: 34px; height: 34px; display: grid; place-items: center; position: absolute; top: 13px; right: 13px; z-index: 3; border: 0; border-radius: 10px; background: #f0f2ef; color: #67777e; }
.modal-close svg, .drawer-close svg { width: 15px; }
.modal-head { padding: 22px 22px 15px; border-bottom: 1px solid var(--line); }
.modal-head .section-kicker { margin-bottom: 4px; }
.modal-head h2 { margin: 0; font-size: 19px; letter-spacing: -.035em; }
.modal-head p { margin: 5px 40px 0 0; color: var(--muted); font-size: 9px; }
.modal-body { padding: 18px 22px 22px; }
.modal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 7px; padding-top: 13px; border-top: 1px solid var(--line); }
.form-field.full { grid-column: 1 / -1; }
.practitioner-skills { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.practitioner-skills legend { margin-bottom: 8px; color: #5b6b73; font-size: 8px; font-weight: 750; }
.practitioner-skill-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.practitioner-skill-button { min-height: 42px; display: flex; align-items: center; justify-content: flex-start; gap: 7px; padding: 8px 10px; border: 1px solid #d9ddd9; border-radius: 11px; background: #fffefa; color: #52646b; text-align: left; font-size: 8px; font-weight: 750; transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease; }
.practitioner-skill-button:hover { border-color: #8ebba7; background: #f5fbf7; }
.practitioner-skill-button:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(62,155,112,.18); }
.practitioner-skill-button.is-active { border-color: var(--green); background: var(--green); color: #fff; box-shadow: 0 6px 14px rgba(62,155,112,.18); }
.practitioner-skill-button.is-active:hover { background: #358961; }
.practitioner-skill-check { width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 6px; color: transparent; font-size: 11px; line-height: 1; }
.practitioner-skill-button.is-active .practitioner-skill-check { border-color: rgba(255,255,255,.76); color: #fff; }
.practitioner-skill-help { margin: 8px 0 0; color: var(--muted-2); font-size: 7px; font-weight: 500; }
.required-marker { color: #c43d4b; font-weight: 800; }
.required-legend { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 8px; }
.contact-requirement { grid-column: 1 / -1; margin: -5px 0 0; color: var(--muted); font-size: 8px; }
.duplicate-client-alert { grid-column: 1 / -1; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e7c98f; border-radius: 11px; background: #fff7e8; color: #745321; }
.duplicate-client-alert[hidden] { display: none; }
.duplicate-client-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #f3dfb9; color: #8a6428; }
.duplicate-client-icon svg { width: 15px; }
.duplicate-client-alert strong, .duplicate-client-alert span { display: block; }
.duplicate-client-alert strong { margin-bottom: 2px; color: #614719; font-size: 9px; }
.duplicate-client-alert span { font-size: 7px; font-weight: 500; }
.duplicate-client-alert .button { min-height: 32px; padding: 0 10px; white-space: nowrap; font-size: 7px; }
.client-combobox { position: relative; }
.client-combobox input[type="search"] { padding-right: 34px; }
.client-combobox input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.client-combobox input[aria-invalid="true"] { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(196,61,75,.12); }
.client-search-results { position: absolute; z-index: 12; top: calc(100% + 5px); left: 0; right: 0; max-height: 260px; overflow-y: auto; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 14px 34px rgba(15,34,39,.16); }
.client-search-option { width: 100%; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 9px; border: 0; border-radius: 9px; background: transparent; padding: 7px; text-align: left; color: var(--ink); cursor: pointer; }
.client-search-option:hover, .client-search-option.is-active { background: var(--aqua-soft); }
.client-search-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #e7f0ed; color: var(--aqua-dark); font-size: 8px; font-weight: 800; }
.client-search-option strong, .client-search-option small { display: block; }
.client-search-option strong { font-size: 9px; }
.client-search-option small, .field-help { color: var(--muted); font-size: 7px; font-weight: 500; }
.client-search-empty { padding: 12px; color: var(--muted); font-size: 8px; text-align: center; }
.field-error { min-height: 9px; color: #a92f3d; font-size: 7px; font-weight: 700; }
.form-note { grid-column: 1 / -1; padding: 10px; border-radius: 10px; background: var(--aqua-soft); color: #467077; font-size: 8px; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(470px, 94vw); z-index: 90; background: white; box-shadow: -20px 0 55px rgba(12,24,30,.18); transform: translateX(103%); transition: .24s ease; overflow-y: auto; }
.drawer.is-open { transform: translateX(0); }
.drawer-head { min-height: 170px; padding: 35px 24px 22px; color: white; background: linear-gradient(135deg, #14232b, #17606a); position: relative; overflow: hidden; }
.drawer-head::after { content: ""; position: absolute; width: 190px; height: 190px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; right: -80px; top: -85px; box-shadow: 0 0 0 27px rgba(255,255,255,.025); }
.drawer-head > * { position: relative; z-index: 1; }
.drawer-head .client-avatar { width: 49px; height: 49px; margin-bottom: 13px; border-radius: 15px; }
.drawer-head h2 { margin: 0; font-size: 21px; letter-spacing: -.04em; }
.drawer-head p { margin: 4px 0 0; color: #b6c8cd; font-size: 9px; }
.drawer-head-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.drawer-head-actions button { min-height: 30px; display: flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.17); border-radius: 8px; background: rgba(255,255,255,.08); color: white; padding: 0 9px; font-size: 8px; }
.drawer-head-actions svg { width: 12px; }
.drawer-body { padding: 20px 22px; }
.drawer-section { margin-bottom: 22px; }
.drawer-section h3 { margin: 0 0 10px; color: #718087; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.info-card { min-height: 61px; padding: 10px; border: 1px solid #e1e2de; border-radius: 11px; background: #fafaf7; }
.info-card span { display: block; color: var(--muted-2); font-size: 7px; }
.info-card strong { display: block; margin-top: 3px; font-size: 10px; }
.info-card.is-alert { border-color: #edc9cc; background: #fff4f4; }
.info-card.is-alert strong { color: var(--red); }
.empty-state.compact { min-height: 0; padding: 13px; }
.client-cure-list { display: grid; gap: 8px; }
.client-cure-card { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 12px; border: 1px solid #d9e4df; border-radius: 12px; background: #f6fbf8; }
.client-cure-card strong, .client-cure-card span { display: block; }
.client-cure-card strong { font-size: 9px; }
.client-cure-card span { margin-top: 3px; color: var(--muted); font-size: 7px; }
.client-cure-card b { align-self: center; color: var(--green); font-size: 12px; }
.client-cure-progress { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 999px; background: #dfe9e4; }
.client-cure-progress span { width: var(--remaining); height: 100%; margin: 0; border-radius: inherit; background: var(--green); }
.client-history-heading { display: grid; gap: 10px; margin-bottom: 6px; }
.client-history-heading h3 { margin-bottom: 3px; }
.client-history-heading > div:first-child > span { color: var(--muted-2); font-size: 7px; }
.client-history-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.client-history-filters button { min-height: 27px; padding: 0 9px; border: 1px solid #dfe2de; border-radius: 999px; background: #fafaf7; color: #69777b; font-size: 7px; font-weight: 750; }
.client-history-filters button.is-active { border-color: var(--forest); background: var(--forest); color: white; }
.client-timeline { position: relative; }
.client-timeline::before { content: ""; position: absolute; left: 57px; top: 20px; bottom: 20px; width: 1px; background: #e0e4e0; }
.client-timeline-item { position: relative; width: 100%; min-height: 74px; display: grid; grid-template-columns: 43px 29px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 9px 0; border: 0; border-bottom: 1px solid #ecece8; background: transparent; color: var(--ink); text-align: left; }
button.client-timeline-item { cursor: pointer; }
button.client-timeline-item:hover { background: #fafbf8; }
.client-timeline-date { text-align: center; }
.client-timeline-date strong, .client-timeline-date small { display: block; }
.client-timeline-date strong { font-size: 10px; }
.client-timeline-date small { margin-top: 1px; color: var(--muted-2); font-size: 6px; text-transform: uppercase; }
.client-timeline-marker { position: relative; z-index: 1; width: 27px; height: 27px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; background: #edf1ee; color: #65736f; }
.client-timeline-marker svg { width: 11px; height: 11px; }
.client-timeline-copy { min-width: 0; }
.client-timeline-copy strong, .client-timeline-copy span, .client-timeline-copy small { display: block; }
.client-timeline-copy strong { font-size: 8.5px; }
.client-timeline-copy span { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.client-timeline-copy small { margin-top: 3px; color: var(--muted-2); font-size: 6.5px; line-height: 1.35; }
.client-timeline-item > b { padding-left: 5px; font-size: 8px; white-space: nowrap; }
.client-timeline-item.tone-positive .client-timeline-marker { background: var(--green-soft); color: var(--green); }
.client-timeline-item.tone-negative .client-timeline-marker { background: var(--red-soft); color: var(--red); }
.client-timeline-item.tone-message .client-timeline-marker { background: var(--aqua-soft); color: var(--aqua-dark); }
.client-timeline-item.tone-purchase .client-timeline-marker { background: #edf1ee; color: var(--forest); }
.client-timeline-item.tone-gift .client-timeline-marker { background: var(--sand-soft); color: #a27135; }
.client-timeline-item.tone-cure .client-timeline-marker { background: var(--plum-soft); color: var(--plum); }
.history-item { display: grid; grid-template-columns: 39px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #ecece8; }
.history-date { text-align: center; padding: 6px 3px; border-radius: 8px; background: #f1f3f0; }
.history-date strong { display: block; font-size: 10px; }
.history-date span { font-size: 6px; color: var(--muted-2); text-transform: uppercase; }
.history-item h4 { margin: 0; font-size: 9px; }
.history-item p { margin: 2px 0 0; color: var(--muted-2); font-size: 7px; }
.history-item b { font-size: 9px; }
.note-card { padding: 11px; border-left: 3px solid var(--sand); border-radius: 0 10px 10px 0; background: var(--sand-soft); color: #6d604e; font-size: 8px; }
.appointment-comment { padding: 11px; border-left: 3px solid var(--sand); border-radius: 0 12px 12px 0; background: var(--sand-soft); }
.appointment-comment textarea { width: 100%; min-height: 105px; resize: vertical; border: 1px solid #d9d1c3; border-radius: 9px; background: rgba(255,255,255,.72); padding: 10px; color: var(--ink); outline: none; font: inherit; font-size: 9px; line-height: 1.5; }
.appointment-comment textarea:focus { border-color: var(--aqua); box-shadow: 0 0 0 3px var(--aqua-soft); background: #fff; }
.appointment-comment-help { margin: 7px 0 0; color: #7f725f; font-size: 7px; line-height: 1.45; }
.appointment-comment-help code { padding: 1px 4px; border-radius: 4px; background: rgba(255,255,255,.62); color: #695943; font-family: inherit; font-weight: 750; }
.appointment-comment-actions { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 8px; }
.appointment-comment-actions small { color: #7f725f; font-size: 7px; }
.appointment-comment-actions .button { min-height: 34px; padding: 0 11px; font-size: 7px; white-space: nowrap; }
.appointment-detail-card { padding: 14px; border: 1px solid #dfe0dc; border-radius: 13px; background: #fafaf7; }
.appointment-detail-card h3 { margin: 0 0 6px; font-size: 14px; }
.appointment-detail-card p { margin: 2px 0; color: var(--muted); font-size: 9px; }
.status-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 12px; }
.status-actions button { min-height: 35px; border: 1px solid #dedfdb; border-radius: 9px; background: white; color: #64747b; font-size: 8px; font-weight: 750; }
.status-actions button:hover { border-color: var(--aqua); color: var(--aqua-dark); }
.status-actions button.is-active.status-positive { border-color: var(--green); background: var(--green); color: white; box-shadow: 0 6px 14px rgba(62,155,112,.22); }
.status-actions button.is-active.status-negative { border-color: var(--red); background: var(--red); color: white; box-shadow: 0 6px 14px rgba(191,87,94,.22); }
.status-actions button.status-negative:not(.is-active):hover { border-color: var(--red); color: var(--red); }
.status-actions button:disabled { cursor: wait; opacity: .72; }

.command-overlay { z-index: 100; background: rgba(8,17,22,.58); }
.command-box { width: min(620px, calc(100vw - 28px)); position: absolute; left: 50%; top: 14vh; transform: translateX(-50%) translateY(-10px); border-radius: 17px; background: white; box-shadow: var(--shadow-lg); overflow: hidden; transition: .2s; }
.command-overlay.is-open .command-box { transform: translateX(-50%) translateY(0); }
.command-input { height: 58px; display: flex; align-items: center; gap: 10px; padding: 0 15px; border-bottom: 1px solid var(--line); }
.command-input svg { color: var(--aqua-dark); }
.command-input input { flex: 1; border: 0; outline: 0; font-size: 14px; }
.command-results { max-height: 420px; overflow: auto; padding: 8px; }
.command-group-label { padding: 8px 10px 5px; color: var(--muted-2); font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.command-result { width: 100%; min-height: 50px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; border: 0; border-radius: 10px; background: transparent; padding: 6px 9px; text-align: left; color: var(--ink); }
.command-result:hover, .command-result.is-active { background: #f1f5f3; }
.command-result .result-icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 9px; background: var(--soft, var(--aqua-soft)); color: var(--tone, var(--aqua-dark)); }
.command-result svg { width: 15px; }
.command-result strong { display: block; font-size: 9px; }
.command-result span { display: block; color: var(--muted-2); font-size: 7px; }
.command-result kbd { font-size: 7px; }
.command-foot { height: 36px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 0 13px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 7px; }
.command-foot span { display: flex; align-items: center; gap: 4px; }
.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 120; display: flex; flex-direction: column; gap: 8px; }
.toast { min-width: 285px; max-width: 360px; display: grid; grid-template-columns: 32px 1fr 18px; align-items: center; gap: 9px; padding: 11px 12px; border-radius: 13px; background: var(--ink); color: white; box-shadow: var(--shadow-lg); animation: toastIn .25s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.toast-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: rgba(79,205,211,.14); color: #68d7dd; }
.toast-icon svg { width: 15px; }
.toast strong { display: block; font-size: 9px; }
.toast span { display: block; color: #aebfc4; font-size: 7px; }
.toast button { border: 0; background: transparent; color: #82949c; padding: 0; }
.toast button svg { width: 13px; }

@media (max-width: 1280px) {
  :root { --sidebar: 224px; }
  .service-grid, .pos-product-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .room-grid { grid-template-columns: repeat(3, 1fr); }
  .avatar-button div { display: none; }
  .booking-sidebar { padding: 21px; }
}

@media (max-width: 1050px) {
  :root { --sidebar: 78px; }
  .sidebar { padding-left: 10px; padding-right: 10px; }
  .brand { justify-content: center; padding-left: 0; padding-right: 0; }
  .brand-copy, .nav-item span, .nav-item em, .capacity-card > div:nth-child(2), .prototype-label { display: none; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-item svg { width: 19px; height: 19px; }
  .nav-item.is-active { box-shadow: inset 2px 0 var(--aqua); }
  .capacity-card { display: flex; justify-content: center; padding: 10px 0; }
  .capacity-card .mini-ring { display: none; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-layout { grid-template-columns: 1fr; }
  .booking-sidebar { position: static; min-height: 0; }
  .two-column-grid { grid-template-columns: 1fr; }
  .gift-design-panel { position: static; }
  .analytics-grid { grid-template-columns: 1fr; }
  .pos-layout { grid-template-columns: 1fr; }
  .checkout-panel { position: static; min-height: 0; }
  .cart-list { max-height: none; }
}

@media (max-width: 760px) {
  :root { --sidebar: 0px; --topbar: 70px; }
  .app-shell { display: block; }
  .sidebar { width: 252px; transform: translateX(-103%); transition: .22s ease; box-shadow: var(--shadow-lg); }
  .sidebar.is-open { transform: translateX(0); }
  .brand { justify-content: flex-start; padding-left: 10px; }
  .brand-copy, .nav-item span, .nav-item em, .capacity-card > div:nth-child(2), .prototype-label { display: flex; }
  .brand-copy { display: flex; }
  .nav-item { justify-content: flex-start; padding: 0 12px; }
  .capacity-card { display: grid; justify-content: initial; padding: 12px; }
  .capacity-card .mini-ring { display: grid; }
  .main-area { grid-column: auto; }
  .topbar { padding: 0 13px; }
  .mobile-menu { display: block; }
  .search-trigger { width: 40px; padding: 0; justify-content: center; }
  .search-trigger span, .search-trigger kbd, .avatar-button > svg { display: none; }
  .avatar-button { display: none; }
  .content-wrap { padding: 0 13px 24px; }
  .hero-strip { min-height: 180px; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 22px; }
  .hero-strip .button { width: 100%; }
  .kpi-grid, .client-kpis, .gift-kpis, .analytics-kpis { grid-template-columns: 1fr 1fr; }
  .page-toolbar { align-items: stretch; flex-direction: column; }
  .toolbar-right { flex-wrap: wrap; }
  .toolbar-right .button { flex: 1; }
  .planning-summary { grid-template-columns: 1fr 1fr; }
  .public-service-grid { grid-template-columns: 1fr 1fr; }
  .booking-stage { padding: 20px 13px; }
  .booking-steps { overflow-x: auto; justify-content: flex-start; }
  .booking-step span { display: none; }
  .booking-step:not(:last-child)::after { width: 38px; }
  .booking-date-grid { grid-template-columns: repeat(4, 1fr); }
  .slot-grid { grid-template-columns: repeat(3, 1fr); }
  .booking-form-grid { grid-template-columns: 1fr; }
  .form-span-2 { grid-column: auto; }
  .payment-methods { grid-template-columns: 1fr; }
  .inline-search { width: 100%; }
  .service-grid, .pos-product-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .room-grid { grid-template-columns: 1fr 1fr; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { flex-direction: row; overflow-x: auto; }
  .settings-nav button { white-space: nowrap; }
  .form-row.two, .modal-form { grid-template-columns: 1fr; }
  .form-field.full, .modal-actions { grid-column: auto; }
  .practitioner-skills { grid-column: auto; }
  .practitioner-skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gift-card-preview { margin: 12px; }
}

@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body.print-analytics { background: #fff; }
  body.print-analytics .sidebar,
  body.print-analytics .topbar,
  body.print-analytics .mobile-tabs,
  body.print-analytics .mobile-fab,
  body.print-analytics .view:not(#view-analytics),
  body.print-analytics #view-analytics .page-toolbar .toolbar-right { display: none !important; }
  body.print-analytics .main-area { margin: 0 !important; width: 100% !important; }
  body.print-analytics .content { padding: 0 !important; }
  body.print-analytics #view-analytics { display: block !important; }
  body.print-fiscal-receipt { background: #fff; }
  body.print-fiscal-receipt .app-shell,
  body.print-fiscal-receipt .drawer-overlay,
  body.print-fiscal-receipt .drawer,
  body.print-fiscal-receipt .command-overlay,
  body.print-fiscal-receipt .toast-region,
  body.print-fiscal-receipt .modal-close,
  body.print-fiscal-receipt .no-print { display: none !important; }
  body.print-fiscal-receipt .modal-overlay { position: static; display: block !important; padding: 0; background: #fff; }
  body.print-fiscal-receipt .modal { width: 76mm; max-width: 76mm; max-height: none; margin: 0 auto; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  body.print-fiscal-receipt .modal-head, body.print-fiscal-receipt .modal-body { padding: 8mm 4mm; }
  body.print-analytics .panel,
  body.print-analytics .analytics-stat { break-inside: avoid; box-shadow: none !important; border: 1px solid #d9ddd9; }
}

@media (max-width: 480px) {
  .topbar h1 { font-size: 18px; }
  .eyebrow { font-size: 8px; }
  .kpi-grid, .client-kpis, .gift-kpis, .analytics-kpis, .planning-summary { grid-template-columns: 1fr; }
  .public-service-grid, .service-grid, .pos-product-grid, .room-grid { grid-template-columns: 1fr; }
  .booking-date-grid { grid-template-columns: repeat(3, 1fr); }
  .slot-grid { grid-template-columns: repeat(2, 1fr); }
  .date-nav { flex-wrap: wrap; }
  .page-toolbar .segmented { max-width: 100%; overflow-x: auto; }
  .segmented button { white-space: nowrap; }
  .panel-head { align-items: flex-start; flex-direction: column; }
  .panel-head .segmented, .table-filters { width: 100%; overflow-x: auto; }
  .chart-summary { flex-wrap: wrap; }
  .occupancy-main { align-items: flex-start; }
  .two-column-grid { display: block; }
  .gift-design-panel { margin-top: 15px; }
  .donut-wrap { flex-direction: column; }
  .confirmation-ticket { grid-template-columns: 1fr; }
  .ticket-qr { min-height: 86px; border-left: 0; border-top: 1px dashed #dfe0dc; }
}

/* =========================================================
   OASISOS EXPERIENCE — UX & VISUAL SYSTEM V2
   Premium operations interface for Spa Oasis · Le Klube
   ========================================================= */

:root {
  --ink: #182724;
  --ink-2: #23413b;
  --ink-3: #31534c;
  --paper: #f5f2ec;
  --paper-2: #ece8df;
  --card: #fffefa;
  --muted: #66756f;
  --muted-2: #8b9792;
  --line: #e4e1d9;
  --aqua: #2f8179;
  --aqua-dark: #1d655f;
  --aqua-soft: #deeee9;
  --mint: #8ab9a9;
  --sand: #c8a478;
  --sand-soft: #f4eadc;
  --plum: #755f78;
  --plum-soft: #efe8f0;
  --rose: #b86f75;
  --rose-soft: #f5e5e6;
  --green: #3b8964;
  --green-soft: #e0f0e7;
  --orange: #c98547;
  --orange-soft: #f8eadb;
  --red: #b85b62;
  --red-soft: #f6e2e4;
  --gold: #b88a56;
  --forest: #173f3a;
  --forest-2: #0f2e2b;
  --shadow-xs: 0 1px 2px rgba(20, 35, 31, .04);
  --shadow-sm: 0 7px 22px rgba(23, 43, 38, .065);
  --shadow-md: 0 18px 45px rgba(20, 42, 36, .10);
  --shadow-lg: 0 34px 90px rgba(10, 30, 26, .22);
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 28px;
  --sidebar: 272px;
  --topbar: 78px;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

::selection { background: rgba(47,129,121,.18); color: var(--ink); }
html { background: var(--paper); }
body {
  background:
    radial-gradient(circle at 92% 2%, rgba(47,129,121,.055), transparent 26rem),
    radial-gradient(circle at 3% 55%, rgba(200,164,120,.055), transparent 28rem),
    var(--paper);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: -.005em;
}
body.is-locked { overflow: hidden; }
button, input, select, textarea { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid rgba(47,129,121,.25);
  outline-offset: 2px;
}
button:disabled { cursor: not-allowed; opacity: .48; transform: none !important; box-shadow: none !important; }
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 1000; padding: 11px 16px; border-radius: 10px;
  background: var(--ink); color: #fff; text-decoration: none; font-weight: 750; transition: top .18s ease;
}
.skip-link:focus { top: 14px; }

/* Shell & sidebar */
.app-shell { transition: grid-template-columns .24s ease; }
.sidebar {
  padding: 18px 14px 14px;
  background:
    radial-gradient(circle at 10% -5%, rgba(116,187,170,.19), transparent 27%),
    radial-gradient(circle at 110% 52%, rgba(200,164,120,.10), transparent 32%),
    linear-gradient(180deg, #173d39 0%, #102f2c 54%, #0d2826 100%);
  border-right: 1px solid rgba(255,255,255,.055);
  box-shadow: 18px 0 50px rgba(17,49,45,.06);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.13) transparent;
  transition: width .24s ease, transform .24s ease;
}
.brand { min-height: 54px; padding: 0 7px 17px; gap: 12px; }
.brand-mark, .public-logo {
  width: 42px; height: 42px; border-radius: 14px;
  background: linear-gradient(145deg, #9bc7b7, #4d968a 58%, #2e756d);
  box-shadow: 0 11px 24px rgba(4,34,30,.24), inset 0 1px rgba(255,255,255,.34);
}
.brand-mark svg { width: 21px; height: 21px; stroke-width: 1.6; }
.brand-copy strong { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -.035em; }
.brand-copy strong span { font-family: var(--font); color: #a9d2c5; font-size: 12px; font-weight: 780; margin-left: 2px; letter-spacing: .04em; }
.brand-copy small { color: rgba(222,239,233,.48); font-size: 9px; letter-spacing: .14em; }
.sidebar-collapse {
  width: 28px; height: 28px; margin-left: auto; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px; background: rgba(255,255,255,.035); color: rgba(255,255,255,.5); transition: .18s ease;
}
.sidebar-collapse:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-collapse svg { width: 13px; transform: rotate(180deg); }
.sidebar-create {
  width: 100%; min-height: 54px; display: flex; align-items: center; gap: 11px; margin: 0 0 15px; padding: 8px 10px;
  border: 1px solid rgba(198,230,219,.15); border-radius: 15px;
  background: linear-gradient(135deg, rgba(147,204,185,.18), rgba(255,255,255,.055)); color: #fff; text-align: left;
  box-shadow: inset 0 1px rgba(255,255,255,.08); transition: .18s ease;
}
.sidebar-create:hover { transform: translateY(-1px); border-color: rgba(198,230,219,.26); background: linear-gradient(135deg, rgba(147,204,185,.24), rgba(255,255,255,.07)); }
.sidebar-create-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: #e8f2ee; color: var(--forest); }
.sidebar-create-icon svg { width: 16px; }
.sidebar-create > span:nth-child(2) { min-width: 0; display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-create strong { font-size: 11px; font-weight: 760; }
.sidebar-create small { font-size: 8px; color: rgba(255,255,255,.45); white-space: nowrap; }
.main-nav { gap: 2px; }
.nav-section-label {
  display: block; margin: 13px 11px 5px; color: rgba(214,235,228,.34); font-size: 8px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .16em; white-space: nowrap; overflow: hidden;
}
.nav-section-label:first-child { margin-top: 2px; }
.nav-item {
  min-height: 42px; border-radius: 12px; padding: 0 11px; color: rgba(220,236,231,.64); gap: 11px;
}
.nav-item svg { width: 17px; height: 17px; }
.nav-item span { font-size: 12px; font-weight: 620; }
.nav-item em { background: rgba(255,255,255,.07); color: rgba(230,244,239,.67); }
.nav-item:hover { background: rgba(255,255,255,.055); transform: none; color: #fff; }
.nav-item.is-active {
  background: linear-gradient(100deg, rgba(211,233,225,.14), rgba(255,255,255,.055));
  box-shadow: inset 3px 0 #91c5b4, 0 5px 14px rgba(4,25,22,.07); color: #fff;
}
.nav-item.is-active svg { color: #b5ddcf; }
.accent-nav { margin: 4px 0 0; border-color: rgba(181,221,207,.13); background: rgba(176,219,205,.065); color: #cfe8e0; }
.sidebar-spacer { min-height: 18px; }
.capacity-card {
  margin: 0 2px 10px; padding: 11px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.075); border-radius: 15px;
}
.capacity-icon { background: rgba(169,215,200,.11); color: #9ad2c0; }
.capacity-card small { color: rgba(218,235,229,.44); }
.mini-ring { background: conic-gradient(#93cbbb var(--p), rgba(255,255,255,.10) 0); }
.mini-ring::after { background: #173c38; }
.sidebar-footer { margin-top: auto; }
.sync-status { display: flex; align-items: center; gap: 9px; margin: 0 6px 6px; padding: 9px 8px; color: rgba(222,238,233,.62); }
.sync-status > i { width: 8px; height: 8px; border-radius: 50%; background: #73c99f; box-shadow: 0 0 0 4px rgba(115,201,159,.09); }
.sync-status span { display: flex; flex-direction: column; }
.sync-status strong { font-size: 9px; }
.sync-status small { font-size: 8px; color: rgba(222,238,233,.35); }
.prototype-label { margin: 7px 8px 0; color: rgba(219,236,231,.25); }

.app-shell.is-sidebar-collapsed { --sidebar: 84px; }
.app-shell.is-sidebar-collapsed .sidebar { padding-inline: 12px; }
.app-shell.is-sidebar-collapsed .brand { justify-content: center; padding-inline: 0; }
.app-shell.is-sidebar-collapsed .brand-copy,
.app-shell.is-sidebar-collapsed .sidebar-collapse,
.app-shell.is-sidebar-collapsed .sidebar-create > span:nth-child(2),
.app-shell.is-sidebar-collapsed .nav-section-label,
.app-shell.is-sidebar-collapsed .nav-item span,
.app-shell.is-sidebar-collapsed .nav-item em,
.app-shell.is-sidebar-collapsed .capacity-card > div:nth-child(2),
.app-shell.is-sidebar-collapsed .mini-ring,
.app-shell.is-sidebar-collapsed .sync-status span,
.app-shell.is-sidebar-collapsed .prototype-label { display: none; }
.app-shell.is-sidebar-collapsed .sidebar-create { justify-content: center; padding: 7px; }
.app-shell.is-sidebar-collapsed .nav-item { justify-content: center; padding: 0; }
.app-shell.is-sidebar-collapsed .nav-item.is-active { box-shadow: inset 0 0 0 1px rgba(194,226,215,.13); }
.app-shell.is-sidebar-collapsed .capacity-card { display: flex; justify-content: center; padding: 8px; }
.app-shell.is-sidebar-collapsed .sidebar-settings { margin-top: 0; }
.app-shell.is-sidebar-collapsed .sync-status { justify-content: center; }

/* Top bar */
.topbar {
  height: var(--topbar); padding: 0 28px; background: rgba(249,247,242,.88); border-bottom: 1px solid rgba(221,218,210,.78);
  backdrop-filter: blur(20px) saturate(125%);
}
.topbar-titles { min-width: 0; }
.topbar-meta { display: flex; align-items: center; gap: 9px; }
.eyebrow { color: #8a9691; font-size: 8px; letter-spacing: .15em; }
.open-status { display: inline-flex; align-items: center; gap: 5px; color: #668079; font-size: 8px; font-weight: 720; }
.open-status i { width: 6px; height: 6px; border-radius: 50%; background: #56ad7d; box-shadow: 0 0 0 3px rgba(86,173,125,.10); }
.topbar h1 { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -.035em; }
.topbar-actions { gap: 8px; }
.today-pill {
  min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid #e0ddd5; border-radius: 11px;
  background: rgba(255,255,255,.55); color: #60716b; font-size: 10px; font-weight: 680; white-space: nowrap;
}
.today-pill svg { width: 14px; color: var(--aqua-dark); }
.top-quick { min-height: 38px; padding: 0 13px; background: var(--forest); color: #fff; border-radius: 11px; font-size: 10px; }
.top-quick:hover { background: #235049; }
.search-trigger { width: min(300px, 25vw); height: 39px; border-color: #dfddd6; border-radius: 11px; background: rgba(255,255,255,.70); }
.icon-button { border-color: #dfddd6; border-radius: 11px; background: rgba(255,255,255,.68); }
.avatar-button > span { border-radius: 12px; background: linear-gradient(145deg, #cdb38e, #aa7f54); }
.notification-dot { background: #b6676d; border-color: #f8f6f1; }

/* Content & typography */
.content-wrap { max-width: 1720px; padding: 0 28px 42px; }
.view { padding-top: 22px; }
.section-kicker { color: #88958f; letter-spacing: .14em; }
.page-subtitle { font-family: var(--display); font-size: 27px; font-weight: 600; letter-spacing: -.035em; }
.page-description { max-width: 640px; margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.panel {
  background: rgba(255,254,250,.93); border: 1px solid rgba(224,221,212,.9); border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
.panel-head { min-height: 68px; padding: 16px 18px; border-bottom-color: #ece9e2; }
.panel-head h3 { font-size: 14px; font-weight: 760; }
.button { min-height: 41px; border-radius: 12px; font-size: 10px; letter-spacing: .005em; }
.button-primary { background: var(--forest); }
.button-primary:hover { background: #24544c; }
.button-secondary { border-color: #dedbd3; color: #50645e; background: rgba(255,255,255,.86); }
.text-button { color: var(--aqua-dark); }
.segmented { background: #eeece6; border: 1px solid #e9e6df; }
.segmented button { min-height: 30px; color: #74827d; }
.segmented button.is-active { color: var(--forest); }
.compact-select, input, select, textarea { border-color: #ddd9d0; }

/* Dashboard */
.hero-strip.hero-dashboard {
  min-height: 205px; align-items: stretch; padding: 30px 32px; border-radius: 28px;
  background:
    radial-gradient(circle at 88% 8%, rgba(152,207,188,.24), transparent 25%),
    radial-gradient(circle at 64% 120%, rgba(207,173,126,.17), transparent 34%),
    linear-gradient(115deg, #123631 0%, #194a43 58%, #28675e 130%);
  box-shadow: 0 24px 55px rgba(15,51,46,.16);
}
.hero-strip.hero-dashboard::before {
  content: ""; position: absolute; width: 360px; height: 360px; right: -110px; top: -180px; border-radius: 46% 54% 60% 40%;
  border: 1px solid rgba(255,255,255,.07); transform: rotate(24deg); box-shadow: 0 0 0 42px rgba(255,255,255,.022), 0 0 0 84px rgba(255,255,255,.014);
}
.hero-strip.hero-dashboard::after { width: 180px; height: 180px; right: 38%; top: 92px; border-color: rgba(255,255,255,.045); }
.hero-copy { align-self: center; max-width: 700px; }
.hero-kicker { color: #acd9ca; }
.hero-strip h2 { margin-top: 11px; font-family: var(--display); font-size: clamp(30px, 3vw, 47px); font-weight: 500; letter-spacing: -.047em; }
.hero-strip p { color: rgba(231,243,239,.7); font-size: 12px; }
.hero-signal-row { display: flex; flex-wrap: wrap; gap: 9px 17px; margin-top: 21px; }
.hero-signal-row > span { display: inline-flex; align-items: center; gap: 7px; color: rgba(239,248,245,.77); font-size: 9px; }
.signal-dot { width: 7px; height: 7px; border-radius: 50%; }
.signal-dot.good { background: #7bd0a0; box-shadow: 0 0 0 4px rgba(123,208,160,.10); }
.signal-dot.calm { background: #8dc8d0; box-shadow: 0 0 0 4px rgba(141,200,208,.10); }
.signal-dot.attention { background: #e6ba7d; box-shadow: 0 0 0 4px rgba(230,186,125,.10); }
.hero-action-card {
  width: min(360px, 34%); align-self: center; display: flex; flex-direction: column; gap: 4px; padding: 19px 20px;
  border: 1px solid rgba(255,255,255,.13); border-radius: 19px; background: rgba(255,255,255,.095); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.hero-action-card small { color: #acd4c8; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.hero-action-card > strong { margin-top: 4px; font-size: 15px; color: #fff; }
.hero-action-card > span { color: rgba(229,241,237,.65); font-size: 10px; }
.hero-action-card .button { margin-top: 13px; align-self: flex-start; }
.paris-clock-card {
  min-height: 86px; display: flex; align-items: center; gap: 15px; margin: 15px 0 0; padding: 14px 18px;
  border: 1px solid rgba(214,216,208,.92); border-radius: 19px;
  background: linear-gradient(115deg, rgba(255,254,250,.98), rgba(237,245,240,.9));
  box-shadow: var(--shadow-xs); position: relative; overflow: hidden;
}
.paris-clock-card::after { content: ""; position: absolute; width: 120px; height: 120px; right: -40px; top: -72px; border-radius: 50%; background: rgba(103,178,157,.10); }
.paris-clock-icon { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 15px; background: var(--forest); color: #fff; box-shadow: 0 8px 18px rgba(23,63,58,.16); }
.paris-clock-icon svg { width: 19px; height: 19px; }
.paris-clock-main { display: flex; flex-direction: column; gap: 2px; }
.paris-clock-main > span { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.paris-clock-main time { font-family: var(--display); color: var(--forest); font-size: 31px; font-weight: 600; line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.paris-clock-meta { margin-left: auto; padding-right: 13px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; position: relative; z-index: 1; }
.paris-clock-meta time { color: var(--ink); font-family: var(--display); font-size: 16px; font-weight: 600; }
.paris-clock-meta span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 8px; font-weight: 700; }
.paris-clock-meta i { width: 6px; height: 6px; border-radius: 50%; background: #56b58e; box-shadow: 0 0 0 4px rgba(86,181,142,.10); }
.quick-action-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 11px; margin: 15px 0; }
.quick-action-grid > button {
  min-height: 66px; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid rgba(221,218,210,.92);
  border-radius: 16px; background: rgba(255,254,250,.84); text-align: left; box-shadow: var(--shadow-xs); transition: .18s ease;
}
.quick-action-grid > button:hover { transform: translateY(-2px); background: #fffefa; box-shadow: var(--shadow-sm); border-color: #d7d2c7; }
.quick-action-icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: var(--aqua-soft); color: var(--aqua-dark); }
.quick-action-icon svg { width: 16px; }
.quick-action-grid > button > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.quick-action-grid strong { font-size: 10px; }
.quick-action-grid small { color: var(--muted-2); font-size: 8px; margin-top: 2px; }
.quick-action-grid kbd { margin-left: auto; }
.kpi-grid { gap: 12px; margin: 0 0 15px; }
.kpi-card { min-height: 119px; padding: 18px; border-radius: 18px; background: rgba(255,254,250,.94); }
.kpi-card::after { width: 84px; height: 84px; right: -32px; top: -32px; opacity: .6; }
.kpi-head span:first-child { font-size: 9px; }
.kpi-main strong { font-family: var(--display); font-size: 29px; font-weight: 600; }
.dashboard-grid { grid-template-columns: minmax(0, 1.35fr) minmax(330px, .9fr); gap: 15px; }
.journey-item { min-height: 71px; }
.journey-client strong { font-size: 10px; }
.journey-client span { font-size: 8px; }
.revenue-panel, .schedule-panel, .occupancy-panel, .opportunities-panel { border-radius: 20px; }
.big-ring { background: conic-gradient(var(--aqua) var(--p), #edf0eb 0); }
.big-ring::after { background: #fffefa; }
.capacity-timeline span { border-radius: 4px 4px 2px 2px; }

/* Planner */
.page-toolbar { min-height: 56px; }
.date-button { border-radius: 12px; border-color: #ddd9d0; background: #fffefa; }
.planning-summary { gap: 10px; margin: 14px 0; }
.summary-chip { min-height: 70px; padding: 12px 14px; border-radius: 16px; background: rgba(255,254,250,.9); border-color: #e1ded6; }
.summary-chip strong { font-family: var(--display); font-size: 19px; font-weight: 600; }
.summary-chip small { font-size: 8px; }
.density-control { display: inline-flex; }
.planner-legend {
  display: flex; align-items: center; gap: 15px; min-height: 34px; padding: 0 5px; color: #73817c; font-size: 8px;
}
.planner-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; }
.legend-dot.confirmed { background: var(--aqua); }
.legend-dot.arrived { background: var(--gold); }
.legend-dot.care { background: var(--plum); }
.planner-hint { margin-left: auto; color: #98a19e; }
.planner-shell { border-radius: 20px; border-color: #ddd9d1; background: #fffefa; box-shadow: var(--shadow-sm); }
.planner-head { background: #faf8f3; border-bottom-color: #e4e0d8; }
.resource-head { padding: 12px 13px; }
.resource-head strong { font-size: 10px; }
.resource-head span { font-size: 8px; }
.resource-avatar { border-radius: 11px; box-shadow: inset 0 1px rgba(255,255,255,.24); }
.resource-util { background: var(--aqua-soft); color: var(--aqua-dark); }
.time-column { background: #fbfaf6; }
.resource-column { background: rgba(255,254,250,.78); }
.resource-column:nth-of-type(even) { background: rgba(248,247,242,.62); }
.quarter-hour-line { border-top-color: #d9d5cc; }
.quarter-hour-line.is-hour { border-top-color: #cec9bf; }
.appointment-block {
  left: 6px; right: 6px; border-radius: 11px; padding: 8px 9px; border-left-width: 3px;
  box-shadow: 0 4px 11px rgba(28,51,44,.07); transition: transform .16s ease, box-shadow .16s ease;
}
.appointment-block:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(28,51,44,.12); z-index: 3; }
.appointment-block strong { font-size: 8.5px; }
.appointment-block > span:last-child { font-size: 7px; }
.current-time-line { background: #c16368; }
.current-time-line::before { background: #c16368; }
.empty-slot-hint { border-radius: 9px; color: var(--aqua-dark); background: rgba(222,238,233,.70); border: 1px dashed rgba(47,129,121,.24); }
.mobile-agenda { display: none; }

/* Waitlist */
.waitlist-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 15px 0; }
.waitlist-stat { min-height: 102px; padding: 16px; border: 1px solid #e1ded6; border-radius: 17px; background: rgba(255,254,250,.92); box-shadow: var(--shadow-xs); }
.waitlist-stat span { color: var(--muted); font-size: 9px; font-weight: 680; }
.waitlist-stat strong { display: block; margin-top: 8px; font-family: var(--display); font-size: 28px; font-weight: 600; }
.waitlist-stat small { color: var(--muted-2); font-size: 8px; }
.waitlist-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(310px,.72fr); gap: 15px; align-items: start; }
.waitlist-list { padding: 4px 17px 10px; }
.waitlist-item { display: grid; grid-template-columns: 42px minmax(0,1.2fr) minmax(190px,.85fr) auto; gap: 12px; align-items: center; min-height: 91px; border-bottom: 1px solid #ece9e2; }
.waitlist-item:last-child { border-bottom: 0; }
.wait-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: var(--aqua-soft); color: var(--aqua-dark); font-size: 10px; font-weight: 800; }
.wait-client strong, .wait-match strong { display: block; font-size: 10px; }
.wait-client span, .wait-match span { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.wait-tags { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.wait-tags span { padding: 3px 6px; border-radius: 999px; background: #f0eee8; color: #697771; font-size: 7px; font-weight: 700; }
.wait-match { padding: 10px 11px; border-radius: 12px; background: var(--green-soft); color: #315e47; }
.wait-match.no-match { background: #f3f1ec; color: #6c7773; }
.wait-actions { display: flex; flex-direction: column; gap: 5px; }
.wait-actions button { min-height: 31px; padding: 0 10px; border-radius: 9px; border: 1px solid #ddd9d0; background: #fff; color: #586963; font-size: 8px; font-weight: 760; }
.wait-actions button.primary { border-color: var(--forest); background: var(--forest); color: #fff; }
.gap-list { padding: 6px 16px 14px; }
.gap-item { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; min-height: 73px; border-bottom: 1px solid #ece9e2; }
.gap-item:last-child { border-bottom: 0; }
.gap-time { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; background: var(--sand-soft); color: #7a5a36; font-size: 9px; font-weight: 800; }
.gap-item strong { display: block; font-size: 9px; }
.gap-item span { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.gap-item button { border: 0; background: transparent; color: var(--aqua-dark); font-size: 8px; font-weight: 800; }

/* Public booking experience */
.booking-layout { grid-template-columns: minmax(0,1fr) 340px; gap: 16px; max-width: 1500px; margin: 0 auto; }
.booking-preview {
  min-height: 760px; border: 1px solid #ddd9d0; border-radius: 28px; background:
    radial-gradient(circle at 96% 4%, rgba(47,129,121,.08), transparent 25rem),
    linear-gradient(180deg, #fffefa, #fbfaf6);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.public-brand { min-height: 78px; padding: 0 28px; border-bottom: 1px solid #ece8df; background: rgba(255,254,250,.82); }
.public-brand .public-logo { width: 39px; height: 39px; }
.public-brand .public-logo svg { width: 18px; }
.public-brand strong { font-family: var(--display); font-size: 17px; letter-spacing: .03em; }
.public-brand small { letter-spacing: .16em; }
.public-preview-close { display: none; margin-left: auto; width: 37px; height: 37px; place-items: center; border: 1px solid #dedbd3; border-radius: 11px; background: #fff; color: var(--ink); }
.booking-trust-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 26px; padding: 10px 18px; border-bottom: 1px solid #ebe7de; background: #f7f4ee; color: #687771; font-size: 8px; }
.booking-trust-strip span { display: inline-flex; align-items: center; gap: 6px; }
.booking-trust-strip svg { width: 13px; color: var(--aqua-dark); }
.booking-steps { padding: 22px 28px 12px; }
.booking-step-index { width: 29px; height: 29px; background: #f0eee8; }
.booking-step.is-active .booking-step-index { background: var(--forest); box-shadow: 0 7px 17px rgba(23,63,58,.20); }
.booking-step.is-done .booking-step-index { background: var(--aqua-soft); color: var(--aqua-dark); }
.booking-stage { padding: 13px 30px 35px; }
.booking-stage-head { max-width: 720px; }
.booking-stage-head > span { color: var(--aqua-dark); }
.booking-stage-head h2 { font-family: var(--display); font-size: clamp(28px,3vw,42px); font-weight: 500; letter-spacing: -.045em; }
.booking-stage-head p { font-size: 11px; }
.public-category-tabs { background: #f0eee8; border: 1px solid #e8e4dc; padding: 4px; border-radius: 13px; }
.public-category-tabs button { border-radius: 9px; }
.public-category-tabs button.is-active { background: #fffefa; color: var(--forest); box-shadow: 0 3px 10px rgba(24,45,39,.08); }
.public-service-grid { gap: 11px; }
.public-service-card { min-height: 193px; padding: 17px; border-radius: 17px; background: #fffefa; border-color: #e1ddd4; }
.public-service-card:hover { transform: translateY(-3px); border-color: rgba(47,129,121,.38); box-shadow: 0 15px 28px rgba(28,55,47,.10); }
.public-service-card.is-selected { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(47,129,121,.10), 0 15px 28px rgba(28,55,47,.10); }
.public-service-card > strong { font-family: var(--display); font-size: 17px; font-weight: 600; }
.public-service-card p { font-size: 9px; line-height: 1.55; }
.public-service-card footer { border-top-color: #ece8df; }
.public-service-card footer b { color: var(--forest); }
.date-chip { border-radius: 14px; border-color: #e0dcd3; background: #fffefa; }
.date-chip.is-active { background: var(--forest); border-color: var(--forest); box-shadow: 0 10px 20px rgba(23,63,58,.16); }
.time-slot { min-height: 45px; border-radius: 12px; background: #fffefa; border-color: #dedad1; }
.time-slot:hover, .time-slot.is-active { background: var(--forest); border-color: var(--forest); color: #fff; }
.booking-form-grid input, .booking-form-grid select, .booking-form-grid textarea { background: #fffefa; border-radius: 11px; }
.addon-option { border-radius: 14px; background: #fffefa; }
.booking-summary-card { border-radius: 18px; border-color: #dfdbd2; background: #fffefa; }
.payment-method { border-radius: 15px; background: #fffefa; }
.payment-method.is-active { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(47,129,121,.09); }
.booking-sidebar { top: calc(var(--topbar) + 20px); border-radius: 22px; background:
  radial-gradient(circle at 100% 0, rgba(171,215,201,.17), transparent 18rem),
  linear-gradient(160deg, #153a36, #102d2a); box-shadow: var(--shadow-md); }
.booking-sidebar h3 { font-family: var(--display); font-size: 29px; font-weight: 500; letter-spacing: -.035em; }
.preview-badge { color: #b4daca; background: rgba(197,227,216,.08); border: 1px solid rgba(197,227,216,.09); }
.preview-badge i { width: 6px; height: 6px; border-radius: 50%; background: #81c9a5; }
.immersive-preview-btn { margin-top: 18px; background: #eaf2ee; color: var(--forest); }
.immersive-preview-btn:hover { background: #fff; }
.preview-score { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 3px 12px; margin-top: 12px; padding: 13px; border-radius: 14px; border: 1px solid rgba(255,255,255,.075); background: rgba(255,255,255,.045); }
.preview-score > span { color: rgba(235,245,241,.62); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .11em; }
.preview-score > strong { grid-row: span 2; font-family: var(--display); font-size: 27px; color: #fff; }
.preview-score > strong span { font-family: var(--font); font-size: 9px; color: rgba(255,255,255,.45); }
.preview-score small { color: rgba(233,244,240,.45); font-size: 7.5px; }

body.public-preview-mode { background: #e9e5dc; }
body.public-preview-mode .sidebar,
body.public-preview-mode .topbar,
body.public-preview-mode .mobile-tabs,
body.public-preview-mode .mobile-fab { display: none !important; }
body.public-preview-mode .app-shell { display: block; }
body.public-preview-mode .main-area { min-height: 100vh; }
body.public-preview-mode .content-wrap { max-width: none; padding: 20px; }
body.public-preview-mode .view { display: none !important; padding: 0; }
body.public-preview-mode #view-booking { display: block !important; }
body.public-preview-mode .booking-layout { display: block; max-width: 1120px; margin: 0 auto; }
body.public-preview-mode .booking-sidebar { display: none; }
body.public-preview-mode .booking-preview { min-height: calc(100vh - 40px); box-shadow: 0 30px 90px rgba(22,45,39,.20); }
body.public-preview-mode .public-preview-close { display: grid; }
body.public-preview-mode .public-brand { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(15px); }

/* CRM, cards & commerce refinement */
.client-stat, .gift-stat, .analytics-stat { border-radius: 17px; background: rgba(255,254,250,.92); border-color: #e1ded6; }
.client-stat strong, .gift-stat strong, .analytics-stat strong { font-family: var(--display); font-weight: 600; }
.data-table th { background: #faf8f3; color: #87938e; font-size: 8px; letter-spacing: .07em; }
.data-table td { border-bottom-color: #eeeae3; }
.data-table tr:hover td { background: #fbfaf6; }
.client-avatar { border-radius: 13px; }
.tag { background: #f0eee8; }
.service-card { border-radius: 18px; background: #fffefa; border-color: #e1ded6; }
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.service-card h3 { font-family: var(--display); font-size: 18px; font-weight: 600; }
.catalog-insight { border-radius: 17px; background: linear-gradient(100deg, #e6f0ec, #f1eee7); border-color: #dce5df; }
.gift-card-preview { border-radius: 22px; background:
  radial-gradient(circle at 18% 12%, rgba(208,190,155,.30), transparent 27%),
  radial-gradient(circle at 86% 84%, rgba(119,177,159,.22), transparent 34%),
  linear-gradient(135deg, #173d38, #28564f 60%, #193c38); }
.gift-card-main strong { font-family: var(--display); font-weight: 500; }
.checkout-panel { border-radius: 22px 0 0 22px; background: #fffefa; }
.pos-product-card { border-radius: 16px; background: #fffefa; border-color: #e1ded6; }
.team-card { border-radius: 18px; background: #fffefa; border-color: #e1ded6; }
.settings-nav button.is-active { background: var(--forest); }

/* Modals, drawers & notifications */
.modal-overlay { backdrop-filter: blur(7px); background: rgba(10,28,24,.46); }
.modal { border-radius: 24px; background: #fffefa; box-shadow: 0 36px 100px rgba(8,31,26,.25); }
.modal-head { background: linear-gradient(180deg, #faf8f3, #fffefa); }
.modal-head h2, .drawer-head h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.035em; }
.form-field input, .form-field select, .form-field textarea { border-radius: 11px; background: #fffefa; }
.drawer { background: #fffefa; box-shadow: -25px 0 70px rgba(12,35,30,.19); }
.drawer-head { color: #173d38; background: linear-gradient(160deg, #eee9df, #fffefa); border-bottom: 1px solid #ded9ce; }
.drawer-head::after { border-color: rgba(23,61,56,.10); box-shadow: 0 0 0 27px rgba(23,61,56,.025); }
.drawer-head h2 { color: #173d38; }
.drawer-head p { color: #4d625d; font-weight: 600; }
.drawer-head-actions button { border-color: #c9d1cb; background: rgba(255,255,255,.82); color: #173d38; font-weight: 750; box-shadow: 0 2px 7px rgba(23,61,56,.06); }
.drawer-head-actions button:hover { border-color: #173d38; background: #173d38; color: #fff; }
.drawer-head-actions button:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(62,155,112,.22); }
.toast { border-radius: 15px; background: #173d38; color: #fff; box-shadow: 0 17px 35px rgba(10,31,27,.22); }
.toast span { color: rgba(255,255,255,.63); }
.toast-icon { background: rgba(181,221,207,.14); color: #b8dfd1; }
.command-box { border-radius: 22px; background: #fffefa; box-shadow: 0 30px 100px rgba(10,31,27,.25); }
.command-result.is-active { background: var(--aqua-soft); }

/* Mobile navigation is hidden on larger screens */
.mobile-tabs, .mobile-fab { display: none; }

@media (max-width: 1380px) {
  :root { --sidebar: 244px; }
  .today-pill { display: none; }
  .dashboard-grid { grid-template-columns: minmax(0,1.2fr) minmax(320px,.85fr); }
  .hero-action-card { width: min(335px, 36%); }
}

@media (max-width: 1160px) {
  .top-quick span { display: none; }
  .top-quick { width: 39px; padding: 0; }
  .search-trigger { width: 220px; }
  .quick-action-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-strip.hero-dashboard { min-height: 230px; }
  .dashboard-grid, .waitlist-layout { grid-template-columns: 1fr; }
  .gap-panel { order: -1; }
  .booking-layout { grid-template-columns: 1fr; }
  .booking-sidebar { position: relative; top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .booking-sidebar > h3, .booking-sidebar > p, .booking-sidebar > .preview-badge { grid-column: 1 / -1; }
  .preview-score { margin-top: 0; }
  .share-link-card { align-self: end; }
  .waitlist-item { grid-template-columns: 42px minmax(0,1fr) minmax(180px,.7fr) auto; }
}

@media (max-width: 1050px) {
  :root { --sidebar: 86px; }
  .sidebar { padding-inline: 12px; }
  .brand { justify-content: center; padding-inline: 0; }
  .brand-copy, .sidebar-collapse, .sidebar-create > span:nth-child(2), .nav-section-label, .nav-item span, .nav-item em,
  .capacity-card > div:nth-child(2), .mini-ring, .sync-status span, .prototype-label { display: none; }
  .sidebar-create { justify-content: center; padding: 7px; }
  .nav-item { justify-content: center; padding: 0; }
  .capacity-card { display: flex; justify-content: center; padding: 8px; }
  .sync-status { justify-content: center; }
  .search-trigger { width: 210px; }
  .hero-strip.hero-dashboard { min-height: 250px; }
  .hero-action-card { width: 38%; }
  .waitlist-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  :root { --topbar: 66px; --sidebar: 280px; }
  body { padding-bottom: 76px; }
  .app-shell { display: block; }
  .sidebar {
    width: min(84vw, 310px); transform: translateX(-104%); z-index: 80; padding: 18px 14px;
    box-shadow: 30px 0 80px rgba(8,27,23,.28);
  }
  .sidebar.is-open { transform: translateX(0); }
  .brand { justify-content: flex-start; padding-inline: 7px; }
  .brand-copy, .sidebar-collapse, .sidebar-create > span:nth-child(2), .nav-section-label, .nav-item span, .nav-item em,
  .capacity-card > div:nth-child(2), .mini-ring, .sync-status span, .prototype-label { display: initial; }
  .sidebar-collapse { display: none; }
  .sidebar-create { justify-content: flex-start; padding: 8px 10px; }
  .sidebar-create > span:nth-child(2) { display: flex; }
  .nav-section-label { display: block; }
  .nav-item { justify-content: flex-start; padding: 0 11px; }
  .capacity-card { display: grid; justify-content: initial; padding: 11px; }
  .sync-status { justify-content: flex-start; }
  .topbar { padding: 0 13px; }
  .topbar-left { gap: 9px; }
  .mobile-menu { display: block; background: #fffefa; border: 1px solid #e2ded6; }
  .topbar h1 { font-size: 21px; }
  .topbar-meta .open-status { display: none; }
  .eyebrow { font-size: 7px; }
  .topbar-actions .search-trigger, .topbar-actions .top-quick, .topbar-actions .avatar-button, .today-pill { display: none; }
  .icon-button { width: 38px; height: 38px; }
  .content-wrap { padding: 0 13px 25px; }
  .view { padding-top: 14px; }
  .hero-strip.hero-dashboard { min-height: 0; display: block; padding: 24px 22px; border-radius: 23px; }
  .hero-strip h2 { font-size: 34px; }
  .hero-action-card { width: 100%; margin-top: 22px; padding: 16px; }
  .hero-action-card .button { width: 100%; }
  .paris-clock-card { min-height: 78px; gap: 12px; padding: 13px 14px; border-radius: 17px; }
  .paris-clock-icon { width: 41px; height: 41px; border-radius: 13px; }
  .paris-clock-main time { font-size: 27px; }
  .paris-clock-meta { padding-right: 5px; }
  .paris-clock-meta time { font-size: 14px; }
  .quick-action-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 11px 0; }
  .quick-action-grid > button { min-height: 74px; padding: 10px; }
  .quick-action-grid kbd { display: none; }
  .kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .kpi-card { min-height: 132px; padding: 15px; }
  .kpi-main { display: block; }
  .kpi-main strong { display: block; font-size: 25px; }
  .trend { display: inline-block; margin-top: 7px; }
  .sparkline { width: 62px; }
  .dashboard-grid { gap: 11px; }
  .panel { border-radius: 17px; }
  .panel-head { min-height: 60px; padding: 13px 14px; }
  .schedule-panel .panel-head { align-items: flex-start; flex-direction: column; }
  .journey-list { padding-inline: 13px; }
  .journey-item { grid-template-columns: 45px 3px minmax(0,1fr); min-height: 76px; }
  .journey-meta { grid-column: 3; justify-content: space-between; }
  .revenue-panel { min-height: 390px; }
  .page-toolbar { align-items: flex-start; gap: 10px; }
  .page-toolbar, .toolbar-right { flex-wrap: wrap; }
  .page-subtitle { font-size: 25px; }
  .date-nav { width: 100%; }
  .date-button { flex: 1; }
  .density-control, #planningFilterBtn { display: none; }
  .planning-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .summary-chip { min-height: 74px; }
  .planner-legend, .planner-shell { display: none; }
  .mobile-agenda { display: block; }
  .mobile-agenda-day { display: flex; align-items: center; justify-content: space-between; margin: 8px 2px 10px; }
  .mobile-agenda-day strong { font-family: var(--display); font-size: 22px; font-weight: 600; }
  .mobile-agenda-day span { color: var(--muted); font-size: 9px; }
  .mobile-agenda-list { display: grid; gap: 9px; }
  .mobile-agenda-item { display: grid; grid-template-columns: 51px 4px minmax(0,1fr) auto; gap: 9px; align-items: stretch; min-height: 84px; padding: 11px; border: 1px solid #e1ded6; border-radius: 16px; background: #fffefa; box-shadow: var(--shadow-xs); text-align: left; }
  .mobile-agenda-time strong { display: block; font-size: 11px; }
  .mobile-agenda-time span { color: var(--muted); font-size: 8px; }
  .mobile-agenda-line { border-radius: 99px; background: var(--tone); }
  .mobile-agenda-copy strong { display: block; font-size: 10px; }
  .mobile-agenda-copy span { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.45; }
  .mobile-agenda-item > svg { align-self: center; width: 15px; color: #9ba49f; }
  .waitlist-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .waitlist-item { grid-template-columns: 38px minmax(0,1fr) auto; padding: 11px 0; }
  .wait-match { grid-column: 2 / -1; }
  .wait-actions { grid-column: 2 / -1; flex-direction: row; }
  .booking-preview { min-height: 720px; border-radius: 22px; }
  .booking-sidebar { display: block; border-radius: 20px; }
  .public-brand { min-height: 67px; padding: 0 17px; }
  .booking-trust-strip { gap: 7px 12px; justify-content: flex-start; padding-inline: 17px; }
  .booking-steps { padding: 17px 17px 8px; overflow-x: auto; justify-content: flex-start; }
  .booking-step { min-width: 103px; }
  .booking-stage { padding: 11px 17px 28px; }
  .booking-stage-head h2 { font-size: 32px; }
  .public-category-tabs { overflow-x: auto; justify-content: flex-start; flex-wrap: nowrap; }
  .public-category-tabs button { white-space: nowrap; }
  .public-service-grid { grid-template-columns: 1fr; }
  .booking-date-grid { overflow-x: auto; grid-template-columns: repeat(10, 76px); padding-bottom: 5px; }
  .slot-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .booking-form-grid { grid-template-columns: 1fr; }
  .form-span-2 { grid-column: auto; }
  .booking-nav { position: sticky; bottom: 0; margin: 22px -17px -28px; padding: 12px 17px; background: rgba(255,254,250,.92); backdrop-filter: blur(14px); border-top: 1px solid #e8e4dc; z-index: 5; }
  body.public-preview-mode .content-wrap { padding: 0; }
  body.public-preview-mode .booking-preview { min-height: 100vh; border: 0; border-radius: 0; }
  .pos-layout { display: block; }
  .checkout-panel { position: relative; width: auto; min-height: 500px; border-radius: 19px; margin-top: 12px; }
  .settings-layout { display: block; }
  .settings-nav { display: flex; overflow-x: auto; gap: 5px; margin-bottom: 11px; }
  .settings-nav button { white-space: nowrap; }
  .mobile-tabs {
    position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 55; height: 64px; display: grid; grid-template-columns: repeat(5,1fr); align-items: center;
    padding: 5px 6px; border: 1px solid rgba(222,218,209,.9); border-radius: 20px; background: rgba(255,254,250,.93); backdrop-filter: blur(18px) saturate(125%);
    box-shadow: 0 15px 45px rgba(20,43,36,.18);
  }
  .mobile-tabs .mobile-tab { min-height: 51px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0; border-radius: 14px; color: #7d8a85; background: transparent; box-shadow: none; }
  .mobile-tabs .mobile-tab svg { width: 18px; height: 18px; }
  .mobile-tabs .mobile-tab span { flex: 0; font-size: 7px; font-weight: 720; }
  .mobile-tabs .mobile-tab.is-active { background: var(--aqua-soft); color: var(--forest); box-shadow: none; }
  .mobile-tabs .mobile-tab-main { position: relative; overflow: visible; }
  .mobile-tab-orb { width: 38px; height: 38px; margin-top: -24px; display: grid !important; place-items: center; border: 5px solid var(--paper); border-radius: 50%; background: var(--forest); color: #fff; box-shadow: 0 8px 18px rgba(23,63,58,.23); }
  .mobile-tabs .mobile-tab-main.is-active { background: transparent; }
  .mobile-fab { display: none; }
  .modal { width: calc(100% - 18px); max-height: calc(100vh - 18px); border-radius: 20px; }
  .drawer { width: min(100%, 430px); }
}

@media (max-width: 430px) {
  .hero-strip h2 { font-size: 30px; }
  .hero-signal-row { gap: 8px 12px; }
  .paris-clock-card { display: grid; grid-template-columns: auto minmax(0,1fr); }
  .paris-clock-meta { grid-column: 1 / -1; width: 100%; padding: 10px 0 0; border-top: 1px solid rgba(214,216,208,.75); align-items: flex-start; }
  .quick-action-grid { grid-template-columns: 1fr 1fr; }
  .quick-action-grid > button { align-items: flex-start; flex-direction: column; min-height: 104px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .kpi-card { min-height: 142px; }
  .kpi-head { align-items: flex-start; }
  .kpi-main strong { font-size: 23px; }
  .kpi-card > small { max-width: 78%; line-height: 1.35; }
  .planning-summary, .waitlist-kpis { grid-template-columns: 1fr 1fr; }
  .booking-trust-strip span:last-child { display: none; }
  .slot-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .toolbar-right .button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Settings experience */
.settings-subtitle { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.settings-panel { overflow: hidden; }
.settings-panel > .settings-form { padding-bottom: 6px; }
.settings-savebar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 5px 22px 22px; padding: 14px 0 0;
  border-top: 1px solid #ece8df; color: var(--muted); font-size: 10px;
}
.hours-grid { display: grid; gap: 7px; }
.hours-row {
  min-height: 50px; display: grid; grid-template-columns: minmax(90px,1fr) 90px 116px 18px 116px; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid #e9e5dc; border-radius: 13px; background: #fcfbf8;
}
.hours-row > strong { font-size: 11px; }
.hours-row input[type="time"] { width: 100%; min-height: 34px; border: 1px solid #dedbd3; border-radius: 9px; background: #fff; padding: 0 9px; font-size: 10px; }
.hours-row > span { color: var(--muted-2); text-align: center; font-size: 9px; }
.mini-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px !important; margin: 0 !important; color: var(--muted) !important; font-size: 9px !important; }
.mini-check input { accent-color: var(--aqua-dark); }
.staff-schedule-form { display: grid; gap: 12px; }
.staff-schedule-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid #dfe5df; border-radius: 13px; background: #f1f6f3; }
.staff-schedule-summary strong { display: block; margin-top: 2px; color: #173d38; font-size: 13px; }
.staff-schedule-summary > span { max-width: 220px; color: var(--muted); font-size: 8px; text-align: right; }
.staff-hours-row { transition: opacity .16s ease, background-color .16s ease; }
.staff-hours-row.is-off { background: #efefec; opacity: .72; }
.staff-hours-row.is-off input[type="time"] { color: #8e9692; background: #e5e6e2; }
.staff-schedule-help { margin: 0; padding: 10px 12px; border-left: 3px solid var(--aqua-dark); background: var(--aqua-soft); color: #45645e; font-size: 8px; }
.input-help { color: var(--muted-2); font-size: 8px; font-weight: 500; }
.settings-callout, .settings-preview-mini {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 13px; padding: 15px;
  border: 1px solid #e3ded3; border-radius: 15px; background: linear-gradient(135deg,#f9f6ef,#f2eee5);
}
.settings-callout strong, .settings-preview-mini strong { display: block; font-size: 11px; }
.settings-callout p, .settings-preview-mini p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.settings-preview-mini { background: linear-gradient(135deg,#eef5f1,#e5efeb); border-color: #d8e6df; }
.integration-list, .access-list { display: grid; gap: 8px; }
.integration-row, .access-row {
  min-height: 60px; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid #e8e4dc; border-radius: 13px; background: #fff;
}
.integration-logo {
  min-width: 40px; height: 40px; display: grid; place-items: center; padding: 0 7px; border-radius: 11px;
  background: var(--aqua-soft); color: var(--aqua-dark); font-size: 8px; font-weight: 850; letter-spacing: .04em;
}
.integration-row strong, .access-row strong { display: block; font-size: 10px; }
.integration-row span:not(.setting-badge), .access-row div > span { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }
.integration-row > button, .access-row > button { border: 0; background: transparent; color: var(--aqua-dark); font-size: 9px; font-weight: 800; }
.setting-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; background: #edf1ee; color: #61736b; font-size: 8px; font-weight: 760; white-space: nowrap; }
.setting-badge.is-success { background: var(--green-soft); color: var(--green); }
.setting-badge.is-warning { background: var(--orange-soft); color: #9a6635; }
.mini-avatar { width: 38px; height: 38px; display: grid !important; place-items: center; border-radius: 12px; background: #dcece6; color: var(--forest); font-size: 9px !important; font-weight: 850; }
.data-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 15px; }
.danger-zone {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 17px; padding: 15px;
  border: 1px solid #edd3d5; border-radius: 15px; background: #fff8f8;
}
.danger-zone strong { display: block; font-size: 11px; }
.danger-zone p { margin: 3px 0 0; color: #8b686b; font-size: 9px; }
.button-danger { background: #a94f57; color: #fff; }
.button-danger:hover { background: #91434b; }

@media (max-width: 760px) {
  .settings-savebar, .settings-callout, .settings-preview-mini, .danger-zone { align-items: stretch; flex-direction: column; }
  .settings-savebar .button, .settings-callout .button, .settings-preview-mini .button, .danger-zone .button { width: 100%; }
  .hours-row { grid-template-columns: 1fr auto; gap: 7px; }
  .hours-row input[type="time"] { width: 100%; }
  .hours-row > span { display: none; }
  .hours-row input { grid-column: auto; }
  .staff-schedule-summary { align-items: flex-start; flex-direction: column; }
  .staff-schedule-summary > span { max-width: none; text-align: left; }
  .integration-row, .access-row { grid-template-columns: auto minmax(0,1fr) auto; }
  .integration-row > button, .access-row > button { grid-column: 2 / -1; justify-self: start; padding: 0; }
  .setting-badge { grid-column: 3; grid-row: 1 / span 2; }
}