/*
 * Central Control UI v3
 * ---------------------
 * A complete, isolated product shell for Central. Every rule is scoped to
 * body[data-interface-mode="central"] so Restaurant and kiosk camera flows
 * keep their own rendering and performance characteristics.
 *
 * This stylesheet is intentionally component-driven. It replaces the visual
 * responsibilities of the legacy global rules while retaining existing DOM
 * ids and class names as JavaScript hooks.
 */

body[data-interface-mode="central"] {
  color-scheme: light;

  --central-canvas: #f3f6f4;
  --central-canvas-deep: #edf2ef;
  --central-surface: #ffffff;
  --central-surface-soft: #f8faf9;
  --central-surface-raised: #fcfdfc;
  --central-surface-selected: #e9f4ef;
  --central-surface-info: #edf4fa;
  --central-surface-success: #e8f5ef;
  --central-surface-warning: #fff4e3;
  --central-surface-danger: #fcecef;

  --central-text: #18211d;
  --central-text-soft: #34423c;
  --central-muted: #63716b;
  --central-faint: #87928d;
  --central-inverse: #f9fcfa;

  --central-border: #dde5e1;
  --central-border-strong: #c8d4ce;
  --central-border-dark: #aebdb6;

  --central-brand: #19765f;
  --central-brand-hover: #125f4d;
  --central-brand-active: #0d503f;
  --central-brand-soft: #dff0e9;
  --central-success: #19765f;
  --central-warning: #aa6916;
  --central-danger: #bc4252;
  --central-danger-hover: #a73545;
  --central-info: #416b9c;

  --central-focus: 0 0 0 3px rgba(25, 118, 95, .22);
  --central-shadow-xs: 0 1px 2px rgba(24, 33, 29, .045);
  --central-shadow-sm: 0 1px 2px rgba(24, 33, 29, .04), 0 8px 22px rgba(24, 33, 29, .055);
  --central-shadow-md: 0 2px 6px rgba(24, 33, 29, .055), 0 18px 46px rgba(24, 33, 29, .09);
  --central-shadow-lg: 0 22px 70px rgba(18, 31, 25, .18);

  --central-radius-control: 10px;
  --central-radius-card: 14px;
  --central-radius-section: 18px;
  --central-radius-shell: 22px;

  --central-sidebar-width: 240px;
  --central-content-max: 1640px;
  --central-gutter: clamp(18px, 2.2vw, 36px);
  --central-section-gap: clamp(18px, 1.6vw, 26px);

  --central-ease-out: cubic-bezier(.2, .72, .24, 1);
  --central-ease-standard: cubic-bezier(.4, 0, .2, 1);

  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--central-text);
  background: var(--central-canvas);
  font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body[data-interface-mode="central"] *,
body[data-interface-mode="central"] *::before,
body[data-interface-mode="central"] *::after {
  box-sizing: border-box;
}

body[data-interface-mode="central"] ::selection {
  color: var(--central-text);
  background: #cfe8de;
}

body[data-interface-mode="central"] :where(button, input, select, textarea, a) {
  font: inherit;
}

body[data-interface-mode="central"] :where(h1, h2, h3, h4, p) {
  margin-block-start: 0;
}

body[data-interface-mode="central"] :where(button, a, input, select, textarea, summary):focus-visible {
  outline: none;
  box-shadow: var(--central-focus);
}

body[data-interface-mode="central"] .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Authentication                                                             */
/* -------------------------------------------------------------------------- */

body[data-interface-mode="central"] .auth-screen {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  padding: clamp(24px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  align-items: center;
  gap: clamp(48px, 8vw, 128px);
  overflow: hidden;
  color: var(--central-text);
  background:
    radial-gradient(circle at 10% 4%, rgba(25, 118, 95, .09), transparent 34%),
    linear-gradient(150deg, #f7faf8 0%, var(--central-canvas) 60%, #eaf1ed 100%);
}

body[data-interface-mode="central"] .auth-screen > .geometric-scene {
  display: none;
}

body[data-interface-mode="central"] .auth-intro {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  display: grid;
  align-content: center;
  gap: clamp(32px, 5vw, 64px);
}

body[data-interface-mode="central"] .product-mark,
body[data-interface-mode="central"] .brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

body[data-interface-mode="central"] .product-symbol {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(25, 118, 95, .22);
  border-radius: 13px;
  color: var(--central-brand);
  background: var(--central-surface);
  box-shadow: var(--central-shadow-xs);
}

body[data-interface-mode="central"] .product-symbol svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

body[data-interface-mode="central"] .product-name,
body[data-interface-mode="central"] .brand-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

body[data-interface-mode="central"] .product-name strong,
body[data-interface-mode="central"] .brand-copy strong {
  overflow: hidden;
  color: var(--central-text);
  font-size: 15px;
  font-weight: 740;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-interface-mode="central"] .product-name span,
body[data-interface-mode="central"] .brand-copy span {
  overflow: hidden;
  color: var(--central-muted);
  font-size: 11px;
  font-weight: 560;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-interface-mode="central"] .auth-copy {
  display: grid;
  gap: 18px;
}

body[data-interface-mode="central"] .eyebrow,
body[data-interface-mode="central"] .auth-card-kicker {
  color: var(--central-brand);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .11em;
  line-height: 1.2;
  text-transform: uppercase;
}

body[data-interface-mode="central"] .auth-copy h1 {
  max-width: 700px;
  margin: 0;
  color: var(--central-text);
  font-size: clamp(42px, 5.3vw, 76px);
  font-weight: 720;
  letter-spacing: -.055em;
  line-height: 1.01;
}

body[data-interface-mode="central"] .auth-copy p {
  max-width: 590px;
  margin: 0;
  color: var(--central-muted);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.65;
}

body[data-interface-mode="central"] .auth-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-interface-mode="central"] .auth-feature {
  min-height: 32px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--central-border);
  border-radius: 999px;
  color: var(--central-text-soft);
  background: rgba(255, 255, 255, .68);
  font-size: 12px;
  font-weight: 620;
}

body[data-interface-mode="central"] .auth-feature::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--central-success);
  box-shadow: 0 0 0 4px rgba(25, 118, 95, .10);
}

body[data-interface-mode="central"] .auth-card {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(26px, 4vw, 42px);
  display: grid;
  gap: 24px;
  border: 1px solid var(--central-border);
  border-radius: 24px;
  color: var(--central-text);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--central-shadow-md);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

body[data-interface-mode="central"] .auth-card > div:first-child {
  display: grid;
  gap: 10px;
}

body[data-interface-mode="central"] .auth-card h1 {
  margin: 0;
  color: var(--central-text);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 720;
  letter-spacing: -.035em;
  line-height: 1.15;
}

body[data-interface-mode="central"] .auth-card p {
  margin: 0;
  color: var(--central-muted);
}

body[data-interface-mode="central"] .auth-card form {
  display: grid;
  gap: 16px;
}

body[data-interface-mode="central"] .auth-card form > button {
  width: 100%;
  min-height: 48px;
  margin-top: 2px;
}

body[data-interface-mode="central"] .auth-security {
  padding-top: 18px;
  border-top: 1px solid var(--central-border);
  color: var(--central-faint);
  font-size: 11px;
  text-align: center;
}

/* -------------------------------------------------------------------------- */
/* Controls                                                                   */
/* -------------------------------------------------------------------------- */

body[data-interface-mode="central"] :where(button, .button-link) {
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--central-brand);
  border-radius: var(--central-radius-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--central-inverse);
  background: var(--central-brand);
  box-shadow: var(--central-shadow-xs);
  cursor: pointer;
  font-size: 13px;
  font-weight: 690;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 150ms var(--central-ease-standard),
    background 150ms var(--central-ease-standard),
    border-color 150ms var(--central-ease-standard),
    box-shadow 150ms var(--central-ease-standard),
    transform 150ms var(--central-ease-standard);
}

body[data-interface-mode="central"] :where(button, .button-link):not(:disabled):hover {
  border-color: var(--central-brand-hover);
  background: var(--central-brand-hover);
  box-shadow: 0 6px 16px rgba(18, 95, 77, .16);
  transform: translateY(-1px);
}

body[data-interface-mode="central"] :where(button, .button-link):active {
  border-color: var(--central-brand-active);
  background: var(--central-brand-active);
  box-shadow: none;
  transform: translateY(0);
}

body[data-interface-mode="central"] :where(button, .button-link).secondary,
body[data-interface-mode="central"] button.ghost {
  color: var(--central-text-soft);
  border-color: var(--central-border-strong);
  background: var(--central-surface);
  box-shadow: var(--central-shadow-xs);
}

body[data-interface-mode="central"] :where(button, .button-link).secondary:not(:disabled):hover,
body[data-interface-mode="central"] button.ghost:not(:disabled):hover {
  color: var(--central-brand-hover);
  border-color: #a9c8bd;
  background: var(--central-surface-selected);
}

body[data-interface-mode="central"] button.danger {
  color: #fff;
  border-color: var(--central-danger);
  background: var(--central-danger);
}

body[data-interface-mode="central"] button.danger:not(:disabled):hover {
  border-color: var(--central-danger-hover);
  background: var(--central-danger-hover);
  box-shadow: 0 6px 16px rgba(188, 66, 82, .16);
}

body[data-interface-mode="central"] :where(button, .button-link).small {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 12px;
}

body[data-interface-mode="central"] :where(button, .button-link):disabled {
  opacity: .48;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

body[data-interface-mode="central"] :where(label) {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: var(--central-text-soft);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

body[data-interface-mode="central"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--central-border-strong);
  border-radius: var(--central-radius-control);
  color: var(--central-text);
  background: var(--central-surface);
  box-shadow: inset 0 1px 1px rgba(24, 33, 29, .025);
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

body[data-interface-mode="central"] :where(input, select, textarea)::placeholder {
  color: #9aa49f;
  opacity: 1;
}

body[data-interface-mode="central"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):hover {
  border-color: var(--central-border-dark);
}

body[data-interface-mode="central"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus {
  border-color: var(--central-brand);
  outline: none;
  box-shadow: var(--central-focus);
}

body[data-interface-mode="central"] :where(input, select, textarea):disabled {
  color: var(--central-faint);
  background: #f0f3f1;
  cursor: not-allowed;
}

body[data-interface-mode="central"] textarea {
  min-height: 96px;
  resize: vertical;
}

body[data-interface-mode="central"] :where(input[type="checkbox"], input[type="radio"]) {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--central-brand);
}

body[data-interface-mode="central"] .checkbox-label {
  min-height: 42px;
  padding: 9px 11px;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  border: 1px solid var(--central-border);
  border-radius: var(--central-radius-control);
  background: var(--central-surface-soft);
}

body[data-interface-mode="central"] .field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body[data-interface-mode="central"] .help-dot {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--central-border-strong);
  border-radius: 50%;
  color: var(--central-muted);
  background: var(--central-surface);
  font-size: 11px;
  cursor: help;
}

/* -------------------------------------------------------------------------- */
/* Application shell and navigation                                           */
/* -------------------------------------------------------------------------- */

body[data-interface-mode="central"] .app-shell {
  position: relative;
  min-height: 100dvh;
  grid-template-rows: 1fr;
  color: var(--central-text);
  background: var(--central-canvas);
}

body[data-interface-mode="central"] .app-shell::before,
body[data-interface-mode="central"] .app-ambient-scene,
body[data-interface-mode="central"] :where(.dashboard-hero, .section-hero) > .geometric-scene {
  display: none;
}

body[data-interface-mode="central"] .topbar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: var(--central-sidebar-width);
  min-height: 100dvh;
  padding: 0;
  color: var(--central-text);
  border: 0;
  border-right: 1px solid var(--central-border);
  background: rgba(249, 251, 250, .98);
  box-shadow: none;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

body[data-interface-mode="central"] .topbar::after {
  display: none;
}

body[data-interface-mode="central"] .topbar-inner {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding: 22px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
}

body[data-interface-mode="central"] .brand {
  min-width: 0;
  padding: 0 6px;
}

body[data-interface-mode="central"] .primary-nav {
  width: 100%;
  min-width: 0;
  padding: 0;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-interface-mode="central"] .primary-nav::before {
  content: "Навигация";
  padding: 0 10px 7px;
  color: var(--central-faint);
  font-size: 10px;
  font-weight: 740;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body[data-interface-mode="central"] .primary-nav .nav-button {
  position: relative;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  justify-content: flex-start;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--central-muted);
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
  text-align: left;
  text-overflow: ellipsis;
  text-transform: none;
  transform: none;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

body[data-interface-mode="central"] .primary-nav .nav-button::after {
  display: none;
}

body[data-interface-mode="central"] .primary-nav .nav-button:hover {
  color: var(--central-text);
  border-color: transparent;
  background: #eef2f0;
  box-shadow: none;
  transform: none;
}

body[data-interface-mode="central"] .primary-nav .nav-button.active {
  color: var(--central-brand-active);
  border-color: #c8ddd5;
  background: var(--central-brand-soft);
  box-shadow: none;
}

body[data-interface-mode="central"] .top-actions {
  width: 100%;
  margin-top: auto;
  padding-top: 14px;
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--central-border);
}

body[data-interface-mode="central"] .top-actions > :not(.logout-button) {
  display: none;
}

body[data-interface-mode="central"] :where(.hero-actions, .top-actions).central-actions-compact:empty,
body[data-interface-mode="central"] .hero-actions.central-actions-compact {
  display: none;
}

body[data-interface-mode="central"] .top-actions .logout-button {
  width: 100%;
  justify-content: flex-start;
  color: var(--central-muted);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body[data-interface-mode="central"] .top-actions .logout-button:hover {
  color: var(--central-danger);
  border-color: #f0c9cf;
  background: var(--central-surface-danger);
  transform: none;
}

/* Exact navigation hooks used by Central's progressive shell enhancer. */
body[data-interface-mode="central"] .central-nav-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-grid;
  place-items: center;
  color: currentColor;
}

body[data-interface-mode="central"] .central-nav-icon :where(svg, img) {
  width: 19px;
  height: 19px;
  display: block;
}

body[data-interface-mode="central"] .central-nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-interface-mode="central"] .central-nav-toggle-label {
  display: none;
}

body[data-interface-mode="central"] .central-nav-toggle {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  display: none;
  place-items: center;
  border-color: var(--central-border);
  color: var(--central-text-soft);
  background: var(--central-surface);
  box-shadow: var(--central-shadow-xs);
}

body[data-interface-mode="central"] .central-nav-toggle:hover {
  color: var(--central-brand-hover);
  border-color: #b9d2c9;
  background: var(--central-surface-selected);
  box-shadow: var(--central-shadow-xs);
  transform: none;
}

body[data-interface-mode="central"] .central-nav-toggle-icon {
  position: relative;
  width: 19px;
  height: 14px;
  display: block;
}

body[data-interface-mode="central"] .central-nav-toggle-icon::before,
body[data-interface-mode="central"] .central-nav-toggle-icon::after,
body[data-interface-mode="central"] .central-nav-toggle-icon > span {
  content: "";
  position: absolute;
  left: 0;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: top 180ms ease, transform 180ms ease, opacity 150ms ease;
}

body[data-interface-mode="central"] .central-nav-toggle-icon::before { top: 0; }
body[data-interface-mode="central"] .central-nav-toggle-icon > span { top: 6px; }
body[data-interface-mode="central"] .central-nav-toggle-icon::after { top: 12px; }

body[data-interface-mode="central"] .central-nav-toggle.is-open .central-nav-toggle-icon::before,
body[data-interface-mode="central"].central-nav-open .central-nav-toggle .central-nav-toggle-icon::before {
  top: 6px;
  transform: rotate(45deg);
}

body[data-interface-mode="central"] .central-nav-toggle.is-open .central-nav-toggle-icon > span,
body[data-interface-mode="central"].central-nav-open .central-nav-toggle .central-nav-toggle-icon > span {
  opacity: 0;
}

body[data-interface-mode="central"] .central-nav-toggle.is-open .central-nav-toggle-icon::after,
body[data-interface-mode="central"].central-nav-open .central-nav-toggle .central-nav-toggle-icon::after {
  top: 6px;
  transform: rotate(-45deg);
}

body[data-interface-mode="central"] .layout {
  width: auto;
  max-width: none;
  min-height: 100dvh;
  margin: 0 0 0 var(--central-sidebar-width);
  padding: var(--central-gutter);
  display: block;
}

body[data-interface-mode="central"] .content {
  width: min(var(--central-content-max), 100%);
  min-width: 0;
  margin: 0 auto;
  display: grid;
  gap: var(--central-section-gap);
}

body[data-interface-mode="central"] .tab-panel {
  min-width: 0;
  display: none;
  gap: var(--central-section-gap);
}

body[data-interface-mode="central"] .tab-panel.active {
  display: grid;
  animation: central-v3-page-enter 220ms var(--central-ease-out) both;
}

/* Central v3 owns the page heading. The legacy marketing heroes repeat the
   same title and expose local recognition state that does not belong in the
   network control plane. Keep them in the shared HTML for Restaurant, but
   remove them from the Central information hierarchy. */
body[data-interface-mode="central"] #dashboard > .dashboard-grid > .dashboard-hero,
body[data-interface-mode="central"] #dashboard > .dashboard-grid > .overview-grid,
body[data-interface-mode="central"] .tab-panel > .section-hero {
  display: none !important;
}

/* New compact page-heading hooks. These can coexist with the legacy hero
   classes while markup is migrated section-by-section. */
body[data-interface-mode="central"] .central-page-meta {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

body[data-interface-mode="central"] .central-page-copy,
body[data-interface-mode="central"] .central-page-meta-copy {
  min-width: 0;
  max-width: 880px;
  display: grid;
  gap: 6px;
}

body[data-interface-mode="central"] .central-page-eyebrow {
  color: var(--central-brand);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .1em;
  line-height: 1.25;
  text-transform: uppercase;
}

body[data-interface-mode="central"] .central-page-title {
  margin: 0;
  color: var(--central-text);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 720;
  letter-spacing: -.035em;
  line-height: 1.15;
}

body[data-interface-mode="central"] .central-page-description {
  max-width: 78ch;
  margin: 0;
  color: var(--central-muted);
  font-size: 13px;
  line-height: 1.55;
}

body[data-interface-mode="central"] [data-central-enter] {
  opacity: 1;
  transform: translateY(0);
}

body[data-interface-mode="central"] .central-page-entering,
body[data-interface-mode="central"] .central-page-entering [data-central-enter] {
  opacity: 0;
  transform: translateY(6px);
}

body[data-interface-mode="central"] .central-page-visible,
body[data-interface-mode="central"] .central-page-visible [data-central-enter] {
  animation: central-v3-page-enter 220ms var(--central-ease-out) both;
  animation-delay: calc(var(--central-enter-index, var(--central-enter-order, 0)) * 35ms);
}

body[data-interface-mode="central"] .app-notice {
  position: fixed;
  z-index: 90;
  top: 18px;
  right: 18px;
  width: min(430px, calc(100vw - 36px));
  min-height: 48px;
  padding: 13px 16px;
  border: 1px solid #bfd6cd;
  border-radius: 12px;
  color: var(--central-text-soft);
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--central-shadow-md);
  font-size: 13px;
  font-weight: 620;
  animation: central-v3-toast-enter 220ms var(--central-ease-out) both;
}

body[data-interface-mode="central"] .app-notice[hidden] {
  display: none;
}

/* -------------------------------------------------------------------------- */
/* Page headers                                                               */
/* -------------------------------------------------------------------------- */

