@font-face {
  font-family: 'FG Gotham Rounded Bold';
  src: local('Gotham Rounded Bold'), local('GothamRounded-Bold');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'FG Gotham Rounded Medium';
  src: local('Gotham Rounded Medium'), local('GothamRounded-Medium');
  font-weight: 500;
  font-display: swap;
}
:root {
  --bg: #060709;
  --bg-2: #11141a;
  --bg-3: #1a1e26;
  --card: rgba(23, 26, 34, 0.96);
  --card-2: rgba(18, 21, 28, 0.98);
  --border: rgba(255,255,255,0.09);
  --border-hover: rgba(255,255,255,0.2);
  --purple: #a44c9f;
  --purple-soft: #8d3d88;
  --purple-dark: #6d3169;
  --teal: #73c7c7;
  --teal-dark: #4fa8a8;
  --text: #ffffff;
  --text-2: rgba(236,238,244,0.78);
  --text-3: rgba(236,238,244,0.48);
  --success: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;
  --panel-start: rgba(164, 76, 159, 0.08);
  --panel-end: rgba(115, 199, 199, 0.05);
  --shadow-soft: 0 24px 48px rgba(5, 7, 10, 0.34);
  --shadow-card: 0 12px 28px rgba(6, 8, 12, 0.2);
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 34px;
}
body.staff-mode.staff-light {
  --bg: #eef3f8;
  --bg-2: #e8eef5;
  --bg-3: #dbe5ef;
  --card: rgba(255,255,255,0.9);
  --card-2: rgba(247,250,253,0.98);
  --border: rgba(86, 103, 127, 0.16);
  --border-hover: rgba(43, 59, 84, 0.28);
  --text: #142033;
  --text-2: rgba(20,32,51,0.78);
  --text-3: rgba(63,79,104,0.58);
  --purple: #8f487d;
  --purple-soft: #7a3d6b;
  --purple-dark: #643257;
  --teal: #2b8f96;
  --teal-dark: #257980;
  --success: #12805f;
  --amber: #a86411;
  --red: #c14545;
  --panel-start: rgba(143,72,125,0.06);
  --panel-end: rgba(43,143,150,0.06);
  --shadow-soft: 0 28px 60px rgba(31, 44, 64, 0.12);
  --shadow-card: 0 14px 30px rgba(31, 44, 64, 0.08);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
html, body {
  background:
    radial-gradient(circle at 12% 0%, rgba(115,199,199,0.08), transparent 20%),
    radial-gradient(circle at 88% 10%, rgba(164,76,159,0.08), transparent 22%),
    linear-gradient(180deg, #040506 0%, #090b0f 48%, #07090c 100%);
  color: var(--text);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
body.auth-locked { overflow:hidden !important; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, select, textarea { font-family:inherit; font-variant-numeric: tabular-nums; }
::selection { background: var(--purple); color:#fff; }

@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideRight { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideLeft { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn { from{opacity:0;transform:scale(0.92)} to{opacity:1;transform:scale(1)} }
@keyframes popIn { 0%{opacity:0;transform:scale(0.5)} 60%{transform:scale(1.08)} 100%{opacity:1;transform:scale(1)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
@keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes auraDrift { 0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(10px,-12px,0) scale(1.04)} 100%{transform:translate3d(0,0,0) scale(1)} }
@keyframes shineSweep { 0%{transform:translateX(-130%) rotate(16deg)} 100%{transform:translateX(220%) rotate(16deg)} }
@keyframes softPulse { 0%,100%{opacity:.58} 50%{opacity:1} }

.fade-in { animation: fadeIn .4s ease-out both; }
.slide-up { animation: slideUp .5s cubic-bezier(0.16,1,0.3,1) both; }
.slide-right { animation: slideRight .45s cubic-bezier(0.16,1,0.3,1) both; }
.slide-left { animation: slideLeft .45s cubic-bezier(0.16,1,0.3,1) both; }
.scale-in { animation: scaleIn .4s cubic-bezier(0.16,1,0.3,1) both; }
.pop-in { animation: popIn .55s cubic-bezier(0.34,1.56,0.64,1) both; }
.shake { animation: shake .4s ease-in-out both; }
.stagger > * { animation: slideUp .5s cubic-bezier(0.16,1,0.3,1) both; }
.stagger > *:nth-child(1){animation-delay:.05s}
.stagger > *:nth-child(2){animation-delay:.1s}
.stagger > *:nth-child(3){animation-delay:.15s}
.stagger > *:nth-child(4){animation-delay:.2s}
.stagger > *:nth-child(5){animation-delay:.25s}
.stagger > *:nth-child(6){animation-delay:.3s}
.stagger > *:nth-child(7){animation-delay:.35s}
.stagger > *:nth-child(8){animation-delay:.4s}

header {
  position:sticky; top:0; z-index:100;
  background: rgba(5,6,9,0.88);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 16px 48px;
  display:flex; align-items:center; justify-content:space-between;
  backdrop-filter: blur(18px);
}
.client-demo-access {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 120;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,18,24,0.84);
  color: rgba(255,255,255,0.86);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.28);
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease;
}
.client-demo-access:hover { background: rgba(24,28,36,0.94); border-color: rgba(255,255,255,0.16); }
.client-demo-access.hidden { display:none !important; }
.site-auth-action {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 121;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,18,24,0.84);
  color: rgba(255,255,255,0.86);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.28);
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease;
}
.site-auth-action:hover { background: rgba(24,28,36,0.94); border-color: rgba(255,255,255,0.16); }
.site-auth-action.hidden { display:none !important; }
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vw, 48px);
  background: #050609;
  color: #f4f7fb;
  font-family: Inter, Aptos, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.auth-overlay.hidden { display:none !important; }
.auth-card {
  width: min(920px, 100%);
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(360px, 1fr);
  overflow: hidden;
  padding: 0;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: #0a0d12;
  box-shadow: 0 24px 80px rgba(0,0,0,.52);
}
.auth-product-panel,
.auth-form-panel {
  min-width: 0;
  padding: clamp(28px, 4vw, 42px);
}
.auth-product-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  border-right: 1px solid rgba(148, 163, 184, .16);
  background: #07090d;
}
.auth-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-wordmark {
  display: flex;
  align-items: center;
  gap: 14px;
}
.auth-orbit-mark {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, .2);
  background: #10151d;
}
.auth-orbit-mark::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 15px;
  width: 28px;
  height: 13px;
  border: 2px solid #7c6df2;
  border-radius: 999px;
  transform: rotate(-28deg);
}
.auth-orbit-mark::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #f4f7fb;
}
.auth-wordmark strong,
.auth-logo {
  display: block;
  margin: 0;
  color: #f8fafc;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 760;
  letter-spacing: 0;
}
.auth-wordmark small {
  display: block;
  margin-top: 3px;
  color: #8c97a8;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
}
.auth-logo-dot { display: none; }
.auth-tenant-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 14px;
  background: #0e131b;
}
.auth-tenant-kicker,
.auth-kicker {
  color: #7f8da3;
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.auth-tenant-name {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f8fafc;
  font-size: 18px;
  font-weight: 730;
}
.auth-status {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #37c984;
  box-shadow: 0 0 0 3px rgba(55, 201, 132, .12);
}
.auth-capability-list {
  display: grid;
  gap: 10px;
}
.auth-capability {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid rgba(148, 163, 184, .12);
}
.auth-capability:first-child { border-top: 0; padding-top: 0; }
.auth-capability em {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #151b25;
  color: #c8d2e1;
  font-style: normal;
  font-size: 11px;
  font-weight: 760;
}
.auth-capability strong {
  display: block;
  color: #f4f7fb;
  font-size: 13px;
  font-weight: 700;
}
.auth-capability span {
  display: block;
  margin-top: 2px;
  color: #93a0b3;
  font-size: 12px;
  line-height: 1.35;
}
.auth-card h2 {
  margin: 10px 0 8px;
  color: #f8fafc;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 760;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.auth-card p {
  max-width: 430px;
  color: #a5b0bf;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 24px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.auth-field label {
  font-size: 11px;
  color: #8d9aad;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 720;
}
.auth-input {
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, .24);
  background: #070a0f;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  transition-property: border-color, box-shadow, background-color;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.auth-input:focus {
  outline: none;
  border-color: rgba(124, 109, 242, .78);
  box-shadow: 0 0 0 3px rgba(124, 109, 242, .18);
}
.auth-error {
  min-height: 18px;
  color: #ffb4ad;
  font-size: 12px;
  font-weight: 700;
}
.auth-note {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, .16);
  color: #8f9bad;
  font-size: 12px;
  line-height: 1.45;
}
.auth-form .btn-primary {
  min-height: 48px;
  border-radius: 10px;
  font-weight: 720;
  letter-spacing: 0;
}
.auth-platform-foot {
  color: #6f7c8e;
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 760px) {
  .auth-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .auth-product-panel {
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
  }
}
.logo-wrap { display:flex; align-items:center; gap:24px; cursor:pointer; }
.logo { height:56px; width:auto; transition: transform .3s ease; }
.logo-wrap:hover .logo { transform: scale(1.04); }
.location-select {
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: #fff; font-size:12px; font-weight:500;
  display:flex; align-items:center; gap:8px;
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease;
  cursor:pointer;
}
.location-select:hover { background: rgba(255,255,255,0.04); border-color: var(--border-hover); }
nav { display:flex; align-items:center; gap:40px; }
.nav-link { font-size:13px; font-weight:700; letter-spacing:0.12em; color:#fff; transition: color .2s; text-transform:uppercase; position:relative; }
.nav-link:after { content:''; position:absolute; bottom:-6px; left:0; width:0; height:2px; background: var(--purple); transition: width .3s ease; }
.nav-link:hover { color: var(--purple); }
.nav-link:hover:after { width:100%; }
.nav-link.active { color: var(--teal); }
.view-switch {
  display:inline-flex; gap:4px; padding:4px;
  background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.view-switch button {
  padding: 8px 18px; font-size:11px; font-weight:700; letter-spacing:0.1em;
  border-radius: 999px; color: var(--text-3);
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease; text-transform: uppercase;
}
.view-switch button.active { background: rgba(255,255,255,0.9); color:#0d1015; box-shadow: 0 4px 16px rgba(255,255,255,0.18); }

main { min-height: calc(100vh - 89px); position:relative; }
.client-mode header { display:none; }
.staff-mode header {
  padding: 12px 20px;
  justify-content:flex-end;
}
.staff-mode.staff-light {
  background:
    radial-gradient(circle at 12% 0%, rgba(43,143,150,0.08), transparent 22%),
    radial-gradient(circle at 88% 4%, rgba(143,72,125,0.08), transparent 24%),
    linear-gradient(180deg, #f4f7fb 0%, #edf2f7 48%, #e8eef5 100%);
  color: var(--text);
}
.staff-mode.staff-light header {
  background: rgba(250,252,255,0.9);
  border-bottom-color: rgba(86,103,127,0.14);
  box-shadow: 0 10px 32px rgba(31,44,64,0.08);
}
.staff-mode.staff-light .site-auth-action,
.staff-mode.staff-light .client-demo-access {
  background: rgba(255,255,255,0.88);
  border-color: rgba(86,103,127,0.14);
  color: rgba(20,32,51,0.8);
  box-shadow: 0 14px 28px rgba(31,44,64,0.09);
}
.staff-mode .logo-wrap,
.staff-mode #nav,
.staff-mode #locSelect {
  display:none !important;
}
.staff-mode main { min-height: calc(100vh - 66px); }
.staff-head-actions {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.staff-theme-switch {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border-radius: 999px;
  background: var(--card);
  border:1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.staff-theme-btn {
  min-width: 82px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease;
}
.staff-theme-btn.active {
  background: rgba(255,255,255,0.92);
  color: #111827;
  box-shadow: 0 6px 16px rgba(15,23,42,0.12);
}
.staff-mode.staff-light .staff-theme-btn.active {
  background: #111827;
  color: #fff;
  box-shadow: 0 8px 20px rgba(15,23,42,0.16);
}
.client-mode main {
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.client-mode #clientView {
  width:100%;
  display:flex;
  justify-content:center;
}
.client-wrap {
  max-width: 1120px; margin: 0 auto;
  padding: 34px 20px 48px;
  position: relative;
}
.client-mode .client-wrap {
  max-width: 980px;
  padding: 18px 18px 36px;
  width:100%;
}
.client-mode .hero-title { display:none; }
.client-mode .progress { display:none; }
.client-mode #step1.step { margin-top: 0; }
.client-wrap::before,
.client-wrap::after {
  display:none;
}
.hero-title {
  text-align:center;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.hero-kicker {
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.74);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.hero-kicker::before {
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background: var(--teal);
  box-shadow: 0 0 0 6px rgba(115,199,199,0.12);
  animation: softPulse 3.2s ease-in-out infinite;
}
.hero-title h1 {
  font-size: clamp(28px, 3.6vw, 46px); font-weight: 800;
  line-height: 1.02; letter-spacing:-0.03em;
  margin-bottom: 8px;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero-title h1 .accent {
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  color: #ffffff;
  animation: none;
}
.hero-title p {
  color: var(--text-2);
  font-size:13px;
  line-height: 1.5;
  max-width: 620px;
  margin: 0 auto;
  font-weight:400;
  text-wrap: balance;
}
.progress {
  display:flex;
  justify-content:center;
  gap: 12px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.progress-step {
  min-width: 92px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  position: relative;
  color: var(--text-3);
  transition: transform .3s ease, color .3s ease;
}
.progress-step:not(:last-child)::after {
  content:'';
  position:absolute;
  top: 16px;
  left: calc(100% - 6px);
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
}
.progress-index {
  width:26px;
  height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.62);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.progress-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.progress-step.active {
  color: rgba(255,255,255,0.92);
  transform: translateY(-2px);
}
.progress-step.active .progress-index {
  background: rgba(255,255,255,0.96);
  color:#111522;
  border-color: rgba(255,255,255,0.95);
  box-shadow: 0 10px 24px rgba(255,255,255,0.12);
}
.progress-step.done .progress-index {
  background: var(--teal);
  color:#101521;
  border-color: transparent;
}
.step {
  position: relative;
  padding: 16px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(164,76,159,0.04), rgba(115,199,199,0.03)),
    #11151c;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.14);
  overflow: hidden;
  backdrop-filter: blur(16px);
}
.step::before {
  content:'';
  position:absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 18%);
  pointer-events:none;
}
.step::after {
  display:none;
}
.card {
  background:
    linear-gradient(180deg, rgba(36,40,52,0.94) 0%, rgba(30,34,45,0.96) 100%);
  border:1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 14px;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease, background .3s ease;
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
  z-index: 1;
}
.card:hover {
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 28px 44px rgba(8, 11, 18, 0.26), inset 0 1px 0 rgba(255,255,255,0.11);
}
.card-head { display:flex; align-items:flex-start; gap:12px; margin-bottom: 14px; }
.card-icon {
  width: 40px; height: 40px; flex-shrink:0;
  background: rgba(255,255,255,0.06); color: #ffffff;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.card-icon.teal { background: rgba(115,199,199,0.12); color: #fff; }
.card-title { font-size: 16px; font-weight:700; margin-bottom:2px; letter-spacing: -0.02em; }
.card-desc { font-size: 12px; color: rgba(255,255,255,0.62); line-height:1.4; }
label.lbl {
  display:block;
  font-size: 10px;
  font-weight:700;
  color: rgba(255,255,255,0.72);
  text-transform:uppercase;
  letter-spacing:0.18em;
  margin-bottom: 10px;
  font-family: 'IBM Plex Mono', monospace;
}
.input, select.input, textarea.input, .qb-input {
  width:100%; padding: 13px 14px; font-size:14px;
  background: rgba(33, 37, 50, 0.82); color: #fff;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .25s; transition-timing-function: ease;
  font-weight:600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.input:hover, .qb-input:hover { border-color: rgba(255,255,255,0.14); }
.input:focus, .qb-input:focus { outline:none; border-color: rgba(255,255,255,0.3); box-shadow: 0 0 0 4px rgba(255,255,255,0.08); background: rgba(29, 33, 45, 0.96); }
.input::placeholder, .qb-input::placeholder { color: var(--text-3); }
input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator { filter: invert(1); opacity:0.5; cursor:pointer; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.grid-3 { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px; }
.grid-4 { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px; }
@media(max-width:640px){ .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }
.schedule-hint { margin-top:10px; font-size: 12px; font-weight:600; }
.schedule-hint .open { color: var(--teal); }
.schedule-hint .closed { color: var(--red); }
.pax-alert {
  margin-top:10px; padding: 10px 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  font-size:12.5px; color: var(--text); font-weight:500;
  display:flex; gap:8px; align-items:flex-start;
  animation: slideUp .3s ease-out both;
  backdrop-filter: blur(14px);
}
.pax-alert.warning { background: rgba(245,158,11,0.12); border-color: rgba(255,214,135,0.3); color: #ffd88e; }
.segmented {
  display:flex;
  gap:8px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(33,37,50,0.36);
  border:1px solid rgba(255,255,255,0.06);
}
.seg-btn {
  flex:1; padding: 12px 14px; font-weight:700; font-size:13px;
  background: transparent; border: 1px solid transparent;
  border-radius: 14px; color:rgba(255,255,255,0.78);
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .25s; transition-timing-function: ease;
  text-align:center;
}
.seg-btn:hover { border-color: rgba(255,255,255,0.12); transform: translateY(-1px); color:#fff; }
.seg-btn.active {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.88);
  color: #fff;
  box-shadow: 0 12px 24px rgba(15,18,29,0.16), inset 0 1px 0 rgba(255,255,255,0.1);
}
.dur-pill {
  padding: 14px 12px; border-radius: 14px;
  background: rgba(30,34,46,0.44); border:1px solid rgba(255,255,255,0.07);
  color: var(--text-2); font-weight:700; font-size:14px;
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .25s; transition-timing-function: ease;
  position:relative; overflow:hidden;
  text-align:left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.dur-pill:hover { border-color: rgba(255,255,255,0.16); color:#fff; transform: translateY(-2px); background: rgba(30,34,46,0.6); }
.dur-pill.active {
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(232,238,246,0.92));
  color:#111522;
  border-color:#fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(255,255,255,0.12);
}
.dur-pill .price {
  display:block;
  font-size:11px;
  font-weight:500;
  opacity:0.66;
  margin-top:4px;
  font-family: 'IBM Plex Mono', monospace;
}
.formule-grid {
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}
@media(max-width:1100px){ .formule-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media(max-width:980px){ .formule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:640px){ .formule-grid { grid-template-columns: 1fr; } }
.qb-modal::-webkit-scrollbar, .pos-body::-webkit-scrollbar { width:6px; }
.qb-modal::-webkit-scrollbar-thumb, .pos-body::-webkit-scrollbar-thumb { background: var(--border); border-radius:10px; }
.formule-card {
  padding: 11px; border-radius: 12px;
  background: rgba(30,34,46,0.46); border:1px solid rgba(255,255,255,0.07);
  cursor:pointer; transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .25s; transition-timing-function: ease;
  display:flex; flex-direction:column;
  position:relative;
  overflow:visible;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.formule-card:hover:not(.disabled) { border-color: rgba(255,255,255,0.15); transform: translateY(-2px); background: rgba(31,35,48,0.62); }
.formule-card.active {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  border-color: rgba(255,255,255,0.38);
  box-shadow: 0 14px 32px rgba(11,15,25,0.18);
}
.formule-card.disabled { opacity:0.35; cursor: not-allowed; }
.formule-card::before {
  content:'';
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(103,186,172,0.85), rgba(148,66,146,0.55));
  opacity:0.85;
}
.formule-family {
  font-size:9px;
  color: var(--text-3);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.12em;
  margin-bottom:4px;
  padding-right:72px;
}
.formule-head { display:block; margin-bottom:7px; padding-right:74px; }
.formule-name { font-weight:700; font-size:12px; line-height:1.08; color:#fff; text-wrap:balance; }
.formule-price {
  position:absolute;
  top:23px;
  right:-1px;
  display:inline-flex;
  align-items:center;
  min-height:21px;
  font-size:9px;
  font-weight:800;
  color:#0b0d12;
  padding: 0 8px 0 8px;
  border-radius: 12px 0 0 12px;
  white-space:nowrap;
  background: #f4f1ef;
  border:2px solid #101319;
  box-shadow: -3px 0 0 rgba(103,186,172,0.92), 0 8px 18px rgba(0,0,0,0.22);
}
.formule-list { list-style:none; flex:1; margin-bottom:7px; }
.formule-list li { font-size:10.5px; color: rgba(242,245,250,0.9); padding: 2px 0 2px 12px; position:relative; line-height:1.26; }
.formule-list li:before { content:'•'; color: var(--teal); position:absolute; left:3px; font-weight:900; }
.formule-notes {
  margin: 5px 0 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.formule-notes p {
  font-size:9.5px;
  color: rgba(216,221,230,0.74);
  line-height:1.3;
  margin-top:3px;
}
.formule-tag {
  font-size:9px; font-weight:700;
  padding: 3px 6px; border-radius:6px; width:fit-content;
  display:flex; align-items:center; gap:4px; margin-bottom:6px;
  background: rgba(156,45,143,0.12); color: var(--purple);
}
.formule-status {
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
  padding-top:6px; border-top: 1px solid var(--border);
  margin-top:auto;
}
.formule-status.ok { color: var(--teal); }
.formule-status.warn { color: var(--amber); }
.formula-preferences {
  margin-top: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(13,17,25,0.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.formula-pref-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.formula-pref-note {
  color: rgba(236,238,244,0.64);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 650;
  text-align:right;
  max-width: 520px;
}
.preference-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}
.formula-time-picker {
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(13,17,25,0.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.formula-time-picker-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.formula-time-picker-head strong {
  display:block;
  color:#fff;
  font-size:13px;
  line-height:1.2;
}
.formula-time-picker-head span {
  display:block;
  margin-top:4px;
  color: rgba(236,238,244,0.62);
  font-size:11px;
  font-weight:700;
  line-height:1.35;
}
.formula-time-picker-reset {
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.78);
  border-radius:999px;
  padding:8px 11px;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
}
.formula-time-groups {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}
.formula-time-group label {
  display:block;
  margin-bottom:8px;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
  color: rgba(236,238,244,0.58);
}
.formula-time-options {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.formula-time-btn {
  border:1px solid rgba(255,255,255,0.09);
  background: rgba(31,35,48,0.62);
  color: rgba(255,255,255,0.82);
  border-radius:999px;
  padding:8px 11px;
  font-size:11px;
  line-height:1;
  font-weight:900;
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease;
}
.formula-time-btn:hover,
.formula-time-picker-reset:hover {
  border-color: rgba(103,186,172,0.5);
  color:#fff;
  background: rgba(35,43,56,0.85);
}
.formula-time-btn.active {
  background:#f4f1ef;
  color:#111522;
  border-color:#fff;
  box-shadow:-2px 0 0 rgba(103,186,172,0.92);
}
.formula-time-empty {
  margin-top:12px;
  color:#ffb8c7;
  font-size:12px;
  line-height:1.35;
  font-weight:800;
}
.pref-btn {
  min-height: 62px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(31,35,48,0.5);
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  font-weight: 800;
  text-align:left;
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease;
}
.pref-btn strong {
  display:block;
  color: inherit;
  font-size: 12.5px;
  line-height:1.2;
}
.pref-btn small {
  display:block;
  margin-top:5px;
  color: inherit;
  opacity: .62;
  font-size: 10px;
  line-height:1.25;
  font-weight: 750;
}
.pref-btn:hover { border-color: rgba(255,255,255,0.18); color:#fff; background: rgba(31,35,48,0.74); }
.pref-btn.active {
  background: #f4f1ef;
  color: #111522;
  border-color: #fff;
  box-shadow: -3px 0 0 rgba(103,186,172,0.92), 0 12px 22px rgba(0,0,0,0.18);
}
.slot-plan {
  margin-top: 8px;
  font-size: 9.5px;
  line-height: 1.35;
  color: rgba(236,238,244,0.64);
  text-align:center;
  max-width: 170px;
}
.slot-plan b { color: var(--teal); }
.formula-slot {
  text-align:left;
  min-height: 132px;
}
.formula-slot .slot-time { display:block; text-align:center; }
.formula-slot .slot-free { display:block; text-align:center; }
.formula-slot .slot-plan {
  max-width:none;
  text-align:left;
  margin-top:10px;
  padding-top:9px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.formula-slot .formula-plan-line {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:5px;
}
.formula-slot .formula-plan-line span:first-child {
  color: rgba(236,238,244,0.58);
  font-weight: 850;
}
.formula-slot .formula-plan-line span:last-child {
  color: rgba(255,255,255,0.86);
  font-weight: 900;
  text-align:right;
}
.laser-option-grid .laser-pill small,
.qb-dur-btn small {
  display:block;
  margin-top:4px;
  font-size:10px;
  font-weight:700;
  color: inherit;
  opacity: .64;
}
.laser-note {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(94,200,200,0.08);
  border: 1px solid rgba(94,200,200,0.18);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 650;
}
.recap-note {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(115,199,199,0.16);
  border-radius: 14px;
  background: rgba(115,199,199,0.08);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
}
@media(max-width:760px){
  .formula-preferences { grid-template-columns: 1fr; }
  .formula-pref-head { align-items:flex-start; flex-direction:column; }
  .formula-pref-note { text-align:left; max-width:none; }
  .preference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formula-time-picker-head { flex-direction:column; }
  .formula-time-groups { grid-template-columns: 1fr; }
}
.badge-best {
  position:absolute; top:-10px; left:16px;
  background: #944292; color:#fff;
  border: 2px solid #111318;
  font-size:8px; font-weight:800; padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing:0.1em;
  box-shadow: -2px 0 0 #67baac, 0 4px 12px rgba(156,45,143,0.32);
}
.alert, .info-box {
  padding: 14px 18px; margin-bottom: 20px;
  border-radius: 16px;
  font-size:13px;
  display:flex; gap:10px; align-items:flex-start;
  backdrop-filter: blur(14px);
}
.alert { background: rgba(110,33,53,0.28); border:1px solid rgba(255,162,162,0.18); color: #ffd0d0; font-weight:600; }
.info-box { background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.86); }
.booking-alternatives {
  display: grid;
  gap: 12px;
}
.booking-alt-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.booking-alt-list {
  display: grid;
  gap: 8px;
}
.booking-alt-option {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 13px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.booking-alt-option span {
  font-weight: 850;
}
.booking-alt-option small {
  color: rgba(255,255,255,0.68);
  font-weight: 700;
}
.slot-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; }
@media(max-width:640px){ .slot-grid { grid-template-columns: repeat(2, 1fr); } }
.slot {
  background: rgba(31,35,48,0.5); border:1px solid rgba(255,255,255,0.07);
  padding: 14px 10px; border-radius: 14px;
  display:flex; flex-direction:column; align-items:center;
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .25s; transition-timing-function: ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.slot:hover { border-color: rgba(255,255,255,0.22); background: rgba(31,35,48,0.8); transform: translateY(-3px); box-shadow: 0 16px 28px rgba(11,15,25,0.18); }
.slot-time { font-size:20px; font-weight:900; }
.slot-free { font-size:10px; color: var(--teal); margin-top:6px; font-weight:700; text-transform:uppercase; letter-spacing:0.16em; font-family: 'IBM Plex Mono', monospace; }
.btn-primary {
  width:100%; padding: 14px 18px;
  background: linear-gradient(180deg, rgba(11,14,20,0.96), rgba(6,8,12,0.98));
  color:#fff;
  border-radius: 14px; font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .25s; transition-timing-function: ease;
  box-shadow: 0 22px 32px rgba(6,8,12,0.28), inset 0 1px 0 rgba(255,255,255,0.14);
  text-transform: uppercase; letter-spacing:0.06em;
  border: 1px solid rgba(255,255,255,0.12);
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: translateX(-120%);
  transition: transform .45s ease;
}
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 28px 38px rgba(6,8,12,0.32), inset 0 1px 0 rgba(255,255,255,0.18); }
.btn-primary:hover:not(:disabled)::after { transform: translateX(120%); }
.btn-primary:active:not(:disabled) { transform: translateY(0) scale(.99); }
.btn-primary:disabled { opacity:0.4; cursor:not-allowed; }
.btn-secondary {
  padding: 13px 18px;
  background: rgba(31,35,48,0.44); color: var(--text-2);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
  font-weight:700; font-size:13px;
  display:inline-flex; align-items:center; gap:8px;
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.btn-secondary:hover { background: rgba(31,35,48,0.72); color:#fff; border-color: rgba(255,255,255,0.16); transform: translateY(-1px); }
.btn-secondary.warn {
  color: var(--amber);
  border-color: rgba(245,158,11,0.24);
  background: rgba(245,158,11,0.08);
}
.btn-secondary.warn:hover {
  background: rgba(245,158,11,0.18);
  border-color: rgba(245,158,11,0.34);
}
.btn-secondary.danger {
  color: #ffb4b4;
  border-color: rgba(239,68,68,0.24);
  background: rgba(239,68,68,0.08);
}
.btn-secondary.danger:hover {
  background: rgba(239,68,68,0.16);
  border-color: rgba(239,68,68,0.34);
}
.recap-item {
  display:flex; justify-content:space-between; align-items:flex-end;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.recap-item:last-child { border-bottom:none; }
.recap-label { font-size:13px; color: var(--text-3); font-weight:600; }
.recap-value { font-weight:700; font-size:17px; }
.recap-value.accent { color: var(--purple); font-size:22px; font-weight:900; }
.recap-value.teal { color: var(--teal); }
.total-box {
  margin-top: 24px; padding: 24px;
  background: linear-gradient(180deg, rgba(10,13,19,0.96), rgba(17,20,28,0.98));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  display:flex; justify-content:space-between; align-items:center;
  position:relative; overflow:hidden;
  box-shadow: 0 24px 36px rgba(6,8,12,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}
.total-box:before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(176,138,216,0.12) 0%, transparent 50%, rgba(159,216,231,0.08) 100%);
  pointer-events:none;
}
.total-amount { font-size:42px; font-weight:900; letter-spacing:-0.04em; }
.success-wrap {
  text-align:center; padding: 30px;
  background:
    linear-gradient(180deg, rgba(70,76,95,0.72), rgba(58,63,80,0.84));
  border:1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.1);
  backdrop-filter: blur(24px);
}
.success-icon {
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 4px solid rgba(255,255,255,0.16);
  color: var(--teal);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 28px;
  animation: popIn .7s cubic-bezier(0.34,1.56,0.64,1) both;
}
.success-wrap h2 { font-size:32px; font-weight:900; margin-bottom:10px; text-transform:uppercase; }
.success-wrap .sub { color: var(--text-2); font-size:15px; margin-bottom:22px; }
.confetti-hint {
  max-width: 500px; margin: 0 auto 24px; padding: 20px; text-align:left;
  background: rgba(255,255,255,0.08); border-left: 4px solid rgba(255,255,255,0.7);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.step#step1 {
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:14px;
  align-items:start;
}
.step#step1 > .card {
  margin-bottom:0;
}
.step#step1 > .btn-primary {
  grid-column: 1 / -1;
  margin-top: 2px;
}
.step#step1 > #bowlingBlock,
.step#step1 > #laserBlock,
.step#step1 > #formuleBlock {
  grid-column: 1 / -1;
}
.step#step2,
.step#step3,
.step#step4,
.step#step5 {
  max-width: 900px;
  margin: 0 auto;
}
.client-mode main,
.client-mode #clientView {
  background: #000000;
}
.client-mode .client-wrap,
.client-mode .step,
.client-mode .card,
.client-mode .input,
.client-mode select.input,
.client-mode textarea.input,
.client-mode .dur-pill,
.client-mode .formule-card,
.client-mode .slot,
.client-mode .info-box,
.client-mode .alert,
.client-mode .recap-item,
.client-mode .total-box,
.client-mode .client-demo-access {
  font-family: 'Montserrat', sans-serif;
}
.client-mode .card-title,
.client-mode .seg-btn,
.client-mode .btn-primary,
.client-mode .btn-secondary,
.client-mode .dur-pill,
.client-mode .formule-name,
.client-mode .badge-best,
.client-mode .progress-label,
.client-mode .client-demo-access,
.client-mode .recap-value,
.client-mode .total-amount {
  font-family: 'FG Gotham Rounded Bold', 'Montserrat', sans-serif;
}
.client-mode .card-desc,
.client-mode .schedule-hint,
.client-mode .formule-list li,
.client-mode .formule-notes p,
.client-mode .slot-free,
.client-mode .recap-label {
  font-family: 'Montserrat', sans-serif;
}
.client-mode .card-title {
  font-family: 'FG Gotham Rounded Medium', 'Montserrat', sans-serif;
  font-size: 1.18rem;
  line-height: 1.05;
  letter-spacing: 0;
  margin-bottom: 0.08rem;
}
.client-mode .card-desc {
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.26;
  color: rgba(236,238,244,0.68);
}
.client-mode .card-head {
  gap: 10px;
  margin-bottom: 10px;
}
.client-mode .progress-step:not(:last-child)::after {
  background: rgba(115,199,199,0.24);
}
.client-mode .progress-index {
  background: #171c24;
  border-color: rgba(255,255,255,0.12);
  box-shadow: none;
  color: rgba(255,255,255,0.62);
}
.client-mode .progress-step.active .progress-index {
  background: var(--purple);
  border-color: rgba(115,199,199,0.7);
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(115,199,199,0.16);
}
.client-mode .progress-step.done .progress-index {
  background: var(--teal);
  color: #081012;
  border-color: var(--teal);
}
.client-mode .step {
  background: #090a0d;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 16px 32px rgba(0,0,0,0.34);
  backdrop-filter: none;
}
.client-mode .step::before {
  display: none;
}
.client-mode .card {
  background: #1d222b;
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
  backdrop-filter: none;
  border-radius: 20px;
  padding: 14px;
}
.client-mode .card:hover {
  border-color: rgba(255,255,255,0.1);
  box-shadow: none;
}
.client-mode .card-icon {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: #2b313d;
  color: #ffffff;
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}
.client-mode .card-icon svg {
  width: 16px;
  height: 16px;
}
.client-mode .card-icon.teal {
  background: rgba(115,199,199,0.18);
  color: #ffffff;
  border-color: rgba(115,199,199,0.28);
}
.client-mode label.lbl {
  color: rgba(236,238,244,0.62);
  letter-spacing: 0.14em;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.client-mode .input,
.client-mode select.input,
.client-mode textarea.input {
  background: #262d38;
  border-color: #434d5f;
  box-shadow: none;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 18px;
  padding: 0.82rem 1rem;
}
.client-mode .input:hover {
  border-color: #5f6c80;
}
.client-mode .input:focus {
  border-color: rgba(115,199,199,0.82);
  box-shadow: 0 0 0 3px rgba(115,199,199,0.16);
  background: #2a3240;
}
.client-mode #step3 .card {
  background: linear-gradient(180deg, rgba(31, 38, 49, 0.98), rgba(24, 29, 39, 0.98));
}
.client-mode #step3 .card-head {
  margin-bottom: 14px;
}
.client-mode #step3 .contact-grid {
  gap: 16px;
}
.client-mode #step3 .contact-grid > div {
  padding: 14px 14px 12px;
  border-radius: 18px;
  border: 1px solid rgba(183, 199, 225, 0.14);
  background: rgba(255, 255, 255, 0.02);
}
.client-mode #step3 .contact-grid > div[style*="grid-column"] {
  padding-bottom: 14px;
}
.client-mode #step3 .input,
.client-mode #step3 select.input,
.client-mode #step3 textarea.input {
  background: #1f2631;
  border: 1px solid rgba(183, 199, 225, 0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  color: #f7f8fb;
  -webkit-text-fill-color: #f7f8fb;
  caret-color: #f7f8fb;
  border-radius: 16px;
  min-height: 54px;
  padding: 0.95rem 1rem;
  transform: none !important;
}
.client-mode #step3 .input::placeholder,
.client-mode #step3 textarea.input::placeholder {
  color: rgba(226, 230, 238, 0.34);
}
.client-mode #step3 .input:hover,
.client-mode #step3 select.input:hover,
.client-mode #step3 textarea.input:hover {
  border-color: rgba(183, 199, 225, 0.32);
  background: #232b37;
}
.client-mode #step3 .input:focus,
.client-mode #step3 select.input:focus,
.client-mode #step3 textarea.input:focus {
  border-color: rgba(115,199,199,0.82);
  background: #262f3c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 3px rgba(115,199,199,0.14);
}
.client-mode #step3 input:-webkit-autofill,
.client-mode #step3 input:-webkit-autofill:hover,
.client-mode #step3 input:-webkit-autofill:focus,
.client-mode #step3 textarea:-webkit-autofill,
.client-mode #step3 textarea:-webkit-autofill:hover,
.client-mode #step3 textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #f7f8fb;
  box-shadow: 0 0 0 1000px #1f2631 inset;
  transition: background-color 9999s ease-in-out 0s;
}
.client-mode #step3 .info-box {
  margin-top: 18px !important;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(183, 199, 225, 0.14);
  color: rgba(236,238,244,0.82);
}
.client-mode #step3 .step-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}
.client-mode #step3 .step-actions .btn-secondary {
  min-width: 148px;
}
.client-mode #step3 .step-actions .btn-primary,
.client-mode #step3 .step-actions .btn-secondary {
  min-height: 50px;
  border-radius: 18px;
  box-shadow: none;
}
.client-mode #step3 .step-actions .btn-secondary {
  color: #ffffff;
}
.client-mode #step3 .step-actions .btn-secondary:hover {
  color: #ffffff;
  background: linear-gradient(180deg, #b455b2, #873887);
  border-color: #050609;
}
@media(max-width:640px){
  .client-mode #step3 .step-actions {
    flex-direction: column;
  }
  .client-mode #step3 .step-actions .btn-secondary {
    min-width: 0;
  }
}
.client-mode .schedule-hint .open {
  color: var(--teal);
  font-weight: 700;
  font-size: 0.82rem;
}
.client-mode .pax-alert {
  background: #2a313c;
  border-color: #465060;
  backdrop-filter: none;
  border-radius: 18px;
  font-size: 0.82rem;
}
.client-mode .pax-alert.warning {
  background: rgba(156,45,143,0.12);
  border-color: rgba(156,45,143,0.34);
  color: #f2c3ec;
}
.client-mode .segmented {
  background: transparent;
  border: none;
  padding: 0;
  gap: 10px;
}
.client-mode .seg-btn {
  background: #ffffff;
  color: #000000;
  border: 2px solid #000000;
  border-radius: 50px;
  box-shadow: -5px -2px 3px #67baac;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.2;
  padding: 0.78rem 1.15rem;
  text-transform: none;
}
.client-mode .seg-btn:hover {
  transform: scale(1.03);
  background: #944292;
  color: #ffffff;
  border-color: #000000;
}
.client-mode .seg-btn.active {
  background: #944292;
  border: 2px solid #000000;
  border-radius: 50px;
  color: #ffffff;
  box-shadow: -1px 1px 3px #67baac;
}
.client-mode .seg-btn.active:hover {
  background: #ffffff;
  color: #944292;
}
.client-mode .dur-pill {
  background: #232933;
  border-color: #3c4656;
  box-shadow: none;
  border-radius: 18px;
  padding: 0.86rem 0.9rem 0.82rem;
  font-size: 0.88rem;
  font-weight: 700;
}
.client-mode .dur-pill:hover {
  transform: none;
  background: #2c3340;
  border-color: #566173;
}
.client-mode .dur-pill.active {
  background: #ffffff;
  color: #111522;
  border-color: rgba(115,199,199,0.82);
  transform: none;
  box-shadow: 0 0 0 3px rgba(115,199,199,0.16);
}
.client-mode .dur-pill .price {
  opacity: 0.76;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
}
.client-mode .formule-card {
  background: #232933;
  border-color: #3c4656;
  box-shadow: none;
  border-radius: 16px;
  padding: 0.68rem 0.66rem 0.62rem;
  overflow: visible;
}
.client-mode .formule-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.client-mode .formule-card:hover:not(.disabled) {
  transform: none;
  background: #2c3340;
  border-color: #566173;
}
.client-mode .formule-card.active {
  background: rgba(156,45,143,0.14);
  border-color: rgba(115,199,199,0.76);
  box-shadow: none;
}
.client-mode .formule-price {
  top: 1.02rem;
  right: -1px;
  background: #f8f5f2;
  color: #111111;
  border-radius: 14px 0 0 14px;
  border: 2px solid #090b10;
  box-shadow: -3px 0 0 #67baac;
  font-family: 'FG Gotham Rounded Medium', 'Montserrat', sans-serif;
  font-size: 0.55rem;
  line-height: 1;
  min-height: 19px;
  padding: 4px 7px;
}
.client-mode .formule-name {
  font-family: 'FG Gotham Rounded Medium', 'Montserrat', sans-serif;
  font-size: 0.76rem;
  line-height: 1.02;
  padding-right: 72px;
}
.client-mode .formule-family {
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  margin-bottom: 3px;
  padding-right: 72px;
}
.client-mode .formule-head {
  display: block;
  margin-bottom: 4px;
  padding-right: 72px;
}
.client-mode .formule-list {
  margin-bottom: 4px;
}
.client-mode .formule-family,
.client-mode .formule-status,
.client-mode .formule-notes p,
.client-mode .formule-list li {
  font-size: 0.61rem;
  line-height: 1.2;
}
.client-mode .formule-list li {
  padding: 1px 0 1px 10px;
  color: rgba(244,246,250,0.9);
}
.client-mode .formule-list li:before {
  left: 1px;
}
.client-mode .formule-notes {
  margin: 3px 0 4px;
  padding-top: 4px;
}
.client-mode .formule-notes p {
  margin-top: 1px;
  color: rgba(213,219,228,0.7);
}
.client-mode .formule-tag {
  background: rgba(156,45,143,0.12);
  color: #f2c3ec;
  font-size: 0.52rem;
  padding: 2px 4px;
  margin-bottom: 3px;
}
.client-mode .badge-best {
  background: #944292;
  box-shadow: -2px 0 0 #67baac;
  font-size: 0.48rem;
  padding: 2px 5px;
  top: -7px;
  left: 12px;
}
.client-mode .formule-status {
  letter-spacing: 0.06em;
  padding-top: 4px;
}
.client-mode .formule-list li:before {
  color: var(--teal);
}
@media(max-width:1180px){
  .client-mode .formule-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media(max-width:920px){
  .client-mode .formule-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media(max-width:680px){
  .client-mode .formule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media(max-width:480px){
  .client-mode .formule-grid {
    grid-template-columns: 1fr;
  }
}
.client-mode .alert,
.client-mode .info-box {
  backdrop-filter: none;
}
.client-mode .info-box {
  background: #232933;
  border-color: #445062;
  color: rgba(255,255,255,0.88);
}
.client-mode .alert {
  background: rgba(156,45,143,0.14);
  border-color: rgba(156,45,143,0.34);
  color: #f4c9ef;
}
.client-mode .slot {
  background: #232933;
  border-color: #3c4656;
  box-shadow: none;
  border-radius: 18px;
  padding: 12px 10px;
}
.client-mode .slot:hover {
  transform: none;
  background: #2c3340;
  border-color: rgba(115,199,199,0.34);
  box-shadow: none;
}
.client-mode .slot-free {
  color: var(--teal);
  font-size: 0.68rem;
}
.client-mode .btn-primary {
  background: #ffffff;
  color: #000000;
  border: 2px solid #000000;
  border-radius: 50px;
  box-shadow: -5px -2px 3px #67baac;
  font-size: 0.9rem;
  line-height: 1.2;
  min-height: 54px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.client-mode .btn-primary::after {
  display: none;
}
.client-mode .btn-primary:hover:not(:disabled) {
  transform: scale(1.03);
  background: #944292;
  color: #ffffff;
  box-shadow: -1px 1px 3px #67baac;
}
.client-mode .btn-primary:active:not(:disabled) {
  transform: scale(0.99);
}
.client-mode .btn-secondary {
  background: #944292;
  color: #ffffff;
  border: 2px solid #000000;
  border-radius: 50px;
  box-shadow: -1px 1px 3px #67baac;
  font-size: 0.88rem;
  line-height: 1.2;
  min-height: 50px;
}
.client-mode .btn-secondary:hover {
  transform: scale(1.03);
  background: #ffffff;
  color: #944292;
  border-color: #000000;
}
.client-mode .recap-value.accent {
  color: var(--purple);
}
.client-mode .recap-value.teal {
  color: var(--teal);
}
.client-mode .recap-value {
  font-size: 1.08rem;
}
.client-mode .client-demo-access {
  font-family: 'FG Gotham Rounded Medium', 'Montserrat', sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 10px 18px;
  background: #11161d;
  border: 2px solid #000;
  box-shadow: -3px -1px 3px #67baac;
}
.client-mode .total-box {
  background: #141920;
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
  border-radius: 20px;
  padding: 18px;
}
.client-mode .total-amount {
  font-family: 'FG Gotham Rounded Medium', 'Montserrat', sans-serif;
  font-size: 2rem;
}
.client-mode .progress-label {
  font-family: 'FG Gotham Rounded Medium', 'Montserrat', sans-serif;
  font-size: 0.62rem;
}
.client-mode .total-box:before {
  display: none;
}
.client-mode .success-wrap {
  background: #232933;
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
  backdrop-filter: none;
}
.client-mode .success-icon {
  background: rgba(115,199,199,0.14);
  border-color: rgba(115,199,199,0.28);
}
.client-mode .confetti-hint {
  background: #232933;
  border-left-color: var(--teal);
  box-shadow: none;
}
.confetti-hint strong { color:#fff; display:block; margin-bottom:6px; }
.confetti-hint p { color: var(--text-2); font-size:14px; }

.staff-wrap { max-width: 1640px; margin: 0 auto; padding: 18px 18px 22px; }
.staff-head {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap: wrap; gap:14px; margin-bottom:18px;
}
.staff-head h1 { font-size: 24px; font-weight:900; letter-spacing:-0.02em; }
.staff-head .sub { color: var(--text-2); margin-top:3px; font-weight:500; font-size:12px; text-transform:capitalize; }
.date-nav {
  display:flex; align-items:center; padding:4px;
  background: var(--card); border:1px solid var(--border); border-radius:12px;
  position: relative;
}
.date-nav button { padding:8px; color: var(--text-2); border-radius:8px; transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease; }
.date-nav button:hover { color:#fff; background: var(--bg-2); }
.date-nav button:disabled { opacity:0.35; cursor:not-allowed; background:transparent; color:var(--text-3); }
.date-nav span { padding: 0 16px; font-size:12px; font-weight:700; }
.staff-date-label {
  min-width: 100px;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.staff-date-label:hover {
  background: var(--bg-2);
  color: var(--text);
}
.staff-date-input {
  position: absolute;
  left: 42px;
  right: 42px;
  top: 4px;
  bottom: 4px;
  width: calc(100% - 84px);
  opacity: 0;
  pointer-events: none;
}
.btn-new {
  padding: 10px 16px; background: var(--purple); color:#fff;
  border-radius: 11px; font-weight:700; font-size:12px;
  display:inline-flex; align-items:center; gap:8px;
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .25s; transition-timing-function: ease;
  box-shadow: 0 4px 16px rgba(156,45,143,0.3);
}
.btn-new:hover { background: var(--purple-soft); transform: translateY(-1px); }
.kpi-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin-bottom:18px; }
@media(max-width:900px){ .kpi-grid { grid-template-columns: repeat(2,1fr); } }
.staff-resource-tabs {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin: -2px 0 16px;
}
.staff-resource-tab {
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}
.staff-resource-tab:hover { border-color: var(--border-hover); color: var(--text); transform: translateY(-1px); }
.staff-resource-tab.active {
  background: var(--card-2);
  border-color: rgba(115,199,199,0.32);
  color: var(--text);
}
.staff-resource-tab .main { font-size:13px; font-weight:800; letter-spacing:-0.01em; }
.staff-resource-tab .sub { font-size:10px; color: var(--text-3); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; }
@media(max-width:720px){ .staff-resource-tabs { grid-template-columns: 1fr; } }
.kpi {
  padding: 16px 17px; background: var(--card);
  border: 1px solid var(--border); border-radius: 14px;
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .3s; transition-timing-function: ease;
}
.kpi:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.kpi .label { font-size:9.5px; color: var(--text-3); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:6px; }
.kpi .value { font-size:25px; font-weight:900; letter-spacing:-0.02em; }
.kpi .hint { font-size:10px; color: var(--text-3); margin-top:3px; font-weight:600; }
.kpi.accent { border-color: rgba(156,45,143,0.25); background: linear-gradient(135deg, var(--card) 0%, rgba(156,45,143,0.06) 100%); }
.kpi .tag-ok { display:inline-block; background: rgba(94,200,200,0.12); color: var(--teal); padding: 2px 8px; border-radius:6px; font-size:10px; font-weight:700; margin-top:4px; }
.ops-admin-box {
  margin-bottom: 18px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card);
}
.ops-admin-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.ops-eyebrow {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.ops-admin-head h2 {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.ops-admin-head p {
  margin-top: 4px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
}
.ops-admin-actions,
.ops-admin-tabs {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.ops-admin-btn,
.ops-tab {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.ops-admin-btn:hover,
.ops-tab:hover {
  transform: translateY(-1px);
  border-color: var(--border-hover);
  color: var(--text);
}
.ops-admin-btn.primary {
  background: var(--text);
  color: var(--bg);
  border-color: transparent;
}
.ops-admin-tabs {
  padding: 12px 0;
}
.ops-tab.active {
  background: rgba(183,160,124,0.12);
  border-color: rgba(183,160,124,0.32);
  color: var(--text);
}
.ops-admin-content {
  min-height: 90px;
}
.ops-grid {
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-bottom: 12px;
}
.ops-stat {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card-2);
}
.ops-stat .k {
  font-size: 9px;
  color: var(--text-3);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ops-stat .v {
  margin-top: 7px;
  font-size: 20px;
  font-weight: 900;
}
.ops-list {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ops-row {
  display:grid;
  grid-template-columns: minmax(120px, .85fr) minmax(180px, 1.4fr) minmax(180px, 1.2fr) auto;
  gap:12px;
  align-items:center;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card-2);
}
.ops-row.template {
  grid-template-columns: minmax(150px, .9fr) minmax(220px, 1.4fr) auto;
}
.ops-row .meta {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}
.ops-row .title {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
}
.ops-pill {
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-2);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ops-pill.sent { color: var(--success); border-color: rgba(16,185,129,0.26); background: rgba(16,185,129,0.08); }
.ops-pill.queued { color: var(--amber); border-color: rgba(245,158,11,0.25); background: rgba(245,158,11,0.08); }
.ops-pill.failed { color: var(--red); border-color: rgba(239,68,68,0.25); background: rgba(239,68,68,0.08); }
.ops-pill.draft { color: var(--text-2); border-color: var(--border); background: rgba(255,255,255,0.04); }
.ops-pill.running { color: var(--amber); border-color: rgba(245,158,11,0.28); background: rgba(245,158,11,0.08); }
.ops-pill.finished { color: var(--success); border-color: rgba(16,185,129,0.28); background: rgba(16,185,129,0.08); }
.ops-pill.high { color: #fca5a5; border-color: rgba(239,68,68,0.28); background: rgba(239,68,68,0.08); }
.ops-pill.medium { color: var(--amber); border-color: rgba(245,158,11,0.25); background: rgba(245,158,11,0.08); }
.ops-pill.low { color: var(--teal); border-color: rgba(94,200,200,0.24); background: rgba(94,200,200,0.08); }
.ops-error {
  color: var(--red);
  font-weight: 800;
}
.ops-refresh-note {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: -2px 0 10px;
}
.ops-mini-btn {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 10px;
  font-weight: 900;
}
.ops-mini-btn:hover { border-color: var(--border-hover); color: var(--text); }
.ops-sim-hero {
  display:grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr);
  gap:12px;
  margin-bottom: 12px;
}
.ops-sim-card {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card-2);
}
.ops-sim-card h3 {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}
.ops-sim-card p {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}
.ops-sim-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 12px;
}
.ops-sim-progress {
  height: 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  overflow:hidden;
  margin: 12px 0 8px;
}
.ops-sim-progress span {
  display:block;
  height:100%;
  width:0%;
  background: var(--text);
}
.ops-sim-log {
  display:grid;
  grid-template-columns: 110px minmax(0, 1fr) minmax(160px, .9fr);
  gap:12px;
  align-items:flex-start;
  padding: 11px 0;
  border-top: 1px solid var(--border);
}
.ops-sim-log:first-child { border-top: 0; }
.ops-sim-log strong {
  display:block;
  font-size: 12px;
  font-weight: 900;
}
.ops-sim-log .meta {
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.45;
}
.ops-sim-timeline {
  display:flex;
  flex-direction:column;
  gap:7px;
}
.ops-sim-timeline-item {
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.025);
}
.ops-sim-timeline-item strong {
  display:block;
  font-size: 12px;
  font-weight: 900;
}
.ops-sim-timeline-item span {
  display:block;
  margin-top:2px;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight:700;
  line-height:1.35;
}
@media(max-width:880px){
  .ops-sim-hero { grid-template-columns: 1fr; }
  .ops-sim-log { grid-template-columns: 1fr; }
}
.email-preview-overlay {
  position:fixed;
  inset:0;
  z-index:520;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 22px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(8px);
}
.email-preview-card {
  width:min(760px, 96vw);
  height:min(820px, 88vh);
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow: 0 28px 90px rgba(0,0,0,0.44);
}
.email-preview-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.email-preview-head strong {
  font-size: 13px;
}
.email-preview-frame {
  flex:1;
  border:0;
  background:#f3f0ea;
}
@media(max-width:900px){
  .ops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-row,
  .ops-row.template { grid-template-columns: 1fr; }
  .ops-admin-head { flex-direction:column; }
}
.planning-box {
  background: var(--card); border:1px solid var(--border);
  border-radius: 16px; overflow:hidden; margin-bottom:28px;
  --planning-hour-h: 48px;
  --planning-header-h: 38px;
  --planning-lane-w: 88px;
  --planning-hour-col: 54px;
  --planning-half-line: rgba(255,255,255,0.1);
}
.planning-box.expanded {
  position: fixed;
  inset: 10px;
  z-index: 320;
  margin: 0;
  display:flex;
  flex-direction:column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  --planning-hour-h: 52px;
  --planning-header-h: 46px;
  --planning-lane-w: 158px;
  --planning-hour-col: 76px;
  --planning-half-line: rgba(255,255,255,0.16);
  border-radius: 22px;
}
.planning-head {
  padding:18px 22px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  background: rgba(0,0,0,0.3);
}
.planning-title-stack { display:flex; flex-direction:column; gap:6px; }
.planning-head h2 { font-size:16px; font-weight:700; display:flex; align-items:center; gap:10px; }
.planning-sub {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.planning-box.expanded .planning-head { padding: 18px 22px 16px; }
.planning-box.expanded .planning-head h2 { font-size: 20px; }
.planning-box.expanded .planning-sub { font-size: 12px; }
.planning-actions { display:flex; align-items:center; gap:14px; }
.planning-toggle {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease;
}
.planning-toggle:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); }
.legend { display:flex; gap:18px; font-size:11px; font-weight:700; color: var(--text-3); }
.legend span { display:flex; align-items:center; gap:6px; }
.legend .dot { width:8px; height:8px; border-radius:50%; }
.legend .dot.conf { background: var(--teal); }
.legend .dot.arr { background: var(--amber); }
.legend .dot.paid { background: var(--purple); }
.planning-grid-wrap { background: var(--bg-2); overflow-x:auto; position:relative; }
.planning-box.expanded .planning-grid-wrap { flex:1; min-height:0; overflow:auto; }
.planning-grid-wrap::-webkit-scrollbar { height:8px; }
.planning-grid-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius:10px; }
.planning-grid { display:flex; width:100%; min-width: 760px; position:relative; }
.planning-box.expanded .planning-grid { min-height:100%; }
.laser-planning-box {
  margin-top: -12px;
}
.laser-planning-grid {
  min-width: 520px;
}
.laser-arena-col {
  min-width: 460px;
}
.laser-booking {
  left: 8px;
  right: 8px;
}
.booking.laser-direct {
  background: rgba(94,200,200,0.14);
  border:1px solid rgba(94,200,200,0.34);
}
.booking.laser-formula {
  background: rgba(156,45,143,0.16);
  border:1px solid rgba(156,45,143,0.32);
}
.booking.laser-shared .b-tag {
  background: rgba(255,255,255,0.16);
}
.hour-col { width:var(--planning-hour-col); flex-shrink:0; background: var(--card); border-right:1px solid var(--border); position:sticky; left:0; z-index:5; }
.hour-header { height:var(--planning-header-h); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:10px; color: var(--text-3); font-weight:700; }
.hour-cell {
  height:calc(var(--planning-hour-h) / 2);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  color: var(--text-3);
  font-weight:700;
}
.hour-cell.major {
  font-weight: 800;
  color: rgba(255,255,255,0.8);
}
.hour-cell.minor {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.46);
}
.hour-cell.end {
  color: rgba(255,255,255,0.88);
  font-weight: 800;
}
.hour-label-hour,
.hour-label-half,
.hour-label-end {
  white-space:nowrap;
}
.planning-box.expanded .hour-header,
.planning-box.expanded .lane-header {
  font-size: 12px;
  background: rgba(255,255,255,0.02);
}
.planning-box.expanded .hour-cell {
  font-size: 12px;
  font-weight: 800;
}
.planning-box.expanded .hour-cell.minor {
  font-size: 10px;
}
.lanes-row { flex:1; display:flex; }
.lane-col { flex:1; min-width:var(--planning-lane-w); border-right:1px solid var(--border); position:relative; background: var(--bg-2); }
.lane-col.maint { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 10px, transparent 10px, transparent 20px); opacity:0.6; }
.lane-header {
  height:var(--planning-header-h); border-bottom:1px solid var(--border); background: var(--card);
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:4px;
  position:sticky; top:0; z-index:3;
}
.lane-header .pl { font-size:8px; font-weight:700; color: var(--text-3); text-transform:uppercase; letter-spacing:0.12em; }
.lane-header .num { font-size:13px; font-weight:900; }
.planning-box.expanded .lane-header .pl { font-size: 9px; }
.planning-box.expanded .lane-header .num { font-size: 16px; }
.lane-header .settings { position:absolute; top:3px; right:3px; color: var(--text-3); padding:2px; transition: color .2s; }
.lane-header .settings:hover { color:#fff; }
.slot-cell {
  height:calc(var(--planning-hour-h) / 2);
  border-bottom:1px solid var(--border);
  position:relative;
  background: transparent;
}
.slot-cell.half {
  border-bottom-style: dashed;
  border-bottom-color: var(--planning-half-line);
}
.slot-cell.end {
  background: rgba(255,255,255,0.02);
}
.slot-cell.is-drop-target {
  background: rgba(134,166,210,0.16) !important;
  box-shadow: inset 0 0 0 2px rgba(134,166,210,0.72) !important;
}
.slot-cell.is-drop-target.invalid {
  background: rgba(239,68,68,0.12) !important;
  box-shadow: inset 0 0 0 2px rgba(239,68,68,0.68) !important;
}
.bowling-drop-preview {
  position: absolute;
  left: 4px;
  right: 4px;
  z-index: 12;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 9px;
  border: 1px solid #9bb7d8;
  background: rgba(155,183,216,0.16);
  color: #f6f8fb;
  box-shadow: inset 0 0 0 1px rgba(155,183,216,0.12), 0 12px 24px rgba(0,0,0,0.22);
  font-size: 10px;
  line-height: 1.15;
}
.bowling-drop-preview strong {
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.bowling-drop-preview span {
  color: #c5d3e5;
  font-weight: 700;
}
.bowling-drop-preview.invalid {
  border-color: #ef6f6c;
  background: rgba(239,68,68,0.16);
  color: #fff0ef;
}
.bowling-drop-preview.invalid span {
  color: #ffc8c2;
}
.booking {
  position:absolute; left:2px; right:2px;
  padding: 5px 7px 6px; border-radius: 8px;
  cursor:grab; overflow:hidden;
  display:flex; flex-direction:column;
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease; z-index: 2;
  font-size:10px; line-height:1.2;
}
.booking:active,
.booking.is-dragging {
  cursor: grabbing;
}
.booking.is-dragging {
  opacity: .48;
}
.bowling-drag-ghost,
.bowling-drag-ghost-card {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: .96;
  box-shadow: 0 16px 42px rgba(0,0,0,.36);
}
.bowling-drag-ghost-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-hover);
  background: var(--card);
  color: var(--text);
  line-height: 1.2;
}
.bowling-drag-ghost-card strong {
  font-size: 12px;
  font-weight: 800;
}
.bowling-drag-ghost-card span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-2);
}
.bowling-drag-ghost-card small {
  font-size: 10px;
  color: var(--text-3);
}
body.staff-mode.bowling-dragging,
body.staff-mode.bowling-dragging * {
  user-select: none;
}
body.staff-mode.bowling-dragging .slot-cell.clickable {
  cursor: grabbing;
}
body.staff-mode.bowling-dragging .slot-cell.clickable:hover::after {
  display: none !important;
}
body.staff-mode.bowling-dragging .slot-cell.clickable:hover {
  background: transparent !important;
  box-shadow: none !important;
}
.booking > * { min-width:0; }
.booking:hover { transform: scale(1.03); z-index: 10; box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
.planning-box:not(.expanded) .booking {
  left:3px; right:3px;
  padding: 6px 8px 7px;
  border-radius: 9px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.16);
}
.planning-box.expanded .booking {
  left:4px; right:4px;
  padding: 8px 9px;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.2);
}
.booking.conf { background: rgba(94,200,200,0.14); border:1px solid rgba(94,200,200,0.35); }
.booking.arr { background: rgba(245,158,11,0.14); border:1px solid rgba(245,158,11,0.35); }
.booking.paid { background: linear-gradient(135deg, rgba(156,45,143,0.22), rgba(156,45,143,0.08)); border-left: 2px solid var(--purple); }
.booking-name { font-weight:700; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.booking-meta { font-size:9px; opacity:0.7; margin-top: auto; }
.planning-box:not(.expanded) .booking-name {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.planning-box:not(.expanded) .booking-meta {
  font-size: 9px;
  line-height: 1.1;
  opacity: 0.85;
}
.planning-box.expanded .booking-name {
  font-size: 13px;
  display:block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.planning-box.expanded .booking-meta {
  font-size: 11px;
  margin-top: 6px;
  opacity: 0.84;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.planning-box.expanded .booking::after {
  content: attr(data-range) " • " attr(data-extra);
  display:block;
  margin-top: 6px;
  font-size: 10.5px;
  color: rgba(255,255,255,0.72);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.planning-box.expanded .booking.booking-compact {
  padding: 6px 8px;
}
.planning-box.expanded .booking.booking-compact .booking-name {
  font-size: 12px;
  line-height: 1.15;
}
.planning-box.expanded .booking.booking-compact .b-tag {
  margin-top: 4px;
  font-size: 8px;
  padding: 2px 6px;
}
.planning-box.expanded .booking.booking-compact .booking-meta {
  margin-top: 4px;
  font-size: 10px;
}
.planning-box.expanded .booking.booking-compact::after {
  display:none;
}
body.staff-mode.staff-light .planning-grid-wrap,
body.staff-mode.staff-light .lane-col,
body.staff-mode.staff-light .slot-cell.end {
  background: linear-gradient(180deg, rgba(246,249,252,0.94), rgba(237,243,248,0.98));
}
body.staff-mode.staff-light .hour-col,
body.staff-mode.staff-light .lane-header,
body.staff-mode.staff-light .hour-header {
  background: rgba(252,253,255,0.96);
  color: var(--text);
}
body.staff-mode.staff-light .booking {
  color: #122033;
  box-shadow: 0 10px 20px rgba(31,44,64,0.08);
}
body.staff-mode.staff-light .booking .b-tag {
  color: #213148;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(76,95,122,0.14);
}
body.staff-mode.staff-light .booking-range,
body.staff-mode.staff-light .booking-extra,
body.staff-mode.staff-light .planning-box.expanded .booking::after {
  color: rgba(18,32,51,0.72);
}
body.staff-mode.staff-light .planning-toggle {
  background: rgba(255,255,255,0.92);
  border-color: rgba(86,103,127,0.16);
  color: #1d2c42;
  box-shadow: 0 8px 18px rgba(31,44,64,0.07);
}
body.staff-mode.staff-light .current-line:after {
  background: rgba(255,255,255,0.98);
  color: #14313a;
  border-color: rgba(43,143,150,0.26);
}
.booking-range {
  margin-top: 5px;
  font-size: 10px;
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  letter-spacing: 0.04em;
}
.booking-extra {
  margin-top: 5px;
  font-size: 10px;
  color: rgba(255,255,255,0.72);
  font-weight: 600;
}
.planning-box.expanded .booking-range { font-size: 11px; }
.planning-box.expanded .booking-extra { font-size: 10.5px; }
.booking .b-tag {
  display:inline-block; font-size:8px; font-weight:800; padding: 1px 5px;
  border-radius: 4px; margin-top: 1px; letter-spacing:0.04em; text-transform:uppercase;
  background: rgba(255,255,255,0.1); color:#fff; max-width: 100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.planning-box:not(.expanded) .booking .b-tag {
  align-self:flex-start;
  margin-top: 3px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 7px;
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.12);
}
.planning-box:not(.expanded) .booking.booking-snug,
.planning-box:not(.expanded) .booking[style*="height:46px"] {
  padding: 5px 7px 6px;
}
.planning-box:not(.expanded) .booking.booking-snug .booking-name,
.planning-box:not(.expanded) .booking[style*="height:46px"] .booking-name {
  font-size: 10px;
}
.planning-box:not(.expanded) .booking.booking-snug .b-tag,
.planning-box:not(.expanded) .booking[style*="height:46px"] .b-tag {
  margin-top: 2px;
  padding: 1px 5px;
  font-size: 6.5px;
}
.planning-box:not(.expanded) .booking.booking-snug .booking-meta,
.planning-box:not(.expanded) .booking[style*="height:46px"] .booking-meta {
  font-size: 8.5px;
}
.planning-box:not(.expanded) .booking.booking-mini {
  padding: 4px 6px 5px;
}
.planning-box:not(.expanded) .booking.booking-mini .booking-name {
  font-size: 9px;
  line-height: 1.04;
}
.planning-box:not(.expanded) .booking.booking-mini .b-tag,
.planning-box:not(.expanded) .booking.booking-mini .booking-meta {
  display: none;
}
.planning-box.expanded .booking .b-tag { margin-top: 6px; font-size: 9px; padding: 3px 7px; border-radius: 7px; }
.booking.paid .b-tag { background: rgba(255,255,255,0.18); }
.current-line {
  position:absolute; left:var(--planning-hour-col); right:0; height:2px;
  background: rgba(103,186,172,0.95); z-index:20; pointer-events:none;
  box-shadow: 0 0 10px rgba(103,186,172,0.28);
}
.current-line:before {
  content:''; position:absolute; left:-4px; top:-4px;
  width:10px; height:10px; background: #67baac; border-radius:50%;
  animation: pulseDot 1.5s ease-in-out infinite;
}
.current-line:after {
  content: attr(data-time);
  position:absolute;
  top:-14px;
  left:10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(7,12,15,0.88);
  border: 1px solid rgba(103,186,172,0.4);
  color: #c8f4ec;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.table-box {
  background: var(--card); border:1px solid var(--border);
  border-radius: 14px; padding: 16px 16px 18px;
}
.table-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.table-head h2 { font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px; }
.count-badge { background: var(--purple); color:#fff; padding: 2px 8px; border-radius: 999px; font-size:10px; font-weight:700; }
.table-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.status-filters { display:flex; gap:8px; flex-wrap:wrap; }
.status-chip {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease;
}
.status-chip:hover { color:#fff; border-color: rgba(255,255,255,0.16); }
.status-chip.active { background: rgba(255,255,255,0.1); color:#fff; border-color: rgba(255,255,255,0.22); }
.status-chip span {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; margin-left:5px; padding:0 5px;
  border-radius:999px; background:rgba(255,255,255,0.08);
  color:inherit; font-size:9px;
}
.status-chip.active.open { background: rgba(255,255,255,0.12); }
.status-chip.active.arrived { background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.3); color: var(--amber); }
.status-chip.active.pending { background: rgba(94,200,200,0.14); border-color: rgba(94,200,200,0.28); color: var(--teal); }
.status-chip.active.paid { background: rgba(156,45,143,0.14); border-color: rgba(156,45,143,0.28); color: #f1b7eb; }
.table-summary { font-size:11px; color: var(--text-3); font-weight:700; }
.res-sections { display:flex; flex-direction:column; gap:10px; }
.res-section {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 9px;
  background: rgba(255,255,255,0.015);
}
.res-section-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 1px 3px 8px;
  color: var(--text-2);
}
.res-section-head .label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.res-section-head .count {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 700;
}
.search-wrap { position:relative; width: 240px; }
.search-wrap svg { position:absolute; left:12px; top:50%; transform: translateY(-50%); color: var(--text-3); }
.search-wrap input { padding: 8px 12px 8px 34px; width:100%; background: var(--bg-2); border:1px solid var(--border); border-radius:10px; color:#fff; font-size:12px; transition: border-color .2s; }
.search-wrap input:focus { outline:none; border-color: var(--purple); }
.res-list { display:flex; flex-direction:column; gap:10px; }
.res-card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px;
  display:grid; grid-template-columns: auto 1fr auto; gap:16px; align-items:center;
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease; cursor:pointer; position:relative; overflow:hidden;
}
.res-card:hover { border-color: var(--border-hover); transform: translateY(-1px); background: var(--card); }
.res-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: var(--text-3); border-radius: 14px 0 0 14px;
}
.res-card.s-pending::before { background: var(--teal); }
.res-card.s-arrived::before { background: var(--amber); }
.res-card.s-paid::before { background: var(--purple); }
.res-time {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width: 70px; padding: 8px 12px;
  background: var(--card); border-radius: 10px;
  border: 1px solid var(--border);
}
.res-time .h { font-size:18px; font-weight:900; line-height:1; }
.res-time .d { font-size:10px; color: var(--text-3); font-weight:700; margin-top:3px; letter-spacing:0.05em; }
.res-main { display:flex; flex-direction:column; gap:5px; min-width:0; }
.res-name-line { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.res-name { font-size:14.5px; font-weight:800; }
.res-ref { font-size:10px; color: var(--text-3); font-family: monospace; letter-spacing:0.08em; font-weight:700; }
.res-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:11.5px; color: var(--text-3); font-weight:600; }
.res-meta span { display:flex; align-items:center; gap:5px; }
.res-meta svg { width:11px; height:11px; }
.res-ops-mini {
  display: grid;
  gap: 4px;
  max-width: 760px;
  margin-top: 3px;
}
.res-ops-line {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 650;
}
.res-ops-line::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--teal);
}
.res-ops-line.warn::before { background: var(--amber); }
.res-ops-line.fixed::before { background: var(--text-2); }
.type-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:800; padding: 3px 8px; border-radius: 6px;
  text-transform:uppercase; letter-spacing:0.06em;
}
.type-badge.bowling { background: rgba(255,255,255,0.06); color: var(--text-2); border:1px solid var(--border); }
.type-badge.formule { background: linear-gradient(135deg, rgba(156,45,143,0.18), rgba(156,45,143,0.05)); color: #f5b8eb; border:1px solid rgba(156,45,143,0.4); }
.type-badge.laser { background: rgba(94,200,200,0.14); color: #9ff0eb; border:1px solid rgba(94,200,200,0.35); }
.res-lanes { display:flex; gap:3px; }
.res-lane-chip, .lane-chip {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; background: var(--card); border:1px solid var(--border);
  border-radius:5px; font-size:10.5px; font-weight:800;
}
.res-lane-chip.laser {
  width:auto;
  min-width:22px;
  padding: 0 8px;
  color: var(--teal);
  background: rgba(94,200,200,0.1);
  border-color: rgba(94,200,200,0.24);
}
.res-lanes-empty { font-size:10.5px; color: var(--text-3); font-weight:600; font-style:italic; }
.res-right { display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.res-status-row { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.res-status-btn {
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .15s; transition-timing-function: ease;
}
.res-status-btn:hover { color:#fff; border-color: rgba(255,255,255,0.16); }
.res-status-btn.active.pending { background: rgba(115,199,199,0.14); color: var(--teal); border-color: rgba(115,199,199,0.28); }
.res-status-btn.active.arrived { background: rgba(245,158,11,0.12); color: var(--amber); border-color: rgba(245,158,11,0.25); }
.res-status-btn.active.paid { background: rgba(16,185,129,0.12); color: var(--success); border-color: rgba(16,185,129,0.25); }
.res-section.workflow {
  padding: 8px 9px 9px;
  border-radius: 16px;
  background: rgba(255,255,255,0.018);
}
.res-section.workflow.arrived { border-color: rgba(245,158,11,0.18); }
.res-section.workflow.pending { border-color: rgba(94,200,200,0.18); }
.res-section.workflow.paid { border-color: rgba(156,45,143,0.14); background: rgba(255,255,255,0.012); }
.res-section.workflow .res-section-head { padding: 1px 2px 8px; }
.res-section-head .meta { display:flex; align-items:center; gap:10px; }
.res-section-head .meta .count {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--text-2);
}
.res-dense-list { display:flex; flex-direction:column; gap:6px; }
.res-row {
  display:grid;
  grid-template-columns: 62px minmax(0, 1.7fr) minmax(130px, .8fr) auto;
  gap:10px;
  align-items:center;
  padding: 8px 9px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.24);
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
  cursor:pointer;
}
.res-row:hover { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); transform: translateY(-1px); }
.res-row.pending { border-left: 3px solid var(--teal); }
.res-row.arrived { border-left: 3px solid var(--amber); }
.res-row.paid { border-left: 3px solid rgba(156,45,143,0.6); background: rgba(255,255,255,0.015); opacity: .82; }
.res-section.workflow.paid .res-row { padding: 7px 8px; }
.res-row-time {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:44px; border-radius:10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  font-variant-numeric: tabular-nums;
}
.res-row-time strong { font-size:15px; font-weight:900; line-height:1; }
.res-row-time span {
  margin-top:3px;
  font-size:9px; color: var(--text-3);
  font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
}
.res-row-main { min-width:0; display:flex; flex-direction:column; gap:4px; }
.res-row-top { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }
.res-row-name { font-size:12px; font-weight:800; color:#fff; }
.res-row-ref { font-size:9px; color: var(--text-3); font-family: monospace; font-weight:700; letter-spacing:0.06em; }
.res-row-meta { display:flex; flex-wrap:wrap; gap:8px; font-size:10px; color: var(--text-3); font-weight:600; }
.res-row-meta span { display:inline-flex; align-items:center; gap:5px; }
.res-row-meta svg { width:10px; height:10px; }
.res-row-side { min-width:0; display:flex; flex-direction:column; gap:5px; align-items:flex-start; }
.res-row-label {
  font-size:10px; color: var(--text-2);
  font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
}
.res-row-lanes { display:flex; flex-wrap:wrap; gap:4px; }
.res-row-actions { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.res-row-tools { display:flex; align-items:center; gap:5px; }
.res-state-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 9px; border-radius:999px;
  font-size:9px; font-weight:800; letter-spacing:0.06em;
  text-transform:uppercase; border:1px solid transparent;
}
.res-state-pill.pending { color: var(--teal); background: rgba(94,200,200,0.12); border-color: rgba(94,200,200,0.22); }
.res-state-pill.arrived { color: var(--amber); background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.24); }
.res-state-pill.paid { color: var(--success); background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.24); }
.res-status-row.compact { gap:5px; justify-content:flex-end; }
.res-status-row.compact .res-status-btn { min-width:54px; padding: 4px 7px; font-size:8.5px; }
.res-empty-inline {
  padding: 14px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.018);
  color: var(--text-3);
  font-size: 11px;
  text-align:center;
}
.res-actions { display:flex; gap:5px; align-items:center; }
.res-quick {
  padding: 5px 8px; border-radius: 8px; font-weight:800;
  font-size:9px; letter-spacing:0.04em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:5px;
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .15s; transition-timing-function: ease;
  border: 1px solid transparent;
}
.res-quick.confirm { background: rgba(245,158,11,0.12); color: var(--amber); border-color: rgba(245,158,11,0.3); }
.res-quick.confirm:hover { background: rgba(245,158,11,0.22); transform: translateY(-1px); }
.res-quick.pay { background: rgba(156,45,143,0.15); color: #f5b8eb; border-color: rgba(156,45,143,0.4); }
.res-quick.pay:hover { background: rgba(156,45,143,0.28); transform: translateY(-1px); }
.res-quick.done { background: rgba(16,185,129,0.1); color: var(--success); border-color: rgba(16,185,129,0.25); cursor:default; }
.res-icon-btn, .icon-btn {
  width:27px; height:27px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); color: var(--text-3);
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .15s; transition-timing-function: ease;
}
.res-icon-btn:hover, .icon-btn:hover { color:#fff; background: var(--card); border-color: var(--border-hover); }
.res-icon-btn.warn:hover, .icon-btn.warn:hover { color: var(--amber); border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.08); }
.res-icon-btn.danger:hover, .icon-btn.danger:hover { color: var(--red); border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.08); }
body.staff-mode.staff-light .res-row,
body.staff-mode.staff-light .res-section.workflow,
body.staff-mode.staff-light .res-section,
body.staff-mode.staff-light .table-box,
body.staff-mode.staff-light .kpi,
body.staff-mode.staff-light .planning-box,
body.staff-mode.staff-light .edit-summary-card,
body.staff-mode.staff-light .edit-summary-stat,
body.staff-mode.staff-light .edit-form .info-block.soft,
body.staff-mode.staff-light .qb-modal,
body.staff-mode.staff-light .edit-modal,
body.staff-mode.staff-light .pos-head {
  box-shadow: 0 18px 34px rgba(31,44,64,0.08);
}
body.staff-mode.staff-light .res-row,
body.staff-mode.staff-light .res-section.workflow,
body.staff-mode.staff-light .res-section,
body.staff-mode.staff-light .edit-inline-note {
  background: rgba(255,255,255,0.76);
}
body.staff-mode.staff-light .res-row-name,
body.staff-mode.staff-light .planning-head h2,
body.staff-mode.staff-light .table-head h2,
body.staff-mode.staff-light .edit-summary-card h4,
body.staff-mode.staff-light .edit-inline-note .v {
  color: #162338;
}
body.staff-mode.staff-light .search-wrap input,
body.staff-mode.staff-light .edit-form .input,
body.staff-mode.staff-light .edit-form select.input,
body.staff-mode.staff-light .auth-input,
body.staff-mode.staff-light .qb-input {
  background: rgba(255,255,255,0.94);
  color: #162338;
  border-color: rgba(86,103,127,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
body.staff-mode.staff-light .date-nav,
body.staff-mode.staff-light .status-chip,
body.staff-mode.staff-light .res-status-btn,
body.staff-mode.staff-light .res-icon-btn,
body.staff-mode.staff-light .icon-btn,
body.staff-mode.staff-light .res-lane-chip,
body.staff-mode.staff-light .lane-chip,
body.staff-mode.staff-light .close-btn,
body.staff-mode.staff-light .modal-tabs,
body.staff-mode.staff-light .tabs {
  background: rgba(255,255,255,0.88);
  border-color: rgba(86,103,127,0.14);
  color: rgba(29,44,66,0.82);
}
body.staff-mode.staff-light .pos-panel,
body.staff-mode.staff-light .qb-modal,
body.staff-mode.staff-light .edit-modal {
  background: linear-gradient(180deg, rgba(251,253,255,0.98), rgba(241,246,251,0.98));
}
body.staff-mode.staff-light .btn-new {
  background: linear-gradient(135deg, #21344d, #162338);
  color: #f8fbff;
  box-shadow: 0 12px 24px rgba(25, 39, 60, 0.18);
}
body.staff-mode.staff-light .btn-new:hover {
  background: linear-gradient(135deg, #17283e, #101c2c);
}
body.staff-mode.staff-light .count-badge {
  background: rgba(143,72,125,0.14);
  color: #7a3d6b;
  border: 1px solid rgba(143,72,125,0.18);
}
body.staff-mode.staff-light .kpi {
  background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(247,250,253,0.96));
  border-color: rgba(86,103,127,0.14);
}
body.staff-mode.staff-light .kpi.accent {
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(43,143,150,0.08));
  border-color: rgba(43,143,150,0.18);
}
body.staff-mode.staff-light .kpi .value,
body.staff-mode.staff-light .kpi .hint,
body.staff-mode.staff-light .kpi .label,
body.staff-mode.staff-light .table-summary,
body.staff-mode.staff-light .res-section-head,
body.staff-mode.staff-light .res-row-meta,
body.staff-mode.staff-light .res-row-time span,
body.staff-mode.staff-light .res-lanes-empty,
body.staff-mode.staff-light .planning-sub,
body.staff-mode.staff-light .hour-header,
body.staff-mode.staff-light .hour-cell,
body.staff-mode.staff-light .lane-header .pl,
body.staff-mode.staff-light .qb-head .sub,
body.staff-mode.staff-light .edit-summary-card p,
body.staff-mode.staff-light .edit-summary-stat .k,
body.staff-mode.staff-light .info-row .lbl,
body.staff-mode.staff-light .info-row .val small,
body.staff-mode.staff-light .empty-state,
body.staff-mode.staff-light .empty-state .e-sub {
  color: var(--text-3);
}
body.staff-mode.staff-light .table-box,
body.staff-mode.staff-light .planning-box,
body.staff-mode.staff-light .res-section,
body.staff-mode.staff-light .res-section.workflow,
body.staff-mode.staff-light .edit-summary-card,
body.staff-mode.staff-light .edit-summary-stat,
body.staff-mode.staff-light .edit-form .info-block.soft,
body.staff-mode.staff-light .info-block,
body.staff-mode.staff-light .receipt,
body.staff-mode.staff-light .qb-block {
  border-color: rgba(86,103,127,0.14);
}
body.staff-mode.staff-light .planning-head {
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(244,248,252,0.92));
}
body.staff-mode.staff-light .planning-box.expanded {
  box-shadow: 0 28px 72px rgba(31,44,64,0.18);
}
body.staff-mode.staff-light .lane-col.maint {
  background-image: repeating-linear-gradient(45deg, rgba(110,124,146,0.08), rgba(110,124,146,0.08) 10px, transparent 10px, transparent 20px);
  opacity: 1;
}
body.staff-mode.staff-light .hour-cell.major,
body.staff-mode.staff-light .hour-cell.end,
body.staff-mode.staff-light .lane-header .num,
body.staff-mode.staff-light .table-head h2,
body.staff-mode.staff-light .res-row-time strong,
body.staff-mode.staff-light .res-row-label,
body.staff-mode.staff-light .res-state-pill,
body.staff-mode.staff-light .info-row .val,
body.staff-mode.staff-light .receipt-head .title,
body.staff-mode.staff-light .receipt-total .lbl,
body.staff-mode.staff-light .receipt-total .amount,
body.staff-mode.staff-light .qb-summary .amt,
body.staff-mode.staff-light .qb-head h3,
body.staff-mode.staff-light .edit-modal-head h3,
body.staff-mode.staff-light .pos-head h3,
body.staff-mode.staff-light .tab.active,
body.staff-mode.staff-light .modal-tabs .tab.active {
  color: var(--text);
}
body.staff-mode.staff-light .booking.conf {
  background: linear-gradient(135deg, rgba(43,143,150,0.14), rgba(43,143,150,0.06));
  border: 1px solid rgba(43,143,150,0.2);
}
body.staff-mode.staff-light .booking.arr {
  background: linear-gradient(135deg, rgba(168,100,17,0.16), rgba(168,100,17,0.06));
  border: 1px solid rgba(168,100,17,0.2);
}
body.staff-mode.staff-light .booking.paid {
  background: linear-gradient(135deg, rgba(143,72,125,0.16), rgba(143,72,125,0.06));
  border-left: 2px solid rgba(143,72,125,0.48);
}
body.staff-mode.staff-light .res-row {
  border-color: rgba(86,103,127,0.12);
  background: rgba(255,255,255,0.82);
}
body.staff-mode.staff-light .res-row:hover {
  border-color: rgba(43,59,84,0.22);
  background: rgba(255,255,255,0.94);
}
body.staff-mode.staff-light .res-row.paid {
  background: rgba(249,251,253,0.86);
  opacity: 1;
}
body.staff-mode.staff-light .res-row-time,
body.staff-mode.staff-light .res-icon-btn,
body.staff-mode.staff-light .icon-btn,
body.staff-mode.staff-light .res-lane-chip,
body.staff-mode.staff-light .lane-chip,
body.staff-mode.staff-light .status-chip,
body.staff-mode.staff-light .res-status-btn,
body.staff-mode.staff-light .search-wrap input,
body.staff-mode.staff-light .tabs,
body.staff-mode.staff-light .modal-tabs,
body.staff-mode.staff-light .close-btn,
body.staff-mode.staff-light .date-nav {
  background: rgba(248,250,253,0.96);
}
body.staff-mode.staff-light .status-chip:hover,
body.staff-mode.staff-light .res-status-btn:hover,
body.staff-mode.staff-light .res-icon-btn:hover,
body.staff-mode.staff-light .icon-btn:hover,
body.staff-mode.staff-light .close-btn:hover {
  color: var(--text);
  border-color: rgba(43,59,84,0.22);
  background: rgba(255,255,255,0.98);
}
body.staff-mode.staff-light .status-chip.active {
  background: rgba(29,44,66,0.08);
  border-color: rgba(29,44,66,0.16);
  color: #1d2c42;
}
body.staff-mode.staff-light .status-chip span {
  background: rgba(29,44,66,0.08);
}
body.staff-mode.staff-light .status-chip.active.open {
  background: rgba(29,44,66,0.08);
}
body.staff-mode.staff-light .status-chip.active.pending,
body.staff-mode.staff-light .res-status-btn.active.pending,
body.staff-mode.staff-light .res-state-pill.pending {
  background: rgba(43,143,150,0.12);
  border-color: rgba(43,143,150,0.2);
  color: #1f7378;
}
body.staff-mode.staff-light .status-chip.active.arrived,
body.staff-mode.staff-light .res-status-btn.active.arrived,
body.staff-mode.staff-light .res-state-pill.arrived {
  background: rgba(168,100,17,0.12);
  border-color: rgba(168,100,17,0.2);
  color: #8d540f;
}
body.staff-mode.staff-light .status-chip.active.paid,
body.staff-mode.staff-light .res-status-btn.active.paid,
body.staff-mode.staff-light .res-state-pill.paid {
  background: rgba(18,128,95,0.1);
  border-color: rgba(18,128,95,0.18);
  color: #14634d;
}
body.staff-mode.staff-light .type-badge.bowling {
  background: rgba(29,44,66,0.06);
  border-color: rgba(86,103,127,0.14);
  color: #33445d;
}
body.staff-mode.staff-light .type-badge.formule {
  background: rgba(143,72,125,0.1);
  border-color: rgba(143,72,125,0.16);
  color: #7b426a;
}
body.staff-mode.staff-light .search-wrap svg,
body.staff-mode.staff-light .lane-header .settings,
body.staff-mode.staff-light .res-icon-btn,
body.staff-mode.staff-light .icon-btn,
body.staff-mode.staff-light .close-btn,
body.staff-mode.staff-light .table-head,
body.staff-mode.staff-light .empty-state svg {
  color: var(--text-3);
}
body.staff-mode.staff-light .search-wrap input:focus,
body.staff-mode.staff-light .edit-form .input:focus,
body.staff-mode.staff-light .edit-form select.input:focus,
body.staff-mode.staff-light .qb-input:focus,
body.staff-mode.staff-light .auth-input:focus {
  outline: none;
  border-color: rgba(43,143,150,0.34);
  box-shadow: 0 0 0 4px rgba(43,143,150,0.12);
}
body.staff-mode.staff-light .tabs {
  background: rgba(238,243,248,0.98);
}
body.staff-mode.staff-light .tab.active,
body.staff-mode.staff-light .modal-tabs .tab.active {
  background: #ffffff;
  box-shadow: 0 8px 16px rgba(31,44,64,0.08);
}
body.staff-mode.staff-light .tab.active.purple {
  background: linear-gradient(135deg, #8f487d, #7a3d6b);
  color: #fff;
}
body.staff-mode.staff-light .info-label,
body.staff-mode.staff-light .qb-head .ticket-id {
  color: #7a3d6b;
}
body.staff-mode.staff-light .toast {
  color: var(--text);
  background: rgba(255,255,255,0.94);
  border-color: rgba(86,103,127,0.16);
  box-shadow: 0 18px 34px rgba(31,44,64,0.14);
}
body.staff-mode.staff-light .pos-overlay,
body.staff-mode.staff-light .qb-overlay {
  background: rgba(116,131,154,0.2);
  backdrop-filter: blur(10px);
}
body.staff-mode.staff-light .pos-overlay.centered {
  background: rgba(116,131,154,0.28);
}
body.staff-mode.staff-light .pos-head,
body.staff-mode.staff-light .edit-modal-head,
body.staff-mode.staff-light .qb-head {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(246,249,252,0.96));
  border-bottom-color: rgba(86,103,127,0.12);
}
body.staff-mode.staff-light .pos-panel {
  background: linear-gradient(180deg, rgba(251,253,255,0.98), rgba(241,246,251,0.98));
  border-left-color: rgba(86,103,127,0.14);
}
body.staff-mode.staff-light .receipt {
  background: rgba(255,255,255,0.94);
}
body.staff-mode.staff-light .paid-overlay {
  background: rgba(255,255,255,0.88);
  border-color: rgba(18,128,95,0.16);
}
body.staff-mode.staff-light .paid-overlay .paid-method {
  color: rgba(20,32,51,0.54);
}
body.staff-mode.staff-light .upsell-btn,
body.staff-mode.staff-light .qb-type-btn,
body.staff-mode.staff-light .qb-dur-btn,
body.staff-mode.staff-light .qb-lane-btn,
body.staff-mode.staff-light .qb-btn-cancel {
  background: rgba(255,255,255,0.92);
  border-color: rgba(86,103,127,0.14);
  color: var(--text-2);
}
body.staff-mode.staff-light .upsell-btn:hover {
  border-color: rgba(143,72,125,0.18);
  background: rgba(255,255,255,0.98);
}
body.staff-mode.staff-light .upsell-btn .p {
  color: var(--text);
}
body.staff-mode.staff-light .pay-btn,
body.staff-mode.staff-light .flow-btn.white {
  background: linear-gradient(180deg, #ffffff, #f4f7fb);
  color: #162338;
  border: 1px solid rgba(86,103,127,0.14);
  box-shadow: 0 10px 18px rgba(31,44,64,0.08);
}
body.staff-mode.staff-light .flow-btn.teal,
body.staff-mode.staff-light .qb-btn-save {
  background: linear-gradient(135deg, #21344d, #162338);
  color: #f8fbff;
  box-shadow: 0 14px 24px rgba(25,39,60,0.16);
}
body.staff-mode.staff-light .qb-type-btn.active,
body.staff-mode.staff-light .qb-dur-btn.active {
  background: rgba(29,44,66,0.08);
  border-color: rgba(29,44,66,0.16);
  color: #162338;
}
body.staff-mode.staff-light .qb-lane-btn.active {
  background: rgba(43,143,150,0.14);
  color: #1f7378;
  border-color: rgba(43,143,150,0.2);
}
body.staff-mode.staff-light .qb-lane-btn.auto {
  background: rgba(43,143,150,0.08);
  color: #1f7378;
  border-color: rgba(43,143,150,0.22);
}
body.staff-mode.staff-light .qb-lane-btn.busy {
  background: rgba(193,69,69,0.08);
  color: #a23e3e;
  border-color: rgba(193,69,69,0.14);
}
body.staff-mode.staff-light .qb-lane-btn.maint {
  background: repeating-linear-gradient(45deg, rgba(110,124,146,0.08) 0 6px, transparent 6px 12px);
}
body.staff-mode.staff-light .qb-summary {
  background: linear-gradient(135deg, rgba(43,143,150,0.08), rgba(143,72,125,0.06));
  border-color: rgba(86,103,127,0.14);
}
body.staff-mode.staff-light .empty-state .e-title {
  color: var(--text);
}
.empty-state {
  text-align:center; padding: 50px 20px; color: var(--text-3);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.empty-state svg { color: var(--text-3); opacity:0.4; }
.empty-state .e-title { font-size:14px; font-weight:700; color: var(--text-2); }
.empty-state .e-sub { font-size:12px; }
.pos-overlay, .qb-overlay {
  position:fixed; inset:0; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
  z-index:420; display:flex;
  animation: fadeIn .25s ease;
}
.pos-overlay { justify-content:flex-end; }
.pos-overlay.centered {
  justify-content:center;
  align-items:center;
  padding: 24px;
  background: rgba(0,0,0,0.76);
}
.qb-overlay { z-index:430; align-items:center; justify-content:center; padding:14px; background: rgba(0,0,0,0.75); }
.pos-panel {
  width: 460px; max-width: 100%; height:100vh;
  background: var(--bg); border-left: 1px solid var(--border);
  display:flex; flex-direction:column;
  animation: slideRight .35s cubic-bezier(0.16,1,0.3,1);
}
.pos-head { padding: 24px; border-bottom: 1px solid var(--border); background: var(--card); }
.pos-head-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
.ticket-id { font-size:10px; color: var(--text-3); font-family: monospace; letter-spacing:0.2em; font-weight:700; }
.pos-head h3 { font-size:24px; font-weight:900; margin-top:4px; }
.close-btn { width:34px; height:34px; border-radius:50%; background: var(--bg-2); border:1px solid var(--border); color: var(--text-2); display:flex; align-items:center; justify-content:center; transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease; }
.close-btn:hover { color:#fff; background: var(--card-2); }
.tabs { display:flex; gap:2px; padding:4px; background: #000; border:1px solid var(--border); border-radius:10px; }
.tab { flex:1; padding:9px; font-size:11px; font-weight:700; color: var(--text-3); border-radius:7px; transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease; text-transform:uppercase; letter-spacing:0.08em; }
.tab.active { background: var(--card); color:#fff; }
.tab.active.purple { background: var(--purple); color:#fff; }
.pos-body { flex:1; overflow-y:auto; padding: 24px; }
.info-block { background: var(--card); border:1px solid var(--border); border-radius: 16px; padding: 20px; margin-bottom:16px; }
.info-label { font-size:10px; color: var(--purple); font-weight:800; text-transform:uppercase; letter-spacing:0.15em; margin-bottom:14px; }
.info-grid { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.info-row .lbl { font-size:10px; text-transform:uppercase; color: var(--text-3); letter-spacing:0.08em; font-weight:700; margin-bottom:4px; }
.info-row .val { font-size:17px; font-weight:900; }
.info-row .val small { font-size:11px; color: var(--text-3); font-weight:500; }
.ops-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.ops-plan-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
}
.ops-plan-card .k {
  color: var(--text-3);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 7px;
}
.ops-plan-card .v {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 750;
}
.ops-checklist {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}
.ops-checklist span {
  display: flex;
  gap: 8px;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 650;
}
.ops-checklist span::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--amber);
}
.receipt {
  background: var(--card); border:1px solid var(--border);
  padding: 24px; border-radius: 16px; margin-bottom:20px;
  font-family: monospace; position:relative;
}
.receipt-head { text-align:center; border-bottom: 2px dashed var(--border); padding-bottom:16px; margin-bottom:16px; }
.receipt-head .title { font-weight:800; font-size:18px; }
.receipt-line { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; gap:12px; }
.receipt-line .extra-rm { color: var(--red); font-size:18px; font-weight:800; padding: 0 6px; line-height:1; }
.receipt-total {
  display:flex; justify-content:space-between; align-items:flex-end;
  padding-top:16px; margin-top:16px; border-top: 2px dashed var(--border);
}
.receipt-total .lbl { font-size:18px; font-weight:900; }
.receipt-total .amount { font-size:28px; font-weight:900; }
.paid-overlay {
  position:absolute; inset:0; background: rgba(0,0,0,0.88); backdrop-filter: blur(3px);
  border-radius: 16px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border: 1px solid rgba(16,185,129,0.3);
  animation: scaleIn .35s ease;
}
.paid-overlay .paid-text { color: var(--success); font-weight:900; font-size:26px; letter-spacing:0.15em; margin-top:8px; }
.paid-overlay .paid-method { color: var(--text-2); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; margin-top:4px; }
.upsell-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin: 18px 0; }
.upsell-btn { background: var(--card); border:1px solid var(--border); padding: 14px 10px; border-radius: 12px; display:flex; flex-direction:column; align-items:center; gap:6px; transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease; }
.upsell-btn:hover { border-color: var(--purple); transform: translateY(-2px); background: rgba(156,45,143,0.05); }
.upsell-btn .n { font-size:11px; color: var(--text-2); font-weight:700; text-align:center; }
.upsell-btn .p { font-size:14px; font-weight:900; color:#fff; }
.pay-grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.pay-btn { background:#fff; color:#000; padding:18px; border-radius:12px; font-weight:800; display:flex; flex-direction:column; align-items:center; gap:8px; transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; }
.pay-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,255,255,0.1); }
.flow-btn { width:100%; padding:16px; border-radius:12px; font-weight:800; font-size:13px; transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease; text-transform:uppercase; letter-spacing:0.08em; margin-top:16px; }
.flow-btn.white { background:#fff; color:#000; }
.flow-btn.white:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,255,255,0.1); }
.flow-btn.teal { background: var(--teal); color:#000; }
.flow-btn.teal:hover { background: var(--teal-dark); }
.edit-form { display:flex; flex-direction:column; gap:12px; }
.edit-form .info-block { margin-bottom:0; }
.edit-form .input { padding:10px 12px; font-size:13px; background: #000; }
.edit-shell {
  width:100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.edit-summary {
  display:grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(110px, 0.7fr));
  gap:10px;
  margin-bottom: 12px;
}
.edit-summary-card,
.edit-summary-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 14px 16px;
}
.edit-summary-card h4 {
  font-size: 20px;
  font-weight: 900;
  margin: 4px 0 5px;
  line-height: 1.02;
}
.edit-summary-card p {
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.35;
}
.edit-summary-stat {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}
.edit-summary-stat .k {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
}
.edit-summary-stat .v {
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}
.edit-layout {
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap:12px;
}
.edit-stack {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.edit-grid-2 {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.edit-form .info-block.soft {
  background: rgba(255,255,255,0.03);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.06);
  padding: 14px;
}
.edit-form .info-block.soft.compact {
  padding: 14px;
}
.edit-form .input, .edit-form select.input {
  min-height: 42px;
  border-radius: 14px;
  background: rgba(0,0,0,0.42);
}
.edit-form .field-stack {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.edit-inline-note {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.24);
  border: 1px solid rgba(255,255,255,0.05);
  font-size: 12px;
}
.edit-inline-note .n {
  color: var(--text-3);
  font-weight: 700;
}
.edit-inline-note .v {
  font-weight: 800;
  color: #fff;
}
.edit-actions {
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
  align-items:stretch;
  margin-top: 6px;
  padding-top: 8px;
}
.edit-actions .btn-secondary,
.edit-actions .btn-primary {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  justify-content:center;
}
.edit-form .btn-primary {
  max-width: none;
  margin: 0;
  border-radius: 16px;
}
.pos-body.edit-mode { display:flex; justify-content:center; align-items:flex-start; }
.edit-modal {
  width: min(680px, 100%);
  max-height: min(84vh, 760px);
  overflow:auto;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(26,29,37,0.98), rgba(18,21,28,0.98));
  box-shadow: 0 32px 90px rgba(0,0,0,0.42);
  animation: scaleIn .28s cubic-bezier(0.16,1,0.3,1);
}
.edit-modal-head {
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.edit-modal-head h3 {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.edit-modal-head p {
  margin-top: 4px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.35;
}
.edit-modal-body {
  padding: 14px 18px 18px;
}
.modal-tabs {
  display:flex;
  gap:6px;
  margin-top: 10px;
  padding:4px;
  border-radius: 10px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.06);
  width: min(300px, 100%);
}
.modal-tabs .tab {
  flex:1;
  padding:8px 10px;
  border-radius: 8px;
}
@media(max-width:760px){
  .edit-modal {
    width: min(96vw, 680px);
    max-height: min(88vh, 760px);
  }
  .edit-summary,
  .edit-layout,
  .edit-grid-2 {
    grid-template-columns: 1fr;
  }
  .edit-actions {
    grid-template-columns: 1fr;
  }
  .edit-actions .btn-secondary,
  .edit-actions .btn-primary,
  .modal-tabs {
    width: 100%;
  }
}
.hidden { display:none !important; }
.toast {
  position:fixed; bottom:30px; left:50%; transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--border);
  padding: 14px 22px; border-radius: 12px;
  color:#fff; font-weight:700; font-size:14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  z-index: 500; display:flex; align-items:center; gap:10px;
  animation: slideUp .35s ease both;
}
.qb-modal {
  width: min(760px, calc(100vw - 24px)); max-width: 100%; max-height: calc(100dvh - 28px); overflow-y:auto;
  background: var(--card); border:1px solid var(--border);
  border-radius: 18px; padding: 0;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  animation: scaleIn .25s cubic-bezier(0.16,1,0.3,1);
}
.qb-head {
  padding: 16px 20px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:flex-start;
  background: linear-gradient(135deg, rgba(156,45,143,0.08), transparent);
}
.qb-head .ticket-id { font-size:10px; color:var(--purple); font-weight:800; letter-spacing:0.2em; text-transform:uppercase; margin-bottom:4px; }
.qb-head h3 { font-size:18px; font-weight:900; line-height:1.05; }
.qb-head .sub { font-size:11px; color:var(--text-3); margin-top:3px; font-weight:500; }
.qb-body { padding: 16px 20px; display:flex; flex-direction:column; gap:12px; }
.qb-block { background: var(--bg-2); border:1px solid var(--border); border-radius: 12px; padding: 12px; }
.qb-block .blk-label { font-size:9px; color:var(--text-3); font-weight:800; text-transform:uppercase; letter-spacing:0.12em; margin-bottom:8px; }
.qb-row { display:grid; gap:8px; }
.qb-row.two { grid-template-columns: 1fr 1fr; }
.qb-row.three { grid-template-columns: 1.2fr 1fr 1fr; }
.qb-mini-label { font-size:9px; color:var(--text-3); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:4px; display:block; }
.qb-modal .qb-input,
.qb-modal select.qb-input,
.qb-modal textarea.qb-input {
  padding: 11px 12px;
  font-size: 13px;
  border-radius: 12px;
}
.qb-type-row { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:8px; margin-bottom: 10px; }
.qb-type-btn {
  padding: 10px; background: var(--card); border:1px solid var(--border);
  border-radius: 10px; font-weight:700; font-size:12px; color:var(--text-2);
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease; display:flex; align-items:center; justify-content:center; gap:8px;
}
.qb-type-btn:hover { border-color: var(--border-hover); color:#fff; }
.qb-type-btn.active { background: rgba(156,45,143,0.15); border-color:var(--purple); color:#fff; }
.qb-snapshot-row {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:8px;
  margin-bottom: 12px;
}
.qb-snapshot {
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}
.qb-snapshot .k {
  font-size: 9px;
  color: var(--text-3);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.qb-snapshot .v {
  margin-top: 7px;
  font-size: 15px;
  color: var(--text);
  font-weight: 800;
  line-height: 1.1;
}
.qb-snapshot .t {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  line-height: 1.35;
}
.qb-slot-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 8px;
}
.qb-section-note {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  line-height: 1.4;
}
.qb-dur-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:8px; }
.qb-dur-grid.laser { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qb-dur-btn {
  padding: 8px 6px; background: var(--card); border:1px solid var(--border);
  border-radius: 9px; font-weight:700; font-size:12px; color:var(--text-2);
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease;
}
.qb-dur-btn:hover { border-color: var(--border-hover); color:#fff; }
.qb-dur-btn.active { background:#fff; color:#000; border-color:#fff; }
.qb-lane-grid { display:grid; grid-template-columns: repeat(8,1fr); gap:6px; }
.qb-lane-btn {
  padding: 8px 0; background: var(--card); border:1px solid var(--border);
  border-radius: 8px; font-weight:800; font-size:12px; color:var(--text-2);
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease; position:relative;
}
.qb-lane-btn:hover:not(.busy):not(.maint) { border-color: var(--border-hover); color:#fff; }
.qb-lane-btn.active { background: var(--teal); color:#000; border-color: var(--teal); }
.qb-lane-btn.auto { background: rgba(94,200,200,0.12); color: var(--teal); border-color: rgba(94,200,200,0.4); border-style:dashed; }
.qb-lane-btn.busy { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.25); color:var(--red); cursor:not-allowed; opacity:0.6; }
.qb-lane-btn.maint { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 6px, transparent 6px 12px); color:var(--text-3); cursor:not-allowed; }
.qb-summary {
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px; background: linear-gradient(135deg, rgba(94,200,200,0.08), rgba(156,45,143,0.06));
  border: 1px solid var(--border); border-radius: 12px;
}
.qb-summary .lbl { font-size:11px; color:var(--text-3); font-weight:700; text-transform:uppercase; letter-spacing:0.1em; }
.qb-summary .amt { font-size:20px; font-weight:900; color: var(--teal); }
.qb-summary .desc { font-size:11px; color:var(--text-2); margin-top:2px; font-weight:600; }
.qb-actions { display:flex; gap:10px; padding: 12px 20px 16px; }
.qb-btn-cancel {
  padding: 10px 16px; background: var(--card-2); border:1px solid var(--border);
  border-radius: 10px; font-weight:700; font-size:12px; color: var(--text-2);
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease;
}
.qb-btn-cancel:hover { color:#fff; }
.qb-btn-save {
  flex:1; padding: 10px 16px; background: var(--purple); color:#fff;
  border-radius: 10px; font-weight:800; font-size:12px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; transition-duration: .2s; transition-timing-function: ease;
  box-shadow: 0 6px 18px rgba(156,45,143,0.35);
}
.qb-btn-save:hover { background: var(--purple-soft); transform: translateY(-1px); }
.qb-warn {
  font-size:11.5px; color: var(--amber); font-weight:600;
  background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.25);
  padding: 10px 12px; border-radius: 8px;
}
.qb-meta-grid {
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:8px;
}
.qb-meta-card {
  padding: 11px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 74px;
}
.qb-meta-card .meta-label {
  font-size: 9px;
  color: var(--text-3);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.qb-meta-card .meta-value {
  font-size: 16px;
  color: var(--text);
  font-weight: 800;
  line-height: 1.05;
}
.qb-meta-card .meta-sub {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  line-height: 1.35;
}
.qb-meta-card.is-highlight {
  border-color: rgba(183, 160, 124, 0.28);
}
.qb-phone-shell {
  display:flex;
  align-items:center;
  gap:10px;
  min-height: 47px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}
.qb-phone-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 46px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.qb-input-phone {
  flex:1;
  min-width:0;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding: 10px 0 !important;
}
.qb-input-phone:focus {
  outline:none;
}
.qb-formule-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
}
.qb-formule-card {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  text-align:left;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.qb-formule-card:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--border-hover);
}
.qb-formule-card.active {
  border-color: rgba(183, 160, 124, 0.38);
  background: rgba(183, 160, 124, 0.08);
}
.qb-formule-card.unavailable {
  opacity: 0.62;
}
.qb-formule-card:disabled {
  cursor:not-allowed;
}
.qb-formule-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.qb-formule-name {
  font-size: 12px;
  color: var(--text);
  font-weight: 800;
  line-height: 1.2;
}
.qb-formule-price {
  font-size: 12px;
  color: var(--text);
  font-weight: 800;
  white-space: nowrap;
}
.qb-formule-sub {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.4;
}
.qb-formule-status {
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.qb-status-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.qb-status-pill.ok {
  color: var(--teal);
  border-color: rgba(94,200,200,0.22);
  background: rgba(94,200,200,0.08);
}
.qb-status-pill.no {
  color: var(--amber);
  border-color: rgba(245,158,11,0.2);
  background: rgba(245,158,11,0.08);
}
.qb-slot-strip {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.qb-slot-chip {
  min-width: 102px;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  text-align:left;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.qb-slot-chip:hover {
  transform: translateY(-1px);
  border-color: var(--border-hover);
}
.qb-slot-chip.active {
  border-color: rgba(183, 160, 124, 0.38);
  background: rgba(183, 160, 124, 0.08);
}
.qb-slot-chip .time {
  display:block;
  font-size: 17px;
  color: var(--text);
  font-weight: 900;
  line-height: 1;
}
.qb-slot-chip .sub {
  display:block;
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-3);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.qb-slot-chip .lanes {
  display:block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-2);
  font-weight: 700;
}
.qb-lane-focus {
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap:12px;
  align-items:start;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  margin-bottom: 12px;
}
.qb-lane-focus-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.qb-lane-focus-sub {
  margin-top: 5px;
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  line-height: 1.4;
}
.qb-action-stack {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.qb-lane-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top: 10px;
  flex-wrap:wrap;
}
.qb-lane-selection {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 700;
}
.qb-inline-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.qb-ghost-btn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: border-color .18s ease, color .18s ease, transform .18s ease, background .18s ease;
}
.qb-ghost-btn:hover {
  transform: translateY(-1px);
  border-color: var(--border-hover);
  color: var(--text);
}
.qb-lane-btn.suggested {
  border-color: rgba(183, 160, 124, 0.22);
  color: var(--text);
  background: rgba(183, 160, 124, 0.06);
}
.qb-lane-btn.suggested::after {
  content:'';
  position:absolute;
  top:5px;
  right:5px;
  width:5px;
  height:5px;
  border-radius:50%;
  background: var(--teal);
}
.qb-inline-note {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  line-height: 1.4;
}
.qb-empty-note {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed var(--border);
  background: rgba(255,255,255,0.02);
}
.slot-cell.clickable { cursor:cell; transition: background .15s; }
.slot-cell.clickable:hover { background: rgba(94,200,200,0.08); box-shadow: inset 0 0 0 1px rgba(94,200,200,0.3); }
.slot-cell.clickable:hover::after {
  content:'+'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--teal); font-weight:300; font-size:18px; pointer-events:none;
}
@media(max-width:720px){
  .res-card { grid-template-columns: auto 1fr; gap:12px; }
  .res-right { grid-column: 1 / -1; flex-direction:row; justify-content:space-between; align-items:center; }
  .res-row { grid-template-columns: 58px 1fr; gap:8px; }
  .res-row-side, .res-row-actions { grid-column: 1 / -1; }
  .res-row-actions { align-items:stretch; }
  .res-status-row.compact { justify-content:flex-start; flex-wrap:wrap; }
  .table-summary { width:100%; }
  .edit-shell { padding: 14px; border-radius: 24px; }
  .edit-grid-2 { grid-template-columns: 1fr; }
  .client-demo-access { top: 12px; right: 12px; }
  .edit-modal-head,
  .edit-modal-body { padding: 18px; }
  .staff-head-actions { width:100%; justify-content:space-between; }
  .staff-theme-switch { width:100%; }
  .staff-theme-btn { flex:1; min-width:0; }
  .qb-row.two,
  .qb-row.three,
  .qb-snapshot-row,
  .qb-meta-grid,
  .qb-formule-grid,
  .qb-lane-focus {
    grid-template-columns: 1fr;
  }
  .qb-dur-grid {
    grid-template-columns: repeat(2,1fr);
  }
  .qb-lane-grid {
    grid-template-columns: repeat(4,1fr);
  }
}
@media(max-width:768px) {
  header { padding: 14px 20px; }
  nav .nav-link { display:none; }
  .staff-wrap { padding: 14px 10px 18px; }
  .client-wrap { padding: 24px 14px 36px; }
  .step { padding: 14px; border-radius: 20px; }
  .progress { gap: 10px; }
  .progress-step { min-width: 92px; }
  .progress-step:not(:last-child)::after { width: 44px; }
  .card { padding: 16px; }
  .step#step1 { grid-template-columns: 1fr; }
  .table-box { padding: 12px; }
  .search-wrap { width:100%; }
}

/* Client polish pass: keep the Fun Galaxy identity, make it calmer and clearer. */
body.client-mode {
  --client-bg: #050609;
  --client-surface: #171c25;
  --client-surface-2: #202734;
  --client-surface-3: #273140;
  --client-border: rgba(183, 199, 225, 0.17);
  --client-border-strong: rgba(118, 204, 201, 0.42);
  --client-text: #f8f8fb;
  --client-muted: rgba(232, 235, 244, 0.72);
  --client-soft: rgba(232, 235, 244, 0.52);
  --client-teal: #6fd0c7;
  --client-purple: #9f489d;
  --client-purple-deep: #7e337d;
}

.client-mode #clientView {
  background:
    radial-gradient(circle at 20% 0%, rgba(111, 208, 199, 0.11), transparent 30rem),
    radial-gradient(circle at 84% 12%, rgba(159, 72, 157, 0.13), transparent 28rem),
    linear-gradient(180deg, #07080c 0%, var(--client-bg) 46%, #030405 100%);
  color: var(--client-text);
}

.client-mode .client-wrap {
  max-width: 980px;
  padding: 20px 18px 34px;
}

.client-mode .step {
  background:
    linear-gradient(180deg, rgba(20, 24, 32, 0.96), rgba(9, 11, 16, 0.98)),
    var(--client-bg);
  border: 1px solid rgba(183, 199, 225, 0.14);
  border-radius: 24px;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.client-mode .card {
  background:
    linear-gradient(180deg, rgba(38, 46, 59, 0.92), rgba(27, 32, 43, 0.96));
  border: 1px solid var(--client-border);
  border-radius: 18px;
  padding: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.client-mode .card-title {
  color: var(--client-text);
  font-size: clamp(1.04rem, 1.8vw, 1.28rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.client-mode .card-desc {
  color: var(--client-muted);
  font-size: 0.77rem;
  line-height: 1.28;
}

.client-mode .section-icon {
  background: rgba(111, 208, 199, 0.14);
  color: #e9fffc;
  border-color: rgba(111, 208, 199, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.client-mode label {
  color: rgba(239, 242, 249, 0.68);
  letter-spacing: 0.08em;
}

.client-mode .input,
.client-mode select.input,
.client-mode textarea.input {
  background: #ffffff;
  border: 2px solid #050609;
  color: #0b0d12;
  border-radius: 999px;
  min-height: 48px;
  font-weight: 700;
  box-shadow: -3px 2px 0 rgba(111, 208, 199, 0.68);
}

.client-mode .input:hover,
.client-mode select.input:hover,
.client-mode textarea.input:hover {
  border-color: #050609;
  transform: scale(1.01);
}

.client-mode .input:focus,
.client-mode select.input:focus,
.client-mode textarea.input:focus {
  border-color: #944292;
  box-shadow:
    -3px 2px 0 rgba(111, 208, 199, 0.82),
    0 0 0 3px rgba(148, 66, 146, 0.14);
}

.client-mode input[type="date"].input::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}

.client-mode #step1 .schedule-hint {
  margin-top: 10px;
}

.client-mode #step1 .date-input-wrap {
  position: relative;
}

.client-mode #step1 #fDate.input {
  background: #ffffff;
  border: 2px solid #050609;
  color: #0b0d12;
  padding-right: 68px;
  font-weight: 800;
  letter-spacing: 0.03em;
  box-shadow: -3px 2px 0 rgba(111, 208, 199, 0.82);
}

.client-mode #step1 .date-picker-trigger {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 50px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(111, 208, 199, 0.36);
  background:
    linear-gradient(180deg, rgba(46, 62, 68, 0.94), rgba(30, 43, 49, 0.96));
  color: #d8fffa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.client-mode #step1 .date-picker-trigger:hover {
  transform: translateY(-50%) scale(1.03);
  border-color: rgba(111, 208, 199, 0.56);
  background:
    linear-gradient(180deg, rgba(53, 72, 79, 0.96), rgba(34, 49, 55, 0.98));
}

.client-mode #step1 .date-picker-trigger:active {
  transform: translateY(-50%) scale(0.98);
}

.client-mode #step1 #fPax.input {
  background:
    linear-gradient(180deg, rgba(47, 55, 70, 0.98), rgba(32, 38, 49, 0.98));
  border: 1px solid rgba(183, 199, 225, 0.22);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.client-mode #step1 #fPax.input:hover {
  border-color: rgba(111, 208, 199, 0.4);
  transform: none;
}

.client-mode #step1 #fPax.input:focus {
  border-color: rgba(111, 208, 199, 0.74);
  box-shadow:
    0 0 0 3px rgba(111, 208, 199, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.client-mode #step1 .schedule-hint .open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.42rem 0.78rem;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(51, 70, 77, 0.82), rgba(33, 46, 52, 0.9));
  border: 1px solid rgba(111, 208, 199, 0.34);
  color: #bdf6ef;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.client-mode .allocation-box,
.client-mode .info-block,
.client-mode .time-info,
.client-mode .summary-panel,
.client-mode .booking-summary {
  background: rgba(31, 38, 50, 0.78);
  border: 1px solid rgba(183, 199, 225, 0.18);
  border-radius: 16px;
  color: var(--client-muted);
}

.client-mode .allocation-box strong,
.client-mode .time-info strong,
.client-mode .summary-panel strong,
.client-mode .booking-summary strong {
  color: var(--client-text);
}

.client-mode .open-hours,
.client-mode .price,
.client-mode .slot-price,
.client-mode .total-price {
  color: var(--client-teal);
}

.client-mode #step1 .pax-alert {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 66, 146, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 247, 252, 0.98), rgba(243, 233, 247, 0.98));
  color: #7b3b78;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.22;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 10px 22px rgba(73, 32, 72, 0.12);
}

.client-mode #step1 .pax-alert.warning {
  border-color: rgba(148, 66, 146, 0.34);
  color: #944292;
}

.client-mode .segmented,
.client-mode .seg-row {
  gap: 10px;
}

.client-mode .seg-btn,
.client-mode .btn-primary {
  min-height: 52px;
  border-radius: 999px;
  background: #fbfbfc;
  border: 2px solid #050609;
  color: #0b0d12;
  box-shadow:
    -4px 3px 0 rgba(111, 208, 199, 0.95),
    0 12px 28px rgba(0, 0, 0, 0.28);
  letter-spacing: 0.01em;
}

.client-mode .seg-btn:hover,
.client-mode .btn-primary:hover {
  transform: translateY(-1px);
  background: #ffffff;
  color: #0b0d12;
  box-shadow:
    -3px 3px 0 rgba(111, 208, 199, 0.95),
    0 16px 34px rgba(0, 0, 0, 0.34);
}

.client-mode .seg-btn.active,
.client-mode .btn-primary.active {
  background: linear-gradient(180deg, #a84ba6, var(--client-purple-deep));
  color: #ffffff;
  border-color: #050609;
  box-shadow:
    -3px 3px 0 rgba(111, 208, 199, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 15px 28px rgba(126, 51, 125, 0.26);
}

.client-mode .btn-secondary {
  border-radius: 999px;
  background: linear-gradient(180deg, #a84ba6, var(--client-purple-deep));
  border: 2px solid #050609;
  color: #ffffff;
  box-shadow:
    -3px 3px 0 rgba(111, 208, 199, 0.95),
    0 12px 28px rgba(0, 0, 0, 0.28);
}

.client-mode .btn-secondary:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #b455b2, #873887);
}

.client-mode .dur-grid {
  gap: 10px;
}

.client-mode .dur-pill,
.client-mode .formule-card,
.client-mode .slot,
.client-mode .summary-row,
.client-mode .total-box,
.client-mode .success-box {
  background: linear-gradient(180deg, rgba(38, 46, 59, 0.96), rgba(30, 36, 48, 0.98));
  border: 1px solid rgba(183, 199, 225, 0.17);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.client-mode .dur-pill,
.client-mode .slot {
  border-radius: 16px;
}

.client-mode .dur-pill {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 2px solid #050609;
  color: #0b0d12;
  border-radius: 18px;
  box-shadow: -3px 2px 0 rgba(111, 208, 199, 0.95);
}

.client-mode .dur-pill:hover,
.client-mode .formule-card:hover,
.client-mode .slot:hover {
  border-color: #050609;
  transform: scale(1.02);
}

.client-mode .dur-pill.active {
  background: #944292;
  border-color: #050609;
  color: #ffffff;
  box-shadow:
    -3px 2px 0 rgba(111, 208, 199, 0.95),
    0 10px 24px rgba(0, 0, 0, 0.22);
}

.client-mode .slot.selected {
  background: #fbfbfc;
  border-color: rgba(111, 208, 199, 0.86);
  color: #111522;
  box-shadow:
    0 0 0 3px rgba(111, 208, 199, 0.13),
    -2px 2px 0 rgba(111, 208, 199, 0.72);
}

.client-mode .dur-pill.active .dur-label {
  color: #ffffff;
}

.client-mode .dur-pill .price {
  color: rgba(17, 21, 34, 0.72);
  opacity: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.client-mode .dur-pill.active .price {
  color: rgba(255, 255, 255, 0.78);
}

.client-mode #step1 > .card:first-of-type {
  background:
    radial-gradient(circle at 100% 0%, rgba(111, 208, 199, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(37, 44, 57, 0.96), rgba(27, 33, 44, 0.98));
  overflow: visible;
}

.client-mode #step1 > .card:nth-of-type(2) {
  background:
    radial-gradient(circle at 88% 0%, rgba(148, 66, 146, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(34, 39, 52, 0.96), rgba(22, 27, 37, 0.98));
}

.client-mode #bowlingBlock {
  background:
    radial-gradient(circle at 12% 0%, rgba(111, 208, 199, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(18, 22, 30, 0.98), rgba(11, 14, 20, 0.99));
  border-color: rgba(111, 208, 199, 0.18);
}

.client-mode #step1 {
  overflow: visible;
}

.client-mode #step1 .grid-2 {
  overflow: visible;
}

.client-mode #step1 .grid-2 > div {
  position: relative;
}

.client-mode #step1 .grid-2 > div:first-child {
  z-index: 4;
}

.client-mode #step1 .grid-2 > div:last-child {
  z-index: 1;
}

.client-mode #step1 .card-head {
  margin-bottom: 15px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.client-mode #step1 > .card:first-of-type .card-head {
  border-bottom-color: rgba(111, 208, 199, 0.18);
}

.client-mode #step1 > .card:nth-of-type(2) .card-head {
  border-bottom-color: rgba(148, 66, 146, 0.16);
}

.client-mode #bowlingBlock .card-head {
  border-bottom-color: rgba(111, 208, 199, 0.14);
}

.client-mode #step1 .card-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: #ffffff;
  color: #050609;
  border: 2px solid #050609;
  box-shadow: -3px 2px 0 rgba(111, 208, 199, 0.72);
}

.client-mode #step1 > .card:nth-of-type(2) .card-icon,
.client-mode #bowlingBlock .card-icon {
  background: #944292;
  color: #ffffff;
}

.client-mode #step1 .card-title {
  letter-spacing: -0.01em;
}

.client-mode #step1 .card-desc {
  color: rgba(236, 240, 247, 0.76);
}

.client-mode #step1 > .card:nth-of-type(2) .segmented {
  width: 100%;
  display: inline-flex;
  gap: 0;
  padding: 0;
  background: #ffffff;
  border: 2px solid #050609;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: -4px 3px 0 rgba(111, 208, 199, 0.82);
}

.client-mode #step1 > .card:nth-of-type(2) .seg-btn {
  min-height: 46px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #ffffff;
  color: #0b0d12;
}

.client-mode #step1 > .card:nth-of-type(2) .seg-btn:not(:last-child) {
  border-right: 2px solid #050609;
}

.client-mode #step1 > .card:nth-of-type(2) .seg-btn:hover {
  background: #f4f5f8;
  transform: none;
  box-shadow: none;
}

.client-mode #step1 > .card:nth-of-type(2) .seg-btn.active,
.client-mode #step1 > .card:nth-of-type(2) .seg-btn.active:hover {
  background: #944292;
  color: #ffffff;
}

.client-mode #bowlingBlock .dur-grid {
  gap: 11px;
}

.client-mode #bowlingBlock .dur-pill {
  background:
    linear-gradient(180deg, rgba(42, 50, 65, 0.98), rgba(28, 34, 46, 0.98));
  border: 1px solid rgba(183, 199, 225, 0.18);
  color: #f7f8fb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.client-mode #bowlingBlock .dur-pill:hover {
  border-color: rgba(111, 208, 199, 0.46);
  background:
    linear-gradient(180deg, rgba(48, 57, 73, 0.98), rgba(31, 38, 50, 0.98));
  transform: translateY(-1px);
}

.client-mode #bowlingBlock .dur-pill.active {
  background: #ffffff;
  border: 2px solid #050609;
  color: #0b0d12;
  box-shadow:
    -4px 3px 0 rgba(111, 208, 199, 0.95),
    0 12px 24px rgba(0, 0, 0, 0.18);
}

.client-mode #bowlingBlock .dur-pill .dur-label {
  color: inherit;
}

.client-mode #bowlingBlock .dur-pill .price {
  color: #7ce0d2;
}

.client-mode #bowlingBlock .dur-pill.active .price {
  color: rgba(17, 21, 34, 0.58);
}

.client-mode .slot.selected .slot-price {
  color: #69707c;
}

.client-mode .formule-grid {
  gap: 9px;
}

.client-mode .formule-card {
  border-radius: 15px;
}

.client-mode .formule-card.active {
  background:
    linear-gradient(180deg, rgba(159, 72, 157, 0.2), rgba(32, 39, 52, 0.98));
  border-color: rgba(111, 208, 199, 0.62);
  box-shadow:
    0 0 0 3px rgba(111, 208, 199, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.client-mode .formule-title,
.client-mode .dur-label,
.client-mode .slot-time,
.client-mode .summary-title {
  color: var(--client-text);
}

.client-mode .formule-desc,
.client-mode .slot-sub,
.client-mode .summary-label,
.client-mode .helper-text {
  color: var(--client-muted);
}

.client-mode .badge,
.client-mode .pill,
.client-mode .formule-badge {
  background: rgba(111, 208, 199, 0.13);
  border: 1px solid rgba(111, 208, 199, 0.24);
  color: #ddfffb;
}

.client-mode .alert,
.client-mode .notice {
  background: rgba(111, 208, 199, 0.1);
  border-color: rgba(111, 208, 199, 0.28);
  color: rgba(245, 250, 252, 0.88);
}

.client-mode .loading,
.client-mode .empty-state {
  color: var(--client-muted);
}

.client-mode .loading i,
.client-mode .empty-state i {
  color: rgba(245, 250, 252, 0.62);
}

@media(max-width:768px) {
  .client-mode .client-wrap {
    padding: 20px 12px 32px;
  }
  .client-mode .step {
    border-radius: 22px;
    padding: 14px;
  }
  .client-mode .card {
    padding: 14px;
    border-radius: 17px;
  }
  .client-mode .seg-btn,
  .client-mode .btn-primary,
  .client-mode .btn-secondary {
    min-height: 50px;
  }
  .client-mode .formule-grid {
    gap: 8px;
  }
}

/* Staff redesign: quieter, more premium, less decorative. */
body.staff-mode {
  --bg: #0f1110;
  --bg-2: #141716;
  --bg-3: #1b1e1c;
  --card: #171a19;
  --card-2: #1d211f;
  --border: rgba(213, 198, 172, 0.1);
  --border-hover: rgba(213, 198, 172, 0.2);
  --purple: #b7a07c;
  --purple-soft: #c8b390;
  --purple-dark: #90795a;
  --teal: #93a397;
  --teal-dark: #7e8d82;
  --success: #92a492;
  --amber: #c29a66;
  --red: #b07a72;
  --text: #f5efe5;
  --text-2: rgba(245, 239, 229, 0.72);
  --text-3: rgba(245, 239, 229, 0.44);
  --shadow-soft: 0 24px 56px rgba(0, 0, 0, 0.26);
  --shadow-card: 0 12px 28px rgba(0, 0, 0, 0.18);
  background: #0f1110 !important;
  color: var(--text);
}

body.staff-mode.staff-light {
  --bg: #f4efe6;
  --bg-2: #efe9df;
  --bg-3: #e6dfd3;
  --card: #ffffff;
  --card-2: #fbf8f2;
  --border: rgba(100, 81, 54, 0.12);
  --border-hover: rgba(100, 81, 54, 0.22);
  --purple: #8f7651;
  --purple-soft: #a28964;
  --purple-dark: #6e5a3c;
  --teal: #738578;
  --teal-dark: #627267;
  --success: #6a8471;
  --amber: #9f7a45;
  --red: #986760;
  --text: #1f1b16;
  --text-2: rgba(31, 27, 22, 0.74);
  --text-3: rgba(31, 27, 22, 0.5);
  --shadow-soft: 0 24px 48px rgba(48, 37, 20, 0.08);
  --shadow-card: 0 10px 22px rgba(48, 37, 20, 0.06);
  background: #f4efe6 !important;
}

body.staff-mode,
body.staff-mode main {
  background: var(--bg) !important;
}

body.staff-mode header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  backdrop-filter: none;
}

body.staff-mode .site-auth-action,
body.staff-mode .client-demo-access {
  background: var(--card);
  border-color: var(--border);
  color: var(--text-2);
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
}

body.staff-mode .staff-wrap {
  max-width: 1700px;
  padding: 24px 24px 30px;
}

body.staff-mode .staff-head {
  gap: 18px;
  margin-bottom: 22px;
}

body.staff-mode .staff-head h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

body.staff-mode .staff-head .sub {
  margin-top: 6px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

body.staff-mode .date-nav,
body.staff-mode .staff-theme-switch,
body.staff-mode .status-chip,
body.staff-mode .res-status-btn,
body.staff-mode .res-icon-btn,
body.staff-mode .icon-btn,
body.staff-mode .res-lane-chip,
body.staff-mode .lane-chip,
body.staff-mode .close-btn,
body.staff-mode .tabs,
body.staff-mode .modal-tabs,
body.staff-mode .qb-type-btn,
body.staff-mode .qb-dur-btn,
body.staff-mode .qb-lane-btn,
body.staff-mode .qb-btn-cancel,
body.staff-mode .upsell-btn,
body.staff-mode .search-wrap input,
body.staff-mode .auth-input,
body.staff-mode .edit-form .input,
body.staff-mode .edit-form select.input,
body.staff-mode .qb-input {
  background: var(--card-2);
  border-color: var(--border);
  color: var(--text-2);
  box-shadow: none;
}

body.staff-mode .date-nav,
body.staff-mode .staff-theme-switch,
body.staff-mode .tabs,
body.staff-mode .modal-tabs {
  border-radius: 14px;
}

body.staff-mode .date-nav button,
body.staff-mode .staff-theme-btn,
body.staff-mode .planning-toggle,
body.staff-mode .status-chip,
body.staff-mode .res-status-btn,
body.staff-mode .res-icon-btn,
body.staff-mode .icon-btn,
body.staff-mode .close-btn,
body.staff-mode .qb-type-btn,
body.staff-mode .qb-dur-btn,
body.staff-mode .qb-lane-btn,
body.staff-mode .qb-btn-cancel,
body.staff-mode .upsell-btn {
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}

body.staff-mode .date-nav button:hover,
body.staff-mode .planning-toggle:hover,
body.staff-mode .status-chip:hover,
body.staff-mode .res-status-btn:hover,
body.staff-mode .res-icon-btn:hover,
body.staff-mode .icon-btn:hover,
body.staff-mode .close-btn:hover,
body.staff-mode .qb-type-btn:hover,
body.staff-mode .qb-dur-btn:hover,
body.staff-mode .qb-lane-btn:hover:not(.busy):not(.maint),
body.staff-mode .qb-btn-cancel:hover,
body.staff-mode .upsell-btn:hover {
  background: var(--card);
  border-color: var(--border-hover);
  color: var(--text);
  transform: translateY(-1px);
}

body.staff-mode .staff-theme-switch {
  padding: 3px;
}

body.staff-mode .staff-theme-btn {
  min-width: 88px;
  border-radius: 10px;
  color: var(--text-3);
}

body.staff-mode .staff-theme-btn.active {
  background: var(--text);
  color: var(--bg);
  box-shadow: none;
}

body.staff-mode.staff-light .staff-theme-btn.active {
  background: #1f1b16;
  color: #f8f4ec;
}

body.staff-mode .btn-new,
body.staff-mode .flow-btn.teal,
body.staff-mode .qb-btn-save {
  background: var(--purple);
  color: #18140e;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: none;
}

body.staff-mode .btn-new:hover,
body.staff-mode .flow-btn.teal:hover,
body.staff-mode .qb-btn-save:hover {
  background: var(--purple-soft);
  transform: translateY(-1px);
}

body.staff-mode .pay-btn,
body.staff-mode .flow-btn.white {
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}

body.staff-mode .pay-btn:hover,
body.staff-mode .flow-btn.white:hover {
  border-color: var(--border-hover);
  transform: translateY(-1px);
  box-shadow: none;
}

body.staff-mode .kpi-grid {
  gap: 14px;
  margin-bottom: 22px;
}

body.staff-mode .kpi {
  padding: 18px 18px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: none;
}

body.staff-mode .kpi:hover {
  transform: translateY(-1px);
  border-color: var(--border-hover);
}

body.staff-mode .kpi.accent {
  background: var(--card);
  border-color: rgba(183, 160, 124, 0.28);
}

body.staff-mode .kpi .label {
  color: var(--text-3);
  font-size: 10px;
  letter-spacing: 0.14em;
}

body.staff-mode .kpi .value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

body.staff-mode .kpi .hint {
  color: var(--text-3);
  font-size: 11px;
}

body.staff-mode .kpi .tag-ok,
body.staff-mode .count-badge {
  background: transparent;
  color: var(--purple);
  border: 1px solid rgba(183, 160, 124, 0.24);
}

body.staff-mode .planning-box,
body.staff-mode .table-box,
body.staff-mode .res-section,
body.staff-mode .res-section.workflow,
body.staff-mode .pos-head,
body.staff-mode .pos-panel,
body.staff-mode .qb-modal,
body.staff-mode .edit-modal,
body.staff-mode .receipt,
body.staff-mode .qb-block,
body.staff-mode .edit-form .info-block.soft,
body.staff-mode .edit-summary-card,
body.staff-mode .edit-summary-stat {
  background: var(--card);
  border-color: var(--border);
  box-shadow: none;
}

body.staff-mode .planning-box,
body.staff-mode .table-box {
  border-radius: 22px;
}

body.staff-mode .planning-box.expanded {
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32);
}

body.staff-mode .planning-head,
body.staff-mode .pos-head,
body.staff-mode .edit-modal-head,
body.staff-mode .qb-head {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

body.staff-mode .planning-head h2,
body.staff-mode .table-head h2,
body.staff-mode .pos-head h3,
body.staff-mode .qb-head h3,
body.staff-mode .edit-modal-head h3,
body.staff-mode .edit-summary-card h4 {
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.02em;
}

body.staff-mode .planning-sub,
body.staff-mode .table-summary,
body.staff-mode .hour-header,
body.staff-mode .hour-cell,
body.staff-mode .lane-header .pl,
body.staff-mode .res-row-meta,
body.staff-mode .res-row-time span,
body.staff-mode .res-lanes-empty,
body.staff-mode .empty-state,
body.staff-mode .empty-state .e-sub,
body.staff-mode .qb-head .sub,
body.staff-mode .edit-summary-card p,
body.staff-mode .info-row .lbl,
body.staff-mode .info-row .val small {
  color: var(--text-3);
}

body.staff-mode .planning-grid-wrap,
body.staff-mode .lane-col,
body.staff-mode .slot-cell.end,
body.staff-mode .hour-col,
body.staff-mode .lane-header,
body.staff-mode .hour-header {
  background: var(--bg-2);
}

body.staff-mode .lane-header,
body.staff-mode .hour-header {
  border-bottom-color: var(--border);
}

body.staff-mode .hour-col,
body.staff-mode .lane-col,
body.staff-mode .slot-cell,
body.staff-mode .hour-cell {
  border-color: var(--border);
}

body.staff-mode .lane-col.maint,
body.staff-mode.staff-light .lane-col.maint {
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 8px, transparent 8px 16px);
  opacity: 1;
}

body.staff-mode .hour-cell.major,
body.staff-mode .hour-cell.end,
body.staff-mode .lane-header .num,
body.staff-mode .res-row-time strong,
body.staff-mode .res-row-label,
body.staff-mode .receipt-head .title,
body.staff-mode .receipt-total .lbl,
body.staff-mode .receipt-total .amount,
body.staff-mode .qb-summary .amt,
body.staff-mode .empty-state .e-title {
  color: var(--text);
}

body.staff-mode .legend {
  color: var(--text-3);
  gap: 16px;
}

body.staff-mode .legend .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
}

body.staff-mode .legend .dot.conf { background: var(--teal); }
body.staff-mode .legend .dot.arr { background: var(--amber); }
body.staff-mode .legend .dot.paid { background: var(--purple); }

body.staff-mode .planning-toggle {
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: 12px;
}

body.staff-mode .booking {
  color: var(--text);
  box-shadow: none;
}

body.staff-mode .booking:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.2);
}

body.staff-mode .booking.conf {
  background: rgba(147, 163, 151, 0.13);
  border: 1px solid rgba(147, 163, 151, 0.28);
}

body.staff-mode .booking.arr {
  background: rgba(194, 154, 102, 0.14);
  border: 1px solid rgba(194, 154, 102, 0.28);
}

body.staff-mode .booking.paid {
  background: rgba(183, 160, 124, 0.14);
  border-left: 2px solid var(--purple);
}

body.staff-mode .booking .b-tag {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.06);
}

body.staff-mode .booking-range,
body.staff-mode .booking-extra,
body.staff-mode .planning-box.expanded .booking::after {
  color: var(--text-2);
}

body.staff-mode .current-line {
  background: rgba(183, 160, 124, 0.92);
  box-shadow: none;
}

body.staff-mode .current-line:before {
  background: var(--purple);
}

body.staff-mode .current-line:after {
  background: var(--card);
  border: 1px solid rgba(183, 160, 124, 0.24);
  color: var(--text);
}

body.staff-mode .status-chip,
body.staff-mode .res-status-btn,
body.staff-mode .res-state-pill,
body.staff-mode .type-badge,
body.staff-mode .res-quick {
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.staff-mode .status-chip.active,
body.staff-mode .status-chip.active.open {
  background: var(--card);
  color: var(--text);
  border-color: var(--border-hover);
}

body.staff-mode .status-chip span {
  background: rgba(255,255,255,0.05);
}

body.staff-mode .status-chip.active.pending,
body.staff-mode .res-status-btn.active.pending,
body.staff-mode .res-state-pill.pending {
  background: rgba(147, 163, 151, 0.12);
  color: var(--teal);
  border-color: rgba(147, 163, 151, 0.24);
}

body.staff-mode .status-chip.active.arrived,
body.staff-mode .res-status-btn.active.arrived,
body.staff-mode .res-state-pill.arrived {
  background: rgba(194, 154, 102, 0.12);
  color: var(--amber);
  border-color: rgba(194, 154, 102, 0.24);
}

body.staff-mode .status-chip.active.paid,
body.staff-mode .res-status-btn.active.paid,
body.staff-mode .res-state-pill.paid {
  background: rgba(146, 164, 146, 0.12);
  color: var(--success);
  border-color: rgba(146, 164, 146, 0.24);
}

body.staff-mode .type-badge.bowling {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
}

body.staff-mode .type-badge.formule {
  background: rgba(183, 160, 124, 0.12);
  color: var(--purple);
  border: 1px solid rgba(183, 160, 124, 0.24);
}

body.staff-mode .type-badge.laser {
  background: rgba(94, 200, 200, 0.12);
  color: var(--teal);
  border: 1px solid rgba(94, 200, 200, 0.24);
}

body.staff-mode .res-section {
  background: transparent;
  border: 1px solid var(--border);
  padding: 11px;
}

body.staff-mode .res-section.workflow {
  background: transparent;
}

body.staff-mode .res-section-head {
  padding: 4px 4px 10px;
}

body.staff-mode .res-section-head .label,
body.staff-mode .res-section-head .count {
  color: var(--text-2);
}

body.staff-mode .res-row,
body.staff-mode.staff-light .res-row {
  background: var(--card-2);
  border: 1px solid var(--border);
  box-shadow: none;
  opacity: 1;
}

body.staff-mode .res-row:hover,
body.staff-mode.staff-light .res-row:hover {
  background: var(--card);
  border-color: var(--border-hover);
}

body.staff-mode .res-row.pending { border-left: 3px solid var(--teal); }
body.staff-mode .res-row.arrived { border-left: 3px solid var(--amber); }
body.staff-mode .res-row.paid { border-left: 3px solid var(--purple); }

body.staff-mode .res-row-name,
body.staff-mode.staff-light .res-row-name {
  color: var(--text);
  font-size: 13px;
}

body.staff-mode .res-row-time,
body.staff-mode .res-time {
  background: var(--card);
  border: 1px solid var(--border);
}

body.staff-mode .res-icon-btn,
body.staff-mode .icon-btn,
body.staff-mode .close-btn {
  color: var(--text-3);
}

body.staff-mode .res-icon-btn.warn:hover,
body.staff-mode .icon-btn.warn:hover {
  color: var(--amber);
  border-color: rgba(194, 154, 102, 0.3);
  background: rgba(194, 154, 102, 0.08);
}

body.staff-mode .res-icon-btn.danger:hover,
body.staff-mode .icon-btn.danger:hover {
  color: var(--red);
  border-color: rgba(176, 122, 114, 0.3);
  background: rgba(176, 122, 114, 0.08);
}

body.staff-mode .search-wrap svg,
body.staff-mode .table-head,
body.staff-mode .lane-header .settings,
body.staff-mode .empty-state svg {
  color: var(--text-3);
}

body.staff-mode .search-wrap input {
  border-radius: 12px;
  color: var(--text);
}

body.staff-mode .search-wrap input:focus,
body.staff-mode .edit-form .input:focus,
body.staff-mode .edit-form select.input:focus,
body.staff-mode .qb-input:focus,
body.staff-mode .auth-input:focus {
  outline: none;
  border-color: rgba(183, 160, 124, 0.34);
  box-shadow: 0 0 0 3px rgba(183, 160, 124, 0.12);
}

body.staff-mode .tabs,
body.staff-mode .modal-tabs {
  padding: 3px;
}

body.staff-mode .tab.active,
body.staff-mode .modal-tabs .tab.active,
body.staff-mode .tab.active.purple {
  background: var(--purple);
  color: #18140e;
  box-shadow: none;
}

body.staff-mode .pos-panel {
  width: 500px;
}

body.staff-mode .pos-overlay,
body.staff-mode .qb-overlay {
  background: rgba(10, 10, 10, 0.58);
  backdrop-filter: blur(8px);
}

body.staff-mode.staff-light .pos-overlay,
body.staff-mode.staff-light .qb-overlay {
  background: rgba(65, 55, 37, 0.14);
}

body.staff-mode .receipt-head,
body.staff-mode .receipt-total,
body.staff-mode .qb-summary {
  border-color: var(--border);
}

body.staff-mode .qb-summary {
  background: var(--card-2);
}

body.staff-mode .upsell-btn .n,
body.staff-mode .qb-summary .desc {
  color: var(--text-2);
}

body.staff-mode .upsell-btn .p,
body.staff-mode .qb-summary .amt {
  color: var(--text);
}

@media(max-width:768px) {
  body.staff-mode .staff-wrap {
    padding: 16px 12px 20px;
  }
  body.staff-mode .staff-head {
    margin-bottom: 16px;
  }
  body.staff-mode .staff-head h1 {
    font-size: 24px;
  }
  body.staff-mode .kpi-grid {
    gap: 10px;
  }
  body.staff-mode .planning-box,
  body.staff-mode .table-box {
    border-radius: 18px;
  }
}

/* Production KISS polish: quieter staff surface, fewer effects, stronger hierarchy. */
body.staff-mode {
  --bg: #0d0e0c;
  --bg-2: #121410;
  --bg-3: #181a15;
  --card: #171915;
  --card-2: #1d1f1a;
  --border: rgba(236, 229, 215, 0.11);
  --border-hover: rgba(236, 229, 215, 0.2);
  --purple: #c2aa78;
  --purple-soft: #d1b982;
  --purple-dark: #9c8659;
  --teal: #8fb8ad;
  --teal-dark: #75a69a;
  --text: #f5f1e9;
  --text-2: rgba(245,241,233,0.76);
  --text-3: rgba(245,241,233,0.52);
  background: #0d0e0c;
}
body.staff-mode.staff-light {
  --bg: #f7f5f0;
  --bg-2: #efede7;
  --bg-3: #e7e3da;
  --card: #fffdf8;
  --card-2: #f8f6f1;
  --border: rgba(38, 35, 28, 0.12);
  --border-hover: rgba(38, 35, 28, 0.22);
  --purple: #8f784b;
  --purple-soft: #75623f;
  --purple-dark: #5c4c30;
  --teal: #477e77;
  --teal-dark: #3f6d68;
  --text: #171714;
  --text-2: rgba(23,23,20,0.74);
  --text-3: rgba(23,23,20,0.5);
  background: #f7f5f0;
}
body.staff-mode html,
body.staff-mode,
body.staff-mode header,
body.staff-mode.staff-light header {
  background-image: none !important;
}
body.staff-mode .kpi.accent,
body.staff-mode .planning-head,
body.staff-mode .qb-head,
body.staff-mode .qb-summary,
body.staff-mode .booking.paid,
body.staff-mode.staff-light .qb-summary,
body.staff-mode.staff-light .pay-btn,
body.staff-mode.staff-light .flow-btn.white,
body.staff-mode.staff-light .flow-btn.teal,
body.staff-mode.staff-light .qb-btn-save {
  background-image: none !important;
}
body.staff-mode .staff-wrap { max-width: 1680px; }
body.staff-mode .planning-box,
body.staff-mode .table-box,
body.staff-mode .kpi,
body.staff-mode .ops-admin-box,
body.staff-mode .qb-modal,
body.staff-mode .edit-modal {
  box-shadow: none;
}
body.staff-mode .btn-new,
body.staff-mode .qb-btn-save {
  background: var(--purple);
  color: #151511;
  box-shadow: none;
}
body.staff-mode .btn-new:hover,
body.staff-mode .qb-btn-save:hover {
  background: var(--purple-soft);
  transform: translateY(-1px);
}
body.staff-mode .planning-head {
  background: var(--card);
}
body.staff-mode .planning-grid-wrap,
body.staff-mode .lane-col,
body.staff-mode.staff-light .planning-grid-wrap,
body.staff-mode.staff-light .lane-col,
body.staff-mode.staff-light .slot-cell.end {
  background: var(--bg-2);
  background-image: none;
}
body.staff-mode .booking.conf {
  background: rgba(143,184,173,0.11);
  border-color: rgba(143,184,173,0.28);
}
body.staff-mode .booking.arr {
  background: rgba(194,170,120,0.13);
  border-color: rgba(194,170,120,0.28);
}
body.staff-mode .booking.paid {
  background: rgba(194,170,120,0.1);
  border:1px solid rgba(194,170,120,0.24);
  border-left: 3px solid var(--purple);
}
body.staff-mode .status-chip.active.paid {
  color: var(--purple);
  background: rgba(194,170,120,0.1);
  border-color: rgba(194,170,120,0.24);
}
body.staff-mode .kpi:hover,
body.staff-mode .booking:hover {
  transform: none;
}
body.staff-mode .staff-theme-switch,
body.staff-mode .view-switch,
body.staff-mode .status-chip,
body.staff-mode .staff-theme-btn,
body.staff-mode .date-nav,
body.staff-mode .btn-new {
  border-radius: 10px;
}
body.client-mode {
  background: #090a0c;
}
.client-mode html,
.client-mode body {
  background-image: none !important;
}
.client-mode .btn-primary,
.client-mode .btn-secondary,
.client-mode .client-demo-access {
  box-shadow: none;
  border-radius: 12px;
}
.client-mode .btn-primary {
  background: #f5f1e9;
  color: #11110f;
  border-color: #11110f;
}
.client-mode .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #e7ddcc;
  color: #11110f;
}
.client-mode .btn-secondary {
  background: #a44c9f;
  color: #fff;
}
.client-mode .btn-secondary:hover {
  transform: translateY(-1px);
  background: #f5f1e9;
  color: #11110f;
}

/* Staff refit: monochrome base, clear business signals, no neon/gradient dashboard look. */
body.staff-mode {
  --bg: #080808;
  --bg-2: #101010;
  --bg-3: #171717;
  --card: #141414;
  --card-2: #1b1b1b;
  --border: rgba(255, 255, 255, 0.12);
  --border-hover: rgba(255, 255, 255, 0.22);
  --purple: #d8c08a;
  --purple-soft: #ead39d;
  --purple-dark: #a88e58;
  --teal: #f2f2f2;
  --teal-dark: #cfcfcf;
  --amber: #d4a24c;
  --success: #64a777;
  --red: #c85b52;
  --text: #f7f7f7;
  --text-2: rgba(247, 247, 247, 0.72);
  --text-3: rgba(247, 247, 247, 0.48);
  background: #080808;
}

body.staff-mode.staff-light {
  --bg: #f4f4f2;
  --bg-2: #ebebe8;
  --bg-3: #deded9;
  --card: #ffffff;
  --card-2: #f7f7f4;
  --border: rgba(10, 10, 10, 0.12);
  --border-hover: rgba(10, 10, 10, 0.22);
  --purple: #8b6f3e;
  --purple-soft: #725b32;
  --purple-dark: #524125;
  --teal: #171717;
  --teal-dark: #2a2a2a;
  --amber: #9c6b1f;
  --success: #2d7d4b;
  --red: #a43b33;
  --text: #111111;
  --text-2: rgba(17, 17, 17, 0.72);
  --text-3: rgba(17, 17, 17, 0.48);
  background: #f4f4f2;
}

body.staff-mode .staff-head h1,
body.staff-mode .planning-title-stack h2,
body.staff-mode .table-head h2 {
  letter-spacing: -0.025em;
}

body.staff-mode .staff-resource-tab,
body.staff-mode .kpi,
body.staff-mode .planning-box,
body.staff-mode .table-box,
body.staff-mode .ops-admin-box,
body.staff-mode .qb-modal,
body.staff-mode .edit-modal,
body.staff-mode .pos-panel {
  background: var(--card);
  border-color: var(--border);
  box-shadow: none;
}

body.staff-mode .staff-resource-tab.active {
  background: #1d1d1d;
  border-color: rgba(216, 192, 138, 0.46);
  color: var(--text);
}

body.staff-mode.staff-light .staff-resource-tab.active {
  background: #ffffff;
  border-color: rgba(17, 17, 17, 0.34);
}

body.staff-mode .staff-resource-tab .sub,
body.staff-mode .kpi .label,
body.staff-mode .table-summary,
body.staff-mode .planning-sub {
  color: var(--text-3);
}

body.staff-mode .kpi.accent {
  background: var(--card);
  border-color: rgba(216, 192, 138, 0.34);
}

body.staff-mode .kpi .tag-ok {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-2);
  border: 1px solid var(--border);
}

body.staff-mode .planning-head,
body.staff-mode .planning-grid-wrap,
body.staff-mode .laser-grid-wrap,
body.staff-mode .lane-col,
body.staff-mode .hour-col,
body.staff-mode .slot-cell {
  background-image: none !important;
}

body.staff-mode .planning-head {
  background: var(--card-2);
  border-bottom: 1px solid var(--border);
}

body.staff-mode .planning-grid-wrap,
body.staff-mode .laser-grid-wrap {
  background: #101010;
}

body.staff-mode.staff-light .planning-grid-wrap,
body.staff-mode.staff-light .laser-grid-wrap {
  background: #ededeb;
}

body.staff-mode .lane-header,
body.staff-mode .hour-header,
body.staff-mode .hour-cell,
body.staff-mode .slot-cell {
  border-color: var(--border);
}

body.staff-mode .booking {
  background: #202020;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text);
  box-shadow: none;
}

body.staff-mode .booking.conf { border-left: 3px solid #d9d9d9; }
body.staff-mode .booking.arr { border-left: 3px solid var(--amber); }
body.staff-mode .booking.paid { border-left: 3px solid var(--success); }
body.staff-mode .booking.is-formula {
  background: #211d14;
  border: 2px solid rgba(234, 211, 157, 0.76);
  box-shadow: inset 0 0 0 1px rgba(234, 211, 157, 0.18);
}
body.staff-mode .booking.is-formula.conf {
  background: #241f13;
  border: 2px solid rgba(234, 211, 157, 0.76);
  border-left: 7px solid #ead39d;
}
body.staff-mode .booking.is-formula.arr {
  background: #251f12;
  border: 2px solid rgba(234, 211, 157, 0.76);
  border-left: 7px solid var(--amber);
  box-shadow: inset 0 2px 0 rgba(212, 162, 76, 0.74);
}
body.staff-mode .booking.is-formula.paid {
  background: #1f1d13;
  border: 2px solid rgba(234, 211, 157, 0.76);
  border-left: 7px solid var(--success);
  box-shadow: inset 0 2px 0 rgba(100, 167, 119, 0.82);
}
body.staff-mode.staff-light .booking.is-formula.conf {
  background: #fff9ec;
  border-color: rgba(139, 111, 62, 0.52);
  border-left-color: #8b6f3e;
}
body.staff-mode.staff-light .booking.is-formula.arr {
  background: #fff4df;
  border-color: rgba(156, 107, 31, 0.52);
  border-left-color: var(--amber);
}
body.staff-mode.staff-light .booking.is-formula.paid {
  background: #edf8ef;
  border-color: rgba(45, 125, 75, 0.48);
  border-left-color: var(--success);
}
body.staff-mode .booking.is-special-duration {
  background: #242424;
  border: 2px solid rgba(255, 255, 255, 0.58);
  outline: 2px solid rgba(255, 255, 255, 0.16);
}
body.staff-mode .booking.is-formula.is-special-duration {
  background: #281f12;
  border-color: rgba(234, 211, 157, 0.82);
  outline-color: rgba(234, 211, 157, 0.16);
}
body.staff-mode .booking.is-laser-multi {
  background: #251716;
  border: 2px solid rgba(200, 91, 82, 0.72);
  border-top: 4px solid #c85b52;
}
body.staff-mode .booking.is-formula.is-laser-multi {
  background: #281b12;
  border-color: rgba(234, 211, 157, 0.74);
  box-shadow: inset 0 3px 0 rgba(200, 91, 82, 0.9), inset 0 0 0 1px rgba(234, 211, 157, 0.18);
}

body.staff-mode .booking .b-tag,
body.staff-mode .type-badge.bowling {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

body.staff-mode .type-badge.formule,
body.staff-mode .booking.is-formula .b-tag {
  background: #ead39d;
  color: #141414;
  border-color: #ead39d;
}

body.staff-mode .type-badge.laser,
body.staff-mode .laser-booking .b-tag {
  background: #f2f2f2;
  color: #111111;
  border-color: #f2f2f2;
}

.reservation-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.reservation-tag {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

body.staff-mode .reservation-tag.formula {
  background: #ead39d;
  color: #141414;
}

body.staff-mode .reservation-tag.duration {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.32);
}

body.staff-mode .reservation-tag.laser-plus {
  background: #2a1110;
  color: #ffb4ad;
  border: 1px solid rgba(200, 91, 82, 0.5);
}

body.staff-mode.staff-light .reservation-tag.formula {
  background: #111111;
  color: #ffffff;
}

body.staff-mode.staff-light .reservation-tag.duration {
  color: #111111;
  border-color: rgba(17, 17, 17, 0.34);
}

body.staff-mode.staff-light .reservation-tag.laser-plus {
  background: #ffe5e1;
  color: #7b241f;
  border-color: rgba(164, 59, 51, 0.34);
}

body.staff-mode .res-row.is-formula {
  background: #211d14;
  border: 2px solid rgba(234, 211, 157, 0.58);
  border-left: 7px solid #ead39d;
}

body.staff-mode .res-row.is-formula.arrived {
  background: #251f12;
  border-left-color: var(--amber);
  box-shadow: inset 0 2px 0 rgba(212, 162, 76, 0.62);
}

body.staff-mode .res-row.is-formula.paid {
  background: #1f1d13;
  border-left-color: var(--success);
  box-shadow: inset 0 2px 0 rgba(100, 167, 119, 0.74);
}

body.staff-mode .res-row.is-special-duration {
  background: #222222;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

body.staff-mode .res-row.is-formula.is-special-duration {
  background: #281f12;
  border-color: rgba(234, 211, 157, 0.72);
  box-shadow: inset 0 0 0 1px rgba(234, 211, 157, 0.12);
}

body.staff-mode .res-row.is-laser-multi {
  background: #241615;
  border-color: rgba(200, 91, 82, 0.5);
  box-shadow: inset 4px 0 0 rgba(200, 91, 82, 0.75);
}

body.staff-mode .res-row.is-formula.is-laser-multi {
  background: #241b13;
  box-shadow: inset 0 3px 0 rgba(200, 91, 82, 0.8);
}

body.staff-mode .res-row.is-special-duration .res-row-time,
body.staff-mode .res-row.is-laser-multi .res-row-time,
body.staff-mode .res-row.is-formula .res-row-time {
  border-color: currentColor;
}

body.staff-mode .res-row .reservation-tags {
  margin-top: 1px;
}

body.staff-mode .booking .reservation-tags {
  margin-top: 4px;
  gap: 3px;
}

body.staff-mode .booking .reservation-tag {
  min-height: 15px;
  padding: 2px 5px;
  font-size: 7px;
  border-radius: 4px;
}

body.staff-mode .planning-box:not(.expanded) .booking .reservation-tags,
body.staff-mode .planning-box.expanded .booking.booking-compact .reservation-tags,
body.staff-mode .planning-box:not(.expanded) .booking.booking-mini .reservation-tags {
  display: none;
}

body.staff-mode .btn-new,
body.staff-mode .qb-btn-save,
body.staff-mode .tab.active,
body.staff-mode .modal-tabs .tab.active,
body.staff-mode .tab.active.purple {
  background: #f2f2f2;
  color: #111111;
  border-color: #f2f2f2;
}

body.staff-mode.staff-light .btn-new,
body.staff-mode.staff-light .qb-btn-save,
body.staff-mode.staff-light .tab.active,
body.staff-mode.staff-light .modal-tabs .tab.active,
body.staff-mode.staff-light .tab.active.purple {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}

/* Direction cockpit: dense, executive, export-ready. */
body.admin-mode {
  background: #080808;
}

.admin-shell {
  max-width: 1680px;
  margin: 0 auto;
  padding: 22px 18px 34px;
}

.admin-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #111111;
}

.admin-brand {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.admin-brand-logo {
  width: 128px;
  height: 86px;
  object-fit: contain;
  flex: 0 0 auto;
  padding: 10px 12px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: #0b0b0b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.admin-eyebrow {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.admin-hero h1 {
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 950;
}

.admin-hero p {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 650;
  max-width: 720px;
}

.admin-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-date-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 38px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #171717;
}

.admin-date-nav button,
.admin-btn {
  min-height: 34px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: #1b1b1b;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 850;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}

.admin-date-nav button {
  width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-date-nav input {
  height: 34px;
  padding: 0 10px;
  border: 0;
  color: var(--text);
  background: transparent;
  font-weight: 850;
  color-scheme: dark;
}

.admin-btn {
  padding: 0 12px;
}

.admin-btn.primary {
  background: #f2f2f2;
  color: #111111;
  border-color: #f2f2f2;
}

.admin-date-nav button:hover,
.admin-btn:hover {
  transform: translateY(-1px);
  color: var(--text);
  border-color: var(--border-hover);
}

.admin-center-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.admin-center-card {
  min-height: 92px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #121212;
  color: var(--text-2);
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.admin-center-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-hover);
}

.admin-center-card.active {
  background: #1a1a1a;
  border-color: rgba(216, 192, 138, 0.44);
  color: var(--text);
}

.admin-center-card .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.admin-center-card .name {
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.admin-center-card .meta {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
}

.admin-status {
  min-height: 23px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-status.active { color: #c8f2d2; border-color: rgba(100, 167, 119, 0.4); background: rgba(100, 167, 119, 0.08); }
.admin-status.planned { color: #e6cf9b; border-color: rgba(216, 192, 138, 0.36); background: rgba(216, 192, 138, 0.08); }

.admin-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #111111;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}

.admin-period-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -2px 0 12px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #111111;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}

.admin-tabs button {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 8px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
}

.admin-period-tabs button {
  min-height: 32px;
  padding: 0 13px;
  border-radius: 8px;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-tabs button.active,
.admin-period-tabs button.active {
  background: #f2f2f2;
  color: #111111;
}

.admin-panel {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #111111;
  margin-bottom: 14px;
}

.admin-section-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-section-title h2 {
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.admin-section-title p {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 750;
}

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.admin-kpi,
.admin-small-card,
.admin-resource-card,
.admin-insight {
  padding: 13px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: #171717;
}

.admin-kpi .k,
.admin-small-card .k,
.admin-resource-card .k {
  color: var(--text-3);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-kpi .v {
  margin-top: 8px;
  font-size: 23px;
  font-weight: 950;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.admin-kpi .s,
.admin-resource-card .s,
.admin-small-card .s {
  margin-top: 5px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.admin-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
  gap: 14px;
}

.admin-resource-grid,
.admin-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-resource-card .v,
.admin-small-card .v {
  margin-top: 7px;
  font-size: 18px;
  font-weight: 950;
}

.admin-insight-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-insight {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
}

.admin-insight .dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: #d8c08a;
}

.admin-insight.high .dot { background: #c85b52; }
.admin-insight.good .dot { background: #64a777; }

.admin-insight strong {
  display: block;
  font-size: 12px;
  font-weight: 950;
  margin-bottom: 3px;
}

.admin-insight span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 13px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}

.admin-table th,
.admin-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  font-size: 12px;
}

.admin-table th {
  color: var(--text-3);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #171717;
}

.admin-table td {
  color: var(--text-2);
  font-weight: 700;
}

.admin-table tr:last-child td {
  border-bottom: 0;
}

.admin-table strong {
  color: var(--text);
}

.admin-pill {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-2);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.admin-pill.paid { color: #c8f2d2; border-color: rgba(100, 167, 119, 0.34); }
.admin-pill.arrived { color: #ffd08a; border-color: rgba(212, 162, 76, 0.34); }
.admin-pill.pending { color: #f2f2f2; border-color: rgba(242, 242, 242, 0.28); }
.admin-pill.formule { color: #ead39d; border-color: rgba(216, 192, 138, 0.34); }
.admin-pill.laser { color: #ffb4ad; border-color: rgba(200, 91, 82, 0.36); }

.admin-export-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-export-card {
  min-height: 148px;
  padding: 15px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #171717;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

.admin-export-card h3 {
  font-size: 14px;
  font-weight: 950;
}

.admin-export-card p {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  margin-top: 5px;
}

@media(max-width:1100px) {
  .admin-hero,
  .admin-dashboard-grid {
    grid-template-columns: 1fr;
    flex-direction: column;
  }
  .admin-brand-logo {
    width: 112px;
    height: 78px;
  }
  .admin-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-center-grid,
  .admin-export-grid { grid-template-columns: 1fr; }
}

@media(max-width:720px) {
  .admin-shell { padding: 14px 10px 24px; }
  .admin-brand { gap: 12px; }
  .admin-brand-logo {
    width: 92px;
    height: 66px;
    padding: 8px;
  }
  .admin-kpi-grid,
  .admin-resource-grid,
  .admin-breakdown-grid { grid-template-columns: 1fr; }
  .admin-tabs,
  .admin-period-tabs { width: 100%; }
  .admin-tabs button,
  .admin-period-tabs button { flex: 1; white-space: nowrap; }
}

/* ERP / SaaS refit: staff and direction surfaces only. Business logic stays untouched. */
body.staff-mode,
body.staff-mode.staff-light,
body.admin-mode {
  --bg: #f6f6f3;
  --bg-2: #ffffff;
  --bg-3: #f0f0ed;
  --card: #ffffff;
  --card-2: #fbfbfa;
  --border: #ddddda;
  --border-hover: #b9b9b4;
  --text: #1f2328;
  --text-2: #5f656d;
  --text-3: #858b93;
  --purple: #1f4f82;
  --purple-soft: #183f68;
  --purple-dark: #12304f;
  --teal: #1f4f82;
  --teal-dark: #183f68;
  --success: #2f7d4f;
  --amber: #9a6a16;
  --red: #b8463c;
  --shadow-soft: none;
  --shadow-card: none;
  background: #f6f6f3 !important;
  color: var(--text);
  font-family: "Aptos", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0;
}

body.staff-mode *,
body.admin-mode * {
  text-shadow: none !important;
}

body.staff-mode main,
body.admin-mode main {
  background: #f6f6f3 !important;
}

body.staff-mode header,
body.admin-mode header {
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: none !important;
  backdrop-filter: none;
}

body.staff-mode .logo-wrap,
body.staff-mode #nav,
body.staff-mode #locSelect {
  display: none !important;
}

body.staff-mode .view-switch,
body.admin-mode .view-switch {
  background: #f0f0ed;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  box-shadow: none !important;
}

body.staff-mode .view-switch button,
body.admin-mode .view-switch button {
  min-height: 32px;
  border-radius: 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
}

body.staff-mode .view-switch button.active,
body.admin-mode .view-switch button.active {
  background: #ffffff;
  color: var(--text);
  box-shadow: none;
}

body.staff-mode .staff-wrap,
body.admin-mode .admin-shell {
  width: min(1760px, calc(100vw - 48px));
  max-width: none;
  margin: 0 auto;
  padding: 24px 0 36px;
}

body.staff-mode .staff-head,
body.admin-mode .admin-hero {
  margin-bottom: 18px;
  padding: 0 0 18px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body.admin-mode .admin-hero {
  display: flex;
}

body.staff-mode .staff-head h1,
body.admin-mode .admin-hero h1 {
  color: var(--text);
  font-size: 26px;
  line-height: 1.15;
  font-weight: 720;
  letter-spacing: -.02em;
}

body.staff-mode .staff-head .sub,
body.admin-mode .admin-hero p,
body.admin-mode .admin-eyebrow {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

body.admin-mode .admin-brand-logo {
  width: 118px;
  height: 72px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff;
  box-shadow: none;
}

body.staff-mode .staff-head-actions,
body.admin-mode .admin-actions {
  gap: 8px;
}

body.staff-mode .date-nav,
body.admin-mode .admin-date-nav,
body.staff-mode .staff-theme-switch,
body.admin-mode .admin-tabs,
body.admin-mode .admin-period-tabs {
  min-height: 38px;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff;
  box-shadow: none !important;
}

body.staff-mode .staff-theme-switch {
  display: none !important;
}

body.staff-mode .date-nav button,
body.admin-mode .admin-date-nav button,
body.staff-mode .staff-theme-btn,
body.admin-mode .admin-tabs button,
body.admin-mode .admin-period-tabs button {
  min-height: 30px;
  border-radius: 6px;
  color: var(--text-2);
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

body.staff-mode .date-nav button:hover,
body.admin-mode .admin-date-nav button:hover,
body.staff-mode .staff-theme-btn:hover,
body.admin-mode .admin-tabs button:hover,
body.admin-mode .admin-period-tabs button:hover {
  color: var(--text);
  background: #f3f3f0;
  transform: none;
}

body.staff-mode .staff-theme-btn.active,
body.staff-mode.staff-light .staff-theme-btn.active,
body.admin-mode .admin-tabs button.active,
body.admin-mode .admin-period-tabs button.active {
  background: #1f2328;
  color: #ffffff;
  border: 0;
  box-shadow: none;
}

body.staff-mode .btn-new,
body.admin-mode .admin-btn,
body.staff-mode .ops-admin-btn,
body.staff-mode .qb-btn-save,
body.staff-mode .flow-btn.teal,
body.staff-mode .edit-actions .btn-primary,
body.staff-mode .btn-primary {
  min-height: 38px;
  border-radius: 7px;
  border: 1px solid #1f2328;
  background: #1f2328 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

body.admin-mode .admin-btn.primary {
  background: #1f2328 !important;
  color: #ffffff !important;
  border-color: #1f2328 !important;
}

body.staff-mode .btn-new:hover,
body.admin-mode .admin-btn:hover,
body.staff-mode .ops-admin-btn:hover,
body.staff-mode .qb-btn-save:hover,
body.staff-mode .flow-btn.teal:hover,
body.staff-mode .edit-actions .btn-primary:hover,
body.staff-mode .btn-primary:hover {
  background: #343941 !important;
  border-color: #343941;
  transform: none;
}

body.staff-mode .btn-secondary,
body.staff-mode .qb-btn-cancel,
body.staff-mode .flow-btn.white,
body.staff-mode .pay-btn,
body.staff-mode .ops-tab,
body.staff-mode .ops-mini-btn,
body.admin-mode .admin-btn:not(.primary),
body.staff-mode .res-icon-btn,
body.staff-mode .icon-btn,
body.staff-mode .close-btn {
  border-radius: 7px;
  border: 1px solid var(--border);
  background: #ffffff !important;
  color: var(--text) !important;
  box-shadow: none !important;
  font-weight: 650;
}

body.staff-mode .btn-secondary:hover,
body.staff-mode .qb-btn-cancel:hover,
body.staff-mode .flow-btn.white:hover,
body.staff-mode .pay-btn:hover,
body.staff-mode .ops-tab:hover,
body.staff-mode .ops-mini-btn:hover,
body.admin-mode .admin-btn:not(.primary):hover,
body.staff-mode .res-icon-btn:hover,
body.staff-mode .icon-btn:hover,
body.staff-mode .close-btn:hover {
  border-color: var(--border-hover);
  color: var(--text) !important;
  background: #f7f7f5 !important;
  transform: none;
}

body.staff-mode .kpi-grid,
body.admin-mode .admin-kpi-grid {
  gap: 10px;
  margin-bottom: 16px;
}

body.staff-mode .kpi,
body.admin-mode .admin-kpi,
body.admin-mode .admin-small-card,
body.admin-mode .admin-resource-card,
body.admin-mode .admin-insight,
body.staff-mode .ops-stat,
body.staff-mode .qb-snapshot,
body.staff-mode .qb-meta-card {
  padding: 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff !important;
  box-shadow: none !important;
}

body.staff-mode .kpi:hover {
  border-color: var(--border);
  transform: none;
}

body.staff-mode .kpi .label,
body.admin-mode .admin-kpi .k,
body.admin-mode .admin-small-card .k,
body.admin-mode .admin-resource-card .k,
body.staff-mode .ops-stat .k,
body.staff-mode .qb-snapshot .k,
body.staff-mode .qb-meta-card .meta-label,
body.staff-mode .info-label,
body.staff-mode .qb-block .blk-label,
body.staff-mode .qb-mini-label {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

body.staff-mode .kpi .value,
body.admin-mode .admin-kpi .v,
body.admin-mode .admin-small-card .v,
body.admin-mode .admin-resource-card .v,
body.staff-mode .ops-stat .v,
body.staff-mode .qb-summary .amt {
  color: var(--text);
  font-size: 24px;
  font-weight: 720;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

body.staff-mode .kpi .hint,
body.admin-mode .admin-kpi .s,
body.admin-mode .admin-resource-card .s,
body.admin-mode .admin-small-card .s {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
}

body.staff-mode .kpi.accent,
body.staff-mode .kpi .tag-ok {
  background: #ffffff !important;
  border-color: var(--border);
  color: var(--text-2);
}

body.staff-mode .staff-resource-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

body.staff-mode .staff-resource-tab,
body.admin-mode .admin-center-card {
  min-height: 64px;
  padding: 13px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff !important;
  color: var(--text);
  box-shadow: none !important;
  transform: none !important;
}

body.staff-mode .staff-resource-tab:hover,
body.admin-mode .admin-center-card:hover {
  border-color: var(--border-hover);
}

body.staff-mode .staff-resource-tab.active,
body.staff-mode.staff-light .staff-resource-tab.active,
body.admin-mode .admin-center-card.active {
  border-color: #1f2328;
  background: #ffffff !important;
  color: var(--text);
}

body.staff-mode .staff-resource-tab .main,
body.admin-mode .admin-center-card .name {
  font-size: 14px;
  font-weight: 700;
}

body.staff-mode .staff-resource-tab .sub,
body.admin-mode .admin-center-card .meta {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

body.staff-mode .planning-box,
body.staff-mode .table-box,
body.staff-mode .ops-admin-box,
body.admin-mode .admin-panel {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden;
}

body.staff-mode .planning-box {
  margin-bottom: 18px;
  --planning-hour-h: 46px;
  --planning-header-h: 40px;
}

body.staff-mode .planning-box.expanded {
  inset: 14px;
  border-radius: 10px;
}

body.staff-mode .planning-head,
body.staff-mode .table-head,
body.staff-mode .ops-admin-head,
body.admin-mode .admin-section-title {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: #ffffff !important;
  box-shadow: none !important;
}

body.staff-mode .planning-head h2,
body.staff-mode .table-head h2,
body.staff-mode .ops-admin-head h2,
body.admin-mode .admin-section-title h2 {
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
}

body.staff-mode .planning-sub,
body.staff-mode .table-summary,
body.staff-mode .ops-admin-head p,
body.admin-mode .admin-section-title p {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

body.staff-mode .legend {
  gap: 12px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
}

body.staff-mode .legend .dot {
  width: 7px;
  height: 7px;
}

body.staff-mode .legend .dot.conf { background: #4d6b8f; }
body.staff-mode .legend .dot.arr { background: var(--amber); }
body.staff-mode .legend .dot.paid { background: var(--success); }

body.staff-mode .planning-grid-wrap,
body.staff-mode .laser-grid-wrap,
body.staff-mode .hour-col,
body.staff-mode .lane-col,
body.staff-mode .lane-header,
body.staff-mode .hour-header,
body.staff-mode .slot-cell,
body.staff-mode.staff-light .planning-grid-wrap,
body.staff-mode.staff-light .laser-grid-wrap,
body.staff-mode.staff-light .hour-col,
body.staff-mode.staff-light .lane-header,
body.staff-mode.staff-light .hour-header {
  background: #ffffff !important;
  background-image: none !important;
}

body.staff-mode .hour-col,
body.staff-mode .lane-col,
body.staff-mode .lane-header,
body.staff-mode .hour-header,
body.staff-mode .hour-cell,
body.staff-mode .slot-cell {
  border-color: #e3e3df;
}

body.staff-mode .lane-header .pl,
body.staff-mode .hour-header {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

body.staff-mode .lane-header .num,
body.staff-mode .hour-cell.major,
body.staff-mode .hour-cell.end {
  color: var(--text);
  font-weight: 700;
}

body.staff-mode .hour-cell.minor,
body.staff-mode .hour-cell {
  color: var(--text-3);
  font-weight: 500;
}

body.staff-mode .slot-cell.clickable:hover {
  background: #f7f9fb !important;
  box-shadow: inset 0 0 0 1px #cbd7e3 !important;
}

body.staff-mode .slot-cell.clickable:hover::after {
  color: var(--accent, #1f4f82);
}

body.staff-mode .current-line {
  background: #1f4f82;
  box-shadow: none;
}

body.staff-mode .current-line:before {
  background: #1f4f82;
  animation: none;
}

body.staff-mode .current-line:after {
  border-radius: 4px;
  border: 1px solid #cbd7e3;
  background: #ffffff;
  color: #1f4f82;
  font-weight: 700;
  box-shadow: none;
}

body.staff-mode .booking,
body.staff-mode.staff-light .booking {
  border-radius: 6px;
  border: 1px solid #cfd6dc;
  background: #f8fafc !important;
  color: var(--text);
  box-shadow: none !important;
  transition: border-color .15s ease, background-color .15s ease;
}

body.staff-mode .booking:hover {
  transform: none;
  border-color: #9ba8b4;
  box-shadow: none;
}

body.staff-mode .booking.conf,
body.staff-mode.staff-light .booking.conf {
  background: #f8fafc !important;
  border-left: 4px solid #4d6b8f;
}

body.staff-mode .booking.arr,
body.staff-mode.staff-light .booking.arr {
  background: #fff8eb !important;
  border-left: 4px solid var(--amber);
}

body.staff-mode .booking.paid,
body.staff-mode.staff-light .booking.paid {
  background: #f0f8f2 !important;
  border-left: 4px solid var(--success);
}

body.staff-mode .booking.is-formula,
body.staff-mode .booking.is-formula.conf,
body.staff-mode .booking.is-formula.arr,
body.staff-mode .booking.is-formula.paid,
body.staff-mode.staff-light .booking.is-formula.conf,
body.staff-mode.staff-light .booking.is-formula.arr,
body.staff-mode.staff-light .booking.is-formula.paid {
  background: #fff6dd !important;
  border: 1px solid #d6b25e;
  border-left: 5px solid #9a6a16;
  outline: 0;
  box-shadow: none !important;
}

body.staff-mode .booking.is-special-duration,
body.staff-mode .booking.is-formula.is-special-duration {
  background: #f1f4f7 !important;
  border: 1px solid #98a7b7;
  border-left: 5px solid #5f7186;
  outline: 0;
}

body.staff-mode .booking.is-laser-multi,
body.staff-mode .booking.is-formula.is-laser-multi {
  background: #fff0ee !important;
  border: 1px solid #dd938b;
  border-left: 5px solid #b8463c;
  box-shadow: none !important;
}

body.staff-mode .booking.is-formula.is-laser-multi {
  background: #fff1d5 !important;
  border-color: #c79344;
  border-left-color: #b8463c;
}

body.staff-mode .booking-name,
body.staff-mode .booking-meta,
body.staff-mode .planning-box.expanded .booking::after {
  color: var(--text);
}

body.staff-mode .booking-meta,
body.staff-mode .planning-box.expanded .booking::after {
  color: var(--text-2);
  opacity: 1;
}

body.staff-mode .booking .b-tag,
body.staff-mode .type-badge,
body.staff-mode .reservation-tag,
body.staff-mode .ops-pill,
body.admin-mode .admin-pill,
body.admin-mode .admin-status,
body.staff-mode .res-state-pill,
body.staff-mode .qb-status-pill,
body.staff-mode .count-badge {
  border-radius: 5px;
  border: 1px solid #d7d7d2;
  background: #f4f4f1 !important;
  color: var(--text-2) !important;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

body.staff-mode .type-badge.formule,
body.staff-mode .reservation-tag.formula,
body.staff-mode .booking.is-formula .b-tag,
body.admin-mode .admin-pill.formule {
  background: #fff0c2 !important;
  border-color: #d6b25e;
  color: #67470e !important;
}

body.staff-mode .type-badge.laser,
body.staff-mode .reservation-tag.laser-plus,
body.staff-mode .laser-booking .b-tag,
body.admin-mode .admin-pill.laser {
  background: #fff0ee !important;
  border-color: #dd938b;
  color: #8f332b !important;
}

body.staff-mode .reservation-tag.duration {
  background: #eef2f6 !important;
  border-color: #b9c4cf;
  color: #44556a !important;
}

body.staff-mode .table-box {
  padding: 0;
}

body.staff-mode .table-head {
  margin: 0;
}

body.staff-mode .res-list {
  padding: 14px 16px 16px;
  gap: 12px;
}

body.staff-mode .table-toolbar {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

body.staff-mode .status-filters {
  gap: 6px;
}

body.staff-mode .status-chip {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.staff-mode .status-chip.active,
body.staff-mode .status-chip.active.open,
body.staff-mode .status-chip.active.pending,
body.staff-mode .status-chip.active.arrived,
body.staff-mode .status-chip.active.paid {
  background: #1f2328;
  border-color: #1f2328;
  color: #ffffff;
}

body.staff-mode .status-chip span {
  min-width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(255,255,255,.14);
  font-size: 11px;
}

body.staff-mode .res-section,
body.staff-mode .res-section.workflow,
body.staff-mode.staff-light .res-section,
body.staff-mode.staff-light .res-section.workflow {
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff !important;
  padding: 0;
  box-shadow: none !important;
}

body.staff-mode .res-section-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

body.staff-mode .res-section-head .label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

body.staff-mode .res-dense-list {
  gap: 0;
}

body.staff-mode .res-row,
body.staff-mode.staff-light .res-row {
  grid-template-columns: 72px minmax(0, 1.6fr) minmax(160px, .7fr) auto;
  gap: 12px;
  padding: 11px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-left: 4px solid transparent;
  border-radius: 0;
  background: #ffffff !important;
  box-shadow: none !important;
  opacity: 1;
  transform: none !important;
}

body.staff-mode .res-row:last-child {
  border-bottom: 0;
}

body.staff-mode .res-row:hover {
  background: #fafafa !important;
  border-color: var(--border);
}

body.staff-mode .res-row.pending { border-left-color: #4d6b8f; }
body.staff-mode .res-row.arrived { border-left-color: var(--amber); }
body.staff-mode .res-row.paid { border-left-color: var(--success); }

body.staff-mode .res-row.is-formula,
body.staff-mode .res-row.is-formula.arrived,
body.staff-mode .res-row.is-formula.paid,
body.staff-mode .res-row.is-formula.is-special-duration {
  background: #fffaf0 !important;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-left: 5px solid #9a6a16;
  box-shadow: none !important;
}

body.staff-mode .res-row.is-special-duration:not(.is-formula) {
  background: #f7f9fb !important;
  border-left: 5px solid #5f7186;
  box-shadow: none !important;
}

body.staff-mode .res-row.is-laser-multi:not(.is-formula) {
  background: #fff7f6 !important;
  border-left: 5px solid #b8463c;
  box-shadow: none !important;
}

body.staff-mode .res-row.is-formula.is-laser-multi {
  background: #fff6dd !important;
  border-left: 5px solid #b8463c;
  box-shadow: none !important;
}

body.staff-mode .res-row-time {
  min-height: 48px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: #f7f7f5 !important;
  color: var(--text);
}

body.staff-mode .res-row-time strong,
body.staff-mode .res-row-name,
body.staff-mode .res-row-label,
body.staff-mode .qb-formule-name,
body.staff-mode .qb-formule-price {
  color: var(--text);
}

body.staff-mode .res-row-time span,
body.staff-mode .res-row-meta,
body.staff-mode .res-lanes-empty,
body.staff-mode .qb-formule-sub,
body.staff-mode .qb-section-note,
body.staff-mode .qb-lane-focus-sub {
  color: var(--text-2);
}

body.staff-mode .res-lane-chip,
body.staff-mode .lane-chip,
body.staff-mode .res-lane-chip.laser {
  min-width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: #ffffff !important;
  color: var(--text);
}

body.staff-mode .res-status-btn {
  min-height: 28px;
  padding: 0 8px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.staff-mode .res-status-btn:hover {
  border-color: var(--border-hover);
  color: var(--text);
}

body.staff-mode .res-status-btn.active.pending,
body.staff-mode .res-state-pill.pending {
  background: #edf4fb !important;
  border-color: #bfd2e5;
  color: #1f4f82 !important;
}

body.staff-mode .res-status-btn.active.arrived,
body.staff-mode .res-state-pill.arrived {
  background: #fff4df !important;
  border-color: #e2c07e;
  color: #744d0f !important;
}

body.staff-mode .res-status-btn.active.paid,
body.staff-mode .res-state-pill.paid,
body.admin-mode .admin-pill.paid,
body.staff-mode .ops-pill.sent,
body.staff-mode .ops-pill.finished,
body.admin-mode .admin-status.active {
  background: #edf7ef !important;
  border-color: #b8d7bf;
  color: #24613c !important;
}

body.staff-mode .search-wrap {
  width: min(320px, 100%);
}

body.staff-mode .search-wrap input,
body.staff-mode .input,
body.staff-mode .qb-input,
body.staff-mode .edit-form .input,
body.staff-mode .edit-form select.input,
body.admin-mode .admin-date-nav input {
  min-height: 38px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: #ffffff !important;
  color: var(--text) !important;
  box-shadow: none !important;
  font-size: 13px;
}

body.staff-mode .search-wrap input:focus,
body.staff-mode .input:focus,
body.staff-mode .qb-input:focus,
body.staff-mode .edit-form .input:focus,
body.staff-mode .edit-form select.input:focus {
  border-color: #1f4f82;
  outline: 3px solid rgba(31,79,130,.12);
  background: #ffffff !important;
}

body.staff-mode .pos-overlay,
body.staff-mode .qb-overlay,
body.staff-mode.staff-light .pos-overlay,
body.staff-mode.staff-light .qb-overlay {
  background: rgba(31, 35, 40, .28);
  backdrop-filter: none;
}

body.staff-mode .pos-panel,
body.staff-mode .qb-modal,
body.staff-mode .edit-modal,
body.staff-mode.staff-light .pos-panel,
body.staff-mode.staff-light .qb-modal,
body.staff-mode.staff-light .edit-modal {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #ffffff !important;
  box-shadow: none !important;
}

body.staff-mode .pos-head,
body.staff-mode .qb-head,
body.staff-mode .edit-modal-head,
body.staff-mode.staff-light .pos-head,
body.staff-mode.staff-light .qb-head,
body.staff-mode.staff-light .edit-modal-head {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border);
}

body.staff-mode .pos-head h3,
body.staff-mode .qb-head h3,
body.staff-mode .edit-modal-head h3 {
  color: var(--text);
  font-size: 19px;
  font-weight: 720;
  letter-spacing: -.01em;
}

body.staff-mode .qb-head .ticket-id,
body.staff-mode .ticket-id {
  color: var(--text-3);
  font-size: 11px;
  font-family: "SF Mono", "Cascadia Mono", Consolas, monospace;
  letter-spacing: .02em;
  text-transform: none;
}

body.staff-mode .qb-block,
body.staff-mode .info-block,
body.staff-mode .receipt,
body.staff-mode .edit-summary-card,
body.staff-mode .edit-summary-stat,
body.staff-mode .edit-form .info-block.soft,
body.staff-mode .qb-formule-card,
body.staff-mode .qb-slot-chip,
body.staff-mode .qb-lane-focus,
body.staff-mode .qb-summary,
body.staff-mode.staff-light .qb-summary {
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff !important;
  box-shadow: none !important;
}

body.staff-mode .qb-type-btn,
body.staff-mode .qb-dur-btn,
body.staff-mode .qb-lane-btn,
body.staff-mode .qb-formule-card,
body.staff-mode .qb-slot-chip,
body.staff-mode.staff-light .qb-type-btn,
body.staff-mode.staff-light .qb-dur-btn,
body.staff-mode.staff-light .qb-lane-btn,
body.staff-mode.staff-light .qb-formule-card {
  border-radius: 7px;
  border: 1px solid var(--border);
  background: #ffffff !important;
  color: var(--text);
  box-shadow: none !important;
}

body.staff-mode .qb-type-btn:hover,
body.staff-mode .qb-dur-btn:hover,
body.staff-mode .qb-lane-btn:hover:not(.busy):not(.maint),
body.staff-mode .qb-formule-card:hover:not(:disabled),
body.staff-mode .qb-slot-chip:hover {
  border-color: var(--border-hover);
  color: var(--text);
  transform: none;
}

body.staff-mode .qb-type-btn.active,
body.staff-mode .qb-dur-btn.active,
body.staff-mode .qb-formule-card.active,
body.staff-mode .qb-slot-chip.active,
body.staff-mode.staff-light .qb-type-btn.active,
body.staff-mode.staff-light .qb-dur-btn.active,
body.staff-mode.staff-light .qb-formule-card.active {
  background: #eef4fb !important;
  border-color: #1f4f82;
  color: #1f4f82;
}

body.staff-mode .qb-lane-btn.active,
body.staff-mode .qb-lane-btn.auto,
body.staff-mode.staff-light .qb-lane-btn.active,
body.staff-mode.staff-light .qb-lane-btn.auto {
  background: #eef4fb !important;
  border-color: #1f4f82;
  color: #1f4f82;
}

body.staff-mode .qb-lane-btn.busy,
body.staff-mode.staff-light .qb-lane-btn.busy {
  background: #fff0ee !important;
  border-color: #dd938b;
  color: #8f332b;
}

body.staff-mode .qb-lane-btn.maint,
body.staff-mode.staff-light .qb-lane-btn.maint {
  background: #f2f2ef !important;
  color: var(--text-3);
}

body.staff-mode .receipt {
  font-family: "SF Mono", "Cascadia Mono", Consolas, monospace;
}

body.staff-mode .tabs,
body.staff-mode .modal-tabs {
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #f0f0ed !important;
  box-shadow: none !important;
}

body.staff-mode .tab {
  border-radius: 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

body.staff-mode .tab.active,
body.staff-mode .modal-tabs .tab.active,
body.staff-mode .tab.active.purple,
body.staff-mode.staff-light .tab.active,
body.staff-mode.staff-light .modal-tabs .tab.active,
body.staff-mode.staff-light .tab.active.purple {
  background: #ffffff !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body.staff-mode .toast {
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  box-shadow: none;
}

body.staff-mode .ops-admin-box {
  padding: 0;
}

body.staff-mode .ops-admin-tabs,
body.staff-mode .ops-admin-content {
  padding: 14px 16px;
}

body.staff-mode .ops-grid,
body.admin-mode .admin-dashboard-grid,
body.admin-mode .admin-resource-grid,
body.admin-mode .admin-breakdown-grid,
body.admin-mode .admin-export-grid {
  gap: 10px;
}

body.staff-mode .ops-row,
body.admin-mode .admin-table-wrap,
body.admin-mode .admin-export-card,
body.staff-mode .ops-sim-card,
body.staff-mode .ops-sim-timeline-item {
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff !important;
  box-shadow: none !important;
}

body.staff-mode .ops-row .title,
body.staff-mode .ops-sim-card h3,
body.staff-mode .ops-sim-log strong,
body.staff-mode .ops-sim-timeline-item strong,
body.admin-mode .admin-table strong,
body.admin-mode .admin-export-card h3 {
  color: var(--text);
  font-weight: 700;
}

body.staff-mode .ops-row .meta,
body.staff-mode .ops-sim-card p,
body.staff-mode .ops-sim-log .meta,
body.staff-mode .ops-sim-timeline-item span,
body.admin-mode .admin-table td,
body.admin-mode .admin-export-card p,
body.admin-mode .admin-insight span {
  color: var(--text-2);
  font-weight: 500;
}

body.staff-mode .ops-pill.queued,
body.staff-mode .ops-pill.running,
body.staff-mode .ops-pill.medium {
  background: #fff4df !important;
  border-color: #e2c07e;
  color: #744d0f !important;
}

body.staff-mode .ops-pill.failed,
body.staff-mode .ops-pill.high,
body.admin-mode .admin-pill.failed,
body.admin-mode .admin-pill.critical,
body.admin-mode .admin-pill.high {
  background: #fff0ee !important;
  border-color: #dd938b;
  color: #8f332b !important;
}

body.staff-mode .ops-sim-progress,
body.staff-mode .sim-progress {
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #f0f0ed;
}

body.staff-mode .ops-sim-progress span,
body.staff-mode .sim-progress span {
  background: #1f4f82;
}

body.admin-mode .admin-center-grid {
  gap: 10px;
}

body.admin-mode .admin-tabs,
body.admin-mode .admin-period-tabs {
  width: max-content;
  margin-bottom: 12px;
}

body.admin-mode .admin-panel {
  padding: 0;
}

body.admin-mode .admin-kpi-grid,
body.admin-mode .admin-dashboard-grid,
body.admin-mode .admin-resource-grid,
body.admin-mode .admin-breakdown-grid,
body.admin-mode .admin-export-grid {
  padding: 16px;
}

body.admin-mode .admin-panel > .admin-section-title + .admin-kpi-grid,
body.admin-mode .admin-panel > .admin-section-title + .admin-dashboard-grid,
body.admin-mode .admin-panel > .admin-section-title + .admin-table-wrap,
body.admin-mode .admin-panel > .admin-section-title + .admin-export-grid {
  padding-top: 4px;
}

body.admin-mode .admin-table {
  background: #ffffff;
}

body.admin-mode .admin-table th,
body.admin-mode .admin-table td {
  border-color: var(--border);
}

body.admin-mode .admin-table th {
  background: #f7f7f5;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

body.admin-mode .admin-table td {
  color: var(--text-2);
  font-size: 13px;
}

body.admin-mode .admin-insight .dot {
  background: #9a6a16;
}

body.admin-mode .admin-insight.good .dot { background: var(--success); }
body.admin-mode .admin-insight.high .dot { background: var(--red); }

body.admin-mode .admin-status.planned {
  background: #fff4df !important;
  border-color: #e2c07e;
  color: #744d0f !important;
}

body.staff-mode .empty-state,
body.admin-mode .empty-state {
  color: var(--text-2);
}

body.staff-mode .empty-state .e-title,
body.admin-mode .empty-state .e-title {
  color: var(--text);
  font-weight: 700;
}

body.staff-mode .empty-state .e-sub,
body.admin-mode .empty-state .e-sub {
  color: var(--text-2);
}

@media(max-width:1100px) {
  body.staff-mode .staff-resource-tabs {
    grid-template-columns: 1fr;
  }
  body.staff-mode .staff-wrap,
  body.admin-mode .admin-shell {
    width: min(100vw - 24px, 1760px);
  }
  body.staff-mode .res-row,
  body.staff-mode.staff-light .res-row {
    grid-template-columns: 68px minmax(0,1fr);
  }
  body.staff-mode .res-row-side,
  body.staff-mode .res-row-actions {
    grid-column: 2;
    align-items: flex-start;
  }
}

@media(max-width:760px) {
  body.staff-mode .staff-head,
  body.admin-mode .admin-hero {
    align-items: stretch;
  }
  body.staff-mode .staff-head-actions,
  body.admin-mode .admin-actions {
    width: 100%;
  }
  body.staff-mode .date-nav,
  body.staff-mode .staff-theme-switch,
  body.staff-mode .btn-new,
  body.admin-mode .admin-date-nav,
  body.admin-mode .admin-btn {
    width: 100%;
  }
  body.staff-mode .kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* Direction polish: monochrome brand, clearer hierarchy, no decorative effects. */
body.admin-mode .admin-shell {
  padding-top: 28px;
}

body.admin-mode .admin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid #d4d4cf;
  border-radius: 12px;
  background: #ffffff !important;
}

body.admin-mode .admin-brand {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
}

body.admin-mode .admin-brand-logo {
  width: 132px;
  height: 78px;
  padding: 14px 18px;
  border: 1px solid #1f2328;
  border-radius: 8px;
  background: #141414;
  object-fit: contain;
  opacity: 1;
  filter: none;
}

body.admin-mode .admin-eyebrow {
  margin-bottom: 4px;
  color: #5f656d;
  font-size: 13px;
  font-weight: 650;
}

body.admin-mode .admin-hero h1 {
  font-size: 30px;
  font-weight: 760;
  letter-spacing: -.025em;
}

body.admin-mode .admin-hero p {
  max-width: 780px;
  color: #3f454c;
  font-weight: 520;
  line-height: 1.45;
}

body.admin-mode .admin-actions {
  justify-content: flex-end;
  align-items: center;
  padding-left: 20px;
  border-left: 1px solid #ebebe7;
}

body.admin-mode .admin-date-nav,
body.admin-mode .admin-tabs,
body.admin-mode .admin-period-tabs {
  background: #f7f7f4;
}

body.admin-mode .admin-date-nav input {
  color: #1f2328;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body.admin-mode .admin-center-grid {
  gap: 12px;
  margin-bottom: 16px;
}

body.admin-mode .admin-center-card {
  position: relative;
  min-height: 76px;
  padding: 15px 16px 15px 18px;
  border-color: #d2d2cc;
  overflow: hidden;
}

body.admin-mode .admin-center-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: transparent;
}

body.admin-mode .admin-center-card:hover {
  border-color: #a7a7a0;
}

body.admin-mode .admin-center-card.active {
  border-color: #1f2328;
  box-shadow: inset 0 0 0 1px #1f2328 !important;
}

body.admin-mode .admin-center-card.active::before {
  background: #1f2328;
}

body.admin-mode .admin-center-card .top {
  align-items: center;
  gap: 12px;
}

body.admin-mode .admin-center-card .name {
  font-size: 15px;
  line-height: 1.2;
}

body.admin-mode .admin-center-card .meta {
  margin-top: 8px;
  color: #555b63;
  line-height: 1.35;
}

body.admin-mode .admin-panel,
body.staff-mode .planning-box,
body.staff-mode .table-box,
body.staff-mode .ops-admin-box {
  border-color: #d2d2cc;
}

body.admin-mode .admin-panel {
  border-radius: 12px;
}

body.admin-mode .admin-section-title,
body.staff-mode .planning-head,
body.staff-mode .table-head,
body.staff-mode .ops-admin-head {
  background: #fbfbfa !important;
  border-color: #d7d7d2;
}

body.staff-mode .staff-resource-tab.active,
body.staff-mode.staff-light .staff-resource-tab.active {
  border-color: #1f2328;
  box-shadow: inset 3px 0 0 #1f2328 !important;
}

body.staff-mode .staff-resource-tab .main,
body.admin-mode .admin-section-title h2,
body.staff-mode .planning-head h2,
body.staff-mode .table-head h2 {
  color: #181b1f;
}

body.staff-mode .resource-toggle.active,
body.staff-mode .staff-filter.active,
body.staff-mode .pay-btn.active,
body.admin-mode .admin-tabs button.active,
body.admin-mode .admin-period-tabs button.active {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

@media(max-width:980px) {
  body.admin-mode .admin-hero {
    grid-template-columns: 1fr;
  }
  body.admin-mode .admin-actions {
    padding-left: 0;
    border-left: 0;
    justify-content: flex-start;
  }
}

@media(max-width:760px) {
  body.admin-mode .admin-hero {
    padding: 14px;
  }
  body.admin-mode .admin-brand {
    grid-template-columns: 106px minmax(0, 1fr);
    gap: 14px;
  }
  body.admin-mode .admin-brand-logo {
    width: 106px;
    height: 64px;
    padding: 12px 14px;
  }
  body.admin-mode .admin-hero h1 {
    font-size: 24px;
  }
}

/* Laser planning: 30-weapon capacity board for fast staff scanning. */
body.staff-mode .laser-planning-grid {
  min-width: 1040px;
}

body.staff-mode .laser-arena-col.laser-board-col,
body.staff-mode.staff-light .laser-arena-col.laser-board-col {
  min-width: 940px;
  border-right: 0;
  background: #ffffff !important;
}

body.staff-mode .laser-board-header {
  height: var(--planning-header-h);
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid #d9d9d4;
  background: #fbfbfa;
}

body.staff-mode .laser-board-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border-right: 1px solid #deded9;
}

body.staff-mode .laser-board-title .pl {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 650;
}

body.staff-mode .laser-board-title .num {
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
}

body.staff-mode .laser-board-scale {
  display: grid;
  grid-template-columns: repeat(30, minmax(18px, 1fr));
  align-items: center;
  padding: 0 1px;
  color: #6f7680;
  font-size: 9px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

body.staff-mode .laser-board-scale span {
  justify-self: center;
}

body.staff-mode .laser-board-body {
  position: relative;
  min-width: 0;
}

body.staff-mode .laser-capacity-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(30, minmax(18px, 1fr));
  grid-auto-rows: calc(var(--planning-hour-h) / 2);
}

body.staff-mode .laser-capacity-cell {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid #eeeeea;
  border-bottom: 1px solid #e2e2dd;
  background: #ffffff;
  cursor: cell;
}

body.staff-mode .laser-capacity-cell.half {
  border-bottom-style: dashed;
  border-bottom-color: #ddddd8;
}

body.staff-mode .laser-capacity-cell.weapon-major {
  border-right-color: #d1d1cb;
}

body.staff-mode .laser-capacity-cell.end {
  background: #f8f8f5;
  cursor: default;
}

body.staff-mode .laser-capacity-cell.clickable:hover {
  background: #eef2f6;
  box-shadow: inset 0 0 0 1px #98a7b7;
}

body.staff-mode .laser-board-booking,
body.staff-mode.staff-light .laser-board-booking {
  right: auto !important;
  z-index: 3;
  padding: 6px 7px;
  border-radius: 6px;
  overflow: hidden;
}

body.staff-mode .laser-board-booking.laser-direct,
body.staff-mode.staff-light .laser-board-booking.laser-direct {
  background: #f8fafc !important;
  border: 1px solid #98a7b7;
  border-left: 4px solid #5f7186;
}

body.staff-mode .laser-board-booking.laser-formula,
body.staff-mode.staff-light .laser-board-booking.laser-formula {
  background: #fff6dd !important;
  border: 1px solid #d6b25e;
  border-left: 4px solid #9a6a16;
}

body.staff-mode .laser-board-booking.arr {
  box-shadow: inset 0 2px 0 rgba(154,106,22,.24) !important;
}

body.staff-mode .laser-board-booking.paid {
  background: #eef8f0 !important;
  border-color: #8dbe99;
  border-left-color: #2f7d4f;
}

body.staff-mode .laser-board-booking.is-laser-multi,
body.staff-mode.staff-light .laser-board-booking.is-laser-multi {
  background: #fff0ee !important;
  border: 1px solid #dd938b;
  border-left: 5px solid #b8463c;
}

body.staff-mode .laser-board-booking.is-formula.is-laser-multi,
body.staff-mode.staff-light .laser-board-booking.is-formula.is-laser-multi {
  background: #fff1d5 !important;
  border-color: #c79344;
  border-left-color: #b8463c;
}

body.staff-mode .laser-booking-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 5px;
}

body.staff-mode .laser-board-booking .booking-name {
  color: #181b1f;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.1;
}

body.staff-mode .laser-count {
  flex: 0 0 auto;
  min-width: 25px;
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid rgba(31,35,40,.16);
  background: rgba(255,255,255,.72);
  color: #181b1f;
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

body.staff-mode .laser-player-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3px, 1fr));
  gap: 2px;
  height: 5px;
  margin: 5px 0 4px;
}

body.staff-mode .laser-player-strip span {
  border-radius: 2px;
  background: currentColor;
  opacity: .32;
}

body.staff-mode .laser-board-booking .booking-meta {
  color: #4f5760;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.15;
  opacity: 1;
}

body.staff-mode .laser-board-booking.laser-narrow {
  padding: 5px;
}

body.staff-mode .laser-board-booking.laser-narrow .b-tag,
body.staff-mode .laser-board-booking.laser-narrow .reservation-tags,
body.staff-mode .laser-board-booking.laser-narrow .laser-player-strip,
body.staff-mode .laser-board-booking.laser-narrow .booking-meta {
  display: none;
}

body.staff-mode .laser-board-booking.laser-tiny {
  display: grid;
  place-items: center;
  padding: 3px;
}

body.staff-mode .laser-board-booking.laser-tiny .booking-name,
body.staff-mode .laser-board-booking.laser-tiny .b-tag,
body.staff-mode .laser-board-booking.laser-tiny .reservation-tags,
body.staff-mode .laser-board-booking.laser-tiny .laser-player-strip,
body.staff-mode .laser-board-booking.laser-tiny .booking-meta {
  display: none;
}

body.staff-mode .laser-board-booking.laser-tiny .laser-count {
  min-width: 20px;
  padding: 2px 3px;
  font-size: 9px;
}

body.staff-mode .planning-box.expanded .laser-board-booking .booking-name {
  font-size: 12px;
}

body.staff-mode .planning-box.expanded .laser-board-booking .booking-meta {
  font-size: 10px;
}

@media(max-width:760px) {
  body.staff-mode .laser-planning-grid {
    min-width: 980px;
  }
  body.staff-mode .laser-arena-col.laser-board-col {
    min-width: 880px;
  }
}

/* Laser agenda replacement: one readable row per launch, not a 30-column table. */
body.staff-mode .laser-grid-wrap {
  background: #ffffff !important;
  overflow-x: auto;
}

body.staff-mode .laser-agenda {
  min-width: 900px;
  background: #ffffff;
}

body.staff-mode .laser-agenda-header {
  display: grid;
  grid-template-columns: 92px minmax(560px, 1fr) 130px;
  position: sticky;
  top: 0;
  z-index: 4;
  border-bottom: 1px solid #d8d8d2;
  background: #fbfbfa;
  color: #6b7179;
  font-size: 11px;
  font-weight: 700;
}

body.staff-mode .laser-agenda-header > div {
  padding: 12px 14px;
  border-right: 1px solid #e6e6e1;
}

body.staff-mode .laser-agenda-header > div:last-child {
  border-right: 0;
}

body.staff-mode .laser-agenda-body {
  display: flex;
  flex-direction: column;
}

body.staff-mode .laser-agenda-row {
  display: grid;
  grid-template-columns: 92px minmax(560px, 1fr) 130px;
  min-height: 74px;
  border-bottom: 1px solid #ecece8;
  background: #ffffff;
}

body.staff-mode .laser-agenda-row.is-half {
  background: #fcfcfb;
}

body.staff-mode .laser-agenda-row.is-current {
  box-shadow: inset 4px 0 0 #1f4f82;
  background: #f7fafc;
}

body.staff-mode .laser-agenda-time,
body.staff-mode .laser-agenda-capacity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 12px 14px;
  border-right: 1px solid #e6e6e1;
}

body.staff-mode .laser-agenda-time strong,
body.staff-mode .laser-agenda-capacity strong {
  color: #171a1f;
  font-size: 13px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

body.staff-mode .laser-agenda-time span,
body.staff-mode .laser-agenda-capacity span {
  color: #737982;
  font-size: 11px;
  font-weight: 560;
}

body.staff-mode .laser-agenda-capacity {
  border-right: 0;
  align-items: flex-start;
}

body.staff-mode .laser-session-slot {
  min-width: 0;
  margin: 8px 10px;
}

body.staff-mode .laser-session-stack {
  display: grid;
  gap: 8px;
  min-width: 0;
}

body.staff-mode .laser-session-slot.is-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: calc(100% - 20px);
  min-height: 48px;
  padding: 0 14px;
  border: 1px dashed #deded8;
  border-radius: 7px;
  background: #fbfbfa;
  color: #626970;
  text-align: left;
  cursor: cell;
}

body.staff-mode .laser-session-slot.is-empty:hover {
  border-color: #9ba8b4;
  background: #f6f8fa;
}

body.staff-mode .laser-empty-title {
  color: #3f454c;
  font-size: 13px;
  font-weight: 700;
}

body.staff-mode .laser-empty-sub {
  color: #7c8289;
  font-size: 12px;
  font-weight: 560;
}

body.staff-mode .laser-session-slot.has-session {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d6d6d0;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  text-align: left;
}

body.staff-mode .laser-session-slot.has-session.has-direct {
  border-left: 4px solid #4d6b8f;
}

body.staff-mode .laser-session-slot.has-session.has-formula {
  border-left: 4px solid #9a6a16;
  background: #fffdf8;
}

body.staff-mode .laser-session-slot.has-session.is-shared {
  box-shadow: inset 0 0 0 1px rgba(47,125,79,.16);
}

body.staff-mode .laser-session-top,
body.staff-mode .laser-group-card,
body.staff-mode .laser-group-main {
  min-width: 0;
}

body.staff-mode .laser-session-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

body.staff-mode .laser-session-title {
  color: #171a1f;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

body.staff-mode .laser-session-sub {
  margin-top: 2px;
  color: #666d75;
  font-size: 12px;
  font-weight: 560;
}

body.staff-mode .laser-session-kind {
  flex: 0 0 auto;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #d7d7d2;
  border-radius: 5px;
  background: #f4f4f1;
  color: #555b63;
  font-size: 11px;
  font-weight: 700;
}

body.staff-mode .laser-group-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

body.staff-mode .laser-group-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid #d7d7d2;
  background: #f8fafc;
  color: #171a1f;
  text-align: left;
  cursor: grab;
}

body.staff-mode .laser-group-card:hover {
  border-color: #98a7b7;
  background: #f3f6f8;
}

body.staff-mode .laser-group-card:active,
body.staff-mode .laser-group-card.is-dragging,
body.staff-mode .laser-pass-card.is-dragging {
  cursor: grabbing;
}

body.staff-mode.laser-dragging,
body.staff-mode.laser-dragging * {
  user-select: none;
}

body.staff-mode .laser-group-card.is-dragging,
body.staff-mode .laser-pass-card.is-dragging {
  opacity: .46;
}

body.staff-mode .laser-drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: .96;
  box-shadow: 0 14px 38px rgba(0,0,0,.34);
}

body.staff-mode .laser-group-card.formula {
  background: #fff6dd;
  border-color: #d6b25e;
}

body.staff-mode .laser-group-card.paid {
  background: #eef8f0;
  border-color: #8dbe99;
}

body.staff-mode .laser-group-main strong {
  display: block;
  overflow: hidden;
  color: #171a1f;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.staff-mode .laser-group-main small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #5d646c;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.staff-mode .laser-group-count {
  min-width: 34px;
  padding: 4px 7px;
  border: 1px solid rgba(31,35,40,.16);
  border-radius: 5px;
  background: #ffffff;
  color: #171a1f;
  font-size: 12px;
  font-weight: 760;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

body.staff-mode .laser-capacity-line {
  position: relative;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid #d7d7d2;
  background: #f1f1ee;
}

body.staff-mode .laser-capacity-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: #dfe5ec;
}

body.staff-mode .laser-meter-segment {
  position: absolute;
  top: 0;
  bottom: 0;
  border-right: 1px solid rgba(255,255,255,.65);
  background: #4d6b8f;
}

body.staff-mode .laser-meter-segment.formula {
  background: #9a6a16;
}

body.staff-mode .laser-pass-queue {
  display: grid;
  grid-template-columns: minmax(190px, 260px) 1fr;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid #e4e4de;
  background: #f7f7f4;
}

body.staff-mode .laser-pass-queue-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

body.staff-mode .laser-pass-queue-copy strong {
  color: #171a1f;
  font-size: 13px;
  font-weight: 780;
}

body.staff-mode .laser-pass-queue-copy span {
  color: #6d747c;
  font-size: 12px;
  font-weight: 560;
  line-height: 1.25;
}

body.staff-mode .laser-pass-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

body.staff-mode .laser-pass-card {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid #d6d6d0;
  border-radius: 7px;
  background: #ffffff;
  color: #171a1f;
  text-align: left;
  cursor: grab;
}

body.staff-mode .laser-pass-card:active {
  cursor: grabbing;
}

body.staff-mode .laser-pass-name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.staff-mode .laser-pass-meta {
  color: #46515d;
  font-size: 12px;
  font-weight: 700;
}

body.staff-mode .laser-pass-origin {
  color: #777f88;
  font-size: 11px;
  font-weight: 560;
}

body.staff-mode .laser-session-slot.is-drop-target {
  border-color: #1f4f82 !important;
  background: #eef5fb !important;
  box-shadow: inset 0 0 0 1px rgba(31,79,130,.28);
}

@media(max-width:760px) {
  body.staff-mode .laser-pass-queue {
    grid-template-columns: 1fr;
  }
  body.staff-mode .laser-agenda {
    min-width: 780px;
  }
  body.staff-mode .laser-agenda-header,
  body.staff-mode .laser-agenda-row {
    grid-template-columns: 78px minmax(490px, 1fr) 110px;
  }
  body.staff-mode .laser-group-list {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

/* Operations dark mode: sober SaaS back-office, optimized for staff scanning. */
body.staff-mode,
body.staff-mode.staff-light,
body.admin-mode {
  --bg: #0d0f12;
  --bg-2: #111419;
  --bg-3: #151922;
  --card: #15181d;
  --card-2: #181d24;
  --card-3: #1d232c;
  --border: #2a3038;
  --border-hover: #3a424d;
  --text: #f2f4f7;
  --text-2: #a6adb8;
  --text-3: #767f8d;
  --accent: #7f9fc9;
  --accent-strong: #a9c2e3;
  --amber: #c6a35c;
  --success: #74b28a;
  --red: #cf7b73;
  --purple: #7f9fc9;
  --purple-soft: #8eabcF;
  --purple-dark: #5f7fa9;
  --teal: #7f9fc9;
  --teal-dark: #5f7fa9;
  --shadow-soft: none;
  --shadow-card: none;
  background: var(--bg) !important;
  color: var(--text) !important;
  color-scheme: dark;
}

body.staff-mode main,
body.admin-mode main,
body.staff-mode.staff-light main {
  background: var(--bg) !important;
}

body.staff-mode header,
body.admin-mode header,
body.staff-mode.staff-light header {
  background: #0b0d10 !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.staff-mode .view-switch,
body.admin-mode .view-switch,
body.staff-mode .date-nav,
body.admin-mode .admin-date-nav,
body.admin-mode .admin-tabs,
body.admin-mode .admin-period-tabs,
body.staff-mode .staff-theme-switch {
  background: #101318 !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

body.staff-mode .view-switch button,
body.admin-mode .view-switch button,
body.staff-mode .date-nav button,
body.admin-mode .admin-date-nav button,
body.admin-mode .admin-tabs button,
body.admin-mode .admin-period-tabs button,
body.staff-mode .staff-theme-btn {
  background: transparent !important;
  color: var(--text-2) !important;
}

body.staff-mode .view-switch button:hover,
body.admin-mode .view-switch button:hover,
body.staff-mode .date-nav button:hover,
body.admin-mode .admin-date-nav button:hover,
body.admin-mode .admin-tabs button:hover,
body.admin-mode .admin-period-tabs button:hover {
  background: #171b22 !important;
  color: var(--text) !important;
}

body.staff-mode .view-switch button.active,
body.admin-mode .view-switch button.active,
body.staff-mode .staff-theme-btn.active,
body.staff-mode.staff-light .staff-theme-btn.active,
body.admin-mode .admin-tabs button.active,
body.admin-mode .admin-period-tabs button.active {
  background: #f2f4f7 !important;
  color: #101318 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.staff-mode .staff-head,
body.admin-mode .admin-hero {
  background: transparent !important;
  border-bottom-color: var(--border) !important;
}

body.staff-mode .staff-head h1,
body.admin-mode .admin-hero h1,
body.staff-mode .planning-head h2,
body.staff-mode .table-head h2,
body.staff-mode .ops-admin-head h2,
body.admin-mode .admin-section-title h2,
body.staff-mode .staff-resource-tab .main,
body.admin-mode .admin-center-card .name {
  color: var(--text) !important;
}

body.staff-mode .staff-head .sub,
body.admin-mode .admin-hero p,
body.admin-mode .admin-eyebrow,
body.staff-mode .planning-sub,
body.staff-mode .table-summary,
body.staff-mode .ops-admin-head p,
body.admin-mode .admin-section-title p,
body.staff-mode .staff-resource-tab .sub,
body.admin-mode .admin-center-card .meta {
  color: var(--text-2) !important;
}

body.admin-mode .admin-brand-logo {
  background: #07090b !important;
  border: 1px solid #2a3038 !important;
  box-shadow: none !important;
}

body.staff-mode .btn-new,
body.admin-mode .admin-btn.primary,
body.staff-mode .ops-admin-btn,
body.staff-mode .qb-btn-save,
body.staff-mode .flow-btn.teal,
body.staff-mode .edit-actions .btn-primary,
body.staff-mode .btn-primary {
  background: #f2f4f7 !important;
  border-color: #f2f4f7 !important;
  color: #0d0f12 !important;
  box-shadow: none !important;
}

body.staff-mode .btn-new:hover,
body.admin-mode .admin-btn.primary:hover,
body.staff-mode .ops-admin-btn:hover,
body.staff-mode .qb-btn-save:hover,
body.staff-mode .flow-btn.teal:hover,
body.staff-mode .edit-actions .btn-primary:hover,
body.staff-mode .btn-primary:hover {
  background: #dfe4ea !important;
  border-color: #dfe4ea !important;
  color: #0d0f12 !important;
  transform: none !important;
}

body.staff-mode .btn-secondary,
body.staff-mode .qb-btn-cancel,
body.staff-mode .flow-btn.white,
body.staff-mode .pay-btn,
body.staff-mode .ops-tab,
body.staff-mode .ops-mini-btn,
body.admin-mode .admin-btn:not(.primary),
body.staff-mode .res-icon-btn,
body.staff-mode .icon-btn,
body.staff-mode .close-btn,
body.staff-mode .resource-toggle,
body.staff-mode .staff-filter {
  background: #111419 !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body.staff-mode .btn-secondary:hover,
body.staff-mode .qb-btn-cancel:hover,
body.staff-mode .flow-btn.white:hover,
body.staff-mode .pay-btn:hover,
body.staff-mode .ops-tab:hover,
body.staff-mode .ops-mini-btn:hover,
body.admin-mode .admin-btn:not(.primary):hover,
body.staff-mode .res-icon-btn:hover,
body.staff-mode .icon-btn:hover,
body.staff-mode .close-btn:hover,
body.staff-mode .resource-toggle:hover,
body.staff-mode .staff-filter:hover {
  background: #181d24 !important;
  border-color: var(--border-hover) !important;
  color: var(--text) !important;
  transform: none !important;
}

body.staff-mode .kpi,
body.admin-mode .admin-kpi,
body.admin-mode .admin-small-card,
body.admin-mode .admin-resource-card,
body.admin-mode .admin-insight,
body.staff-mode .ops-stat,
body.staff-mode .qb-snapshot,
body.staff-mode .qb-meta-card,
body.staff-mode .staff-resource-tab,
body.admin-mode .admin-center-card,
body.staff-mode .planning-box,
body.staff-mode .table-box,
body.staff-mode .ops-admin-box,
body.admin-mode .admin-panel,
body.staff-mode .res-section,
body.staff-mode .res-section.workflow,
body.staff-mode .edit-summary-card,
body.staff-mode .edit-summary-stat,
body.staff-mode .edit-form .info-block.soft,
body.staff-mode .info-block,
body.staff-mode .receipt,
body.staff-mode .qb-block,
body.staff-mode .pos-panel,
body.staff-mode .qb-modal,
body.staff-mode .edit-modal,
body.staff-mode.staff-light .planning-box,
body.staff-mode.staff-light .table-box,
body.staff-mode.staff-light .res-section,
body.staff-mode.staff-light .res-section.workflow,
body.staff-mode.staff-light .pos-panel,
body.staff-mode.staff-light .qb-modal,
body.staff-mode.staff-light .edit-modal {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body.staff-mode .kpi:hover,
body.staff-mode .staff-resource-tab:hover,
body.admin-mode .admin-center-card:hover,
body.staff-mode .res-row:hover {
  background: #181d24 !important;
  border-color: var(--border-hover) !important;
  transform: none !important;
}

body.staff-mode .staff-resource-tab.active,
body.staff-mode.staff-light .staff-resource-tab.active,
body.admin-mode .admin-center-card.active {
  background: #171b22 !important;
  border-color: #f2f4f7 !important;
  box-shadow: inset 3px 0 0 #f2f4f7 !important;
}

body.staff-mode .planning-head,
body.staff-mode .table-head,
body.staff-mode .ops-admin-head,
body.admin-mode .admin-section-title,
body.staff-mode .pos-head,
body.staff-mode .qb-head,
body.staff-mode .edit-modal-head,
body.staff-mode.staff-light .pos-head,
body.staff-mode.staff-light .qb-head,
body.staff-mode.staff-light .edit-modal-head {
  background: #171b22 !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

body.staff-mode .kpi .label,
body.admin-mode .admin-kpi .k,
body.admin-mode .admin-small-card .k,
body.admin-mode .admin-resource-card .k,
body.staff-mode .ops-stat .k,
body.staff-mode .qb-snapshot .k,
body.staff-mode .qb-meta-card .meta-label,
body.staff-mode .info-label,
body.staff-mode .qb-block .blk-label,
body.staff-mode .qb-mini-label,
body.staff-mode .info-row .lbl,
body.staff-mode .edit-summary-stat .k {
  color: var(--text-3) !important;
}

body.staff-mode .kpi .value,
body.admin-mode .admin-kpi .v,
body.admin-mode .admin-small-card .v,
body.admin-mode .admin-resource-card .v,
body.staff-mode .ops-stat .v,
body.staff-mode .qb-summary .amt,
body.staff-mode .info-row .val,
body.staff-mode .receipt-total .amount,
body.staff-mode .qb-head h3,
body.staff-mode .edit-modal-head h3,
body.staff-mode .pos-head h3,
body.staff-mode .receipt-head .title {
  color: var(--text) !important;
}

body.staff-mode .kpi .hint,
body.admin-mode .admin-kpi .s,
body.admin-mode .admin-resource-card .s,
body.admin-mode .admin-small-card .s,
body.staff-mode .edit-summary-card p,
body.staff-mode .info-row .val small,
body.staff-mode .empty-state,
body.staff-mode .empty-state .e-sub,
body.staff-mode .res-row-meta,
body.staff-mode .res-row-time span {
  color: var(--text-2) !important;
}

body.staff-mode .search-wrap input,
body.staff-mode .edit-form .input,
body.staff-mode .edit-form select.input,
body.staff-mode .auth-input,
body.staff-mode .qb-input,
body.staff-mode textarea,
body.staff-mode select,
body.staff-mode input,
body.admin-mode input,
body.admin-mode select,
body.admin-mode textarea {
  background: #101318 !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body.staff-mode .search-wrap input::placeholder,
body.staff-mode .edit-form .input::placeholder,
body.staff-mode .auth-input::placeholder,
body.staff-mode .qb-input::placeholder,
body.staff-mode input::placeholder,
body.admin-mode input::placeholder {
  color: #636c78 !important;
}

body.staff-mode .search-wrap input:focus,
body.staff-mode .edit-form .input:focus,
body.staff-mode .edit-form select.input:focus,
body.staff-mode .qb-input:focus,
body.staff-mode .auth-input:focus,
body.staff-mode textarea:focus,
body.staff-mode select:focus,
body.staff-mode input:focus,
body.admin-mode input:focus,
body.admin-mode select:focus,
body.admin-mode textarea:focus {
  border-color: var(--accent) !important;
  outline: 2px solid rgba(127, 159, 201, .24) !important;
  outline-offset: 0;
}

body.staff-mode .tabs,
body.staff-mode .modal-tabs,
body.staff-mode .status-chip,
body.staff-mode .res-status-btn,
body.staff-mode .res-icon-btn,
body.staff-mode .icon-btn,
body.staff-mode .res-lane-chip,
body.staff-mode .lane-chip,
body.staff-mode .close-btn,
body.staff-mode .date-nav {
  background: #111419 !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}

body.staff-mode .tab.active,
body.staff-mode .modal-tabs .tab.active,
body.staff-mode .tab.active.purple,
body.staff-mode .status-chip.active,
body.staff-mode .status-chip.active.open,
body.staff-mode .status-chip.active.pending,
body.staff-mode .status-chip.active.arrived,
body.staff-mode .status-chip.active.paid,
body.staff-mode .resource-toggle.active,
body.staff-mode .staff-filter.active,
body.staff-mode .pay-btn.active {
  background: #f2f4f7 !important;
  border-color: #f2f4f7 !important;
  color: #0d0f12 !important;
  box-shadow: none !important;
}

body.staff-mode .status-chip span,
body.staff-mode .count-badge {
  background: #242a33 !important;
  border-color: #333b47 !important;
  color: var(--text) !important;
}

body.staff-mode .status-chip.active span {
  background: rgba(13,15,18,.14) !important;
  color: #0d0f12 !important;
}

body.staff-mode .planning-grid-wrap,
body.staff-mode .laser-grid-wrap,
body.staff-mode .hour-col,
body.staff-mode .lane-col,
body.staff-mode .lane-header,
body.staff-mode .hour-header,
body.staff-mode .slot-cell,
body.staff-mode.staff-light .planning-grid-wrap,
body.staff-mode.staff-light .laser-grid-wrap,
body.staff-mode.staff-light .hour-col,
body.staff-mode.staff-light .lane-col,
body.staff-mode.staff-light .lane-header,
body.staff-mode.staff-light .hour-header,
body.staff-mode.staff-light .slot-cell {
  background: #101318 !important;
  background-image: none !important;
}

body.staff-mode .hour-col,
body.staff-mode .lane-col,
body.staff-mode .lane-header,
body.staff-mode .hour-header,
body.staff-mode .hour-cell,
body.staff-mode .slot-cell,
body.staff-mode.staff-light .hour-col,
body.staff-mode.staff-light .lane-col,
body.staff-mode.staff-light .lane-header,
body.staff-mode.staff-light .hour-header,
body.staff-mode.staff-light .hour-cell,
body.staff-mode.staff-light .slot-cell {
  border-color: #252b34 !important;
}

body.staff-mode .hour-header,
body.staff-mode .lane-header,
body.staff-mode .hour-cell.minor,
body.staff-mode .hour-cell,
body.staff-mode .lane-header .pl {
  color: var(--text-3) !important;
}

body.staff-mode .hour-cell.major,
body.staff-mode .hour-cell.end,
body.staff-mode .lane-header .num {
  color: var(--text) !important;
}

body.staff-mode .slot-cell.clickable:hover {
  background: #17202b !important;
  box-shadow: inset 0 0 0 1px #34465c !important;
}

body.staff-mode .current-line {
  background: #7f9fc9 !important;
  box-shadow: none !important;
}

body.staff-mode .current-line:before {
  background: #7f9fc9 !important;
  animation: none !important;
}

body.staff-mode .current-line:after {
  background: #101318 !important;
  border-color: #52657f !important;
  color: #d7e5f7 !important;
  box-shadow: none !important;
}

body.staff-mode .booking,
body.staff-mode.staff-light .booking {
  background: #1a2028 !important;
  border: 1px solid #35404d !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body.staff-mode .booking:hover {
  background: #202733 !important;
  border-color: #4a5665 !important;
  transform: none !important;
}

body.staff-mode .booking.conf,
body.staff-mode.staff-light .booking.conf {
  background: #1b222c !important;
  border-left: 4px solid var(--accent) !important;
}

body.staff-mode .booking.arr,
body.staff-mode.staff-light .booking.arr {
  background: #262111 !important;
  border-left: 4px solid var(--amber) !important;
}

body.staff-mode .booking.paid,
body.staff-mode.staff-light .booking.paid {
  background: #17241d !important;
  border-left: 4px solid var(--success) !important;
}

body.staff-mode .booking.is-formula,
body.staff-mode .booking.is-formula.conf,
body.staff-mode .booking.is-formula.arr,
body.staff-mode .booking.is-formula.paid,
body.staff-mode.staff-light .booking.is-formula,
body.staff-mode.staff-light .booking.is-formula.conf,
body.staff-mode.staff-light .booking.is-formula.arr,
body.staff-mode.staff-light .booking.is-formula.paid {
  background: #271f12 !important;
  border-color: #6d592c !important;
  border-left: 5px solid var(--amber) !important;
  color: var(--text) !important;
}

body.staff-mode .booking.is-special-duration,
body.staff-mode .booking.is-formula.is-special-duration {
  background: #1b2430 !important;
  border-color: #46596f !important;
  border-left: 5px solid #9aaec8 !important;
}

body.staff-mode .booking.is-laser-multi,
body.staff-mode .booking.is-formula.is-laser-multi {
  background: #2b1b1a !important;
  border-color: #74453f !important;
  border-left: 5px solid var(--red) !important;
}

body.staff-mode .booking-name,
body.staff-mode .booking-meta,
body.staff-mode .planning-box.expanded .booking::after,
body.staff-mode .laser-board-booking .booking-name,
body.staff-mode .laser-board-booking .booking-meta {
  color: var(--text) !important;
}

body.staff-mode .booking-meta,
body.staff-mode .planning-box.expanded .booking::after {
  color: var(--text-2) !important;
}

body.staff-mode .booking .b-tag,
body.staff-mode .type-badge,
body.staff-mode .reservation-tag,
body.staff-mode .ops-pill,
body.admin-mode .admin-pill,
body.admin-mode .admin-status,
body.staff-mode .res-state-pill,
body.staff-mode .qb-status-pill,
body.staff-mode .count-badge {
  background: #222832 !important;
  border-color: #343c48 !important;
  color: #d5dae2 !important;
}

body.staff-mode .type-badge.formule,
body.staff-mode .reservation-tag.formula,
body.staff-mode .booking.is-formula .b-tag,
body.admin-mode .admin-pill.formule {
  background: #322713 !important;
  border-color: #6d592c !important;
  color: #efd58b !important;
}

body.staff-mode .type-badge.laser,
body.staff-mode .reservation-tag.laser-plus,
body.staff-mode .laser-booking .b-tag,
body.admin-mode .admin-pill.laser {
  background: #2d1f1e !important;
  border-color: #70443f !important;
  color: #efb3ad !important;
}

body.staff-mode .reservation-tag.duration {
  background: #1f2a36 !important;
  border-color: #43546a !important;
  color: #c5d2e3 !important;
}

body.staff-mode .res-list {
  background: var(--card) !important;
}

body.staff-mode .table-toolbar,
body.staff-mode .res-section-head {
  border-color: var(--border) !important;
}

body.staff-mode .res-row,
body.staff-mode.staff-light .res-row {
  background: #15181d !important;
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body.staff-mode .res-row:hover {
  background: #1a1f27 !important;
}

body.staff-mode .res-row.pending { border-left-color: var(--accent) !important; }
body.staff-mode .res-row.arrived { border-left-color: var(--amber) !important; }
body.staff-mode .res-row.paid { border-left-color: var(--success) !important; }

body.staff-mode .res-row.is-formula,
body.staff-mode .res-row.is-formula.arrived,
body.staff-mode .res-row.is-formula.paid,
body.staff-mode .res-row.is-formula.is-special-duration {
  background: #1c1710 !important;
  border-left-color: var(--amber) !important;
}

body.staff-mode .res-row.is-special-duration:not(.is-formula) {
  background: #171d25 !important;
  border-left-color: #9aaec8 !important;
}

body.staff-mode .res-row.is-laser-multi:not(.is-formula),
body.staff-mode .res-row.is-formula.is-laser-multi {
  background: #201716 !important;
  border-left-color: var(--red) !important;
}

body.staff-mode .res-row-time {
  background: #0f1216 !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

body.staff-mode .res-row-name,
body.staff-mode .res-row-label,
body.staff-mode .res-section-head .label,
body.staff-mode .empty-state .e-title {
  color: var(--text) !important;
}

body.staff-mode .res-status-btn.active.pending,
body.staff-mode .res-state-pill.pending {
  background: #1d2836 !important;
  border-color: #415878 !important;
  color: #cfe1f8 !important;
}

body.staff-mode .res-status-btn.active.arrived,
body.staff-mode .res-state-pill.arrived {
  background: #2d2412 !important;
  border-color: #735d2d !important;
  color: #efd58b !important;
}

body.staff-mode .res-status-btn.active.paid,
body.staff-mode .res-state-pill.paid {
  background: #17281f !important;
  border-color: #3c6b4d !important;
  color: #bde8ca !important;
}

body.staff-mode .pos-overlay,
body.staff-mode .qb-overlay,
body.staff-mode.staff-light .pos-overlay,
body.staff-mode.staff-light .qb-overlay {
  background: rgba(5, 7, 9, .74) !important;
  backdrop-filter: blur(8px);
}

body.staff-mode .receipt,
body.staff-mode .qb-summary,
body.staff-mode.staff-light .receipt,
body.staff-mode.staff-light .qb-summary {
  background: #101318 !important;
  border-color: var(--border) !important;
}

body.staff-mode .qb-type-btn,
body.staff-mode .qb-dur-btn,
body.staff-mode .qb-lane-btn,
body.staff-mode .qb-formule-card,
body.staff-mode .upsell-btn,
body.staff-mode.staff-light .qb-type-btn,
body.staff-mode.staff-light .qb-dur-btn,
body.staff-mode.staff-light .qb-lane-btn,
body.staff-mode.staff-light .qb-formule-card {
  background: #111419 !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body.staff-mode .qb-type-btn.active,
body.staff-mode .qb-dur-btn.active,
body.staff-mode .qb-lane-btn.active,
body.staff-mode .qb-lane-btn.auto,
body.staff-mode .qb-formule-card.active,
body.staff-mode.staff-light .qb-type-btn.active,
body.staff-mode.staff-light .qb-dur-btn.active,
body.staff-mode.staff-light .qb-lane-btn.active,
body.staff-mode.staff-light .qb-lane-btn.auto,
body.staff-mode.staff-light .qb-formule-card.active {
  background: #1d2632 !important;
  border-color: var(--accent) !important;
  color: var(--text) !important;
}

body.staff-mode .qb-lane-btn.busy,
body.staff-mode.staff-light .qb-lane-btn.busy {
  background: #201716 !important;
  border-color: #70443f !important;
  color: #efb3ad !important;
}

body.staff-mode .qb-lane-btn.maint,
body.staff-mode.staff-light .qb-lane-btn.maint {
  background: #1b1b1d !important;
  color: #68717d !important;
}

body.staff-mode .toast {
  background: #f2f4f7 !important;
  border-color: #f2f4f7 !important;
  color: #0d0f12 !important;
  box-shadow: none !important;
}

body.staff-mode .laser-grid-wrap,
body.staff-mode.staff-light .laser-grid-wrap {
  background: #101318 !important;
}

body.staff-mode .laser-agenda {
  background: #101318 !important;
  color: var(--text) !important;
}

body.staff-mode .laser-agenda-header {
  background: #171b22 !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}

body.staff-mode .laser-agenda-header > div {
  border-color: var(--border) !important;
}

body.staff-mode .laser-agenda-row {
  background: #101318 !important;
  border-color: #252b34 !important;
}

body.staff-mode .laser-agenda-row.is-half {
  background: #11151b !important;
}

body.staff-mode .laser-agenda-row.is-current {
  background: #131a22 !important;
  box-shadow: inset 4px 0 0 var(--accent) !important;
}

body.staff-mode .laser-agenda-time,
body.staff-mode .laser-agenda-capacity {
  border-color: var(--border) !important;
}

body.staff-mode .laser-agenda-time strong,
body.staff-mode .laser-agenda-capacity strong,
body.staff-mode .laser-session-title,
body.staff-mode .laser-empty-title,
body.staff-mode .laser-group-main strong,
body.staff-mode .laser-group-count {
  color: var(--text) !important;
}

body.staff-mode .laser-agenda-time span,
body.staff-mode .laser-agenda-capacity span,
body.staff-mode .laser-session-sub,
body.staff-mode .laser-empty-sub,
body.staff-mode .laser-group-main small {
  color: var(--text-2) !important;
}

body.staff-mode .laser-session-slot.is-empty {
  background: #111419 !important;
  border-color: #303844 !important;
  color: var(--text-2) !important;
}

body.staff-mode .laser-session-slot.is-empty:hover {
  background: #151b23 !important;
  border-color: #4a5665 !important;
}

body.staff-mode .laser-session-slot.has-session {
  background: #151a22 !important;
  border-color: #323b47 !important;
}

body.staff-mode .laser-session-slot.has-session.has-direct {
  border-left-color: var(--accent) !important;
}

body.staff-mode .laser-session-slot.has-session.has-formula {
  background: #1c1710 !important;
  border-left-color: var(--amber) !important;
}

body.staff-mode .laser-session-slot.has-session.is-shared {
  box-shadow: inset 0 0 0 1px rgba(116,178,138,.18) !important;
}

body.staff-mode .laser-session-kind {
  background: #222832 !important;
  border-color: #343c48 !important;
  color: #d5dae2 !important;
}

body.staff-mode .laser-group-card {
  background: #1b212a !important;
  border-color: #343d49 !important;
  color: var(--text) !important;
}

body.staff-mode .laser-group-card:hover {
  background: #202834 !important;
  border-color: #4b5969 !important;
}

body.staff-mode .laser-group-card.formula {
  background: #2a2113 !important;
  border-color: #6d592c !important;
}

body.staff-mode .laser-group-card.paid {
  background: #17261e !important;
  border-color: #3d6f50 !important;
}

body.staff-mode .laser-group-card.arrived {
  background: #292313 !important;
  border-color: #6d592c !important;
}

body.staff-mode .laser-group-count {
  background: #101318 !important;
  border-color: #3b4350 !important;
}

body.staff-mode .laser-capacity-line {
  background: #101318 !important;
  border-color: #333b47 !important;
}

body.staff-mode .laser-capacity-fill {
  background: #263443 !important;
}

body.staff-mode .laser-meter-segment {
  background: var(--accent) !important;
  border-right-color: rgba(13,15,18,.64) !important;
}

body.staff-mode .laser-meter-segment.formula {
  background: var(--amber) !important;
}

body.staff-mode .laser-pass-queue {
  background: #0a0d12 !important;
  border-color: var(--border) !important;
}

body.staff-mode .laser-pass-queue-copy strong,
body.staff-mode .laser-pass-name {
  color: var(--text) !important;
}

body.staff-mode .laser-pass-queue-copy span,
body.staff-mode .laser-pass-origin {
  color: var(--text-3) !important;
}

body.staff-mode .laser-pass-card {
  background: #11161d !important;
  border-color: #2d3744 !important;
  color: var(--text) !important;
}

body.staff-mode .laser-pass-card:hover {
  background: #151c25 !important;
  border-color: #4a5a6d !important;
}

body.staff-mode .laser-pass-meta {
  color: var(--accent-strong) !important;
}

body.staff-mode .laser-session-slot.is-drop-target {
  background: #172335 !important;
  border-color: var(--accent-strong) !important;
  box-shadow: inset 0 0 0 1px rgba(186,208,236,.24) !important;
}

body.staff-mode .empty-state {
  background: #111419 !important;
  border-color: var(--border) !important;
}

body.admin-mode .admin-date-nav input,
body.admin-mode .admin-date-nav input:focus {
  background: #101318 !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  outline-color: rgba(127, 159, 201, .24) !important;
  box-shadow: none !important;
}

body.staff-mode .kpi.accent,
body.staff-mode.staff-light .kpi.accent,
body.staff-mode .kpi .tag-ok,
body.staff-mode.staff-light .kpi .tag-ok {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
  box-shadow: none !important;
}

body.staff-mode ::selection,
body.admin-mode ::selection {
  background: rgba(127, 159, 201, .36);
  color: #ffffff;
}

/* Dark polish pass: deeper surfaces and reliable form states in every staff/admin overlay. */
body.staff-mode,
body.staff-mode.staff-light,
body.admin-mode {
  --bg: #050607;
  --bg-2: #080a0d;
  --bg-3: #0b0e13;
  --card: #0d1015;
  --card-2: #10141a;
  --card-3: #141922;
  --border: #202732;
  --border-hover: #313b49;
  --text: #f4f6f9;
  --text-2: #a7afbb;
  --text-3: #747e8c;
  --accent: #86a6d2;
  --accent-strong: #bad0ec;
  background: var(--bg) !important;
  color: var(--text) !important;
}

body.staff-mode main,
body.admin-mode main,
body.staff-mode.staff-light main {
  background: var(--bg) !important;
}

body.staff-mode header,
body.admin-mode header,
body.staff-mode.staff-light header {
  background: #050607 !important;
  border-bottom-color: #1c222c !important;
}

body.staff-mode .view-switch,
body.admin-mode .view-switch,
body.staff-mode .date-nav,
body.admin-mode .admin-date-nav,
body.admin-mode .admin-tabs,
body.admin-mode .admin-period-tabs,
body.staff-mode .staff-theme-switch,
body.staff-mode .tabs,
body.staff-mode .modal-tabs {
  background: #080b0f !important;
  border-color: var(--border) !important;
}

body.staff-mode .view-switch button.active,
body.admin-mode .view-switch button.active,
body.admin-mode .admin-tabs button.active,
body.admin-mode .admin-period-tabs button.active,
body.staff-mode .staff-theme-btn.active,
body.staff-mode.staff-light .staff-theme-btn.active,
body.staff-mode .tab.active,
body.staff-mode .modal-tabs .tab.active,
body.staff-mode .tab.active.purple,
body.staff-mode .status-chip.active,
body.staff-mode .status-chip.active.open,
body.staff-mode .status-chip.active.pending,
body.staff-mode .status-chip.active.arrived,
body.staff-mode .status-chip.active.paid,
body.staff-mode .resource-toggle.active,
body.staff-mode .staff-filter.active,
body.staff-mode .pay-btn.active {
  background: #18212c !important;
  border: 1px solid #3a4a60 !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body.staff-mode .view-switch button:hover,
body.admin-mode .view-switch button:hover,
body.staff-mode .date-nav button:hover,
body.admin-mode .admin-date-nav button:hover,
body.admin-mode .admin-tabs button:hover,
body.admin-mode .admin-period-tabs button:hover,
body.staff-mode .tab:hover,
body.staff-mode .modal-tabs .tab:hover {
  background: #111721 !important;
  color: var(--text) !important;
}

body.staff-mode .kpi,
body.admin-mode .admin-kpi,
body.admin-mode .admin-small-card,
body.admin-mode .admin-resource-card,
body.admin-mode .admin-insight,
body.staff-mode .ops-stat,
body.staff-mode .qb-snapshot,
body.staff-mode .qb-meta-card,
body.staff-mode .staff-resource-tab,
body.admin-mode .admin-center-card,
body.staff-mode .planning-box,
body.staff-mode .table-box,
body.staff-mode .ops-admin-box,
body.admin-mode .admin-panel,
body.staff-mode .res-section,
body.staff-mode .res-section.workflow,
body.staff-mode .edit-summary-card,
body.staff-mode .edit-summary-stat,
body.staff-mode .edit-form .info-block.soft,
body.staff-mode .info-block,
body.staff-mode .receipt,
body.staff-mode .qb-block,
body.staff-mode .pos-panel,
body.staff-mode .qb-modal,
body.staff-mode .edit-modal,
body.staff-mode.staff-light .pos-panel,
body.staff-mode.staff-light .qb-modal,
body.staff-mode.staff-light .edit-modal {
  background: var(--card) !important;
  border-color: var(--border) !important;
}

body.staff-mode .planning-head,
body.staff-mode .table-head,
body.staff-mode .ops-admin-head,
body.admin-mode .admin-section-title,
body.staff-mode .pos-head,
body.staff-mode .qb-head,
body.staff-mode .edit-modal-head,
body.staff-mode.staff-light .pos-head,
body.staff-mode.staff-light .qb-head,
body.staff-mode.staff-light .edit-modal-head {
  background: #0a0d12 !important;
  border-color: var(--border) !important;
}

body.staff-mode .planning-grid-wrap,
body.staff-mode .laser-grid-wrap,
body.staff-mode .hour-col,
body.staff-mode .lane-col,
body.staff-mode .lane-header,
body.staff-mode .hour-header,
body.staff-mode .slot-cell,
body.staff-mode.staff-light .planning-grid-wrap,
body.staff-mode.staff-light .laser-grid-wrap,
body.staff-mode.staff-light .hour-col,
body.staff-mode.staff-light .lane-col,
body.staff-mode.staff-light .lane-header,
body.staff-mode.staff-light .hour-header,
body.staff-mode.staff-light .slot-cell,
body.staff-mode .laser-agenda,
body.staff-mode .laser-agenda-row {
  background: #07090c !important;
}

body.staff-mode .laser-agenda-header,
body.staff-mode .laser-agenda-row.is-half,
body.staff-mode .laser-session-slot.is-empty {
  background: #0a0d12 !important;
}

body.staff-mode .res-list,
body.staff-mode .res-row,
body.staff-mode.staff-light .res-row {
  background: #0d1015 !important;
}

body.staff-mode .res-row:hover,
body.staff-mode .kpi:hover,
body.staff-mode .staff-resource-tab:hover,
body.admin-mode .admin-center-card:hover {
  background: #11161e !important;
}

body.staff-mode .res-row-time,
body.staff-mode .edit-inline-note,
body.staff-mode .receipt,
body.staff-mode .qb-summary,
body.staff-mode.staff-light .receipt,
body.staff-mode.staff-light .qb-summary {
  background: #080b0f !important;
  border-color: var(--border) !important;
}

body.staff-mode .edit-modal,
body.staff-mode.staff-light .edit-modal {
  width: min(690px, 100%) !important;
  background: #090c10 !important;
  border-color: #202732 !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.48) !important;
}

body.staff-mode .edit-modal-body {
  background: #090c10 !important;
}

body.staff-mode .edit-summary-card,
body.staff-mode .edit-summary-stat,
body.staff-mode .edit-form .info-block.soft {
  background: #0d1117 !important;
  border-color: #232b36 !important;
}

body.staff-mode .edit-form .input,
body.staff-mode .edit-form input.input,
body.staff-mode .edit-form select.input,
body.staff-mode .edit-form textarea.input,
body.staff-mode .qb-input,
body.staff-mode .auth-input,
body.staff-mode .search-wrap input,
body.staff-mode input,
body.staff-mode select,
body.staff-mode textarea,
body.admin-mode input,
body.admin-mode select,
body.admin-mode textarea,
body.admin-mode .admin-date-nav input {
  appearance: auto;
  background-color: #070a0e !important;
  background-image: none !important;
  border: 1px solid #252d38 !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  color-scheme: dark !important;
  box-shadow: none !important;
}

body.staff-mode .edit-form .input:hover,
body.staff-mode .edit-form input.input:hover,
body.staff-mode .edit-form select.input:hover,
body.staff-mode .qb-input:hover,
body.staff-mode .auth-input:hover,
body.staff-mode .search-wrap input:hover,
body.staff-mode input:hover,
body.staff-mode select:hover,
body.staff-mode textarea:hover,
body.admin-mode input:hover,
body.admin-mode select:hover,
body.admin-mode textarea:hover {
  background-color: #0a0e13 !important;
  border-color: #333d4a !important;
}

body.staff-mode .edit-form .input:focus,
body.staff-mode .edit-form input.input:focus,
body.staff-mode .edit-form select.input:focus,
body.staff-mode .edit-form textarea.input:focus,
body.staff-mode .qb-input:focus,
body.staff-mode .auth-input:focus,
body.staff-mode .search-wrap input:focus,
body.staff-mode input:focus,
body.staff-mode select:focus,
body.staff-mode textarea:focus,
body.admin-mode input:focus,
body.admin-mode select:focus,
body.admin-mode textarea:focus,
body.admin-mode .admin-date-nav input:focus {
  background-color: #0b1118 !important;
  border-color: #6f8fb5 !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  outline: 2px solid rgba(134,166,210,.26) !important;
  outline-offset: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(134,166,210,.12) !important;
}

body.staff-mode select.input option,
body.staff-mode select option,
body.admin-mode select option {
  background: #080b0f !important;
  color: var(--text) !important;
}

body.staff-mode input:-webkit-autofill,
body.staff-mode input:-webkit-autofill:hover,
body.staff-mode input:-webkit-autofill:focus,
body.admin-mode input:-webkit-autofill,
body.admin-mode input:-webkit-autofill:hover,
body.admin-mode input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #070a0e inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  border-color: #252d38 !important;
}

body.staff-mode input[type="number"]::-webkit-inner-spin-button,
body.staff-mode input[type="number"]::-webkit-outer-spin-button,
body.admin-mode input[type="number"]::-webkit-inner-spin-button,
body.admin-mode input[type="number"]::-webkit-outer-spin-button {
  opacity: .6;
  filter: invert(1) brightness(1.25);
}

body.staff-mode input[type="date"]::-webkit-calendar-picker-indicator,
body.staff-mode input[type="time"]::-webkit-calendar-picker-indicator,
body.admin-mode input[type="date"]::-webkit-calendar-picker-indicator,
body.admin-mode input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: .78;
  filter: invert(1) brightness(1.35);
}

body.staff-mode .btn-secondary.warn {
  background: #17130b !important;
  border-color: #3b321f !important;
  color: #e3c885 !important;
}

body.staff-mode .btn-secondary.danger {
  background: #180f0f !important;
  border-color: #432523 !important;
  color: #e7aaa4 !important;
}

body.staff-mode .btn-new,
body.admin-mode .admin-btn.primary,
body.staff-mode .ops-admin-btn,
body.staff-mode .qb-btn-save,
body.staff-mode .flow-btn.teal,
body.staff-mode .edit-actions .btn-primary,
body.staff-mode .btn-primary {
  background: #e8edf4 !important;
  border-color: #e8edf4 !important;
  color: #050607 !important;
  -webkit-text-fill-color: #050607 !important;
}

body.staff-mode .empty-state {
  background: #080b0f !important;
  border-color: var(--border) !important;
}

/* Staff quick booking contrast fix: keep dark mode readable in every modal state. */
body.staff-mode .qb-slot-chip,
body.staff-mode.staff-light .qb-slot-chip {
  background: #11161d !important;
  border: 1px solid #27313d !important;
  color: #eef3f8 !important;
  box-shadow: none !important;
}

body.staff-mode .qb-slot-chip:hover,
body.staff-mode.staff-light .qb-slot-chip:hover {
  background: #151c25 !important;
  border-color: #3a4655 !important;
}

body.staff-mode .qb-slot-chip.active,
body.staff-mode.staff-light .qb-slot-chip.active {
  background: #172335 !important;
  border-color: #9bb7d8 !important;
  box-shadow: inset 0 0 0 1px rgba(155,183,216,.18) !important;
}

body.staff-mode .qb-slot-chip .time,
body.staff-mode.staff-light .qb-slot-chip .time,
body.staff-mode .qb-slot-chip.active .time,
body.staff-mode.staff-light .qb-slot-chip.active .time {
  color: #f6f8fb !important;
  -webkit-text-fill-color: #f6f8fb !important;
}

body.staff-mode .qb-slot-chip .sub,
body.staff-mode.staff-light .qb-slot-chip .sub {
  color: #aab6c5 !important;
  -webkit-text-fill-color: #aab6c5 !important;
}

body.staff-mode .qb-slot-chip .lanes,
body.staff-mode.staff-light .qb-slot-chip .lanes {
  color: #c1cad6 !important;
  -webkit-text-fill-color: #c1cad6 !important;
}

body.staff-mode .qb-lane-focus,
body.staff-mode.staff-light .qb-lane-focus {
  background: #10151c !important;
  border-color: #27313d !important;
  color: #eef3f8 !important;
}

body.staff-mode .qb-lane-focus-title,
body.staff-mode.staff-light .qb-lane-focus-title {
  color: #f6f8fb !important;
  -webkit-text-fill-color: #f6f8fb !important;
}

body.staff-mode .qb-lane-focus-sub,
body.staff-mode.staff-light .qb-lane-focus-sub {
  color: #aab6c5 !important;
  -webkit-text-fill-color: #aab6c5 !important;
}

body.staff-mode .qb-ghost-btn,
body.staff-mode.staff-light .qb-ghost-btn {
  background: #0c1117 !important;
  border-color: #303a47 !important;
  color: #d9e0e8 !important;
  -webkit-text-fill-color: #d9e0e8 !important;
}

body.staff-mode .qb-ghost-btn:hover,
body.staff-mode.staff-light .qb-ghost-btn:hover {
  background: #151c25 !important;
  border-color: #4a5a6d !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.staff-mode .qb-warn,
body.staff-mode.staff-light .qb-warn {
  background: #1a1306 !important;
  border-color: #4b3510 !important;
  color: #f4c76f !important;
  -webkit-text-fill-color: #f4c76f !important;
}

body.staff-mode .qb-warn.danger,
body.staff-mode.staff-light .qb-warn.danger {
  background: #1b0e0e !important;
  border-color: #62302c !important;
  color: #ffb4aa !important;
  -webkit-text-fill-color: #ffb4aa !important;
}

/* Direction/staff dark contrast guard: no white data tables in dark mode. */
body.admin-mode .admin-table-wrap {
  background: #070a0f !important;
  border-color: #202a36 !important;
}

body.admin-mode .admin-table {
  background: #070a0f !important;
}

body.admin-mode .admin-table th {
  background: #0b1017 !important;
  color: #91a1b5 !important;
  border-color: #202a36 !important;
}

body.admin-mode .admin-table td {
  background: #070a0f !important;
  color: #c6d2e1 !important;
  border-color: #202a36 !important;
  -webkit-text-fill-color: #c6d2e1 !important;
}

body.admin-mode .admin-table tr:nth-child(even) td {
  background: #0a0f15 !important;
}

body.admin-mode .admin-table strong {
  color: #f6f8fb !important;
  -webkit-text-fill-color: #f6f8fb !important;
}

body.admin-mode .admin-plan-cell {
  display: grid;
  gap: 5px;
  min-width: 220px;
}

body.admin-mode .admin-plan-main {
  color: #d5deea !important;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}

body.admin-mode .admin-plan-sub {
  color: #91a1b5 !important;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 650;
}

body.admin-mode .admin-market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

body.admin-mode .admin-market-card {
  border: 1px solid #202a36;
  border-radius: 12px;
  background: #070a0f;
  padding: 13px 14px;
}

body.admin-mode .admin-market-card .k {
  color: #91a1b5;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .12em;
}

body.admin-mode .admin-market-card .v {
  margin-top: 8px;
  color: #f6f8fb;
  font-size: 18px;
  font-weight: 900;
}

body.admin-mode .admin-market-card .s {
  margin-top: 4px;
  color: #9fb0c5;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 650;
}

body.admin-mode .admin-pill,
body.staff-mode:not(.staff-light) .ops-pill {
  -webkit-text-fill-color: currentColor !important;
}

body.staff-mode:not(.staff-light) .ops-row {
  background: #070a0f !important;
  border-color: #202a36 !important;
  color: #d6dfeb !important;
}

body.staff-mode:not(.staff-light) .ops-row .title {
  color: #f6f8fb !important;
  -webkit-text-fill-color: #f6f8fb !important;
}

body.staff-mode:not(.staff-light) .ops-row .meta,
body.staff-mode:not(.staff-light) .ops-row > div,
body.staff-mode:not(.staff-light) .ops-row span:not(.ops-pill) {
  color: #aab7c8 !important;
  -webkit-text-fill-color: #aab7c8 !important;
}

body.staff-mode:not(.staff-light) .ops-error {
  color: #f08d86 !important;
  -webkit-text-fill-color: #f08d86 !important;
}

body.admin-mode .admin-export-card {
  background: #070a0f !important;
  border-color: #202a36 !important;
  color: #d6dfeb !important;
  box-shadow: none !important;
}

body.admin-mode .admin-export-card h3 {
  color: #f6f8fb !important;
  -webkit-text-fill-color: #f6f8fb !important;
}

body.admin-mode .admin-export-card p,
body.admin-mode .admin-export-card div {
  color: #aab7c8 !important;
  -webkit-text-fill-color: #aab7c8 !important;
}

body.admin-mode .admin-export-card .admin-btn {
  background: #111821 !important;
  border-color: #2a3543 !important;
  color: #f6f8fb !important;
  -webkit-text-fill-color: #f6f8fb !important;
}

body.admin-mode .admin-export-card .admin-btn.primary {
  background: #e8edf4 !important;
  border-color: #e8edf4 !important;
  color: #050607 !important;
  -webkit-text-fill-color: #050607 !important;
}

body.admin-mode .admin-export-card .admin-btn:hover {
  border-color: #52657d !important;
  transform: none !important;
}

body.staff-mode.staff-light .bowling-drop-preview {
  background: rgba(31,79,130,0.1);
  border-color: #6284ad;
  color: #142033;
  box-shadow: none;
}

body.staff-mode.staff-light .bowling-drop-preview span {
  color: #52657d;
}

body.staff-mode.staff-light .bowling-drop-preview.invalid {
  background: #fff1ef;
  border-color: #d55c55;
  color: #7b201b;
}

body.staff-mode .laser-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

body.staff-mode .laser-card-pill {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 5px;
  border: 1px solid #344252;
  background: #111821;
  color: #d6dfeb;
  font-size: 9px;
  font-weight: 760;
  line-height: 1;
}

body.staff-mode .laser-card-pill.formula {
  background: #332817;
  border-color: #7b6130;
  color: #efd58b;
}

body.staff-mode .laser-card-pill.pass {
  background: #162232;
  border-color: #3e5e86;
  color: #bdd8fa;
}

body.staff-mode .laser-card-pill.fallback {
  background: #231f1a;
  border-color: #5b5145;
  color: #d7c7ae;
}

body.staff-mode .laser-group-card.formula,
body.staff-mode .laser-session-slot.has-session.has-formula {
  background: #17130c !important;
  border-color: #665128 !important;
  border-left-color: #c59a3d !important;
}

body.staff-mode .laser-group-card.formula .laser-group-main strong,
body.staff-mode .laser-group-card.formula .laser-group-main small {
  color: #f7ead0 !important;
  -webkit-text-fill-color: #f7ead0 !important;
}

body.staff-mode .booking.is-formula,
body.staff-mode .booking.is-formula.conf,
body.staff-mode .booking.is-formula.arr,
body.staff-mode .booking.is-formula.paid,
body.staff-mode .booking.is-formula.is-laser-multi,
body.staff-mode.staff-light .booking.is-formula,
body.staff-mode.staff-light .booking.is-formula.conf,
body.staff-mode.staff-light .booking.is-formula.arr,
body.staff-mode.staff-light .booking.is-formula.paid,
body.staff-mode.staff-light .booking.is-formula.is-laser-multi {
  background: #1c1710 !important;
  border-color: #6d592c !important;
  border-left: 5px solid #c59a3d !important;
}

body.staff-mode .res-row.is-formula,
body.staff-mode .res-row.is-formula.arrived,
body.staff-mode .res-row.is-formula.paid,
body.staff-mode .res-row.is-formula.is-laser-multi {
  background: #16120d !important;
  border-left-color: #c59a3d !important;
}

/* Client booking refresh inspired by fungalaxy.be. Staff/admin selectors are untouched. */
body.client-mode {
  --fg-purple: rgb(148, 66, 146);
  --fg-purple-deep: rgb(108, 43, 107);
  --fg-teal: rgb(103, 186, 172);
  --fg-black: #000000;
  --fg-panel: #11141b;
  --fg-panel-2: #1d2430;
  --fg-line: rgba(255, 255, 255, 0.14);
  --fg-text: #ffffff;
  --fg-muted: rgba(255, 255, 255, 0.68);
  --fg-soft: rgba(255, 255, 255, 0.1);
  --fg-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  background: var(--fg-black) !important;
  color: var(--fg-text) !important;
}

body.client-mode main,
body.client-mode #clientView {
  min-height: 100vh;
  background:
    radial-gradient(circle at 13% 18%, rgba(103, 186, 172, 0.16), transparent 24rem),
    radial-gradient(circle at 90% 8%, rgba(148, 66, 146, 0.22), transparent 26rem),
    linear-gradient(180deg, #000000 0%, #050506 52%, #000000 100%) !important;
  color: var(--fg-text) !important;
  font-family: "Montserrat", Arial, sans-serif !important;
}

body.client-mode #clientView {
  position: relative;
  overflow: hidden;
}

body.client-mode #clientView::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 50%;
  z-index: 0;
  width: 180px;
  height: 84px;
  transform: translateX(-50%);
  background: url("https://fungalaxy.be/wp-content/themes/fungalaxy/img/logo-fun-galaxy.svg") center / contain no-repeat;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.42));
  opacity: 0.98;
  pointer-events: none;
}

body.client-mode .client-wrap {
  position: relative;
  z-index: 1;
  max-width: 1100px !important;
  padding: 126px 18px 42px !important;
}

body.client-mode .hero-title,
body.client-mode .progress {
  display: none !important;
}

body.client-mode .step {
  background: rgba(8, 9, 12, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 25px !important;
  box-shadow:
    rgba(46, 59, 125, 0.23) 0 0 20px 0,
    0 26px 70px rgba(0, 0, 0, 0.58) !important;
  color: var(--fg-text) !important;
  backdrop-filter: blur(12px);
}

body.client-mode #step1.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  padding: 20px !important;
}

body.client-mode #step1 > #bowlingBlock,
body.client-mode #step1 > #laserBlock,
body.client-mode #step1 > #formuleBlock,
body.client-mode #step1 > #btnStep1 {
  grid-column: 1 / -1;
}

body.client-mode .card {
  position: relative;
  overflow: hidden;
  padding: 20px !important;
  border-radius: 25px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    var(--fg-panel) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.28) !important;
  color: var(--fg-text) !important;
}

body.client-mode .card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(103, 186, 172, 0.13), transparent 42%),
    linear-gradient(315deg, rgba(148, 66, 146, 0.14), transparent 48%);
  opacity: 0.72;
  pointer-events: none;
}

body.client-mode .card > * {
  position: relative;
  z-index: 1;
}

body.client-mode #step1 > .card:nth-of-type(2)::before,
body.client-mode #formuleBlock::before {
  background:
    radial-gradient(circle at 86% 8%, rgba(148, 66, 146, 0.28), transparent 34%),
    linear-gradient(180deg, rgba(1, 1, 1, 0.06), rgba(1, 1, 1, 0.34));
}

body.client-mode #bowlingBlock::before,
body.client-mode #laserBlock::before {
  background:
    radial-gradient(circle at 10% 0%, rgba(103, 186, 172, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(1, 1, 1, 0.08), rgba(1, 1, 1, 0.38));
}

body.client-mode .card-head {
  align-items: center;
  gap: 14px !important;
  margin-bottom: 18px !important;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

body.client-mode .card-title,
body.client-mode .formule-title,
body.client-mode .dur-label,
body.client-mode .slot-time,
body.client-mode .summary-title {
  color: #ffffff !important;
  font-family: "FG Gotham Rounded Bold", "Bricolage Grotesque", "Montserrat", sans-serif !important;
  letter-spacing: -0.01em !important;
  -webkit-text-fill-color: currentColor !important;
}

body.client-mode .card-title {
  font-size: clamp(1.28rem, 2.4vw, 1.72rem) !important;
  line-height: 0.98 !important;
}

body.client-mode .card-desc,
body.client-mode .formule-desc,
body.client-mode .slot-sub,
body.client-mode .summary-label,
body.client-mode .helper-text,
body.client-mode .laser-note {
  color: var(--fg-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.client-mode .card-icon,
body.client-mode .section-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border: 2px solid #000000 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: #030303 !important;
  box-shadow: -1px 1px 3px rgba(103, 186, 172, 1) !important;
}

body.client-mode #step1 > .card:nth-of-type(2) .card-icon,
body.client-mode #bowlingBlock .card-icon,
body.client-mode #laserBlock .card-icon,
body.client-mode #formuleBlock .card-icon {
  background: var(--fg-purple) !important;
  color: #ffffff !important;
}

body.client-mode label,
body.client-mode .lbl {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  -webkit-text-fill-color: currentColor !important;
}

body.client-mode .grid-2,
body.client-mode .grid-3,
body.client-mode .grid-4 {
  gap: 14px !important;
}

body.client-mode .input,
body.client-mode select.input,
body.client-mode textarea.input {
  min-height: 52px !important;
  border: 2px solid #000000 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #050505 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 800 !important;
  box-shadow: -1px 1px 3px rgba(103, 186, 172, 1) !important;
  -webkit-text-fill-color: #050505 !important;
}

body.client-mode textarea.input {
  border-radius: 22px !important;
}

body.client-mode .input::placeholder {
  color: rgba(5, 5, 5, 0.42) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.42) !important;
}

body.client-mode .input:hover,
body.client-mode .input:focus,
body.client-mode select.input:hover,
body.client-mode select.input:focus,
body.client-mode textarea.input:hover,
body.client-mode textarea.input:focus {
  transform: none !important;
  border-color: #000000 !important;
  outline: none !important;
  box-shadow:
    -2px 2px 0 rgba(103, 186, 172, 0.95),
    0 0 0 4px rgba(148, 66, 146, 0.18) !important;
}

body.client-mode input[type="date"].input::-webkit-calendar-picker-indicator {
  opacity: 0 !important;
  cursor: pointer;
}

body.client-mode .date-picker-trigger {
  background: var(--fg-panel-2) !important;
  border: 2px solid #000000 !important;
  color: #ffffff !important;
  box-shadow: -1px 1px 3px rgba(103, 186, 172, 1) !important;
}

body.client-mode .date-picker-trigger:hover {
  background: var(--fg-purple) !important;
  color: #ffffff !important;
}

body.client-mode #fPax.input {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.client-mode .schedule-hint .open,
body.client-mode .badge,
body.client-mode .pill,
body.client-mode .formule-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px !important;
  border: 1px solid rgba(103, 186, 172, 0.42) !important;
  background: rgba(103, 186, 172, 0.14) !important;
  color: #cafff7 !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.client-mode .pax-alert,
body.client-mode #paxAlert > div {
  border-radius: 22px !important;
  border: 1px solid rgba(148, 66, 146, 0.28) !important;
  background: #fff2fb !important;
  color: var(--fg-purple) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  box-shadow: -1px 1px 3px rgba(103, 186, 172, 0.72) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.client-mode .segmented {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 2px solid #000000 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: -1px 1px 3px rgba(103, 186, 172, 1) !important;
}

body.client-mode .seg-btn {
  min-height: 52px !important;
  border: 0 !important;
  border-right: 2px solid #000000 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #050505 !important;
  box-shadow: none !important;
  font-family: "FG Gotham Rounded Bold", "Montserrat", sans-serif !important;
  font-weight: 800 !important;
  transform: none !important;
  -webkit-text-fill-color: currentColor !important;
}

body.client-mode .seg-btn:last-child {
  border-right: 0 !important;
}

body.client-mode .seg-btn:hover {
  background: #f3f3f3 !important;
  color: #050505 !important;
  transform: none !important;
  box-shadow: none !important;
}

body.client-mode .seg-btn.active {
  background: var(--fg-purple) !important;
  color: #ffffff !important;
}

body.client-mode .btn-primary,
body.client-mode .btn-secondary {
  min-height: 56px !important;
  border: 2px solid #000000 !important;
  border-radius: 999px !important;
  font-family: "FG Gotham Rounded Bold", "Montserrat", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow: -1px 1px 3px rgba(103, 186, 172, 1) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.client-mode .btn-primary {
  background: #ffffff !important;
  color: #050505 !important;
}

body.client-mode .btn-primary:hover:not(:disabled) {
  background: #f4f4f4 !important;
  color: #050505 !important;
  transform: translateY(-1px) !important;
  box-shadow: -3px 3px 0 rgba(103, 186, 172, 1) !important;
}

body.client-mode .btn-secondary {
  background: var(--fg-purple) !important;
  color: #ffffff !important;
}

body.client-mode .btn-secondary:hover:not(:disabled) {
  background: var(--fg-purple-deep) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

body.client-mode .dur-grid,
body.client-mode .laser-option-grid,
body.client-mode .slot-grid {
  gap: 14px !important;
}

body.client-mode .dur-pill,
body.client-mode .laser-option,
body.client-mode .slot {
  min-height: 78px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.17) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.client-mode .dur-pill:hover,
body.client-mode .laser-option:hover,
body.client-mode .slot:hover {
  border-color: rgba(103, 186, 172, 0.72) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px) !important;
}

body.client-mode .dur-pill.active,
body.client-mode .laser-option.active,
body.client-mode .slot.selected,
body.client-mode .slot.active {
  border: 2px solid #000000 !important;
  background: #ffffff !important;
  color: #050505 !important;
  box-shadow: -1px 1px 3px rgba(103, 186, 172, 1) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.client-mode .dur-pill.active .dur-label,
body.client-mode .laser-option.active .dur-label,
body.client-mode .slot.selected .slot-time,
body.client-mode .slot.active .slot-time {
  color: #050505 !important;
}

body.client-mode .dur-pill .price,
body.client-mode .laser-option .price,
body.client-mode .slot-price {
  color: var(--fg-teal) !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  -webkit-text-fill-color: currentColor !important;
}

body.client-mode .dur-pill.active .price,
body.client-mode .laser-option.active .price,
body.client-mode .slot.selected .slot-price,
body.client-mode .slot.active .slot-price {
  color: var(--fg-purple) !important;
}

body.client-mode .formule-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 14px !important;
}

body.client-mode .formule-card {
  min-height: 220px !important;
  border-radius: 25px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.46)),
    rgba(255, 255, 255, 0.075) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body.client-mode .formule-card::before {
  background:
    radial-gradient(circle at 100% 0%, rgba(148, 66, 146, 0.22), transparent 36%),
    linear-gradient(180deg, rgba(1, 1, 1, 0.04), rgba(1, 1, 1, 0.38)) !important;
}

body.client-mode .formule-card:hover:not(.disabled) {
  border-color: rgba(103, 186, 172, 0.7) !important;
  transform: translateY(-3px) !important;
}

body.client-mode .formule-card.active {
  border: 2px solid #000000 !important;
  background:
    linear-gradient(180deg, rgba(148, 66, 146, 0.96), rgba(108, 43, 107, 0.96)) !important;
  color: #ffffff !important;
  box-shadow:
    -1px 1px 3px rgba(103, 186, 172, 1),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

body.client-mode .formule-card.disabled {
  opacity: 0.68 !important;
  filter: grayscale(0.2);
}

body.client-mode #clientDemoAccess {
  border: 2px solid #000000 !important;
  border-radius: 14px !important;
  background: #11141b !important;
  color: #ffffff !important;
  box-shadow: -1px 1px 3px rgba(103, 186, 172, 0.78) !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.client-mode .formula-preferences,
body.client-mode .info-box,
body.client-mode .time-info,
body.client-mode .allocation-box,
body.client-mode .summary-panel,
body.client-mode .booking-summary,
body.client-mode .total-box,
body.client-mode .success-box,
body.client-mode .confetti-hint {
  border-radius: 25px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.client-mode .preference-grid button,
body.client-mode .preference-option {
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: currentColor !important;
}

body.client-mode .preference-grid button.active,
body.client-mode .preference-option.active {
  border: 2px solid #000000 !important;
  background: #ffffff !important;
  color: #050505 !important;
  box-shadow: -1px 1px 3px rgba(103, 186, 172, 1) !important;
}

body.client-mode .total-box {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  color: #050505 !important;
  box-shadow: -1px 1px 3px rgba(103, 186, 172, 1) !important;
}

body.client-mode .total-box * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

body.client-mode .total-amount,
body.client-mode #recapTotal {
  color: var(--fg-purple) !important;
  font-family: "FG Gotham Rounded Bold", "Montserrat", sans-serif !important;
  -webkit-text-fill-color: currentColor !important;
}

body.client-mode .success-icon {
  background: var(--fg-purple) !important;
  border: 2px solid #000000 !important;
  color: #ffffff !important;
  box-shadow: -1px 1px 3px rgba(103, 186, 172, 1) !important;
}

body.client-mode #step3 .contact-grid .input,
body.client-mode #step4 .input {
  background: #ffffff !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
}

body.client-mode #alertBox .alert,
body.client-mode .alert,
body.client-mode .notice,
body.client-mode .laser-note {
  border-radius: 18px !important;
  border: 1px solid rgba(103, 186, 172, 0.3) !important;
  background: rgba(103, 186, 172, 0.1) !important;
  color: #d9fffa !important;
  -webkit-text-fill-color: currentColor !important;
}

body.client-mode .loading,
body.client-mode .empty-state {
  color: rgba(255, 255, 255, 0.74) !important;
  -webkit-text-fill-color: currentColor !important;
}

@media (max-width: 820px) {
  body.client-mode #clientDemoAccess {
    display: none !important;
  }

  body.client-mode #clientView::before {
    top: 18px;
    width: 148px;
    height: 68px;
  }

  body.client-mode .client-wrap {
    padding: 104px 12px 30px !important;
  }

  body.client-mode #step1.step {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px !important;
  }

  body.client-mode .card {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  body.client-mode .segmented {
    grid-template-columns: 1fr !important;
    border-radius: 24px !important;
  }

  body.client-mode .seg-btn {
    border-right: 0 !important;
    border-bottom: 2px solid #000000 !important;
  }

  body.client-mode .seg-btn:last-child {
    border-bottom: 0 !important;
  }

  body.client-mode .formule-grid {
    grid-template-columns: 1fr !important;
  }

  body.client-mode .formule-card {
    min-height: 168px !important;
  }
}

/* Client maturity pass: closer to fungalaxy.be, less playful, more brand-led. */
body.client-mode {
  --fg-page: #020202;
  --fg-shell: rgba(7, 8, 10, 0.86);
  --fg-surface: rgba(19, 21, 27, 0.9);
  --fg-surface-2: rgba(27, 30, 39, 0.92);
  --fg-hairline: rgba(255, 255, 255, 0.11);
  --fg-hairline-2: rgba(255, 255, 255, 0.18);
  --fg-text-soft: rgba(255, 255, 255, 0.62);
  --fg-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  background: var(--fg-page) !important;
}

body.client-mode main,
body.client-mode #clientView {
  background:
    radial-gradient(circle at 8% 8%, rgba(103, 186, 172, 0.11), transparent 22rem),
    radial-gradient(circle at 92% 10%, rgba(148, 66, 146, 0.13), transparent 24rem),
    #020202 !important;
}

body.client-mode #clientView::before {
  top: 26px !important;
  left: max(24px, calc(50% - 540px)) !important;
  width: 150px !important;
  height: 70px !important;
  transform: none !important;
  opacity: 0.94 !important;
  filter: none !important;
}

body.client-mode .client-wrap {
  padding-top: 128px !important;
}

body.client-mode #step1.step,
body.client-mode .step {
  background: var(--fg-shell) !important;
  border-color: var(--fg-hairline) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.48) !important;
  backdrop-filter: blur(8px);
}

body.client-mode #step1.step {
  gap: 16px !important;
  padding: 18px !important;
}

body.client-mode .card {
  border-radius: 22px !important;
  background: var(--fg-surface) !important;
  border-color: var(--fg-hairline) !important;
  box-shadow: none !important;
}

body.client-mode .card::before {
  opacity: 0 !important;
}

body.client-mode #step1 > .card:nth-of-type(2),
body.client-mode #formuleBlock {
  background:
    linear-gradient(90deg, rgba(148, 66, 146, 0.1), transparent 38%),
    var(--fg-surface) !important;
}

body.client-mode #bowlingBlock,
body.client-mode #laserBlock {
  background:
    linear-gradient(90deg, rgba(103, 186, 172, 0.08), transparent 36%),
    var(--fg-surface) !important;
}

body.client-mode .card-head {
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding-bottom: 14px !important;
  border-bottom-color: var(--fg-hairline) !important;
}

body.client-mode .card-title {
  font-size: clamp(1.18rem, 2vw, 1.55rem) !important;
  letter-spacing: -0.02em !important;
}

body.client-mode .card-desc {
  font-size: 0.82rem !important;
  color: var(--fg-text-soft) !important;
}

body.client-mode .card-icon,
body.client-mode .section-icon,
body.client-mode #step1 > .card:nth-of-type(2) .card-icon,
body.client-mode #bowlingBlock .card-icon,
body.client-mode #laserBlock .card-icon,
body.client-mode #formuleBlock .card-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border: 1px solid var(--fg-hairline-2) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.client-mode #step1 > .card:nth-of-type(2) .card-icon,
body.client-mode #formuleBlock .card-icon {
  color: #dca7d9 !important;
}

body.client-mode #bowlingBlock .card-icon,
body.client-mode #laserBlock .card-icon {
  color: #aee7df !important;
}

body.client-mode label,
body.client-mode .lbl {
  color: rgba(255, 255, 255, 0.56) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.16em !important;
}

body.client-mode .input,
body.client-mode select.input,
body.client-mode textarea.input,
body.client-mode #fPax.input,
body.client-mode #step3 .contact-grid .input,
body.client-mode #step4 .input {
  min-height: 50px !important;
  border: 1px solid var(--fg-hairline-2) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.client-mode .input::placeholder {
  color: rgba(255, 255, 255, 0.36) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.36) !important;
}

body.client-mode .input:hover,
body.client-mode .input:focus,
body.client-mode select.input:hover,
body.client-mode select.input:focus,
body.client-mode textarea.input:hover,
body.client-mode textarea.input:focus {
  border-color: rgba(103, 186, 172, 0.56) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  box-shadow: 0 0 0 3px rgba(103, 186, 172, 0.1) !important;
}

body.client-mode .date-picker-trigger {
  right: 7px !important;
  width: 40px !important;
  height: 36px !important;
  border: 1px solid rgba(103, 186, 172, 0.35) !important;
  background: rgba(103, 186, 172, 0.12) !important;
  color: #d7fffa !important;
  box-shadow: none !important;
}

body.client-mode .date-picker-trigger:hover {
  background: rgba(103, 186, 172, 0.18) !important;
  border-color: rgba(103, 186, 172, 0.58) !important;
}

body.client-mode .schedule-hint .open,
body.client-mode .badge,
body.client-mode .pill,
body.client-mode .formule-badge {
  padding: 0.34rem 0.68rem !important;
  background: transparent !important;
  border-color: rgba(103, 186, 172, 0.34) !important;
  color: #b8eee6 !important;
}

body.client-mode .pax-alert,
body.client-mode #paxAlert > div {
  border-radius: 16px !important;
  background: rgba(148, 66, 146, 0.12) !important;
  border-color: rgba(148, 66, 146, 0.32) !important;
  color: #f0c6ec !important;
  box-shadow: none !important;
  font-size: 0.82rem !important;
}

body.client-mode .segmented {
  min-height: 52px !important;
  border: 1px solid var(--fg-hairline-2) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  box-shadow: none !important;
}

body.client-mode .seg-btn {
  min-height: 50px !important;
  border-right: 1px solid var(--fg-hairline) !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 0.86rem !important;
}

body.client-mode .seg-btn:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
}

body.client-mode .seg-btn.active {
  background: rgb(148, 66, 146) !important;
  color: #ffffff !important;
}

body.client-mode .btn-primary,
body.client-mode .btn-secondary {
  min-height: 54px !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  letter-spacing: 0.04em !important;
}

body.client-mode .btn-primary {
  border-color: #ffffff !important;
  background: #ffffff !important;
  color: #050505 !important;
}

body.client-mode .btn-primary:hover:not(:disabled) {
  background: #f1f1f1 !important;
  color: #050505 !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

body.client-mode .btn-secondary {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

body.client-mode .btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1) !important;
}

body.client-mode .dur-pill,
body.client-mode .laser-option,
body.client-mode .slot {
  min-height: 74px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid var(--fg-hairline) !important;
  box-shadow: none !important;
}

body.client-mode .dur-pill:hover,
body.client-mode .laser-option:hover,
body.client-mode .slot:hover {
  border-color: rgba(103, 186, 172, 0.42) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  transform: translateY(-1px) !important;
}

body.client-mode .dur-pill.active,
body.client-mode .laser-option.active,
body.client-mode .slot.selected,
body.client-mode .slot.active {
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  background: #ffffff !important;
  color: #050505 !important;
  box-shadow: none !important;
}

body.client-mode .dur-pill .price,
body.client-mode .laser-option .price,
body.client-mode .slot-price {
  color: #8adfd3 !important;
  letter-spacing: 0.04em !important;
}

body.client-mode .dur-pill.active .price,
body.client-mode .laser-option.active .price,
body.client-mode .slot.selected .slot-price,
body.client-mode .slot.active .slot-price {
  color: rgb(148, 66, 146) !important;
}

body.client-mode .formule-grid {
  gap: 12px !important;
}

body.client-mode .formule-card {
  min-height: 205px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: var(--fg-hairline) !important;
  box-shadow: none !important;
}

body.client-mode .formule-card::before {
  opacity: 0 !important;
}

body.client-mode .formule-card:hover:not(.disabled) {
  border-color: rgba(103, 186, 172, 0.44) !important;
  transform: translateY(-2px) !important;
}

body.client-mode .formule-card.active {
  border: 1px solid rgba(103, 186, 172, 0.54) !important;
  background:
    linear-gradient(180deg, rgba(148, 66, 146, 0.34), rgba(148, 66, 146, 0.18)),
    rgba(255, 255, 255, 0.055) !important;
  box-shadow: none !important;
}

body.client-mode .formule-card.disabled {
  opacity: 0.74 !important;
}

body.client-mode .formula-preferences,
body.client-mode .info-box,
body.client-mode .time-info,
body.client-mode .allocation-box,
body.client-mode .summary-panel,
body.client-mode .booking-summary,
body.client-mode .success-box,
body.client-mode .confetti-hint,
body.client-mode #alertBox .alert,
body.client-mode .alert,
body.client-mode .notice,
body.client-mode .laser-note {
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: var(--fg-hairline) !important;
  color: rgba(255, 255, 255, 0.76) !important;
}

body.client-mode .total-box {
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  background: #ffffff !important;
  color: #050505 !important;
  box-shadow: none !important;
}

body.client-mode #clientDemoAccess {
  top: 22px !important;
  right: max(22px, calc(50% - 540px)) !important;
  border: 1px solid var(--fg-hairline-2) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.86) !important;
  box-shadow: none !important;
}

body.client-mode .formula-pref-plain {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--fg-hairline);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  color: #ffffff;
}

body.client-mode .formula-pref-plain strong {
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 900;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-pref-plain small {
  color: var(--fg-text-soft);
  font-size: 0.78rem;
  line-height: 1.35;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-order-builder {
  display: grid;
  gap: 12px;
  width: 100%;
}

body.client-mode #formulaOrderOptions.preference-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

body.client-mode .formula-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

body.client-mode .formula-mode-card {
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 14px 16px;
  text-align: left;
  border: 1px solid var(--fg-hairline);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.78);
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms var(--fg-ease-out);
}

body.client-mode .formula-mode-card:hover {
  border-color: rgba(103, 186, 172, 0.44);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

body.client-mode .formula-mode-card.active {
  border-color: rgba(255, 255, 255, 0.86);
  background: #ffffff;
  color: #050505;
}

body.client-mode .formula-mode-card .formula-mode-kicker {
  color: rgba(138, 223, 211, 0.92);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-mode-card.active .formula-mode-kicker {
  color: rgb(148, 66, 146);
}

body.client-mode .formula-mode-card strong {
  color: inherit;
  font-size: 0.98rem;
  font-weight: 950;
  line-height: 1.15;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-mode-card small {
  color: currentColor;
  opacity: 0.68;
  font-size: 0.78rem;
  line-height: 1.32;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-auto-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 15px 16px;
  border: 1px solid rgba(103, 186, 172, 0.24);
  border-radius: 18px;
  background: rgba(103, 186, 172, 0.08);
}

body.client-mode .formula-auto-preview span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: rgba(103, 186, 172, 0.16);
  color: #d9fffb;
  font-weight: 950;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-auto-preview strong {
  display: block;
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: 900;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-auto-preview small {
  display: block;
  margin-top: 3px;
  color: var(--fg-text-soft);
  font-size: 0.77rem;
  line-height: 1.35;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-auto-step2 {
  margin: 0 0 14px;
}

body.client-mode .formula-order-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.18);
}

body.client-mode .formula-order-path strong {
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-order-path span {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-order-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--fg-hairline);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  transform-origin: center;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms var(--fg-ease-out);
}

body.client-mode .formula-order-row:hover {
  border-color: rgba(103, 186, 172, 0.34);
  background: rgba(255, 255, 255, 0.065);
}

body.client-mode .formula-order-row.formula-order-row-pulse {
  border-color: rgba(103, 186, 172, 0.72);
  background: rgba(103, 186, 172, 0.1);
}

body.client-mode .formula-order-handle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 38px;
  color: rgba(255, 255, 255, 0.42);
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-order-handle svg {
  display: block;
}

body.client-mode .formula-order-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #ffffff;
  color: #050505;
  font-weight: 950;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-order-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.client-mode .formula-order-copy strong {
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: 900;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-order-copy small {
  color: var(--fg-text-soft);
  font-size: 0.76rem;
  line-height: 1.3;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-order-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body.client-mode .formula-order-move {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid var(--fg-hairline-2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.82);
  -webkit-text-fill-color: currentColor;
  transition: transform 150ms var(--fg-ease-out), background 150ms ease, border-color 150ms ease;
}

body.client-mode .formula-order-move:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

body.client-mode .formula-order-move:active:not(:disabled) {
  transform: translateY(0) scale(0.96);
}

body.client-mode .formula-order-move:disabled {
  opacity: 0.36;
  cursor: not-allowed;
}

body.client-mode .formula-composer {
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid var(--fg-hairline);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
}

body.client-mode .formula-time-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

body.client-mode .formula-time-picker-head strong {
  display: block;
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 900;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-time-picker-head span {
  display: block;
  margin-top: 3px;
  color: var(--fg-text-soft);
  font-size: 0.78rem;
  line-height: 1.35;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-plan-count {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(103, 186, 172, 0.28);
  border-radius: 999px;
  background: rgba(103, 186, 172, 0.08);
  color: #9be1d8 !important;
  font-size: 0.72rem !important;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  -webkit-text-fill-color: currentColor !important;
}

body.client-mode .formula-order-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.client-mode .formula-order-btn {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--fg-hairline-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

body.client-mode .formula-order-btn span {
  margin-left: 6px;
  color: rgba(255, 255, 255, 0.56);
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-order-btn:hover {
  border-color: rgba(103, 186, 172, 0.48);
  background: rgba(255, 255, 255, 0.075);
  color: #ffffff;
}

body.client-mode .formula-order-btn.active {
  border-color: rgba(255, 255, 255, 0.92);
  background: #ffffff;
  color: #050505;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-order-btn.active span {
  color: rgba(5, 5, 5, 0.58);
}

body.client-mode .formula-time-empty {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg-text-soft);
  font-size: 0.82rem;
}

body.client-mode .formula-plan-grid {
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) !important;
}

body.client-mode .formula-slot {
  min-height: 156px;
  align-items: stretch;
  text-align: left;
}

body.client-mode .formula-slot .slot-time {
  display: block;
  text-align: left;
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 0.78rem !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 850;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
}

body.client-mode .formula-slot .slot-plan {
  display: block;
  margin-top: 10px;
}

body.client-mode .formula-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

body.client-mode .formula-route-item {
  display: grid;
  align-content: center;
  min-height: 66px;
  padding: 10px;
  border: 1px solid var(--fg-hairline);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}

body.client-mode .formula-route-item small {
  color: var(--fg-text-soft);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-route-item strong {
  margin-top: 4px;
  color: #ffffff;
  font-size: 0.96rem;
  font-weight: 950;
  line-height: 1.1;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-route-arrow {
  align-self: center;
  color: var(--fg-teal);
  font-weight: 950;
}

body.client-mode .formula-plan-meta {
  display: block;
  margin-top: 10px;
  color: var(--fg-text-soft);
  font-size: 0.76rem;
  line-height: 1.35;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-commitment {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

body.client-mode .formula-commitment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  line-height: 1.25;
}

body.client-mode .formula-commitment-row b {
  color: #ffffff;
  font-weight: 900;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-commitment-row span {
  color: var(--fg-text-soft);
  font-weight: 760;
  text-align: right;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-customer-note {
  display: block;
  margin-top: 8px;
  color: var(--fg-teal);
  font-size: 0.72rem;
  line-height: 1.35;
  font-weight: 850;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-planner {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--fg-hairline);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
}

body.client-mode .formula-planner-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

body.client-mode .formula-planner-head strong {
  display: block;
  color: #ffffff;
  font-size: 1.06rem;
  font-weight: 950;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-planner-head span {
  display: block;
  margin-top: 3px;
  color: var(--fg-text-soft);
  font-size: 0.8rem;
  line-height: 1.35;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-planner-route {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

body.client-mode .formula-route-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "num title"
    "num meta";
  gap: 2px 10px;
  align-items: center;
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--fg-hairline);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
}

body.client-mode .formula-route-step span {
  grid-area: num;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 950;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-route-step strong {
  grid-area: title;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.1;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-route-step small {
  grid-area: meta;
  color: var(--fg-text-soft);
  font-size: 0.72rem;
  font-weight: 760;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-route-step.active {
  border-color: rgba(103, 186, 172, 0.54);
  background: rgba(103, 186, 172, 0.08);
}

body.client-mode .formula-route-step.done {
  border-color: rgba(255, 255, 255, 0.36);
}

body.client-mode .formula-route-step.done span {
  background: #ffffff;
  color: #050505;
}

body.client-mode .formula-time-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

body.client-mode .formula-time-choice {
  min-height: 76px;
  padding: 12px;
  border: 1px solid var(--fg-hairline-2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
  text-align: left;
}

body.client-mode .formula-time-choice:hover {
  border-color: rgba(103, 186, 172, 0.62);
  background: rgba(255, 255, 255, 0.08);
}

body.client-mode .formula-time-choice strong {
  display: block;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 950;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-time-choice small {
  display: block;
  margin-top: 4px;
  color: var(--fg-text-soft);
  font-size: 0.74rem;
  font-weight: 760;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-plan-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

body.client-mode .formula-plan-summary span {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--fg-hairline);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

body.client-mode .formula-plan-summary b {
  color: #ffffff;
  font-size: 0.78rem;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-plan-summary small {
  color: var(--fg-text-soft);
  font-size: 0.78rem;
  -webkit-text-fill-color: currentColor;
}

body.client-mode .formula-plan-confirm {
  width: 100%;
}

/* Direction cockpit: real ops readout fed by reservations + orchestration data. */
body.admin-mode .ops-cockpit {
  overflow: hidden;
  background: #0b1118 !important;
  border: 1px solid #253140 !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .32) !important;
}

body.admin-mode .ops-cockpit-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 18px;
  border-bottom: 1px solid #202a36;
  background: #0d131b;
}

body.admin-mode .ops-cockpit-title {
  display: grid;
  gap: 5px;
  min-width: 0;
}

body.admin-mode .ops-cockpit-title h2 {
  margin: 0;
  color: #f5f7fb !important;
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -.02em;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-title p {
  margin: 0;
  color: #9cacbd !important;
  font-size: 12px;
  font-weight: 650;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

body.admin-mode .ops-cockpit-tab {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 0 12px;
  border: 1px solid #2c3848;
  border-radius: 999px;
  background: #0a0f15;
  color: #c7d2df !important;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .01em;
  -webkit-text-fill-color: currentColor !important;
  cursor: pointer;
}

body.admin-mode .ops-cockpit-tab.active {
  background: #eef3f8;
  border-color: #eef3f8;
  color: #071019 !important;
}

body.admin-mode .ops-cockpit-tab:hover {
  border-color: #506278;
  color: #ffffff !important;
}

body.admin-mode .ops-cockpit-tab.active:hover {
  color: #071019 !important;
}

body.admin-mode .ops-cockpit-body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .72fr);
  min-height: 420px;
}

body.admin-mode .ops-cockpit-board {
  padding: 18px;
  border-right: 1px solid #202a36;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 25% 100%,
    #0b1118;
}

body.admin-mode .ops-cockpit-board-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  margin-bottom: 12px;
}

body.admin-mode .ops-cockpit-board-head strong {
  color: #f6f8fb !important;
  font-size: 15px;
  font-weight: 900;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-board-head span {
  color: #99a9bb !important;
  font-size: 12px;
  font-weight: 700;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-timeline {
  display: grid;
  border-top: 1px solid #202a36;
  border-bottom: 1px solid #202a36;
}

body.admin-mode .ops-cockpit-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  min-height: 74px;
  border-bottom: 1px solid #1b2531;
}

body.admin-mode .ops-cockpit-row:last-child {
  border-bottom: 0;
}

body.admin-mode .ops-cockpit-hour {
  padding-top: 13px;
  color: #f4f7fb !important;
  font-size: 13px;
  font-weight: 900;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-slots {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 9px;
  padding: 10px 0 10px 12px;
  border-left: 1px solid #202a36;
}

body.admin-mode .ops-cockpit-event {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: min(210px, 100%);
  max-width: 270px;
  padding: 10px 12px;
  border: 1px solid #344256;
  border-left: 4px solid #8eb5e6;
  border-radius: 9px;
  background: #151c26;
  color: #f7f9fc !important;
  text-align: left;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-event.formula {
  border-color: #58472a;
  border-left-color: #c4a15a;
  background: #1d1710;
}

body.admin-mode .ops-cockpit-event.laser {
  border-color: #31554e;
  border-left-color: #66c2ac;
  background: #101d1e;
}

body.admin-mode .ops-cockpit-event.bowling {
  border-color: #30445b;
  border-left-color: #8eb5e6;
  background: #111b27;
}

body.admin-mode .ops-cockpit-event strong {
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-event span,
body.admin-mode .ops-cockpit-event small {
  color: #c8d3df !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-event small {
  color: #91a1b3 !important;
}

body.admin-mode .ops-cockpit-empty {
  display: grid;
  place-items: center;
  min-height: 270px;
  border: 1px dashed #334154;
  border-radius: 13px;
  color: #98a9bc !important;
  font-size: 13px;
  font-weight: 760;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-side {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 18px;
  background: #0a0f15;
}

body.admin-mode .ops-cockpit-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #273342;
  border-radius: 13px;
  background: #111821;
}

body.admin-mode .ops-cockpit-card .label {
  color: #9fb1c4 !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-card .value {
  color: #ffffff !important;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.03em;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-card p,
body.admin-mode .ops-cockpit-card li {
  margin: 0;
  color: #c0cbd7 !important;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-card ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.admin-mode .ops-cockpit-card li {
  position: relative;
  padding-left: 14px;
}

body.admin-mode .ops-cockpit-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8eb5e6;
}

body.admin-mode .ops-cockpit-meter {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

body.admin-mode .ops-cockpit-meter-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: center;
  color: #aab8c8 !important;
  font-size: 11px;
  font-weight: 800;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #263140;
}

body.admin-mode .ops-cockpit-bar span {
  display: block;
  width: clamp(0%, var(--value, 0%), 100%);
  height: 100%;
  border-radius: inherit;
  background: #8eb5e6;
}

body.admin-mode .ops-cockpit-meter-row.laser .ops-cockpit-bar span {
  background: #66c2ac;
}

body.admin-mode .ops-cockpit-meter-row.mail .ops-cockpit-bar span {
  background: #c4a15a;
}

body.admin-mode .ops-cockpit-agent {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

body.admin-mode .ops-cockpit-agent .agent-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.admin-mode .ops-cockpit-agent .agent-meta strong {
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 900;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-agent .agent-meta span {
  color: #96a6b9 !important;
  font-size: 11px;
  font-weight: 700;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-run {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #dfe7ef;
  border-radius: 9px;
  background: #eef3f8;
  color: #071019 !important;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-run:hover {
  background: #ffffff;
}

@media (max-width: 980px) {
  body.admin-mode .ops-cockpit-head,
  body.admin-mode .ops-cockpit-board-head,
  body.admin-mode .ops-cockpit-agent {
    align-items: stretch;
    flex-direction: column;
  }

  body.admin-mode .ops-cockpit-tabs {
    justify-content: flex-start;
  }

  body.admin-mode .ops-cockpit-body {
    grid-template-columns: 1fr;
  }

  body.admin-mode .ops-cockpit-board {
    border-right: 0;
    border-bottom: 1px solid #202a36;
  }
}

@media (max-width: 820px) {
  body.client-mode #clientView::before {
    top: 20px !important;
    left: 50% !important;
    width: 132px !important;
    height: 62px !important;
    transform: translateX(-50%) !important;
  }

  body.client-mode .client-wrap {
    padding-top: 104px !important;
  }

  body.client-mode #step1.step {
    padding: 12px !important;
  }

  body.client-mode .card {
    border-radius: 20px !important;
  }

  body.client-mode .segmented {
    border-radius: 18px !important;
  }

  body.client-mode .seg-btn {
    border-bottom: 1px solid var(--fg-hairline) !important;
  }

  body.client-mode .formule-card {
    min-height: 156px !important;
  }

  body.client-mode .formula-time-picker-head {
    flex-direction: column;
    gap: 8px;
  }

  body.client-mode .formula-plan-count {
    width: fit-content;
  }

  body.client-mode .formula-mode-switch {
    grid-template-columns: 1fr;
  }

  body.client-mode .formula-order-row {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  body.client-mode .formula-order-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  body.client-mode .formula-order-move {
    flex: 1;
    width: auto;
  }

  body.client-mode .formula-route {
    grid-template-columns: 1fr;
  }

  body.client-mode .formula-route-arrow {
    display: none;
  }

  body.client-mode .formula-order-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body.client-mode .formula-order-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  body.client-mode .formula-planner-head {
    flex-direction: column;
    gap: 8px;
  }
}

/* Direction executive redesign: sober enterprise cockpit, admin only. */
body.admin-mode {
  --admin-bg: #05070a;
  --admin-bg-soft: #090c11;
  --admin-surface: #0d1117;
  --admin-surface-2: #111720;
  --admin-surface-3: #151c26;
  --admin-line: #252d38;
  --admin-line-strong: #394454;
  --admin-text: #f7f8fa;
  --admin-muted: #aab4c0;
  --admin-soft: #758190;
  --admin-ink: #07090c;
  --admin-white: #f4f6f8;
  --admin-accent: #8fb4e8;
  --admin-green: #79c39a;
  --admin-amber: #d2ad68;
  --admin-red: #d77b72;
  background:
    radial-gradient(circle at 50% -20%, rgba(255,255,255,.05), transparent 34rem),
    var(--admin-bg) !important;
  color: var(--admin-text) !important;
  font-family: "Outfit", "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif !important;
  font-variant-numeric: tabular-nums;
}

body.admin-mode main {
  background: transparent !important;
}

body.admin-mode header {
  background: rgba(5, 7, 10, .94) !important;
  border-bottom: 1px solid var(--admin-line) !important;
  box-shadow: none !important;
}

body.admin-mode .view-switch {
  background: #080b10 !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 10px !important;
  padding: 4px !important;
}

body.admin-mode .view-switch button {
  min-height: 34px !important;
  border-radius: 7px !important;
  color: var(--admin-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  background: transparent !important;
}

body.admin-mode .view-switch button.active {
  background: var(--admin-white) !important;
  color: var(--admin-ink) !important;
}

body.admin-mode .admin-shell {
  width: min(1760px, calc(100vw - 72px)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 34px 0 72px !important;
  display: grid !important;
  gap: 18px !important;
}

body.admin-mode .admin-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 28px !important;
  margin: 0 !important;
  padding: 24px !important;
  border: 1px solid var(--admin-line-strong) !important;
  border-radius: 20px !important;
  background: #0b0f15 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 28px 80px rgba(0,0,0,.22) !important;
}

body.admin-mode .admin-brand {
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 24px !important;
}

body.admin-mode .admin-brand-logo {
  width: 150px !important;
  height: 88px !important;
  padding: 16px 22px !important;
  border: 1px solid #343d4a !important;
  border-radius: 14px !important;
  background: #050607 !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
}

body.admin-mode .admin-eyebrow,
body.admin-mode .ops-eyebrow {
  margin: 0 0 8px !important;
  color: var(--admin-soft) !important;
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

body.admin-mode .admin-hero h1 {
  margin: 0 !important;
  color: var(--admin-text) !important;
  font-size: clamp(34px, 4vw, 54px) !important;
  line-height: .95 !important;
  font-weight: 900 !important;
  letter-spacing: -.05em !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-hero p {
  max-width: 850px !important;
  margin: 12px 0 0 !important;
  color: var(--admin-muted) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-actions {
  display: grid !important;
  grid-template-columns: auto auto auto auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding-left: 28px !important;
  border-left: 1px solid var(--admin-line) !important;
}

body.admin-mode .admin-date-nav,
body.admin-mode .admin-tabs,
body.admin-mode .admin-period-tabs {
  width: max-content !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 4px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 12px !important;
  background: #080b10 !important;
  box-shadow: none !important;
}

body.admin-mode .admin-date-nav button,
body.admin-mode .admin-tabs button,
body.admin-mode .admin-period-tabs button,
body.admin-mode .admin-btn,
body.admin-mode .ops-admin-btn,
body.admin-mode .ops-tab,
body.admin-mode .ops-cockpit-tab,
body.admin-mode .ops-cockpit-run {
  min-height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--admin-muted) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: background-color .18s cubic-bezier(.2,.8,.2,1), border-color .18s cubic-bezier(.2,.8,.2,1), color .18s cubic-bezier(.2,.8,.2,1), transform .18s cubic-bezier(.2,.8,.2,1) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-date-nav button {
  width: 34px !important;
}

body.admin-mode .admin-date-nav input,
body.admin-mode input,
body.admin-mode select,
body.admin-mode textarea {
  min-height: 34px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--admin-text) !important;
  -webkit-text-fill-color: var(--admin-text) !important;
  color-scheme: dark !important;
  font-weight: 750 !important;
  box-shadow: none !important;
}

body.admin-mode .admin-btn {
  min-height: 42px !important;
  padding: 0 16px !important;
  border-color: var(--admin-line) !important;
  background: #0f141c !important;
  color: var(--admin-text) !important;
}

body.admin-mode .admin-btn.primary,
body.admin-mode .ops-admin-btn.primary {
  border-color: var(--admin-white) !important;
  background: var(--admin-white) !important;
  color: var(--admin-ink) !important;
}

body.admin-mode .admin-date-nav button:hover,
body.admin-mode .admin-btn:hover,
body.admin-mode .ops-admin-btn:hover,
body.admin-mode .ops-tab:hover,
body.admin-mode .ops-cockpit-tab:hover,
body.admin-mode .ops-cockpit-run:hover {
  transform: translateY(-1px) !important;
  border-color: var(--admin-line-strong) !important;
  background: #151b24 !important;
  color: var(--admin-text) !important;
}

body.admin-mode .admin-btn.primary:hover,
body.admin-mode .ops-admin-btn.primary:hover,
body.admin-mode .ops-cockpit-run:hover {
  background: #ffffff !important;
  color: var(--admin-ink) !important;
}

body.admin-mode .admin-tabs button.active,
body.admin-mode .admin-period-tabs button.active,
body.admin-mode .ops-tab.active,
body.admin-mode .ops-cockpit-tab.active {
  background: var(--admin-white) !important;
  border-color: var(--admin-white) !important;
  color: var(--admin-ink) !important;
}

body.admin-mode .admin-center-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
}

body.admin-mode .admin-center-card {
  position: relative !important;
  min-height: 96px !important;
  padding: 18px 20px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 16px !important;
  background: #0b0f15 !important;
  color: var(--admin-text) !important;
  text-align: left !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

body.admin-mode .admin-center-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 3px !important;
  background: transparent !important;
}

body.admin-mode .admin-center-card.active {
  border-color: #e6eaf0 !important;
  background: #10151d !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.62) !important;
}

body.admin-mode .admin-center-card.active::before {
  background: var(--admin-white) !important;
}

body.admin-mode .admin-center-card .top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
}

body.admin-mode .admin-center-card .name {
  color: var(--admin-text) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  letter-spacing: -.02em !important;
}

body.admin-mode .admin-center-card .meta {
  display: block !important;
  color: var(--admin-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

body.admin-mode .admin-status,
body.admin-mode .admin-pill {
  min-height: 24px !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
  border: 1px solid var(--admin-line-strong) !important;
  background: #111720 !important;
  color: var(--admin-muted) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-status.active,
body.admin-mode .admin-pill.paid,
body.admin-mode .admin-pill.sent {
  border-color: rgba(121,195,154,.42) !important;
  background: rgba(121,195,154,.10) !important;
  color: #a8dfbd !important;
}

body.admin-mode .admin-status.planned,
body.admin-mode .admin-pill.arrived,
body.admin-mode .admin-pill.medium {
  border-color: rgba(210,173,104,.42) !important;
  background: rgba(210,173,104,.10) !important;
  color: #e5c98f !important;
}

body.admin-mode .admin-pill.laser,
body.admin-mode .admin-pill.formule {
  border-color: #445061 !important;
  background: #151c26 !important;
  color: #dce5f0 !important;
}

body.admin-mode .admin-pill.failed,
body.admin-mode .admin-pill.high,
body.admin-mode .admin-pill.critical {
  border-color: rgba(215,123,114,.48) !important;
  background: rgba(215,123,114,.11) !important;
  color: #f0aea8 !important;
}

body.admin-mode .admin-period-tabs,
body.admin-mode .admin-tabs {
  justify-self: start !important;
}

body.admin-mode .admin-panel,
body.admin-mode .ops-cockpit {
  overflow: hidden !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 18px !important;
  background: var(--admin-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 22px 70px rgba(0,0,0,.18) !important;
}

body.admin-mode .admin-panel {
  padding: 0 !important;
  margin: 0 !important;
}

body.admin-mode .admin-section-title,
body.admin-mode .ops-admin-head,
body.admin-mode .ops-cockpit-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 20px 22px !important;
  border-bottom: 1px solid var(--admin-line) !important;
  background: #0f141b !important;
}

body.admin-mode .admin-section-title h2,
body.admin-mode .ops-admin-head h2,
body.admin-mode .ops-cockpit-title h2 {
  margin: 0 !important;
  color: var(--admin-text) !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
  font-weight: 850 !important;
  letter-spacing: -.03em !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-section-title p,
body.admin-mode .ops-admin-head p,
body.admin-mode .ops-cockpit-title p {
  margin: 6px 0 0 !important;
  color: var(--admin-muted) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 18px !important;
}

body.admin-mode .admin-kpi,
body.admin-mode .admin-small-card,
body.admin-mode .admin-resource-card,
body.admin-mode .admin-market-card,
body.admin-mode .admin-insight,
body.admin-mode .ops-cockpit-card {
  border: 1px solid var(--admin-line) !important;
  border-radius: 14px !important;
  background: var(--admin-surface-2) !important;
  color: var(--admin-text) !important;
  box-shadow: none !important;
}

body.admin-mode .admin-kpi {
  min-height: 118px !important;
  padding: 18px !important;
  display: grid !important;
  align-content: space-between !important;
  gap: 12px !important;
}

body.admin-mode .admin-kpi .k,
body.admin-mode .admin-small-card .k,
body.admin-mode .admin-resource-card .k,
body.admin-mode .admin-market-card .k,
body.admin-mode .ops-cockpit-card .label {
  color: var(--admin-soft) !important;
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-kpi .v {
  margin: 0 !important;
  color: var(--admin-text) !important;
  font-size: clamp(26px, 2.5vw, 38px) !important;
  line-height: .92 !important;
  font-weight: 900 !important;
  letter-spacing: -.05em !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-kpi .s,
body.admin-mode .admin-resource-card .s,
body.admin-mode .admin-small-card .s,
body.admin-mode .admin-market-card .s,
body.admin-mode .admin-export-card p {
  color: var(--admin-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-dashboard-grid {
  grid-template-columns: minmax(0, 1.42fr) minmax(360px, .58fr) !important;
  gap: 18px !important;
}

body.admin-mode .admin-dashboard-grid,
body.admin-mode .admin-resource-grid,
body.admin-mode .admin-breakdown-grid,
body.admin-mode .admin-market-grid,
body.admin-mode .admin-export-grid {
  padding: 18px !important;
  gap: 14px !important;
}

body.admin-mode .admin-resource-grid,
body.admin-mode .admin-market-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.admin-mode .admin-resource-card,
body.admin-mode .admin-market-card {
  min-height: 116px !important;
  padding: 18px !important;
}

body.admin-mode .admin-resource-card .v,
body.admin-mode .admin-market-card .v,
body.admin-mode .admin-small-card .v,
body.admin-mode .ops-cockpit-card .value {
  margin: 8px 0 0 !important;
  color: var(--admin-text) !important;
  font-size: 25px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-insight-list {
  display: grid !important;
  gap: 10px !important;
  padding: 18px !important;
}

body.admin-mode .admin-insight {
  display: grid !important;
  grid-template-columns: 10px 1fr !important;
  gap: 12px !important;
  padding: 16px !important;
}

body.admin-mode .admin-insight .dot {
  width: 8px !important;
  height: 8px !important;
  margin-top: 6px !important;
  border-radius: 99px !important;
  background: var(--admin-amber) !important;
}

body.admin-mode .admin-insight.good .dot { background: var(--admin-green) !important; }
body.admin-mode .admin-insight.high .dot { background: var(--admin-red) !important; }

body.admin-mode .admin-insight strong {
  color: var(--admin-text) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-insight span {
  color: var(--admin-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit {
  margin: 0 !important;
}

body.admin-mode .ops-cockpit-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, .72fr) !important;
  min-height: 420px !important;
  background: var(--admin-surface) !important;
}

body.admin-mode .ops-cockpit-board {
  padding: 22px !important;
  border-right: 1px solid var(--admin-line) !important;
  background: #0b1016 !important;
}

body.admin-mode .ops-cockpit-board-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 0 16px !important;
}

body.admin-mode .ops-cockpit-board-head strong {
  color: var(--admin-text) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-board-head span {
  color: var(--admin-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-timeline {
  overflow: hidden !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 14px !important;
  background: #090d12 !important;
}

body.admin-mode .ops-cockpit-row {
  min-height: 82px !important;
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  border-bottom: 1px solid var(--admin-line) !important;
}

body.admin-mode .ops-cockpit-hour {
  padding: 18px 0 0 18px !important;
  color: var(--admin-text) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-slots {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 12px !important;
  border-left: 1px solid var(--admin-line) !important;
}

body.admin-mode .ops-cockpit-event {
  min-width: min(240px, 100%) !important;
  padding: 12px 14px !important;
  border: 1px solid #334052 !important;
  border-left: 4px solid var(--admin-accent) !important;
  border-radius: 12px !important;
  background: #121923 !important;
}

body.admin-mode .ops-cockpit-event.formula {
  border-left-color: var(--admin-amber) !important;
}

body.admin-mode .ops-cockpit-event.laser {
  border-left-color: var(--admin-green) !important;
}

body.admin-mode .ops-cockpit-event strong {
  color: var(--admin-text) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-event span,
body.admin-mode .ops-cockpit-event small,
body.admin-mode .ops-cockpit-card p,
body.admin-mode .ops-cockpit-card li,
body.admin-mode .ops-cockpit-agent .agent-meta span {
  color: var(--admin-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-empty {
  min-height: 300px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px dashed #344052 !important;
  border-radius: 14px !important;
  color: var(--admin-muted) !important;
  font-weight: 650 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-side {
  display: grid !important;
  align-content: start !important;
  gap: 14px !important;
  padding: 22px !important;
  background: #090d12 !important;
}

body.admin-mode .ops-cockpit-card {
  padding: 18px !important;
}

body.admin-mode .ops-cockpit-card ul {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.admin-mode .ops-cockpit-card li {
  position: relative !important;
  padding-left: 14px !important;
}

body.admin-mode .ops-cockpit-card li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .62em !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 99px !important;
  background: var(--admin-accent) !important;
}

body.admin-mode .ops-cockpit-meter {
  display: grid !important;
  gap: 9px !important;
}

body.admin-mode .ops-cockpit-meter-row {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) 42px !important;
  gap: 10px !important;
  align-items: center !important;
  color: var(--admin-muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-cockpit-bar {
  height: 7px !important;
  border-radius: 99px !important;
  overflow: hidden !important;
  background: #222b36 !important;
}

body.admin-mode .ops-cockpit-bar span {
  display: block !important;
  width: clamp(0%, var(--value, 0%), 100%) !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: var(--admin-accent) !important;
}

body.admin-mode .ops-cockpit-meter-row.laser .ops-cockpit-bar span { background: var(--admin-green) !important; }
body.admin-mode .ops-cockpit-meter-row.mail .ops-cockpit-bar span { background: var(--admin-amber) !important; }

body.admin-mode .ops-cockpit-agent {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

body.admin-mode .ops-cockpit-agent .agent-meta strong {
  color: var(--admin-text) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-org-shell {
  margin: 18px 0 !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #0b1016 !important;
  box-shadow: none !important;
}

body.admin-mode .ai-org-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  gap: 18px !important;
  align-items: flex-start !important;
  padding: 20px 22px !important;
  border-bottom: 1px solid var(--admin-line) !important;
  background: #0d1219 !important;
}

body.admin-mode .ai-org-toolbar h3 {
  margin: 4px 0 6px !important;
  color: var(--admin-text) !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-org-toolbar p {
  max-width: 850px !important;
  margin: 0 !important;
  color: var(--admin-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-org-metrics {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 260px !important;
}

body.admin-mode .ai-org-metrics span,
body.admin-mode .ai-connector-strip b {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 7px 10px !important;
  border: 1px solid #263241 !important;
  border-radius: 10px !important;
  background: #111821 !important;
  color: var(--admin-soft) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-org-metrics strong,
body.admin-mode .ai-connector-strip small {
  color: var(--admin-text) !important;
  font-weight: 850 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-org-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  min-height: auto !important;
}

body.admin-mode .ai-org-canvas {
  position: relative !important;
  overflow: visible !important;
  padding: 22px !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--admin-line) !important;
  background: #080c11 !important;
}

body.admin-mode .ai-org-root {
  display: flex !important;
  justify-content: center !important;
  min-width: 1180px !important;
}

body.admin-mode .ai-org-root .ai-org-node {
  width: 300px !important;
}

body.admin-mode .ai-org-trunk {
  width: 1px !important;
  height: 28px !important;
  margin: 0 auto !important;
  background: #3a4655 !important;
}

body.admin-mode .ai-department-grid {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(218px, 1fr)) !important;
  gap: 14px !important;
  min-width: 1180px !important;
}

body.admin-mode .ai-department-grid::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 10% !important;
  right: 10% !important;
  height: 1px !important;
  background: #3a4655 !important;
}

body.admin-mode .ai-department-lane {
  position: relative !important;
  padding-top: 24px !important;
}

body.admin-mode .ai-department-lane::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: 1px !important;
  height: 24px !important;
  background: #3a4655 !important;
}

body.admin-mode .ai-department-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  min-height: 42px !important;
  margin-bottom: 10px !important;
  padding: 10px 12px !important;
  border: 1px solid #293543 !important;
  border-radius: 12px !important;
  background: #0f151d !important;
  color: var(--admin-soft) !important;
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-department-head strong {
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid #344254 !important;
  border-radius: 8px !important;
  color: var(--admin-text) !important;
  font-family: inherit !important;
  font-size: 11px !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-department-agents {
  display: grid !important;
  gap: 10px !important;
}

body.admin-mode .ai-compact-pyramid {
  width: 100% !important;
  display: grid !important;
  gap: 0 !important;
}

body.admin-mode .ai-compact-root {
  display: flex !important;
  justify-content: center !important;
}

body.admin-mode .ai-compact-root .ai-org-node {
  width: min(360px, 100%) !important;
  min-height: 116px !important;
  border-color: #8796ac !important;
  background: #151d28 !important;
}

body.admin-mode .ai-compact-spine {
  position: relative !important;
  height: 34px !important;
}

body.admin-mode .ai-compact-spine::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: 1px !important;
  height: 100% !important;
  background: #3a4655 !important;
}

body.admin-mode .ai-compact-spine::after {
  content: "" !important;
  position: absolute !important;
  left: 7% !important;
  right: 7% !important;
  bottom: 0 !important;
  height: 1px !important;
  background: #3a4655 !important;
}

body.admin-mode .ai-compact-manager-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: start !important;
}

body.admin-mode .ai-compact-manager {
  position: relative !important;
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.admin-mode .ai-compact-manager::before {
  content: "" !important;
  position: absolute !important;
  top: -34px !important;
  left: 50% !important;
  width: 1px !important;
  height: 34px !important;
  background: #3a4655 !important;
}

body.admin-mode .ai-compact-link {
  width: 1px !important;
  height: 10px !important;
  margin: -8px auto -1px !important;
  background: #3a4655 !important;
}

body.admin-mode .ai-compact-agents {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
}

body.admin-mode .ai-pyramid-tree {
  min-width: 1420px !important;
  padding: 4px 10px 18px !important;
}

body.admin-mode .ai-pyramid-tree ul {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 30px 0 0 !important;
  list-style: none !important;
}

body.admin-mode .ai-pyramid-tree > ul {
  padding-top: 0 !important;
}

body.admin-mode .ai-pyramid-tree li {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-width: 214px !important;
  padding: 0 7px !important;
  list-style: none !important;
}

body.admin-mode .ai-pyramid-tree li::before,
body.admin-mode .ai-pyramid-tree li::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  width: 50% !important;
  height: 30px !important;
  border-top: 1px solid #3a4655 !important;
}

body.admin-mode .ai-pyramid-tree li::before {
  right: 50% !important;
}

body.admin-mode .ai-pyramid-tree li::after {
  left: 50% !important;
  border-left: 1px solid #3a4655 !important;
}

body.admin-mode .ai-pyramid-tree li:only-child::before,
body.admin-mode .ai-pyramid-tree li:only-child::after {
  display: none !important;
}

body.admin-mode .ai-pyramid-tree li:first-child::before,
body.admin-mode .ai-pyramid-tree li:last-child::after {
  border-top: 0 !important;
}

body.admin-mode .ai-pyramid-tree li:last-child::before {
  border-right: 1px solid #3a4655 !important;
  border-radius: 0 8px 0 0 !important;
}

body.admin-mode .ai-pyramid-tree li:first-child::after {
  border-radius: 8px 0 0 0 !important;
}

body.admin-mode .ai-pyramid-tree ul ul::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: 0 !important;
  height: 30px !important;
  border-left: 1px solid #3a4655 !important;
}

body.admin-mode .ai-pyramid-tree > ul > li::before,
body.admin-mode .ai-pyramid-tree > ul > li::after {
  display: none !important;
}

body.admin-mode .ai-pyramid-tree > ul > li > .ai-org-node {
  width: 320px !important;
  min-height: 132px !important;
  border-color: #6f7f95 !important;
  background: #151d28 !important;
}

body.admin-mode .ai-manager-node {
  display: grid !important;
  gap: 5px !important;
  width: 100% !important;
  min-height: 86px !important;
  padding: 11px 12px !important;
  border: 1px solid #4a5668 !important;
  border-radius: 12px !important;
  background: #0f151d !important;
  color: var(--admin-text) !important;
  text-align: left !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-manager-node span,
body.admin-mode .ai-manager-node em {
  color: #9badc4 !important;
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-manager-node strong {
  color: var(--admin-text) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-manager-node small {
  color: var(--admin-muted) !important;
  font-size: 10px !important;
  font-weight: 560 !important;
  line-height: 1.35 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-org-node {
  --agent-accent: #8aa4c6;
  position: relative !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 10px !important;
  gap: 10px !important;
  align-items: start !important;
  width: 100% !important;
  min-height: 124px !important;
  padding: 13px !important;
  border: 1px solid #2b3746 !important;
  border-left: 4px solid var(--agent-accent) !important;
  border-radius: 13px !important;
  background: #121923 !important;
  color: var(--admin-text) !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1), border-color 160ms ease, background 160ms ease !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-pyramid-tree .ai-org-node {
  width: 214px !important;
  min-height: 116px !important;
}

body.admin-mode .ai-compact-manager .ai-org-node {
  grid-template-columns: 30px minmax(0, 1fr) 8px !important;
  min-height: 88px !important;
  padding: 9px 10px !important;
  border-left-width: 3px !important;
  border-radius: 11px !important;
}

body.admin-mode .ai-compact-manager .ai-agent-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
}

body.admin-mode .ai-compact-manager .ai-agent-avatar::before {
  left: 10px !important;
  top: 6px !important;
  width: 8px !important;
  height: 8px !important;
}

body.admin-mode .ai-compact-manager .ai-agent-avatar::after {
  left: 7px !important;
  top: 17px !important;
  width: 14px !important;
  height: 7px !important;
}

body.admin-mode .ai-compact-manager .ai-agent-kicker {
  font-size: 8px !important;
}

body.admin-mode .ai-compact-manager .ai-agent-body strong {
  font-size: 11px !important;
}

body.admin-mode .ai-compact-manager .ai-agent-body small,
body.admin-mode .ai-compact-manager .ai-agent-body em {
  font-size: 9px !important;
}

body.admin-mode .ai-org-node:hover,
body.admin-mode .ai-org-node.selected {
  border-color: #dbe7f6 !important;
  border-left-color: var(--agent-accent) !important;
  background: #17202b !important;
}

body.admin-mode .ai-org-node:active {
  transform: scale(.985) !important;
}

body.admin-mode .ai-org-node.working { --agent-accent: #8fb8ea; }
body.admin-mode .ai-org-node.watching { --agent-accent: #8bc5ad; }
body.admin-mode .ai-org-node.ready { --agent-accent: #d6bd7d; }
body.admin-mode .ai-org-node.standby { --agent-accent: #a5afbd; }
body.admin-mode .ai-org-node.planned { --agent-accent: #7b8491; }

body.admin-mode .ai-agent-avatar {
  position: relative !important;
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid #354253 !important;
  border-radius: 10px !important;
  background: #0b1016 !important;
}

body.admin-mode .ai-agent-avatar::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: 7px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--agent-accent) !important;
}

body.admin-mode .ai-agent-avatar::after {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  top: 20px !important;
  width: 18px !important;
  height: 8px !important;
  border-radius: 10px 10px 4px 4px !important;
  background: var(--agent-accent) !important;
}

body.admin-mode .ai-agent-body {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

body.admin-mode .ai-agent-kicker {
  color: var(--agent-accent) !important;
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-agent-body strong {
  color: var(--admin-text) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-agent-body small,
body.admin-mode .ai-agent-body em {
  color: var(--admin-muted) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-agent-body em {
  color: #8fa1b8 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.admin-mode .ai-agent-state {
  width: 9px !important;
  height: 9px !important;
  margin-top: 4px !important;
  border-radius: 50% !important;
  background: var(--agent-accent) !important;
}

body.admin-mode .ai-org-node.working .ai-agent-state {
  animation: adminAgentPulse 1.35s ease-in-out infinite !important;
}

@keyframes adminAgentPulse {
  0%, 100% { opacity: .42; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.18); }
}

body.admin-mode .ai-detail-panel {
  display: grid !important;
  align-content: start !important;
  gap: 14px !important;
  padding: 22px !important;
  background: #0e131b !important;
  color: var(--admin-text) !important;
}

body.admin-mode .ai-org-layout > .ai-detail-panel {
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.25fr) !important;
  align-items: start !important;
}

body.admin-mode .ai-org-layout > .ai-detail-panel .ai-detail-head,
body.admin-mode .ai-org-layout > .ai-detail-panel .ai-detail-section.primary {
  grid-column: 1 !important;
}

body.admin-mode .ai-org-layout > .ai-detail-panel .ai-detail-grid,
body.admin-mode .ai-org-layout > .ai-detail-panel .ai-detail-section:not(.primary) {
  grid-column: 2 !important;
}

body.admin-mode .ai-detail-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 14px !important;
  align-items: flex-start !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--admin-line) !important;
}

body.admin-mode .ai-detail-head h3 {
  margin: 4px 0 6px !important;
  color: var(--admin-text) !important;
  font-size: 24px !important;
  font-weight: 880 !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-detail-head p,
body.admin-mode .ai-detail-section p,
body.admin-mode .ai-detail-section li {
  margin: 0 !important;
  color: var(--admin-muted) !important;
  font-size: 12px !important;
  font-weight: 560 !important;
  line-height: 1.5 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-detail-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  padding: 7px 10px !important;
  border: 1px solid #334154 !important;
  border-radius: 999px !important;
  background: #111821 !important;
  color: var(--admin-text) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-detail-status i {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #a5afbd !important;
}

body.admin-mode .ai-detail-status.working i { background: #8fb8ea !important; }
body.admin-mode .ai-detail-status.watching i { background: #8bc5ad !important; }
body.admin-mode .ai-detail-status.ready i { background: #d6bd7d !important; }

body.admin-mode .ai-detail-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.admin-mode .ai-detail-section {
  display: grid !important;
  gap: 7px !important;
  padding: 13px !important;
  border: 1px solid #273342 !important;
  border-radius: 13px !important;
  background: #101720 !important;
}

body.admin-mode .ai-detail-section.primary {
  border-color: #415066 !important;
  background: #141d28 !important;
}

body.admin-mode .ai-detail-section span {
  color: #9badc4 !important;
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-detail-section strong {
  color: var(--admin-text) !important;
  font-size: 15px !important;
  font-weight: 820 !important;
  line-height: 1.35 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-detail-section ul {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 0 0 16px !important;
}

body.admin-mode .ai-live-board {
  display: grid !important;
  gap: 14px !important;
  padding: 20px !important;
  border: 1px solid #263241 !important;
  border-radius: 16px !important;
  background: #0e131b !important;
  min-width: 0 !important;
}

body.admin-mode .ai-live-summary,
body.admin-mode .ai-live-kpis,
body.admin-mode .ai-live-column-head,
body.admin-mode .ai-live-agent,
body.admin-mode .ai-live-data-row,
body.admin-mode .ai-live-next {
  display: flex !important;
  align-items: center !important;
}

body.admin-mode .ai-live-summary {
  justify-content: space-between !important;
  gap: 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #263241 !important;
}

body.admin-mode .ai-live-summary h3 {
  margin: 4px 0 5px !important;
  color: var(--admin-text) !important;
  font-size: 22px !important;
  font-weight: 880 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-live-summary p,
body.admin-mode .ai-problem-card p,
body.admin-mode .ai-live-column-head small,
body.admin-mode .ai-live-agent small,
body.admin-mode .ai-live-agent em {
  margin: 0 !important;
  color: var(--admin-muted) !important;
  font-size: 12px !important;
  font-weight: 560 !important;
  line-height: 1.45 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-live-kpis {
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

body.admin-mode .ai-live-kpis span {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  padding: 8px 10px !important;
  border: 1px solid #2b3848 !important;
  border-radius: 999px !important;
  color: var(--admin-muted) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
}

body.admin-mode .ai-live-kpis strong {
  color: var(--admin-text) !important;
  font-size: 15px !important;
}

body.admin-mode .ai-problem-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.admin-mode .ai-problem-card {
  display: grid !important;
  gap: 7px !important;
  padding: 13px !important;
  border: 1px solid #2b3848 !important;
  border-radius: 12px !important;
  background: #111822 !important;
}

body.admin-mode .ai-problem-card.high { border-color: rgba(226, 134, 125, .7) !important; }
body.admin-mode .ai-problem-card.warning { border-color: rgba(214, 189, 125, .72) !important; }
body.admin-mode .ai-problem-card.ok { border-color: rgba(139, 197, 173, .62) !important; }

body.admin-mode .ai-problem-card span,
body.admin-mode .ai-live-next span {
  color: #9badc4 !important;
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body.admin-mode .ai-problem-card strong,
body.admin-mode .ai-live-column-head strong,
body.admin-mode .ai-live-agent strong,
body.admin-mode .ai-live-next strong {
  color: var(--admin-text) !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ai-live-columns {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
  gap: 12px !important;
}

body.admin-mode .ai-live-activity {
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid #263241 !important;
  border-radius: 12px !important;
  background: #0b1118 !important;
}

body.admin-mode .ai-live-column-head {
  justify-content: space-between !important;
  gap: 10px !important;
}

body.admin-mode .ai-agent-activity-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.admin-mode .ai-live-agent {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px !important;
  border: 1px solid #273342 !important;
  border-radius: 10px !important;
  background: #111822 !important;
  text-align: left !important;
  cursor: pointer !important;
}

body.admin-mode .ai-live-agent.selected {
  border-color: #8fb8ea !important;
  background: #152132 !important;
}

body.admin-mode .ai-live-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
  background: #a5afbd !important;
}

body.admin-mode .ai-live-dot.working { background: #8fb8ea !important; }
body.admin-mode .ai-live-dot.watching { background: #8bc5ad !important; }
body.admin-mode .ai-live-dot.ready { background: #d6bd7d !important; }

body.admin-mode .ai-live-agent span:not(.ai-live-dot) {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

body.admin-mode .ai-live-agent em {
  flex: 0 0 auto !important;
  max-width: 110px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-style: normal !important;
}

body.admin-mode .ai-live-data-row,
body.admin-mode .ai-live-next {
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 11px !important;
  border: 1px solid #263241 !important;
  border-radius: 10px !important;
  color: var(--admin-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.admin-mode .ai-live-next {
  display: grid !important;
  align-items: start !important;
}

body.admin-mode .ai-connector-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body.admin-mode .ai-connector-strip b.connected,
body.admin-mode .ai-connector-strip b.ok {
  border-color: rgba(139, 197, 173, .45) !important;
}

body.admin-mode .ai-connector-strip b.blocked,
body.admin-mode .ai-connector-strip b.failed {
  border-color: rgba(226, 134, 125, .6) !important;
}

@media (max-width: 1120px) {
  body.admin-mode .ai-org-layout {
    grid-template-columns: 1fr !important;
  }
  body.admin-mode .ai-org-canvas {
    border-right: 0 !important;
    border-bottom: 1px solid var(--admin-line) !important;
  }
  body.admin-mode .ai-compact-manager-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.admin-mode .ai-compact-spine::after,
  body.admin-mode .ai-compact-manager::before,
  body.admin-mode .ai-compact-link {
    display: none !important;
  }
  body.admin-mode .ai-org-layout > .ai-detail-panel {
    grid-template-columns: 1fr !important;
  }
  body.admin-mode .ai-org-layout > .ai-detail-panel .ai-detail-head,
  body.admin-mode .ai-org-layout > .ai-detail-panel .ai-detail-section.primary,
  body.admin-mode .ai-org-layout > .ai-detail-panel .ai-detail-grid,
  body.admin-mode .ai-org-layout > .ai-detail-panel .ai-detail-section:not(.primary) {
    grid-column: 1 !important;
  }
  body.admin-mode .ai-live-columns,
  body.admin-mode .ai-problem-grid,
  body.admin-mode .ai-agent-activity-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  body.admin-mode .ai-org-toolbar,
  body.admin-mode .ai-detail-head,
  body.admin-mode .ai-live-summary {
    flex-direction: column !important;
  }
  body.admin-mode .ai-detail-grid {
    grid-template-columns: 1fr !important;
  }
  body.admin-mode .ai-compact-manager-grid {
    grid-template-columns: 1fr !important;
  }
}

body.admin-mode .ops-cockpit-run {
  padding: 0 14px !important;
  border-color: var(--admin-white) !important;
  background: var(--admin-white) !important;
  color: var(--admin-ink) !important;
}

body.admin-mode .admin-table-wrap {
  margin: 18px !important;
  overflow-x: auto !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 14px !important;
  background: #0b1016 !important;
}

body.admin-mode .admin-table {
  width: 100% !important;
  min-width: 900px !important;
  border-collapse: collapse !important;
  background: #0b1016 !important;
}

body.admin-mode .admin-table th,
body.admin-mode .admin-table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--admin-line) !important;
  text-align: left !important;
  vertical-align: top !important;
}

body.admin-mode .admin-table th {
  background: #111720 !important;
  color: var(--admin-soft) !important;
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-table td {
  color: var(--admin-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-table strong {
  color: var(--admin-text) !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-export-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.admin-mode .admin-export-card {
  min-height: 190px !important;
  padding: 18px !important;
  display: grid !important;
  align-content: space-between !important;
  gap: 18px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 16px !important;
  background: var(--admin-surface-2) !important;
  color: var(--admin-text) !important;
  box-shadow: none !important;
}

body.admin-mode .admin-export-card h3 {
  color: var(--admin-text) !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  letter-spacing: -.02em !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-admin-head {
  margin: 0 !important;
}

body.admin-mode .ops-admin-tabs,
body.admin-mode .ops-admin-content {
  padding: 18px 22px !important;
}

body.admin-mode .ops-admin-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  border-bottom: 1px solid var(--admin-line) !important;
}

body.admin-mode .ops-grid,
body.admin-mode .ops-stat-grid {
  gap: 12px !important;
}

body.admin-mode .ops-row,
body.admin-mode .ops-stat,
body.admin-mode .ops-sim-card,
body.admin-mode .ops-sim-timeline-item {
  border: 1px solid var(--admin-line) !important;
  border-radius: 14px !important;
  background: var(--admin-surface-2) !important;
  color: var(--admin-text) !important;
}

body.admin-mode .empty-state {
  margin: 18px !important;
  padding: 52px 24px !important;
  border: 1px dashed #344052 !important;
  border-radius: 16px !important;
  background: #0b1016 !important;
  color: var(--admin-muted) !important;
}

body.admin-mode .empty-state .e-title {
  color: var(--admin-text) !important;
  font-size: 18px !important;
  font-weight: 850 !important;
}

body.admin-mode .empty-state .e-sub {
  color: var(--admin-muted) !important;
  font-size: 13px !important;
}

body.admin-mode button:focus-visible,
body.admin-mode input:focus-visible {
  outline: 3px solid rgba(143,180,232,.28) !important;
  outline-offset: 2px !important;
}

@media (max-width: 1280px) {
  body.admin-mode .admin-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.admin-mode .admin-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.admin-mode .admin-export-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  body.admin-mode .admin-shell {
    width: min(100vw - 28px, 1760px) !important;
  }

  body.admin-mode .admin-hero,
  body.admin-mode .ops-cockpit-body,
  body.admin-mode .admin-dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  body.admin-mode .admin-actions {
    padding-left: 0 !important;
    border-left: 0 !important;
    grid-template-columns: 1fr 1fr !important;
    justify-content: stretch !important;
  }

  body.admin-mode .admin-date-nav,
  body.admin-mode .admin-btn {
    width: 100% !important;
  }

  body.admin-mode .admin-center-grid {
    grid-template-columns: 1fr !important;
  }

  body.admin-mode .ops-cockpit-board {
    border-right: 0 !important;
    border-bottom: 1px solid var(--admin-line) !important;
  }
}

@media (max-width: 720px) {
  body.admin-mode .admin-shell {
    padding-top: 18px !important;
  }

  body.admin-mode .admin-brand {
    grid-template-columns: 1fr !important;
  }

  body.admin-mode .admin-brand-logo {
    width: 128px !important;
    height: 76px !important;
  }

  body.admin-mode .admin-actions,
  body.admin-mode .admin-kpi-grid,
  body.admin-mode .admin-resource-grid,
  body.admin-mode .admin-market-grid,
  body.admin-mode .admin-export-grid {
    grid-template-columns: 1fr !important;
  }

  body.admin-mode .admin-tabs,
  body.admin-mode .admin-period-tabs {
    width: 100% !important;
    overflow-x: auto !important;
  }

  body.admin-mode .admin-tabs button,
  body.admin-mode .admin-period-tabs button {
    flex: 1 0 auto !important;
    white-space: nowrap !important;
  }
}

/* Direction enterprise polish pass: restrained SaaS cockpit for real executive use. */
body.admin-mode {
  --admin-bg: #050608;
  --admin-bg-soft: #080a0d;
  --admin-surface: #0b0f14;
  --admin-surface-2: #10151d;
  --admin-surface-3: #151b24;
  --admin-line: #242b35;
  --admin-line-strong: #384250;
  --admin-text: #f4f7fb;
  --admin-muted: #a6b0bd;
  --admin-soft: #758090;
  --admin-ink: #07090c;
  --admin-white: #f2f5f8;
  --admin-accent: #8aa7d6;
  --admin-green: #7ab88c;
  --admin-amber: #c7a35f;
  --admin-red: #d27d75;
  background: var(--admin-bg) !important;
  color: var(--admin-text) !important;
  font-family: "Aptos", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
}

body.admin-mode *,
body.admin-mode *::before,
body.admin-mode *::after {
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

body.admin-mode main {
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 340px),
    var(--admin-bg) !important;
}

body.admin-mode header {
  height: 76px !important;
  padding: 0 26px !important;
  background: rgba(5, 6, 8, .96) !important;
  border-bottom: 1px solid var(--admin-line) !important;
}

body.admin-mode .view-switch {
  background: #090c11 !important;
  border-color: var(--admin-line) !important;
  border-radius: 10px !important;
  padding: 3px !important;
}

body.admin-mode .view-switch button {
  min-width: 108px !important;
  min-height: 36px !important;
  border-radius: 7px !important;
  color: var(--admin-muted) !important;
}

body.admin-mode .view-switch button.active {
  background: var(--admin-white) !important;
  color: var(--admin-ink) !important;
}

body.admin-mode .admin-shell {
  width: min(1720px, calc(100vw - 112px)) !important;
  max-width: none !important;
  padding: 30px 0 72px !important;
  gap: 16px !important;
}

body.admin-mode #adminContent {
  display: grid !important;
  gap: 16px !important;
}

body.admin-mode .admin-hero {
  min-height: 118px !important;
  padding: 20px 22px !important;
  border: 1px solid var(--admin-line-strong) !important;
  border-radius: 16px !important;
  background: #090c11 !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.22) !important;
}

body.admin-mode .admin-brand {
  grid-template-columns: 132px minmax(0, 1fr) !important;
  gap: 20px !important;
}

body.admin-mode .admin-brand-logo {
  width: 132px !important;
  height: 76px !important;
  padding: 14px 20px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 12px !important;
  background: #020304 !important;
  object-fit: contain !important;
}

body.admin-mode .admin-eyebrow,
body.admin-mode .ops-eyebrow {
  margin-bottom: 6px !important;
  color: var(--admin-soft) !important;
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

body.admin-mode .admin-hero h1 {
  color: var(--admin-text) !important;
  font-size: 34px !important;
  line-height: 1.05 !important;
  font-weight: 760 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-hero p {
  max-width: 860px !important;
  margin-top: 8px !important;
  color: var(--admin-muted) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-actions {
  grid-template-columns: minmax(192px, auto) auto auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding-left: 22px !important;
  border-left: 1px solid var(--admin-line) !important;
}

body.admin-mode .admin-date-nav,
body.admin-mode .admin-tabs,
body.admin-mode .admin-period-tabs {
  min-height: 40px !important;
  padding: 3px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 11px !important;
  background: #080b10 !important;
}

body.admin-mode .admin-date-nav input {
  width: 134px !important;
  text-align: center !important;
}

body.admin-mode .admin-date-nav button,
body.admin-mode .admin-tabs button,
body.admin-mode .admin-period-tabs button,
body.admin-mode .admin-btn,
body.admin-mode .ops-admin-btn,
body.admin-mode .ops-tab,
body.admin-mode .ops-cockpit-tab,
body.admin-mode .ops-cockpit-run {
  min-height: 34px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--admin-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-btn,
body.admin-mode .ops-admin-btn {
  min-height: 40px !important;
  padding: 0 15px !important;
  border: 1px solid var(--admin-line) !important;
  background: var(--admin-surface-2) !important;
  color: var(--admin-text) !important;
}

body.admin-mode .admin-btn.primary,
body.admin-mode .ops-admin-btn.primary,
body.admin-mode .ops-cockpit-run {
  border-color: var(--admin-white) !important;
  background: var(--admin-white) !important;
  color: var(--admin-ink) !important;
}

body.admin-mode .admin-date-nav button:hover,
body.admin-mode .admin-btn:hover,
body.admin-mode .ops-admin-btn:hover,
body.admin-mode .ops-tab:hover,
body.admin-mode .ops-cockpit-tab:hover,
body.admin-mode .ops-cockpit-run:hover {
  transform: none !important;
  border-color: var(--admin-line-strong) !important;
  background: var(--admin-surface-3) !important;
  color: var(--admin-text) !important;
}

body.admin-mode .admin-btn.primary:hover,
body.admin-mode .ops-admin-btn.primary:hover,
body.admin-mode .ops-cockpit-run:hover {
  background: #ffffff !important;
  color: var(--admin-ink) !important;
}

body.admin-mode .admin-tabs button.active,
body.admin-mode .admin-period-tabs button.active,
body.admin-mode .ops-tab.active,
body.admin-mode .ops-cockpit-tab.active {
  background: var(--admin-white) !important;
  border-color: var(--admin-white) !important;
  color: var(--admin-ink) !important;
}

body.admin-mode .admin-center-grid {
  gap: 12px !important;
}

body.admin-mode .admin-center-card {
  min-height: 86px !important;
  padding: 16px 18px !important;
  border-radius: 13px !important;
  border-color: var(--admin-line) !important;
  background: var(--admin-surface) !important;
}

body.admin-mode .admin-center-card.active {
  border-color: #c8d2df !important;
  background: #111821 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32) !important;
}

body.admin-mode .admin-center-card::before {
  width: 2px !important;
}

body.admin-mode .admin-center-card.active::before {
  background: var(--admin-accent) !important;
}

body.admin-mode .admin-center-card .top {
  margin-bottom: 10px !important;
}

body.admin-mode .admin-center-card .name {
  font-size: 15px !important;
  font-weight: 760 !important;
}

body.admin-mode .admin-center-card .meta {
  color: var(--admin-muted) !important;
  font-size: 12px !important;
}

body.admin-mode .admin-panel,
body.admin-mode .ops-cockpit {
  border: 1px solid var(--admin-line) !important;
  border-radius: 14px !important;
  background: var(--admin-surface) !important;
  box-shadow: 0 18px 58px rgba(0,0,0,.18) !important;
}

body.admin-mode .admin-section-title,
body.admin-mode .ops-admin-head,
body.admin-mode .ops-cockpit-head {
  padding: 18px 20px !important;
  background: #0c1117 !important;
  border-bottom: 1px solid var(--admin-line) !important;
}

body.admin-mode .admin-section-title h2,
body.admin-mode .ops-admin-head h2,
body.admin-mode .ops-cockpit-title h2 {
  font-size: 19px !important;
  line-height: 1.15 !important;
  font-weight: 760 !important;
}

body.admin-mode .admin-section-title p,
body.admin-mode .ops-admin-head p,
body.admin-mode .ops-cockpit-title p {
  margin-top: 5px !important;
  color: var(--admin-muted) !important;
  font-size: 12.5px !important;
}

body.admin-mode .admin-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 16px !important;
}

body.admin-mode .admin-kpi,
body.admin-mode .admin-resource-card,
body.admin-mode .admin-market-card,
body.admin-mode .admin-insight,
body.admin-mode .ops-cockpit-card,
body.admin-mode .ops-row,
body.admin-mode .ops-stat,
body.admin-mode .ops-sim-card,
body.admin-mode .ops-sim-timeline-item {
  border: 1px solid var(--admin-line) !important;
  border-radius: 12px !important;
  background: var(--admin-surface-2) !important;
}

body.admin-mode .admin-kpi {
  min-height: 100px !important;
  padding: 15px !important;
}

body.admin-mode .admin-kpi .k,
body.admin-mode .admin-resource-card .k,
body.admin-mode .admin-market-card .k,
body.admin-mode .ops-cockpit-card .label,
body.admin-mode .admin-table th {
  color: var(--admin-soft) !important;
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

body.admin-mode .admin-kpi .v {
  color: var(--admin-text) !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 780 !important;
}

body.admin-mode .admin-kpi .s,
body.admin-mode .admin-resource-card .s,
body.admin-mode .admin-market-card .s,
body.admin-mode .admin-export-card p,
body.admin-mode .admin-table td,
body.admin-mode .ops-cockpit-card p,
body.admin-mode .ops-cockpit-card li,
body.admin-mode .ops-cockpit-event span,
body.admin-mode .ops-cockpit-event small {
  color: var(--admin-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

body.admin-mode .admin-dashboard-grid,
body.admin-mode .admin-resource-grid,
body.admin-mode .admin-market-grid,
body.admin-mode .admin-export-grid {
  gap: 12px !important;
  padding: 16px !important;
}

body.admin-mode .admin-dashboard-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr) !important;
}

body.admin-mode .admin-resource-card,
body.admin-mode .admin-market-card {
  min-height: 104px !important;
  padding: 16px !important;
}

body.admin-mode .ops-training-board {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap: 12px !important;
  margin: 14px 0 !important;
}

body.admin-mode .ops-training-card {
  padding: 16px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 12px !important;
  background: var(--admin-surface-2) !important;
}

body.admin-mode .ops-training-card h3 {
  margin: 8px 0 6px !important;
  color: var(--admin-text) !important;
  font-size: 18px !important;
  font-weight: 820 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-training-card p,
body.admin-mode .ops-training-case span,
body.admin-mode .ops-agent-meter span {
  color: var(--admin-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 520 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-training-score {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

body.admin-mode .ops-training-score strong {
  color: var(--admin-text) !important;
  font-size: 46px !important;
  line-height: 1 !important;
  font-weight: 860 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-training-score small {
  color: var(--admin-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-training-matrix {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.admin-mode .ops-training-case {
  display: grid !important;
  gap: 5px !important;
  padding: 11px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 10px !important;
  background: #0b1016 !important;
}

body.admin-mode .ops-training-case strong,
body.admin-mode .ops-agent-meter strong {
  color: var(--admin-text) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .ops-training-case.ok {
  border-color: rgba(139, 197, 173, .5) !important;
}

body.admin-mode .ops-training-case.warn {
  border-color: rgba(214, 189, 125, .55) !important;
}

body.admin-mode .ops-training-case.danger {
  border-color: rgba(226, 134, 125, .6) !important;
}

body.admin-mode .ops-agent-meters {
  display: grid !important;
  gap: 8px !important;
}

body.admin-mode .ops-agent-meter {
  display: grid !important;
  grid-template-columns: minmax(150px, .7fr) minmax(0, 1fr) 34px !important;
  gap: 10px !important;
  align-items: center !important;
}

body.admin-mode .ops-agent-meter .bar {
  height: 8px !important;
  border-radius: 99px !important;
  background: #1b2430 !important;
  overflow: hidden !important;
}

body.admin-mode .ops-agent-meter .bar i {
  display: block !important;
  width: clamp(4%, var(--value, 0%), 100%) !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: #8fb8ea !important;
}

body.admin-mode .admin-resource-card .v,
body.admin-mode .admin-market-card .v,
body.admin-mode .ops-cockpit-card .value {
  margin-top: 8px !important;
  color: var(--admin-text) !important;
  font-size: 24px !important;
  line-height: 1.05 !important;
  font-weight: 780 !important;
}

body.admin-mode .admin-insight-list {
  padding: 16px !important;
  gap: 10px !important;
}

body.admin-mode .admin-insight {
  padding: 14px !important;
}

body.admin-mode .admin-benchmark-panel {
  background: #0a0e13 !important;
}

body.admin-mode .admin-benchmark-score {
  min-width: 164px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 12px !important;
  background: var(--admin-surface-2) !important;
  text-align: right !important;
}

body.admin-mode .admin-benchmark-score strong {
  display: block !important;
  color: var(--admin-text) !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 780 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-benchmark-score span {
  display: block !important;
  margin-top: 4px !important;
  color: var(--admin-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-benchmark-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 16px !important;
}

body.admin-mode .admin-benchmark-card {
  min-height: 132px !important;
  padding: 14px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 12px !important;
  background: var(--admin-surface-2) !important;
}

body.admin-mode .admin-benchmark-status {
  display: inline-flex !important;
  min-height: 22px !important;
  align-items: center !important;
  padding: 0 8px !important;
  border: 1px solid rgba(138,167,214,.38) !important;
  border-radius: 7px !important;
  background: rgba(138,167,214,.10) !important;
  color: #c8d9f2 !important;
  font-size: 10px !important;
  font-weight: 720 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-benchmark-card.roadmap .admin-benchmark-status {
  border-color: rgba(199,163,95,.42) !important;
  background: rgba(199,163,95,.12) !important;
  color: #f0d49a !important;
}

body.admin-mode .admin-benchmark-card strong {
  display: block !important;
  margin-top: 12px !important;
  color: var(--admin-text) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 760 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-benchmark-card p {
  margin-top: 8px !important;
  color: var(--admin-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.staff-mode .guest-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

body.staff-mode .guest-chip,
body.admin-mode .guest-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(151, 166, 187, 0.26);
  background: rgba(255, 255, 255, 0.04);
  color: #dbe6f5;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.02em;
  line-height: 1;
  -webkit-text-fill-color: currentColor;
}

body.staff-mode .guest-chip.ok,
body.admin-mode .guest-chip.ok {
  border-color: rgba(76, 175, 120, 0.34);
  background: rgba(76, 175, 120, 0.1);
  color: #bde8cb;
}

body.staff-mode .guest-chip.warn,
body.admin-mode .guest-chip.warn {
  border-color: rgba(214, 168, 82, 0.4);
  background: rgba(214, 168, 82, 0.1);
  color: #f0d39a;
}

body.staff-mode .guest-chip.danger,
body.admin-mode .guest-chip.danger {
  border-color: rgba(226, 105, 96, 0.4);
  background: rgba(226, 105, 96, 0.1);
  color: #f0b1ac;
}

body.staff-mode .guest-engagement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.staff-mode .guest-action-card {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 128px;
}

body.staff-mode .guest-action-card .k {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.staff-mode .guest-action-card .v {
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
}

body.staff-mode .guest-action-card .s {
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.35;
  min-height: 30px;
}

body.staff-mode .guest-action-card button,
body.staff-mode .guest-copy-btn {
  border: 1px solid rgba(151, 166, 187, 0.25);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 850;
  cursor: pointer;
}

body.staff-mode .guest-action-card button:hover,
body.staff-mode .guest-copy-btn:hover {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.08);
}

body.staff-mode .guest-upsell-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

body.staff-mode .guest-upsell-row button {
  border: 1px solid rgba(151, 166, 187, 0.24);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

body.staff-mode .guest-upsell-row button:hover {
  background: rgba(255, 255, 255, 0.08);
}

body.admin-mode .admin-client-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

body.admin-mode .admin-client-grid,
body.admin-mode .admin-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

body.admin-mode .admin-feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.admin-mode .admin-client-kpi,
body.admin-mode .admin-feature-card {
  border: 1px solid rgba(151, 166, 187, 0.18);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 10px;
  padding: 14px;
}

body.admin-mode .admin-client-kpi .k,
body.admin-mode .admin-feature-card .k {
  color: rgba(170, 185, 207, 0.82);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.admin-mode .admin-client-kpi .v,
body.admin-mode .admin-feature-card .v {
  color: #f7fbff;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-top: 7px;
  -webkit-text-fill-color: currentColor;
}

body.admin-mode .admin-client-kpi .s,
body.admin-mode .admin-feature-card .s,
body.admin-mode .admin-feature-card p {
  color: rgba(196, 207, 224, 0.7);
  font-size: 12px;
  line-height: 1.45;
  margin-top: 4px;
}

body.admin-mode .admin-feature-card strong {
  display: block;
  color: #f7fbff;
  font-size: 14px;
  margin-top: 7px;
  -webkit-text-fill-color: currentColor;
}

body.admin-mode .admin-table .engagement-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 260px;
}

@media (max-width: 900px) {
  body.staff-mode .guest-engagement-grid,
  body.admin-mode .admin-client-grid,
  body.admin-mode .admin-feature-grid {
    grid-template-columns: 1fr;
  }
}

body.admin-mode .admin-insight strong,
body.admin-mode .ops-cockpit-agent .agent-meta strong,
body.admin-mode .ops-cockpit-event strong,
body.admin-mode .admin-table strong,
body.admin-mode .admin-export-card h3 {
  color: var(--admin-text) !important;
  font-weight: 760 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-status,
body.admin-mode .admin-pill,
body.admin-mode .ops-pill {
  border-radius: 7px !important;
  min-height: 23px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--admin-muted) !important;
  background: #111720 !important;
  border: 1px solid var(--admin-line-strong) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.admin-mode .admin-status.active,
body.admin-mode .admin-pill.paid,
body.admin-mode .admin-pill.sent,
body.admin-mode .ops-pill.sent,
body.admin-mode .ops-pill.finished {
  color: #c9ecd4 !important;
  background: rgba(122,184,140,.12) !important;
  border-color: rgba(122,184,140,.42) !important;
}

body.admin-mode .admin-status.planned,
body.admin-mode .admin-pill.arrived,
body.admin-mode .admin-pill.medium,
body.admin-mode .ops-pill.medium,
body.admin-mode .ops-pill.queued,
body.admin-mode .ops-pill.running {
  color: #f0d49a !important;
  background: rgba(199,163,95,.12) !important;
  border-color: rgba(199,163,95,.42) !important;
}

body.admin-mode .admin-pill.failed,
body.admin-mode .admin-pill.high,
body.admin-mode .admin-pill.critical,
body.admin-mode .ops-pill.failed,
body.admin-mode .ops-pill.high {
  color: #f0b7b2 !important;
  background: rgba(210,125,117,.12) !important;
  border-color: rgba(210,125,117,.46) !important;
}

body.admin-mode .admin-pill.formule,
body.admin-mode .admin-pill.laser {
  color: #e2e9f2 !important;
  background: #141b25 !important;
  border-color: #3a4554 !important;
}

body.admin-mode .ops-cockpit-body {
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, .65fr) !important;
  min-height: 390px !important;
  background: var(--admin-surface) !important;
}

body.admin-mode .ops-cockpit-board,
body.admin-mode .ops-cockpit-side {
  background: #090d12 !important;
  padding: 18px !important;
}

body.admin-mode .ops-cockpit-timeline {
  border-radius: 12px !important;
  border-color: var(--admin-line) !important;
  background: #080c11 !important;
}

body.admin-mode .ops-cockpit-row {
  min-height: 78px !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
}

body.admin-mode .ops-cockpit-hour {
  padding: 17px 0 0 16px !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

body.admin-mode .ops-cockpit-slots {
  padding: 11px !important;
  gap: 9px !important;
}

body.admin-mode .ops-cockpit-event {
  min-width: min(220px, 100%) !important;
  padding: 11px 12px !important;
  border-radius: 10px !important;
  border: 1px solid #334050 !important;
  border-left: 3px solid var(--admin-accent) !important;
  background: #121923 !important;
}

body.admin-mode .ops-cockpit-event.formula {
  border-left-color: var(--admin-amber) !important;
}

body.admin-mode .ops-cockpit-event.laser {
  border-left-color: var(--admin-green) !important;
}

body.admin-mode .ops-cockpit-card {
  padding: 16px !important;
}

body.admin-mode .ops-cockpit-meter-row {
  grid-template-columns: 68px minmax(0, 1fr) 40px !important;
  gap: 9px !important;
}

body.admin-mode .ops-cockpit-bar {
  height: 6px !important;
  background: #202833 !important;
}

body.admin-mode .admin-table-wrap {
  margin: 16px !important;
  border-radius: 12px !important;
  background: #080c11 !important;
}

body.admin-mode .admin-table {
  background: #080c11 !important;
}

body.admin-mode .admin-table th {
  background: #0e141b !important;
  border-bottom-color: var(--admin-line-strong) !important;
}

body.admin-mode .admin-table td {
  background: #080c11 !important;
  border-bottom-color: var(--admin-line) !important;
}

body.admin-mode .admin-table tr:hover td {
  background: #0d131b !important;
}

body.admin-mode .admin-plan-cell,
body.admin-mode .admin-plan-main,
body.admin-mode .admin-plan-sub {
  color: inherit !important;
}

body.admin-mode .admin-export-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.admin-mode .admin-export-card {
  min-height: 178px !important;
  padding: 16px !important;
  border-radius: 12px !important;
  border-color: var(--admin-line) !important;
  background: var(--admin-surface-2) !important;
}

body.admin-mode .ops-admin-tabs,
body.admin-mode .ops-admin-content {
  padding: 16px 20px !important;
}

body.admin-mode .empty-state {
  margin: 16px !important;
  background: #080c11 !important;
  border-color: #334050 !important;
}

@media (max-width: 1320px) {
  body.admin-mode .admin-shell {
    width: min(100vw - 48px, 1720px) !important;
  }

  body.admin-mode .admin-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding-left: 18px !important;
  }

  body.admin-mode .admin-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.admin-mode .admin-benchmark-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  body.admin-mode .admin-hero,
  body.admin-mode .ops-cockpit-body,
  body.admin-mode .admin-dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  body.admin-mode .admin-actions {
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  body.admin-mode .admin-center-grid,
  body.admin-mode .admin-export-grid,
  body.admin-mode .admin-benchmark-grid {
    grid-template-columns: 1fr !important;
  }
}

body.admin-mode .admin-hero h1,
body.admin-mode .admin-section-title h2,
body.admin-mode .ops-cockpit-title h2,
body.admin-mode .ops-cockpit-board-head strong,
body.admin-mode .admin-center-card .name,
body.admin-mode .admin-export-card h3 {
  font-family: "Aptos", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

body.admin-mode .admin-hero h1 {
  font-size: 32px !important;
}

/* Pro polish layer: final visual pass using make-interfaces-feel-better principles. */
:root {
  --pro-font: "Inter", "Aptos", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --pro-mono: "SFMono-Regular", "Cascadia Mono", "Roboto Mono", ui-monospace, monospace;
  --pro-ease: cubic-bezier(.2, 0, 0, 1);
  --pro-bg: #05070a;
  --pro-bg-2: #080b10;
  --pro-surface: #0d1218;
  --pro-surface-2: #121821;
  --pro-surface-3: #171f2a;
  --pro-line: #263241;
  --pro-line-soft: rgba(148, 163, 184, .18);
  --pro-text: #f7f9fc;
  --pro-paper: #f7f7f2;
  --pro-paper-2: #fbfaf6;
  --pro-ink: #05070a;
  --pro-muted: #a8b3c2;
  --pro-faint: #748195;
  --pro-accent: #8fd8d5;
  --pro-accent-2: #a4469f;
  --pro-blue: #91b8ee;
  --pro-gold: #d5b46a;
  --pro-green: #80c995;
  --pro-danger: #ef8b83;
  --pro-radius-lg: 22px;
  --pro-radius-md: 16px;
  --pro-radius-sm: 10px;
  --pro-shadow: 0 18px 60px rgba(0, 0, 0, .32);
  --pro-shadow-soft: 0 10px 28px rgba(0, 0, 0, .22);
}

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--pro-font) !important;
  font-variant-numeric: tabular-nums;
  color: var(--pro-text);
}

body,
button,
input,
select,
textarea {
  font-feature-settings: "tnum" 1, "cv02" 1, "cv03" 1, "cv04" 1;
}

h1, h2, h3,
.card-title,
.section-title,
.staff-title,
.admin-hero h1,
.admin-section-title h2,
.ops-cockpit-title h2,
.planning-head h3,
.res-title,
.ai-agent-title {
  text-wrap: balance;
}

p,
.card-desc,
.admin-hero p,
.admin-section-title p,
.muted,
.sub,
.hint,
.desc,
.res-sub,
.ops-cockpit-title p {
  text-wrap: pretty;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button,
.btn-primary,
.btn-secondary,
.btn-new,
.flow-btn,
.pay-btn,
.tab,
.seg-btn,
.dur-pill,
.date-nav button,
.admin-tab,
.admin-period-btn,
.admin-action-btn,
.ops-admin-tab,
.slot,
.formule-card,
.quick-chip,
.agent-stack-node,
.admin-center-card,
.staff-resource-tabs button {
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter;
  transition-duration: 170ms;
  transition-timing-function: var(--pro-ease);
}

button,
.btn-primary,
.btn-secondary,
.btn-new,
.flow-btn,
.pay-btn,
.tab,
.seg-btn,
.dur-pill,
.date-nav button,
.admin-tab,
.admin-period-btn,
.admin-action-btn,
.ops-admin-tab,
.quick-chip,
.staff-resource-tabs button {
  min-height: 40px;
}

button:active:not(:disabled),
.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.btn-new:active:not(:disabled),
.flow-btn:active:not(:disabled),
.pay-btn:active:not(:disabled),
.seg-btn:active:not(:disabled),
.dur-pill:active:not(:disabled),
.slot:active:not(:disabled),
.formule-card:active:not(.disabled),
.admin-tab:active:not(:disabled),
.admin-period-btn:active:not(:disabled),
.admin-action-btn:active:not(:disabled),
.ops-admin-tab:active:not(:disabled),
.quick-chip:active:not(:disabled) {
  transform: scale(.97) !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.slot:focus-visible,
.formule-card:focus-visible,
.booking:focus-visible,
.laser-board-booking:focus-visible {
  outline: 3px solid rgba(143, 216, 213, .34) !important;
  outline-offset: 2px !important;
}

button:disabled,
.disabled,
.is-disabled {
  cursor: not-allowed !important;
  opacity: .56 !important;
}

input,
select,
textarea {
  min-height: 44px;
  caret-color: var(--pro-accent);
}

input::placeholder,
textarea::placeholder {
  color: rgba(168, 179, 194, .72) !important;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 1 !important;
  filter: invert(1) brightness(1.3) saturate(.2);
}

body.client-mode,
body.staff-mode:not(.staff-light):not(.admin-mode),
body.admin-mode {
  background:
    radial-gradient(circle at top left, rgba(143, 216, 213, .08), transparent 34vw),
    radial-gradient(circle at top right, rgba(164, 70, 159, .08), transparent 32vw),
    var(--pro-bg) !important;
  color: var(--pro-text) !important;
}

body.client-mode main,
body.staff-mode:not(.staff-light):not(.admin-mode) main,
body.admin-mode main {
  background: transparent !important;
}

/* Client booking: mature Fun Galaxy style, not gaming UI. */
body.client-mode header {
  background: rgba(5, 7, 10, .78) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .13) !important;
  backdrop-filter: blur(18px);
}

body.client-mode .client-wrap {
  width: min(1100px, calc(100vw - 42px)) !important;
  padding-top: 126px !important;
}

body.client-mode .step,
body.client-mode .success-wrap,
body.client-mode .customer-panel {
  background: rgba(8, 11, 16, .88) !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 24px !important;
  box-shadow: var(--pro-shadow) !important;
}

body.client-mode .card,
body.client-mode .formula-planner,
body.client-mode .formula-choice,
body.client-mode .slot-section,
body.client-mode .summary-card {
  background: linear-gradient(180deg, rgba(23, 31, 42, .92), rgba(16, 21, 29, .92)) !important;
  border: 1px solid rgba(148, 163, 184, .19) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, var(--pro-shadow-soft) !important;
}

body.client-mode .card::before,
body.client-mode .section-card::before,
body.client-mode .admin-panel::before {
  display: none !important;
}

body.client-mode .card-title,
body.client-mode h1,
body.client-mode h2,
body.client-mode h3 {
  color: #fbfcff !important;
  letter-spacing: 0 !important;
}

body.client-mode .card-desc,
body.client-mode .muted,
body.client-mode .hint,
body.client-mode .sub {
  color: var(--pro-muted) !important;
}

body.client-mode .input,
body.client-mode input,
body.client-mode textarea,
body.client-mode select {
  background: rgba(255, 255, 255, .96) !important;
  border: 2px solid rgba(5, 7, 10, .88) !important;
  border-radius: 18px !important;
  color: #05070a !important;
  -webkit-text-fill-color: #05070a !important;
  box-shadow: 0 0 0 3px rgba(143, 216, 213, .22) !important;
}

body.client-mode .input:focus,
body.client-mode input:focus,
body.client-mode textarea:focus,
body.client-mode select:focus {
  border-color: #05070a !important;
  box-shadow: 0 0 0 4px rgba(143, 216, 213, .36) !important;
}

body.client-mode .segmented {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 18px !important;
  padding: 3px !important;
  overflow: hidden !important;
}

body.client-mode .seg-btn {
  border: 0 !important;
  border-radius: 14px !important;
  color: #f5f7fb !important;
  background: transparent !important;
}

body.client-mode .seg-btn.active {
  background: #a4469f !important;
  color: var(--pro-paper-2) !important;
  -webkit-text-fill-color: var(--pro-paper-2) !important;
  box-shadow: none !important;
}

body.client-mode .dur-pill,
body.client-mode .formula-order-item,
body.client-mode .activity-time-card,
body.client-mode .formula-summary-tile {
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid rgba(148, 163, 184, .2) !important;
  border-radius: 16px !important;
  color: #f8fafc !important;
}

body.client-mode .dur-pill:hover,
body.client-mode .formula-order-item:hover,
body.client-mode .activity-time-card:hover {
  border-color: rgba(143, 216, 213, .48) !important;
  background: rgba(143, 216, 213, .08) !important;
}

body.client-mode .dur-pill.active,
body.client-mode .activity-time-card.active,
body.client-mode .formula-order-item.active {
  background: #f7f7f5 !important;
  border-color: #f7f7f5 !important;
  color: #07090d !important;
  box-shadow: 0 0 0 3px rgba(143, 216, 213, .28) !important;
}

body.client-mode .formule-card {
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 18px !important;
  color: #f9fbff !important;
}

body.client-mode .formule-card:hover:not(.disabled) {
  border-color: rgba(213, 180, 106, .58) !important;
  background: rgba(213, 180, 106, .08) !important;
  transform: translateY(-1px) !important;
}

body.client-mode .formule-card.active {
  border-color: rgba(213, 180, 106, .82) !important;
  background: linear-gradient(180deg, rgba(213, 180, 106, .16), rgba(213, 180, 106, .06)) !important;
}

body.client-mode .slot {
  background: rgba(255, 255, 255, .055) !important;
  border: 1px solid rgba(148, 163, 184, .2) !important;
  border-radius: 16px !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

body.client-mode .slot:hover:not(.disabled) {
  border-color: rgba(143, 216, 213, .54) !important;
  background: rgba(143, 216, 213, .08) !important;
  transform: translateY(-1px) !important;
}

body.client-mode .slot.active {
  background: #f7f7f5 !important;
  border-color: #f7f7f5 !important;
  color: #07090d !important;
  box-shadow: 0 0 0 3px rgba(143, 216, 213, .28) !important;
}

body.client-mode .btn-primary,
body.client-mode .flow-btn,
body.client-mode .pay-btn {
  background: #f7f7f5 !important;
  border: 1px solid #f7f7f5 !important;
  color: #05070a !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

body.client-mode .btn-primary:hover,
body.client-mode .flow-btn:hover,
body.client-mode .pay-btn:hover {
  background: var(--pro-paper-2) !important;
  filter: brightness(1.02);
}

body.client-mode .btn-secondary,
body.client-mode .back-btn {
  background: rgba(164, 70, 159, .92) !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  color: var(--pro-paper-2) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

body.client-mode .alert,
body.client-mode .info-box,
body.client-mode .formula-notice,
body.client-mode .booking-alt-option {
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  color: #eef3f8 !important;
  border-radius: 16px !important;
}

body.client-mode .alert.error,
body.client-mode .error-banner {
  background: rgba(239, 139, 131, .1) !important;
  border-color: rgba(239, 139, 131, .34) !important;
  color: #ffd7d3 !important;
}

/* Staff back office: sober dark ERP. */
body.staff-mode:not(.staff-light):not(.admin-mode) {
  --bg: var(--pro-bg);
  --bg-2: var(--pro-bg-2);
  --card: var(--pro-surface);
  --card-2: var(--pro-surface-2);
  --border: var(--pro-line);
  --text: var(--pro-text);
  --text-2: var(--pro-muted);
  --text-3: var(--pro-faint);
}

body.staff-mode:not(.staff-light):not(.admin-mode) header {
  background: rgba(5, 7, 10, .84) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .13) !important;
  backdrop-filter: blur(18px);
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-wrap,
body.staff-mode:not(.staff-light):not(.admin-mode) .staff-page,
body.staff-mode:not(.staff-light):not(.admin-mode) .staff-shell {
  background: transparent !important;
  color: var(--pro-text) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-head,
body.staff-mode:not(.staff-light):not(.admin-mode) .kpi,
body.staff-mode:not(.staff-light):not(.admin-mode) .planning-box,
body.staff-mode:not(.staff-light):not(.admin-mode) .res-section,
body.staff-mode:not(.staff-light):not(.admin-mode) .table-box,
body.staff-mode:not(.staff-light):not(.admin-mode) .quick-panel,
body.staff-mode:not(.staff-light):not(.admin-mode) .staff-card,
body.staff-mode:not(.staff-light):not(.admin-mode) .ops-admin-box,
body.staff-mode:not(.staff-light):not(.admin-mode) .qb-modal,
body.staff-mode:not(.staff-light):not(.admin-mode) .edit-modal {
  background: rgba(13, 18, 24, .96) !important;
  border: 1px solid rgba(148, 163, 184, .17) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  color: var(--pro-text) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-theme-switch {
  display: flex !important;
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(148, 163, 184, .18) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .theme-btn.active,
body.staff-mode:not(.staff-light):not(.admin-mode) .staff-resource-tabs button.active,
body.staff-mode:not(.staff-light):not(.admin-mode) .staff-tab.active,
body.staff-mode:not(.staff-light):not(.admin-mode) .filter-btn.active {
  background: #f7f7f5 !important;
  border-color: #f7f7f5 !important;
  color: #05070a !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-resource-tab.active,
body.staff-mode:not(.staff-light):not(.admin-mode) .staff-resource-tab.active * {
  color: #05070a !important;
  -webkit-text-fill-color: #05070a !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .date-nav,
body.staff-mode:not(.staff-light):not(.admin-mode) .staff-resource-tabs,
body.staff-mode:not(.staff-light):not(.admin-mode) .filters,
body.staff-mode:not(.staff-light):not(.admin-mode) .search-box {
  background: rgba(255, 255, 255, .035) !important;
  border: 1px solid rgba(148, 163, 184, .17) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) input,
body.staff-mode:not(.staff-light):not(.admin-mode) select,
body.staff-mode:not(.staff-light):not(.admin-mode) textarea,
body.staff-mode:not(.staff-light):not(.admin-mode) .qb-modal input,
body.staff-mode:not(.staff-light):not(.admin-mode) .edit-modal input {
  background: #080c12 !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  color: #f7f9fc !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) input:focus,
body.staff-mode:not(.staff-light):not(.admin-mode) select:focus,
body.staff-mode:not(.staff-light):not(.admin-mode) textarea:focus {
  border-color: rgba(143, 216, 213, .58) !important;
  box-shadow: 0 0 0 3px rgba(143, 216, 213, .15) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .btn-new,
body.staff-mode:not(.staff-light):not(.admin-mode) .primary,
body.staff-mode:not(.staff-light):not(.admin-mode) .save-btn {
  background: #f7f7f5 !important;
  border: 1px solid #f7f7f5 !important;
  color: #05070a !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .secondary,
body.staff-mode:not(.staff-light):not(.admin-mode) .ghost,
body.staff-mode:not(.staff-light):not(.admin-mode) .close-btn,
body.staff-mode:not(.staff-light):not(.admin-mode) .date-nav button {
  background: #0b1017 !important;
  border: 1px solid rgba(148, 163, 184, .2) !important;
  color: #eef3f8 !important;
  box-shadow: none !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .planning-grid-wrap,
body.staff-mode:not(.staff-light):not(.admin-mode) .laser-board,
body.staff-mode:not(.staff-light):not(.admin-mode) .planning-table {
  background: #070a0f !important;
  border-color: rgba(148, 163, 184, .16) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .time-col,
body.staff-mode:not(.staff-light):not(.admin-mode) .hour-cell,
body.staff-mode:not(.staff-light):not(.admin-mode) .lane-header,
body.staff-mode:not(.staff-light):not(.admin-mode) .laser-board th,
body.staff-mode:not(.staff-light):not(.admin-mode) .laser-board td {
  background: #080c12 !important;
  border-color: rgba(148, 163, 184, .16) !important;
  color: #dce6f3 !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .booking,
body.staff-mode:not(.staff-light):not(.admin-mode) .laser-board-booking,
body.staff-mode:not(.staff-light):not(.admin-mode) .res-row {
  background: #141b25 !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-left: 1px solid rgba(145, 184, 238, .72) !important;
  border-radius: 10px !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .booking:hover,
body.staff-mode:not(.staff-light):not(.admin-mode) .laser-board-booking:hover,
body.staff-mode:not(.staff-light):not(.admin-mode) .res-row:hover {
  border-color: rgba(145, 184, 238, .5) !important;
  background: #18212d !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .booking.is-formula,
body.staff-mode:not(.staff-light):not(.admin-mode) .laser-board-booking.is-formula,
body.staff-mode:not(.staff-light):not(.admin-mode) .res-row.is-formula {
  background: #211908 !important;
  border-color: rgba(213, 180, 106, .5) !important;
  border-left-color: var(--pro-gold) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .booking.is-laser-multi,
body.staff-mode:not(.staff-light):not(.admin-mode) .laser-board-booking.is-laser-multi,
body.staff-mode:not(.staff-light):not(.admin-mode) .res-row.is-laser-multi {
  background: #1f1515 !important;
  border-color: rgba(239, 139, 131, .44) !important;
  border-left-color: var(--pro-danger) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .booking.paid,
body.staff-mode:not(.staff-light):not(.admin-mode) .laser-board-booking.paid,
body.staff-mode:not(.staff-light):not(.admin-mode) .res-row.paid {
  background: #102017 !important;
  border-color: rgba(128, 201, 149, .42) !important;
  border-left-color: var(--pro-green) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .booking.arr,
body.staff-mode:not(.staff-light):not(.admin-mode) .laser-board-booking.arr,
body.staff-mode:not(.staff-light):not(.admin-mode) .res-row.arr {
  background: #201909 !important;
  border-color: rgba(213, 180, 106, .44) !important;
  border-left-color: var(--pro-gold) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .booking-name,
body.staff-mode:not(.staff-light):not(.admin-mode) .res-name,
body.staff-mode:not(.staff-light):not(.admin-mode) .laser-board-booking strong {
  color: #fbfcff !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .b-tag,
body.staff-mode:not(.staff-light):not(.admin-mode) .type-badge,
body.staff-mode:not(.staff-light):not(.admin-mode) .status-pill,
body.staff-mode:not(.staff-light):not(.admin-mode) .reservation-tags span {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  color: #eef3f8 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .type-badge.formule,
body.staff-mode:not(.staff-light):not(.admin-mode) .booking.is-formula .b-tag,
body.staff-mode:not(.staff-light):not(.admin-mode) .laser-board-booking.is-formula .b-tag {
  background: rgba(213, 180, 106, .16) !important;
  border-color: rgba(213, 180, 106, .42) !important;
  color: #ffe3a1 !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .type-badge.laser,
body.staff-mode:not(.staff-light):not(.admin-mode) .laser-booking .b-tag {
  background: rgba(145, 184, 238, .14) !important;
  border-color: rgba(145, 184, 238, .38) !important;
  color: #cae0ff !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .table-box table,
body.staff-mode:not(.staff-light):not(.admin-mode) .staff-table,
body.staff-mode:not(.staff-light):not(.admin-mode) .data-table {
  background: #080c12 !important;
  color: #eef3f8 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) th,
body.staff-mode:not(.staff-light):not(.admin-mode) td {
  border-color: rgba(148, 163, 184, .15) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) th {
  background: #0d1218 !important;
  color: #b8c5d7 !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) td {
  background: #080c12 !important;
  color: #edf3fb !important;
}

/* Staff light remains plain SaaS, not washed out. */
body.staff-mode.staff-light:not(.admin-mode) {
  --bg: #f6f7f9;
  --bg-2: #eef1f5;
  --card: #fbfaf6;
  --card-2: #f8fafc;
  --border: #d7dde6;
  --text: #111827;
  --text-2: #4b5563;
  --text-3: #6b7280;
  background: #f6f7f9 !important;
  color: #111827 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .staff-head,
body.staff-mode.staff-light:not(.admin-mode) .kpi,
body.staff-mode.staff-light:not(.admin-mode) .planning-box,
body.staff-mode.staff-light:not(.admin-mode) .res-section,
body.staff-mode.staff-light:not(.admin-mode) .table-box,
body.staff-mode.staff-light:not(.admin-mode) .quick-panel,
body.staff-mode.staff-light:not(.admin-mode) .staff-card,
body.staff-mode.staff-light:not(.admin-mode) .qb-modal,
body.staff-mode.staff-light:not(.admin-mode) .edit-modal {
  background: #fbfaf6 !important;
  border: 1px solid #d9dee7 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  color: #111827 !important;
}

body.staff-mode.staff-light:not(.admin-mode) input,
body.staff-mode.staff-light:not(.admin-mode) select,
body.staff-mode.staff-light:not(.admin-mode) textarea {
  background: #fbfaf6 !important;
  border: 1px solid #cfd6e1 !important;
  color: #111827 !important;
  box-shadow: none !important;
}

body.staff-mode.staff-light:not(.admin-mode) .booking,
body.staff-mode.staff-light:not(.admin-mode) .laser-board-booking,
body.staff-mode.staff-light:not(.admin-mode) .res-row {
  background: #f8fafc !important;
  color: #101827 !important;
  border: 1px solid #cbd5e1 !important;
  border-left: 1px solid #64748b !important;
  box-shadow: none !important;
}

body.staff-mode.staff-light:not(.admin-mode) .booking.is-formula,
body.staff-mode.staff-light:not(.admin-mode) .laser-board-booking.is-formula,
body.staff-mode.staff-light:not(.admin-mode) .res-row.is-formula {
  background: #fff8e6 !important;
  border-color: #e8c86b !important;
  border-left-color: #b8860b !important;
}

body.staff-mode.staff-light:not(.admin-mode) .booking.is-laser-multi,
body.staff-mode.staff-light:not(.admin-mode) .laser-board-booking.is-laser-multi,
body.staff-mode.staff-light:not(.admin-mode) .res-row.is-laser-multi {
  background: #fff1f0 !important;
  border-color: #f2a29b !important;
  border-left-color: #dc2626 !important;
}

/* Staff theme hardening: both modes must remain readable and reversible. */
body.staff-mode:not(.admin-mode) .staff-theme-switch {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 44px !important;
  padding: 4px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

body.staff-mode:not(.admin-mode) .staff-theme-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 86px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 9px !important;
  border: 1px solid transparent !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transform: translateZ(0);
  transition-property: background-color, border-color, color, transform;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}

body.staff-mode:not(.admin-mode) .staff-theme-btn:active {
  transform: scale(.96) !important;
}

body.staff-mode:not(.admin-mode) .staff-theme-btn:focus-visible {
  outline: 2px solid rgba(143, 216, 213, .72) !important;
  outline-offset: 2px !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-theme-switch {
  background: #0b1017 !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-theme-btn {
  background: transparent !important;
  color: #c8d3e1 !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-theme-btn:hover {
  background: rgba(255, 255, 255, .055) !important;
  color: #f3f7fb !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-theme-btn.active {
  background: #eef1f4 !important;
  border-color: #eef1f4 !important;
  color: #101827 !important;
}

body.staff-mode.staff-light:not(.admin-mode),
body.staff-mode.staff-light:not(.admin-mode) main,
body.staff-mode.staff-light:not(.admin-mode) .staff-wrap,
body.staff-mode.staff-light:not(.admin-mode) .staff-page,
body.staff-mode.staff-light:not(.admin-mode) .staff-shell {
  background: #f2f4f7 !important;
  color: #111827 !important;
}

body.staff-mode.staff-light:not(.admin-mode) header {
  background: rgba(251, 250, 246, .92) !important;
  border-bottom: 1px solid #d7dde6 !important;
  color: #111827 !important;
  backdrop-filter: blur(14px);
}

body.staff-mode:not(.admin-mode) .view-switch {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 44px !important;
  padding: 4px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

body.staff-mode:not(.admin-mode) .view-switch button {
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 9px !important;
  border: 1px solid transparent !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  color: inherit !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .view-switch {
  background: #0b1017 !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .view-switch button {
  color: #c8d3e1 !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .view-switch button.active {
  background: #eef1f4 !important;
  border-color: #eef1f4 !important;
  color: #101827 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .view-switch {
  background: #e9edf3 !important;
  border: 1px solid #cfd6e1 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .view-switch button {
  color: #475569 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .view-switch button:hover {
  background: #fbfaf6 !important;
  color: #111827 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .view-switch button.active {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #fbfaf6 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .staff-theme-switch {
  background: #e9edf3 !important;
  border: 1px solid #cfd6e1 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .staff-theme-btn {
  background: transparent !important;
  color: #475569 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .staff-theme-btn:hover {
  background: #fbfaf6 !important;
  color: #111827 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .staff-theme-btn.active {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #fbfaf6 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .staff-head,
body.staff-mode.staff-light:not(.admin-mode) .kpi,
body.staff-mode.staff-light:not(.admin-mode) .planning-box,
body.staff-mode.staff-light:not(.admin-mode) .res-section,
body.staff-mode.staff-light:not(.admin-mode) .res-section.workflow,
body.staff-mode.staff-light:not(.admin-mode) .table-box,
body.staff-mode.staff-light:not(.admin-mode) .quick-panel,
body.staff-mode.staff-light:not(.admin-mode) .staff-card,
body.staff-mode.staff-light:not(.admin-mode) .ops-admin-box,
body.staff-mode.staff-light:not(.admin-mode) .qb-modal,
body.staff-mode.staff-light:not(.admin-mode) .edit-modal,
body.staff-mode.staff-light:not(.admin-mode) .pos-panel {
  background: #fbfaf6 !important;
  border: 1px solid #d7dde6 !important;
  color: #111827 !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04) !important;
}

body.staff-mode.staff-light:not(.admin-mode) .staff-head h1,
body.staff-mode.staff-light:not(.admin-mode) .planning-head h2,
body.staff-mode.staff-light:not(.admin-mode) .table-head h2,
body.staff-mode.staff-light:not(.admin-mode) .res-row-name,
body.staff-mode.staff-light:not(.admin-mode) .res-name,
body.staff-mode.staff-light:not(.admin-mode) .booking-name,
body.staff-mode.staff-light:not(.admin-mode) .laser-board-booking strong,
body.staff-mode.staff-light:not(.admin-mode) .kpi .value,
body.staff-mode.staff-light:not(.admin-mode) .edit-modal h3,
body.staff-mode.staff-light:not(.admin-mode) .qb-modal h3,
body.staff-mode.staff-light:not(.admin-mode) .pos-panel h3 {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .sub,
body.staff-mode.staff-light:not(.admin-mode) .hint,
body.staff-mode.staff-light:not(.admin-mode) .planning-sub,
body.staff-mode.staff-light:not(.admin-mode) .table-summary,
body.staff-mode.staff-light:not(.admin-mode) .res-row-meta,
body.staff-mode.staff-light:not(.admin-mode) .res-section-head,
body.staff-mode.staff-light:not(.admin-mode) .label,
body.staff-mode.staff-light:not(.admin-mode) .info-row .lbl,
body.staff-mode.staff-light:not(.admin-mode) small {
  color: #596579 !important;
  -webkit-text-fill-color: #596579 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .date-nav,
body.staff-mode.staff-light:not(.admin-mode) .staff-resource-tabs,
body.staff-mode.staff-light:not(.admin-mode) .filters,
body.staff-mode.staff-light:not(.admin-mode) .search-box,
body.staff-mode.staff-light:not(.admin-mode) .modal-tabs,
body.staff-mode.staff-light:not(.admin-mode) .tabs {
  background: #eef1f5 !important;
  border: 1px solid #d7dde6 !important;
  color: #111827 !important;
  box-shadow: none !important;
}

body.staff-mode.staff-light:not(.admin-mode) .planning-head,
body.staff-mode.staff-light:not(.admin-mode) .table-head,
body.staff-mode.staff-light:not(.admin-mode) .pos-head,
body.staff-mode.staff-light:not(.admin-mode) .qb-head,
body.staff-mode.staff-light:not(.admin-mode) .edit-modal-head {
  background: #fbfaf6 !important;
  border-bottom: 1px solid #d7dde6 !important;
  color: #111827 !important;
  box-shadow: none !important;
}

body.staff-mode.staff-light:not(.admin-mode) .planning-head h2,
body.staff-mode.staff-light:not(.admin-mode) .planning-head h2 *,
body.staff-mode.staff-light:not(.admin-mode) .table-head h2,
body.staff-mode.staff-light:not(.admin-mode) .table-head h2 *,
body.staff-mode.staff-light:not(.admin-mode) .pos-head h3,
body.staff-mode.staff-light:not(.admin-mode) .qb-head h3,
body.staff-mode.staff-light:not(.admin-mode) .edit-modal-head h3 {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .planning-head .planning-sub,
body.staff-mode.staff-light:not(.admin-mode) .planning-head .sub,
body.staff-mode.staff-light:not(.admin-mode) .table-head .sub,
body.staff-mode.staff-light:not(.admin-mode) .table-head .table-summary {
  color: #596579 !important;
  -webkit-text-fill-color: #596579 !important;
}

body.staff-mode.staff-light:not(.admin-mode) input,
body.staff-mode.staff-light:not(.admin-mode) select,
body.staff-mode.staff-light:not(.admin-mode) textarea,
body.staff-mode.staff-light:not(.admin-mode) .search-wrap input,
body.staff-mode.staff-light:not(.admin-mode) .auth-input,
body.staff-mode.staff-light:not(.admin-mode) .qb-input,
body.staff-mode.staff-light:not(.admin-mode) .edit-form .input {
  background: #fbfaf6 !important;
  border: 1px solid #c7d0dd !important;
  color: #111827 !important;
  caret-color: #111827 !important;
  box-shadow: none !important;
}

body.staff-mode.staff-light:not(.admin-mode) input::placeholder,
body.staff-mode.staff-light:not(.admin-mode) textarea::placeholder {
  color: #7b8798 !important;
  opacity: 1 !important;
}

body.staff-mode.staff-light:not(.admin-mode) input:focus,
body.staff-mode.staff-light:not(.admin-mode) select:focus,
body.staff-mode.staff-light:not(.admin-mode) textarea:focus,
body.staff-mode.staff-light:not(.admin-mode) .search-wrap input:focus,
body.staff-mode.staff-light:not(.admin-mode) .qb-input:focus,
body.staff-mode.staff-light:not(.admin-mode) .edit-form .input:focus {
  border-color: #4c6f93 !important;
  box-shadow: 0 0 0 3px rgba(76, 111, 147, .16) !important;
}

body.staff-mode.staff-light:not(.admin-mode) .btn-new,
body.staff-mode.staff-light:not(.admin-mode) .primary,
body.staff-mode.staff-light:not(.admin-mode) .save-btn,
body.staff-mode.staff-light:not(.admin-mode) .qb-btn-save {
  background: #111827 !important;
  border: 1px solid #111827 !important;
  color: #fbfaf6 !important;
  box-shadow: none !important;
}

body.staff-mode.staff-light:not(.admin-mode) .secondary,
body.staff-mode.staff-light:not(.admin-mode) .ghost,
body.staff-mode.staff-light:not(.admin-mode) .close-btn,
body.staff-mode.staff-light:not(.admin-mode) .date-nav button,
body.staff-mode.staff-light:not(.admin-mode) .res-icon-btn,
body.staff-mode.staff-light:not(.admin-mode) .icon-btn,
body.staff-mode.staff-light:not(.admin-mode) .status-chip,
body.staff-mode.staff-light:not(.admin-mode) .res-status-btn,
body.staff-mode.staff-light:not(.admin-mode) .tab,
body.staff-mode.staff-light:not(.admin-mode) .staff-resource-tab,
body.staff-mode.staff-light:not(.admin-mode) .filter-btn {
  background: #fbfaf6 !important;
  border: 1px solid #d3dae5 !important;
  color: #172033 !important;
  box-shadow: none !important;
}

body.staff-mode.staff-light:not(.admin-mode) .tab.active,
body.staff-mode.staff-light:not(.admin-mode) .modal-tabs .tab.active,
body.staff-mode.staff-light:not(.admin-mode) .staff-resource-tab.active,
body.staff-mode.staff-light:not(.admin-mode) .filter-btn.active,
body.staff-mode.staff-light:not(.admin-mode) .status-chip.active,
body.staff-mode.staff-light:not(.admin-mode) .res-status-btn.active {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #fbfaf6 !important;
  -webkit-text-fill-color: #fbfaf6 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .planning-grid-wrap,
body.staff-mode.staff-light:not(.admin-mode) .laser-grid-wrap,
body.staff-mode.staff-light:not(.admin-mode) .laser-board,
body.staff-mode.staff-light:not(.admin-mode) .planning-table,
body.staff-mode.staff-light:not(.admin-mode) .planning-box.expanded {
  background: #fbfaf6 !important;
  border-color: #d7dde6 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .hour-col,
body.staff-mode.staff-light:not(.admin-mode) .lane-col,
body.staff-mode.staff-light:not(.admin-mode) .lane-header,
body.staff-mode.staff-light:not(.admin-mode) .hour-header,
body.staff-mode.staff-light:not(.admin-mode) .hour-cell,
body.staff-mode.staff-light:not(.admin-mode) .slot-cell,
body.staff-mode.staff-light:not(.admin-mode) .laser-board th,
body.staff-mode.staff-light:not(.admin-mode) .laser-board td {
  background: #f7f8fa !important;
  border-color: #dbe1ea !important;
  color: #172033 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .hour-cell.major,
body.staff-mode.staff-light:not(.admin-mode) .lane-header .num,
body.staff-mode.staff-light:not(.admin-mode) .lane-header .pl,
body.staff-mode.staff-light:not(.admin-mode) .laser-board th {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .booking,
body.staff-mode.staff-light:not(.admin-mode) .laser-board-booking,
body.staff-mode.staff-light:not(.admin-mode) .res-row {
  background: #f7f9fc !important;
  border: 1px solid #c7d0dd !important;
  color: #111827 !important;
  box-shadow: none !important;
}

body.staff-mode.staff-light:not(.admin-mode) .booking:hover,
body.staff-mode.staff-light:not(.admin-mode) .laser-board-booking:hover,
body.staff-mode.staff-light:not(.admin-mode) .res-row:hover {
  background: #eef4fb !important;
  border-color: #91a4bd !important;
}

body.staff-mode.staff-light:not(.admin-mode) .booking.is-formula,
body.staff-mode.staff-light:not(.admin-mode) .laser-board-booking.is-formula,
body.staff-mode.staff-light:not(.admin-mode) .res-row.is-formula {
  background: #fff8e6 !important;
  border-color: #d7ad4b !important;
  color: #2b2111 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .booking.is-laser-multi,
body.staff-mode.staff-light:not(.admin-mode) .laser-board-booking.is-laser-multi,
body.staff-mode.staff-light:not(.admin-mode) .res-row.is-laser-multi {
  background: #fff1f0 !important;
  border-color: #de8d85 !important;
  color: #2b1513 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .booking.paid,
body.staff-mode.staff-light:not(.admin-mode) .laser-board-booking.paid,
body.staff-mode.staff-light:not(.admin-mode) .res-row.paid {
  background: #edf8f1 !important;
  border-color: #8dc89e !important;
  color: #112b19 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .booking.arr,
body.staff-mode.staff-light:not(.admin-mode) .laser-board-booking.arr,
body.staff-mode.staff-light:not(.admin-mode) .res-row.arr {
  background: #fff7e6 !important;
  border-color: #d7ad4b !important;
  color: #2b2111 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .b-tag,
body.staff-mode.staff-light:not(.admin-mode) .type-badge,
body.staff-mode.staff-light:not(.admin-mode) .status-pill,
body.staff-mode.staff-light:not(.admin-mode) .reservation-tags span,
body.staff-mode.staff-light:not(.admin-mode) .res-state-pill,
body.staff-mode.staff-light:not(.admin-mode) .count-badge,
body.staff-mode.staff-light:not(.admin-mode) .lane-chip,
body.staff-mode.staff-light:not(.admin-mode) .res-lane-chip {
  background: #eef1f5 !important;
  border: 1px solid #cfd6e1 !important;
  color: #172033 !important;
  box-shadow: none !important;
}

body.staff-mode.staff-light:not(.admin-mode) .type-badge.formule,
body.staff-mode.staff-light:not(.admin-mode) .booking.is-formula .b-tag,
body.staff-mode.staff-light:not(.admin-mode) .laser-board-booking.is-formula .b-tag {
  background: #f8e9b6 !important;
  border-color: #d7ad4b !important;
  color: #3b2a0b !important;
}

body.staff-mode.staff-light:not(.admin-mode) .type-badge.laser,
body.staff-mode.staff-light:not(.admin-mode) .laser-booking .b-tag,
body.staff-mode.staff-light:not(.admin-mode) .laser-board-booking .b-tag {
  background: #e9f1fb !important;
  border-color: #aabbd2 !important;
  color: #183456 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .table-box table,
body.staff-mode.staff-light:not(.admin-mode) .staff-table,
body.staff-mode.staff-light:not(.admin-mode) .data-table,
body.staff-mode.staff-light:not(.admin-mode) table {
  background: #fbfaf6 !important;
  color: #111827 !important;
  border-color: #d7dde6 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

body.staff-mode.staff-light:not(.admin-mode) th,
body.staff-mode.staff-light:not(.admin-mode) td {
  border-color: #d7dde6 !important;
  color: #111827 !important;
}

body.staff-mode.staff-light:not(.admin-mode) th {
  background: #eef1f5 !important;
  color: #475569 !important;
}

body.staff-mode.staff-light:not(.admin-mode) td {
  background: #fbfaf6 !important;
}

body.staff-mode.staff-light:not(.admin-mode) tr:hover td {
  background: #f3f6fa !important;
}

/* Direction/admin: executive dark, readable exports and tables. */
body.admin-mode {
  --admin-bg: #05070a;
  --admin-surface: #0b1017;
  --admin-surface-2: #111821;
  --admin-line: #263241;
  --admin-text: #f8fafc;
  --admin-muted: #a9b5c4;
  --admin-faint: #78869a;
}

body.admin-mode header {
  background: rgba(5, 7, 10, .86) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .13) !important;
  backdrop-filter: blur(18px);
}

body.admin-mode .admin-shell {
  width: min(100vw - 56px, 1840px) !important;
  color: var(--admin-text) !important;
}

body.admin-mode .admin-hero,
body.admin-mode .admin-panel,
body.admin-mode .admin-center-card,
body.admin-mode .admin-kpi,
body.admin-mode .admin-export-card,
body.admin-mode .admin-benchmark-card,
body.admin-mode .ops-admin-box,
body.admin-mode .ops-cockpit,
body.admin-mode .agent-stack-canvas,
body.admin-mode .agent-detail-panel,
body.admin-mode .ai-agent-card,
body.admin-mode .ai-live-card {
  background: rgba(11, 16, 23, .96) !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 14px !important;
  color: var(--admin-text) !important;
  box-shadow: none !important;
}

body.admin-mode .admin-hero {
  padding: 20px !important;
}

body.admin-mode .admin-hero h1 {
  font-size: clamp(26px, 2.1vw, 36px) !important;
  line-height: 1.08 !important;
}

body.admin-mode .admin-hero p,
body.admin-mode .admin-section-title p,
body.admin-mode .admin-muted,
body.admin-mode .admin-kpi span,
body.admin-mode .admin-export-card p,
body.admin-mode .ops-admin-box p {
  color: var(--admin-muted) !important;
}

body.admin-mode .admin-logo-box {
  background: #070a0f !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body.admin-mode .admin-tab,
body.admin-mode .admin-period-btn,
body.admin-mode .admin-action-btn,
body.admin-mode .ops-admin-tab,
body.admin-mode .admin-date-btn {
  background: #0b1017 !important;
  border: 1px solid rgba(148, 163, 184, .2) !important;
  color: #eef3f8 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}

body.admin-mode .admin-tab.active,
body.admin-mode .admin-period-btn.active,
body.admin-mode .ops-admin-tab.active,
body.admin-mode .admin-action-btn.primary {
  background: #f7f7f5 !important;
  border-color: #f7f7f5 !important;
  color: #05070a !important;
}

body.admin-mode input,
body.admin-mode select,
body.admin-mode textarea {
  background: #070a0f !important;
  border: 1px solid rgba(148, 163, 184, .2) !important;
  color: #f8fafc !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}

body.admin-mode .admin-table-wrap {
  background: #0b1017 !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

body.admin-mode .admin-table {
  background: #0b1017 !important;
  color: #f8fafc !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

body.admin-mode .admin-table thead,
body.admin-mode .admin-table tbody,
body.admin-mode .admin-table tr {
  background: transparent !important;
}

body.admin-mode .admin-table th {
  background: #0f151e !important;
  border-color: rgba(148, 163, 184, .16) !important;
  color: #b7c4d6 !important;
  font-weight: 700 !important;
}

body.admin-mode .admin-table td {
  background: #0b1017 !important;
  border-color: rgba(148, 163, 184, .12) !important;
  color: #e8eef7 !important;
}

body.admin-mode .admin-table tr:nth-child(even) td {
  background: #0d131b !important;
}

body.admin-mode .admin-table tr:hover td {
  background: #121a24 !important;
}

body.admin-mode .admin-table strong,
body.admin-mode .admin-table .name,
body.admin-mode .mail-subject,
body.admin-mode .event-title {
  color: var(--pro-paper-2) !important;
}

body.admin-mode .admin-export-card {
  min-height: 170px !important;
}

body.admin-mode .admin-export-card .admin-action-btn,
body.admin-mode .admin-export-card button {
  width: 100%;
}

body.admin-mode .agent-stack-map {
  background: #070a0f !important;
  border: 1px solid rgba(148, 163, 184, .14) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

body.admin-mode .agent-stack-node {
  background: #101721 !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-left: 1px solid rgba(145, 184, 238, .78) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: #f8fafc !important;
}

body.admin-mode .agent-stack-node.is-active,
body.admin-mode .agent-stack-node.active,
body.admin-mode .agent-stack-node:hover {
  border-color: rgba(145, 184, 238, .58) !important;
  background: #141d29 !important;
  transform: translateY(-1px) !important;
}

body.admin-mode .agent-stack-node .status,
body.admin-mode .ai-status-pill,
body.admin-mode .badge {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  color: #f2f6fb !important;
}

body.admin-mode .timeline-item,
body.admin-mode .decision-log-row,
body.admin-mode .mail-row,
body.admin-mode .ops-log-row,
body.admin-mode .ai-problem-row {
  background: #0d131b !important;
  border: 1px solid rgba(148, 163, 184, .15) !important;
  border-radius: 12px !important;
  color: #edf3fb !important;
}

body.admin-mode .timeline-item + .timeline-item,
body.admin-mode .decision-log-row + .decision-log-row,
body.admin-mode .mail-row + .mail-row {
  margin-top: 10px !important;
}

body.admin-mode .progress,
body.admin-mode .bar,
body.admin-mode .meter {
  background: rgba(148, 163, 184, .16) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

body.admin-mode .progress > *,
body.admin-mode .bar > *,
body.admin-mode .meter > * {
  background: linear-gradient(90deg, var(--pro-blue), var(--pro-accent)) !important;
  border-radius: inherit !important;
}

/* SaaS maturity layer: final product polish, no business logic changes. */
body.client-mode,
body.staff-mode:not(.staff-light):not(.admin-mode),
body.admin-mode {
  background: #05070a !important;
  background-image: none !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body.client-mode header,
body.staff-mode:not(.staff-light):not(.admin-mode) header,
body.admin-mode header {
  background: #05070a !important;
  border-bottom: 1px solid rgba(148, 163, 184, .16) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

body.client-mode .card,
body.client-mode .formula-planner,
body.client-mode .formula-choice,
body.client-mode .slot-section,
body.client-mode .summary-card,
body.client-mode .formule-card,
body.client-mode .formule-card.active,
body.client-mode .step,
body.client-mode .success-wrap,
body.client-mode .customer-panel {
  background-image: none !important;
  box-shadow: none !important;
}

body.client-mode .step,
body.client-mode .success-wrap,
body.client-mode .customer-panel {
  background: #10151d !important;
  border-color: rgba(148, 163, 184, .2) !important;
}

body.client-mode .card,
body.client-mode .formula-planner,
body.client-mode .formula-choice,
body.client-mode .slot-section,
body.client-mode .summary-card {
  background: #151b24 !important;
  border-color: rgba(148, 163, 184, .22) !important;
}

body.client-mode .btn-primary,
body.client-mode .flow-btn,
body.client-mode .pay-btn {
  background: #f4f6f8 !important;
  border-color: #f4f6f8 !important;
  color: #080c12 !important;
  -webkit-text-fill-color: #080c12 !important;
}

body.client-mode .seg-btn.active {
  background: #9b4597 !important;
  color: #f7f9fc !important;
  -webkit-text-fill-color: #f7f9fc !important;
}

body.client-mode .dur-pill.active,
body.client-mode .activity-time-card.active,
body.client-mode .formula-order-item.active,
body.client-mode .slot.active {
  background: #f4f6f8 !important;
  border-color: #f4f6f8 !important;
  color: #080c12 !important;
  -webkit-text-fill-color: #080c12 !important;
  box-shadow: 0 0 0 3px rgba(143, 216, 213, .2) !important;
}

body.client-mode .slot.disabled,
body.client-mode .activity-time-card.disabled,
body.client-mode .formule-card.disabled {
  background: rgba(148, 163, 184, .07) !important;
  border-color: rgba(148, 163, 184, .14) !important;
  color: rgba(168, 179, 194, .62) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .theme-btn.active,
body.staff-mode:not(.staff-light):not(.admin-mode) .staff-theme-btn.active,
body.staff-mode:not(.staff-light):not(.admin-mode) .view-switch button.active,
body.staff-mode:not(.staff-light):not(.admin-mode) .staff-resource-tabs button.active,
body.staff-mode:not(.staff-light):not(.admin-mode) .staff-resource-tab.active,
body.staff-mode:not(.staff-light):not(.admin-mode) .staff-tab.active,
body.staff-mode:not(.staff-light):not(.admin-mode) .filter-btn.active,
body.staff-mode:not(.staff-light):not(.admin-mode) .tab.active,
body.staff-mode:not(.staff-light):not(.admin-mode) .modal-tabs .tab.active,
body.staff-mode:not(.staff-light):not(.admin-mode) .status-chip.active,
body.staff-mode:not(.staff-light):not(.admin-mode) .res-status-btn.active,
body.admin-mode .view-switch button.active,
body.admin-mode .admin-tab.active,
body.admin-mode .admin-period-btn.active,
body.admin-mode .admin-tabs button.active,
body.admin-mode .admin-period-tabs button.active,
body.admin-mode .ops-admin-tab.active {
  background: #17202b !important;
  border-color: #3a4a60 !important;
  color: #f3f6fb !important;
  -webkit-text-fill-color: #f3f6fb !important;
  box-shadow: none !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-resource-tab.active *,
body.staff-mode:not(.staff-light):not(.admin-mode) .status-chip.active *,
body.staff-mode:not(.staff-light):not(.admin-mode) .res-status-btn.active *,
body.admin-mode .view-switch button.active *,
body.admin-mode .admin-tab.active *,
body.admin-mode .admin-period-btn.active *,
body.admin-mode .admin-tabs button.active *,
body.admin-mode .admin-period-tabs button.active *,
body.admin-mode .ops-admin-tab.active * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .btn-new,
body.staff-mode:not(.staff-light):not(.admin-mode) .primary,
body.staff-mode:not(.staff-light):not(.admin-mode) .save-btn,
body.staff-mode:not(.staff-light):not(.admin-mode) .qb-btn-save,
body.admin-mode .admin-action-btn.primary,
body.admin-mode .admin-btn.primary,
body.admin-mode .ops-admin-btn.primary {
  background: #eef1f4 !important;
  border-color: #eef1f4 !important;
  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;
}

body.staff-mode .date-nav button,
body.admin-mode .admin-date-nav button,
body.admin-mode .admin-date-btn,
body.staff-mode .res-icon-btn,
body.staff-mode .icon-btn,
body.staff-mode .lane-header .settings,
body.staff-mode .planning-toggle {
  min-width: 40px !important;
  min-height: 40px !important;
}

body.admin-mode .admin-btn,
body.admin-mode .ops-admin-btn,
body.admin-mode .admin-action-btn {
  min-height: 40px !important;
}

body.staff-mode .lane-header .settings {
  top: 0 !important;
  right: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 8px !important;
  color: var(--pro-muted) !important;
}

body.staff-mode .res-status-btn,
body.staff-mode .status-chip {
  min-height: 34px !important;
}

body.staff-mode .kpi .value,
body.staff-mode .booking,
body.staff-mode .laser-board-booking,
body.staff-mode .res-row,
body.staff-mode .hour-cell,
body.admin-mode .admin-table,
body.admin-mode .admin-kpi,
body.admin-mode .admin-date-nav,
body.client-mode .slot,
body.client-mode .dur-pill {
  font-variant-numeric: tabular-nums;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .empty-state,
body.admin-mode .admin-empty,
body.admin-mode .empty-state,
body.client-mode .empty-state,
body.client-mode .formula-time-empty,
body.staff-mode:not(.staff-light):not(.admin-mode) .qb-empty-note {
  background: rgba(148, 163, 184, .06) !important;
  border: 1px dashed rgba(148, 163, 184, .28) !important;
  border-radius: 12px !important;
  color: #dbe4ef !important;
}

body.staff-mode.staff-light:not(.admin-mode) .empty-state,
body.staff-mode.staff-light:not(.admin-mode) .qb-empty-note {
  background: #f6f8fb !important;
  border: 1px dashed #cbd5e1 !important;
  color: #172033 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-grid-wrap,
body.staff-mode.staff-light:not(.admin-mode) .laser-agenda {
  background: #fbfaf6 !important;
  color: #172033 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-agenda-header {
  background: #eef1f5 !important;
  border-color: #d7dde6 !important;
  color: #4b596b !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-agenda-header > div,
body.staff-mode.staff-light:not(.admin-mode) .laser-agenda-time,
body.staff-mode.staff-light:not(.admin-mode) .laser-agenda-capacity {
  border-color: #d7dde6 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-agenda-row {
  background: #fbfaf6 !important;
  border-color: #dbe1ea !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-agenda-row.is-half {
  background: #f6f8fb !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-agenda-row.is-current {
  background: #eef4fb !important;
  box-shadow: inset 1px 0 0 #4c6f93 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-agenda-time strong,
body.staff-mode.staff-light:not(.admin-mode) .laser-agenda-capacity strong,
body.staff-mode.staff-light:not(.admin-mode) .laser-session-title,
body.staff-mode.staff-light:not(.admin-mode) .laser-empty-title,
body.staff-mode.staff-light:not(.admin-mode) .laser-group-main strong,
body.staff-mode.staff-light:not(.admin-mode) .laser-group-count {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-agenda-time span,
body.staff-mode.staff-light:not(.admin-mode) .laser-agenda-capacity span,
body.staff-mode.staff-light:not(.admin-mode) .laser-session-sub,
body.staff-mode.staff-light:not(.admin-mode) .laser-empty-sub,
body.staff-mode.staff-light:not(.admin-mode) .laser-group-main small {
  color: #596579 !important;
  -webkit-text-fill-color: #596579 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-session-slot.is-empty {
  background: #f7f8fa !important;
  border-color: #cbd5e1 !important;
  color: #172033 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-session-slot.is-empty:hover {
  background: #eef4fb !important;
  border-color: #91a4bd !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-session-slot.has-session {
  background: #f7f9fc !important;
  border-color: #c7d0dd !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-session-slot.has-session.has-formula {
  background: #fff8e6 !important;
  border-color: #d7ad4b !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-group-card {
  background: #fbfaf6 !important;
  border-color: #cbd5e1 !important;
  color: #111827 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-group-card.formula {
  background: #fff8e6 !important;
  border-color: #d7ad4b !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-group-card.paid {
  background: #edf8f1 !important;
  border-color: #8dc89e !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-group-card.arrived {
  background: #fff7e6 !important;
  border-color: #d7ad4b !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-session-kind,
body.staff-mode.staff-light:not(.admin-mode) .laser-group-count {
  background: #eef1f5 !important;
  border-color: #cbd5e1 !important;
  color: #172033 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-capacity-line {
  background: #eef1f5 !important;
  border-color: #cbd5e1 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-capacity-fill {
  background: #cbd8e7 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-meter-segment {
  background: #4c6f93 !important;
  border-right-color: rgba(251, 250, 246, .75) !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-meter-segment.formula {
  background: #b8860b !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-pass-queue {
  background: #f6f8fb !important;
  border-color: #cbd5e1 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-pass-card {
  background: #fbfaf6 !important;
  border-color: #cbd5e1 !important;
  color: #111827 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-pass-meta {
  color: #315f86 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .laser-session-slot.is-drop-target {
  background: #e9f1fb !important;
  border-color: #4c6f93 !important;
  box-shadow: inset 0 0 0 1px rgba(76, 111, 147, .18) !important;
}

body.staff-mode.staff-light:not(.admin-mode) .res-list,
body.staff-mode.staff-light:not(.admin-mode) .res-sections,
body.staff-mode.staff-light:not(.admin-mode) .table-toolbar {
  background: #fbfaf6 !important;
  color: #172033 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .table-toolbar,
body.staff-mode.staff-light:not(.admin-mode) .res-section-head {
  border-color: #d7dde6 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .status-filters {
  background: transparent !important;
}

body.staff-mode.staff-light:not(.admin-mode) .status-chip {
  background: #fbfaf6 !important;
  border: 1px solid #d3dae5 !important;
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .status-chip span {
  background: #eef1f5 !important;
  color: inherit !important;
}

body.staff-mode.staff-light:not(.admin-mode) .res-row {
  background: #f8fafc !important;
  border-color: #c7d0dd !important;
  color: #111827 !important;
  box-shadow: none !important;
}

body.staff-mode.staff-light:not(.admin-mode) .res-row:hover {
  background: #eef4fb !important;
  border-color: #91a4bd !important;
}

body.staff-mode.staff-light:not(.admin-mode) .res-section.workflow.paid .res-row,
body.staff-mode.staff-light:not(.admin-mode) .res-row.paid {
  background: #edf8f1 !important;
  border-color: #8dc89e !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .booking,
body.staff-mode:not(.staff-light):not(.admin-mode) .laser-board-booking,
body.staff-mode:not(.staff-light):not(.admin-mode) .res-row,
body.admin-mode .mail-row,
body.admin-mode .timeline-item,
body.admin-mode .decision-log-row,
body.admin-mode .ops-log-row,
body.admin-mode .ai-problem-row {
  outline: 1px solid rgba(255, 255, 255, .03);
}

body.admin-mode .progress > *,
body.admin-mode .bar > *,
body.admin-mode .meter > * {
  background: #91b8ee !important;
}

body.admin-mode .admin-export-card,
body.admin-mode .admin-benchmark-card,
body.admin-mode .admin-kpi,
body.admin-mode .admin-center-card {
  background-image: none !important;
}

body.admin-mode .admin-table-wrap,
body.admin-mode .admin-table {
  border-color: rgba(148, 163, 184, .2) !important;
}

body.admin-mode .admin-table th {
  background: #111821 !important;
  color: #c5cfdd !important;
}

body.admin-mode .admin-table td {
  color: #edf3fb !important;
}

body.staff-mode.staff-light:not(.admin-mode) .status-chip.active,
body.staff-mode.staff-light:not(.admin-mode) .res-status-btn.active,
body.staff-mode.staff-light:not(.admin-mode) .staff-resource-tab.active,
body.staff-mode.staff-light:not(.admin-mode) .filter-btn.active,
body.staff-mode.staff-light:not(.admin-mode) .tab.active {
  background: #172033 !important;
  border-color: #172033 !important;
  color: #f7f9fc !important;
  -webkit-text-fill-color: #f7f9fc !important;
}

body.staff-mode.staff-light:not(.admin-mode) .status-chip.active *,
body.staff-mode.staff-light:not(.admin-mode) .res-status-btn.active *,
body.staff-mode.staff-light:not(.admin-mode) .staff-resource-tab.active * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

/* 2026-05-27 Product shell reset: ChatGPT/Vercel-style SaaS skin, visual only. */
:root {
  --fg-sidebar-w: 248px;
  --fg-bg: #050506;
  --fg-bg-soft: #08090b;
  --fg-panel: #0b0d10;
  --fg-panel-raised: #11141a;
  --fg-panel-hover: #171a21;
  --fg-line: #272a33;
  --fg-line-soft: #1b1e25;
  --fg-text: #f3f4f6;
  --fg-text-strong: #fafafa;
  --fg-muted: #a2a8b3;
  --fg-faint: #727985;
  --fg-action: #f2f3f5;
  --fg-action-text: #090a0d;
  --fg-focus: #86a9d8;
  --fg-formula: #d5b46a;
  --fg-laser: #d98c82;
  --fg-success: #86c99a;
  --fg-warning: #cfa45e;
  --fg-danger: #e28a82;
  --fg-radius: 12px;
  --fg-radius-sm: 9px;
  --fg-ease: cubic-bezier(.2, 0, 0, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

body.staff-mode,
body.admin-mode {
  background: var(--fg-bg) !important;
  background-image: none !important;
  color: var(--fg-text) !important;
}

body.staff-mode main,
body.admin-mode main {
  min-height: 100dvh !important;
  padding: 0 0 48px var(--fg-sidebar-w) !important;
  background: var(--fg-bg) !important;
}

body.staff-mode header,
body.admin-mode header {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 40 !important;
  width: var(--fg-sidebar-w) !important;
  height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 14px 10px !important;
  background: #070708 !important;
  border-right: 1px solid var(--fg-line-soft) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.staff-mode header::after,
body.admin-mode header::after {
  content: "Pinlane";
  margin-top: auto;
  padding: 10px 12px 4px;
  border-top: 1px solid var(--fg-line-soft);
  color: var(--fg-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

body.staff-mode header .logo-wrap,
body.admin-mode header .logo-wrap {
  width: 100% !important;
  min-height: 68px !important;
  margin: 0 0 6px !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border-radius: var(--fg-radius) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}

body.staff-mode header .logo,
body.admin-mode header .logo {
  width: 132px !important;
  max-width: 132px !important;
  height: auto !important;
  display: block !important;
}

body.staff-mode header #nav,
body.admin-mode header #nav,
body.staff-mode header #locSelect,
body.admin-mode header #locSelect {
  display: none !important;
}

body.staff-mode header > div:last-child,
body.admin-mode header > div:last-child {
  width: 100% !important;
  display: flex !important;
  align-items: stretch !important;
}

body.staff-mode header .view-switch,
body.admin-mode header .view-switch {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 2px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.staff-mode header .view-switch button,
body.admin-mode header .view-switch button {
  width: 100% !important;
  min-height: 40px !important;
  justify-content: flex-start !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--fg-muted) !important;
  -webkit-text-fill-color: var(--fg-muted) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition-property: background-color, border-color, color, transform;
  transition-duration: 160ms;
  transition-timing-function: var(--fg-ease);
}

body.staff-mode header .view-switch button:hover,
body.admin-mode header .view-switch button:hover {
  background: #151519 !important;
  color: var(--fg-text) !important;
  -webkit-text-fill-color: var(--fg-text) !important;
}

body.staff-mode header .view-switch button.active,
body.admin-mode header .view-switch button.active {
  background: #202024 !important;
  border-color: #303036 !important;
  color: var(--fg-text-strong) !important;
  -webkit-text-fill-color: var(--fg-text-strong) !important;
}

body.staff-mode #logoutBtn,
body.admin-mode #logoutBtn {
  position: fixed !important;
  display: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.staff-mode .staff-wrap,
body.admin-mode .admin-shell {
  width: min(100% - 56px, 1580px) !important;
  max-width: 1580px !important;
  margin: 0 auto !important;
  padding: 30px 0 64px !important;
}

body.staff-mode .staff-head,
body.admin-mode .admin-hero {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--fg-line-soft) !important;
  border-radius: 0 !important;
  padding: 0 0 22px !important;
  box-shadow: none !important;
}

body.staff-mode .staff-head h1,
body.admin-mode .admin-hero h1 {
  margin: 0 !important;
  color: var(--fg-text-strong) !important;
  -webkit-text-fill-color: var(--fg-text-strong) !important;
  font-size: 30px !important;
  line-height: 1.08 !important;
  font-weight: 760 !important;
  letter-spacing: -.02em !important;
  text-wrap: balance;
}

body.staff-mode .staff-head .sub,
body.admin-mode .admin-hero p,
body.admin-mode .admin-eyebrow {
  color: var(--fg-muted) !important;
  -webkit-text-fill-color: var(--fg-muted) !important;
}

body.staff-mode .staff-head-actions,
body.admin-mode .admin-actions {
  gap: 8px !important;
  align-items: center !important;
}

body.staff-mode .date-nav,
body.staff-mode .staff-theme-switch,
body.admin-mode .admin-date-nav,
body.admin-mode .admin-period-tabs,
body.admin-mode .admin-tabs,
body.admin-mode .ops-cockpit-tabs,
body.staff-mode .status-filters,
body.staff-mode .filters,
body.staff-mode .modal-tabs,
body.staff-mode .tabs {
  background: #090a0d !important;
  border: 1px solid var(--fg-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body.staff-mode .date-nav,
body.admin-mode .admin-date-nav {
  min-height: 42px !important;
}

body.staff-mode .date-nav button,
body.admin-mode .admin-date-nav button,
body.staff-mode .staff-theme-btn,
body.staff-mode .status-chip,
body.staff-mode .filter-btn,
body.staff-mode .tab,
body.staff-mode .modal-tabs .tab,
body.admin-mode .admin-tabs button,
body.admin-mode .admin-period-tabs button,
body.admin-mode .ops-cockpit-tab,
body.admin-mode .admin-btn,
body.admin-mode .ops-admin-btn,
body.staff-mode .planning-toggle,
body.staff-mode .res-icon-btn,
body.staff-mode .icon-btn,
body.staff-mode .close-btn {
  border-radius: 8px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--fg-muted) !important;
  -webkit-text-fill-color: var(--fg-muted) !important;
  box-shadow: none !important;
  transition-property: background-color, border-color, color, transform;
  transition-duration: 160ms;
  transition-timing-function: var(--fg-ease);
}

body.staff-mode .date-nav button:hover,
body.admin-mode .admin-date-nav button:hover,
body.staff-mode .staff-theme-btn:hover,
body.staff-mode .status-chip:hover,
body.staff-mode .filter-btn:hover,
body.staff-mode .tab:hover,
body.admin-mode .admin-tabs button:hover,
body.admin-mode .admin-period-tabs button:hover,
body.admin-mode .ops-cockpit-tab:hover,
body.admin-mode .admin-btn:hover,
body.admin-mode .ops-admin-btn:hover,
body.staff-mode .planning-toggle:hover,
body.staff-mode .res-icon-btn:hover,
body.staff-mode .icon-btn:hover,
body.staff-mode .close-btn:hover {
  background: var(--fg-panel-hover) !important;
  color: var(--fg-text) !important;
  -webkit-text-fill-color: var(--fg-text) !important;
}

body.staff-mode .date-nav button:active,
body.admin-mode .admin-date-nav button:active,
body.staff-mode .staff-theme-btn:active,
body.staff-mode .status-chip:active,
body.staff-mode .filter-btn:active,
body.staff-mode .tab:active,
body.admin-mode .admin-tabs button:active,
body.admin-mode .admin-period-tabs button:active,
body.admin-mode .ops-cockpit-tab:active,
body.admin-mode .admin-btn:active,
body.admin-mode .ops-admin-btn:active,
body.staff-mode .planning-toggle:active,
body.staff-mode .res-icon-btn:active,
body.staff-mode .icon-btn:active,
body.staff-mode .close-btn:active,
body.client-mode button:active {
  transform: scale(.96) !important;
}

body.staff-mode .staff-theme-btn.active,
body.staff-mode .status-chip.active,
body.staff-mode .filter-btn.active,
body.staff-mode .tab.active,
body.staff-mode .modal-tabs .tab.active,
body.staff-mode .res-status-btn.active,
body.admin-mode .admin-tabs button.active,
body.admin-mode .admin-period-tabs button.active,
body.admin-mode .ops-cockpit-tab.active {
  background: var(--fg-action) !important;
  border-color: var(--fg-action) !important;
  color: var(--fg-action-text) !important;
  -webkit-text-fill-color: var(--fg-action-text) !important;
}

body.staff-mode .btn-new,
body.staff-mode .primary,
body.staff-mode .save-btn,
body.staff-mode .qb-btn-save,
body.staff-mode .flow-btn.teal,
body.admin-mode .admin-btn.primary,
body.admin-mode .admin-action-btn.primary,
body.admin-mode .ops-admin-btn.primary {
  min-height: 42px !important;
  border-radius: 9px !important;
  background: var(--fg-action) !important;
  border: 1px solid var(--fg-action) !important;
  color: var(--fg-action-text) !important;
  -webkit-text-fill-color: var(--fg-action-text) !important;
  box-shadow: none !important;
  font-weight: 740 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition-property: background-color, border-color, color, transform;
  transition-duration: 160ms;
  transition-timing-function: var(--fg-ease);
}

body.staff-mode .btn-new:hover,
body.staff-mode .primary:hover,
body.staff-mode .save-btn:hover,
body.staff-mode .qb-btn-save:hover,
body.admin-mode .admin-btn.primary:hover,
body.admin-mode .admin-action-btn.primary:hover,
body.admin-mode .ops-admin-btn.primary:hover {
  background: #dfe2e6 !important;
  border-color: #dfe2e6 !important;
}

body.staff-mode .kpi-grid,
body.admin-mode .admin-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.staff-mode .kpi,
body.admin-mode .admin-kpi,
body.admin-mode .ops-cockpit-card {
  background: var(--fg-panel) !important;
  border: 1px solid var(--fg-line-soft) !important;
  border-radius: var(--fg-radius) !important;
  box-shadow: none !important;
  padding: 18px !important;
}

body.staff-mode .kpi .label,
body.admin-mode .admin-kpi .label,
body.admin-mode .ops-cockpit-card .label {
  color: var(--fg-muted) !important;
  -webkit-text-fill-color: var(--fg-muted) !important;
  font-size: 11px !important;
  font-weight: 720 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

body.staff-mode .kpi .value,
body.admin-mode .admin-kpi .value,
body.admin-mode .ops-cockpit-card .value {
  color: var(--fg-text-strong) !important;
  -webkit-text-fill-color: var(--fg-text-strong) !important;
  font-size: 28px !important;
  line-height: 1.05 !important;
  font-weight: 780 !important;
}

body.staff-mode .kpi .hint,
body.admin-mode .admin-kpi .hint,
body.admin-mode .ops-cockpit-card p,
body.admin-mode .ops-cockpit-card li {
  color: var(--fg-muted) !important;
  -webkit-text-fill-color: var(--fg-muted) !important;
}

body.staff-mode .staff-resource-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 18px 0 16px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.staff-mode .staff-resource-tab,
body.admin-mode .admin-center-card {
  min-height: 64px !important;
  padding: 14px 16px !important;
  border-radius: var(--fg-radius) !important;
  background: var(--fg-panel) !important;
  border: 1px solid var(--fg-line-soft) !important;
  color: var(--fg-text) !important;
  -webkit-text-fill-color: var(--fg-text) !important;
  box-shadow: none !important;
  transition-property: background-color, border-color, transform;
  transition-duration: 160ms;
  transition-timing-function: var(--fg-ease);
}

body.staff-mode .staff-resource-tab:hover,
body.admin-mode .admin-center-card:hover {
  background: var(--fg-panel-raised) !important;
  border-color: #343946 !important;
  transform: translateY(-1px);
}

body.staff-mode .staff-resource-tab.active,
body.admin-mode .admin-center-card.active {
  background: #131720 !important;
  border-color: #d7dce4 !important;
  color: var(--fg-text-strong) !important;
  -webkit-text-fill-color: var(--fg-text-strong) !important;
}

body.staff-mode .staff-resource-tab .main,
body.admin-mode .admin-center-card .name {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.staff-mode .staff-resource-tab .sub,
body.admin-mode .admin-center-card .meta {
  color: var(--fg-muted) !important;
  -webkit-text-fill-color: var(--fg-muted) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.staff-mode .planning-box,
body.staff-mode .table-box,
body.staff-mode .res-section,
body.staff-mode .res-section.workflow,
body.staff-mode .quick-panel,
body.staff-mode .qb-modal,
body.staff-mode .edit-modal,
body.staff-mode .pos-panel,
body.admin-mode .admin-panel,
body.admin-mode .ops-cockpit,
body.admin-mode .admin-table-wrap {
  background: var(--fg-panel) !important;
  border: 1px solid var(--fg-line-soft) !important;
  border-radius: var(--fg-radius) !important;
  box-shadow: none !important;
  color: var(--fg-text) !important;
  -webkit-text-fill-color: var(--fg-text) !important;
}

body.staff-mode .planning-head,
body.staff-mode .table-head,
body.staff-mode .pos-head,
body.staff-mode .edit-modal-head,
body.staff-mode .qb-head,
body.admin-mode .ops-cockpit-head,
body.admin-mode .admin-section-title {
  background: transparent !important;
  border-bottom: 1px solid var(--fg-line-soft) !important;
  padding: 16px 18px !important;
  box-shadow: none !important;
}

body.staff-mode .planning-head h2,
body.staff-mode .table-head h2,
body.staff-mode .pos-head h3,
body.staff-mode .edit-modal-head h3,
body.staff-mode .qb-head h3,
body.admin-mode .ops-cockpit-title h2,
body.admin-mode .admin-section-title h2,
body.admin-mode .admin-panel h2,
body.admin-mode .admin-panel h3 {
  color: var(--fg-text-strong) !important;
  -webkit-text-fill-color: var(--fg-text-strong) !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  text-wrap: balance;
}

body.staff-mode .planning-sub,
body.staff-mode .table-summary,
body.staff-mode .res-section-head,
body.admin-mode .ops-cockpit-title p,
body.admin-mode .admin-panel p {
  color: var(--fg-muted) !important;
  -webkit-text-fill-color: var(--fg-muted) !important;
}

body.staff-mode .planning-grid-wrap,
body.staff-mode .laser-grid-wrap,
body.staff-mode .laser-agenda,
body.staff-mode .res-list,
body.staff-mode .res-sections,
body.admin-mode .ops-cockpit-board,
body.admin-mode .ops-cockpit-side {
  background: #06070a !important;
  color: var(--fg-text) !important;
}

body.staff-mode .lane-col,
body.staff-mode .hour-col,
body.staff-mode .slot-cell,
body.staff-mode .hour-cell,
body.staff-mode .lane-header,
body.staff-mode .hour-header,
body.staff-mode .laser-agenda-row,
body.staff-mode .laser-agenda-header,
body.admin-mode .ops-cockpit-row,
body.admin-mode .ops-cockpit-board-head {
  background: transparent !important;
  border-color: var(--fg-line-soft) !important;
  box-shadow: none !important;
}

body.staff-mode .lane-header .num,
body.staff-mode .hour-cell.major,
body.staff-mode .res-row-name,
body.staff-mode .booking-name,
body.staff-mode .laser-session-title,
body.staff-mode .laser-empty-title,
body.staff-mode .laser-group-main strong,
body.admin-mode .ops-cockpit-event strong,
body.admin-mode .admin-table td {
  color: var(--fg-text-strong) !important;
  -webkit-text-fill-color: var(--fg-text-strong) !important;
}

body.staff-mode .hour-cell,
body.staff-mode .lane-header .pl,
body.staff-mode .booking-meta,
body.staff-mode .booking-range,
body.staff-mode .booking-extra,
body.staff-mode .res-row-meta,
body.staff-mode .res-row-time span,
body.staff-mode .laser-session-sub,
body.staff-mode .laser-empty-sub,
body.staff-mode .laser-group-main small,
body.admin-mode .ops-cockpit-event span,
body.admin-mode .ops-cockpit-event small,
body.admin-mode .admin-table th {
  color: var(--fg-muted) !important;
  -webkit-text-fill-color: var(--fg-muted) !important;
}

body.staff-mode .booking,
body.staff-mode .laser-board-booking,
body.staff-mode .laser-group-card,
body.staff-mode .laser-session-slot.has-session,
body.staff-mode .res-row {
  background: #151923 !important;
  border: 1px solid #303746 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--fg-text) !important;
  -webkit-text-fill-color: var(--fg-text) !important;
}

body.staff-mode .booking:hover,
body.staff-mode .laser-board-booking:hover,
body.staff-mode .laser-group-card:hover,
body.staff-mode .res-row:hover {
  background: #1a1f2a !important;
  border-color: #455063 !important;
  transform: translateY(-1px);
}

body.staff-mode .booking.is-formula,
body.staff-mode .booking.is-formula.conf,
body.staff-mode .booking.is-formula.arr,
body.staff-mode .booking.is-formula.paid,
body.staff-mode .laser-board-booking.is-formula,
body.staff-mode .laser-session-slot.has-session.has-formula,
body.staff-mode .laser-group-card.formula,
body.staff-mode .res-row.is-formula,
body.admin-mode .ops-cockpit-event.formula {
  background: #211b0c !important;
  border-color: rgba(213, 180, 106, .56) !important;
}

body.staff-mode .booking.is-laser-multi,
body.staff-mode .booking.is-formula.is-laser-multi,
body.staff-mode .laser-board-booking.is-laser-multi,
body.staff-mode .res-row.is-laser-multi,
body.admin-mode .ops-cockpit-event.laser {
  background: #241413 !important;
  border-color: rgba(217, 140, 130, .56) !important;
}

body.staff-mode .booking.paid,
body.staff-mode .laser-group-card.paid,
body.staff-mode .res-row.paid {
  background: #102015 !important;
  border-color: rgba(134, 201, 154, .48) !important;
}

body.staff-mode .booking.arr,
body.staff-mode .laser-group-card.arrived,
body.staff-mode .res-row.arrived,
body.staff-mode .res-row.arr {
  background: #20190d !important;
  border-color: rgba(207, 164, 94, .5) !important;
}

body.staff-mode .b-tag,
body.staff-mode .type-badge,
body.staff-mode .reservation-tags span,
body.staff-mode .res-state-pill,
body.staff-mode .lane-chip,
body.staff-mode .res-lane-chip,
body.staff-mode .laser-session-kind,
body.staff-mode .laser-group-count,
body.staff-mode .count-badge,
body.admin-mode .status-pill,
body.admin-mode .risk-pill {
  min-height: 22px !important;
  border-radius: 6px !important;
  background: #20242d !important;
  border: 1px solid #3a4251 !important;
  color: #d8dee8 !important;
  -webkit-text-fill-color: #d8dee8 !important;
  font-size: 10px !important;
  font-weight: 760 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  box-shadow: none !important;
}

body.staff-mode .booking.is-formula .b-tag,
body.staff-mode .laser-board-booking.is-formula .b-tag,
body.staff-mode .laser-group-card.formula .laser-group-count,
body.staff-mode .type-badge.formule,
body.staff-mode .reservation-tags .formula {
  background: rgba(213, 180, 106, .18) !important;
  border-color: rgba(213, 180, 106, .44) !important;
  color: #f1d58d !important;
  -webkit-text-fill-color: #f1d58d !important;
}

body.staff-mode .type-badge.laser,
body.staff-mode .laser-group-card .laser-group-count,
body.staff-mode .laser-booking .b-tag {
  background: rgba(217, 140, 130, .18) !important;
  border-color: rgba(217, 140, 130, .44) !important;
  color: #f2b4ad !important;
  -webkit-text-fill-color: #f2b4ad !important;
}

body.staff-mode .laser-session-slot.is-empty {
  background: #080a0e !important;
  border: 1px dashed #343b49 !important;
  border-radius: 9px !important;
  color: var(--fg-muted) !important;
  -webkit-text-fill-color: var(--fg-muted) !important;
}

body.staff-mode .laser-session-slot.is-empty:hover,
body.staff-mode .laser-session-slot.is-drop-target,
body.staff-mode .slot-cell.clickable:hover {
  background: #111824 !important;
  border-color: var(--fg-focus) !important;
  color: var(--fg-text) !important;
  -webkit-text-fill-color: var(--fg-text) !important;
}

body.staff-mode .laser-capacity-line,
body.staff-mode .ops-cockpit-bar,
body.admin-mode .ops-cockpit-bar,
body.admin-mode .progress,
body.admin-mode .bar,
body.admin-mode .meter {
  background: #080a0e !important;
  border: 1px solid var(--fg-line-soft) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

body.staff-mode .laser-capacity-fill,
body.staff-mode .laser-meter-segment,
body.admin-mode .ops-cockpit-bar span,
body.admin-mode .progress > *,
body.admin-mode .bar > *,
body.admin-mode .meter > * {
  background: #7d9fcd !important;
}

body.staff-mode .laser-meter-segment.formula,
body.admin-mode .ops-cockpit-meter-row.mail .ops-cockpit-bar span {
  background: var(--fg-formula) !important;
}

body.staff-mode input,
body.staff-mode select,
body.staff-mode textarea,
body.staff-mode .search-wrap input,
body.staff-mode .auth-input,
body.staff-mode .edit-form .input,
body.staff-mode .qb-input,
body.admin-mode input,
body.admin-mode select,
body.admin-mode textarea {
  background: #07090d !important;
  border: 1px solid var(--fg-line) !important;
  color: var(--fg-text-strong) !important;
  -webkit-text-fill-color: var(--fg-text-strong) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}

body.staff-mode input::placeholder,
body.staff-mode textarea::placeholder,
body.admin-mode input::placeholder,
body.admin-mode textarea::placeholder {
  color: var(--fg-faint) !important;
  -webkit-text-fill-color: var(--fg-faint) !important;
}

body.staff-mode input:focus,
body.staff-mode select:focus,
body.staff-mode textarea:focus,
body.staff-mode .search-wrap input:focus,
body.staff-mode .edit-form .input:focus,
body.staff-mode .qb-input:focus,
body.admin-mode input:focus,
body.admin-mode select:focus,
body.admin-mode textarea:focus {
  border-color: var(--fg-focus) !important;
  box-shadow: 0 0 0 3px rgba(134, 169, 216, .2) !important;
  outline: none !important;
}

body.admin-mode .admin-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 24px !important;
  align-items: center !important;
}

body.admin-mode .admin-brand {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

body.admin-mode .admin-brand-logo {
  width: 96px !important;
  height: 56px !important;
  object-fit: contain !important;
  padding: 10px !important;
  border: 1px solid var(--fg-line) !important;
  border-radius: 10px !important;
  background: #090a0d !important;
  box-shadow: none !important;
}

body.admin-mode .admin-center-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 18px 0 14px !important;
}

body.admin-mode .admin-period-tabs,
body.admin-mode .admin-tabs {
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 12px !important;
  padding: 4px !important;
  gap: 2px !important;
}

body.admin-mode .admin-tabs {
  margin-bottom: 16px !important;
}

body.admin-mode .admin-panel {
  margin-top: 14px !important;
  overflow: hidden !important;
}

body.admin-mode .admin-table-wrap {
  overflow: auto !important;
}

body.admin-mode .admin-table,
body.admin-mode table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: var(--fg-panel) !important;
}

body.admin-mode .admin-table th,
body.admin-mode table th {
  background: #090a0d !important;
  border-bottom: 1px solid var(--fg-line-soft) !important;
  color: var(--fg-muted) !important;
  -webkit-text-fill-color: var(--fg-muted) !important;
  font-size: 11px !important;
  font-weight: 720 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
}

body.admin-mode .admin-table td,
body.admin-mode table td {
  background: transparent !important;
  border-bottom: 1px solid var(--fg-line-soft) !important;
  color: #e6eaf0 !important;
  -webkit-text-fill-color: #e6eaf0 !important;
}

body.admin-mode .admin-table tr:hover td,
body.admin-mode table tr:hover td {
  background: #101319 !important;
}

body.admin-mode .mail-row,
body.admin-mode .timeline-item,
body.admin-mode .decision-log-row,
body.admin-mode .ops-log-row,
body.admin-mode .ai-problem-row,
body.admin-mode .ops-cockpit-event {
  background: #10141b !important;
  border: 1px solid var(--fg-line-soft) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body.client-mode {
  background: #050506 !important;
  background-image: none !important;
  color: #f3f4f6 !important;
}

body.client-mode header {
  background: #050506 !important;
  border-bottom: 1px solid #1d1e22 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.client-mode .client-wrap {
  width: min(1080px, calc(100vw - 48px)) !important;
  padding-top: 22px !important;
}

body.client-mode .hero-title {
  margin: 8px 0 22px !important;
  text-align: left !important;
}

body.client-mode .hero-title h1 {
  font-size: 34px !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em !important;
  color: #f3f4f6 !important;
  -webkit-text-fill-color: #f3f4f6 !important;
}

body.client-mode .hero-title p {
  max-width: 620px !important;
  color: #a2a8b3 !important;
  -webkit-text-fill-color: #a2a8b3 !important;
}

body.client-mode .booking-shell,
body.client-mode .step,
body.client-mode .success-wrap,
body.client-mode .customer-panel {
  background: #0b0d10 !important;
  border: 1px solid #24262d !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

body.client-mode .card,
body.client-mode .formula-planner,
body.client-mode .formula-choice,
body.client-mode .slot-section,
body.client-mode .summary-card,
body.client-mode .formule-card {
  background: #11141a !important;
  border: 1px solid #2b303b !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

body.client-mode input,
body.client-mode select,
body.client-mode textarea,
body.client-mode .input,
body.client-mode .date-input {
  background: #090b0f !important;
  border: 1px solid #333946 !important;
  color: #f3f4f6 !important;
  -webkit-text-fill-color: #f3f4f6 !important;
  box-shadow: none !important;
}

body.client-mode input:focus,
body.client-mode select:focus,
body.client-mode textarea:focus,
body.client-mode .input:focus,
body.client-mode .date-input:focus {
  border-color: #86a9d8 !important;
  box-shadow: 0 0 0 3px rgba(134, 169, 216, .2) !important;
  outline: none !important;
}

body.client-mode .btn-primary,
body.client-mode .flow-btn,
body.client-mode .pay-btn,
body.client-mode .btn-secondary {
  min-height: 44px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  transition-property: background-color, border-color, color, transform;
  transition-duration: 160ms;
  transition-timing-function: var(--fg-ease);
}

body.client-mode .segmented,
body.client-mode .seg-control,
body.client-mode .type-toggle {
  background: #0a0c10 !important;
  border: 1px solid #303541 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

body.client-mode .seg-btn,
body.client-mode .type-btn {
  border-radius: 0 !important;
  background: transparent !important;
  color: #d9dde4 !important;
  -webkit-text-fill-color: #d9dde4 !important;
  border-color: transparent !important;
}

body.client-mode .seg-btn.active,
body.client-mode .type-btn.active {
  background: #a14599 !important;
  color: #f7f3f7 !important;
  -webkit-text-fill-color: #f7f3f7 !important;
}

body.client-mode .dur-pill,
body.client-mode .activity-time-card,
body.client-mode .formula-order-item,
body.client-mode .slot {
  background: #161920 !important;
  border: 1px solid #313744 !important;
  border-radius: 12px !important;
  color: #eef1f5 !important;
  -webkit-text-fill-color: #eef1f5 !important;
  box-shadow: none !important;
}

body.client-mode .dur-pill:hover,
body.client-mode .activity-time-card:hover,
body.client-mode .formula-order-item:hover,
body.client-mode .slot:hover {
  background: #1c212b !important;
  border-color: #4b5363 !important;
}

body.client-mode .dur-pill.active,
body.client-mode .activity-time-card.active,
body.client-mode .formula-order-item.active,
body.client-mode .slot.active {
  background: #f2f3f5 !important;
  border-color: #f2f3f5 !important;
  color: #090a0d !important;
  -webkit-text-fill-color: #090a0d !important;
  box-shadow: none !important;
}

body.client-mode .slot.disabled,
body.client-mode .activity-time-card.disabled,
body.client-mode .formule-card.disabled {
  background: #0d0f14 !important;
  border-color: #20242d !important;
  color: #69717d !important;
  -webkit-text-fill-color: #69717d !important;
}

body.client-mode .flow-btn.white,
body.client-mode .btn-primary,
body.client-mode .pay-btn {
  background: #f2f3f5 !important;
  border-color: #f2f3f5 !important;
  color: #090a0d !important;
  -webkit-text-fill-color: #090a0d !important;
}

body.staff-mode.staff-light:not(.admin-mode),
body.staff-mode.staff-light:not(.admin-mode) main {
  background: #f6f7f9 !important;
  color: #16181d !important;
}

body.staff-mode.staff-light:not(.admin-mode) header {
  background: #f8f9fb !important;
  border-right-color: #d7dbe3 !important;
}

body.staff-mode.staff-light:not(.admin-mode) header .view-switch button {
  color: #5d6674 !important;
  -webkit-text-fill-color: #5d6674 !important;
}

body.staff-mode.staff-light:not(.admin-mode) header .view-switch button:hover {
  background: #eceff4 !important;
  color: #171a20 !important;
  -webkit-text-fill-color: #171a20 !important;
}

body.staff-mode.staff-light:not(.admin-mode) header .view-switch button.active {
  background: #171a20 !important;
  border-color: #171a20 !important;
  color: #f6f7f9 !important;
  -webkit-text-fill-color: #f6f7f9 !important;
}

body.staff-mode.staff-light:not(.admin-mode) header::after {
  border-top-color: #d7dbe3 !important;
  color: #7b8493 !important;
}

body.staff-mode.staff-light:not(.admin-mode) .staff-wrap {
  background: transparent !important;
}

@media (max-width: 1180px) {
  body.staff-mode .kpi-grid,
  body.admin-mode .admin-kpi-grid,
  body.admin-mode .admin-center-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.staff-mode .staff-resource-tabs {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 980px) {
  body.staff-mode main,
  body.admin-mode main {
    padding-left: 0 !important;
  }

  body.staff-mode header,
  body.admin-mode header {
    position: sticky !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--fg-line-soft) !important;
  }

  body.staff-mode header::after,
  body.admin-mode header::after {
    display: none !important;
  }

  body.staff-mode header .logo-wrap,
  body.admin-mode header .logo-wrap {
    width: auto !important;
    min-height: 44px !important;
    padding: 4px !important;
  }

  body.staff-mode header .logo,
  body.admin-mode header .logo {
    width: 104px !important;
  }

  body.staff-mode header .view-switch,
  body.admin-mode header .view-switch {
    flex-direction: row !important;
  }

  body.staff-mode header .view-switch button,
  body.admin-mode header .view-switch button {
    justify-content: center !important;
  }

  body.staff-mode .staff-wrap,
  body.admin-mode .admin-shell {
    width: min(100% - 24px, 100%) !important;
    padding-top: 18px !important;
  }

  body.admin-mode .admin-hero {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  body.staff-mode .staff-head,
  body.admin-mode .admin-hero {
    display: grid !important;
    gap: 14px !important;
  }

  body.staff-mode .staff-head-actions,
  body.admin-mode .admin-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  body.staff-mode .kpi-grid,
  body.admin-mode .admin-kpi-grid,
  body.admin-mode .admin-center-grid {
    grid-template-columns: 1fr !important;
  }

  body.client-mode .client-wrap {
    width: min(100% - 24px, 100%) !important;
  }

  body.client-mode .hero-title h1 {
    font-size: 28px !important;
  }
}

/* Shared readability fixes for labels and status colors. */
.label,
.field-label,
.mini-label,
.eyebrow,
.admin-eyebrow,
.card-label,
.kpi-label {
  letter-spacing: .06em !important;
  color: var(--pro-muted) !important;
}

.price,
.amount,
.kpi-value,
.stat-value,
.admin-kpi strong,
.laser-count,
.lane-number {
  font-variant-numeric: tabular-nums;
}

.status-paid,
.paid-badge,
.badge-paid,
.status-pill.paid {
  background: rgba(128, 201, 149, .14) !important;
  border-color: rgba(128, 201, 149, .34) !important;
  color: #b8f1c7 !important;
}

.status-arrived,
.arrived-badge,
.badge-arrived,
.status-pill.arrived {
  background: rgba(213, 180, 106, .14) !important;
  border-color: rgba(213, 180, 106, .34) !important;
  color: #ffe0a3 !important;
}

.status-confirmed,
.confirmed-badge,
.badge-confirmed,
.status-pill.confirmed {
  background: rgba(145, 184, 238, .14) !important;
  border-color: rgba(145, 184, 238, .34) !important;
  color: #cfe2ff !important;
}

.status-danger,
.danger-badge,
.badge-danger,
.status-pill.danger {
  background: rgba(239, 139, 131, .14) !important;
  border-color: rgba(239, 139, 131, .34) !important;
  color: #ffd5d0 !important;
}

@media (max-width: 820px) {
  body.client-mode .client-wrap,
  body.admin-mode .admin-shell,
  body.staff-mode .staff-wrap {
    width: min(100vw - 24px, 100%) !important;
  }

  body.client-mode .step,
  body.client-mode .card,
  body.staff-mode:not(.admin-mode) .staff-head,
  body.staff-mode:not(.admin-mode) .planning-box,
  body.admin-mode .admin-hero,
  body.admin-mode .admin-panel {
    border-radius: 16px !important;
  }

  body.admin-mode .admin-hero,
  body.staff-mode:not(.admin-mode) .staff-head {
    padding: 16px !important;
  }
}

/* 2026-05-27 Reference staff shell: close to the provided dark SaaS mockup. */
:root {
  --fgx-sidebar: 264px;
  --fgx-bg: #03050a;
  --fgx-bg-2: #050811;
  --fgx-sidebar-bg: #05070d;
  --fgx-panel: #080c15;
  --fgx-panel-2: #0d1320;
  --fgx-panel-3: #111827;
  --fgx-line: #1b2332;
  --fgx-line-2: #273247;
  --fgx-text: #f8fafc;
  --fgx-muted: #8b96a8;
  --fgx-faint: #5f6b7d;
  --fgx-purple: #6d4bff;
  --fgx-purple-2: #8b5cf6;
  --fgx-blue: #315dff;
  --fgx-green: #18c37e;
  --fgx-orange: #e88917;
  --fgx-amber: #d9a441;
  --fgx-red: #ef7770;
  --fgx-radius-lg: 14px;
  --fgx-radius: 11px;
  --fgx-radius-sm: 8px;
  --fgx-ease: cubic-bezier(.2, 0, 0, 1);
}

.ops-sidebar {
  display: none;
}

body.staff-mode,
body.staff-mode.staff-light:not(.admin-mode),
body.admin-mode {
  background:
    radial-gradient(circle at 82% 4%, rgba(109, 75, 255, .10), transparent 30rem),
    radial-gradient(circle at 4% 96%, rgba(24, 195, 126, .05), transparent 28rem),
    var(--fgx-bg) !important;
  color: var(--fgx-text) !important;
  font-variant-numeric: tabular-nums;
}

body.staff-mode main,
body.staff-mode.staff-light:not(.admin-mode) main,
body.admin-mode main {
  min-height: 100dvh !important;
  padding: 0 0 56px var(--fgx-sidebar) !important;
  background: transparent !important;
}

body.staff-mode header,
body.staff-mode.staff-light:not(.admin-mode) header,
body.admin-mode header {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  width: var(--fgx-sidebar) !important;
  height: 100dvh !important;
  padding: 0 !important;
  display: block !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 18rem),
    var(--fgx-sidebar-bg) !important;
  border-right: 1px solid var(--fgx-line) !important;
  border-bottom: 0 !important;
  box-shadow: 18px 0 54px rgba(0, 0, 0, .34) !important;
  backdrop-filter: none !important;
}

body.staff-mode header::after,
body.admin-mode header::after {
  display: none !important;
}

body.staff-mode header > .logo-wrap,
body.staff-mode header > .location-select,
body.staff-mode header > #nav,
body.staff-mode header > div:last-child,
body.admin-mode header > .logo-wrap,
body.admin-mode header > .location-select,
body.admin-mode header > #nav,
body.admin-mode header > div:last-child {
  display: none !important;
}

body.staff-mode .ops-sidebar,
body.admin-mode .ops-sidebar {
  display: flex !important;
  height: 100dvh;
  min-height: 0;
  flex-direction: column;
  padding: 24px 20px 18px;
  gap: 18px;
  color: var(--fgx-text);
}

.ops-brand {
  min-height: 48px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: var(--fgx-text);
  cursor: pointer;
}

.ops-brand strong,
.ops-account strong {
  display: block;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 760;
  letter-spacing: -.01em;
  color: var(--fgx-text);
}

.ops-brand small,
.ops-account small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.15;
  color: var(--fgx-muted);
}

.ops-orbit {
  position: relative;
  width: 32px;
  height: 32px;
  display: block;
}

.ops-orbit::before {
  content: "";
  position: absolute;
  inset: 5px 2px;
  border: 2px solid var(--fgx-purple);
  border-radius: 999px;
  transform: rotate(-28deg);
  box-shadow: 0 0 18px rgba(109, 75, 255, .38);
}

.ops-orbit::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  right: 5px;
  top: 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6, #315dff);
}

.ops-center-picker,
.ops-account {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--fgx-line);
  border-radius: var(--fgx-radius);
  background: rgba(255, 255, 255, .018);
  color: var(--fgx-text);
  font-size: 12px;
  font-weight: 720;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  transition-property: background-color, border-color, transform;
  transition-duration: 160ms;
  transition-timing-function: var(--fgx-ease);
}

.ops-center-picker:hover,
.ops-account:hover {
  background: rgba(255, 255, 255, .045);
  border-color: #33405a;
}

.ops-center-picker:active,
.ops-account:active,
.ops-item:active,
.ops-subnav button:active {
  transform: scale(.96);
}

.ops-nav {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  flex: 1 1 auto;
  scrollbar-width: thin;
  scrollbar-color: #313a50 transparent;
}

.ops-section {
  padding: 8px 0 12px;
}

.ops-section + .ops-section {
  border-top: 1px solid rgba(255, 255, 255, .055);
}

.ops-section-title {
  padding: 8px 9px 8px;
  font-size: 11px;
  line-height: 1;
  color: #6e7788;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: .075em;
}

.ops-item,
.ops-subnav button {
  position: relative;
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #c7ceda;
  -webkit-text-fill-color: #c7ceda;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  white-space: nowrap;
  transition-property: background-color, color, transform;
  transition-duration: 160ms;
  transition-timing-function: var(--fgx-ease);
}

.ops-item:hover,
.ops-subnav button:hover {
  background: rgba(255, 255, 255, .045);
  color: var(--fgx-text);
  -webkit-text-fill-color: var(--fgx-text);
}

.ops-item.active,
body.staff-mode:not(.admin-mode) .ops-item[data-ops-menu="planning"],
body.admin-mode .ops-item[data-ops-view="admin"],
.ops-subnav button.active {
  background: linear-gradient(90deg, rgba(49, 93, 255, .16), rgba(109, 75, 255, .08));
  color: var(--fgx-text);
  -webkit-text-fill-color: var(--fgx-text);
}

.ops-subnav button.active::after,
body.staff-mode:not(.admin-mode) .ops-item[data-ops-menu="planning"]::after,
body.admin-mode .ops-item[data-ops-view="admin"]::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 0;
  width: 3px;
  height: calc(100% - 14px);
  border-radius: 999px;
  background: var(--fgx-purple);
  box-shadow: 0 0 16px rgba(109, 75, 255, .55);
}

.ops-ico {
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: #aeb7c6;
}

.ops-ico::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1.7px solid currentColor;
  border-radius: 4px;
}

.ops-ico::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  right: 1px;
  top: 1px;
  border-radius: 999px;
  background: currentColor;
}

.ops-ico.planning::before { border-radius: 2px; }
.ops-ico.arrivals::after { background: var(--fgx-orange); }
.ops-ico.emails::before { transform: skewY(-8deg); }
.ops-ico.settings::before { border-radius: 999px; }

.ops-caret {
  margin-left: auto;
  color: #717c8f;
}

.ops-badge {
  margin-left: auto;
  min-width: 28px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #1a2030;
  color: #dce3ee;
  font-size: 11px;
  font-weight: 760;
  border: 1px solid #2b3448;
}

.ops-subnav {
  margin: 4px 0 8px 18px;
  padding-left: 10px;
  border-left: 1px solid #20283a;
}

.ops-subnav button {
  min-height: 33px;
  padding-left: 12px;
  color: #9aa5b7;
  -webkit-text-fill-color: #9aa5b7;
}

.ops-account {
  min-height: 54px;
  flex: 0 0 auto;
  padding: 9px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 14px;
}

.ops-account > span:first-child {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--fgx-purple), #3d67ff);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

body.staff-mode .staff-wrap,
body.admin-mode .admin-shell {
  width: min(100% - 64px, 1536px) !important;
  max-width: 1536px !important;
  margin: 0 auto !important;
  padding: 28px 0 70px !important;
}

body.staff-mode .staff-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 18px !important;
  padding: 0 0 24px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.staff-mode .staff-head h1 {
  color: var(--fgx-text) !important;
  -webkit-text-fill-color: var(--fgx-text) !important;
  font-size: 30px !important;
  line-height: 1.05 !important;
  font-weight: 820 !important;
  letter-spacing: -.025em !important;
  margin-bottom: 14px !important;
}

body.staff-mode #staffDateLabel {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  color: #a7b1c1 !important;
  -webkit-text-fill-color: #a7b1c1 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}

body.staff-mode #staffDateLabel::after {
  content: "Mise à jour en temps réel";
  position: relative;
  padding-left: 20px;
  background: radial-gradient(circle at 5px 50%, var(--fgx-green) 0 4px, transparent 5px);
  color: #8d97a8;
  -webkit-text-fill-color: #8d97a8;
}

body.staff-mode #staffDateLabel::before {
  display: none;
}

body.staff-mode .staff-head-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.staff-mode .staff-theme-switch {
  display: none !important;
}

body.staff-mode .date-nav,
body.admin-mode .admin-date-nav {
  height: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .018) !important;
  border: 1px solid var(--fgx-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

body.staff-mode .date-nav button,
body.admin-mode .admin-date-nav button,
body.staff-mode .planning-toggle,
body.staff-mode .filter-btn,
body.admin-mode .admin-btn,
body.admin-mode .admin-action-btn,
body.admin-mode .ops-admin-btn {
  min-width: 40px !important;
  min-height: 36px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #dce4f0 !important;
  -webkit-text-fill-color: #dce4f0 !important;
  box-shadow: none !important;
  transition-property: background-color, border-color, color, transform;
  transition-duration: 160ms;
  transition-timing-function: var(--fgx-ease);
}

body.staff-mode .date-nav button:hover,
body.admin-mode .admin-date-nav button:hover,
body.staff-mode .planning-toggle:hover,
body.staff-mode .filter-btn:hover,
body.admin-mode .admin-btn:hover,
body.admin-mode .admin-action-btn:hover,
body.admin-mode .ops-admin-btn:hover {
  background: #111827 !important;
  border-color: #27344b !important;
}

body.staff-mode .staff-date-label,
body.admin-mode .admin-date-label {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 12px !important;
  color: var(--fgx-text) !important;
  -webkit-text-fill-color: var(--fgx-text) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  border-radius: 8px !important;
  cursor: pointer;
}

body.staff-mode .btn-new,
body.admin-mode .admin-btn.primary,
body.admin-mode .admin-action-btn.primary,
body.admin-mode .ops-admin-btn.primary {
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(139, 92, 246, .72) !important;
  background: linear-gradient(135deg, #4f46e5, #7048ff) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  box-shadow: 0 14px 30px rgba(79, 70, 229, .24), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

body.staff-mode .btn-new:hover,
body.admin-mode .admin-btn.primary:hover,
body.admin-mode .admin-action-btn.primary:hover,
body.admin-mode .ops-admin-btn.primary:hover {
  background: linear-gradient(135deg, #5b52ef, #7b55ff) !important;
  border-color: rgba(154, 122, 255, .9) !important;
}

body.staff-mode .kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 2px 0 18px !important;
}

body.staff-mode .kpi {
  position: relative !important;
  min-height: 132px !important;
  padding: 24px 26px 22px 88px !important;
  overflow: hidden !important;
  border-radius: var(--fgx-radius-lg) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .006)),
    var(--fgx-panel) !important;
  border: 1px solid var(--fgx-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 18px 46px rgba(0, 0, 0, .22) !important;
}

body.staff-mode .kpi:nth-child(1) { --kpi-accent: var(--fgx-purple); --kpi-soft: rgba(109, 75, 255, .18); }
body.staff-mode .kpi:nth-child(2) { --kpi-accent: var(--fgx-blue); --kpi-soft: rgba(49, 93, 255, .16); }
body.staff-mode .kpi:nth-child(3) { --kpi-accent: var(--fgx-green); --kpi-soft: rgba(24, 195, 126, .12); }
body.staff-mode .kpi:nth-child(4) { --kpi-accent: var(--fgx-orange); --kpi-soft: rgba(232, 137, 23, .13); }

body.staff-mode .kpi::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 25px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .22), transparent 28%),
    var(--kpi-soft);
  border: 1px solid color-mix(in srgb, var(--kpi-accent) 34%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--kpi-accent) 18%, transparent);
}

body.staff-mode .kpi::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 22px;
  width: 92px;
  height: 36px;
  opacity: .92;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='92' height='36' viewBox='0 0 92 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 27 C10 9 17 26 24 18 C31 8 38 26 45 21 C53 15 54 2 62 9 C69 16 72 30 81 18 C85 12 88 10 90 7' stroke='%236d4bff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

body.staff-mode .kpi:nth-child(2)::after {
  background-image: url("data:image/svg+xml,%3Csvg width='92' height='36' viewBox='0 0 92 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 25 C12 6 17 10 23 19 C32 30 41 23 48 17 C55 9 61 30 68 21 C75 12 78 3 83 16 C86 23 88 23 90 13' stroke='%23315dff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

body.staff-mode .kpi:nth-child(3)::after {
  background-image: url("data:image/svg+xml,%3Csvg width='92' height='36' viewBox='0 0 92 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 28 C10 25 14 26 20 19 C28 12 35 20 43 10 C50 3 53 22 62 18 C70 14 74 4 79 10 C84 18 88 20 90 28' stroke='%2318c37e' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

body.staff-mode .kpi:nth-child(4)::after {
  background-image: url("data:image/svg+xml,%3Csvg width='92' height='36' viewBox='0 0 92 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 26 C10 23 12 9 20 11 C27 14 30 26 37 22 C45 19 47 4 55 8 C62 11 62 25 70 19 C78 13 80 3 85 11 C88 16 89 22 90 27' stroke='%23e88917' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

body.staff-mode .kpi .label {
  margin-bottom: 9px !important;
  color: #9ca6b6 !important;
  -webkit-text-fill-color: #9ca6b6 !important;
  font-size: 11px !important;
  font-weight: 780 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

body.staff-mode .kpi .value {
  color: var(--fgx-text) !important;
  -webkit-text-fill-color: var(--fgx-text) !important;
  font-size: 31px !important;
  line-height: 1 !important;
  font-weight: 840 !important;
  letter-spacing: -.025em !important;
}

body.staff-mode .kpi .hint,
body.staff-mode .kpi .tag-ok {
  color: #c2cad7 !important;
  -webkit-text-fill-color: #c2cad7 !important;
  font-size: 13px !important;
  font-weight: 560 !important;
}

body.staff-mode .kpi .tag-ok {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 9px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.staff-mode .staff-resource-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 16px !important;
  min-height: 86px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .006)), rgba(8, 12, 21, .92) !important;
  border: 1px solid var(--fgx-line) !important;
  border-radius: 16px 16px 0 0 !important;
  border-bottom: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

body.staff-mode .staff-resource-tab {
  position: relative !important;
  min-height: 86px !important;
  padding: 18px 28px 18px 72px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #dbe2ee !important;
  -webkit-text-fill-color: #dbe2ee !important;
  box-shadow: none !important;
  justify-content: flex-start !important;
}

body.staff-mode .staff-resource-tab::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 24px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(109, 75, 255, .12);
  border: 1px solid rgba(109, 75, 255, .34);
}

body.staff-mode .staff-resource-tab:nth-child(2)::before {
  background: rgba(49, 93, 255, .12);
  border-color: rgba(49, 93, 255, .34);
}

body.staff-mode .staff-resource-tab:nth-child(3)::before {
  background: rgba(24, 195, 126, .10);
  border-color: rgba(24, 195, 126, .30);
}

body.staff-mode .staff-resource-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--fgx-purple), #315dff);
  box-shadow: 0 0 18px rgba(109, 75, 255, .5);
}

body.staff-mode .staff-resource-tab .main {
  display: block !important;
  color: var(--fgx-text) !important;
  -webkit-text-fill-color: var(--fgx-text) !important;
  font-size: 14px !important;
  font-weight: 780 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}

body.staff-mode .staff-resource-tab .sub {
  margin-top: 4px !important;
  display: block !important;
  color: #8f99aa !important;
  -webkit-text-fill-color: #8f99aa !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.staff-mode .staff-resource-tab > span:last-child {
  margin-left: auto !important;
  color: var(--fgx-text) !important;
  -webkit-text-fill-color: var(--fgx-text) !important;
  font-size: 14px !important;
  font-weight: 780 !important;
}

body.staff-mode .planning-box {
  margin-top: 0 !important;
  overflow: hidden !important;
  border-radius: 0 0 16px 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .006)),
    rgba(6, 9, 16, .96) !important;
  border: 1px solid var(--fgx-line) !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .03) !important;
}

body.staff-mode .laser-planning-box {
  border-radius: 16px !important;
  margin-top: 18px !important;
}

body.staff-mode .planning-head {
  min-height: 82px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 18px 24px !important;
  border-bottom: 1px solid var(--fgx-line) !important;
  background: rgba(5, 8, 15, .72) !important;
}

body.staff-mode .planning-head h2 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--fgx-text) !important;
  -webkit-text-fill-color: var(--fgx-text) !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

body.staff-mode .planning-head h2 svg {
  width: 24px !important;
  height: 24px !important;
  padding: 4px !important;
  color: #e6e9f0 !important;
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid #28344b !important;
  border-radius: 8px !important;
}

body.staff-mode .planning-sub,
body.staff-mode .table-summary {
  color: #9aa5b8 !important;
  -webkit-text-fill-color: #9aa5b8 !important;
  font-size: 12px !important;
  font-weight: 560 !important;
}

body.staff-mode .legend {
  display: inline-flex !important;
  align-items: center !important;
  gap: 20px !important;
  color: #aeb7c6 !important;
  -webkit-text-fill-color: #aeb7c6 !important;
  font-size: 12px !important;
  font-weight: 570 !important;
}

body.staff-mode .legend .dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  margin-right: 6px !important;
}

body.staff-mode .legend .dot.conf { background: var(--fgx-blue) !important; }
body.staff-mode .legend .dot.arr { background: var(--fgx-orange) !important; }
body.staff-mode .legend .dot.paid { background: var(--fgx-green) !important; }

body.staff-mode .planning-grid-wrap,
body.staff-mode .laser-grid-wrap {
  background: #050811 !important;
  color: var(--fgx-text) !important;
}

body.staff-mode .planning-grid {
  background: #050811 !important;
}

body.staff-mode .hour-col,
body.staff-mode .lane-col,
body.staff-mode .hour-cell,
body.staff-mode .slot-cell,
body.staff-mode .hour-header,
body.staff-mode .lane-header {
  background: transparent !important;
  border-color: rgba(42, 52, 72, .72) !important;
}

body.staff-mode .slot-cell.half,
body.staff-mode .hour-cell.minor {
  border-color: rgba(42, 52, 72, .42) !important;
}

body.staff-mode .hour-header,
body.staff-mode .lane-header {
  background: rgba(3, 5, 10, .86) !important;
  color: #9ca7b8 !important;
  -webkit-text-fill-color: #9ca7b8 !important;
  font-size: 11px !important;
  font-weight: 720 !important;
}

body.staff-mode .lane-header .num,
body.staff-mode .hour-cell.major {
  color: var(--fgx-text) !important;
  -webkit-text-fill-color: var(--fgx-text) !important;
  font-weight: 780 !important;
}

body.staff-mode .hour-cell.minor,
body.staff-mode .hour-label-half,
body.staff-mode .lane-header .pl {
  color: #6f7a8c !important;
  -webkit-text-fill-color: #6f7a8c !important;
}

body.staff-mode .current-line {
  background: linear-gradient(90deg, var(--fgx-orange), rgba(232, 137, 23, .24)) !important;
  box-shadow: 0 0 18px rgba(232, 137, 23, .38) !important;
}

body.staff-mode .booking {
  overflow: hidden !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  background:
    linear-gradient(180deg, rgba(49, 93, 255, .18), rgba(49, 93, 255, .055)),
    #0b1222 !important;
  border: 1px solid rgba(49, 93, 255, .48) !important;
  box-shadow: inset 3px 0 0 rgba(96, 142, 255, .88), 0 10px 26px rgba(0, 0, 0, .25) !important;
  color: var(--fgx-text) !important;
  -webkit-text-fill-color: var(--fgx-text) !important;
  transition-property: transform, border-color, background-color, box-shadow;
  transition-duration: 160ms;
  transition-timing-function: var(--fgx-ease);
}

body.staff-mode .booking:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(117, 155, 255, .78) !important;
  box-shadow: inset 3px 0 0 rgba(96, 142, 255, .95), 0 14px 34px rgba(0, 0, 0, .34) !important;
}

body.staff-mode .booking.paid,
body.staff-mode .booking:not(.is-formula).paid {
  background: linear-gradient(180deg, rgba(24, 195, 126, .18), rgba(24, 195, 126, .045)), #06150f !important;
  border-color: rgba(24, 195, 126, .46) !important;
  box-shadow: inset 3px 0 0 rgba(24, 195, 126, .86), 0 10px 26px rgba(0, 0, 0, .25) !important;
}

body.staff-mode .booking.arr,
body.staff-mode .booking:not(.is-formula).arr {
  background: linear-gradient(180deg, rgba(232, 137, 23, .18), rgba(232, 137, 23, .045)), #171006 !important;
  border-color: rgba(232, 137, 23, .48) !important;
  box-shadow: inset 3px 0 0 rgba(232, 137, 23, .86), 0 10px 26px rgba(0, 0, 0, .25) !important;
}

body.staff-mode .booking.is-formula,
body.staff-mode .booking.is-formula.conf,
body.staff-mode .booking.is-formula.arr,
body.staff-mode .booking.is-formula.paid,
body.staff-mode .laser-session-slot.has-session.has-formula,
body.staff-mode .laser-group-card.formula,
body.staff-mode .res-row.is-formula {
  background: linear-gradient(180deg, rgba(232, 137, 23, .17), rgba(232, 137, 23, .055)), #160f05 !important;
  border-color: rgba(232, 137, 23, .56) !important;
  box-shadow: inset 3px 0 0 rgba(232, 137, 23, .90), 0 12px 28px rgba(0, 0, 0, .26) !important;
}

body.staff-mode .booking.is-laser-multi,
body.staff-mode .laser-group-card.direct,
body.staff-mode .res-row.is-laser-multi {
  background: linear-gradient(180deg, rgba(239, 119, 112, .15), rgba(239, 119, 112, .045)), #180d0d !important;
  border-color: rgba(239, 119, 112, .46) !important;
  box-shadow: inset 3px 0 0 rgba(239, 119, 112, .86), 0 12px 28px rgba(0, 0, 0, .26) !important;
}

body.staff-mode .booking-name,
body.staff-mode .laser-session-title,
body.staff-mode .laser-group-main strong,
body.staff-mode .res-row-name {
  color: var(--fgx-text) !important;
  -webkit-text-fill-color: var(--fgx-text) !important;
  font-weight: 780 !important;
  letter-spacing: -.01em !important;
}

body.staff-mode .booking-meta,
body.staff-mode .booking-range,
body.staff-mode .booking-extra,
body.staff-mode .laser-session-sub,
body.staff-mode .laser-group-main small,
body.staff-mode .res-row-meta {
  color: #c1cada !important;
  -webkit-text-fill-color: #c1cada !important;
  font-size: 11px !important;
}

body.staff-mode .b-tag,
body.staff-mode .type-badge,
body.staff-mode .reservation-tags span,
body.staff-mode .res-state-pill,
body.staff-mode .res-lane-chip,
body.staff-mode .lane-chip,
body.staff-mode .laser-card-pill,
body.staff-mode .laser-session-kind,
body.staff-mode .laser-group-count,
body.staff-mode .count-badge {
  min-height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 5px !important;
  padding: 2px 7px !important;
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  color: #dfe6f2 !important;
  -webkit-text-fill-color: #dfe6f2 !important;
  font-size: 10px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

body.staff-mode .booking.is-formula .b-tag,
body.staff-mode .type-badge.formule,
body.staff-mode .reservation-tags .formula,
body.staff-mode .laser-card-pill.formula {
  background: rgba(232, 137, 23, .18) !important;
  border-color: rgba(232, 137, 23, .42) !important;
  color: #ffd390 !important;
  -webkit-text-fill-color: #ffd390 !important;
}

body.staff-mode .type-badge.laser,
body.staff-mode .laser-card-pill.direct,
body.staff-mode .res-lane-chip.laser {
  background: rgba(49, 93, 255, .16) !important;
  border-color: rgba(49, 93, 255, .38) !important;
  color: #cbd8ff !important;
  -webkit-text-fill-color: #cbd8ff !important;
}

body.staff-mode .laser-agenda {
  background: #050811 !important;
  border: 0 !important;
}

body.staff-mode .laser-agenda-header,
body.staff-mode .laser-agenda-row {
  grid-template-columns: 84px minmax(0, 1fr) 124px !important;
  background: transparent !important;
  border-color: var(--fgx-line) !important;
}

body.staff-mode .laser-agenda-header {
  color: #9aa5b8 !important;
  -webkit-text-fill-color: #9aa5b8 !important;
  font-size: 11px !important;
  font-weight: 760 !important;
}

body.staff-mode .laser-session-slot {
  border-radius: 10px !important;
}

body.staff-mode .laser-session-slot.has-session {
  background: linear-gradient(180deg, rgba(49, 93, 255, .10), rgba(49, 93, 255, .025)), #0b1220 !important;
  border: 1px solid rgba(78, 105, 145, .55) !important;
  box-shadow: inset 3px 0 0 rgba(96, 142, 255, .88) !important;
}

body.staff-mode .laser-session-slot.is-empty {
  background: #050811 !important;
  border: 1px dashed #2a354b !important;
  color: #aeb8c8 !important;
  -webkit-text-fill-color: #aeb8c8 !important;
}

body.staff-mode .laser-group-card {
  border-radius: 8px !important;
  border-color: rgba(78, 105, 145, .55) !important;
  background: rgba(255, 255, 255, .035) !important;
  box-shadow: none !important;
}

body.staff-mode .laser-capacity-line {
  height: 8px !important;
  border-radius: 999px !important;
  background: #070b14 !important;
  border: 1px solid #273247 !important;
}

body.staff-mode .laser-capacity-fill,
body.staff-mode .laser-meter-segment {
  background: #80a7e7 !important;
}

body.staff-mode .laser-meter-segment.formula {
  background: var(--fgx-amber) !important;
}

body.staff-mode .table-box,
body.staff-mode .res-section,
body.staff-mode .quick-panel,
body.staff-mode .qb-modal,
body.staff-mode .edit-modal,
body.staff-mode .pos-panel {
  background: rgba(8, 12, 21, .96) !important;
  border: 1px solid var(--fgx-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 62px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  color: var(--fgx-text) !important;
  -webkit-text-fill-color: var(--fgx-text) !important;
}

body.staff-mode .table-head,
body.staff-mode .res-section-head,
body.staff-mode .qb-head,
body.staff-mode .edit-modal-head,
body.staff-mode .pos-head {
  background: rgba(5, 8, 15, .72) !important;
  border-bottom: 1px solid var(--fgx-line) !important;
}

body.staff-mode .res-list,
body.staff-mode .res-sections {
  background: transparent !important;
}

body.staff-mode .res-row {
  background: rgba(255, 255, 255, .025) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-left: 3px solid rgba(96, 142, 255, .75) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body.staff-mode .res-row.paid {
  border-left-color: var(--fgx-green) !important;
}

body.staff-mode .res-row.arrived,
body.staff-mode .res-row.arr {
  border-left-color: var(--fgx-orange) !important;
}

body.staff-mode .res-row.is-formula {
  border-left-color: var(--fgx-orange) !important;
}

body.staff-mode .search-wrap,
body.staff-mode input,
body.staff-mode select,
body.staff-mode textarea,
body.staff-mode .qb-input,
body.staff-mode .auth-input,
body.staff-mode .edit-form .input,
body.admin-mode input,
body.admin-mode select,
body.admin-mode textarea {
  background: #050811 !important;
  border: 1px solid #253047 !important;
  color: var(--fgx-text) !important;
  -webkit-text-fill-color: var(--fgx-text) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body.staff-mode input:focus,
body.staff-mode select:focus,
body.staff-mode textarea:focus,
body.staff-mode .qb-input:focus,
body.staff-mode .edit-form .input:focus,
body.admin-mode input:focus,
body.admin-mode select:focus,
body.admin-mode textarea:focus {
  outline: none !important;
  border-color: rgba(109, 75, 255, .78) !important;
  box-shadow: 0 0 0 3px rgba(109, 75, 255, .18) !important;
}

body.staff-mode input::placeholder,
body.staff-mode textarea::placeholder,
body.admin-mode input::placeholder,
body.admin-mode textarea::placeholder {
  color: #6f7a8c !important;
  -webkit-text-fill-color: #6f7a8c !important;
}

body.admin-mode .admin-hero,
body.admin-mode .admin-panel,
body.admin-mode .ops-cockpit,
body.admin-mode .admin-center-card,
body.admin-mode .ops-cockpit-card,
body.admin-mode .admin-table-wrap {
  background: rgba(8, 12, 21, .96) !important;
  border: 1px solid var(--fgx-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 62px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  color: var(--fgx-text) !important;
  -webkit-text-fill-color: var(--fgx-text) !important;
}

body.admin-mode .admin-hero {
  padding: 22px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}

body.admin-mode .admin-hero h1,
body.admin-mode .admin-panel h2,
body.admin-mode .ops-cockpit-title h2 {
  color: var(--fgx-text) !important;
  -webkit-text-fill-color: var(--fgx-text) !important;
  letter-spacing: -.02em !important;
}

body.admin-mode .admin-eyebrow,
body.admin-mode .admin-hero p,
body.admin-mode .admin-panel p,
body.admin-mode .ops-cockpit-title p {
  color: #9aa5b8 !important;
  -webkit-text-fill-color: #9aa5b8 !important;
}

body.admin-mode .admin-brand-logo {
  width: 122px !important;
  height: 78px !important;
  padding: 12px !important;
  background: #050811 !important;
  border: 1px solid var(--fgx-line-2) !important;
  border-radius: 10px !important;
  object-fit: contain !important;
}

body.admin-mode .admin-kpi,
body.admin-mode .admin-table,
body.admin-mode table,
body.admin-mode .mail-row,
body.admin-mode .decision-log-row,
body.admin-mode .timeline-item,
body.admin-mode .ai-problem-row {
  background: #080c15 !important;
  border-color: var(--fgx-line) !important;
  color: var(--fgx-text) !important;
  -webkit-text-fill-color: var(--fgx-text) !important;
}

body.admin-mode table th,
body.admin-mode .admin-table th {
  background: #050811 !important;
  color: #9aa5b8 !important;
  -webkit-text-fill-color: #9aa5b8 !important;
  border-color: var(--fgx-line) !important;
}

body.admin-mode table td,
body.admin-mode .admin-table td {
  color: #dce4f0 !important;
  -webkit-text-fill-color: #dce4f0 !important;
  border-color: var(--fgx-line) !important;
}

@media (max-width: 1180px) {
  body.staff-mode .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.staff-mode .staff-resource-tabs {
    grid-template-columns: 1fr !important;
    border-radius: 16px !important;
  }

  body.staff-mode .planning-box {
    border-radius: 16px !important;
    margin-top: 14px !important;
  }
}

@media (max-width: 980px) {
  body.staff-mode main,
  body.admin-mode main {
    padding-left: 0 !important;
  }

  body.staff-mode header,
  body.admin-mode header {
    position: sticky !important;
    width: 100% !important;
    height: auto !important;
    min-height: 72px !important;
    overflow: visible !important;
  }

  body.staff-mode .ops-sidebar,
  body.admin-mode .ops-sidebar {
    height: auto !important;
    min-height: 72px !important;
    padding: 14px 18px !important;
  }

  body.staff-mode .ops-nav,
  body.admin-mode .ops-nav,
  body.staff-mode .ops-center-picker,
  body.admin-mode .ops-center-picker {
    display: none !important;
  }

  body.staff-mode .ops-account,
  body.admin-mode .ops-account {
    display: none !important;
  }

  body.staff-mode .staff-wrap,
  body.admin-mode .admin-shell {
    width: min(100% - 24px, 100%) !important;
    padding-top: 18px !important;
  }
}

@media (max-width: 740px) {
  body.staff-mode .staff-head {
    grid-template-columns: 1fr !important;
  }

  body.staff-mode .staff-head-actions {
    flex-wrap: wrap !important;
  }

  body.staff-mode .kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Planning du jour exact-pass: match the provided reference more tightly. */
body.staff-mode:not(.admin-mode) main {
  padding-left: 245px !important;
}

body.staff-mode:not(.admin-mode) .staff-wrap {
  width: calc(100vw - 245px - 74px) !important;
  max-width: none !important;
  margin: 0 37px !important;
  padding: 27px 0 64px !important;
}

body.staff-mode:not(.admin-mode) .staff-head {
  min-height: 58px !important;
  padding: 0 !important;
  margin: 0 0 27px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.staff-mode:not(.admin-mode) .staff-head h1 {
  margin: 0 0 14px !important;
  font-size: 25px !important;
  line-height: 1.06 !important;
  font-weight: 820 !important;
  letter-spacing: -.022em !important;
}

body.staff-mode:not(.admin-mode) #staffDateLabel {
  position: relative;
  min-height: 18px;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding-left: 22px !important;
  color: #f4f7fb !important;
  -webkit-text-fill-color: #f4f7fb !important;
  font-size: 13px !important;
  font-weight: 710 !important;
  text-transform: none;
}

body.staff-mode:not(.admin-mode) #staffDateLabel::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 0;
  top: 2px;
  width: 15px;
  height: 15px;
  opacity: .92;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5' stroke='%23eef2ff' stroke-width='2'/%3E%3Cpath d='M8 3.5V7M16 3.5V7M4 10H20' stroke='%23eef2ff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

body.staff-mode:not(.admin-mode) #staffDateLabel::after {
  content: "Mise à jour en temps réel   " attr(data-now) !important;
  position: static !important;
  margin-left: 24px !important;
  padding-left: 20px !important;
  background: radial-gradient(circle at 5px 50%, #21c990 0 4px, transparent 5px) !important;
  color: #848d9c !important;
  -webkit-text-fill-color: #848d9c !important;
  font-size: 12px !important;
  font-weight: 580 !important;
  text-transform: none !important;
  white-space: pre;
}

body.staff-mode:not(.admin-mode) .staff-head-actions {
  gap: 14px !important;
  align-items: center !important;
}

body.staff-mode:not(.admin-mode) .date-nav {
  height: 39px !important;
  min-height: 39px !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.staff-mode:not(.admin-mode) .date-nav button {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 9px !important;
  border: 1px solid #1f2635 !important;
  background: rgba(8, 12, 19, .85) !important;
  color: #f4f7fb !important;
  -webkit-text-fill-color: #f4f7fb !important;
}

body.staff-mode:not(.admin-mode) .staff-date-label {
  min-width: 192px !important;
  height: 38px !important;
  min-height: 38px !important;
  justify-content: center !important;
  padding: 0 15px !important;
  border: 1px solid #1f2635 !important;
  border-radius: 9px !important;
  background: rgba(8, 12, 19, .85) !important;
  color: #f7f9ff !important;
  -webkit-text-fill-color: #f7f9ff !important;
  font-size: 13px !important;
  font-weight: 720 !important;
}

body.staff-mode:not(.admin-mode) .staff-date-label::before {
  content: "";
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 2px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5' stroke='%23f7f9ff' stroke-width='2'/%3E%3Cpath d='M8 3.5V7M16 3.5V7M4 10H20' stroke='%23f7f9ff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

body.staff-mode:not(.admin-mode) .staff-theme-switch {
  height: 39px !important;
  min-height: 39px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px !important;
  border-radius: 9px !important;
  border: 1px solid #1f2635 !important;
  background: rgba(8, 12, 19, .85) !important;
  box-shadow: none !important;
}

body.staff-mode:not(.admin-mode) .staff-theme-btn {
  min-width: 88px !important;
  height: 30px !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border-radius: 7px !important;
  border: 0 !important;
  background: transparent !important;
  color: #8c95a6 !important;
  -webkit-text-fill-color: #8c95a6 !important;
  font-size: 12px !important;
  font-weight: 680 !important;
}

body.staff-mode:not(.admin-mode) .staff-theme-btn::before {
  content: "";
  width: 13px;
  height: 13px;
  display: inline-block;
  background: currentColor;
  opacity: .95;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
}

body.staff-mode:not(.admin-mode) #staffThemeDark::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='16' height='16' rx='3' fill='black'/%3E%3Cpath d='M8 2v4M16 2v4M4 10h16' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='16' height='16' rx='3' fill='black'/%3E%3Cpath d='M8 2v4M16 2v4M4 10h16' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

body.staff-mode:not(.admin-mode) #staffThemeLight::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h14v14H5zM8 5v14M16 5v14' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h14v14H5zM8 5v14M16 5v14' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

body.staff-mode:not(.admin-mode) .staff-theme-btn.active,
body.staff-mode:not(.admin-mode) #staffThemeDark {
  background: rgba(109, 75, 255, .12) !important;
  color: #8b70ff !important;
  -webkit-text-fill-color: #8b70ff !important;
}

body.staff-mode:not(.admin-mode) .btn-new {
  height: 39px !important;
  min-height: 39px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  border-color: #5d47ff !important;
  background: linear-gradient(135deg, #543dff, #7259ff) !important;
  box-shadow: 0 14px 30px rgba(87, 66, 255, .24) !important;
  font-size: 13px !important;
}

body.staff-mode:not(.admin-mode) .kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 0 0 20px !important;
}

body.staff-mode:not(.admin-mode) .kpi {
  min-height: 116px !important;
  padding: 22px 24px 20px 82px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .006)), #080b13 !important;
  border: 1px solid #1b2332 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .028) !important;
}

body.staff-mode:not(.admin-mode) .kpi::before {
  left: 20px !important;
  top: 22px !important;
  width: 43px !important;
  height: 43px !important;
  border-radius: 9px !important;
  background-color: var(--kpi-soft) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
}

body.staff-mode:not(.admin-mode) .kpi:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='5' width='16' height='15' rx='2.4' stroke='%238b5cf6' stroke-width='2'/%3E%3Cpath d='M8 3.5V7M16 3.5V7M4.5 10H19.5M8 14H10M14 14H16' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

body.staff-mode:not(.admin-mode) .kpi:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3' stroke='%23315dff' stroke-width='2'/%3E%3Ccircle cx='16' cy='8' r='3' stroke='%23315dff' stroke-width='2'/%3E%3Cpath d='M3.5 18c.6-3 2.4-5 4.5-5s3.9 2 4.5 5M11.5 18c.6-3 2.4-5 4.5-5s3.9 2 4.5 5' stroke='%23315dff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

body.staff-mode:not(.admin-mode) .kpi:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 18V9M12 18V5M17 18v-7M5 18h14' stroke='%2318c37e' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

body.staff-mode:not(.admin-mode) .kpi:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 17h12M8 17V9l4-3 4 3v8M10 17v-5h4v5' stroke='%23e88917' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

body.staff-mode:not(.admin-mode) .kpi .label {
  margin-bottom: 8px !important;
  font-size: 10px !important;
  letter-spacing: .052em !important;
  color: #858f9f !important;
  -webkit-text-fill-color: #858f9f !important;
}

body.staff-mode:not(.admin-mode) .kpi .value {
  font-size: 30px !important;
  line-height: .98 !important;
  letter-spacing: -.035em !important;
}

body.staff-mode:not(.admin-mode) .kpi .hint,
body.staff-mode:not(.admin-mode) .kpi .tag-ok {
  font-size: 13px !important;
  color: #d8dee9 !important;
  -webkit-text-fill-color: #d8dee9 !important;
}

body.staff-mode:not(.admin-mode) .staff-resource-tabs {
  min-height: 69px !important;
  grid-template-columns: 248px 248px 248px minmax(0, 1fr) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  background: rgba(8, 11, 18, .82) !important;
  border: 1px solid #1a2231 !important;
  border-bottom: 0 !important;
  overflow: hidden !important;
}

body.staff-mode:not(.admin-mode) .staff-resource-tab {
  min-height: 69px !important;
  padding: 13px 22px 13px 70px !important;
  background: transparent !important;
  border-right: 1px solid rgba(255, 255, 255, .045) !important;
}

body.staff-mode:not(.admin-mode) .staff-resource-tab::before {
  left: 38px !important;
  top: 22px !important;
  width: 32px !important;
  height: 32px !important;
  transform: translateX(-18px);
  border-radius: 8px !important;
}

body.staff-mode:not(.admin-mode) .staff-resource-tab:nth-child(1)::before {
  background-color: rgba(109, 75, 255, .16) !important;
  border-color: rgba(109, 75, 255, .40) !important;
  background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='8' cy='17' rx='3.2' ry='4' stroke='%238b5cf6' stroke-width='2'/%3E%3Cellipse cx='16' cy='17' rx='3.2' ry='4' stroke='%238b5cf6' stroke-width='2'/%3E%3Ccircle cx='8' cy='7' r='2' stroke='%238b5cf6' stroke-width='2'/%3E%3Ccircle cx='16' cy='7' r='2' stroke='%238b5cf6' stroke-width='2'/%3E%3Cpath d='M8 9v4M16 9v4M12 4v5M5 12c4-2 10-2 14 0' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
}

body.staff-mode:not(.admin-mode) .staff-resource-tab:nth-child(2)::before {
  background-color: rgba(145, 160, 184, .08) !important;
  border-color: rgba(145, 160, 184, .34) !important;
  background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='8.5' stroke='%2398a4b8' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='4.5' stroke='%2398a4b8' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.7' fill='%2398a4b8'/%3E%3Cpath d='M12 2.8v3M12 18.2v3M2.8 12h3M18.2 12h3' stroke='%2398a4b8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
}

body.staff-mode:not(.admin-mode) .staff-resource-tab:nth-child(3)::before {
  background-color: rgba(24, 195, 126, .11) !important;
  border-color: rgba(24, 195, 126, .34) !important;
  background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 7.5h4v4H7zM13 7.5h4v4h-4zM7 13.5h4v4H7zM13 13.5h4v4h-4z' stroke='%2318c37e' stroke-width='1.7'/%3E%3Cpath d='M4 12h3M17 12h3M12 4v3M12 17v3' stroke='%2318c37e' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
}

body.staff-mode:not(.admin-mode) .staff-resource-tab .main {
  font-size: 14px !important;
  line-height: 1.05 !important;
}

body.staff-mode:not(.admin-mode) .staff-resource-tab .sub {
  font-size: 12px !important;
  margin-top: 5px !important;
}

body.staff-mode:not(.admin-mode) .staff-resource-tab > span:last-child {
  display: none !important;
}

body.staff-mode:not(.admin-mode) .staff-resource-tab.active {
  background: linear-gradient(180deg, rgba(109, 75, 255, .055), rgba(109, 75, 255, .012)) !important;
}

body.staff-mode:not(.admin-mode) .staff-resource-tabs::after {
  content: "Confirmé      Arrivé      Payé      Filtres";
  align-self: center;
  justify-self: end;
  margin-right: 20px;
  color: #a2acbd;
  font-size: 12px;
  font-weight: 560;
  word-spacing: 14px;
}

body.staff-mode:not(.admin-mode) .planning-box {
  border-radius: 0 0 8px 8px !important;
  border-color: #1a2231 !important;
  background: rgba(5, 8, 14, .98) !important;
  box-shadow: none !important;
}

body.staff-mode:not(.admin-mode) .planning-head {
  min-height: 76px !important;
  padding: 18px 18px 15px 16px !important;
  background: transparent !important;
  border-bottom: 1px solid #1a2231 !important;
}

body.staff-mode:not(.admin-mode) .planning-head h2 {
  font-size: 16px !important;
  font-weight: 800 !important;
  gap: 8px !important;
}

body.staff-mode:not(.admin-mode) .planning-head h2 svg {
  width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

body.staff-mode:not(.admin-mode) .planning-actions {
  display: grid !important;
  grid-template-columns: auto 38px auto auto !important;
  align-items: center !important;
  gap: 10px !important;
}

body.staff-mode:not(.admin-mode) .planning-search-inline {
  position: relative;
  width: 176px;
  height: 38px;
}

body.staff-mode:not(.admin-mode) .planning-search-inline input {
  width: 100% !important;
  height: 38px !important;
  padding: 0 38px 0 17px !important;
  border-radius: 8px !important;
  background: rgba(5, 8, 14, .86) !important;
  border: 1px solid #202a3c !important;
  color: #dce5f2 !important;
  -webkit-text-fill-color: #dce5f2 !important;
  font-size: 12px !important;
}

body.staff-mode:not(.admin-mode) .planning-search-inline svg {
  position: absolute;
  right: 13px;
  top: 11px;
  color: #9aa5b7;
}

body.staff-mode:not(.admin-mode) .planning-more-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid #202a3c;
  background: rgba(5, 8, 14, .86);
  color: #dce5f2;
  font-weight: 800;
}

body.staff-mode:not(.admin-mode) .planning-toggle {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid #202a3c !important;
  background: rgba(5, 8, 14, .86) !important;
  font-size: 12px !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}

body.staff-mode:not(.admin-mode) .planning-head .legend {
  display: none !important;
}

body.staff-mode:not(.admin-mode) .planning-grid-wrap {
  background: #05070d !important;
}

body.staff-mode:not(.admin-mode) .planning-grid {
  min-width: 1216px !important;
  background: #05070d !important;
}

body.staff-mode:not(.admin-mode) .hour-col,
body.staff-mode:not(.admin-mode) .lane-col {
  background: #05070d !important;
}

body.staff-mode:not(.admin-mode) .hour-header,
body.staff-mode:not(.admin-mode) .lane-header {
  height: 31px !important;
  min-height: 31px !important;
  background: #05070d !important;
  border-color: #1a2231 !important;
  font-size: 10px !important;
}

body.staff-mode:not(.admin-mode) .slot-cell,
body.staff-mode:not(.admin-mode) .hour-cell {
  border-color: rgba(31, 39, 55, .72) !important;
}

body.staff-mode:not(.admin-mode) .slot-cell.half,
body.staff-mode:not(.admin-mode) .hour-cell.minor {
  border-color: rgba(31, 39, 55, .46) !important;
}

body.staff-mode:not(.admin-mode) .hour-cell.major,
body.staff-mode:not(.admin-mode) .hour-label-hour {
  color: #eef2ff !important;
  -webkit-text-fill-color: #eef2ff !important;
  font-size: 12px !important;
  font-weight: 780 !important;
}

body.staff-mode:not(.admin-mode) .hour-label-half {
  font-size: 11px !important;
}

body.staff-mode:not(.admin-mode) .booking {
  border-radius: 5px !important;
  padding: 9px 10px !important;
  box-shadow: inset 2px 0 0 currentColor, 0 10px 22px rgba(0, 0, 0, .22) !important;
}

body.staff-mode:not(.admin-mode) .booking.conf {
  color: #6187ff !important;
  background: linear-gradient(180deg, rgba(49, 93, 255, .18), rgba(49, 93, 255, .055)), #081024 !important;
  border-color: rgba(49, 93, 255, .46) !important;
}

body.staff-mode:not(.admin-mode) .booking.paid {
  color: #18c37e !important;
  background: linear-gradient(180deg, rgba(24, 195, 126, .22), rgba(24, 195, 126, .055)), #06150f !important;
  border-color: rgba(24, 195, 126, .50) !important;
}

body.staff-mode:not(.admin-mode) .booking.arr {
  color: #e88917 !important;
  background: linear-gradient(180deg, rgba(232, 137, 23, .18), rgba(232, 137, 23, .055)), #170f05 !important;
  border-color: rgba(232, 137, 23, .50) !important;
}

body.staff-mode:not(.admin-mode) .booking.is-formula {
  color: #e88917 !important;
  background: linear-gradient(180deg, rgba(232, 137, 23, .19), rgba(232, 137, 23, .045)), #130c04 !important;
  border-color: rgba(232, 137, 23, .52) !important;
}

body.staff-mode:not(.admin-mode) .booking-name {
  font-size: 11px !important;
  line-height: 1.15 !important;
  color: #fbfdff !important;
  -webkit-text-fill-color: #fbfdff !important;
}

body.staff-mode:not(.admin-mode) .booking-meta {
  font-size: 11px !important;
  line-height: 1.15 !important;
  color: #f1f5ff !important;
  -webkit-text-fill-color: #f1f5ff !important;
  opacity: .92 !important;
}

body.staff-mode:not(.admin-mode) .booking .b-tag {
  min-height: 17px !important;
  padding: 1px 6px !important;
  border-radius: 5px !important;
  font-size: 9px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-head {
  min-height: 56px !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .kpi {
  box-sizing: border-box !important;
  height: 116px !important;
  min-height: 116px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .018), rgba(255, 255, 255, .004)), #070a12 !important;
  border-color: #1a2231 !important;
  box-shadow: none !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-resource-tabs {
  background: rgba(7, 10, 17, .82) !important;
  border-color: #1a2231 !important;
  box-shadow: none !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-resource-tabs::after {
  display: none !important;
  content: none !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .resource-strip-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  min-width: 0;
  padding: 0 20px 0 12px;
  color: #a2acbd;
  -webkit-text-fill-color: #a2acbd;
  font-size: 12px;
  font-weight: 560;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .resource-strip-actions span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .resource-strip-actions .dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 999px;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .resource-strip-actions .dot.conf { background: #315dff; }
body.staff-mode:not(.staff-light):not(.admin-mode) .resource-strip-actions .dot.arr { background: #e88917; }
body.staff-mode:not(.staff-light):not(.admin-mode) .resource-strip-actions .dot.paid { background: #18c37e; }

body.staff-mode:not(.staff-light):not(.admin-mode) .resource-filter-btn {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border-radius: 8px;
  border: 1px solid #202a3c;
  background: rgba(5, 8, 14, .86);
  color: #dce5f2;
  -webkit-text-fill-color: #dce5f2;
  font-size: 12px;
  font-weight: 700;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .planning-box {
  background: #05070d !important;
  border-color: #1a2231 !important;
  box-shadow: none !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .planning-head {
  background: #05070d !important;
  border-color: #1a2231 !important;
}

/* Reference lock pass: flatter, closer to the provided dark planning mockup. */
body.staff-mode:not(.staff-light):not(.admin-mode) {
  --fgx-bg: #030409;
  --fgx-sidebar-bg: #04060b;
  --fgx-panel: #080a11;
  --fgx-line: #171d29;
  --fgx-line-2: #222b3c;
  --fgx-purple: #6c4dff;
  --fgx-blue: #315dff;
  --fgx-green: #18c37e;
  --fgx-orange: #e88917;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .kpi {
  background: #080a11 !important;
  border-color: #171d29 !important;
  border-radius: 7px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .kpi::before {
  width: 38px !important;
  height: 38px !important;
  left: 20px !important;
  top: 22px !important;
  border-radius: 8px !important;
  border-color: rgba(255, 255, 255, .04) !important;
  box-shadow: none !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .kpi::after {
  right: 18px !important;
  bottom: 24px !important;
  width: 88px !important;
  height: 34px !important;
  opacity: .78 !important;
  filter: none !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .kpi .label {
  color: #8d95a4 !important;
  -webkit-text-fill-color: #8d95a4 !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .kpi .value {
  color: #f7f9ff !important;
  -webkit-text-fill-color: #f7f9ff !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .btn-new {
  background: #5b4bff !important;
  border-color: #5b4bff !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(91, 75, 255, .22) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .btn-new:hover {
  background: #6658ff !important;
  border-color: #6658ff !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-resource-tabs {
  min-height: 68px !important;
  background: #070910 !important;
  border-color: #171d29 !important;
  border-radius: 7px 7px 0 0 !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-resource-tab {
  min-height: 68px !important;
  padding-left: 64px !important;
  background: transparent !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-resource-tab.active {
  background: #101521 !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-resource-tab.active::after {
  height: 2px !important;
  background: #6c4dff !important;
  box-shadow: none !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-resource-tab::before {
  width: 27px !important;
  height: 27px !important;
  left: 31px !important;
  top: 21px !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #8b5cf6 !important;
  background-image: none !important;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
  box-shadow: none !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-resource-tab:nth-child(1)::before {
  background-color: #8b5cf6 !important;
  -webkit-mask-image: url("./assets/bowling-pins-pinhead.svg");
  mask-image: url("./assets/bowling-pins-pinhead.svg");
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-resource-tab:nth-child(2)::before {
  background-color: #9aa5b7 !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='27' height='27' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='8.2' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4.2' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='black'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='27' height='27' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='8.2' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4.2' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='black'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-resource-tab:nth-child(3)::before {
  background-color: #9aa5b7 !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='27' height='27' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 6.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM21 6.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM14.5 17.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z' fill='black'/%3E%3Cpath d='M8 7h8M6.8 8.5l4 7M17.2 8.5l-4 7' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='27' height='27' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 6.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM21 6.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM14.5 17.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z' fill='black'/%3E%3Cpath d='M8 7h8M6.8 8.5l4 7M17.2 8.5l-4 7' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-resource-tab .main {
  font-size: 13px !important;
  font-weight: 780 !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .staff-resource-tab .sub {
  font-size: 11px !important;
  color: #8c95a6 !important;
  -webkit-text-fill-color: #8c95a6 !important;
}

body.admin-mode .admin-platform-logo {
  position: relative !important;
  width: 62px !important;
  height: 62px !important;
  flex: 0 0 62px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  background: #0c1118 !important;
  box-shadow: none !important;
}

body.admin-mode .admin-platform-logo::before {
  content: "" !important;
  position: absolute !important;
  width: 39px !important;
  height: 17px !important;
  border: 2.2px solid #7c6df2 !important;
  border-radius: 999px !important;
  transform: rotate(-28deg) !important;
}

body.admin-mode .admin-platform-logo::after {
  content: "" !important;
  position: absolute !important;
  right: 15px !important;
  top: 16px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: #f4f7fb !important;
}

body.admin-mode .admin-platform-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 16px 0 0 !important;
}

body.admin-mode .admin-platform-card {
  min-height: 92px !important;
  padding: 16px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 14px !important;
  background: #0b0f15 !important;
  box-shadow: none !important;
}

body.admin-mode .admin-platform-card .k {
  color: #8c98aa !important;
  font-size: 11px !important;
  font-weight: 720 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body.admin-mode .admin-platform-card .v {
  margin-top: 10px !important;
  color: #f8fafc !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 760 !important;
  font-variant-numeric: tabular-nums !important;
}

body.admin-mode .admin-platform-card .s {
  margin-top: 8px !important;
  color: #8c98aa !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body.admin-mode .admin-client-context {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 999px !important;
  background: #0b0f15 !important;
  color: #cbd5e1 !important;
  font-size: 12px !important;
  font-weight: 640 !important;
}

body.admin-mode .admin-client-context::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #37c984 !important;
}

@media (max-width: 980px) {
  body.admin-mode .admin-platform-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  body.admin-mode .admin-platform-strip {
    grid-template-columns: 1fr !important;
  }
}

body.staff-mode:not(.staff-light):not(.admin-mode) .planning-box,
body.staff-mode:not(.staff-light):not(.admin-mode) .planning-head,
body.staff-mode:not(.staff-light):not(.admin-mode) .planning-grid-wrap,
body.staff-mode:not(.staff-light):not(.admin-mode) .planning-grid,
body.staff-mode:not(.staff-light):not(.admin-mode) .hour-col,
body.staff-mode:not(.staff-light):not(.admin-mode) .lane-col,
body.staff-mode:not(.staff-light):not(.admin-mode) .hour-header,
body.staff-mode:not(.staff-light):not(.admin-mode) .lane-header {
  background: #05070c !important;
  border-color: #171d29 !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .slot-cell,
body.staff-mode:not(.staff-light):not(.admin-mode) .hour-cell {
  border-color: rgba(35, 43, 60, .58) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .slot-cell.half,
body.staff-mode:not(.staff-light):not(.admin-mode) .hour-cell.minor {
  border-color: rgba(35, 43, 60, .32) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .planning-search-inline input,
body.staff-mode:not(.staff-light):not(.admin-mode) .planning-more-btn,
body.staff-mode:not(.staff-light):not(.admin-mode) .resource-filter-btn,
body.staff-mode:not(.staff-light):not(.admin-mode) .planning-toggle {
  background: #060911 !important;
  border-color: #20283a !important;
  box-shadow: none !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .booking {
  border-radius: 5px !important;
  box-shadow: inset 0 0 28px rgba(255, 255, 255, .012), 0 8px 18px rgba(0, 0, 0, .18) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .booking.conf {
  color: #4d73ff !important;
  background: #071127 !important;
  border-color: rgba(49, 93, 255, .48) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .booking.paid {
  color: #18c37e !important;
  background: #06140f !important;
  border-color: rgba(24, 195, 126, .46) !important;
}

body.staff-mode:not(.staff-light):not(.admin-mode) .booking.arr,
body.staff-mode:not(.staff-light):not(.admin-mode) .booking.is-formula {
  color: #e88917 !important;
  background: #160f05 !important;
  border-color: rgba(232, 137, 23, .48) !important;
}

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

body.admin-mode .ops-sim-profile-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 12px;
}

body.admin-mode .ops-sim-profile {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .26);
  color: rgba(226, 232, 240, .78);
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

body.admin-mode .ops-sim-profile strong {
  color: rgba(248, 250, 252, .96);
  font-size: 13px;
  line-height: 1.2;
}

body.admin-mode .ops-sim-profile span {
  color: rgba(148, 163, 184, .88);
  font-size: 12px;
  line-height: 1.35;
}

body.admin-mode .ops-sim-profile:hover,
body.admin-mode .ops-sim-profile.active {
  border-color: rgba(148, 163, 184, .42);
  background: rgba(30, 41, 59, .5);
  transform: translateY(-1px);
}

body.admin-mode .ops-sim-review-board {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr);
  gap: 14px;
  margin: 14px 0;
}

body.admin-mode .ops-review-head,
body.admin-mode .ops-review-item,
body.admin-mode .ops-review-actions,
body.admin-mode .ops-review-alt-list {
  display: flex;
}

body.admin-mode .ops-review-head {
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

body.admin-mode .ops-review-head > strong {
  color: rgba(248, 250, 252, .94);
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 12px;
  white-space: nowrap;
}

body.admin-mode .ops-review-list {
  display: grid;
  gap: 10px;
}

body.admin-mode .ops-review-item {
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 14px;
  padding: 14px;
  background: rgba(2, 6, 23, .22);
}

body.admin-mode .ops-review-item.high,
body.admin-mode .ops-review-item.critical {
  border-color: rgba(248, 113, 113, .32);
  background: rgba(127, 29, 29, .1);
}

body.admin-mode .ops-review-main {
  min-width: 0;
}

body.admin-mode .ops-review-main strong {
  display: block;
  margin-top: 8px;
  color: rgba(248, 250, 252, .96);
  font-size: 14px;
}

body.admin-mode .ops-review-main p {
  margin: 5px 0 0;
  color: rgba(203, 213, 225, .74);
  font-size: 12px;
  line-height: 1.45;
}

body.admin-mode .ops-review-actions {
  flex: 0 0 180px;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

body.admin-mode .ops-review-alt-list {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

body.admin-mode .ops-review-alt {
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .36);
  color: rgba(226, 232, 240, .88);
  border-radius: 12px;
  padding: 9px 11px;
  text-align: left;
  min-width: 180px;
  max-width: 260px;
}

body.admin-mode .ops-review-alt strong {
  margin: 0;
  font-size: 12px;
}

body.admin-mode .ops-review-alt span {
  display: block;
  margin-top: 3px;
  color: rgba(148, 163, 184, .86);
  font-size: 11px;
}

@media (max-width: 1180px) {
  body.admin-mode .ops-sim-profile-row,
  body.admin-mode .ops-sim-review-board {
    grid-template-columns: 1fr;
  }

  body.admin-mode .ops-review-item {
    flex-direction: column;
  }

  body.admin-mode .ops-review-actions {
    flex: none;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Simulation Ops cockpit, clearer control surface */
body.admin-mode .ops-sim-hero {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

body.admin-mode .ops-sim-card {
  border-radius: 14px !important;
  background: rgba(12, 17, 24, .98) !important;
  border: 1px solid rgba(126, 142, 164, .2) !important;
  box-shadow: 0 12px 32px rgba(2, 4, 8, .18) !important;
}

body.admin-mode .ops-sim-card h3,
body.admin-mode .ops-sim-comm-head h3 {
  text-wrap: balance !important;
}

body.admin-mode .ops-sim-overline {
  display: block;
  margin-bottom: 6px;
  color: rgba(157, 171, 190, .9);
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.admin-mode .ops-sim-command-map {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

body.admin-mode .ops-sim-command-link {
  min-height: 92px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(126, 142, 164, .18);
  border-radius: 12px;
  background: rgba(9, 13, 19, .86);
  color: inherit;
  text-decoration: none;
  transition-property: border-color, background-color, transform;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}

body.admin-mode .ops-sim-command-link:hover {
  border-color: rgba(184, 173, 155, .46);
  background: rgba(13, 18, 25, .94);
}

body.admin-mode .ops-sim-command-link:active {
  transform: translateY(1px);
}

body.admin-mode .ops-sim-command-link span {
  color: rgba(154, 167, 184, .92);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body.admin-mode .ops-sim-command-link strong {
  color: rgba(244, 247, 251, .97);
  font-size: 15px;
  line-height: 1.15;
}

body.admin-mode .ops-sim-command-link small {
  color: rgba(154, 167, 184, .88);
  font-size: 12px;
  line-height: 1.35;
}

body.admin-mode .ops-sim-control-panel {
  margin: 16px 0 14px;
  padding: 14px;
  border: 1px solid rgba(126, 142, 164, .2);
  border-radius: 14px;
  background: rgba(5, 9, 14, .72);
}

body.admin-mode #ops-sim-load-control,
body.admin-mode #ops-sim-run-stats,
body.admin-mode #ops-sim-staff-reviews,
body.admin-mode #ops-sim-mail-console,
body.admin-mode #ops-sim-training-lab,
body.admin-mode #ops-sim-agent-logs {
  scroll-margin-top: 18px;
}

body.admin-mode #ops-sim-load-control:target,
body.admin-mode #ops-sim-run-stats:target,
body.admin-mode #ops-sim-staff-reviews:target,
body.admin-mode #ops-sim-mail-console:target,
body.admin-mode #ops-sim-training-lab:target,
body.admin-mode #ops-sim-agent-logs:target {
  outline: 1px solid rgba(184, 173, 155, .62);
  outline-offset: 3px;
}

body.admin-mode .ops-sim-control-head,
body.admin-mode .ops-sim-control-foot,
body.admin-mode .ops-sim-comm-head,
body.admin-mode .ops-sim-comm-actions,
body.admin-mode .ops-sim-comm-summary {
  display: flex;
  align-items: center;
}

body.admin-mode .ops-sim-control-head,
body.admin-mode .ops-sim-comm-head {
  justify-content: space-between;
  gap: 16px;
}

body.admin-mode .ops-sim-control-head h4 {
  margin: 0;
  color: rgba(244, 247, 251, .96);
  font-size: 16px;
  font-weight: 780;
  line-height: 1.15;
}

body.admin-mode .ops-sim-control-head p,
body.admin-mode .ops-sim-control-foot,
body.admin-mode .ops-sim-comm-head p {
  margin: 4px 0 0;
  color: rgba(154, 167, 184, .94);
  font-size: 12px;
  line-height: 1.45;
  text-wrap: pretty;
}

body.admin-mode .ops-sim-profile-row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 14px 0 10px !important;
}

body.admin-mode .ops-sim-profile {
  min-height: 118px !important;
  padding: 12px !important;
  border-radius: 10px !important;
  background: rgba(9, 13, 19, .72) !important;
  border-color: rgba(126, 142, 164, .22) !important;
  box-shadow: inset 0 1px 0 rgba(244, 247, 251, .03) !important;
  transform: none !important;
  transition-property: border-color, background-color, box-shadow, color !important;
  transition-duration: 160ms !important;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1) !important;
}

body.admin-mode .ops-sim-profile:hover {
  background: rgba(14, 19, 27, .9) !important;
  border-color: rgba(184, 173, 155, .38) !important;
}

body.admin-mode .ops-sim-profile.active {
  background: rgba(184, 173, 155, .09) !important;
  border-color: rgba(184, 173, 155, .64) !important;
  box-shadow: 0 0 0 1px rgba(184, 173, 155, .1) inset !important;
}

body.admin-mode .ops-sim-profile-index {
  display: inline-flex;
  width: fit-content;
  min-height: 22px;
  align-items: center;
  padding: 0 7px;
  border-radius: 7px;
  background: rgba(244, 247, 251, .06);
  color: rgba(212, 221, 233, .9);
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace;
  font-size: 10px;
  font-weight: 760;
}

body.admin-mode .ops-sim-profile em {
  margin-top: auto;
  color: rgba(184, 173, 155, .95);
  font-style: normal;
  font-size: 11px;
  font-weight: 720;
}

body.admin-mode .ops-sim-control-foot {
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(126, 142, 164, .14);
}

body.admin-mode .ops-link-btn {
  min-height: 40px;
  border: 0;
  background: transparent;
  color: rgba(244, 247, 251, .95);
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(184, 173, 155, .45);
  text-underline-offset: 4px;
  transition-property: color, text-decoration-color;
  transition-duration: 160ms;
}

body.admin-mode .ops-link-btn:hover {
  color: rgba(184, 173, 155, 1);
  text-decoration-color: rgba(184, 173, 155, .9);
}

body.admin-mode .ops-sim-scoreboard {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px;
  margin: 14px 0;
}

body.admin-mode .ops-sim-score-main,
body.admin-mode .ops-sim-score,
body.admin-mode .ops-sim-comm-board {
  border: 1px solid rgba(126, 142, 164, .2);
  background: rgba(10, 14, 20, .92);
  border-radius: 14px;
}

body.admin-mode .ops-sim-score-main {
  padding: 16px;
}

body.admin-mode .ops-sim-score-main strong {
  display: block;
  color: rgba(244, 247, 251, .98);
  font-size: 42px;
  font-weight: 820;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

body.admin-mode .ops-sim-score-main > span:last-of-type,
body.admin-mode .ops-sim-score small {
  color: rgba(154, 167, 184, .9);
  font-size: 12px;
}

body.admin-mode .ops-sim-score-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.admin-mode .ops-sim-score {
  min-height: 92px;
  padding: 14px;
  display: grid;
  align-content: center;
  gap: 6px;
}

body.admin-mode .ops-sim-score span {
  color: rgba(154, 167, 184, .9);
  font-size: 11px;
  font-weight: 720;
  text-transform: uppercase;
  letter-spacing: .04em;
}

body.admin-mode .ops-sim-score strong {
  color: rgba(244, 247, 251, .98);
  font-size: 24px;
  line-height: 1;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}

body.admin-mode .ops-sim-score.attention {
  border-color: rgba(217, 154, 43, .38);
  background: rgba(217, 154, 43, .08);
}

body.admin-mode .ops-sim-score.danger {
  border-color: rgba(227, 109, 103, .38);
  background: rgba(227, 109, 103, .08);
}

body.admin-mode .ops-sim-review-board {
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr) !important;
  gap: 14px !important;
  margin: 14px 0 !important;
}

body.admin-mode .ops-review-item {
  border-radius: 12px !important;
  background: rgba(8, 12, 18, .78) !important;
  border-color: rgba(126, 142, 164, .2) !important;
}

body.admin-mode .ops-review-actions .ops-admin-btn {
  width: 100%;
  justify-content: center;
}

body.admin-mode .ops-review-alt {
  min-width: min(230px, 100%) !important;
  border-radius: 10px !important;
  background: rgba(13, 18, 25, .92) !important;
}

body.admin-mode .ops-sim-comm-board {
  margin: 14px 0;
  padding: 16px;
}

body.admin-mode .ops-sim-comm-actions {
  gap: 10px;
}

body.admin-mode .ops-sim-comm-actions span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(244, 247, 251, .06);
  color: rgba(214, 223, 235, .94);
  font-size: 12px;
  font-weight: 760;
}

body.admin-mode .ops-sim-comm-summary {
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
}

body.admin-mode .ops-sim-comm-summary span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(126, 142, 164, .16);
  border-radius: 8px;
  color: rgba(154, 167, 184, .95);
  font-size: 12px;
}

body.admin-mode .ops-sim-comm-summary strong {
  color: rgba(244, 247, 251, .96);
  font-variant-numeric: tabular-nums;
}

body.admin-mode .ops-sim-comm-list {
  display: grid;
  gap: 8px;
}

body.admin-mode .ops-sim-comm-row {
  appearance: none;
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 92px minmax(220px, 1.2fr) minmax(160px, .8fr) minmax(170px, .8fr);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(126, 142, 164, .14);
  border-radius: 10px;
  background: rgba(5, 8, 12, .62);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition-property: border-color, background-color;
  transition-duration: 160ms;
}

body.admin-mode .ops-sim-comm-row:hover {
  border-color: rgba(184, 173, 155, .36);
  background: rgba(13, 18, 25, .84);
}

body.admin-mode .ops-sim-comm-row strong {
  color: rgba(244, 247, 251, .96);
  font-size: 13px;
  font-weight: 740;
}

body.admin-mode .ops-sim-comm-row span:not(.ops-pill),
body.admin-mode .ops-sim-comm-row small {
  min-width: 0;
  overflow: hidden;
  color: rgba(154, 167, 184, .9);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-mode .ops-sim-empty {
  min-height: 88px;
  display: grid;
  place-content: center;
  gap: 6px;
  border: 1px dashed rgba(126, 142, 164, .22);
  border-radius: 12px;
  color: rgba(154, 167, 184, .9);
  text-align: center;
}

body.admin-mode .ops-training-board {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

body.admin-mode .ops-admin-btn:active,
body.admin-mode .ops-sim-profile:active,
body.admin-mode .ops-sim-comm-row:active,
body.admin-mode .ops-review-alt:active {
  transform: translateY(1px) !important;
}

@media (max-width: 1320px) {
  body.admin-mode .ops-sim-profile-row,
  body.admin-mode .ops-sim-score-grid,
  body.admin-mode .ops-sim-command-map {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.admin-mode .ops-sim-scoreboard,
  body.admin-mode .ops-sim-hero,
  body.admin-mode .ops-sim-review-board {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 860px) {
  body.admin-mode .ops-sim-control-head,
  body.admin-mode .ops-sim-control-foot,
  body.admin-mode .ops-sim-comm-head {
    align-items: flex-start;
    flex-direction: column;
  }

  body.admin-mode .ops-sim-profile-row,
  body.admin-mode .ops-sim-score-grid,
  body.admin-mode .ops-sim-command-map {
    grid-template-columns: 1fr !important;
  }

  body.admin-mode .ops-sim-comm-row {
    grid-template-columns: 1fr;
  }
}