body[data-interface-mode="central"] :where(.dashboard-hero, .section-hero) {
  position: relative;
  isolation: isolate;
  min-height: 0;
  padding: clamp(22px, 2.4vw, 32px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  border: 1px solid var(--central-border);
  border-radius: var(--central-radius-shell);
  color: var(--central-text);
  background: var(--central-surface);
  box-shadow: var(--central-shadow-sm);
}

body[data-interface-mode="central"] :where(.dashboard-hero, .section-hero)::before,
body[data-interface-mode="central"] :where(.dashboard-hero, .section-hero)::after {
  display: none;
}

body[data-interface-mode="central"] :where(.dashboard-hero-content, .section-hero-content) {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 850px;
  display: grid;
  gap: 8px;
}

body[data-interface-mode="central"] :where(.dashboard-hero, .section-hero) h1 {
  margin: 0;
  color: var(--central-text);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 720;
  letter-spacing: -.035em;
  line-height: 1.16;
  text-shadow: none;
}

body[data-interface-mode="central"] :where(.dashboard-hero, .section-hero) h1 br {
  display: none;
}

body[data-interface-mode="central"] :where(.dashboard-hero-copy, .section-hero p) {
  max-width: 78ch;
  margin: 0;
  color: var(--central-muted);
  font-size: 13px;
  line-height: 1.55;
}

body[data-interface-mode="central"] .dashboard-hero .hero-actions,
body[data-interface-mode="central"] .dashboard-hero-content > .hero-actions {
  display: none;
}

body[data-interface-mode="central"] .dashboard-hero .status-card {
  width: min(330px, 100%);
  min-width: 280px;
  margin: 0;
  padding: 15px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 12px;
  border: 1px solid var(--central-border);
  border-radius: var(--central-radius-card);
  color: var(--central-text-soft);
  background: var(--central-surface-soft);
  box-shadow: none;
}

body[data-interface-mode="central"] .dashboard-hero .status-caption {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  color: var(--central-faint);
  font-size: 10px;
  font-weight: 740;
  letter-spacing: .09em;
  text-transform: uppercase;
}

body[data-interface-mode="central"] .dashboard-hero .status-card > :not(.status-caption) {
  min-width: 0;
  padding: 5px 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--central-border);
  border-radius: 0;
  color: var(--central-muted);
  background: transparent;
  font-size: 11px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-interface-mode="central"] .dashboard-hero .status-card > :nth-last-child(-n + 2) {
  border-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/* Panels, cards and layout primitives                                        */
/* -------------------------------------------------------------------------- */

body[data-interface-mode="central"] :where(.dashboard-grid, .workflow-grid, .settings-grid) {
  min-width: 0;
  display: grid;
  gap: var(--central-section-gap);
}

body[data-interface-mode="central"] :where(.panel, .overview-card, .toolbar-card, .step-card, .settings-group, .stat-box) {
  min-width: 0;
  border: 1px solid var(--central-border);
  color: var(--central-text);
  background: var(--central-surface);
  box-shadow: var(--central-shadow-sm);
}

body[data-interface-mode="central"] .panel {
  overflow: hidden;
  border-radius: var(--central-radius-section);
}

body[data-interface-mode="central"] .panel:hover {
  box-shadow: var(--central-shadow-sm);
}

body[data-interface-mode="central"] .panel-header {
  min-height: 72px;
  padding: 18px clamp(18px, 2vw, 26px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--central-border);
  background: var(--central-surface);
}

body[data-interface-mode="central"] .panel-title {
  min-width: 0;
  display: grid;
  gap: 4px;
}

body[data-interface-mode="central"] .panel-title h2,
body[data-interface-mode="central"] .panel-title h3 {
  margin: 0;
  color: var(--central-text);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.3;
}

body[data-interface-mode="central"] .panel-title h3 {
  font-size: 16px;
}

body[data-interface-mode="central"] .panel-title span,
body[data-interface-mode="central"] .panel-title p {
  max-width: 78ch;
  margin: 0;
  color: var(--central-muted);
  font-size: 12px;
  line-height: 1.5;
}

body[data-interface-mode="central"] .panel-body {
  padding: clamp(18px, 2vw, 26px);
}

body[data-interface-mode="central"] .section-title {
  margin-top: 22px;
}

body[data-interface-mode="central"] .overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body[data-interface-mode="central"] .overview-card {
  position: relative;
  min-height: 110px;
  padding: 18px 20px;
  display: grid;
  align-content: space-between;
  gap: 12px;
  overflow: hidden;
  border-radius: var(--central-radius-card);
  box-shadow: var(--central-shadow-xs);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body[data-interface-mode="central"] .overview-card::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -28px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: rgba(25, 118, 95, .055);
  pointer-events: none;
}

body[data-interface-mode="central"] .overview-card span {
  position: relative;
  z-index: 1;
  color: var(--central-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body[data-interface-mode="central"] .overview-card strong {
  position: relative;
  z-index: 1;
  overflow-wrap: anywhere;
  color: var(--central-text);
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1.1;
}

body[data-interface-mode="central"] .hygiene-metric-grid {
  padding: 20px clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body[data-interface-mode="central"] .hygiene-metric {
  position: relative;
  min-height: 92px;
  padding: 15px 16px;
  display: grid;
  align-content: space-between;
  gap: 10px;
  border: 1px solid var(--central-border);
  border-radius: 13px;
  background: var(--central-surface-soft);
  box-shadow: none;
}

body[data-interface-mode="central"] .hygiene-metric::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--central-faint);
}

body[data-interface-mode="central"] .hygiene-metric.is-good::before {
  background: var(--central-success);
  box-shadow: 0 0 0 4px rgba(25, 118, 95, .10);
}

body[data-interface-mode="central"] .hygiene-metric.is-problem::before {
  background: var(--central-danger);
  box-shadow: 0 0 0 4px rgba(188, 66, 82, .10);
}

body[data-interface-mode="central"] .hygiene-metric.is-pending::before {
  background: var(--central-warning);
  box-shadow: 0 0 0 4px rgba(170, 105, 22, .10);
}

body[data-interface-mode="central"] .hygiene-metric span {
  padding-right: 20px;
  color: var(--central-muted);
  font-size: 12px;
  font-weight: 620;
  line-height: 1.35;
}

body[data-interface-mode="central"] .hygiene-metric strong {
  color: var(--central-text);
  font-size: 28px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1;
}

body[data-interface-mode="central"] .hygiene-readiness-people {
  padding: 0 clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body[data-interface-mode="central"] .hygiene-readiness-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--central-border);
  border-radius: 13px;
  background: var(--central-surface);
}

body[data-interface-mode="central"] .hygiene-readiness-group header {
  min-height: 46px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--central-border);
  color: var(--central-text);
  font-size: 12px;
  font-weight: 680;
}

body[data-interface-mode="central"] .hygiene-readiness-group header strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

body[data-interface-mode="central"] .hygiene-readiness-group.is-ready header strong {
  color: var(--central-success);
}

body[data-interface-mode="central"] .hygiene-readiness-group.is-attention header strong {
  color: var(--central-danger);
}

body[data-interface-mode="central"] .hygiene-readiness-group.is-pending header strong {
  color: var(--central-warning);
}

body[data-interface-mode="central"] .hygiene-readiness-group ul {
  max-height: 230px;
  margin: 0;
  padding: 5px 13px 9px;
  overflow: auto;
  list-style: none;
}

body[data-interface-mode="central"] .hygiene-readiness-group li {
  min-height: 34px;
  padding: 7px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--central-border);
  font-size: 12px;
}

body[data-interface-mode="central"] .hygiene-readiness-group li:last-child {
  border-bottom: 0;
}

body[data-interface-mode="central"] .hygiene-readiness-group li span,
body[data-interface-mode="central"] .hygiene-readiness-group li.is-empty,
body[data-interface-mode="central"] .hygiene-readiness-group li.is-more {
  color: var(--central-muted);
}

body[data-interface-mode="central"] .hygiene-readiness-group li span {
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-interface-mode="central"] .pill,
body[data-interface-mode="central"] .hygiene-status-chip,
body[data-interface-mode="central"] .hygiene-arrival-badge {
  width: fit-content;
  max-width: 100%;
  min-height: 28px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--central-border);
  border-radius: 999px;
  color: var(--central-muted);
  background: var(--central-surface-soft);
  font-size: 11px;
  font-weight: 690;
  line-height: 1.2;
  white-space: normal;
}

body[data-interface-mode="central"] :where(.pill, .hygiene-status-chip, .hygiene-arrival-badge).ok,
body[data-interface-mode="central"] :where(.hygiene-status-chip, .hygiene-arrival-badge).is-passed,
body[data-interface-mode="central"] :where(.hygiene-status-chip, .hygiene-arrival-badge).is-pass,
body[data-interface-mode="central"] :where(.hygiene-status-chip, .hygiene-arrival-badge).is-ready {
  color: #12644f;
  border-color: #b9d9cd;
  background: var(--central-surface-success);
}

body[data-interface-mode="central"] :where(.pill, .hygiene-status-chip, .hygiene-arrival-badge).stop,
body[data-interface-mode="central"] :where(.hygiene-status-chip, .hygiene-arrival-badge).is-problem,
body[data-interface-mode="central"] :where(.hygiene-status-chip, .hygiene-arrival-badge).is-error {
  color: #973747;
  border-color: #efc4cb;
  background: var(--central-surface-danger);
}

body[data-interface-mode="central"] :where(.hygiene-status-chip, .hygiene-arrival-badge).is-pending,
body[data-interface-mode="central"] :where(.hygiene-status-chip, .hygiene-arrival-badge).is-review,
body[data-interface-mode="central"] :where(.hygiene-status-chip, .hygiene-arrival-badge).is-retake,
body[data-interface-mode="central"] :where(.hygiene-status-chip, .hygiene-arrival-badge).is-capturing {
  color: #8c5712;
  border-color: #ead09d;
  background: var(--central-surface-warning);
}

body[data-interface-mode="central"] .hint-strip {
  padding: 11px 13px;
  border: 1px solid #cfddd7;
  border-radius: 11px;
  color: var(--central-text-soft);
  background: var(--central-surface-soft);
  font-size: 12px;
  line-height: 1.5;
}

body[data-interface-mode="central"] .message {
  min-height: 0;
  margin: 12px 0 0;
  color: var(--central-muted);
  font-size: 12px;
  line-height: 1.45;
}

body[data-interface-mode="central"] .message:empty {
  display: none;
}

body[data-interface-mode="central"] .message.error,
body[data-interface-mode="central"] .error-text {
  color: var(--central-danger);
}

/* -------------------------------------------------------------------------- */
/* Forms and workflows                                                        */
/* -------------------------------------------------------------------------- */

body[data-interface-mode="central"] .form-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}

body[data-interface-mode="central"] .actions {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-interface-mode="central"] .row-actions {
  justify-content: flex-start;
}

body[data-interface-mode="central"] .actions-compact,
body[data-interface-mode="central"] .actions.actions-compact {
  gap: 6px;
}

body[data-interface-mode="central"] .actions-compact :where(button, .button-link),
body[data-interface-mode="central"] .actions.actions-compact :where(button, .button-link) {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 12px;
}

body[data-interface-mode="central"] .button-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-interface-mode="central"] .button-stack > * {
  flex: 1 1 150px;
}

body[data-interface-mode="central"] .step-card {
  padding: clamp(18px, 2vw, 26px);
  display: grid;
  gap: 20px;
  border-radius: var(--central-radius-section);
  box-shadow: var(--central-shadow-xs);
}

body[data-interface-mode="central"] .step-heading {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

body[data-interface-mode="central"] .step-number {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #bcd8ce;
  border-radius: 12px;
  color: var(--central-brand-hover);
  background: var(--central-brand-soft);
  box-shadow: none;
  font-size: 14px;
  font-weight: 760;
}

body[data-interface-mode="central"] .step-heading > div:last-child {
  display: grid;
  gap: 4px;
}

body[data-interface-mode="central"] .step-heading strong {
  color: var(--central-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

body[data-interface-mode="central"] .step-heading span {
  max-width: 82ch;
  color: var(--central-muted);
  font-size: 12px;
  line-height: 1.5;
}

body[data-interface-mode="central"] .browser-capture-box {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid #29352f;
  border-radius: var(--central-radius-card);
  background: #0d1512;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
}

body[data-interface-mode="central"] .browser-capture-box :where(video, canvas) {
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: block;
  object-fit: contain;
}

body[data-interface-mode="central"] .browser-capture-box canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body[data-interface-mode="central"] .capture-progress {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  min-height: 40px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 10px;
  color: rgba(249, 252, 250, .92);
  background: rgba(5, 14, 10, .76);
  font-size: 12px;
  font-weight: 620;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* -------------------------------------------------------------------------- */
/* Tables and toolbars                                                        */
/* -------------------------------------------------------------------------- */

body[data-interface-mode="central"] .table-wrap {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--central-border);
  border-radius: 13px;
  background: var(--central-surface);
  scrollbar-gutter: stable;
  box-shadow: none;
}

body[data-interface-mode="central"] .central-table-swipe-hint {
  display: none;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--central-faint);
  font-size: 11px;
  line-height: 1.4;
}

body[data-interface-mode="central"] .central-table-swipe-hint::before {
  content: "↔";
  color: var(--central-brand);
  font-size: 15px;
  font-weight: 700;
}

body[data-interface-mode="central"] .panel > .table-wrap,
body[data-interface-mode="central"] .arrivals-panel > .table-wrap {
  margin: 0 clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px);
}

body[data-interface-mode="central"] :where(table, .employees-table, .arrivals-table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--central-text-soft);
  background: var(--central-surface);
  font-size: 13px;
}

body[data-interface-mode="central"] :where(table, .employees-table, .arrivals-table) thead {
  position: sticky;
  top: 0;
  z-index: 4;
}

body[data-interface-mode="central"] :where(table, .employees-table, .arrivals-table) th {
  height: 42px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--central-border);
  color: var(--central-muted);
  background: rgba(247, 250, 248, .98);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .055em;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-interface-mode="central"] :where(table, .employees-table, .arrivals-table) td {
  padding: 11px 12px;
  border: 0;
  border-bottom: 1px solid #e9eeeb;
  color: var(--central-text-soft);
  line-height: 1.4;
  text-align: left;
  vertical-align: middle;
}

body[data-interface-mode="central"] :where(table, .employees-table, .arrivals-table) tbody tr {
  background: var(--central-surface);
  transition: background 140ms ease, box-shadow 140ms ease;
}

body[data-interface-mode="central"] :where(table, .employees-table, .arrivals-table) tbody tr:nth-child(even) {
  background: #fbfcfb;
}

body[data-interface-mode="central"] :where(table, .employees-table, .arrivals-table) tbody tr:hover {
  background: #eef5f2;
}

body[data-interface-mode="central"] :where(table, .employees-table, .arrivals-table) tbody tr:last-child td {
  border-bottom: 0;
}

body[data-interface-mode="central"] :where(table, .employees-table, .arrivals-table) tbody tr.clickable {
  cursor: pointer;
}

body[data-interface-mode="central"] :where(table, .employees-table, .arrivals-table) tbody tr.selected {
  background: var(--central-surface-selected);
  box-shadow: inset 3px 0 0 var(--central-brand);
}

body[data-interface-mode="central"] .empty-cell {
  padding: 42px 24px !important;
  color: var(--central-muted) !important;
  background: var(--central-surface) !important;
  text-align: center !important;
}

body[data-interface-mode="central"] .photo-thumb {
  width: 46px;
  height: 46px;
  display: block;
  object-fit: cover;
  overflow: hidden;
  border: 1px solid var(--central-border);
  border-radius: 10px;
  background: var(--central-surface-soft);
}

body[data-interface-mode="central"] .photo-actions,
body[data-interface-mode="central"] .arrival-row-actions,
body[data-interface-mode="central"] .training-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-interface-mode="central"] .arrivals-panel .panel-header {
  display: grid;
  align-items: start;
}

body[data-interface-mode="central"] .arrivals-filters {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) minmax(180px, .9fr) repeat(2, minmax(135px, .62fr)) auto auto;
  gap: 10px;
  align-items: end;
}

body[data-interface-mode="central"] .arrivals-search-status,
body[data-interface-mode="central"] .quick-search-status {
  min-height: 18px;
  margin: 0;
  color: var(--central-faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

body[data-interface-mode="central"] .arrivals-panel > .arrivals-search-status {
  padding: 0 clamp(18px, 2vw, 26px) 10px;
}

body[data-interface-mode="central"] .arrivals-table {
  min-width: 1080px;
}

body[data-interface-mode="central"] .arrival-employee {
  min-width: 150px;
  display: grid;
  gap: 2px;
}

body[data-interface-mode="central"] .arrival-employee strong {
  color: var(--central-text);
  font-size: 13px;
  font-weight: 700;
}

body[data-interface-mode="central"] .arrival-employee small {
  color: var(--central-muted);
  font-size: 11px;
}

body[data-interface-mode="central"] .hygiene-status-stack {
  min-width: 220px;
  display: grid;
  gap: 7px;
}

body[data-interface-mode="central"] .hygiene-dimension-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

body[data-interface-mode="central"] .hygiene-dimension-label {
  color: var(--central-muted);
  font-size: 11px;
}

body[data-interface-mode="central"] .hygiene-arrival-no-data,
body[data-interface-mode="central"] .empty-personnel-value {
  color: var(--central-faint);
  font-size: 12px;
}

/* -------------------------------------------------------------------------- */
/* Employees                                                                  */
/* -------------------------------------------------------------------------- */

body[data-interface-mode="central"] #employeesTab .employee-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(340px, .58fr);
  gap: var(--central-section-gap);
  align-items: start;
}

body[data-interface-mode="central"] #employeesTab .employee-profile-panel {
  position: sticky;
  top: var(--central-gutter);
  max-height: calc(100dvh - (2 * var(--central-gutter)));
  overflow: auto;
}

body[data-interface-mode="central"] .employee-list-tools {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 12px;
}

body[data-interface-mode="central"] .employee-table-wrap {
  max-height: min(52vh, 600px);
}

body[data-interface-mode="central"] .employees-table {
  min-width: 680px;
}

body[data-interface-mode="central"] #employeesTab .employee-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

body[data-interface-mode="central"] .toolbar-card {
  min-height: 220px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: var(--central-radius-card);
  box-shadow: var(--central-shadow-xs);
}

body[data-interface-mode="central"] .toolbar-card h3 {
  margin: 0;
  color: var(--central-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

body[data-interface-mode="central"] .toolbar-card > span,
body[data-interface-mode="central"] .toolbar-card > p {
  margin: 0;
  color: var(--central-muted);
  font-size: 12px;
  line-height: 1.5;
}

body[data-interface-mode="central"] .toolbar-card > .button-stack:last-child,
body[data-interface-mode="central"] .toolbar-card > button:last-child {
  margin-top: auto;
}

body[data-interface-mode="central"] .voice-workflow,
body[data-interface-mode="central"] .voice-action-group {
  min-width: 0;
  display: grid;
  gap: 10px;
}

body[data-interface-mode="central"] .voice-workflow {
  grid-template-columns: 1fr;
}

body[data-interface-mode="central"] .voice-action-group {
  padding: 12px;
  border: 1px solid var(--central-border);
  border-radius: 11px;
  background: var(--central-surface-soft);
}

body[data-interface-mode="central"] .voice-upload-label {
  color: var(--central-text-soft) !important;
  font-size: 11px !important;
  font-weight: 700;
}

body[data-interface-mode="central"] .localized-file-picker {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

body[data-interface-mode="central"] .localized-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

body[data-interface-mode="central"] .localized-file-trigger {
  min-height: 38px;
  padding: 8px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--central-border-strong);
  border-radius: 9px;
  color: var(--central-text-soft);
  background: var(--central-surface);
  cursor: pointer;
  font-size: 12px;
  font-weight: 680;
}

body[data-interface-mode="central"] .localized-file-name {
  overflow: hidden;
  color: var(--central-muted) !important;
  font-size: 11px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-interface-mode="central"] .training-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body[data-interface-mode="central"] .training-sample {
  min-width: 0;
  padding: 10px;
  display: grid;
  gap: 9px;
  border: 1px solid var(--central-border);
  border-radius: 12px;
  background: var(--central-surface-soft);
}

body[data-interface-mode="central"] .training-sample img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 9px;
  background: #e8ecea;
}

/* -------------------------------------------------------------------------- */
/* Settings                                                                   */
/* -------------------------------------------------------------------------- */

body[data-interface-mode="central"] .settings-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

body[data-interface-mode="central"] .stat-box {
  min-height: 94px;
  padding: 15px 16px;
  display: grid;
  align-content: space-between;
  gap: 9px;
  border-radius: 13px;
  box-shadow: var(--central-shadow-xs);
  text-align: left;
}

body[data-interface-mode="central"] .stat-box strong {
  color: var(--central-text);
  font-size: 18px;
  font-weight: 710;
  font-variant-numeric: tabular-nums;
}

body[data-interface-mode="central"] .stat-box span {
  color: var(--central-muted);
  font-size: 11px;
  line-height: 1.4;
}

body[data-interface-mode="central"] .settings-tabs {
  position: sticky;
  top: 0;
  z-index: 8;
  margin: -1px 0 20px;
  padding: 10px 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  border-bottom: 1px solid var(--central-border);
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

body[data-interface-mode="central"] .settings-tab-button {
  min-height: 38px;
  padding: 8px 12px;
  color: var(--central-muted);
  border-color: transparent;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
}

body[data-interface-mode="central"] .settings-tab-button:hover {
  color: var(--central-text);
  border-color: var(--central-border);
  background: var(--central-surface-soft);
  box-shadow: none;
  transform: none;
}

body[data-interface-mode="central"] .settings-tab-button.active {
  color: var(--central-brand-active);
  border-color: #c5dcd3;
  background: var(--central-brand-soft);
}

body[data-interface-mode="central"] .settings-section {
  display: none;
}

body[data-interface-mode="central"] .settings-section.active {
  display: grid;
  gap: 16px;
  animation: central-v3-section-enter 200ms var(--central-ease-out) both;
}

body[data-interface-mode="central"] .actions.settings-section.active {
  display: flex;
}

body[data-interface-mode="central"] .settings-group {
  padding: clamp(18px, 2vw, 24px);
  display: grid;
  gap: 16px;
  border-radius: var(--central-radius-card);
  box-shadow: var(--central-shadow-xs);
}

body[data-interface-mode="central"] .settings-group h3 {
  margin: 0;
  color: var(--central-text);
  font-size: 16px;
  font-weight: 700;
}

body[data-interface-mode="central"] .settings-note {
  max-width: 86ch;
  margin: 0;
  color: var(--central-muted);
  font-size: 12px;
  line-height: 1.55;
}

body[data-interface-mode="central"] .settings-actions {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--central-border);
}

/* -------------------------------------------------------------------------- */
/* AI readiness detail                                                       */
/* -------------------------------------------------------------------------- */

body[data-interface-mode="central"] .hygiene-ai-detail-row > td {
  padding: 0 !important;
  border: 0 !important;
  background: var(--central-canvas) !important;
}

body[data-interface-mode="central"] .hygiene-ai-detail-row[hidden] {
  display: none !important;
}

body[data-interface-mode="central"] .hygiene-ai-panel {
  width: calc(100% - 20px);
  max-width: none;
  margin: 10px;
  padding: clamp(16px, 2vw, 24px);
  display: grid;
  gap: 18px;
  overflow: hidden;
  border: 1px solid var(--central-border);
  border-radius: var(--central-radius-section);
  background: var(--central-surface-soft);
  box-shadow: var(--central-shadow-sm);
  animation: central-v3-detail-enter 240ms var(--central-ease-out) both;
}

body[data-interface-mode="central"] .hygiene-ai-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body[data-interface-mode="central"] .hygiene-ai-panel-heading h3 {
  margin: 0 0 4px;
  color: var(--central-text);
  font-size: 19px;
  font-weight: 720;
  letter-spacing: -.02em;
}

body[data-interface-mode="central"] .hygiene-ai-panel-heading p,
body[data-interface-mode="central"] .hygiene-ai-updated {
  margin: 0;
  color: var(--central-muted);
  font-size: 11px;
}

body[data-interface-mode="central"] .hygiene-ai-updated {
  white-space: nowrap;
}

body[data-interface-mode="central"] .hygiene-ai-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

body[data-interface-mode="central"] .hygiene-ai-card {
  min-width: 0;
  padding: 17px;
  display: grid;
  align-content: start;
  gap: 13px;
  border: 1px solid var(--central-border);
  border-radius: var(--central-radius-card);
  background: var(--central-surface);
  box-shadow: var(--central-shadow-xs);
}

body[data-interface-mode="central"] .hygiene-ai-card-header {
  min-height: 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--central-border);
}

body[data-interface-mode="central"] .hygiene-ai-card-header h4 {
  margin: 0;
  color: var(--central-text);
  font-size: 15px;
  font-weight: 710;
}

body[data-interface-mode="central"] .hygiene-ai-dimension {
  min-width: 0;
  display: grid;
  gap: 11px;
}

body[data-interface-mode="central"] .hygiene-ai-dimension + .hygiene-ai-dimension {
  margin-top: 4px;
  padding-top: 15px;
  border-top: 1px solid var(--central-border);
}

body[data-interface-mode="central"] .hygiene-ai-dimension-heading {
  display: grid;
  gap: 8px;
}

body[data-interface-mode="central"] .hygiene-ai-dimension-heading > strong {
  color: var(--central-text-soft);
  font-size: 12px;
  font-weight: 700;
}

body[data-interface-mode="central"] .hygiene-ai-decision-line,
body[data-interface-mode="central"] .hygiene-override-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-interface-mode="central"] .hygiene-ai-facts {
  margin: 0;
  display: grid;
  gap: 0;
}

body[data-interface-mode="central"] .hygiene-ai-fact {
  min-width: 0;
  min-height: 35px;
  padding: 8px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border-bottom: 1px solid #ebefed;
}

body[data-interface-mode="central"] .hygiene-ai-fact:last-child {
  border-bottom: 0;
}

body[data-interface-mode="central"] .hygiene-ai-fact dt,
body[data-interface-mode="central"] .hygiene-ai-fact dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

body[data-interface-mode="central"] .hygiene-ai-fact dt {
  color: var(--central-muted);
}

body[data-interface-mode="central"] .hygiene-ai-fact dd {
  max-width: 220px;
  color: var(--central-text-soft);
  font-weight: 680;
  text-align: right;
}

body[data-interface-mode="central"] .hygiene-ai-reasons {
  margin: 0;
  padding: 11px 12px 11px 30px;
  border: 1px solid #ecd5ad;
  border-radius: 10px;
  color: #845111;
  background: var(--central-surface-warning);
  font-size: 12px;
  line-height: 1.5;
}

body[data-interface-mode="central"] .hygiene-ai-audit {
  padding: 10px 12px;
  border: 1px solid var(--central-border);
  border-radius: 10px;
  color: var(--central-muted);
  background: var(--central-surface-soft);
  font-size: 11px;
}

body[data-interface-mode="central"] .hygiene-ai-audit summary {
  color: var(--central-text-soft);
  cursor: pointer;
  font-weight: 680;
}

body[data-interface-mode="central"] .hygiene-ai-audit ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

body[data-interface-mode="central"] .hygiene-ai-conclusion {
  grid-column: 1 / -1;
  grid-row: 1;
  border-color: #bcd9cf;
  background: linear-gradient(135deg, #edf8f3, #f8fbfa);
}

body[data-interface-mode="central"] .hygiene-ai-conclusion.is-problem {
  border-color: #edc6cc;
  background: linear-gradient(135deg, #fff3f4, #fdf9f9);
}

body[data-interface-mode="central"] .hygiene-ai-conclusion.is-pending {
  border-color: #ead3a8;
  background: linear-gradient(135deg, #fff7e9, #fdfbf7);
}

body[data-interface-mode="central"] .hygiene-ai-conclusion-verdict {
  min-height: 74px;
  padding: 16px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(25, 118, 95, .13);
  border-radius: 11px;
  background: rgba(255, 255, 255, .72);
}

body[data-interface-mode="central"] .hygiene-ai-conclusion-verdict strong {
  color: var(--central-text);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 720;
  letter-spacing: -.015em;
  line-height: 1.4;
}

body[data-interface-mode="central"] .hygiene-evidence-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

body[data-interface-mode="central"] .hygiene-evidence-card {
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 118px auto;
  border: 1px solid var(--central-border);
  border-radius: 11px;
  color: var(--central-text-soft);
  background: var(--central-surface-soft);
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

body[data-interface-mode="central"] .hygiene-evidence-card:hover {
  border-color: #abc9be;
  box-shadow: var(--central-shadow-sm);
  transform: translateY(-1px);
}

body[data-interface-mode="central"] .hygiene-evidence-card img {
  width: 100%;
  height: 118px;
  object-fit: contain;
  background: #121917;
}

body[data-interface-mode="central"] .hygiene-evidence-card > span {
  min-width: 0;
  padding: 9px 10px;
}

body[data-interface-mode="central"] .hygiene-evidence-card strong {
  display: block;
  overflow: hidden;
  font-size: 10px;
  font-weight: 680;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Optional production drawer hook. The current ids/classes remain valid; a
   wrapper may opt into this behavior with data-central-drawer="open". */
body[data-interface-mode="central"] .central-drawer-layer,
body[data-interface-mode="central"] [data-central-drawer="open"] {
  position: fixed;
  inset: 0;
  z-index: 110;
}

body[data-interface-mode="central"] .central-drawer-layer::before,
body[data-interface-mode="central"] [data-central-drawer="open"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 20, 16, .38);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: central-v3-fade-in 180ms ease both;
}

body[data-interface-mode="central"] .central-drawer {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(720px, 100vw);
  height: 100dvh;
  padding: clamp(18px, 2vw, 28px);
  overflow: auto;
  border-left: 1px solid var(--central-border);
  background: var(--central-surface);
  box-shadow: var(--central-shadow-lg);
  animation: central-v3-drawer-enter 280ms var(--central-ease-out) both;
}

/* Exact AI drawer contract emitted by the Central JavaScript. */
body[data-interface-mode="central"] .central-ai-drawer[hidden] {
  display: none !important;
}

body[data-interface-mode="central"] .central-ai-drawer {
  position: fixed;
  inset: 0;
  z-index: 115;
  visibility: hidden;
  pointer-events: none;
}

body[data-interface-mode="central"] .central-ai-drawer.is-open,
body[data-interface-mode="central"] .central-ai-drawer.is-visible {
  visibility: visible;
  pointer-events: auto;
}

body[data-interface-mode="central"] .central-ai-drawer.is-leaving {
  visibility: visible;
  pointer-events: none;
}

body[data-interface-mode="central"] .central-ai-drawer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
  opacity: 0;
  background: rgba(12, 20, 16, .40);
  box-shadow: none;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  cursor: default;
  transform: none;
  transition: opacity 180ms ease;
}

body[data-interface-mode="central"] .central-ai-drawer-backdrop:hover,
body[data-interface-mode="central"] .central-ai-drawer-backdrop:active {
  border: 0;
  border-radius: 0;
  background: rgba(12, 20, 16, .40);
  box-shadow: none;
  transform: none;
}

body[data-interface-mode="central"] .central-ai-drawer-surface {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(760px, calc(100vw - 48px));
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-left: 1px solid var(--central-border);
  color: var(--central-text);
  background: var(--central-surface);
  box-shadow: var(--central-shadow-lg);
  opacity: .7;
  transform: translateX(32px);
  transition: opacity 260ms var(--central-ease-out), transform 280ms var(--central-ease-out);
}

body[data-interface-mode="central"] .central-ai-drawer.is-open .central-ai-drawer-backdrop,
body[data-interface-mode="central"] .central-ai-drawer.is-visible .central-ai-drawer-backdrop {
  opacity: 1;
}

body[data-interface-mode="central"] .central-ai-drawer.is-open .central-ai-drawer-surface,
body[data-interface-mode="central"] .central-ai-drawer.is-visible .central-ai-drawer-surface {
  opacity: 1;
  transform: translateX(0);
}

body[data-interface-mode="central"] .central-ai-drawer.is-leaving .central-ai-drawer-backdrop {
  opacity: 0;
}

body[data-interface-mode="central"] .central-ai-drawer.is-leaving .central-ai-drawer-surface {
  opacity: .7;
  transform: translateX(32px);
}

body[data-interface-mode="central"] .central-ai-drawer-header {
  min-height: 74px;
  padding: 17px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--central-border);
  background: rgba(255, 255, 255, .97);
}

body[data-interface-mode="central"] .central-ai-drawer-header > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body[data-interface-mode="central"] .central-ai-drawer-eyebrow {
  color: var(--central-brand);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .1em;
  line-height: 1.25;
  text-transform: uppercase;
}

body[data-interface-mode="central"].central-ai-drawer-open {
  overflow: hidden;
}

body[data-interface-mode="central"] .central-ai-drawer-source-row {
  display: none !important;
}

body[data-interface-mode="central"] .central-ai-drawer-header h2,
body[data-interface-mode="central"] .central-ai-drawer-header h3 {
  margin: 0;
  color: var(--central-text);
  font-size: 20px;
  font-weight: 720;
  letter-spacing: -.02em;
  line-height: 1.3;
}

body[data-interface-mode="central"] .central-ai-drawer-header p {
  margin: 0;
  color: var(--central-muted);
  font-size: 11px;
}

body[data-interface-mode="central"] .central-ai-drawer-content {
  min-height: 0;
  padding: 20px;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--central-canvas);
}

body[data-interface-mode="central"] .central-ai-drawer-content > .hygiene-ai-panel {
  width: 100%;
  margin: 0;
  animation: none;
}

body[data-interface-mode="central"] .central-ai-drawer-close {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  flex: 0 0 40px;
  border-color: var(--central-border);
  border-radius: 10px;
  color: var(--central-muted);
  background: var(--central-surface);
  box-shadow: none;
  font-size: 20px;
  line-height: 1;
}

body[data-interface-mode="central"] .central-ai-drawer-close:hover {
  color: var(--central-text);
  border-color: var(--central-border-strong);
  background: var(--central-surface-soft);
  box-shadow: none;
  transform: none;
}

/* -------------------------------------------------------------------------- */
/* Modal, toast, loading, empty and error states                               */
/* -------------------------------------------------------------------------- */

body[data-interface-mode="central"] .central-modal-layer,
body[data-interface-mode="central"] .modal-layer {
  position: fixed;
  inset: 0;
  z-index: 120;
  padding: 20px;
  display: grid;
  place-items: center;
  background: rgba(12, 20, 16, .42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: central-v3-fade-in 180ms ease both;
}

body[data-interface-mode="central"] .central-modal,
body[data-interface-mode="central"] .modal-dialog {
  width: min(560px, 100%);
  max-height: calc(100dvh - 40px);
  padding: clamp(20px, 3vw, 30px);
  overflow: auto;
  display: grid;
  gap: 20px;
  border: 1px solid var(--central-border);
  border-radius: var(--central-radius-shell);
  background: var(--central-surface);
  box-shadow: var(--central-shadow-lg);
  animation: central-v3-modal-enter 220ms var(--central-ease-out) both;
}

/* Exact native <dialog> contract. */
body[data-interface-mode="central"] .central-dialog[hidden] {
  display: none !important;
}

body[data-interface-mode="central"] dialog.central-dialog {
  width: min(580px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: var(--central-radius-shell);
  color: var(--central-text);
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transform: translateY(8px) scale(.985);
  transition: opacity 180ms ease, transform 220ms var(--central-ease-out), display 220ms allow-discrete, overlay 220ms allow-discrete;
}

body[data-interface-mode="central"] dialog.central-dialog::backdrop {
  background: rgba(12, 20, 16, .42);
  opacity: 0;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: opacity 180ms ease, display 180ms allow-discrete, overlay 180ms allow-discrete;
}

body[data-interface-mode="central"] dialog.central-dialog[open],
body[data-interface-mode="central"] dialog.central-dialog.is-open,
body[data-interface-mode="central"] dialog.central-dialog.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

body[data-interface-mode="central"] dialog.central-dialog[open]::backdrop,
body[data-interface-mode="central"] dialog.central-dialog.is-open::backdrop,
body[data-interface-mode="central"] dialog.central-dialog.is-visible::backdrop {
  opacity: 1;
}

body[data-interface-mode="central"] dialog.central-dialog.is-leaving {
  opacity: 0;
  transform: translateY(8px) scale(.985);
}

body[data-interface-mode="central"] dialog.central-dialog.is-leaving::backdrop {
  opacity: 0;
}

body[data-interface-mode="central"] .central-dialog-surface {
  position: relative;
  max-height: calc(100dvh - 32px);
  padding: 24px;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 14px;
  border: 1px solid var(--central-border);
  border-radius: var(--central-radius-shell);
  background: var(--central-surface);
  box-shadow: var(--central-shadow-lg);
}

body[data-interface-mode="central"] .central-dialog-header {
  margin: -24px -24px 4px;
  min-height: 70px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--central-border);
}

body[data-interface-mode="central"] .central-dialog-header > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

body[data-interface-mode="central"] .central-dialog-header h2,
body[data-interface-mode="central"] .central-dialog-header h3 {
  margin: 0;
  color: var(--central-text);
  font-size: 19px;
  font-weight: 720;
  letter-spacing: -.02em;
  line-height: 1.3;
}

body[data-interface-mode="central"] .central-dialog-header p {
  margin: 0;
  color: var(--central-muted);
  font-size: 12px;
}

body[data-interface-mode="central"] .central-dialog-content {
  min-height: 0;
  padding: 0;
  overflow: auto;
  display: grid;
  gap: 16px;
}

body[data-interface-mode="central"] .central-dialog-actions {
  margin: 6px -24px -24px;
  padding: 14px 24px 18px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--central-border);
  background: var(--central-surface-soft);
}

/* The lightweight decision dialog deliberately emits these fields directly
   inside .central-dialog-surface; wrapper elements are optional. */
body[data-interface-mode="central"] .central-dialog-eyebrow {
  padding-right: 48px;
  color: var(--central-brand);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .1em;
  line-height: 1.25;
  text-transform: uppercase;
}

body[data-interface-mode="central"] .central-dialog-title {
  max-width: calc(100% - 48px);
  margin: 0;
  color: var(--central-text);
  font-size: 21px;
  font-weight: 720;
  letter-spacing: -.025em;
  line-height: 1.3;
}

body[data-interface-mode="central"] .central-dialog-description {
  max-width: 70ch;
  margin: 0;
  color: var(--central-muted);
  font-size: 13px;
  line-height: 1.55;
}

body[data-interface-mode="central"] .central-dialog-field {
  min-width: 0;
  margin-top: 4px;
  display: grid;
  gap: 7px;
}

body[data-interface-mode="central"] .central-dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  flex: 0 0 40px;
  border-color: var(--central-border);
  color: var(--central-muted);
  background: var(--central-surface);
  box-shadow: none;
  font-size: 20px;
  line-height: 1;
}

body[data-interface-mode="central"] .central-dialog-close:hover {
  color: var(--central-text);
  border-color: var(--central-border-strong);
  background: var(--central-surface-soft);
  box-shadow: none;
  transform: none;
}

body[data-interface-mode="central"] .central-modal-header,
body[data-interface-mode="central"] .central-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body[data-interface-mode="central"] .central-modal-header h2,
body[data-interface-mode="central"] .central-drawer-header h2 {
  margin: 0;
  color: var(--central-text);
  font-size: 20px;
  font-weight: 720;
  letter-spacing: -.02em;
}

body[data-interface-mode="central"] .central-modal-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-interface-mode="central"] .central-toast-stack {
  position: fixed;
  z-index: 140;
  top: 18px;
  right: 18px;
  width: min(400px, calc(100vw - 36px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}

body[data-interface-mode="central"] .central-toast-region {
  position: fixed;
  z-index: 140;
  top: 18px;
  right: 18px;
  width: min(400px, calc(100vw - 36px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}

body[data-interface-mode="central"] .central-toast-region[hidden] {
  display: none !important;
}

body[data-interface-mode="central"] .central-toast {
  min-height: 52px;
  padding: 13px 15px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  border: 1px solid var(--central-border);
  border-radius: 12px;
  color: var(--central-text-soft);
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--central-shadow-md);
  pointer-events: auto;
  animation: central-v3-toast-enter 220ms var(--central-ease-out) both;
}

body[data-interface-mode="central"] .central-toast-region .central-toast {
  grid-template-columns: minmax(0, 1fr) auto;
}

body[data-interface-mode="central"] .central-toast-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body[data-interface-mode="central"] .central-toast-copy strong,
body[data-interface-mode="central"] .central-toast-title {
  color: var(--central-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

body[data-interface-mode="central"] .central-toast-copy span,
body[data-interface-mode="central"] .central-toast-copy p,
body[data-interface-mode="central"] .central-toast-message {
  margin: 0;
  color: var(--central-muted);
  font-size: 11px;
  line-height: 1.45;
}

body[data-interface-mode="central"] .central-toast-close {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-color: transparent;
  border-radius: 8px;
  color: var(--central-muted);
  background: transparent;
  box-shadow: none;
  font-size: 16px;
  line-height: 1;
}

body[data-interface-mode="central"] .central-toast-close:hover {
  color: var(--central-text);
  border-color: var(--central-border);
  background: var(--central-surface-soft);
  box-shadow: none;
  transform: none;
}

body[data-interface-mode="central"] .central-toast:not(.is-visible):not(.is-leaving) {
  opacity: 0;
  transform: translateY(-8px) scale(.985);
}

body[data-interface-mode="central"] .central-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

body[data-interface-mode="central"] .central-toast.is-leaving {
  opacity: 0;
  transform: translateY(-6px) scale(.985);
  transition: opacity 160ms ease, transform 160ms ease;
}

body[data-interface-mode="central"] .central-toast.is-success {
  border-color: #b9d9cd;
}

body[data-interface-mode="central"] .central-toast.is-error {
  border-color: #efc4cb;
}

body[data-interface-mode="central"] .central-state {
  min-height: 240px;
  padding: 36px 24px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: var(--central-muted);
  text-align: center;
}

body[data-interface-mode="central"] .central-state-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--central-border);
  border-radius: 14px;
  color: var(--central-brand);
  background: var(--central-surface-selected);
}

body[data-interface-mode="central"] .central-state h3 {
  margin: 0;
  color: var(--central-text);
  font-size: 16px;
  font-weight: 700;
}

body[data-interface-mode="central"] .central-state p {
  max-width: 52ch;
  margin: 0;
  color: var(--central-muted);
  font-size: 13px;
}

body[data-interface-mode="central"] .central-error-state,
body[data-interface-mode="central"] .central-service-error {
  border: 1px solid #efc4cb;
  border-radius: var(--central-radius-section);
  background: var(--central-surface-danger);
}

body[data-interface-mode="central"] .central-error-state .central-state-icon,
body[data-interface-mode="central"] .central-service-error .central-state-icon {
  color: var(--central-danger);
  border-color: #efc4cb;
  background: #fff7f8;
}

body[data-interface-mode="central"] .central-offline-state {
  border: 1px solid #ead09d;
  border-radius: var(--central-radius-section);
  background: var(--central-surface-warning);
}

body[data-interface-mode="central"] .central-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  color: transparent !important;
  background: #e8eeeb !important;
  pointer-events: none;
  user-select: none;
}

body[data-interface-mode="central"] .central-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .64) 46%, transparent 68%);
  transform: translateX(-100%);
  animation: central-v3-skeleton 1.4s ease-in-out infinite;
}

body[data-interface-mode="central"] [aria-busy="true"] {
  cursor: progress;
}

/* -------------------------------------------------------------------------- */
/* Motion                                                                     */
/* -------------------------------------------------------------------------- */

@keyframes central-v3-page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes central-v3-section-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes central-v3-detail-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes central-v3-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes central-v3-drawer-enter {
  from { opacity: .75; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes central-v3-modal-enter {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes central-v3-toast-enter {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes central-v3-skeleton {
  to { transform: translateX(100%); }
}

/* -------------------------------------------------------------------------- */
/* Responsive: 1280 / 1024 / 768 / 390                                        */
/* -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  body[data-interface-mode="central"] :where(.overview-card, .toolbar-card, .step-card):hover {
    border-color: #c4d7d0;
    box-shadow: 0 2px 5px rgba(24, 33, 29, .04), 0 14px 34px rgba(24, 33, 29, .075);
    transform: translateY(-1px);
  }
}

@media (max-width: 1439px) {
  body[data-interface-mode="central"] {
    --central-sidebar-width: 224px;
    --central-gutter: 24px;
    --central-section-gap: 20px;
  }

  body[data-interface-mode="central"] #employeesTab .employee-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
  }

  body[data-interface-mode="central"] #employeesTab .employee-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-interface-mode="central"] #employeesTab #bulkEmployeeReassignCard {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1279px) {
  body[data-interface-mode="central"] {
    --central-gutter: 20px;
  }

  body[data-interface-mode="central"] .topbar {
    position: sticky;
    inset: 0 auto auto 0;
    width: 100%;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--central-border);
    box-shadow: 0 5px 18px rgba(24, 33, 29, .055);
  }

  body[data-interface-mode="central"] .topbar-inner {
    width: min(var(--central-content-max), 100%);
    height: auto;
    min-height: 68px;
    margin: 0 auto;
    padding: 10px var(--central-gutter);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
  }

  body[data-interface-mode="central"] .brand {
    padding: 0;
  }

  body[data-interface-mode="central"] .primary-nav {
    min-width: 0;
    padding: 3px;
    flex-direction: row;
    justify-content: center;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    border: 1px solid var(--central-border);
    border-radius: 12px;
    background: var(--central-surface-soft);
  }

  body[data-interface-mode="central"] .primary-nav::-webkit-scrollbar {
    display: none;
  }

  body[data-interface-mode="central"] .primary-nav::before {
    display: none;
  }

  body[data-interface-mode="central"] .primary-nav .nav-button {
    width: auto;
    min-width: max-content;
    min-height: 38px;
    padding: 8px 11px;
    justify-content: center;
  }

  body[data-interface-mode="central"] .top-actions {
    width: auto;
    margin: 0;
    padding: 0;
    display: block;
    border: 0;
  }

  body[data-interface-mode="central"] .top-actions .logout-button {
    width: auto;
    min-height: 38px;
    padding: 8px 11px;
    justify-content: center;
    border-color: var(--central-border);
    background: var(--central-surface);
  }

  body[data-interface-mode="central"] .layout {
    min-height: calc(100dvh - 68px);
    margin-left: 0;
  }

  body[data-interface-mode="central"] .arrivals-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-interface-mode="central"] .arrivals-search-filter {
    grid-column: span 2;
  }

  body[data-interface-mode="central"] #employeesTab .employee-grid {
    grid-template-columns: 1fr;
  }

  body[data-interface-mode="central"] #employeesTab .employee-profile-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 1023px) {
  body[data-interface-mode="central"] {
    --central-gutter: 16px;
    --central-section-gap: 16px;
  }

  body[data-interface-mode="central"] .topbar-inner {
    grid-template-columns: minmax(170px, auto) minmax(0, 1fr) auto;
    gap: 10px;
  }

  body[data-interface-mode="central"] .brand-copy span {
    display: none;
  }

  body[data-interface-mode="central"] :where(.dashboard-hero, .section-hero) {
    padding: 22px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body[data-interface-mode="central"] .dashboard-hero .status-card {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-interface-mode="central"] .dashboard-hero .status-caption {
    grid-column: 1 / -1;
  }

  body[data-interface-mode="central"] .dashboard-hero .status-card > :nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--central-border);
  }

  body[data-interface-mode="central"] .overview-grid,
  body[data-interface-mode="central"] .hygiene-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-interface-mode="central"] .hygiene-readiness-people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-interface-mode="central"] .settings-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-interface-mode="central"] .hygiene-ai-grid {
    grid-template-columns: 1fr;
  }

  body[data-interface-mode="central"] .hygiene-ai-conclusion {
    grid-column: auto;
  }
}

@media (max-width: 767px) {
  body[data-interface-mode="central"] {
    --central-gutter: 12px;
    --central-section-gap: 14px;
    --central-radius-section: 15px;
    --central-radius-shell: 17px;
  }

  body[data-interface-mode="central"] .auth-screen {
    padding: 18px;
    grid-template-columns: 1fr;
    place-items: center;
    gap: 28px;
  }

  body[data-interface-mode="central"] .auth-intro {
    width: min(460px, 100%);
    gap: 20px;
  }

  body[data-interface-mode="central"] .auth-copy h1 {
    font-size: clamp(34px, 10vw, 48px);
  }

  body[data-interface-mode="central"] .auth-copy p,
  body[data-interface-mode="central"] .auth-features {
    display: none;
  }

  body[data-interface-mode="central"] .auth-card {
    width: min(460px, 100%);
    padding: 24px;
    border-radius: 19px;
  }

  body[data-interface-mode="central"] .topbar-inner,
  body[data-interface-mode="central"].central-mobile .topbar-inner {
    min-height: 0;
    padding: 9px 12px 8px;
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  body[data-interface-mode="central"] .product-symbol {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  body[data-interface-mode="central"] .central-nav-toggle,
  body[data-interface-mode="central"].central-mobile .central-nav-toggle {
    grid-column: 2;
    grid-row: 1;
    display: grid;
  }

  body[data-interface-mode="central"] .primary-nav,
  body[data-interface-mode="central"].central-mobile .primary-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    max-height: 0;
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    visibility: hidden;
    border-color: transparent;
    opacity: 0;
    transform: translateY(-4px);
    transition:
      max-height 220ms var(--central-ease-out),
      padding 180ms ease,
      border-color 180ms ease,
      opacity 160ms ease,
      transform 220ms var(--central-ease-out),
      visibility 0s linear 220ms;
  }

  body[data-interface-mode="central"].central-nav-open .primary-nav,
  body[data-interface-mode="central"].nav-open .primary-nav,
  body[data-interface-mode="central"] .primary-nav.is-open {
    max-height: min(420px, calc(100dvh - 76px));
    padding: 4px;
    overflow-y: auto;
    visibility: visible;
    border-color: var(--central-border);
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }

  body[data-interface-mode="central"] .primary-nav .nav-button,
  body[data-interface-mode="central"].central-mobile .primary-nav .nav-button {
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    justify-content: flex-start;
    font-size: 12px;
  }

  body[data-interface-mode="central"] .top-actions,
  body[data-interface-mode="central"].central-mobile .top-actions {
    grid-column: 3;
    grid-row: 1;
  }

  body[data-interface-mode="central"] .top-actions .logout-button {
    min-height: 40px;
  }

  body[data-interface-mode="central"] .layout {
    padding-bottom: 28px;
  }

  body[data-interface-mode="central"] :where(.dashboard-hero, .section-hero) {
    padding: 19px 17px;
    border-radius: 17px;
  }

  body[data-interface-mode="central"] :where(.dashboard-hero, .section-hero) h1 {
    font-size: 25px;
  }

  body[data-interface-mode="central"] .dashboard-hero .status-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 13px;
  }

  body[data-interface-mode="central"] .overview-grid,
  body[data-interface-mode="central"] .hygiene-metric-grid,
  body[data-interface-mode="central"] .settings-overview,
  body[data-interface-mode="central"] .form-grid,
  body[data-interface-mode="central"] #employeesTab .employee-actions-grid,
  body[data-interface-mode="central"] .training-grid {
    grid-template-columns: 1fr;
  }

  body[data-interface-mode="central"] #employeesTab #bulkEmployeeReassignCard {
    grid-column: auto;
  }

  body[data-interface-mode="central"] .overview-card {
    min-height: 92px;
  }

  body[data-interface-mode="central"] .hygiene-metric-grid {
    padding: 14px;
  }

  body[data-interface-mode="central"] .hygiene-readiness-people {
    grid-template-columns: 1fr;
    padding: 0 14px 14px;
  }

  body[data-interface-mode="central"] .panel-header {
    min-height: 0;
    padding: 16px;
    display: grid;
    align-items: start;
  }

  body[data-interface-mode="central"] .panel-body {
    padding: 16px;
  }

  body[data-interface-mode="central"] .panel > .table-wrap,
  body[data-interface-mode="central"] .arrivals-panel > .table-wrap {
    margin: 0 12px 12px;
  }

  body[data-interface-mode="central"] .arrivals-filters {
    grid-template-columns: 1fr 1fr;
  }

  body[data-interface-mode="central"] .arrivals-search-filter,
  body[data-interface-mode="central"] .arrivals-restaurant-filter {
    grid-column: 1 / -1;
  }

  body[data-interface-mode="central"] .arrivals-filters > :where(button, .button-link) {
    width: 100%;
  }

  body[data-interface-mode="central"] .central-table-swipe-hint,
  body[data-interface-mode="central"].central-mobile .central-table-swipe-hint {
    display: flex;
  }

  body[data-interface-mode="central"] .employee-list-tools {
    grid-template-columns: 1fr;
  }

  body[data-interface-mode="central"] .toolbar-card {
    min-height: 0;
  }

  body[data-interface-mode="central"] .hygiene-ai-panel {
    width: calc(100% - 8px);
    margin: 4px;
    padding: 13px;
    border-radius: 13px;
  }

  body[data-interface-mode="central"] .hygiene-ai-panel-heading {
    display: grid;
  }

  body[data-interface-mode="central"] .hygiene-ai-updated {
    white-space: normal;
  }

  body[data-interface-mode="central"] .hygiene-ai-card {
    padding: 14px;
  }

  body[data-interface-mode="central"] .hygiene-evidence-gallery {
    grid-template-columns: 1fr;
  }

  body[data-interface-mode="central"] .hygiene-evidence-card {
    grid-template-rows: minmax(160px, 38vw) auto;
  }

  body[data-interface-mode="central"] .hygiene-evidence-card img {
    height: 100%;
  }

  body[data-interface-mode="central"] .central-drawer,
  body[data-interface-mode="central"] .central-ai-drawer-surface {
    width: 100vw;
    border-left: 0;
  }

  body[data-interface-mode="central"] .central-ai-drawer-header {
    min-height: 66px;
    padding: 13px 14px;
  }

  body[data-interface-mode="central"] .central-ai-drawer-content {
    padding: 12px;
  }

  body[data-interface-mode="central"] .central-modal-layer,
  body[data-interface-mode="central"] .modal-layer {
    padding: 10px;
    align-items: end;
  }

  body[data-interface-mode="central"] .central-modal,
  body[data-interface-mode="central"] .modal-dialog,
  body[data-interface-mode="central"] dialog.central-dialog {
    width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 20px;
    border-radius: 18px;
  }

  body[data-interface-mode="central"] dialog.central-dialog {
    margin: auto 0 0;
    padding: 0;
  }

  body[data-interface-mode="central"] .central-dialog-surface {
    max-height: calc(100dvh - 20px);
    padding: 20px;
    border-radius: 18px;
  }

  body[data-interface-mode="central"] .central-dialog-header {
    margin: -20px -20px 4px;
  }

  body[data-interface-mode="central"] .central-dialog-actions {
    margin: 6px -20px -20px;
    padding-inline: 20px;
  }
}

@media (max-width: 479px) {
  body[data-interface-mode="central"] {
    --central-gutter: 10px;
  }

  body[data-interface-mode="central"] .brand-copy strong {
    max-width: 180px;
    font-size: 14px;
  }

  body[data-interface-mode="central"] .top-actions .logout-button {
    width: 42px;
    min-width: 42px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }

  body[data-interface-mode="central"] .top-actions .logout-button::before {
    content: "↗";
    font-size: 17px;
    transform: rotate(135deg);
  }

  body[data-interface-mode="central"] .auth-screen {
    padding: 14px;
  }

  body[data-interface-mode="central"] .auth-intro {
    gap: 14px;
  }

  body[data-interface-mode="central"] .auth-copy h1 {
    font-size: 32px;
  }

  body[data-interface-mode="central"] .auth-card {
    padding: 21px 18px;
  }

  body[data-interface-mode="central"] .overview-card,
  body[data-interface-mode="central"] .hygiene-metric {
    min-height: 86px;
    padding: 14px;
  }

  body[data-interface-mode="central"] .button-stack {
    display: grid;
    grid-template-columns: 1fr;
  }

  body[data-interface-mode="central"] .button-stack > * {
    width: 100%;
  }

  body[data-interface-mode="central"] .localized-file-picker {
    grid-template-columns: 1fr;
  }

  body[data-interface-mode="central"] .hygiene-ai-fact {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  body[data-interface-mode="central"] .hygiene-ai-fact dd {
    max-width: none;
    text-align: left;
  }

  body[data-interface-mode="central"] .central-toast-stack,
  body[data-interface-mode="central"] .central-toast-region,
  body[data-interface-mode="central"] .app-notice {
    top: 10px;
    right: 10px;
    width: calc(100vw - 20px);
  }
}

/* -------------------------------------------------------------------------- */
/* Cinematic glass arena · 2026-09                                             */
/* -------------------------------------------------------------------------- */

body[data-interface-mode="central"] {
  color-scheme: dark;
  --central-canvas: #20212b;
  --central-canvas-deep: #171821;
  --central-surface: rgba(49, 50, 64, .70);
  --central-surface-soft: rgba(58, 59, 73, .46);
  --central-surface-raised: rgba(66, 67, 82, .74);
  --central-surface-selected: rgba(200, 246, 66, .13);
  --central-surface-info: rgba(18, 203, 226, .12);
  --central-surface-success: rgba(126, 224, 178, .13);
  --central-surface-warning: rgba(255, 165, 67, .14);
  --central-surface-danger: rgba(255, 91, 125, .13);
  --central-text: #f7f8f2;
  --central-text-soft: #d8d9d4;
  --central-muted: #a9aab2;
  --central-faint: #7d7f89;
  --central-inverse: #15161e;
  --central-border: rgba(255, 255, 255, .10);
  --central-border-strong: rgba(255, 255, 255, .17);
  --central-border-dark: rgba(255, 255, 255, .23);
  --central-brand: #c8f342;
  --central-brand-hover: #dbff67;
  --central-brand-active: #b5dc32;
  --central-brand-soft: rgba(200, 243, 66, .13);
  --central-success: #7ee0b2;
  --central-warning: #ffb153;
  --central-danger: #ff6b85;
  --central-danger-hover: #ff8096;
  --central-info: #21cce4;
  --central-lime: #c8f342;
  --central-cyan: #18cce4;
  --central-coral: #ff5f82;
  --central-orange: #ff9d43;
  --central-violet: #9489ff;
  --central-glass: rgba(53, 54, 68, .62);
  --central-glass-soft: rgba(64, 65, 79, .40);
  --central-glass-border: rgba(255, 255, 255, .12);
  --central-shadow-sm: 0 18px 42px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .07);
  --central-shadow-md: 0 30px 86px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .09);
  --central-shadow-lg: 0 42px 120px rgba(0, 0, 0, .46);
  --central-focus: 0 0 0 3px rgba(200, 243, 66, .25), 0 0 26px rgba(200, 243, 66, .14);
  background: #20212b;
}

body[data-interface-mode="central"] .auth-screen,
body[data-interface-mode="central"] .app-shell {
  color: var(--central-text);
  background:
    radial-gradient(circle at 79% 16%, rgba(255, 152, 62, .13), transparent 22rem),
    radial-gradient(circle at 16% 82%, rgba(15, 207, 232, .12), transparent 25rem),
    radial-gradient(circle at 52% 112%, rgba(200, 243, 66, .10), transparent 28rem),
    linear-gradient(138deg, #282934 0%, #22232e 46%, #1c1d27 100%);
}

body[data-interface-mode="central"] .auth-screen::before,
body[data-interface-mode="central"] .app-shell::before {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .15) 0 .7px, transparent .9px),
    linear-gradient(115deg, transparent 0 46%, rgba(255, 255, 255, .022) 46% 47%, transparent 47% 100%);
  background-position: 0 0, 0 0;
  background-size: 36px 36px, 180px 180px;
  mix-blend-mode: screen;
  opacity: .28;
}

body[data-interface-mode="central"] .app-shell::after,
body[data-interface-mode="central"] .auth-screen::after {
  content: "";
  position: fixed;
  z-index: 0;
  right: -8vw;
  bottom: -15vw;
  width: min(48vw, 720px);
  aspect-ratio: 1;
  border: clamp(18px, 3vw, 48px) solid rgba(200, 243, 66, .10);
  border-radius: 44% 56% 61% 39% / 36% 48% 52% 64%;
  filter: blur(3px) drop-shadow(0 0 42px rgba(200, 243, 66, .09));
  pointer-events: none;
  animation: central-arena-orbit 18s ease-in-out infinite alternate;
}

body[data-interface-mode="central"] .auth-screen::after {
  right: auto;
  bottom: -18vw;
  left: -12vw;
  border-color: rgba(22, 203, 229, .11);
  animation-duration: 22s;
}

body[data-interface-mode="central"] :where(h1, h2, h3, h4, strong),
body[data-interface-mode="central"] .product-name strong,
body[data-interface-mode="central"] .brand-copy strong {
  color: var(--central-text);
}

body[data-interface-mode="central"] :where(p, small),
body[data-interface-mode="central"] .product-name span,
body[data-interface-mode="central"] .brand-copy span,
body[data-interface-mode="central"] .message {
  color: var(--central-muted);
}

body[data-interface-mode="central"] .auth-screen {
  grid-template-columns: minmax(0, 680px) minmax(360px, 440px);
  gap: clamp(36px, 6vw, 94px);
}

body[data-interface-mode="central"] .auth-copy h1 {
  max-width: 760px;
  color: #fff;
  font-size: clamp(50px, 6.6vw, 94px);
  font-weight: 820;
  letter-spacing: -.065em;
  line-height: .91;
  text-wrap: balance;
}

body[data-interface-mode="central"] .eyebrow,
body[data-interface-mode="central"] .auth-card-kicker {
  color: var(--central-lime);
}

body[data-interface-mode="central"] .auth-feature,
body[data-interface-mode="central"] .auth-card,
body[data-interface-mode="central"] .product-symbol {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(57, 58, 72, .58);
  box-shadow: var(--central-shadow-md);
  -webkit-backdrop-filter: blur(28px) saturate(128%);
  backdrop-filter: blur(28px) saturate(128%);
}

body[data-interface-mode="central"] .auth-feature {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 28px rgba(0, 0, 0, .14);
}

body[data-interface-mode="central"] .auth-card::before {
  left: 34px;
  width: 108px;
  height: 4px;
  background: linear-gradient(90deg, var(--central-lime), var(--central-cyan));
  box-shadow: 0 0 24px rgba(200, 243, 66, .36);
}

body[data-interface-mode="central"] .auth-card input,
body[data-interface-mode="central"] :where(input, select, textarea) {
  color: var(--central-text);
  border-color: rgba(255, 255, 255, .13);
  background: rgba(20, 21, 29, .46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

body[data-interface-mode="central"] :where(input, textarea)::placeholder {
  color: rgba(230, 231, 226, .38);
}

body[data-interface-mode="central"] select option {
  color: var(--central-text);
  background: #292a36;
}

body[data-interface-mode="central"] .auth-card #authButton,
body[data-interface-mode="central"] button:not(.secondary):not(.danger):not(.ghost):not(.nav-button):not(.central-home-card):not(.settings-tab-button),
body[data-interface-mode="central"] .button-link:not(.secondary):not(.danger):not(.nav-button):not(.central-home-card) {
  color: #171821;
  border-color: transparent;
  background: linear-gradient(135deg, #d9ff62 0%, var(--central-lime) 52%, #98d843 100%);
  box-shadow: 0 13px 30px rgba(180, 229, 50, .17);
}

body[data-interface-mode="central"] .auth-card #authButton:not(:disabled):hover,
body[data-interface-mode="central"] button:not(.secondary):not(.danger):not(.ghost):not(.nav-button):not(.central-home-card):not(.settings-tab-button):not(:disabled):hover {
  color: #111218;
  background: linear-gradient(135deg, #e5ff84, #d4ff50 54%, #a7e24c);
  box-shadow: 0 18px 40px rgba(193, 241, 57, .25);
}

body[data-interface-mode="central"] :where(button.secondary, .button-link.secondary, button.ghost) {
  color: var(--central-text-soft);
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .055);
}

body[data-interface-mode="central"] :where(button.secondary, .button-link.secondary, button.ghost):hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .095);
}

body[data-interface-mode="central"] .topbar {
  border-bottom-color: rgba(255, 255, 255, .09);
  color: var(--central-text);
  background: rgba(32, 33, 43, .76);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .20);
  -webkit-backdrop-filter: blur(28px) saturate(128%);
  backdrop-filter: blur(28px) saturate(128%);
}

body[data-interface-mode="central"] .topbar::after {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(21, 203, 229, .55), rgba(200, 243, 66, .48), transparent);
}

body[data-interface-mode="central"] .product-symbol {
  color: var(--central-lime);
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 24px rgba(200, 243, 66, .08);
}

body[data-interface-mode="central"] .primary-nav {
  padding: 5px;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .035);
}

body[data-interface-mode="central"] .primary-nav .nav-button {
  min-height: 42px;
  padding-inline: clamp(11px, 1vw, 17px);
  border-radius: 13px;
  color: #a7a8b0;
  background: transparent;
  box-shadow: none;
}

body[data-interface-mode="central"] .primary-nav .nav-button:hover {
  color: #fff;
  background: rgba(255, 255, 255, .065);
}

body[data-interface-mode="central"] .primary-nav .nav-button.active {
  color: #171821;
  background: var(--central-lime);
  box-shadow: 0 8px 25px rgba(190, 238, 53, .18), inset 0 1px 0 rgba(255, 255, 255, .46);
}

body[data-interface-mode="central"] .primary-nav .nav-button::after {
  display: none;
}

body[data-interface-mode="central"] .top-actions .logout-button {
  color: #d8d9d4;
  border-color: rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .045);
}

body[data-interface-mode="central"] .layout {
  position: relative;
  z-index: 2;
}

body[data-interface-mode="central"] :is(.panel, .overview-card, .toolbar-card, .settings-group, .step-card, .stat-box, .hint-strip, .browser-live-card, .network-camera-card, .employee-profile-panel, .employee-actions-panel, .hygiene-metric, .hygiene-readiness-group, .hygiene-ai-panel, .hygiene-ai-card, .central-home-summary, .central-home-card) {
  border-color: rgba(255, 255, 255, .10);
  background: rgba(54, 55, 69, .55);
  box-shadow: var(--central-shadow-sm);
  -webkit-backdrop-filter: blur(24px) saturate(122%);
  backdrop-filter: blur(24px) saturate(122%);
}

body[data-interface-mode="central"] :is(.panel, .toolbar-card, .central-home-card, .overview-card)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 12%, rgba(255, 255, 255, .035) 42%, transparent 68%);
  transform: translateX(-100%);
  transition: transform 620ms var(--central-ease-out);
}

body[data-interface-mode="central"] :is(.panel, .toolbar-card, .central-home-card, .overview-card):hover::after {
  transform: translateX(100%);
}

body[data-interface-mode="central"] :is(.panel, .toolbar-card, .central-home-card, .overview-card):hover {
  border-color: rgba(255, 255, 255, .17);
  background: rgba(65, 66, 81, .66);
  box-shadow: 0 27px 68px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}

body[data-interface-mode="central"] :is(.panel-title h2, .panel-title h3, .section-title h2, .section-title h3) {
  color: var(--central-text);
}

body[data-interface-mode="central"] :is(.panel-title span, .section-title span, .settings-note, .browser-camera-note) {
  color: var(--central-muted);
}

body[data-interface-mode="central"] .table-wrap {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(26, 27, 36, .30);
}

body[data-interface-mode="central"] .settings-tabs {
  padding: 5px;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 17px;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

body[data-interface-mode="central"] .settings-tab-button {
  color: #a7a9b1;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body[data-interface-mode="central"] .settings-tab-button:hover {
  color: #fff;
  background: rgba(255,255,255,.065);
}

body[data-interface-mode="central"] .settings-tab-button.active {
  color: #171821;
  border-color: transparent;
  background: var(--central-lime);
  box-shadow: 0 10px 25px rgba(190,238,53,.16);
}

body[data-interface-mode="central"] th {
  color: #bfc0c5;
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
}

body[data-interface-mode="central"] td {
  color: #e6e7e2;
  border-color: rgba(255, 255, 255, .065);
}

body[data-interface-mode="central"] tbody tr:nth-child(odd),
body[data-interface-mode="central"] tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .012);
}

body[data-interface-mode="central"] tbody tr:hover {
  background: rgba(200, 243, 66, .055);
}

body[data-interface-mode="central"] tbody tr.selected {
  background: rgba(200, 243, 66, .10);
  box-shadow: inset 3px 0 0 var(--central-lime);
}

body[data-interface-mode="central"] .central-page-meta {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .025);
}

body[data-interface-mode="central"] .central-home-hero {
  min-height: clamp(470px, 57vh, 650px);
  padding: clamp(32px, 4.2vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  align-items: center;
  gap: clamp(28px, 3.5vw, 56px);
  border-color: rgba(255, 255, 255, .11);
  background:
    radial-gradient(circle at 80% 18%, rgba(255, 153, 63, .16), transparent 19rem),
    radial-gradient(circle at 16% 92%, rgba(20, 205, 231, .11), transparent 23rem),
    linear-gradient(145deg, rgba(59, 60, 75, .70), rgba(40, 41, 53, .61));
  box-shadow: var(--central-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .09);
  -webkit-backdrop-filter: blur(32px) saturate(125%);
  backdrop-filter: blur(32px) saturate(125%);
}

body[data-interface-mode="central"] .central-home-hero::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.9), transparent 72%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.9), transparent 72%);
}

body[data-interface-mode="central"] .central-home-copy {
  gap: 22px;
}

body[data-interface-mode="central"] .central-home-eyebrow {
  color: var(--central-lime);
}

body[data-interface-mode="central"] .central-home-eyebrow::before {
  height: 2px;
  background: linear-gradient(90deg, var(--central-lime), var(--central-cyan));
  box-shadow: 0 0 18px rgba(200, 243, 66, .34);
}

body[data-interface-mode="central"] .central-home-copy h1 {
  color: #fff;
  font-size: clamp(52px, 6.4vw, 96px);
  font-weight: 850;
  letter-spacing: -.07em;
  line-height: .88;
  text-shadow: 0 22px 60px rgba(0, 0, 0, .32);
}

body[data-interface-mode="central"] .central-home-copy p {
  max-width: 570px;
  color: #b8bac1;
  font-size: clamp(15px, 1.35vw, 19px);
}

body[data-interface-mode="central"] .central-home-pattern.central-home-people {
  position: relative;
  inset: auto;
  z-index: 2;
  min-height: 370px;
  display: block;
  overflow: visible;
  pointer-events: none;
}

body[data-interface-mode="central"] .central-home-pattern.central-home-people::before {
  width: 330px;
  right: 50%;
  top: 50%;
  border-color: rgba(255, 255, 255, .09);
  background:
    radial-gradient(circle, rgba(255, 159, 67, .14), transparent 58%),
    repeating-radial-gradient(circle, transparent 0 43px, rgba(255, 255, 255, .045) 44px 45px);
  box-shadow: 0 0 90px rgba(255, 157, 67, .08), inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: translate(50%, -50%);
  animation: central-arena-spin 32s linear infinite;
}

body[data-interface-mode="central"] .central-home-pattern.central-home-people::after {
  width: 116px;
  right: -8px;
  top: 14px;
  border: 16px solid rgba(20, 205, 231, .12);
  border-radius: 46% 54% 61% 39%;
  background: transparent;
  box-shadow: 0 0 32px rgba(20, 205, 231, .10);
  transform: rotate(18deg);
}

body[data-interface-mode="central"] .central-home-person {
  position: absolute;
  width: 172px;
  min-height: 248px;
  padding: 18px 15px 14px;
  display: grid;
  align-content: end;
  justify-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 30px;
  background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.025));
  box-shadow: 0 28px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  animation: central-person-float 5.8s ease-in-out infinite alternate;
}

body[data-interface-mode="central"] .central-home-person.is-ready {
  right: auto;
  left: 50%;
  bottom: 27px;
  z-index: 3;
  width: 190px;
  min-height: 288px;
  border-color: rgba(200, 243, 66, .26);
  transform: translateX(-50%);
}

body[data-interface-mode="central"] .central-home-person.is-arrival {
  right: auto;
  left: 0;
  bottom: 5px;
  z-index: 2;
  opacity: .84;
  transform: scale(.86) rotate(-3deg);
  animation-delay: -.9s;
}

body[data-interface-mode="central"] .central-home-person.is-review {
  right: 0;
  left: auto;
  bottom: 7px;
  z-index: 2;
  opacity: .84;
  transform: scale(.86) rotate(3deg);
  animation-delay: -1.8s;
}

body[data-interface-mode="central"] .central-home-person-figure {
  position: relative;
  width: 84px;
  height: 142px;
  display: block;
  color: #dfe2da;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .25));
}

body[data-interface-mode="central"] .central-home-person.is-ready .central-home-person-figure {
  color: var(--central-lime);
  filter: drop-shadow(0 0 18px rgba(200, 243, 66, .17));
}

body[data-interface-mode="central"] .central-home-person-head {
  position: absolute;
  top: 0;
  left: 50%;
  width: 34px;
  height: 34px;
  border: 3px solid currentColor;
  border-radius: 50%;
  transform: translateX(-50%);
}

body[data-interface-mode="central"] .central-home-person-body {
  position: absolute;
  top: 39px;
  left: 50%;
  width: 48px;
  height: 62px;
  border: 3px solid currentColor;
  border-radius: 18px 18px 12px 12px;
  transform: translateX(-50%);
}

body[data-interface-mode="central"] .central-home-person-arm,
body[data-interface-mode="central"] .central-home-person-leg {
  position: absolute;
  width: 3px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: top center;
}

body[data-interface-mode="central"] .central-home-person-arm { top: 48px; height: 60px; }
body[data-interface-mode="central"] .central-home-person-arm--left { left: 22px; transform: rotate(23deg); }
body[data-interface-mode="central"] .central-home-person-arm--right { right: 22px; transform: rotate(-23deg); }
body[data-interface-mode="central"] .central-home-person-leg { top: 96px; height: 47px; }
body[data-interface-mode="central"] .central-home-person-leg--left { left: 35px; transform: rotate(10deg); }
body[data-interface-mode="central"] .central-home-person-leg--right { right: 35px; transform: rotate(-10deg); }

body[data-interface-mode="central"] .central-home-person-meta {
  width: 100%;
  display: grid;
  gap: 3px;
  text-align: center;
}

body[data-interface-mode="central"] .central-home-person-meta strong {
  color: #fff;
  font-size: 13px;
}

body[data-interface-mode="central"] .central-home-person-meta small {
  color: #989aa4;
  font-size: 10px;
}

body[data-interface-mode="central"] .central-home-person.is-ready .central-home-person-meta small {
  color: var(--central-lime);
}

body[data-interface-mode="central"] .central-home-summary {
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border-radius: 20px;
  border-color: rgba(255, 255, 255, .10);
  background: rgba(56, 57, 71, .58);
}

body[data-interface-mode="central"] .central-home-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body[data-interface-mode="central"] .central-home-card {
  position: relative;
  min-width: 0;
  min-height: 138px;
  padding: 20px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  border-radius: 19px;
  text-align: left;
  white-space: normal;
  color: var(--central-text);
  background: rgba(54, 55, 69, .55);
  box-shadow: var(--central-shadow-sm);
}

body[data-interface-mode="central"] .central-home-card:hover {
  color: #fff;
  background: rgba(66, 67, 82, .70);
}

body[data-interface-mode="central"] .brand-copy strong {
  overflow: visible;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: clip;
}

body[data-interface-mode="central"] .central-home-stat {
  min-height: 74px;
  padding: 11px 12px;
  display: grid;
  align-content: center;
  gap: 4px;
  border-color: rgba(255, 255, 255, .075);
}

body[data-interface-mode="central"] .central-home-stat span {
  color: #999ba5;
}

body[data-interface-mode="central"] .central-home-stat strong {
  color: #fff;
}

body[data-interface-mode="central"] .central-home-card {
  min-height: 154px;
  border-color: rgba(255, 255, 255, .10);
  color: var(--central-text);
  background: rgba(56, 57, 71, .55);
}

body[data-interface-mode="central"] .central-home-card::before {
  right: 20px;
  left: 20px;
  height: 3px;
  background: linear-gradient(90deg, var(--central-cyan), var(--central-lime));
  box-shadow: 0 0 18px rgba(22, 203, 229, .16);
}

body[data-interface-mode="central"] .central-home-card:hover {
  color: #fff;
  border-color: rgba(200, 243, 66, .22);
  background: rgba(68, 69, 83, .72);
  box-shadow: 0 26px 64px rgba(0,0,0,.30), 0 0 0 1px rgba(200,243,66,.05);
  transform: translateY(-6px) scale(1.008);
}

body[data-interface-mode="central"] .central-home-card-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #15161e;
  border-color: transparent;
  background: var(--central-lime);
  box-shadow: 0 12px 28px rgba(190, 235, 53, .14);
}

body[data-interface-mode="central"] .central-home-card-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

body[data-interface-mode="central"] .central-home-card-copy strong {
  color: #fff;
  font-size: 15px;
  line-height: 1.3;
}

body[data-interface-mode="central"] .central-home-card-copy span {
  color: #a7a9b1;
  font-size: 12px;
  line-height: 1.5;
}

body[data-interface-mode="central"] .hygiene-ai-panel,
body[data-interface-mode="central"] .hygiene-ai-card {
  border-color: rgba(255, 255, 255, .10);
  background: rgba(51, 52, 66, .69);
}

body[data-interface-mode="central"] .hygiene-ai-fact {
  color: #aaaeb6;
  border-color: rgba(255,255,255,.07);
}

body[data-interface-mode="central"] .hygiene-ai-fact dd,
body[data-interface-mode="central"] .hygiene-ai-card-header h4 {
  color: #f4f5f1;
}

body[data-interface-mode="central"] .hygiene-ai-conclusion {
  border-color: rgba(126, 224, 178, .24);
  background:
    radial-gradient(circle at 90% 0, rgba(126,224,178,.16), transparent 18rem),
    linear-gradient(145deg, rgba(48, 76, 67, .78), rgba(42, 48, 54, .72));
}

body[data-interface-mode="central"] .hygiene-ai-conclusion.is-problem {
  border-color: rgba(255, 107, 133, .26);
  background:
    radial-gradient(circle at 90% 0, rgba(255,95,130,.15), transparent 18rem),
    linear-gradient(145deg, rgba(78, 46, 56, .78), rgba(47, 43, 51, .72));
}

body[data-interface-mode="central"] .hygiene-ai-conclusion.is-pending {
  border-color: rgba(255, 177, 83, .26);
  background:
    radial-gradient(circle at 90% 0, rgba(255,177,83,.14), transparent 18rem),
    linear-gradient(145deg, rgba(76, 61, 43, .78), rgba(48, 45, 49, .72));
}

body[data-interface-mode="central"] .hygiene-ai-conclusion-verdict,
body[data-interface-mode="central"] .hygiene-ai-conclusion-action {
  color: #d8dad5;
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
}

body[data-interface-mode="central"] .hygiene-ai-conclusion-verdict strong,
body[data-interface-mode="central"] .hygiene-ai-conclusion-action strong {
  color: #fff;
}

@keyframes central-arena-orbit {
  from { transform: rotate(-9deg) scale(.96); }
  to { transform: rotate(12deg) scale(1.05); }
}

@keyframes central-arena-spin {
  from { transform: translate(50%, -50%) rotate(0deg); }
  to { transform: translate(50%, -50%) rotate(360deg); }
}

@keyframes central-person-float {
  from { margin-bottom: -3px; }
  to { margin-bottom: 9px; }
}

@media (max-width: 1040px) {
  body[data-interface-mode="central"] .central-home-hero {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  body[data-interface-mode="central"] .central-home-pattern.central-home-people {
    min-height: 330px;
    width: min(560px, 100%);
    margin-inline: auto;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 680px) {
  body[data-interface-mode="central"] .auth-copy h1 { font-size: clamp(43px, 14vw, 66px); }
  body[data-interface-mode="central"] .central-home-hero { padding: 28px 20px 22px; }
  body[data-interface-mode="central"] .central-home-copy h1 { font-size: clamp(46px, 14vw, 68px); }
  body[data-interface-mode="central"] .central-home-pattern.central-home-people {
    min-height: 265px;
    transform: scale(.82);
    transform-origin: center bottom;
    margin-bottom: -30px;
  }
  body[data-interface-mode="central"] .central-home-person.is-arrival { right: auto; left: 0; }
  body[data-interface-mode="central"] .central-home-person.is-review { right: 0; left: auto; }
  body[data-interface-mode="central"] .central-home-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-interface-mode="central"] .app-shell::after,
  body[data-interface-mode="central"] .auth-screen::after,
  body[data-interface-mode="central"] .central-home-pattern.central-home-people::before,
  body[data-interface-mode="central"] .central-home-person {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-interface-mode="central"] *,
  body[data-interface-mode="central"] *::before,
  body[data-interface-mode="central"] *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  body[data-interface-mode="central"] {
    background: #fff;
  }

  body[data-interface-mode="central"] .topbar,
  body[data-interface-mode="central"] .app-notice,
  body[data-interface-mode="central"] :where(button, .button-link),
  body[data-interface-mode="central"] .arrivals-filters {
    display: none !important;
  }

  body[data-interface-mode="central"] .layout {
    margin: 0;
    padding: 0;
  }

  body[data-interface-mode="central"] :where(.panel, .overview-card, .hygiene-ai-card) {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* The previous light presentation remains available only to print/archive
   output. Screen rendering is owned by the cinematic arena above. */
@media print {

body[data-interface-mode="central"] .auth-card::before {
  background: var(--central-brand);
}

body[data-interface-mode="central"] .auth-card #authButton {
  border: 1px solid var(--central-brand);
  color: #fff;
  background: var(--central-brand);
  box-shadow: 0 10px 24px rgba(25, 118, 95, .18);
  letter-spacing: 0;
  text-transform: none;
}

body[data-interface-mode="central"] .auth-card #authButton:not(:disabled):hover {
  border-color: var(--central-brand-hover);
  background: var(--central-brand-hover);
  box-shadow: 0 12px 28px rgba(25, 118, 95, .22);
}

body[data-interface-mode="central"] .auth-card #authButton:active {
  border-color: var(--central-brand-active);
  background: var(--central-brand-active);
  box-shadow: none;
}

/* Use one quiet entry animation instead of animating parent and children. */
body[data-interface-mode="central"] .tab-panel.active,
body[data-interface-mode="central"] .central-page-visible {
  animation: none;
}

body[data-interface-mode="central"] .central-page-entering,
body[data-interface-mode="central"] .central-page-visible {
  opacity: 1;
  transform: none;
}

body[data-interface-mode="central"] .central-page-entering [data-central-enter] {
  opacity: 0;
  transform: translateY(4px);
}

body[data-interface-mode="central"] .central-page-visible [data-central-enter] {
  opacity: 1;
  transform: none;
  animation: central-r60-enter 180ms var(--central-ease-out) both;
  animation-delay: calc(var(--central-enter-index, 0) * 20ms);
}

@keyframes central-r60-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

body[data-interface-mode="central"] .hygiene-ai-grid {
  align-items: stretch;
}

body[data-interface-mode="central"] .hygiene-ai-card {
  height: 100%;
}

body[data-interface-mode="central"] .hygiene-ai-conclusion {
  height: auto;
}

@media (min-width: 768px) {
  body[data-interface-mode="central"] .hygiene-evidence-gallery {
    grid-auto-rows: 1fr;
  }

  body[data-interface-mode="central"] .hygiene-evidence-card {
    height: 100%;
  }

  body[data-interface-mode="central"] .hygiene-evidence-card > span {
    min-height: 42px;
    display: flex;
    align-items: center;
  }
}

@media (min-width: 768px) and (max-width: 1439px) {
  body[data-interface-mode="central"] #employeesTab .employee-actions-grid {
    align-items: start;
  }

  body[data-interface-mode="central"] .toolbar-card {
    min-height: 168px;
    height: auto;
  }
}

/* Keep arrivals readable without a horizontal scrollbar on compact desktops. */
@media (min-width: 1024px) and (max-width: 1439px) {
  body[data-interface-mode="central"] .arrivals-panel > .table-wrap {
    overflow-x: hidden;
  }

  body[data-interface-mode="central"] .arrivals-table {
    width: 100%;
    min-width: 0 !important;
    table-layout: fixed;
  }

  body[data-interface-mode="central"] .arrivals-table :is(th, td) {
    min-width: 0 !important;
    padding-inline: 8px;
  }

  body[data-interface-mode="central"] .arrivals-table td {
    overflow-wrap: anywhere;
  }

  body[data-interface-mode="central"] .arrivals-table :is(th, td):nth-child(2),
  body[data-interface-mode="central"] .arrivals-table :is(th, td):nth-child(4) {
    display: none;
  }

  body[data-interface-mode="central"] .arrivals-table :is(th, td:not([colspan])):nth-child(1),
  body[data-interface-mode="central"] .arrivals-table :is(th, td:not([colspan])):nth-child(3) {
    width: 12%;
  }

  body[data-interface-mode="central"] .arrivals-table :is(th, td:not([colspan])):nth-child(5) {
    width: 17%;
  }

  body[data-interface-mode="central"] .arrivals-table :is(th, td:not([colspan])):nth-child(6) {
    width: 30%;
  }

  body[data-interface-mode="central"] .arrivals-table :is(th, td:not([colspan])):nth-child(7) {
    width: 7%;
  }

  body[data-interface-mode="central"] .arrivals-table :is(th, td:not([colspan])):nth-child(8) {
    width: 10%;
  }

  body[data-interface-mode="central"] .arrivals-table :is(th, td:not([colspan])):nth-child(9) {
    width: 12%;
  }

  body[data-interface-mode="central"] .arrivals-table :where(.arrival-employee, .hygiene-status-stack, .hygiene-evidence-links, .arrival-row-actions) {
    width: 100%;
    min-width: 0 !important;
  }

  body[data-interface-mode="central"] .arrivals-table :is(.hygiene-evidence-links, .arrival-row-actions) {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 4px;
  }

  body[data-interface-mode="central"] .arrivals-table :is(.hygiene-evidence-links, .arrival-row-actions)
      :where(button, .button-link) {
    width: 100%;
    min-width: 0;
    padding: 4px;
    font-size: 10px;
    white-space: normal;
  }
}

/* Voice remains available in the employee workflow; only the master-table
   column is hidden on a narrow desktop viewport. */
@media (min-width: 1280px) and (max-width: 1439px) {
  body[data-interface-mode="central"] .employee-table-wrap {
    overflow-x: hidden;
  }

  body[data-interface-mode="central"] .employees-table {
    width: 100%;
    min-width: 0 !important;
    table-layout: fixed;
  }

  body[data-interface-mode="central"] .employees-table :is(th, td) {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  body[data-interface-mode="central"] .employees-table :is(th, td):nth-child(5) {
    display: none;
  }

  body[data-interface-mode="central"] .employees-table :is(th, td):nth-child(1),
  body[data-interface-mode="central"] .employees-table :is(th, td):nth-child(2) {
    width: 18%;
  }

  body[data-interface-mode="central"] .employees-table :is(th, td):nth-child(3) {
    width: 20%;
  }

  body[data-interface-mode="central"] .employees-table :is(th, td):nth-child(4) {
    width: 27%;
  }

  body[data-interface-mode="central"] .employees-table :is(th, td):nth-child(6) {
    width: 17%;
  }
}

}

/* Restored light glass language ------------------------------------------------
   This final layer brings back the original Central character: a horizontal
   menu, botanical engraving, mint/lilac light and calm translucent surfaces.
   It intentionally leaves the compact information architecture intact. */

body[data-interface-mode="central"] {
  color-scheme: light;
  --central-canvas: #f4f5f0;
  --central-canvas-deep: #edf2ef;
  --central-surface: rgba(255, 255, 255, .72);
  --central-surface-soft: rgba(255, 255, 255, .48);
  --central-surface-raised: rgba(255, 255, 255, .84);
  --central-surface-selected: rgba(226, 240, 235, .78);
  --central-surface-info: #edf4fa;
  --central-surface-success: #e8f5ef;
  --central-surface-warning: #fff4e3;
  --central-surface-danger: #fcecef;
  --central-text: #282d3b;
  --central-text-soft: #454c5c;
  --central-muted: #697283;
  --central-faint: #7c8493;
  --central-inverse: #ffffff;
  --central-border: rgba(255, 255, 255, .86);
  --central-border-strong: rgba(106, 114, 122, .22);
  --central-border-dark: rgba(87, 99, 105, .34);
  --central-brand: #3f8e7e;
  --central-brand-hover: #327667;
  --central-brand-active: #285f53;
  --central-brand-soft: rgba(220, 240, 233, .74);
  --central-success: #19765f;
  --central-warning: #99621c;
  --central-danger: #bc4252;
  --central-danger-hover: #a73545;
  --central-info: #416b9c;
  --central-focus: 0 0 0 3px rgba(63, 142, 126, .22);
  --central-glass: rgba(255, 255, 255, .64);
  --central-glass-soft: rgba(255, 255, 255, .43);
  --central-glass-border: rgba(255, 255, 255, .88);
  --central-lilac: #7375c9;
  --central-mint: #4d9f8d;
  --central-shadow-sm: 0 12px 34px rgba(55, 59, 73, .085), inset 0 1px 0 rgba(255, 255, 255, .82);
  --central-shadow-md: 0 24px 64px rgba(55, 59, 73, .12), inset 0 1px 0 rgba(255, 255, 255, .90);
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 255, 255, .98), transparent 28rem),
    radial-gradient(circle at 89% 14%, rgba(205, 240, 232, .68), transparent 31rem),
    radial-gradient(circle at 46% 86%, rgba(231, 219, 246, .62), transparent 36rem),
    linear-gradient(145deg, #f8f8f4 0%, #edf4f0 50%, #f5eff7 100%);
}

body[data-interface-mode="central"] .auth-screen,
body[data-interface-mode="central"] .app-shell {
  color: var(--central-text);
  background:
    radial-gradient(circle at 9% 10%, rgba(255, 255, 255, .98), transparent 29rem),
    radial-gradient(circle at 88% 16%, rgba(199, 238, 229, .72), transparent 33rem),
    radial-gradient(circle at 42% 82%, rgba(229, 216, 247, .66), transparent 37rem),
    linear-gradient(145deg, #fafaf6 0%, #edf5f1 48%, #f6f0f8 100%);
}

body[data-interface-mode="central"] .auth-screen::before,
body[data-interface-mode="central"] .app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440' viewBox='0 0 440 440'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%237aa99d' stroke-opacity='.20' stroke-width='1.15'%3E%3Cpath d='M22 355c66-22 105-69 118-142 9-50 39-93 91-129'/%3E%3Cpath d='M93 299c-35-4-56-22-66-53 32-1 55 13 66 53Z'/%3E%3Cpath d='M120 246c25-13 42-35 49-65-30 6-47 28-49 65Z'/%3E%3Cpath d='M151 170c-24-8-38-24-43-48 25 2 40 18 43 48Z'/%3E%3C/g%3E%3Cg stroke='%239493bd' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M329 425c-2-70 17-122 58-157'/%3E%3Cpath d='M357 341c-24-4-39-17-46-39 23 0 39 13 46 39Z'/%3E%3Cpath d='M375 302c18-12 29-29 32-51-21 6-32 23-32 51Z'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23a18f7b' fill-opacity='.13'%3E%3Ccircle cx='76' cy='75' r='1'/%3E%3Ccircle cx='264' cy='46' r='.8'/%3E%3Ccircle cx='405' cy='113' r='1.1'/%3E%3Ccircle cx='247' cy='337' r='.9'/%3E%3Ccircle cx='61' cy='411' r='.8'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle, rgba(105, 112, 123, .13) 0 .55px, transparent .7px),
    radial-gradient(circle, rgba(139, 117, 103, .10) 0 .45px, transparent .65px);
  background-position: left top, 0 0, 31px 17px;
  background-size: 440px 440px, 43px 47px, 67px 61px;
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: .48;
}

body[data-interface-mode="central"] .app-shell::before {
  position: fixed;
  inset: 76px 0 0;
  opacity: .40;
}

body[data-interface-mode="central"] .auth-screen > .geometric-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

body[data-interface-mode="central"] .auth-screen .parallax-layer img {
  opacity: .16;
  filter: saturate(.70) hue-rotate(14deg) drop-shadow(0 14px 30px rgba(68, 72, 88, .09));
}

body[data-interface-mode="central"] .auth-intro,
body[data-interface-mode="central"] .auth-card {
  position: relative;
  z-index: 2;
}

body[data-interface-mode="central"] .auth-screen {
  grid-template-columns: minmax(0, 560px) minmax(360px, 440px);
  justify-content: center;
  gap: clamp(28px, 4vw, 56px);
  padding-inline: clamp(24px, 4vw, 64px);
}

body[data-interface-mode="central"] .auth-intro {
  width: 100%;
  max-width: 560px;
}

body[data-interface-mode="central"] .auth-feature {
  border-color: var(--central-glass-border);
  background: rgba(255, 255, 255, .46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .74), 0 9px 24px rgba(61, 65, 80, .06);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}

body[data-interface-mode="central"] .auth-card {
  border-color: var(--central-glass-border);
  background: rgba(255, 255, 255, .64);
  box-shadow: 0 30px 80px rgba(60, 63, 78, .16), inset 0 1px 0 rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(30px) saturate(138%);
  backdrop-filter: blur(30px) saturate(138%);
}

body[data-interface-mode="central"] .auth-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 38px;
  width: 82px;
  height: 3px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(90deg, var(--central-lilac), var(--central-mint));
}

body[data-interface-mode="central"] .auth-card input {
  border-color: rgba(105, 109, 126, .20);
  background: rgba(255, 255, 255, .60);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .84);
}

body[data-interface-mode="central"] .auth-card #authButton {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #7677ce 0%, #6269c3 48%, #4c998b 100%);
  box-shadow: 0 14px 30px rgba(92, 94, 181, .22);
}

body[data-interface-mode="central"] .auth-card #authButton:not(:disabled):hover {
  background: linear-gradient(135deg, #696bc1 0%, #555db6 48%, #3e897b 100%);
  box-shadow: 0 18px 34px rgba(82, 87, 164, .27);
}

body[data-interface-mode="central"] .auth-card #authButton:active {
  background: linear-gradient(135deg, #696bc1 0%, #555db6 48%, #3e897b 100%);
}

body[data-interface-mode="central"] .product-symbol {
  border-color: rgba(255, 255, 255, .90);
  background: rgba(255, 255, 255, .54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .84), 0 12px 34px rgba(57, 61, 78, .10);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
}

body[data-interface-mode="central"] .topbar {
  position: sticky;
  inset: 0 auto auto 0;
  z-index: 50;
  width: 100%;
  min-height: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .84);
  color: var(--central-text);
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 14px 38px rgba(60, 64, 78, .09);
  -webkit-backdrop-filter: blur(24px) saturate(138%);
  backdrop-filter: blur(24px) saturate(138%);
}

body[data-interface-mode="central"] .topbar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  display: block;
  background: linear-gradient(90deg, transparent, rgba(115, 117, 201, .32), rgba(77, 159, 141, .42), transparent);
}

body[data-interface-mode="central"] .topbar-inner {
  width: min(var(--central-content-max), 100%);
  height: auto;
  min-height: 76px;
  margin: 0 auto;
  padding: 11px var(--central-gutter);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 2.6vw, 42px);
}

body[data-interface-mode="central"] .brand {
  min-width: 196px;
  padding: 0;
}

body[data-interface-mode="central"] .brand-copy strong {
  letter-spacing: .08em;
  text-transform: uppercase;
}

body[data-interface-mode="central"] .brand-copy span {
  letter-spacing: .10em;
  text-transform: uppercase;
}

body[data-interface-mode="central"] .primary-nav {
  width: auto;
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .45vw, 8px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  scrollbar-width: none;
}

body[data-interface-mode="central"] .primary-nav::-webkit-scrollbar {
  display: none;
}

body[data-interface-mode="central"] .primary-nav::before {
  display: none;
}

body[data-interface-mode="central"] .primary-nav .nav-button {
  position: relative;
  width: auto;
  min-width: max-content;
  min-height: 42px;
  padding: 8px clamp(9px, .9vw, 14px);
  justify-content: center;
  overflow: visible;
  border: 0;
  border-radius: 11px;
  color: #6b7180;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 680;
  letter-spacing: .01em;
  text-align: center;
  text-transform: none;
  transform: none;
}

body[data-interface-mode="central"] .primary-nav .nav-button::after {
  content: "";
  position: absolute;
  right: 11px;
  bottom: 2px;
  left: 11px;
  height: 2px;
  display: block;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--central-lilac), var(--central-mint));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

body[data-interface-mode="central"] .primary-nav .nav-button:hover {
  color: var(--central-text);
  border-color: transparent;
  background: rgba(255, 255, 255, .48);
  box-shadow: none;
  transform: none;
}

body[data-interface-mode="central"] .primary-nav .nav-button:hover::after,
body[data-interface-mode="central"] .primary-nav .nav-button.active::after {
  transform: scaleX(1);
}

body[data-interface-mode="central"] .primary-nav .nav-button.active {
  color: #353a49;
  border-color: transparent;
  background: rgba(255, 255, 255, .56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}

body[data-interface-mode="central"] .central-nav-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

body[data-interface-mode="central"] .top-actions {
  width: auto;
  margin: 0;
  padding: 0;
  display: block;
  border: 0;
}

body[data-interface-mode="central"] .top-actions .logout-button {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  justify-content: center;
  overflow: hidden;
  color: #5f6575;
  border-color: rgba(101, 105, 122, .18);
  background: rgba(255, 255, 255, .48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .80);
  font-size: 0;
}

body[data-interface-mode="central"] .top-actions .logout-button::before {
  content: "↗";
  font-size: 17px;
  transform: rotate(135deg);
}

body[data-interface-mode="central"] .top-actions .logout-button:hover {
  color: var(--central-danger);
  border-color: rgba(188, 66, 82, .24);
  background: rgba(255, 242, 244, .72);
}

body[data-interface-mode="central"] .layout {
  position: relative;
  z-index: 2;
  width: min(var(--central-content-max), 100%);
  min-height: calc(100dvh - 76px);
  margin: 0 auto;
  padding: clamp(20px, 2.4vw, 38px) var(--central-gutter) 48px;
}

body[data-interface-mode="central"] .content {
  width: 100%;
}

body[data-interface-mode="central"] .app-ambient-scene {
  position: fixed;
  inset: 76px 0 0;
  z-index: 1;
  display: block !important;
  overflow: hidden;
  pointer-events: none;
}

body[data-interface-mode="central"] .app-ambient-scene .parallax-layer img {
  opacity: .10;
  filter: saturate(.68) hue-rotate(14deg) drop-shadow(0 18px 32px rgba(78, 83, 105, .08));
}

body[data-interface-mode="central"] .central-page-meta {
  padding: 2px 4px;
}

body[data-interface-mode="central"] .central-page-title {
  font-size: clamp(29px, 3vw, 39px);
}

body[data-interface-mode="central"] .panel,
body[data-interface-mode="central"] .overview-card,
body[data-interface-mode="central"] .settings-group,
body[data-interface-mode="central"] .step-card,
body[data-interface-mode="central"] .toolbar-card,
body[data-interface-mode="central"] .stat-box,
body[data-interface-mode="central"] .hint-strip,
body[data-interface-mode="central"] .browser-live-empty,
body[data-interface-mode="central"] .browser-live-card {
  border-color: var(--central-glass-border);
  background: var(--central-glass);
  box-shadow: var(--central-shadow-sm);
  -webkit-backdrop-filter: blur(22px) saturate(132%);
  backdrop-filter: blur(22px) saturate(132%);
}

body[data-interface-mode="central"] .panel:hover {
  box-shadow: 0 22px 56px rgba(60, 64, 78, .115), inset 0 1px 0 rgba(255, 255, 255, .92);
}

body[data-interface-mode="central"] .table-wrap {
  border-color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .24);
}

body[data-interface-mode="central"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  border-color: rgba(101, 105, 122, .22);
  background: rgba(255, 255, 255, .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

body[data-interface-mode="central"] .settings-tab-button.active {
  color: #fff;
  border-color: rgba(98, 102, 200, .44);
  background: linear-gradient(135deg, rgba(116, 117, 207, .94), rgba(72, 151, 137, .92));
  box-shadow: 0 10px 26px rgba(85, 91, 155, .16);
}

body[data-interface-mode="central"] .central-registration-camera-note {
  margin: 0 0 20px;
  padding: 13px 15px;
  border: 1px solid rgba(77, 159, 141, .20);
  border-radius: 14px;
  color: #4f625e;
  background: linear-gradient(135deg, rgba(224, 242, 236, .72), rgba(241, 238, 250, .58));
  font-size: 13px;
  line-height: 1.55;
}

body[data-interface-mode="central"] .settings-restaurant-summary {
  display: grid;
  gap: 10px;
}

body[data-interface-mode="central"] .settings-restaurant-summary > h3,
body[data-interface-mode="central"] .settings-restaurant-summary > p {
  margin: 0;
}

/* Separate post-login home. */
body[data-interface-mode="central"] #centralHomeTab > .central-page-meta {
  display: none;
}

body[data-interface-mode="central"] .central-home {
  gap: clamp(18px, 2vw, 28px);
}

body[data-interface-mode="central"] .central-home-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(350px, 43vh, 500px);
  padding: clamp(30px, 4.6vw, 68px);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .62fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  border: 1px solid var(--central-glass-border);
  border-radius: 30px;
  background:
    radial-gradient(circle at 84% 18%, rgba(194, 238, 228, .74), transparent 23rem),
    radial-gradient(circle at 18% 84%, rgba(226, 213, 247, .72), transparent 27rem),
    rgba(255, 255, 255, .48);
  box-shadow: 0 28px 72px rgba(60, 64, 78, .14), inset 0 1px 0 rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(28px) saturate(134%);
  backdrop-filter: blur(28px) saturate(134%);
}

body[data-interface-mode="central"] .central-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 20% 42%, rgba(255, 255, 255, .78), transparent 27rem);
}

body[data-interface-mode="central"] .central-home-copy {
  position: relative;
  z-index: 2;
  max-width: 760px;
  display: grid;
  gap: 18px;
}

body[data-interface-mode="central"] .central-home-eyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #4f7f78;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body[data-interface-mode="central"] .central-home-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, var(--central-lilac), var(--central-mint));
}

body[data-interface-mode="central"] .central-home-copy h1 {
  max-width: 760px;
  margin: 0;
  color: #25293a;
  font-size: clamp(42px, 5.1vw, 72px);
  font-weight: 720;
  letter-spacing: -.055em;
  line-height: .99;
  text-shadow: 0 14px 38px rgba(71, 74, 90, .10);
}

body[data-interface-mode="central"] .central-home-copy p {
  max-width: 640px;
  margin: 0;
  color: #5f6676;
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.65;
}

body[data-interface-mode="central"] .central-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-interface-mode="central"] .central-home-actions > button {
  min-height: 46px;
  padding-inline: 18px;
}

body[data-interface-mode="central"] .central-home-actions > button:first-child {
  border: 0;
  background: linear-gradient(135deg, #7375c9, #4b998b);
  box-shadow: 0 13px 28px rgba(84, 95, 164, .20);
}

body[data-interface-mode="central"] .central-home-actions > button.secondary {
  color: #414757;
  border-color: rgba(101, 105, 122, .20);
  background: rgba(255, 255, 255, .52);
}

body[data-interface-mode="central"] .central-home-summary {
  position: relative;
  z-index: 2;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 20px;
  background: rgba(255, 255, 255, .56);
  box-shadow: 0 18px 48px rgba(64, 68, 83, .10), inset 0 1px 0 rgba(255, 255, 255, .90);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
}

body[data-interface-mode="central"] .central-home-stat {
  min-height: 74px;
  padding: 11px 12px;
  display: grid;
  align-content: center;
  gap: 4px;
  border-right: 1px solid rgba(101, 105, 122, .12);
}

body[data-interface-mode="central"] .central-home-stat:last-child {
  border-right: 0;
}

body[data-interface-mode="central"] .central-home-stat span {
  color: #777d8b;
  font-size: 11px;
  font-weight: 680;
}

body[data-interface-mode="central"] .central-home-stat strong {
  color: #303544;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
}

body[data-interface-mode="central"] .central-home-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

body[data-interface-mode="central"] .central-home-pattern::before {
  content: "";
  position: absolute;
  width: clamp(240px, 29vw, 410px);
  aspect-ratio: 1;
  right: clamp(22px, 5.4vw, 92px);
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .80) 0 18%, transparent 18.5%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 43px, rgba(112, 120, 171, .13) 44px 45px),
    linear-gradient(145deg, rgba(214, 235, 247, .44), rgba(207, 239, 227, .52) 52%, rgba(231, 219, 247, .46));
  box-shadow:
    0 38px 80px rgba(76, 85, 111, .10),
    inset 0 1px 0 rgba(255, 255, 255, .92);
}

body[data-interface-mode="central"] .central-home-pattern::after {
  content: "";
  position: absolute;
  width: clamp(92px, 10vw, 142px);
  aspect-ratio: 1;
  right: clamp(96px, 12.4vw, 188px);
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(93, 139, 132, .22);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(76, 157, 140, .72) 0 4px, transparent 5px),
    radial-gradient(circle at 24% 52%, rgba(114, 117, 201, .66) 0 3px, transparent 4px),
    radial-gradient(circle at 76% 36%, rgba(76, 157, 140, .66) 0 3px, transparent 4px),
    rgba(255, 255, 255, .42);
  box-shadow: inset 0 0 0 18px rgba(255, 255, 255, .16);
}

body[data-interface-mode="central"] .central-home-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body[data-interface-mode="central"] .central-home-card {
  position: relative;
  min-width: 0;
  min-height: 144px;
  padding: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  justify-content: stretch;
  gap: 14px;
  border: 1px solid var(--central-glass-border);
  border-radius: 19px;
  color: var(--central-text);
  background: rgba(255, 255, 255, .60);
  box-shadow: var(--central-shadow-sm);
  text-align: left;
  white-space: normal;
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
}

body[data-interface-mode="central"] .central-home-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 18px;
  left: 18px;
  height: 2px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, rgba(115, 117, 201, .72), rgba(77, 159, 141, .72));
  opacity: .66;
}

body[data-interface-mode="central"] .central-home-card:hover {
  color: var(--central-text);
  border-color: rgba(255, 255, 255, .98);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 20px 48px rgba(60, 64, 78, .13), inset 0 1px 0 rgba(255, 255, 255, .94);
  transform: translateY(-3px);
}

body[data-interface-mode="central"] .central-home-card-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(111, 115, 132, .13);
  border-radius: 14px;
  color: #6366b5;
  background: linear-gradient(145deg, rgba(231, 229, 250, .82), rgba(219, 241, 235, .72));
}

body[data-interface-mode="central"] .central-home-card-icon svg {
  width: 22px;
  height: 22px;
}

body[data-interface-mode="central"] .central-home-card-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

body[data-interface-mode="central"] .central-home-card-copy strong {
  color: #303544;
  font-size: 15px;
  line-height: 1.3;
}

body[data-interface-mode="central"] .central-home-card-copy span {
  color: #6c7281;
  font-size: 12px;
  font-weight: 520;
  line-height: 1.5;
}

/* AI conclusion keeps the strongest status colour in otherwise calm glass. */
body[data-interface-mode="central"] .hygiene-ai-panel {
  border-color: rgba(255, 255, 255, .90);
  background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(246, 250, 247, .68));
  box-shadow: 0 22px 58px rgba(53, 61, 70, .09), inset 0 1px 0 rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(22px) saturate(128%);
  backdrop-filter: blur(22px) saturate(128%);
}

body[data-interface-mode="central"] .hygiene-ai-card {
  border-color: rgba(96, 108, 105, .14);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .92), rgba(248, 251, 249, .84));
  box-shadow: 0 12px 30px rgba(53, 61, 70, .07), inset 0 1px 0 rgba(255, 255, 255, .92);
}

body[data-interface-mode="central"] .hygiene-ai-conclusion {
  position: relative;
  overflow: hidden;
  border-color: rgba(52, 144, 120, .25);
  background:
    radial-gradient(circle at 90% 0, rgba(114, 193, 170, .22), transparent 18rem),
    linear-gradient(145deg, rgba(226, 248, 240, .98), rgba(250, 255, 253, .94));
}

body[data-interface-mode="central"] .hygiene-ai-conclusion::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #4da98f, #7a7cca);
}

body[data-interface-mode="central"] .hygiene-ai-conclusion.is-problem {
  border-color: rgba(194, 79, 70, .27);
  background:
    radial-gradient(circle at 90% 0, rgba(220, 120, 112, .18), transparent 18rem),
    linear-gradient(145deg, rgba(255, 236, 233, .98), rgba(255, 251, 249, .95));
}

body[data-interface-mode="central"] .hygiene-ai-conclusion.is-problem::before {
  background: linear-gradient(180deg, #cf625b, #b783b2);
}

body[data-interface-mode="central"] .hygiene-ai-conclusion.is-pending {
  border-color: rgba(200, 139, 48, .28);
  background:
    radial-gradient(circle at 90% 0, rgba(230, 183, 98, .20), transparent 18rem),
    linear-gradient(145deg, rgba(255, 245, 225, .98), rgba(255, 252, 247, .95));
}

body[data-interface-mode="central"] .hygiene-ai-conclusion.is-pending::before {
  background: linear-gradient(180deg, #c78b37, #c4a26d);
}

body[data-interface-mode="central"] .hygiene-ai-conclusion-verdict,
body[data-interface-mode="central"] .hygiene-ai-conclusion-action {
  border-color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .64);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .80);
}

@media (max-width: 1180px) {
  body[data-interface-mode="central"] .topbar-inner {
    min-height: 108px;
    grid-template-columns: minmax(190px, 1fr) auto;
    gap: 7px 18px;
  }

  body[data-interface-mode="central"] .primary-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }

  body[data-interface-mode="central"] .top-actions {
    grid-column: 2;
    grid-row: 1;
  }

  body[data-interface-mode="central"] .layout {
    min-height: calc(100dvh - 108px);
  }

  body[data-interface-mode="central"] .app-shell::before,
  body[data-interface-mode="central"] .app-ambient-scene {
    inset: 108px 0 0;
  }

  body[data-interface-mode="central"] .central-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body[data-interface-mode="central"] .auth-screen {
    grid-template-columns: minmax(0, 560px);
    justify-items: center;
    gap: 24px;
  }

  body[data-interface-mode="central"] .auth-intro,
  body[data-interface-mode="central"] .auth-card {
    width: min(560px, 100%);
  }

  body[data-interface-mode="central"] .central-home-hero {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  body[data-interface-mode="central"] .central-home-pattern {
    opacity: .34;
    transform: translateX(14%);
  }

  body[data-interface-mode="central"] .central-home-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-interface-mode="central"] .central-home-stat {
    min-height: 68px;
    border-right: 1px solid rgba(101, 105, 122, .12);
    border-bottom: 1px solid rgba(101, 105, 122, .12);
  }

  body[data-interface-mode="central"] .central-home-stat:nth-child(2n) {
    border-right: 0;
  }

  body[data-interface-mode="central"] .central-home-stat:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (max-width: 767px) {
  body[data-interface-mode="central"] .auth-screen::before,
  body[data-interface-mode="central"] .app-shell::before {
    background-size: 360px 360px, 43px 47px, 67px 61px;
    opacity: .34;
  }

  body[data-interface-mode="central"] .topbar-inner,
  body[data-interface-mode="central"].central-mobile .topbar-inner {
    min-height: 60px;
    padding: 9px 12px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
  }

  body[data-interface-mode="central"] .brand {
    min-width: 0;
  }

  body[data-interface-mode="central"] .central-nav-toggle,
  body[data-interface-mode="central"].central-mobile .central-nav-toggle {
    grid-column: 2;
    grid-row: 1;
    display: grid;
  }

  body[data-interface-mode="central"] .primary-nav,
  body[data-interface-mode="central"].central-mobile .primary-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    max-height: 0;
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    visibility: hidden;
    border: 1px solid transparent;
    border-radius: 15px;
    background: rgba(255, 255, 255, .68);
    opacity: 0;
    transform: translateY(-4px);
    -webkit-backdrop-filter: blur(22px) saturate(132%);
    backdrop-filter: blur(22px) saturate(132%);
    transition: max-height 220ms var(--central-ease-out), padding 180ms ease, opacity 160ms ease, transform 220ms var(--central-ease-out), visibility 0s linear 220ms;
  }

  body[data-interface-mode="central"].central-nav-open .primary-nav,
  body[data-interface-mode="central"].nav-open .primary-nav,
  body[data-interface-mode="central"] .primary-nav.is-open {
    max-height: min(430px, calc(100dvh - 72px));
    padding: 5px;
    overflow-y: auto;
    visibility: visible;
    border-color: rgba(255, 255, 255, .90);
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }

  body[data-interface-mode="central"] .primary-nav .nav-button,
  body[data-interface-mode="central"].central-mobile .primary-nav .nav-button {
    width: 100%;
    min-height: 40px;
    padding: 8px 11px;
    justify-content: flex-start;
    border-radius: 10px;
  }

  body[data-interface-mode="central"] .primary-nav .nav-button::after {
    display: none;
  }

  body[data-interface-mode="central"] .primary-nav .nav-button.active {
    background: linear-gradient(135deg, rgba(232, 229, 249, .78), rgba(219, 241, 235, .78));
  }

  body[data-interface-mode="central"] .top-actions,
  body[data-interface-mode="central"].central-mobile .top-actions {
    grid-column: 3;
    grid-row: 1;
  }

  body[data-interface-mode="central"] .layout {
    min-height: calc(100dvh - 60px);
    padding: 16px 12px 30px;
  }

  body[data-interface-mode="central"] .app-shell::before,
  body[data-interface-mode="central"] .app-ambient-scene {
    inset: 60px 0 0;
  }

  body[data-interface-mode="central"] .central-home-hero {
    padding: 27px 21px;
    border-radius: 22px;
  }

  body[data-interface-mode="central"] .central-home-copy h1 {
    font-size: clamp(36px, 11vw, 52px);
  }

  body[data-interface-mode="central"] .central-home-grid {
    grid-template-columns: 1fr;
  }

  body[data-interface-mode="central"] .central-home-card {
    min-height: 112px;
  }
}

@media (max-width: 479px) {
  body[data-interface-mode="central"] .central-home-summary {
    grid-template-columns: 1fr;
  }

  body[data-interface-mode="central"] .central-home-stat {
    min-height: 58px;
    border-right: 0;
    border-bottom: 1px solid rgba(101, 105, 122, .12);
  }

  body[data-interface-mode="central"] .central-home-stat:nth-last-child(-n + 2) {
    border-bottom: 1px solid rgba(101, 105, 122, .12);
  }

  body[data-interface-mode="central"] .central-home-stat:last-child {
    border-bottom: 0;
  }

  body[data-interface-mode="central"] .central-home-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body[data-interface-mode="central"] .central-home-actions > button {
    width: 100%;
  }
}

/* Screen contrast and compact layouts shared by the operational pages. */
body[data-interface-mode="central"] .app-shell::after { display: none; }
body[data-interface-mode="central"] :is(.panel, .toolbar-card, .central-home-card, .overview-card):hover {
  border-color: rgba(255, 255, 255, .95);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 16px 38px rgba(53, 74, 65, .10), inset 0 1px 0 rgba(255, 255, 255, .92);
}
body[data-interface-mode="central"] .table-wrap {
  border-color: rgba(107, 130, 122, .14);
  background: rgba(255, 255, 255, .45);
}
body[data-interface-mode="central"] .app-shell :where(input, textarea)::placeholder { color: #7c8493; opacity: 1; }
body[data-interface-mode="central"] .app-shell select option { color: #282d3b; background: #fff; }
body[data-interface-mode="central"] .app-shell .settings-tab-button:not(.active) { color: #616a7a; }
body[data-interface-mode="central"] .app-shell button:not(.secondary):not(.danger):not(.ghost):not(.nav-button):not(.central-home-card):not(.settings-tab-button),
body[data-interface-mode="central"] .app-shell .button-link:not(.secondary):not(.danger):not(.nav-button):not(.central-home-card) {
  color: #fff;
  background: linear-gradient(135deg, #7375c9, #448f80);
  box-shadow: 0 8px 22px rgba(88, 99, 157, .16);
}
body[data-interface-mode="central"] .app-shell button:not(.secondary):not(.danger):not(.ghost):not(.nav-button):not(.central-home-card):not(.settings-tab-button):not(:disabled):hover {
  color: #fff;
  background: linear-gradient(135deg, #6567ba, #367969);
  box-shadow: 0 10px 26px rgba(88, 99, 157, .22);
}
body[data-interface-mode="central"] .app-shell .hygiene-metric {
  border-color: rgba(107, 130, 122, .12);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 6px 18px rgba(52, 75, 65, .05);
}
body[data-interface-mode="central"] .app-shell .hygiene-metric-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body[data-interface-mode="central"] #employeesTab .employee-actions-grid { align-items: start; grid-auto-rows: auto; }
body[data-interface-mode="central"] #employeesTab .employee-actions-grid .toolbar-card { min-height: 0; height: auto; align-self: start; }
body[data-interface-mode="central"] #employeesTab .employee-actions-grid .toolbar-card .button-stack { align-self: stretch; width: 100%; }
body[data-interface-mode="central"] #employeesTab .employee-actions-grid .toolbar-card:first-child .button-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The AI drawer is a body-level portal, outside the workspace button scope. */
body[data-interface-mode="central"] #centralAiDrawer .central-ai-drawer-backdrop,
body[data-interface-mode="central"] #centralAiDrawer .central-ai-drawer-backdrop:hover,
body[data-interface-mode="central"] #centralAiDrawer .central-ai-drawer-backdrop:active {
  color: transparent;
  background: rgba(25, 34, 39, .34);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
body[data-interface-mode="central"] #centralAiDrawer .central-ai-drawer-close,
body[data-interface-mode="central"] #centralAiDrawer .central-ai-drawer-close:hover {
  color: #596575;
  background: #f1f5f3;
  border: 1px solid rgba(107, 130, 122, .18);
  box-shadow: none;
  transform: none;
}
body[data-interface-mode="central"] .central-ai-drawer-content > .hygiene-ai-panel > .hygiene-ai-panel-heading { display: none; }
body[data-interface-mode="central"] .hygiene-ai-card-header h4,
body[data-interface-mode="central"] .hygiene-ai-fact dd,
body[data-interface-mode="central"] .hygiene-ai-conclusion-verdict strong,
body[data-interface-mode="central"] .hygiene-ai-conclusion-action strong { color: var(--central-text); }
body[data-interface-mode="central"] .hygiene-ai-fact {
  color: var(--central-muted);
  border-color: rgba(107, 130, 122, .12);
}
body[data-interface-mode="central"] .hygiene-ai-conclusion-verdict,
body[data-interface-mode="central"] .hygiene-ai-conclusion-action { color: var(--central-text-soft); }
body[data-interface-mode="central"] .central-home-pattern.central-home-people {
  min-height: 0;
  width: 100%;
  display: grid;
  gap: 14px;
  margin: 0;
  transform: none;
}
body[data-interface-mode="central"] .central-home-pattern.central-home-people::before,
body[data-interface-mode="central"] .central-home-pattern.central-home-people::after { display: none; }
body[data-interface-mode="central"] .central-home-person,
body[data-interface-mode="central"] .central-home-person:is(.is-arrival, .is-ready, .is-review) {
  position: relative;
  inset: auto;
  width: 100%;
  min-height: 82px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, .90);
  border-radius: 18px;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 12px 28px rgba(52, 72, 66, .08), inset 0 1px 0 #fff;
  opacity: 1;
  transform: none;
  animation: none;
}
body[data-interface-mode="central"] .central-home-person.is-ready { background: linear-gradient(135deg, rgba(224, 244, 235, .86), rgba(232, 230, 249, .68)); }
body[data-interface-mode="central"] .central-home-person .central-home-person-figure,
body[data-interface-mode="central"] .central-home-person.is-ready .central-home-person-figure {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #4b7e74;
  filter: none;
}
body[data-interface-mode="central"] .central-home-person-figure .central-nav-icon { width: 34px; height: 34px; }
body[data-interface-mode="central"] .central-home-person-meta { text-align: left; gap: 4px; }
body[data-interface-mode="central"] .central-home-person-meta strong { color: #303948; font-size: 15px; }
body[data-interface-mode="central"] .central-home-person-meta small,
body[data-interface-mode="central"] .central-home-person.is-ready .central-home-person-meta small { color: #5c6d73; font-size: 12px; }
@media (max-width: 1439px) {
  body[data-interface-mode="central"] #employeesTab .employee-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-interface-mode="central"] #employeesTab .employee-profile-panel { position: static; max-height: none; overflow: visible; }
}
@media (min-width: 1100px) and (max-width: 1439px) {
  body[data-interface-mode="central"] #employeesTab .employee-actions-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-interface-mode="central"] #employeesTab #bulkEmployeeReassignCard { grid-column: auto; }
}
@media (max-width: 900px) {
  body[data-interface-mode="central"] .app-shell .hygiene-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body[data-interface-mode="central"] .app-shell .hygiene-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Authoritative login skin; intentionally last so later workspace restoration
   rules cannot turn the authentication screen back into the light layout. */
body[data-interface-mode="central"] .auth-screen {
  color-scheme: dark;
  grid-template-columns: minmax(0, 680px) minmax(360px, 440px);
  justify-content: center;
  gap: clamp(38px, 6vw, 96px);
  padding: clamp(28px, 5vw, 80px) max(28px, calc((100vw - 1480px) / 2));
  color: #f7f8f2;
  background:
    radial-gradient(circle at 86% 14%, rgba(255, 158, 69, .14), transparent 23rem),
    radial-gradient(circle at 12% 82%, rgba(24, 204, 228, .13), transparent 25rem),
    radial-gradient(circle at 50% 116%, rgba(200, 243, 66, .10), transparent 30rem),
    linear-gradient(140deg, #292a35 0%, #22232d 50%, #1b1c25 100%);
}

body[data-interface-mode="central"] .auth-screen::before {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .15) 0 .65px, transparent .85px),
    linear-gradient(118deg, transparent 0 46%, rgba(255, 255, 255, .022) 46% 47%, transparent 47% 100%);
  background-position: 0 0, 0 0;
  background-size: 36px 36px, 190px 190px;
  background-repeat: repeat;
  mix-blend-mode: screen;
  opacity: .27;
}

body[data-interface-mode="central"] .auth-screen::after {
  content: "";
  position: fixed;
  z-index: 0;
  top: auto;
  right: auto;
  bottom: -20vw;
  left: -13vw;
  width: min(50vw, 720px);
  aspect-ratio: 1;
  border: clamp(18px, 3vw, 48px) solid rgba(24, 204, 228, .11);
  border-radius: 43% 57% 63% 37% / 40% 49% 51% 60%;
  filter: blur(2px) drop-shadow(0 0 42px rgba(24, 204, 228, .08));
  pointer-events: none;
  animation: central-v3-login-orbit 23s ease-in-out infinite alternate;
}

body[data-interface-mode="central"] .auth-screen > .geometric-scene { display: block; }
body[data-interface-mode="central"] .auth-screen .parallax-layer img {
  opacity: .20;
  filter: saturate(.86) drop-shadow(0 16px 34px rgba(0, 0, 0, .18));
}
body[data-interface-mode="central"] .auth-intro { width: min(680px, 100%); max-width: 680px; }
body[data-interface-mode="central"] .auth-copy h1,
body[data-interface-mode="central"] .auth-screen .product-name strong,
body[data-interface-mode="central"] .auth-card h1 { color: #fff; }
body[data-interface-mode="central"] .auth-copy h1 {
  max-width: 760px;
  font-size: clamp(50px, 6.5vw, 92px);
  font-weight: 850;
  letter-spacing: -.068em;
  line-height: .90;
  text-wrap: balance;
  text-shadow: 0 28px 72px rgba(0, 0, 0, .35);
}
body[data-interface-mode="central"] .auth-copy p,
body[data-interface-mode="central"] .auth-screen .product-name span,
body[data-interface-mode="central"] .auth-card p,
body[data-interface-mode="central"] .auth-security { color: #a8aab2; }
body[data-interface-mode="central"] .auth-screen :is(.eyebrow, .auth-card-kicker) { color: #c8f342; }
body[data-interface-mode="central"] .auth-screen :is(.product-symbol, .auth-feature, .auth-card) {
  color: #f7f8f2;
  border-color: rgba(255, 255, 255, .105);
  background: rgba(55, 56, 70, .60);
  box-shadow: 0 26px 72px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .075);
  -webkit-backdrop-filter: blur(28px) saturate(126%);
  backdrop-filter: blur(28px) saturate(126%);
}
body[data-interface-mode="central"] .auth-screen .product-symbol { color: #c8f342; }
body[data-interface-mode="central"] .auth-feature::before {
  background: #c8f342;
  box-shadow: 0 0 14px rgba(200, 243, 66, .72);
}
body[data-interface-mode="central"] .auth-card::before {
  left: 34px;
  width: 108px;
  height: 4px;
  background: linear-gradient(90deg, #c8f342, #18cce4);
  box-shadow: 0 0 24px rgba(200, 243, 66, .34);
}
body[data-interface-mode="central"] .auth-card input {
  color: #f7f8f2;
  border-color: rgba(255, 255, 255, .13);
  background: rgba(20, 21, 29, .48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
body[data-interface-mode="central"] .auth-card input::placeholder { color: rgba(232, 233, 228, .36); }
body[data-interface-mode="central"] .auth-card label { color: #d7d9e0; }
body[data-interface-mode="central"] .auth-security { border-top-color: rgba(255, 255, 255, .12); }
body[data-interface-mode="central"] .auth-screen :where(button, input):focus-visible {
  outline: 2px solid #c8f342;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(200, 243, 66, .16);
}
body[data-interface-mode="central"] .auth-card #authButton,
body[data-interface-mode="central"] .auth-card #authButton:not(:disabled):hover,
body[data-interface-mode="central"] .auth-card #authButton:active {
  color: #16171e;
  border: 0;
  background: linear-gradient(135deg, #e0ff75, #c8f342 55%, #9dda43);
  box-shadow: 0 16px 36px rgba(191, 237, 55, .19);
}
body[data-interface-mode="central"] .auth-card #authButton:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 42px rgba(191, 237, 55, .25);
}

@keyframes central-v3-login-orbit {
  from { transform: rotate(-5deg) scale(.96); }
  to { transform: rotate(13deg) scale(1.06); }
}

@media (max-width: 1024px) {
  body[data-interface-mode="central"] .auth-screen { grid-template-columns: minmax(0, 620px); gap: 26px; }
  body[data-interface-mode="central"] .auth-intro,
  body[data-interface-mode="central"] .auth-card { width: min(620px, 100%); }
}

@media (max-width: 760px) {
  body[data-interface-mode="central"] .auth-screen { align-content: center; padding: 30px 18px; }
  body[data-interface-mode="central"] .auth-copy { min-width: 0; }
  body[data-interface-mode="central"] .auth-copy h1 { max-width: 100%; font-size: clamp(32px, 10vw, 66px); }
  body[data-interface-mode="central"] .auth-features { display: none; }
  body[data-interface-mode="central"] .auth-card { padding: 28px 22px; border-radius: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-interface-mode="central"] .auth-screen::after { animation: none !important; }
}

/* r149: Central-only decorative paint reduction. Keep media pixels, content,
   interactive states, layout, theme colours, and Restaurant rendering intact. */

/* The shared theme is injected after this stylesheet and uses !important.
   Include its theme attribute plus the Central scope to win that exact rule. */
body[data-interface-mode="central"] :is(#appShell, .auth-screen, .auth, #app)::after,
html[data-plove-theme] body[data-interface-mode="central"] :is(#appShell, .auth-screen, .auth, #app)::after {
  display: none !important;
  animation: none !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* Only the registered decorative background wrappers, never img/video nodes. */
body[data-interface-mode="central"] [data-parallax-scene] .parallax-layer[data-parallax-depth] {
  animation: none !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* Decorative card sheen and home orbits need no moving composited layer. */
body[data-interface-mode="central"] :is(.panel, .toolbar-card, .central-home-card, .overview-card)::after,
body[data-interface-mode="central"] .central-home-pattern::before,
body[data-interface-mode="central"] .central-home-pattern::after {
  animation: none !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* Remove expensive translucent-surface sampling without changing the chosen
   light/dark palette, focus styles, dimensions, or the elements inside cards. */
body[data-interface-mode="central"] :is(
  .topbar, .primary-nav, .settings-tabs, .auth-card, .auth-feature, .product-symbol,
  .panel, .overview-card, .settings-group, .step-card, .toolbar-card, .stat-box,
  .hint-strip, .browser-live-empty, .browser-live-card, .network-camera-card,
  .employee-profile-panel, .employee-actions-panel, .hygiene-metric,
  .hygiene-readiness-group, .hygiene-ai-panel, .hygiene-ai-card,
  .central-home-hero, .central-home-summary, .central-home-card, .central-home-person
),
body[data-interface-mode="central"] :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea
) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* r150 Central layout repairs. Append after r149. The shared theme follows
   this asset, so only its conflicting !important rules are overridden with
   a more specific Central selector. No camera/media or verdict logic changes. */

/* These are decorative wrappers, not evidence thumbnails or video surfaces. */
html[data-plove-theme] body[data-interface-mode="central"] .geometric-scene[aria-hidden="true"],
html[data-plove-theme] body[data-interface-mode="central"] .app-ambient-scene,
html[data-plove-theme] body[data-interface-mode="central"] .central-home-pattern:not(.central-home-people) {
  display: none !important;
}

body[data-interface-mode="central"] :is(.content, .layout, .tab-panel, .central-home,
  .central-home-copy, .central-home-people, .auth-intro, .auth-copy, .central-page-meta) {
  min-width: 0;
  max-width: 100%;
}

body[data-interface-mode="central"] .central-home-hero {
  min-height: 0;
  padding: clamp(20px, 3vw, 36px);
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, .7fr);
  gap: 24px;
}

body[data-interface-mode="central"] .central-home-copy h1,
body[data-interface-mode="central"] .auth-copy h1 {
  width: auto;
  min-width: 0;
  max-width: 100%;
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.12;
  letter-spacing: -.035em;
  white-space: normal;
  overflow-wrap: anywhere;
  text-shadow: none;
}

body[data-interface-mode="central"] .central-page-title {
  max-width: 100%;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

body[data-interface-mode="central"] :is(.central-home-copy, .auth-copy) p {
  max-width: 65ch;
  font-size: 15px;
  overflow-wrap: anywhere;
}

/* A hover transform formerly moved the border/icon into the nav clip. */
html[data-plove-theme] body[data-interface-mode="central"] .primary-nav .nav-button,
html[data-plove-theme] body[data-interface-mode="central"] .primary-nav .nav-button:hover,
html[data-plove-theme] body[data-interface-mode="central"] .primary-nav .nav-button:active {
  transform: none;
  flex: 0 0 auto;
  white-space: normal;
  overflow: visible;
  min-width: 0;
  height: auto;
  line-height: 1.4;
}

body[data-interface-mode="central"] .primary-nav .central-nav-icon {
  flex: 0 0 20px;
  overflow: visible;
}

body[data-interface-mode="central"] .brand-copy strong {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keep a readable exit label; do not use an icon-sized clipping box. */
html[data-plove-theme] body[data-interface-mode="central"] .top-actions .logout-button {
  width: auto;
  min-width: 84px;
  height: auto;
  font-size: 12px !important;
  overflow: visible;
}

html[data-plove-theme] body[data-interface-mode="central"] .top-actions .logout-button::before {
  content: none;
  display: none;
}

body[data-interface-mode="central"] .top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: auto;
  min-width: 0;
}

/* Preserve the native-pilot link when r149 is present. Inline role-based
   hiding continues to win: never bypass permission visibility with !important. */
body[data-interface-mode="central"] .top-actions #nativePilotLink {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
}

/* Eleven arrival columns now include departure time/photo. The old theme
   squeezed them into a nine-column fixed layout. Use a bounded scroller and
   explicit widths rather than clipping the final actions. Colspan AI rows
   keep their own width and cannot enlarge every regular column. */
html[data-plove-theme] body[data-interface-mode="central"] #appShell #arrivalsPanel > .table-wrap {
  width: auto;
  max-width: calc(100% - 24px);
  overflow-x: auto !important;
  scrollbar-gutter: stable;
}

html[data-plove-theme] body[data-interface-mode="central"] #appShell #arrivalsPanel .arrivals-table {
  width: 100% !important;
  min-width: 1600px !important;
  table-layout: fixed !important;
}

html[data-plove-theme] body[data-interface-mode="central"] #appShell #arrivalsPanel .arrivals-table :is(th, td:not([colspan])) {
  display: table-cell;
  min-width: 0 !important;
  width: auto !important;
  padding: 10px 8px;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

html[data-plove-theme] body[data-interface-mode="central"] #appShell #arrivalsPanel .arrivals-table :is(th, td:not([colspan])):nth-child(5) {
  width: 160px !important;
}

html[data-plove-theme] body[data-interface-mode="central"] #appShell #arrivalsPanel .arrivals-table :is(th, td:not([colspan])):nth-child(6) {
  width: 245px !important;
}

html[data-plove-theme] body[data-interface-mode="central"] #appShell #arrivalsPanel .arrivals-table :is(th, td:not([colspan])):last-child {
  width: 154px !important;
}

html[data-plove-theme] body[data-interface-mode="central"] #appShell #arrivalsPanel .arrival-row-actions {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  min-width: 0 !important;
  max-width: 100%;
}

html[data-plove-theme] body[data-interface-mode="central"] #appShell #arrivalsPanel .arrival-row-actions .arrival-action {
  width: 100%;
  min-width: 0 !important;
  max-width: 100%;
  min-height: 36px;
  height: auto;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
}

html[data-plove-theme] body[data-interface-mode="central"] #appShell #arrivalsPanel .hygiene-status-stack,
html[data-plove-theme] body[data-interface-mode="central"] #appShell #arrivalsPanel .arrival-employee {
  min-width: 0;
  max-width: 100%;
}

body[data-interface-mode="central"] .hygiene-check-toggle {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  white-space: normal;
  line-height: 1.4;
}

body[data-interface-mode="central"] .hygiene-check-toggle input {
  flex: 0 0 16px;
}

@media (min-width: 768px) {
  /* Two deliberately sized rows keep every nav item reachable at 125–200%
     browser zoom without centered-overflow hiding the first/last buttons. */
  html[data-plove-theme] body[data-interface-mode="central"] .topbar-inner {
    min-height: 100px;
    height: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
  }
  html[data-plove-theme] body[data-interface-mode="central"] .primary-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow: visible;
    padding: 3px;
    gap: 5px;
  }
  body[data-interface-mode="central"] .top-actions {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 1024px) {
  body[data-interface-mode="central"] .auth-screen {
    grid-template-columns: minmax(0, 620px);
  }
}

@media (max-width: 900px) {
  body[data-interface-mode="central"] .central-home-hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  /* The existing JS toggle/keyboard controls are kept, including closed-menu
     visibility. Only its open-menu padding and overflowing labels are repaired. */
  html[data-plove-theme] body[data-interface-mode="central"].central-nav-open .primary-nav {
    padding: 5px;
  }
  html[data-plove-theme] body[data-interface-mode="central"] .primary-nav .nav-button {
    width: 100%;
    min-width: 0;
  }
  body[data-interface-mode="central"] .top-actions #nativePilotLink {
    padding-inline: 6px;
    font-size: 11px;
  }
  body[data-interface-mode="central"] .brand-copy {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  body[data-interface-mode="central"] .brand {
    gap: 8px;
    overflow: hidden;
  }
}