/*
 * openX CRM Canonical Stylesheet
 * 2026-03 hard reset build
 * Single source of truth: shell + workspace + login + calendar
 */

:root {
  --ox-font-sans: "Roboto", Arial, sans-serif;
  --ox-font-nav: "Roboto", Arial, sans-serif;
  --ox-font-display: "Roboto", Arial, sans-serif;

  --ox-type-body-size: 16px;
  --ox-type-body-line: 1.5;
  --ox-type-body-weight: 400;
  --ox-type-label-size: 0.75rem;
  --ox-type-label-line: 1.333;
  --ox-type-label-weight: 500;
  --ox-type-label-track: 0.055em;
  --ox-type-button-size: 1rem;
  --ox-type-button-line: 1.2;
  --ox-type-button-weight: 700;
  --ox-type-input-size: 1rem;
  --ox-type-input-line: 1.5;
  --ox-type-input-weight: 400;
  --ox-type-table-head-size: 0.75rem;
  --ox-type-table-head-line: 1.333;
  --ox-type-table-head-weight: 700;
  --ox-type-table-head-track: 0.055em;
  --ox-type-table-size: 0.9375rem;
  --ox-type-table-line: 1.5;
  --ox-type-table-weight: 400;
  --ox-type-title-1-size: clamp(2rem, 1.62rem + 1.05vw, 2.5rem);
  --ox-type-title-1-line: 1.2;
  --ox-type-title-1-weight: 700;
  --ox-type-title-2-size: clamp(1.5rem, 1.35rem + 0.36vw, 1.75rem);
  --ox-type-title-2-line: 1.25;
  --ox-type-title-2-weight: 700;
  --ox-type-title-3-size: clamp(1.25rem, 1.18rem + 0.2vw, 1.375rem);
  --ox-type-title-3-line: 1.3;
  --ox-type-title-3-weight: 700;
  --ox-type-kicker-size: 0.75rem;
  --ox-type-kicker-line: 1.333;
  --ox-type-kicker-weight: 700;
  --ox-type-kicker-track: 0.075em;
  --ox-type-stat-size: clamp(1.4rem, 1.05rem + 0.7vw, 2rem);
  --ox-type-stat-line: 1.15;
  --ox-type-stat-weight: 700;

  --ox-bg-app: #eceff3;
  --ox-bg-surface: #f4f6fa;
  --ox-bg-surface-soft: #f8f9fc;
  --ox-primary: #d47a1f;
  --ox-primary-hover: #bf6815;
  --ox-primary-soft: #ffe7cb;
  --ox-text-strong: #101824;
  --ox-text-default: #1f2937;
  --ox-text-muted: #67788e;
  --ox-border: #d9e0e9;
  --ox-icon-muted: #7a8aa0;

  --ox-bg-0: var(--ox-bg-app);
  --ox-bg-1: #f1f4f8;
  --ox-bg-2: #e8edf3;
  --ox-hero-glow: rgba(212, 122, 31, 0.1);

  --ox-surface-0: #f7f9fc;
  --ox-surface-1: #fbfcfd;
  --ox-surface-2: #f1f5f9;

  --ox-text-0: var(--ox-text-strong);
  --ox-text-1: var(--ox-text-default);
  --ox-text-2: var(--ox-text-muted);
  --ox-text-inverse: #f8fafc;

  --ox-border-soft: rgba(255, 255, 255, 0.68);
  --ox-border-strong: rgba(255, 255, 255, 0.76);

  --ox-shadow-micro: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 10px rgba(15, 23, 42, 0.06);
  --ox-shadow-soft: 0 4px 12px rgba(15, 23, 42, 0.07);
  --ox-shadow-card: 0 8px 20px rgba(15, 23, 42, 0.08);
  --ox-shadow-float: 0 14px 28px rgba(15, 23, 42, 0.12);
  --ox-panel-radius: 16px;
  --ox-panel-padding: var(--ox-space-4);
  --ox-panel-border: 1px solid rgba(184, 199, 219, 0.48);
  --ox-panel-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);

  --ox-accent: var(--ox-primary);
  --ox-accent-soft: var(--ox-primary-soft);
  --ox-success: #16a34a;
  --ox-warning: #d97706;
  --ox-danger: #dc2626;
  --ox-warning-bg: #fffbeb;
  --ox-warning-border: #fde68a;
  --ox-warning-text: #92400e;

  --ox-radius-xs: 8px;
  --ox-radius-sm: 12px;
  --ox-radius-md: 16px;
  --ox-radius-lg: 20px;
  --ox-radius-xl: 24px;

  --ox-space-1: 4px;
  --ox-space-2: 8px;
  --ox-space-3: 12px;
  --ox-space-4: 16px;
  --ox-space-5: 20px;
  --ox-space-6: 24px;
  --ox-space-7: 32px;

  --ox-shell-topbar-h: 70px;
  --ox-shell-sidebar-w: 252px;
  --ox-topbar-h: var(--ox-shell-topbar-h);
  --ox-sidebar-w: var(--ox-shell-sidebar-w);
  --ox-content-max: 1440px;
  --auth-vh: 100dvh;

  --ox-z-topbar: 80;
  --ox-z-drawer: 120;
  --ox-z-toast: 140;
  --ox-z-tooltip: 150;

  --ox-trans-fast: 140ms ease;
  --ox-trans-mid: 220ms ease;

  --ox-neu-base: #e8edf4;
  --ox-neu-raised-top: #f2f5fa;
  --ox-neu-raised-bottom: #e5ebf3;
  --ox-neu-pressed-top: #e2e8f1;
  --ox-neu-pressed-bottom: #e8edf5;
  --ox-neu-hi: rgba(255, 255, 255, 0.92);
  --ox-neu-hi-soft: rgba(255, 255, 255, 0.8);
  --ox-neu-lo: rgba(159, 173, 193, 0.34);
  --ox-neu-lo-soft: rgba(159, 173, 193, 0.24);
  --ox-neu-raised-sm: -4px -4px 9px var(--ox-neu-hi), 6px 6px 12px var(--ox-neu-lo-soft);
  --ox-neu-raised-md: -7px -7px 16px var(--ox-neu-hi), 11px 11px 22px var(--ox-neu-lo);
  --ox-neu-raised-lg: -10px -10px 22px rgba(255, 255, 255, 0.95), 15px 15px 30px rgba(159, 173, 193, 0.36);
  --ox-neu-inset-sm: inset 3px 3px 7px rgba(159, 173, 193, 0.36), inset -3px -3px 7px rgba(255, 255, 255, 0.92);
  --ox-neu-inset-md: inset 4px 4px 10px rgba(159, 173, 193, 0.38), inset -4px -4px 10px rgba(255, 255, 255, 0.95);
}

/* 2026-04-26 Google measurement admin workbench */
.settings-google-workbench {
  display: grid;
  gap: 16px;
}

.settings-google-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 16px;
  align-items: stretch;
  padding: 22px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #f7fafc 62%, #eef6ff 100%);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.07);
}

.settings-google-eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
}

.settings-google-hero h1,
.settings-google-card h2,
.settings-google-form-section h2 {
  margin: 0;
  color: #0f172a;
  letter-spacing: 0;
}

.settings-google-hero h1 {
  margin-top: 10px;
  font-size: 30px;
  line-height: 1.1;
}

.settings-google-hero p,
.settings-google-card p,
.settings-google-form-section p {
  margin: 8px 0 0;
  color: #64748b;
}

.settings-google-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.settings-google-hero__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 12px;
  background: #ffffff;
}

.settings-google-hero__panelLabel {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.settings-google-hero__panel strong {
  color: #0f172a;
  font-size: 24px;
}

.settings-google-two-col {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 16px;
}

.settings-google-card,
.settings-google-form-section {
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  background: #ffffff;
}

.settings-google-card__head,
.settings-google-form-section__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.settings-google-card h2,
.settings-google-form-section h2 {
  font-size: 20px;
}

.settings-google-checklist {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.settings-google-checkitem {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: #f8fafc;
}

.settings-google-checkitem.is-ready {
  background: #f0fdf4;
  border-color: rgba(22, 163, 74, 0.2);
}

.settings-google-checkitem.is-missing {
  background: #fff7ed;
  border-color: rgba(234, 88, 12, 0.22);
}

.settings-google-checkitem__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 900;
}

.settings-google-checkitem strong,
.settings-google-checkitem code {
  display: block;
}

.settings-google-checkitem code {
  width: fit-content;
  max-width: 100%;
  margin-top: 5px;
  padding: 4px 7px;
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  white-space: normal;
  overflow-wrap: anywhere;
}

.settings-google-payload {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.settings-google-payload__row {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(150px, 1fr) minmax(0, 1.5fr);
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.settings-google-payload__row:last-child {
  border-bottom: 0;
}

.settings-google-payload__row code,
.settings-google-payload__row strong,
.settings-google-payload__row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.settings-google-copy-input {
  margin-top: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.settings-google-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.settings-google-steps span {
  padding: 7px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.settings-google-form {
  display: grid;
  gap: 16px;
}

.settings-google-form-section {
  scroll-margin-top: 90px;
}

.settings-google-toggle {
  min-height: 44px;
  align-items: center;
}

.settings-google-advanced {
  margin-top: 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 12px;
}

.settings-google-advanced summary {
  cursor: pointer;
  color: #1d4ed8;
  font-weight: 800;
}

.settings-google-note {
  padding: 12px 14px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 10px;
  background: #eff6ff;
  color: #1e3a8a;
}

@media (max-width: 900px) {
  .settings-google-hero,
  .settings-google-two-col,
  .settings-google-payload__row {
    grid-template-columns: 1fr;
  }

  .settings-google-hero {
    padding: 16px;
  }

  .settings-google-hero h1 {
    font-size: 24px;
  }

  .settings-google-card__head,
  .settings-google-form-section__head {
    flex-direction: column;
  }
}

html,
body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  background: var(--ox-bg-app);
  background-color: var(--ox-bg-app);
  overscroll-behavior-y: none;
}

body {
  min-height: 100vh;
  font-family: var(--ox-font-sans);
  font-size: var(--ox-type-body-size);
  color: var(--ox-text-0);
  background: var(--ox-bg-app);
  overflow-x: clip;
  line-height: var(--ox-type-body-line);
  font-weight: var(--ox-type-body-weight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: var(--ox-accent);
  text-decoration: none;
}

a:hover {
  color: var(--ox-primary-hover);
}

code,
pre,
kbd,
samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

hr,
.wx-sep {
  border: 0;
  border-top: 1px solid var(--ox-border-soft);
  margin: var(--ox-space-4) 0;
}

[hidden] {
  display: none !important;
}

/* Utilities */
.h1,
.h2,
.h3 {
  margin: 0;
  color: var(--ox-text-0);
  line-height: 1.2;
}

.h1 {
  font-family: var(--ox-font-display);
  font-size: var(--ox-type-title-1-size);
  font-weight: var(--ox-type-title-1-weight);
  letter-spacing: normal;
  line-height: var(--ox-type-title-1-line);
}

.h2 {
  font-family: var(--ox-font-display);
  font-size: var(--ox-type-title-2-size);
  font-weight: var(--ox-type-title-2-weight);
  line-height: var(--ox-type-title-2-line);
  letter-spacing: normal;
}

.h3 {
  font-family: var(--ox-font-sans);
  font-size: var(--ox-type-title-3-size);
  font-weight: var(--ox-type-title-3-weight);
  line-height: var(--ox-type-title-3-line);
  letter-spacing: normal;
}

.kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: var(--ox-type-kicker-track);
  font-size: var(--ox-type-kicker-size);
  line-height: var(--ox-type-kicker-line);
  font-weight: var(--ox-type-kicker-weight);
  color: #64748b;
}

.sub,
.muted,
.wx-label,
.label {
  color: var(--ox-text-2);
}

.strong,
strong {
  color: var(--ox-text-0);
  font-weight: 700;
}

.tr {
  text-align: right;
}

.mt-4 { margin-top: var(--ox-space-1); }
.mt-8 { margin-top: var(--ox-space-2); }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: var(--ox-space-3); }
.mt-16 { margin-top: var(--ox-space-4); }
.mt-20 { margin-top: var(--ox-space-5); }
.mt-24 { margin-top: var(--ox-space-6); }

/* Shell layout */
.ox-shell-root {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #ffffff 0%, var(--ox-bg-app) 100%);
  overflow-x: clip;
}

.ox-shell-topbar {
  position: sticky;
  top: 0;
  z-index: var(--ox-z-topbar);
  min-height: var(--ox-topbar-h);
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 2fr) minmax(260px, auto);
  align-items: center;
  gap: var(--ox-space-4);
  padding: calc(var(--ox-space-2) + env(safe-area-inset-top)) clamp(18px, 2vw, 28px) var(--ox-space-2);
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(236, 240, 245, 0.94), rgba(236, 240, 245, 0.94));
  backdrop-filter: none;
  box-shadow: none;
}

.ox-shell-topbar::after {
  content: none;
}

.ox-shell-topbar__left,
.ox-shell-topbar__right {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ox-shell-topbar__left {
  justify-content: flex-start;
}

.ox-shell-topbar__center {
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ox-shell-topbar__center-extra {
  width: 100%;
  min-width: 0;
}

.ox-topbar-dashboard-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
}

.ox-topbar-dashboard-controls__period {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.ox-topbar-dashboard-controls__label {
  font-size: var(--ox-type-label-size);
  letter-spacing: var(--ox-type-label-track);
  line-height: var(--ox-type-label-line);
  text-transform: uppercase;
  color: #64748b;
  font-weight: var(--ox-type-label-weight);
  white-space: nowrap;
}

.wx-period-toolbar--topbar {
  justify-content: flex-start;
  gap: 8px;
}

.wx-period-pill--topbar {
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.875rem;
  line-height: 1.25;
  font-weight: 500;
}

.wx-mode-toggle-form--topbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: linear-gradient(180deg, rgba(251, 253, 255, 0.95), rgba(243, 248, 252, 0.92));
  box-shadow: var(--ox-shadow-micro);
}

.wx-mode-toggle-form--topbar .wx-mode-switch__text {
  font-size: 0.875rem;
  line-height: 1.3;
  white-space: nowrap;
}

.wx-mode-toggle-form--topbar .wx-mode-toggle-state {
  font-size: var(--ox-type-label-size);
  line-height: var(--ox-type-label-line);
  font-weight: var(--ox-type-label-weight);
  white-space: nowrap;
}

.ox-shell-topbar-head {
  min-width: 0;
}

.ox-shell-topbar-head__title {
  margin: 0;
  color: var(--ox-text-0);
  font-family: var(--ox-font-display);
  font-size: var(--ox-type-title-2-size);
  font-weight: var(--ox-type-title-2-weight);
  letter-spacing: normal;
  line-height: var(--ox-type-title-2-line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

body.ox-topbar-title-hidden .ox-shell-topbar {
  grid-template-columns: minmax(180px, 1fr) auto;
}

body.ox-topbar-title-hidden .ox-shell-topbar__center {
  display: none;
}

.side-mob-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.94));
  color: #334155;
  cursor: pointer;
  box-shadow: var(--ox-shadow-soft);
}

.ox-shell-topbar__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 6px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.94));
  box-shadow: var(--ox-shadow-soft);
}

.ox-shell-topbar__brand-logo {
  display: block;
  width: clamp(124px, 9vw, 146px);
  height: auto;
}

.ox-shell-topbar__icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  background: linear-gradient(180deg, rgba(251, 253, 255, 0.95), rgba(243, 248, 253, 0.92));
  color: #344457;
  box-shadow: var(--ox-shadow-micro);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.ox-shell-topbar__icon-btn:hover,
.ox-shell-topbar__icon-btn:focus-visible {
  color: #1f2a39;
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: var(--ox-shadow-soft);
  transform: translateY(-1px);
}

.ox-shell-topbar__icon-btn:focus-visible {
  outline: 0;
}

.ox-shell-topbar__icon-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.ox-shell-topbar__context,
.ox-shell-topbar__tenant,
.ox-shell-topbar__switcher,
.ox-shell-topbar__profile-toggle {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background: linear-gradient(180deg, rgba(251, 253, 255, 0.94), rgba(244, 248, 252, 0.9));
  color: #334155;
  min-height: 36px;
  box-shadow: var(--ox-shadow-micro);
}

.ox-shell-topbar__context {
  padding: 0;
  box-shadow: var(--ox-shadow-micro);
}

.ox-shell-topbar__switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
}

.ox-shell-topbar__switcher-select,
.ox-shell-topbar__switcher-btn {
  border: 0;
  background: transparent;
  color: #334155;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.3;
  font-weight: 500;
  min-height: 28px;
  border-radius: 999px;
}

.ox-shell-topbar__switcher-select {
  min-width: 120px;
  padding: 0 9px;
  appearance: none;
}

.ox-shell-topbar__switcher-btn {
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: linear-gradient(180deg, rgba(247, 250, 255, 0.95), rgba(240, 246, 251, 0.92));
  color: var(--ox-accent);
  box-shadow: var(--ox-shadow-micro);
  cursor: pointer;
}

.ox-shell-topbar__switcher-btn:hover {
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(240, 245, 251, 0.95));
  border-color: rgba(255, 255, 255, 0.82);
}

.ox-shell-topbar__profile {
  position: relative;
}

.ox-shell-topbar__profile-toggle {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  cursor: pointer;
  user-select: none;
}

.ox-shell-topbar__profile-caret {
  color: #72849a;
  font-size: 0.74rem;
  line-height: 1;
}

.ox-shell-topbar__profile-toggle::-webkit-details-marker {
  display: none;
}

.ox-shell-topbar__avatar {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff2e3, #ffd7ab);
  color: var(--ox-accent);
  font-size: 13px;
  font-weight: 700;
}

.ox-shell-topbar__profile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(280px, 86vw);
  padding: 12px;
  border-radius: 13px;
  border: 1px solid var(--ox-border-soft);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--ox-shadow-float);
  display: grid;
  gap: 8px;
}

.ox-shell-topbar__profile-menu-row {
  font-size: 0.84rem;
  color: var(--ox-text-1);
}

.ox-shell-topbar__profile-menu-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ox-shell-topbar__profile-link,
.ox-shell-topbar__logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid var(--ox-border-soft);
  background: var(--ox-bg-surface-soft);
  color: var(--ox-text-default);
  font-size: 0.8rem;
}

.ox-shell-topbar__logout-form {
  margin: 0;
}

.app {
  width: 100%;
  min-height: calc(100vh - var(--ox-topbar-h));
  display: grid;
  grid-template-columns: minmax(190px, 212px) minmax(0, 1fr);
  align-items: start;
  gap: 0;
  margin: 0;
  padding: 8px 18px 28px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ox-sidebar {
  position: sticky;
  top: calc(var(--ox-topbar-h) + 8px);
  max-height: calc(100vh - var(--ox-topbar-h) - 24px);
  height: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--ox-space-3);
  margin: 0;
  padding: 14px 16px 18px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.ox-sidebar__brand-wrap {
  display: flex;
  justify-content: center;
  padding: 10px 8px 14px;
}

.ox-sidebar__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  width: min(100%, 176px);
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ox-sidebar__brand-logo {
  width: min(100%, 162px);
  height: auto;
}

@media (min-width: 1025px) {
  .ox-sidebar__brand-wrap {
    display: none;
  }

  .ox-sidebar {
    grid-template-rows: minmax(0, 1fr) auto;
    padding-top: 8px;
  }
}

.ox-nav {
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.ox-nav::-webkit-scrollbar {
  width: 7px;
}

.ox-nav::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(177, 205, 230, 0.3);
}

.ox-nav-group {
  display: grid;
  gap: 8px;
  padding: 1px 0;
  border: 0;
  background: transparent;
}

.ox-sep {
  margin: 8px 0 4px;
  padding: 3px 14px 5px;
  border: 0;
  color: var(--ox-icon-muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.55rem;
  font-weight: 700;
  opacity: 0.52;
}

.ox-nav-group-items {
  display: grid;
  gap: 6px;
}

.ox-item,
.ox-sidebar-action-btn {
  --ox-nav-bg: transparent;
  --ox-nav-border: transparent;
  --ox-nav-text: #4b5d74;

  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 0;
  border-radius: 14px;
  border: 1px solid var(--ox-nav-border);
  background: var(--ox-nav-bg);
  box-shadow: 0 0 0 rgba(15, 23, 42, 0);
  color: var(--ox-nav-text);
  font-family: var(--ox-font-nav);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.004em;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: transform var(--ox-trans-fast), box-shadow var(--ox-trans-fast), border-color var(--ox-trans-fast), background var(--ox-trans-fast);
}

.ox-item:hover,
.ox-sidebar-action-btn:hover {
  transform: none;
  border-color: rgba(214, 224, 236, 0.62);
  background: rgba(255, 255, 255, 0.28);
  color: var(--ox-text-default);
  box-shadow: none;
}

.ox-item.is-active {
  border-color: rgba(255, 255, 255, 0.84);
  box-shadow: inset 3px 3px 8px rgba(188, 198, 211, 0.7), inset -3px -3px 8px rgba(255, 255, 255, 0.94), 0 1px 2px rgba(255, 255, 255, 0.68);
  background: linear-gradient(180deg, rgba(233, 238, 245, 0.98), rgba(225, 231, 239, 0.96));
  color: var(--ox-accent);
}

.ox-item.is-active::before {
  content: none;
}

.ox-item--child {
  min-height: 38px;
  font-size: 0.86rem;
  opacity: 0.96;
}

.ox-item--locked,
.ox-item--soon {
  opacity: 0.62;
  cursor: default;
}

.ox-item-ico,
.ox-item-ico svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.ox-item-ico svg {
  color: currentColor;
}

.ox-item-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ox-item-badge {
  margin-left: auto;
  min-width: 19px;
  min-height: 19px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  font-size: 0.67rem;
  font-weight: 700;
}

.ox-item-badge--chat {
  background: #dc2626;
  color: #fff;
}

.ox-sidebar-v2__footer {
  padding-top: 8px;
}

.ox-sidebar-actions,
.ox-sidebar-action-form {
  margin: 0;
}

.ox-sidebar-action-btn {
  justify-content: center;
  font-size: 0.84rem;
}

.ox-sidebar-action-btn__ico {
  display: inline-flex;
}

.ox-sidebar-action-btn__label {
  white-space: nowrap;
}

.main {
  min-width: 0;
  width: 100%;
  padding: clamp(14px, 1.6vw, 24px) clamp(8px, 1.2vw, 18px) 30px clamp(10px, 1.3vw, 18px);
  display: block;
  position: relative;
  background: transparent;
}

.main::before,
.main::after {
  content: none !important;
}

.main > * {
  width: 100%;
  max-width: min(100%, 1840px);
  margin-inline: auto;
}

/* Global overlays and misc */
#oxBackdrop,
.ox-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ox-z-drawer) - 1);
  background: rgba(4, 11, 20, 0.46);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ox-trans-mid);
}

body.ox-mobile-drawer-open #oxBackdrop,
body.ox-mobile-drawer-open .ox-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.ox-mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--ox-z-drawer);
  pointer-events: none;
  visibility: hidden;
}

.ox-mobile-drawer__panel {
  width: 100vw;
  max-width: 100vw;
  height: 100%;
  margin-left: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: calc(var(--ox-space-4) + env(safe-area-inset-top)) var(--ox-space-4) calc(var(--ox-space-4) + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 254, 0.96)),
    var(--ox-bg-surface);
  background-color: var(--ox-bg-surface);
  transform: translateX(100%);
  transition: transform var(--ox-trans-mid);
  box-shadow: var(--ox-shadow-float);
}

.ox-mobile-drawer__head,
.ox-mobile-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ox-space-3);
}

.ox-mobile-drawer__head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 254, 0.94));
}

.ox-mobile-drawer__brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ox-mobile-drawer__brand-logo {
  width: 120px;
  height: auto;
}

.ox-mobile-drawer__brand-meta {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ox-mobile-drawer__title {
  font-size: 1rem;
  font-weight: 720;
  color: var(--ox-text-0);
}

.ox-mobile-drawer__subtitle {
  color: var(--ox-text-2);
  font-size: 0.78rem;
}

.ox-mobile-drawer__close {
  min-width: 38px;
  min-height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.95);
  color: #334155;
}

.ox-mobile-drawer__body {
  min-height: 0;
  overflow-y: auto;
  padding: var(--ox-space-3) 0;
}

body.ox-mobile-drawer-open .ox-mobile-drawer {
  pointer-events: auto;
  visibility: visible;
}

body.ox-mobile-drawer-open .ox-mobile-drawer__panel {
  transform: translateX(0);
}

.ox-mobile-drawer__nav {
  display: grid;
  gap: 16px;
}

.ox-mobile-drawer__nav .ox-nav-group {
  gap: 8px;
}

.ox-mobile-drawer__nav .ox-sep {
  padding-inline: 4px;
  font-size: 13px;
  letter-spacing: 0.18em;
}

.ox-mobile-drawer__nav .ox-item {
  min-height: 54px;
  padding: 14px 18px;
  border-radius: 20px;
  font-size: 0.98rem;
  font-weight: 620;
}

.ox-mobile-drawer__nav .ox-item-ico,
.ox-mobile-drawer__nav .ox-item-ico svg {
  width: 20px;
  height: 20px;
}

.ox-mobile-drawer__footer {
  padding-top: 12px;
  background: linear-gradient(180deg, rgba(246, 249, 254, 0.1), rgba(246, 249, 254, 0.94));
}

.ox-mobile-drawer__footer .ox-sidebar-action-btn {
  min-height: 54px;
  justify-content: flex-start;
  padding-inline: 18px;
  border-radius: 20px;
  font-size: 0.94rem;
}

.ox-toast {
  display: none;
}

.ox-tooltip {
  position: fixed;
  z-index: var(--ox-z-tooltip);
  transform: translateY(-50%);
  max-width: min(320px, 80vw);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.93);
  color: #f8fafc;
  font-size: 0.74rem;
  line-height: 1.3;
  box-shadow: 0 10px 24px rgba(3, 10, 20, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ox-trans-fast);
}

.ox-tooltip--visible {
  opacity: 1;
}

/* Global flash toasts (legacy non-shell context only) */
body:not(.ox-shell-canonical) .ox-global-toasts {
  position: fixed;
  z-index: var(--ox-z-toast);
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(380px, calc(100vw - 24px));
  display: grid;
  gap: 10px;
}

body:not(.ox-shell-canonical) .ox-global-toast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--ox-border-soft);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--ox-shadow-float), 0 1px 0 rgba(255, 255, 255, 0.75) inset;
}

body:not(.ox-shell-canonical) .ox-global-toast__body {
  font-size: 0.83rem;
  color: #334155;
}

body:not(.ox-shell-canonical) .ox-global-toast__close {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #f8fafd;
  color: #334155;
}

body:not(.ox-shell-canonical) .ox-global-toast--success {
  border-color: rgba(50, 154, 100, 0.36);
}

body:not(.ox-shell-canonical) .ox-global-toast--error {
  border-color: rgba(188, 71, 58, 0.42);
}

body:not(.ox-shell-canonical) .ox-global-toast--warning {
  border-color: rgba(185, 121, 46, 0.42);
}

body:not(.ox-shell-canonical) .ox-global-toast.is-hiding {
  opacity: 0;
  transform: translateY(6px);
}

/* Canonical content containers */
.settings-module,
.ox-admin-template,
.webshop-admin-module,
.wx-list-page,
.wx-products-page,
.wx-control-center,
.chat-module,
.calendar-module {
  width: 100%;
  min-width: 0;
}

.wx-list-center,
.wx-list-wrap,
.wx-orders-center,
.wx-settings-inner {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
}

.wx-list-center,
.wx-orders-center {
  display: grid;
  gap: 16px;
}

.wx-settings-inner {
  display: grid;
  gap: var(--ox-space-4);
}

.wx-workspace-body {
  gap: var(--ox-space-4);
}

.ox-shell-header-stack,
[data-ox-shell-header-stack] {
  display: none !important;
}

/* Generic surfaces */
.card,
.card-pad,
.wx-panel,
.settings-panel,
.wx-workspace-surface,
.wx-suite-section {
  border-radius: var(--ox-panel-radius);
  border: var(--ox-panel-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.96));
  box-shadow: var(--ox-panel-shadow);
}

.card,
.wx-panel,
.settings-panel,
.wx-workspace-surface,
.wx-suite-section {
  padding: var(--ox-panel-padding);
}

.card-pad {
  padding: var(--ox-panel-padding);
}

.settings-panel {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.settings-panel > * {
  min-width: 0;
}

.settings-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.settings-panel__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ox-text-0);
  overflow-wrap: anywhere;
}

.settings-panel__desc {
  margin: 0;
  color: var(--ox-text-2);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.settings-panel :is(.table-wrap, .table-auth-wrapper, .wx-table-wrap, .wx-workspace-table-wrap, .wx-responsive-table) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.settings-panel :is(table, .table, .wx-table) {
  max-width: 100%;
}

.settings-panel :is(th, td) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.settings-module :is(code, pre) {
  white-space: pre-wrap;
  word-break: break-word;
}

.wx-panel-head,
.wx-workspace-surface__head,
.wx-suite-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ox-space-3);
  margin-bottom: var(--ox-space-3);
}

.wx-panel-head-split {
  align-items: center;
}

.wx-panel-title,
.wx-workspace-surface__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 680;
  color: var(--ox-text-0);
}

.wx-workspace-surface__title--sm {
  font-size: 0.9rem;
}

.wx-panel-meta,
.wx-workspace-surface__meta,
.wx-suite-section__desc,
.wx-workspace-inline-actions__meta,
.wx-workspace-primary-actions__meta {
  color: var(--ox-text-2);
  font-size: 0.82rem;
}

.wx-workspace-surface__subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0;
}

/* Canonical workspace primitives */
.wx-panel-table,
.wx-workspace-page,
.wx-comm-workspace,
.wx-order-index,
.wx-two-col,
.wx-section {
  width: 100%;
  min-width: 0;
}

.wx-panel-body {
  min-width: 0;
}

.wx-suite-section--panel,
.wx-suite-section--hub {
  border-radius: var(--ox-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: linear-gradient(180deg, rgba(251, 253, 255, 0.96), rgba(245, 249, 253, 0.92));
  box-shadow: var(--ox-shadow-card);
}

.wx-suite-section__count {
  min-width: 24px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: none;
  color: #315271;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wx-suite-note,
.wx-note {
  border-radius: 12px;
  border: 1px solid rgba(149, 177, 204, 0.46);
  background: rgba(246, 251, 255, 0.92);
  color: #34506c;
  padding: 10px 12px;
  font-size: 0.83rem;
}

.wx-suite-note--warn {
  border-color: rgba(217, 119, 6, 0.38);
  background: var(--ox-warning-bg);
  color: var(--ox-warning-text);
}

.wx-workspace-alert--risk {
  border-color: rgba(217, 119, 6, 0.44);
}

.wx-workspace-alert__meta,
.wx-workspace-alert__meta span {
  font-size: 0.76rem;
  color: #92400e;
}

.wx-dashboard-chip {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: none;
  color: #324d68;
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.wx-dashboard-chip.is-ok {
  border-color: rgba(61, 159, 102, 0.38);
  background: rgba(229, 246, 237, 0.9);
  color: #1c7e50;
}

.wx-dashboard-chip.is-soft,
.wx-dashboard-chip.is-neutral {
  background: rgba(244, 248, 255, 0.84);
  color: #35506f;
}

.wx-dashboard-shell {
  display: grid;
  gap: 16px;
}

.wx-dashboard-shell__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.wx-dashboard-shell__left {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.wx-dashboard-shell__eyebrow {
  margin: 0;
  color: #7488a2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  font-weight: 700;
}

.wx-dashboard-shell__left {
  max-width: 30rem;
}

.wx-dashboard-shell__headline {
  margin: 0;
  color: var(--ox-text-strong);
  font-size: clamp(1.5rem, 1.16rem + 0.82vw, 2rem);
  line-height: 1.14;
  font-weight: 760;
  letter-spacing: -0.03em;
  max-width: 22ch;
}

.wx-dashboard-shell__title {
  margin: 0;
  color: var(--ox-text-strong);
  font-size: clamp(1.78rem, 1.32rem + 0.7vw, 2.26rem);
  line-height: 1.08;
  font-weight: 790;
  letter-spacing: -0.05em;
  max-width: 11ch;
}

.wx-dashboard-shell__subtitle {
  margin: 0;
  color: #5f738c;
  font-size: clamp(0.95rem, 0.9rem + 0.14vw, 1rem);
  line-height: 1.56;
  max-width: 32ch;
}

.wx-dashboard-shell__control-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #5b6f89;
  margin-right: 8px;
}

.wx-dashboard-meta {
  color: #61748d;
  font-size: 0.78rem;
  line-height: 1.48;
}

.wx-dashboard-shell__title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wx-info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(145, 170, 195, 0.52);
  background: rgba(248, 252, 255, 0.9);
  color: #4a6783;
  font-size: 0.73rem;
  font-weight: 700;
  cursor: help;
}

.wx-info-tip__icon {
  line-height: 1;
}

.wx-info-tip__bubble {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  min-width: 220px;
  max-width: min(340px, 70vw);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(145, 170, 195, 0.4);
  background: rgba(16, 28, 44, 0.96);
  color: #eef4ff;
  font-size: 0.74rem;
  line-height: 1.35;
  box-shadow: 0 10px 24px rgba(10, 19, 33, 0.32);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity var(--ox-trans-fast);
}

.wx-info-tip:hover .wx-info-tip__bubble,
.wx-info-tip:focus .wx-info-tip__bubble,
.wx-info-tip:focus-within .wx-info-tip__bubble {
  opacity: 1;
}

.wx-control-overview,
.wx-control-today,
.wx-control-inactive {
  display: grid;
  gap: 10px;
}

.wx-control-overview__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.wx-control-stat {
  min-height: 138px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background: linear-gradient(180deg, rgba(249, 252, 255, 0.96), rgba(243, 247, 252, 0.94));
  box-shadow: var(--ox-shadow-soft);
  padding: 22px 24px;
  display: grid;
  gap: 10px;
}

.wx-control-stat.is-primary {
  border-color: rgba(255, 255, 255, 0.58);
  background: linear-gradient(180deg, rgba(244, 249, 246, 0.96), rgba(238, 246, 242, 0.92));
}

.wx-control-stat.is-warn {
  border-color: rgba(255, 255, 255, 0.58);
  background: linear-gradient(180deg, rgba(251, 248, 242, 0.96), rgba(247, 241, 232, 0.92));
}

.wx-control-stat__label {
  color: #4d6883;
  font-size: 0.77rem;
  font-weight: 600;
}

.wx-control-stat__value {
  color: #142940;
  font-size: 2rem;
  line-height: 1;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.wx-control-stat__hint {
  color: #4f6780;
  font-size: 0.82rem;
}

.wx-control-tasklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.wx-control-task {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.95));
  box-shadow: var(--ox-shadow-soft);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.wx-control-task--warn {
  border-color: rgba(255, 255, 255, 0.88);
  background: linear-gradient(180deg, rgba(255, 249, 241, 0.99), rgba(252, 243, 229, 0.94));
}

.wx-control-task__text {
  min-width: 0;
}

.wx-control-task__title {
  font-weight: 700;
  color: #1f364f;
}

.wx-control-task__desc {
  font-size: 0.82rem;
}

.wx-control-task__link,
.wx-control-task__state {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 254, 0.94));
  box-shadow: var(--ox-shadow-micro);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #32516f;
  font-size: 0.8rem;
  font-weight: 650;
  white-space: nowrap;
}

.wx-control-fav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.wx-hub-card {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
  box-shadow: var(--ox-shadow-card);
  min-height: 106px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  color: inherit;
}

.wx-hub-card:hover {
  border-color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 251, 255, 0.96));
  box-shadow: var(--ox-shadow-float);
}

.wx-hub-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(244, 248, 255, 0.94));
  box-shadow: var(--ox-shadow-micro);
  color: #2f4d6b;
  display: grid;
  place-items: center;
}

.wx-hub-card__icon svg {
  width: 18px;
  height: 18px;
}

.wx-hub-card__body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.wx-hub-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wx-hub-card__title {
  color: #152a42;
  font-weight: 700;
}

.wx-hub-card__desc {
  font-size: 0.8rem;
}

.wx-module-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.wx-module-category {
  border-radius: 12px;
  border: 1px solid rgba(143, 172, 197, 0.44);
  background: rgba(254, 255, 255, 0.93);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.wx-module-category__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wx-module-category__title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1f384f;
}

.wx-module-category__count {
  min-width: 22px;
  min-height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(140, 169, 194, 0.54);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  font-size: 13px;
  font-weight: 700;
  color: #3a5772;
}

.wx-module-list {
  display: grid;
  gap: 8px;
}

.wx-module-row {
  border-radius: 10px;
  border: 1px solid rgba(144, 171, 197, 0.44);
  background: rgba(248, 252, 255, 0.9);
  padding: 9px 10px;
  color: inherit;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.wx-module-row:hover {
  border-color: rgba(186, 137, 94, 0.56);
  background: rgba(255, 250, 243, 0.9);
}

.wx-module-row.is-disabled {
  opacity: 0.85;
  pointer-events: auto;
}

.wx-module-row__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(143, 170, 196, 0.46);
  background: rgba(246, 251, 255, 0.94);
  color: #31516f;
  display: grid;
  place-items: center;
}

.wx-module-row__icon svg {
  width: 16px;
  height: 16px;
}

.wx-module-row__body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.wx-module-row__title {
  color: #1b334a;
  font-size: 0.85rem;
  font-weight: 700;
}

.wx-module-row__desc {
  color: #5b728a;
  font-size: 0.78rem;
}

.wx-module-row__tag {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(143, 169, 194, 0.56);
  background: rgba(243, 250, 255, 0.92);
  color: #385775;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.wx-module-row__tag.is-muted {
  color: #667b91;
}

.wx-dashboard-analytics {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.wx-dashboard-main {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.wx-dashboard-analytics > .wx-dashboard-main:only-child {
  grid-column: 1 / -1;
}

.wx-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.wx-kpi-grid--primary {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.wx-kpi-grid--dashboard {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.wx-kpi-card {
  min-height: 166px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(245, 249, 253, 0.92));
  box-shadow: var(--ox-shadow-card);
  padding: 24px 26px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
  align-content: start;
}

.wx-kpi-card--mini {
  min-height: 128px;
  border-radius: 18px;
  padding: 16px 18px;
  gap: 8px;
}

.wx-kpi-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wx-kpi-card:nth-child(4),
.wx-kpi-card:nth-child(5) {
  min-height: 138px;
}

@media (max-width: 1200px) {
  .wx-dashboard-analytics {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .wx-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
  }

  .wx-kpi-card {
    min-height: 150px;
    padding: 18px;
  }

  .wx-kpi-card--mini {
    min-height: 116px;
    padding: 14px 16px;
  }
}

@media (max-width: 640px) {
  .main {
    padding: 10px 8px 24px;
  }

  .wx-dashboard-analytics {
    gap: 12px;
  }

  .wx-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .wx-kpi-grid {
    grid-template-columns: 1fr;
  }

  .wx-kpi-card {
    min-height: 140px;
  }
}

.wx-kpi-strip {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: linear-gradient(180deg, rgba(250, 253, 255, 0.94), rgba(244, 248, 253, 0.9));
  box-shadow: var(--ox-shadow-soft);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.wx-kpi-strip__item {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding-right: 12px;
  border-right: 1px solid rgba(223, 231, 240, 0.48);
}

.wx-kpi-strip__item:last-child {
  padding-right: 0;
  border-right: 0;
}

.wx-kpi-strip__label {
  color: #61748d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wx-kpi-strip__value {
  color: #17304a;
  font-size: clamp(1.3rem, 1.08rem + 0.38vw, 1.7rem);
  font-weight: 760;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.wx-kpi-strip__hint {
  color: #5f738c;
  font-size: 0.82rem;
  line-height: 1.45;
}

.wx-kpi-label {
  color: #5d728a;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wx-kpi-num {
  color: #10263d;
  font-size: clamp(1.72rem, 1.26rem + 1vw, 2.65rem);
  font-weight: 780;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.wx-kpi-meta {
  min-height: 30px;
  display: grid;
  align-content: end;
  gap: 10px;
}

.wx-kpi-link {
  font-size: 0.76rem;
  color: #5c728b;
  text-decoration: none;
}

.wx-kpi-link:hover {
  color: #1f3d5b;
  text-decoration: underline;
}

.wx-kpi-foot {
  margin-top: 4px;
  min-height: 32px;
  width: fit-content;
  padding: 0 12px;
  border-radius: 999px;
  border: 0;
  background: rgba(241, 255, 247, 0.85);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
}

.wx-kpi-foot.is-up {
  color: #1d8a55;
}

.wx-kpi-foot.is-down {
  color: #b45337;
}

.wx-kpi-foot.is-neutral {
  color: #5d748a;
}

.wx-revenue-breakdown {
  display: grid;
  gap: 12px;
  padding: 24px 24px 22px;
  border-color: rgba(255, 255, 255, 0.42);
  background: linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(245, 249, 253, 0.92));
  box-shadow: var(--ox-shadow-card);
}

.wx-revenue-breakdown__rows {
  display: grid;
  gap: 0;
}

.wx-revenue-row {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid rgba(223, 231, 240, 0.56);
  background: transparent;
  box-shadow: none;
  padding: 16px 2px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
}

.wx-revenue-row__label {
  color: #2f4b67;
  font-size: 0.88rem;
  font-weight: 650;
}

.wx-revenue-row__value {
  color: #17304a;
  font-size: 1rem;
  font-weight: 700;
}

.wx-revenue-row__hint {
  grid-column: 1 / 2;
  font-size: 0.82rem;
}

.wx-revenue-row__delta {
  grid-column: 2 / 3;
  justify-self: end;
}

.wx-revenue-breakdown__meta {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(223, 231, 240, 0.56);
}

.wx-revenue-breakdown__meta-item {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid rgba(223, 231, 240, 0.56);
  background: transparent;
  box-shadow: none;
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.86rem;
  color: #2f4e6d;
}

.wx-revenue-breakdown__meta-item:last-child {
  border-bottom: 0;
}

.wx-revenue-breakdown__meta-item strong {
  font-size: 0.9rem;
}

.wx-revenue-breakdown__meta-item.is-warn {
  color: #8d5d3a;
}

.wx-revenue-breakdown__meta-item.is-ok {
  color: #226845;
}

.wx-insight-charts {
  display: grid;
  gap: 14px;
}

.wx-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.95fr);
  gap: 14px;
}

.wx-insight-card {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  background: rgba(248, 252, 255, 0.72);
  box-shadow: var(--ox-shadow-micro);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.wx-insight-card h3 {
  margin: 0;
  font-size: 0.95rem;
}

.wx-insight-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wx-trend-chart {
  height: 220px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
  gap: 8px;
  align-items: end;
}

.wx-trend-chart__point {
  display: grid;
  gap: 8px;
}

.wx-trend-chart__bars {
  height: 180px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
}

.wx-trend-chart__bar {
  width: 11px;
  border-radius: 8px 8px 3px 3px;
  min-height: 8px;
}

.wx-trend-chart__bar.is-orders {
  background: linear-gradient(180deg, #f5bc78, #d47a1f);
}

.wx-trend-chart__bar.is-revenue {
  background: linear-gradient(180deg, #9ec1ec, #5f87b8);
}

.wx-trend-chart__label {
  text-align: center;
  font-size: 0.68rem;
  color: #627791;
  white-space: nowrap;
}

.wx-chart-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.76rem;
  color: #536b84;
}

.wx-chart-dot {
  display: inline-flex;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-right: 4px;
}

.wx-chart-dot.is-orders {
  background: #d47a1f;
}

.wx-chart-dot.is-revenue {
  background: #5f87b8;
}

.wx-status-chart {
  display: grid;
  gap: 10px;
}

.wx-status-chart__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.wx-status-chart__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #2f4a65;
}

.wx-status-chart__track {
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  background: rgba(241, 247, 253, 0.88);
  overflow: hidden;
}

.wx-status-chart__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.wx-status-chart__fill.is-ok {
  background: linear-gradient(165deg, #8dd7b3, #3a9f66);
}

.wx-status-chart__fill.is-soft {
  background: linear-gradient(165deg, #c5d5ea, #8ba7c7);
}

.wx-status-chart__fill.is-warn {
  background: linear-gradient(165deg, #f1bc8f, #d47a1f);
}

.wx-status-chart__fill.is-accent {
  background: linear-gradient(165deg, #f5cf9f, #d9984d);
}

.wx-status-chart__value {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1c3956;
}

.wx-mode-toggle-form {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.wx-mode-toggle-form.is-disabled {
  opacity: 0.75;
}

.wx-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.wx-mode-switch__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.wx-mode-switch__track {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: linear-gradient(180deg, rgba(249, 252, 255, 0.96), rgba(241, 246, 251, 0.94));
  box-shadow: var(--ox-shadow-micro);
  position: relative;
  transition: all var(--ox-trans-fast);
}

.wx-mode-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 245, 250, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.72);
  transition: transform var(--ox-trans-fast);
}

.wx-mode-switch__input:checked + .wx-mode-switch__track {
  border-color: rgba(87, 162, 111, 0.62);
  background: linear-gradient(180deg, rgba(217, 241, 225, 0.96), rgba(203, 232, 214, 0.94));
}

.wx-mode-switch__input:checked + .wx-mode-switch__track .wx-mode-switch__thumb {
  transform: translateX(18px);
  border-color: rgba(72, 147, 98, 0.68);
}

.wx-mode-switch__text {
  color: #2f4d6b;
  font-size: 0.8rem;
  font-weight: 650;
}

.wx-mode-toggle-state {
  font-size: 0.78rem;
  color: #627990;
}

.wx-mode-toggle-state.is-on {
  color: #1d8553;
}

.wx-mode-toggle-state.is-off {
  color: #7a5231;
}

.wx-period-custom {
  border-top: 1px dashed rgba(142, 170, 196, 0.42);
  padding-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: end;
}

.wx-period-custom__field {
  display: grid;
  gap: 4px;
}

.wx-period-custom__field span {
  font-size: 0.75rem;
  color: #566f87;
  font-weight: 600;
}

.wx-filter-form {
  width: 100%;
  min-width: 0;
}

.wx-filter-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}

.wx-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.wx-field-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.wx-check {
  width: 28px;
  text-align: center;
}

.wx-col-check {
  width: 34px;
}

.wx-col-order {
  min-width: 118px;
}

.wx-col-customer {
  min-width: 270px;
}

.wx-col-status {
  min-width: 260px;
}

.wx-col-date {
  min-width: 150px;
}

.wx-col-total {
  min-width: 108px;
}

.wx-col-actions {
  min-width: 180px;
}

.wx-row-check {
  width: 16px;
  height: 16px;
}

.wx-order-code {
  letter-spacing: 0.01em;
  font-size: 0.93rem;
}

.wx-customer-cell {
  min-width: 0;
}

.wx-customer-name {
  font-size: 0.84rem;
  font-weight: 680;
  color: #193852;
}

.wx-customer-meta {
  margin-top: 2px;
  font-size: 0.77rem;
  line-height: 1.4;
}

.wx-customer-address {
  margin-top: 3px;
  font-size: 0.75rem;
  line-height: 1.35;
  word-break: break-word;
}

.wx-contact-sep {
  opacity: 0.6;
  margin: 0 5px;
}

.wx-status-cell {
  min-width: 0;
}

.wx-inline-status--emphasis {
  grid-template-columns: minmax(0, 1fr) auto;
}

.wx-date-cell {
  font-size: 0.79rem;
}

.wx-total-cell {
  font-size: 0.92rem;
}

.wx-row-actions__btn {
  min-width: 88px;
}

.wx-workspace-page--email,
.wx-workspace-page--templates,
.wx-comm-workspace--templates {
  display: grid;
  gap: 12px;
}

.wx-email-health-ok {
  color: #1d8755;
  font-weight: 700;
}

.wx-workspace-toolbar--compact {
  padding: 8px 10px;
}

.wx-toast {
  border-radius: 10px;
  border: 1px solid rgba(138, 168, 194, 0.48);
  background: rgba(248, 252, 255, 0.95);
  padding: 9px 10px;
}

.wx-actions-row,
.wx-inline-actions,
.wx-products-command-strip,
.wx-products-search-strip,
.wx-reorder-toolbar,
.wx-cmd-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wx-filter-submit {
  min-width: 92px;
}

.wx-switch,
.wx-switch-block {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wx-switch__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.wx-switch__track {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(141, 169, 195, 0.58);
  background: rgba(235, 243, 251, 0.94);
  position: relative;
}

.wx-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(142, 171, 196, 0.6);
  background: #fff;
  transition: transform var(--ox-trans-fast);
}

.wx-switch__input:checked + .wx-switch__track .wx-switch__thumb {
  transform: translateX(18px);
}

.wx-switch__text {
  font-size: 0.8rem;
  color: #3e5c78;
  font-weight: 600;
}

.wx-order-kv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.wx-order-kv-item {
  border-radius: 10px;
  border: 1px solid rgba(141, 170, 196, 0.44);
  background: rgba(248, 252, 255, 0.9);
  padding: 8px 10px;
  display: grid;
  gap: 4px;
}

.wx-order-chip {
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(141, 170, 196, 0.5);
  background: rgba(244, 250, 255, 0.92);
  color: #355473;
  font-size: 0.74rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.wx-settings-audit-chip {
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(141, 169, 195, 0.54);
  background: rgba(246, 251, 255, 0.95);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wx-settings-audit-chip__k {
  font-size: 0.7rem;
  color: #5d7690;
  font-weight: 600;
}

.wx-settings-audit-chip__v {
  font-size: 0.74rem;
  color: #2d4c6a;
  font-weight: 700;
}

.wx-billing-summary-card,
.wx-pe-card {
  border-radius: 12px;
  border: 1px solid rgba(142, 170, 196, 0.44);
  background: rgba(255, 255, 255, 0.93);
  padding: 10px 12px;
}

.wx-pe-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wx-attr {
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(141, 170, 196, 0.54);
  background: rgba(245, 251, 255, 0.94);
  color: #355372;
  font-size: 0.74rem;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
}

.wx-media-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wx-media-stat {
  font-size: 0.78rem;
  color: #45627e;
}

/* Media manager page */
.media-module-v2 .wx-list-center {
  gap: 14px;
}

.media-module-v2 .wx-media-kpi-grid {
  margin-top: 2px;
}

.media-module-v2 .wx-media-overview,
.media-module-v2 .wx-media-filters-card,
.media-module-v2 .wx-media-actionsbar,
.media-module-v2 .wx-media-folders,
.media-module-v2 .wx-media-toolbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(248, 251, 255, 0.97));
  border: 1px solid rgba(223, 231, 241, 0.88);
  box-shadow: var(--ox-shadow-micro);
}

.media-module-v2 .wx-media-overview {
  display: grid;
  gap: 10px;
}

.media-module-v2 .wx-media-overview__path {
  display: grid;
  gap: 8px;
}

.media-module-v2 .wx-media-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 0.8rem;
}

.media-module-v2 .wx-media-breadcrumb .sep {
  color: var(--ox-text-2);
}

.media-module-v2 .wx-media-overview__path-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.media-module-v2 .wx-media-overview__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.media-module-v2 .wx-media-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) repeat(2, minmax(170px, 210px)) auto;
  gap: 10px;
  align-items: end;
}

.media-module-v2 .wx-media-filter-field {
  display: grid;
  gap: 6px;
}

.media-module-v2 .wx-media-filter-field .label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #5f738b;
  letter-spacing: 0.02em;
}

.media-module-v2 .wx-media-filter-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.media-module-v2 .wx-media-actionsbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.media-module-v2 .wx-media-actions-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.media-module-v2 .wx-media-actions-main {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.media-module-v2 .wx-media-actionsbar__status {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.media-module-v2 .wx-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(226, 235, 245, 0.9);
  background: rgba(245, 250, 255, 0.86);
  color: var(--ox-text-2);
  font-size: 0.82rem;
}

.media-module-v2 .wx-media-tabs {
  border-radius: 14px;
  border: 1px solid rgba(223, 232, 242, 0.86);
  background: rgba(249, 252, 255, 0.9);
  box-shadow: var(--ox-neu-inset-sm);
  padding: 10px;
  min-width: 0;
}

.media-module-v2 .wx-media-tabs__head {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.media-module-v2 .wx-media-tab-btn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(221, 231, 242, 0.9);
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.96), rgba(244, 249, 255, 0.92));
  box-shadow: var(--ox-shadow-micro);
  color: #2f4d6c;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--ox-trans-fast), box-shadow var(--ox-trans-fast), border-color var(--ox-trans-fast);
}

.media-module-v2 .wx-media-tab-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--ox-shadow-soft);
}

.media-module-v2 .wx-media-tab-btn.is-active {
  color: #fff;
  border-color: rgba(212, 122, 31, 0.76);
  background: linear-gradient(180deg, #eda352, #d47a1f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 18px rgba(212, 122, 31, 0.26);
}

.media-module-v2 .wx-media-tabs__body {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.media-module-v2 .wx-media-tab-pane {
  display: none;
}

.media-module-v2 .wx-media-tab-pane.is-active {
  display: grid;
  gap: 10px;
}

.media-module-v2 .wx-media-form {
  display: grid;
  gap: 10px;
}

.media-module-v2 .wx-media-upload-head {
  display: grid;
  gap: 2px;
}

.media-module-v2 .wx-media-upload-head strong {
  font-size: 0.9rem;
}

.media-module-v2 .wx-media-upload-head span {
  color: var(--ox-text-2);
  font-size: 0.78rem;
}

.media-module-v2 .wx-media-upload-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.media-module-v2 .wx-media-file {
  display: none;
}

.media-module-v2 .wx-media-dropzone {
  min-height: 110px;
  border-radius: 14px;
  border: 1px dashed rgba(143, 167, 191, 0.56);
  background: rgba(247, 251, 255, 0.9);
  box-shadow: var(--ox-neu-inset-sm);
  display: grid;
  place-items: center;
  text-align: center;
  gap: 6px;
  padding: 10px;
  color: #4d657f;
  transition: border-color var(--ox-trans-fast), box-shadow var(--ox-trans-fast), transform var(--ox-trans-fast);
}

.media-module-v2 .wx-media-dropzone strong {
  color: var(--ox-text-0);
}

.media-module-v2 .wx-media-dropzone.is-dragover {
  border-color: rgba(212, 122, 31, 0.62);
  box-shadow: inset 3px 3px 9px rgba(159, 173, 193, 0.32), inset -4px -4px 10px rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
}

.media-module-v2 .wx-media-upload-progress {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(221, 230, 240, 0.88);
  background: rgba(240, 246, 253, 0.9);
}

.media-module-v2 .wx-media-upload-progress__bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f2a24d, #d47a1f);
  transition: width 0.22s ease;
}

.media-module-v2 .wx-media-upload-status {
  min-height: 1.2em;
  font-size: 0.78rem;
}

.media-module-v2 .wx-media-upload-foot {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ox-text-2);
}

.media-module-v2 .wx-media-folders-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.media-module-v2 .wx-media-folders-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.media-module-v2 .wx-folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.media-module-v2 .wx-folder-card {
  min-height: 64px;
  border-radius: 14px;
  border: 1px solid rgba(224, 232, 242, 0.9);
  background: linear-gradient(180deg, rgba(251, 253, 255, 0.95), rgba(245, 249, 255, 0.92));
  box-shadow: var(--ox-shadow-micro);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: inherit;
  transition: transform var(--ox-trans-fast), box-shadow var(--ox-trans-fast);
}

.media-module-v2 .wx-folder-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--ox-shadow-soft);
}

.media-module-v2 .wx-folder-card--parent {
  border-style: dashed;
}

.media-module-v2 .wx-folder-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(224, 233, 245, 0.9);
  background: rgba(246, 251, 255, 0.96);
  box-shadow: var(--ox-neu-inset-sm);
  display: grid;
  place-items: center;
  font-size: 1rem;
}

.media-module-v2 .wx-folder-name {
  font-weight: 650;
  color: var(--ox-text-0);
  overflow-wrap: anywhere;
}

.media-module-v2 .wx-folder-count {
  font-size: 0.77rem;
  color: var(--ox-text-2);
}

.media-module-v2 .wx-media-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.media-module-v2 .wx-media-toolbar .left,
.media-module-v2 .wx-media-toolbar .right {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.media-module-v2 .wx-media-hotkeys {
  font-size: 0.74rem;
}

.media-module-v2 .wx-media-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.media-module-v2 .wx-media-empty {
  grid-column: 1 / -1;
  min-height: 130px;
  border-radius: 16px;
  border: 1px dashed rgba(167, 182, 201, 0.46);
  background: rgba(247, 252, 255, 0.72);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
  color: var(--ox-text-2);
}

.media-module-v2 .wx-media-item {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(222, 231, 241, 0.9);
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.98), rgba(246, 250, 255, 0.95));
  box-shadow: var(--ox-shadow-micro);
  padding: 10px;
  display: grid;
  gap: 10px;
  min-width: 0;
  transition: transform var(--ox-trans-fast), box-shadow var(--ox-trans-fast), border-color var(--ox-trans-fast);
  outline: none;
}

.media-module-v2 .wx-media-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--ox-shadow-soft);
}

.media-module-v2 .wx-media-item:focus-visible {
  border-color: rgba(212, 122, 31, 0.5);
  box-shadow: 0 0 0 2px rgba(212, 122, 31, 0.2), var(--ox-shadow-soft);
}

.media-module-v2 .wx-media-item.is-selected {
  border-color: rgba(212, 122, 31, 0.56);
  background: linear-gradient(180deg, rgba(255, 250, 244, 0.97), rgba(251, 244, 234, 0.92));
  box-shadow: var(--ox-shadow-soft);
}

.media-module-v2 .wx-media-check {
  position: absolute;
  inset: 10px 10px auto auto;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(221, 230, 239, 0.96);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--ox-shadow-micro);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.media-module-v2 .wx-media-check input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.media-module-v2 .wx-media-check span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(138, 157, 178, 0.7);
  transition: background var(--ox-trans-fast), box-shadow var(--ox-trans-fast);
}

.media-module-v2 .wx-media-check input:checked + span {
  background: linear-gradient(180deg, #f2a24d, #d47a1f);
  box-shadow: inset 0 0 0 1px rgba(212, 122, 31, 0.72);
}

.media-module-v2 .wx-media-preview {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(226, 234, 243, 0.84);
  background: rgba(245, 250, 255, 0.9);
  min-height: 160px;
  display: grid;
  place-items: center;
}

.media-module-v2 .wx-media-preview a {
  width: 100%;
  height: 100%;
}

.media-module-v2 .wx-media-preview img {
  width: 100%;
  height: 168px;
  object-fit: cover;
}

.media-module-v2 .wx-media-doc {
  width: 100%;
  min-height: 160px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  padding: 12px;
}

.media-module-v2 .wx-media-doc .ext {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(223, 230, 240, 0.9);
  background: rgba(247, 251, 255, 0.9);
  color: #314f6e;
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.media-module-v2 .wx-media-doc .mime {
  color: var(--ox-text-2);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.media-module-v2 .wx-media-meta {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.media-module-v2 .wx-media-meta .name {
  font-weight: 700;
  color: var(--ox-text-0);
  overflow-wrap: anywhere;
}

.media-module-v2 .wx-media-meta .sub {
  font-size: 0.75rem;
  color: var(--ox-text-2);
}

.media-module-v2 .wx-media-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.media-module-v2 .wx-media-tag {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(221, 230, 239, 0.9);
  background: rgba(247, 251, 255, 0.92);
  color: #425f7e;
  font-size: 0.7rem;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
}

.media-module-v2 .wx-media-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.media-module-v2 .wx-media-links .btn {
  min-height: 34px;
  font-size: 0.76rem;
  padding: 0 8px;
}

.media-module-v2 .wx-media-pagination {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.media-module-v2 .wx-media-pagination .left,
.media-module-v2 .wx-media-pagination .right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.media-module-v2 .wx-media-pagination__info {
  color: var(--ox-text-2);
  font-size: 0.82rem;
}

.media-module-v2 .wx-media-inspector {
  position: fixed;
  inset: 0;
  z-index: 130;
}

.media-module-v2 .wx-media-inspector__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 21, 32, 0.4);
  opacity: 0;
  transition: opacity var(--ox-trans-mid);
}

.media-module-v2 .wx-media-inspector__panel {
  position: absolute;
  right: 18px;
  top: calc(var(--ox-topbar-h) + 12px);
  width: min(430px, calc(100vw - 36px));
  max-height: calc(100dvh - var(--ox-topbar-h) - 28px);
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(221, 230, 240, 0.94);
  background: linear-gradient(180deg, #fbfdff, #f3f8fc);
  box-shadow: var(--ox-shadow-float);
  transform: translateX(16px);
  opacity: 0;
  transition: transform var(--ox-trans-mid), opacity var(--ox-trans-mid);
}

.media-module-v2 .wx-media-inspector.is-open .wx-media-inspector__backdrop {
  opacity: 1;
}

.media-module-v2 .wx-media-inspector.is-open .wx-media-inspector__panel {
  transform: translateX(0);
  opacity: 1;
}

.media-module-v2 .wx-media-inspector__head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(244, 249, 255, 0.95));
  border-bottom: 1px solid rgba(222, 231, 241, 0.82);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.media-module-v2 .wx-media-inspector__body {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.media-module-v2 .wx-media-inspector__preview {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(224, 232, 242, 0.86);
  background: rgba(245, 250, 255, 0.88);
}

.media-module-v2 .wx-media-inspector__preview img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
}

.media-module-v2 .wx-media-inspector__meta {
  font-size: 0.8rem;
}

.media-module-v2 .wx-media-inspector__form {
  display: grid;
  gap: 6px;
}

.media-module-v2 .wx-media-inspector__altrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.media-module-v2 .wx-media-inspector__actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 1366px) {
  .media-module-v2 .wx-media-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (max-width: 1120px) {
  .media-module-v2 .wx-media-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-module-v2 .wx-media-filter-field--search {
    grid-column: 1 / -1;
  }

  .media-module-v2 .wx-media-filter-actions {
    justify-content: flex-start;
  }

  .media-module-v2 .wx-media-actionsbar {
    grid-template-columns: 1fr;
  }

  .media-module-v2 .wx-media-actions-grid {
    grid-template-columns: 1fr;
  }

  .media-module-v2 .wx-media-actionsbar__status {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .media-module-v2 .wx-folder-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }

  .media-module-v2 .wx-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .media-module-v2 .wx-media-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-module-v2 .wx-media-toolbar {
    align-items: flex-start;
  }

  .media-module-v2 .wx-media-toolbar .right {
    width: 100%;
  }

  .media-module-v2 .wx-media-hotkeys {
    display: none;
  }

  .media-module-v2 .wx-media-grid {
    grid-template-columns: 1fr;
  }

  .media-module-v2 .wx-media-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .media-module-v2 .wx-media-inspector__panel {
    right: 8px;
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 14px);
    top: 7px;
  }

  .media-module-v2 .wx-media-tab-btn {
    width: 100%;
  }
}

.wx-brand-logo,
.wx-brand-logo-preview {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}

.wx-live-preview__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dashed rgba(142, 170, 196, 0.4);
  padding-bottom: 8px;
}

.wx-home-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.wx-home-block__body {
  display: grid;
  gap: 8px;
}

.wx-home-block__meta {
  flex: 1 1 280px;
  min-width: 220px;
}

.wx-home-block__vis,
.wx-home-block__save,
.wx-home-block__toggle,
.wx-home-block__remove {
  white-space: nowrap;
}

.wx-home-block__drag,
.wx-home-block__vis,
.wx-home-block__remove {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 9px;
  border: 1px solid rgba(141, 169, 195, 0.52);
  background: rgba(247, 252, 255, 0.94);
  color: #375774;
  font-size: 0.76rem;
  display: inline-flex;
  align-items: center;
}

.wx-home-product-picker,
.wx-home-category-picker {
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(141, 169, 195, 0.45);
  background: rgba(250, 253, 255, 0.95);
  display: grid;
  gap: 8px;
}

.wx-home-product-results {
  border-radius: 10px;
  border: 1px solid rgba(141, 169, 195, 0.4);
  background: rgba(255, 255, 255, 0.96);
  max-height: 220px;
  overflow: auto;
  display: grid;
  gap: 6px;
  padding: 6px;
}

.wx-home-product-result {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(141, 169, 195, 0.35);
  background: rgba(248, 252, 255, 0.96);
  border-radius: 10px;
  padding: 8px 10px;
  display: grid;
  gap: 4px;
  cursor: pointer;
  font: inherit;
  color: #20384f;
}

.wx-home-product-result:hover {
  border-color: rgba(245, 158, 11, 0.55);
}

.wx-home-product-result-title {
  font-weight: 700;
  font-size: 0.86rem;
}

.wx-home-product-result-meta {
  font-size: 0.75rem;
  color: #5a738b;
}

.wx-home-product-picked {
  display: grid;
  gap: 8px;
}

.wx-home-picked-item {
  border: 1px solid rgba(141, 169, 195, 0.4);
  background: rgba(255, 255, 255, 0.96);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  gap: 6px;
}

.wx-home-picked-title {
  font-weight: 700;
  color: #20384f;
  font-size: 0.86rem;
}

.wx-home-picked-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wx-home-category-list {
  border-radius: 10px;
  border: 1px solid rgba(141, 169, 195, 0.4);
  background: rgba(255, 255, 255, 0.96);
  max-height: 260px;
  overflow: auto;
  padding: 8px;
  display: grid;
  gap: 6px;
}

.wx-home-category-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 6px 8px;
  border: 1px solid rgba(141, 169, 195, 0.25);
  background: rgba(248, 252, 255, 0.9);
  color: #2a415a;
  font-size: 0.8rem;
}

.wx-home-category-item:hover {
  border-color: rgba(245, 158, 11, 0.45);
}

.wx-col-drag {
  width: 44px;
}

.wx-email-edit-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #17324a;
}

.wx-after-invoice-confirm__label {
  font-size: 0.8rem;
  color: #4f6881;
  font-weight: 600;
}

/* Commandbar + nav */
.wx-suite-commandbar {
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(247, 250, 255, 0.97));
  box-shadow: var(--ox-shadow-card);
  display: grid;
  gap: 10px;
  overflow: hidden;
  padding: 24px 26px 18px;
}

.wx-suite-commandbar[data-ox-cmd-extracted="1"],
.wx-suite-commandbar[data-ox-shell-collapsed="1"] {
  display: none !important;
}

.wx-suite-commandbar--title-only {
  display: none !important;
}

.wx-suite-commandbar--compact-header {
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 8px;
}

.wx-suite-commandbar--compact-header .wx-suite-commandbar__left,
.wx-suite-commandbar--compact-header .wx-suite-commandbar__meta {
  display: none !important;
}

.wx-suite-commandbar--compact-header .wx-suite-commandbar__row {
  grid-template-columns: 1fr;
  align-items: center;
}

.wx-suite-commandbar__row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: start;
  gap: 16px;
}

.wx-suite-commandbar__row.is-single-column {
  grid-template-columns: 1fr;
}

.wx-suite-commandbar__left {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.wx-suite-commandbar__center,
.wx-suite-commandbar__row-right,
.wx-suite-commandbar__actions,
.wx-products-command-actions,
.wx-actions,
.tasks-head-actions,
.wx-period-toolbar,
.wx-orders-status-strip__row,
.wx-settings-inline-tabs {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.wx-period-toolbar {
  gap: 10px;
}

.wx-suite-commandbar__meta {
  font-size: 0.88rem;
  color: var(--ox-text-2);
  line-height: 1.7;
}

.wx-suite-commandbar .h1 {
  margin: 0;
}

.ox-page-nav,
.wx-suite-nav,
.wx-email-workspace-nav {
  display: grid;
  gap: 14px;
}

.ox-global-module-nav {
  margin: 0 0 14px;
}

.ox-global-module-nav .ox-page-nav__grid {
  padding-block: 2px 4px;
  gap: 10px;
}

.ox-global-module-nav .ox-page-nav__item {
  min-height: 38px;
  padding-inline: 14px;
}

.ox-page-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ox-page-nav__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.ox-page-nav__back,
.ox-page-nav__crumb-link,
.ox-page-nav__crumb-current,
.ox-page-nav__crumb-sep {
  font-size: 0.78rem;
  color: var(--ox-text-2);
}

.ox-page-nav__crumb-link:hover,
.ox-page-nav__back:hover {
  color: #1c466b;
}

.ox-page-nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ox-page-nav__grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 6px;
  scrollbar-width: thin;
}

.ox-page-nav__item,
.wx-settings-inline-tab,
.wx-settings-inline-back,
.wx-email-topbar__tab,
.settings-cmd-cat {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(222, 230, 241, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.95));
  box-shadow: var(--ox-shadow-micro);
  color: #39516c;
  font-size: 0.87rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  text-decoration: none;
}

.ox-page-nav__item:hover,
.wx-settings-inline-tab:hover,
.wx-settings-inline-back:hover,
.wx-email-topbar__tab:hover,
.settings-cmd-cat:hover {
  border-color: rgba(223, 231, 242, 0.96);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(249, 251, 255, 0.96));
  box-shadow: var(--ox-shadow-soft);
}

.ox-page-nav__item.is-active,
.wx-settings-inline-tab.is-active,
.wx-email-topbar__tab.is-active,
.settings-cmd-cat.is-active {
  border-color: rgba(224, 232, 244, 0.96);
  background: linear-gradient(180deg, rgba(244, 248, 255, 0.99), rgba(234, 240, 255, 0.97));
  color: #2140ba;
  box-shadow: 0 12px 24px rgba(148, 163, 184, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.ox-page-nav__item.is-disabled,
.wx-settings-inline-tab.is-disabled,
.settings-cmd-cat.is-disabled,
.wx-settings-inline-soon {
  opacity: 0.56;
  cursor: default;
}

.ox-page-nav__soon,
.settings-cmd-cat__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  border-radius: 999px;
  padding: 0 6px;
  background: rgba(18, 43, 68, 0.13);
  color: #2d4b68;
  font-size: 0.67rem;
  font-weight: 700;
}

.ox-page-nav__mobile {
  display: none;
}

.wx-suite-commandbar :is(.wx-topbar-crumb, .wx-settings-inline-crumb) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.wx-suite-commandbar :is(.wx-topbar-crumb__link, .wx-settings-inline-crumb__link) {
  color: var(--ox-text-2);
  font-size: 0.76rem;
}

.wx-suite-commandbar :is(.wx-topbar-crumb__link, .wx-settings-inline-crumb__link):hover {
  color: #1d476c;
}

.wx-suite-commandbar :is(.wx-topbar-crumb__current, .wx-settings-inline-crumb__current) {
  color: var(--ox-text-1);
  font-size: 0.76rem;
  font-weight: 600;
}

.wx-suite-commandbar :is(.wx-topbar-crumb__sep, .wx-settings-inline-crumb__sep) {
  color: rgba(98, 119, 143, 0.8);
}

.ox-page-actions {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
  box-shadow: var(--ox-shadow-card);
  padding: 14px 16px;
}

.ox-page-actions__inner {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Forms + buttons */
.form,
form {
  margin: 0;
}

.form,
.form-grid,
.wx-filter-grid,
.wx-workspace-toolbar__grid,
.wx-orders-search-grid,
.wx-settings-form-grid {
  display: grid;
  gap: 12px;
}

.form-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.form-grid > * {
  grid-column: span 6;
  min-width: 0;
}

.form-grid > .field-full,
.form-grid > .ox-span-2,
.form-grid > .row-end {
  grid-column: 1 / -1;
}

.form-grid > .field-half {
  grid-column: span 6;
}

.field,
.form-block,
.wx-field,
.wx-workspace-toolbar__field,
label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.label,
.wx-label,
.wx-workspace-summary__label,
.wx-email-metric-card__label,
.wx-email-metric-card__hint {
  font-size: var(--ox-type-label-size);
  line-height: var(--ox-type-label-line);
  font-weight: var(--ox-type-label-weight);
  letter-spacing: var(--ox-type-label-track);
}

.input,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"] {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(222, 230, 241, 0.82);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
  color: var(--ox-text-0);
  font: inherit;
  font-size: var(--ox-type-input-size);
  line-height: var(--ox-type-input-line);
  font-weight: var(--ox-type-input-weight);
  box-shadow: var(--ox-shadow-micro);
  transition: border-color var(--ox-trans-fast), box-shadow var(--ox-trans-fast), background var(--ox-trans-fast), transform var(--ox-trans-fast);
}

/* Settings: Sidebar menu editor */
.ox-sb-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ox-sb-tab {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(220, 228, 239, 0.9);
  background: linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(242, 247, 252, 0.94));
  box-shadow: var(--ox-shadow-micro);
  color: #3c536d;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.ox-sb-tab.is-active {
  border-color: rgba(212, 122, 31, 0.42);
  background: linear-gradient(180deg, rgba(236, 157, 78, 0.98), rgba(212, 122, 31, 0.94));
  color: #fff;
}

.ox-sb-editor {
  display: grid;
  gap: 14px;
}

.ox-sb-group {
  border-radius: 18px;
  border: 1px solid rgba(224, 232, 242, 0.92);
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.98), rgba(245, 249, 253, 0.95));
  box-shadow: var(--ox-shadow-soft);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.ox-sb-group.is-dragging,
.ox-sb-item.is-dragging {
  opacity: 0.72;
}

.ox-sb-group-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.ox-sb-handle {
  color: #76889f;
  font-size: 1rem;
  line-height: 1;
  cursor: grab;
  user-select: none;
}

.ox-sb-group-title {
  min-width: 0;
  color: var(--ox-text-0);
  font-size: 0.9rem;
  font-weight: 700;
}

.ox-sb-group-meta {
  color: #6b7d93;
  font-size: 0.75rem;
}

.ox-sb-items {
  display: grid;
  gap: 8px;
}

.ox-sb-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(226, 234, 243, 0.9);
  background: rgba(252, 254, 255, 0.9);
}

.ox-sb-item.is-hidden-by-setting {
  opacity: 0.72;
  border-style: dashed;
}

.ox-sb-item-label {
  min-width: 0;
  color: var(--ox-text-1);
  font-size: 0.82rem;
  font-weight: 560;
  overflow-wrap: anywhere;
}

.ox-sb-item-visibility {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.74rem;
  color: #66788f;
  white-space: nowrap;
}

.ox-sb-move {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ox-sb-move-btn {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  border: 1px solid rgba(219, 228, 239, 0.95);
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(243, 248, 252, 0.94));
  color: #48607a;
  cursor: pointer;
}

.ox-sb-style {
  display: grid;
  gap: 12px;
}

.ox-sb-style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ox-sb-style-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

textarea,
textarea.input {
  min-height: 108px;
  padding: 10px 12px;
  resize: vertical;
}

.input:focus,
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus {
  outline: 0;
  border-color: rgba(212, 122, 31, 0.6);
  box-shadow: 0 0 0 3px rgba(212, 122, 31, 0.14), 0 10px 24px rgba(148, 163, 184, 0.16);
}

.btn,
button,
.btn-auth,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost {
  font-family: inherit;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(222, 230, 241, 0.82);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 254, 0.95));
  color: var(--ox-text-default);
  text-decoration: none;
  font-size: var(--ox-type-button-size);
  line-height: var(--ox-type-button-line);
  font-weight: var(--ox-type-button-weight);
  letter-spacing: normal;
  cursor: pointer;
  box-shadow: var(--ox-shadow-micro);
  transition: transform var(--ox-trans-fast), filter var(--ox-trans-fast), box-shadow var(--ox-trans-fast), background var(--ox-trans-fast), border-color var(--ox-trans-fast);
}

.btn:hover {
  transform: translateY(-1px);
  filter: none;
  box-shadow: var(--ox-shadow-soft);
}

.btn:disabled,
.btn[disabled],
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn-sm {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.875rem;
  line-height: 1.2;
}

.btn-primary {
  border-color: rgba(212, 122, 31, 0.42);
  background: linear-gradient(180deg, #ea9c47, var(--ox-primary));
  color: #fff;
  box-shadow: 0 14px 28px rgba(212, 122, 31, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.btn-primary:hover {
  background: linear-gradient(180deg, #f1ab5e, var(--ox-primary-hover));
}

.btn-secondary,
.btn-outline,
.btn-ghost,
.btn-subtle,
.btn-auth {
  border-color: rgba(222, 230, 241, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.95));
  color: var(--ox-text-default);
  box-shadow: var(--ox-shadow-micro);
}

.btn-danger,
.wx-btn-danger {
  border-color: rgba(179, 61, 48, 0.72);
  background: linear-gradient(180deg, #dd6b63, #c54f45);
  color: #fff;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(132, 163, 189, 0.5);
  background: rgba(239, 247, 252, 0.94);
  color: #254866;
  font-size: var(--ox-type-label-size);
  line-height: var(--ox-type-label-line);
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.badge-muted,
.badge-neutral {
  background: rgba(235, 241, 247, 0.92);
  color: #3c556f;
}

.badge-ok,
.wx-ok,
.wx-status-ok,
.wx-integrity-ok {
  border-color: rgba(49, 147, 100, 0.52);
  background: rgba(205, 242, 224, 0.9);
  color: #14603f;
}

.badge-bad,
.wx-bad,
.wx-status-bad,
.wx-integrity-bad {
  border-color: rgba(190, 75, 62, 0.48);
  background: rgba(255, 226, 220, 0.9);
  color: #8c2a22;
}

body:not(.ox-shell-canonical) :is(.alert, .notice, .wx-alert, .ox-form-alert) {
  border-radius: 12px;
  border: 1px solid rgba(164, 184, 210, 0.72);
  border-left: 4px solid #315c89;
  background: #f5f9ff;
  padding: 11px 13px;
  font-size: 0.84rem;
  line-height: 1.45;
  font-weight: 560;
  color: #173754;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  overflow-wrap: anywhere;
}

body:not(.ox-shell-canonical) :is(.notice.ok, .alert-ok, .alert-success, .wx-alert--ok, .wx-alert--success) {
  border-color: rgba(95, 164, 124, 0.6);
  border-left-color: #2d7a4f;
  background: #eaf7ef;
  color: #1c5a3d;
}

body:not(.ox-shell-canonical) :is(.notice.err, .notice-danger, .notice-error, .alert-bad, .alert-err, .alert-error, .wx-alert--danger) {
  border-color: rgba(193, 102, 93, 0.64);
  border-left-color: #b4453a;
  background: #fdeeed;
  color: #7e2c25;
}

body:not(.ox-shell-canonical) :is(.notice.warn, .notice-warn, .alert-warning, .wx-alert--warn) {
  border-color: rgba(212, 161, 90, 0.72);
  border-left-color: #c07a1f;
  background: #fff5e7;
  color: #744915;
}

body:not(.ox-shell-canonical) :is(.notice.info, .notice-info, .alert-info, .wx-alert--info) {
  border-color: rgba(110, 152, 199, 0.62);
  border-left-color: #315c89;
  background: #eaf2fd;
  color: #173754;
}

/* Workspace summaries */
.wx-workspace-heading,
.wx-workspace-primary-actions,
.wx-workspace-inline-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.wx-workspace-heading__title {
  margin: 0;
  font-size: 1.34rem;
  font-weight: 700;
  color: var(--ox-text-0);
}

.wx-workspace-heading__meta {
  margin: 4px 0 0;
  color: var(--ox-text-2);
  font-size: 0.82rem;
}

.wx-workspace-summary,
.wx-email-metric-grid,
.wx-control-overview__grid,
.wx-dashboard-metrics,
.settings-hub-head-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.wx-workspace-summary__item,
.wx-email-metric-card,
.wx-control-stat,
.settings-hub-head-metric {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
  box-shadow: var(--ox-shadow-card);
  padding: 20px 22px;
  min-width: 0;
}

.wx-workspace-summary__value,
.wx-email-metric-card__value,
.wx-control-stat__value,
.settings-hub-head-metric__value {
  margin-top: 2px;
  font-size: clamp(1.4rem, 1.08rem + 0.72vw, 2rem);
  font-weight: 780;
  color: var(--ox-text-0);
  line-height: 1.1;
}

.wx-email-metric-card--ok,
.wx-control-stat.is-primary {
  border-color: rgba(255, 255, 255, 0.84);
  background: linear-gradient(180deg, rgba(240, 247, 243, 0.98), rgba(230, 244, 236, 0.92));
}

.wx-email-metric-card--warn,
.wx-control-stat.is-warn {
  border-color: rgba(255, 255, 255, 0.84);
  background: linear-gradient(180deg, rgba(255, 249, 241, 0.98), rgba(252, 242, 227, 0.92));
}

/* Settings hub workspace */
.settings-hub-v2 {
  display: grid;
  gap: 12px;
}

.settings-hub-v2__main {
  border-radius: var(--ox-radius-lg);
  border: 1px solid var(--ox-border-soft);
  background:
    radial-gradient(34rem 16rem at 92% -18%, rgba(212, 122, 31, 0.08), transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 253, 0.92));
  box-shadow: var(--ox-shadow-card);
  padding: 12px;
  display: grid;
  gap: 12px;
  color: var(--ox-text-0);
}

.settings-hub-v2__tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 2px;
}

.settings-hub-v2__toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.settings-hub-search {
  min-width: 0;
  width: 100%;
}

.settings-hub-search .input {
  width: 100%;
}

.settings-hub-v2__meta {
  font-size: 0.79rem;
  white-space: nowrap;
}

.settings-hub-v2__legend {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: -2px;
}

.settings-hub-v2__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.73rem;
  color: var(--ox-text-2);
  line-height: 1;
}

.settings-hub-v2__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.settings-hub-v2-tile {
  display: block;
  min-width: 0;
}

a.settings-hub-v2-tile__main,
.settings-hub-v2-tile__main {
  width: 100%;
  min-height: 128px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.96);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--ox-shadow-soft);
  color: var(--ox-text-0);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-content: start;
  text-decoration: none;
}

a.settings-hub-v2-tile__main {
  transition: border-color var(--ox-trans-fast), box-shadow var(--ox-trans-fast), transform var(--ox-trans-fast), background var(--ox-trans-fast);
}

a.settings-hub-v2-tile__main:hover {
  transform: translateY(-1px);
  border-color: rgba(198, 213, 241, 0.94);
  box-shadow: var(--ox-shadow-card), inset 0 0 0 1px rgba(212, 122, 31, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 253, 0.95));
}

.settings-hub-v2-tile__main--soon {
  background: linear-gradient(180deg, rgba(253, 254, 255, 0.92), rgba(246, 250, 255, 0.9));
}

.settings-hub-v2-tile__main--locked {
  border-style: dashed;
  opacity: 0.92;
}

.settings-hub-v2-tile__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.settings-hub-v2-tile__title {
  min-width: 0;
  line-height: 1.3;
  font-weight: 700;
  color: var(--ox-text-0);
}

.settings-hub-v2-tile__desc {
  margin: 0;
  line-height: 1.35;
  color: var(--ox-text-2);
}

.settings-hub-v2-tile__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-hub-v2-meta-label {
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ox-text-muted);
}

.settings-hub-v2-state {
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(149, 167, 186, 0.44);
  background: rgba(241, 246, 252, 0.92);
  color: #35516c;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
}

.settings-hub-v2-state--on {
  border-color: rgba(48, 148, 100, 0.48);
  background: rgba(224, 247, 234, 0.92);
  color: #155c3a;
}

.settings-hub-v2-state--warn {
  border-color: rgba(191, 122, 48, 0.5);
  background: rgba(255, 240, 216, 0.92);
  color: #7d4f1f;
}

.settings-hub-v2-state--off,
.settings-hub-v2-state--neutral {
  border-color: rgba(140, 158, 177, 0.44);
  background: rgba(240, 245, 251, 0.9);
  color: #3b5671;
}

.settings-hub-v2-state--soon,
.settings-hub-v2-state--locked {
  border-color: rgba(142, 152, 168, 0.5);
  background: rgba(237, 241, 246, 0.92);
  color: #4d5e73;
}

.settings-btn__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(126, 149, 174, 0.9);
  box-shadow: 0 0 0 2px rgba(231, 240, 250, 0.94);
}

.settings-btn__dot.is-on {
  background: #19a065;
}

.settings-btn__dot.is-warn {
  background: #cb7a2e;
}

.settings-btn__dot.is-off,
.settings-btn__dot.is-neutral {
  background: #6483a4;
}

.settings-btn__dot.is-soon,
.settings-btn__dot.is-locked {
  background: #8a97a8;
}

.settings-hub-v2-tile__soon {
  min-height: 21px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(143, 156, 172, 0.58);
  background: rgba(238, 244, 250, 0.9);
  color: #4f6277;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.settings-hub-v2-tile__soon.is-locked {
  border-color: rgba(148, 163, 184, 0.48);
  background: rgba(241, 245, 249, 0.9);
  color: #475569;
}

.settings-hub-empty-state {
  border-radius: 13px;
  border: 1px dashed rgba(140, 167, 193, 0.58);
  background: rgba(245, 250, 255, 0.84);
  color: #4a647f;
  padding: 14px;
  font-size: 0.84rem;
}

.wx-workspace-alert {
  border-radius: 13px;
  border: 1px solid rgba(217, 119, 6, 0.32);
  background: var(--ox-warning-bg);
  overflow: hidden;
}

.wx-workspace-alert__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  font-weight: 650;
  color: #92400e;
  cursor: pointer;
}

.wx-workspace-alert__summary::-webkit-details-marker {
  display: none;
}

.wx-workspace-alert__body {
  padding: 0 12px 12px;
  color: #92400e;
  font-size: 0.84rem;
}

.wx-email-health-list,
.wx-workspace-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.wx-email-health-actions,
.wx-workspace-primary-actions__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Toolbar */
.wx-workspace-toolbar {
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(142, 170, 195, 0.42);
  background: rgba(247, 251, 255, 0.9);
  padding: 10px;
}

.wx-workspace-toolbar--sticky {
  position: sticky;
  top: calc(var(--ox-topbar-h) + 10px);
  z-index: 35;
}

.wx-workspace-toolbar__grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.wx-workspace-toolbar__field {
  grid-column: span 3;
}

.wx-workspace-toolbar__field--wide {
  grid-column: span 6;
}

.wx-workspace-toolbar__actions,
.wx-field-actions {
  grid-column: span 3;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.wx-workspace-toolbar__grid--messages .wx-workspace-toolbar__field,
.wx-workspace-toolbar__grid--logs .wx-workspace-toolbar__field,
.wx-workspace-toolbar__grid--customers .wx-workspace-toolbar__field,
.wx-orders-search-grid .wx-field {
  grid-column: span 3;
}

.wx-workspace-toolbar__grid--messages .wx-workspace-toolbar__field--wide,
.wx-workspace-toolbar__grid--logs .wx-workspace-toolbar__field--wide,
.wx-workspace-toolbar__grid--customers .wx-workspace-toolbar__field--wide,
.wx-orders-search-grid .wx-field:first-child {
  grid-column: span 5;
}

/* Table system */
.table-wrap,
.wx-table-wrap,
.wx-workspace-table-wrap,
.wx-responsive-table {
  width: 100%;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid var(--ox-border-soft);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--ox-shadow-soft);
}

:where(.card, .wx-panel, .settings-panel, .wx-workspace-surface, .wx-suite-section, .wx-panel-body, .wx-workspace-body)
  > :is(.table-wrap, .wx-table-wrap, .wx-workspace-table-wrap, .wx-responsive-table) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.table,
.wx-workspace-table,
.wx-orders-table,
.wx-rules-table,
.wx-email-templates-table,
.wx-email-logs-table,
.wx-customers-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  min-width: 820px;
}

.table th,
.table td,
.wx-workspace-table th,
.wx-workspace-table td {
  padding: 10px 10px;
  border-bottom: 1px solid rgba(145, 172, 196, 0.28);
  color: var(--ox-text-0);
  font-size: var(--ox-type-table-size);
  line-height: var(--ox-type-table-line);
  font-weight: var(--ox-type-table-weight);
  vertical-align: top;
}

.table th,
.wx-workspace-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(248, 250, 253, 0.98);
  color: var(--ox-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ox-type-table-head-track);
  font-size: var(--ox-type-table-head-size);
  line-height: var(--ox-type-table-head-line);
  font-weight: var(--ox-type-table-head-weight);
}

.table tbody tr:hover,
.wx-workspace-table tbody tr:hover {
  background: rgba(234, 240, 255, 0.44);
}

.wx-workspace-table--dense th,
.wx-workspace-table--dense td,
.wx-rules-table--dense th,
.wx-rules-table--dense td {
  padding-top: 8px;
  padding-bottom: 8px;
}

.wx-row-actions,
.wx-workspace-row-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wx-row-actions__badge,
.wx-workspace-row-actions .badge {
  flex: 0 0 auto;
}

.wx-row-menu {
  position: relative;
}

.wx-row-menu > summary {
  list-style: none;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(136, 166, 194, 0.58);
  background: rgba(249, 252, 255, 0.9);
  color: #294a67;
  font-size: 0.76rem;
  cursor: pointer;
}

.wx-row-menu > summary::-webkit-details-marker {
  display: none;
}

.wx-row-menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 148px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--ox-border-soft);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--ox-shadow-float);
  display: grid;
  gap: 4px;
  z-index: 15;
}

.wx-row-menu__list a,
.wx-row-menu__list span {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  color: #2c4b67;
  font-size: 0.78rem;
}

.wx-row-menu__list a:hover {
  background: rgba(236, 245, 252, 0.9);
}

.wx-row-menu__empty {
  color: var(--ox-text-2);
}

.wx-email-logs-table td[data-label="Hiba"] {
  min-width: 300px;
}

.wx-log-error,
.wx-log-inspect {
  margin-top: 6px;
  display: block;
}

.wx-log-error > summary,
.wx-log-inspect > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: rgba(240, 245, 251, 0.95);
  color: #33465c;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  outline: 0;
  box-shadow: var(--ox-neu-raised-sm);
}

.wx-log-error > summary::-webkit-details-marker,
.wx-log-inspect > summary::-webkit-details-marker {
  display: none;
}

.wx-log-error > summary:focus-visible,
.wx-log-inspect > summary:focus-visible {
  box-shadow: var(--ox-neu-raised-sm), 0 0 0 2px rgba(212, 122, 31, 0.2);
}

.wx-log-error[open] > summary,
.wx-log-inspect[open] > summary {
  box-shadow: var(--ox-neu-inset-sm);
}

.wx-log-error__body,
.wx-log-inspect__body {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(237, 242, 249, 0.92);
  color: #23354a;
}

.wx-log-error__body {
  white-space: pre-wrap;
  word-break: break-word;
}

.wx-log-inspect__body {
  max-height: 240px;
  overflow: auto;
  font-size: 0.74rem;
  line-height: 1.42;
  white-space: pre;
}

/* Stack table fallback */
@media (max-width: 920px) {
  .wx-workspace-table--stack,
  .wx-workspace-table--stack thead,
  .wx-workspace-table--stack tbody,
  .wx-workspace-table--stack tr,
  .wx-workspace-table--stack th,
  .wx-workspace-table--stack td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .wx-workspace-table--stack thead {
    display: none;
  }

  .wx-workspace-table--stack tr {
    border-bottom: 1px solid rgba(139, 168, 195, 0.32);
    padding: 10px;
    background: rgba(255, 255, 255, 0.96);
  }

  .wx-workspace-table--stack td {
    border: 0;
    padding: 6px 0;
  }

  .wx-workspace-table--stack td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--ox-text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 13px;
    font-weight: 700;
  }

  .wx-workspace-table--stack td.tr,
  .wx-workspace-table--stack .tr {
    text-align: left;
  }

  .wx-workspace-row-actions,
  .wx-row-actions {
    justify-content: flex-start;
  }

  .wx-email-logs-table td[data-label="Hiba"] {
    min-width: 0;
  }
}

/* Orders module */
.wx-orders-header {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--ox-radius-lg);
  border: var(--ox-panel-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.97));
  box-shadow: var(--ox-shadow-card);
}

.wx-orders-header__row {
  display: grid;
  gap: 12px;
}

.wx-orders-header__row--top {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.wx-orders-header__row--actions-only {
  grid-template-columns: 1fr;
}

.wx-orders-header__row--actions-only .wx-orders-header__actions {
  justify-content: flex-end;
}

.wx-orders-header__summary {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.wx-orders-header__title-wrap {
  display: grid;
  gap: 4px;
}

.wx-orders-header__title-wrap .h1 {
  margin: 0;
}

.wx-orders-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.wx-orders-header__row--middle {
  grid-template-columns: minmax(0, 1fr) minmax(420px, auto);
  align-items: start;
  gap: 12px;
}

.wx-orders-header__row--kpi {
  grid-template-columns: 1fr;
}

.wx-orders-header__tabs {
  min-width: 0;
}

.wx-orders-header__tabs .ox-page-nav {
  margin: 0;
}

.wx-orders-kpi-mini-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}

.wx-orders-kpi-mini {
  min-height: 62px;
  border-radius: 16px;
  border: 1px solid rgba(222, 230, 241, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.95));
  box-shadow: var(--ox-shadow-micro);
  padding: 8px 11px;
  display: grid;
  align-content: center;
  gap: 4px;
}

.wx-orders-kpi-mini__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ox-text-muted);
  line-height: 1.15;
}

.wx-orders-kpi-mini__value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ox-text-0);
  line-height: 1.15;
}

.wx-orders-kpi-mini--warn .wx-orders-kpi-mini__value {
  color: #b45309;
}

.wx-orders-kpi-mini--accent .wx-orders-kpi-mini__value {
  color: var(--ox-accent);
}

.wx-orders-header__row--filters {
  display: grid;
  gap: 10px;
}

.wx-orders-search-form--compact .wx-orders-search-grid {
  grid-template-columns: minmax(280px, 1.25fr) minmax(140px, 180px) auto;
  align-items: end;
}

.wx-orders-search-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.wx-orders-toolbar {
  display: grid;
  gap: 14px;
  padding: 0;
}

.wx-orders-toolbar__status,
.wx-orders-toolbar__search {
  display: grid;
  gap: 12px;
}

.wx-orders-toolbar__status {
  padding-bottom: 2px;
}

.wx-orders-toolbar__warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.wx-orders-toolbar__warning-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wx-orders-status-strip,
.wx-orders-search-strip {
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.wx-orders-status-btn,
.wx-period-pill {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.96), rgba(242, 246, 251, 0.94));
  box-shadow: var(--ox-shadow-micro);
  color: #35506c;
  display: inline-flex;
  align-items: center;
  font-size: 0.87rem;
  font-weight: 600;
}

.wx-orders-status-btn.is-active,
.wx-period-pill.is-active {
  border-color: rgba(212, 122, 31, 0.38);
  background: linear-gradient(180deg, rgba(235, 156, 77, 0.98), rgba(212, 122, 31, 0.96));
  box-shadow: -6px -6px 14px rgba(255, 255, 255, 0.34), 14px 16px 28px rgba(212, 122, 31, 0.24);
  color: #ffffff;
}

body.ox-dashboard-surface .wx-list-center {
  max-width: 1580px;
}

body.ox-dashboard-surface .wx-dashboard-shell__row {
  align-items: start;
}

body.ox-dashboard-surface .wx-dashboard-meta {
  max-width: 72rem;
  padding-left: 0;
}

body.ox-dashboard-surface .wx-suite-commandbar__center,
body.ox-dashboard-surface .wx-suite-commandbar__actions {
  align-self: start;
}

:where(.wx-panel, .settings-panel, .wx-suite-section, .wx-workspace-surface, .card)
  > :is(.wx-panel, .settings-panel, .wx-suite-section, .wx-workspace-surface, .card):only-child {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

:is(.card, .wx-panel, .settings-panel, .wx-suite-section, .wx-workspace-surface, .wx-orders-toolbar, .wx-orders-results)
  > :is(.wx-orders-status-strip, .wx-orders-search-strip, .wx-bulkbar, .wx-workspace-toolbar, .table-wrap, .wx-table-wrap, .wx-workspace-table-wrap, .wx-responsive-table) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.wx-bulkbar {
  border-radius: 12px;
  border: 1px solid rgba(140, 168, 194, 0.42);
  background: rgba(246, 250, 254, 0.94);
  padding: 10px;
}

.wx-bulkbar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.wx-status-editor {
  display: grid;
  gap: 6px;
}

.wx-inline-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.wx-status-select {
  min-width: 170px;
}

.wx-status-save {
  white-space: nowrap;
}

.wx-status-chip {
  justify-self: start;
}

.wx-col-date,
.wx-date-cell,
.wx-col-total,
.wx-total-cell,
.wx-col-actions,
.wx-actions-cell {
  white-space: nowrap;
}

.wx-cards {
  display: none;
}

@media (max-width: 1366px) {
  .wx-orders-header__row--middle {
    grid-template-columns: 1fr;
  }

  .wx-orders-kpi-mini-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .wx-orders-header__row--top {
    grid-template-columns: 1fr;
  }

  .wx-orders-header__actions {
    justify-content: flex-start;
  }

  .wx-orders-header__row--actions-only .wx-orders-header__actions {
    justify-content: flex-start;
  }

  .wx-orders-search-form--compact .wx-orders-search-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wx-orders-search-form--compact .wx-field-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .wx-orders-header {
    padding: 16px;
    border-radius: 20px;
  }

  .wx-orders-kpi-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wx-orders-search-form--compact .wx-orders-search-grid {
    grid-template-columns: 1fr;
  }

  .wx-orders-search-actions {
    width: 100%;
    justify-content: stretch;
  }

  .wx-orders-search-actions > * {
    flex: 1 1 100%;
  }
}

/* Workspace detail */
.wx-workspace-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 14px;
  align-items: start;
}

.wx-workspace-detail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 10px 12px;
  margin-bottom: 14px;
}

.wx-workspace-detail-head__title {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.wx-workspace-detail-head__subject {
  color: var(--ox-text-0);
  font-size: clamp(1.12rem, 1rem + 0.35vw, 1.42rem);
  font-weight: 720;
  line-height: 1.14;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.wx-workspace-detail-head__meta {
  color: var(--ox-text-2);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.wx-workspace-detail-head__state,
.wx-workspace-detail-head__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.wx-workspace-detail__main,
.wx-workspace-detail__side {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.wx-workspace-surface--sticky {
  position: sticky;
  top: calc(var(--ox-topbar-h) + 12px);
}

.wx-workspace-kv {
  display: grid;
  gap: 8px;
}

.wx-workspace-kv__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(141, 169, 195, 0.45);
  font-size: 0.82rem;
}

.wx-workspace-kv__row span {
  color: var(--ox-text-2);
}

.wx-workspace-message {
  border-radius: 12px;
  border: 1px solid rgba(141, 169, 194, 0.42);
  background: rgba(252, 254, 255, 0.95);
  padding: 10px;
}

.wx-settings-pre,
pre.wx-settings-pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.79rem;
  color: #334a63;
}

.wx-workspace-technical {
  border-radius: 12px;
  border: 1px solid rgba(141, 168, 194, 0.44);
  background: rgba(248, 252, 255, 0.93);
  overflow: hidden;
}

.wx-workspace-technical > summary {
  list-style: none;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 650;
  color: #2c4966;
}

.wx-workspace-technical > summary::-webkit-details-marker {
  display: none;
}

.wx-workspace-technical__body {
  padding: 0 12px 12px;
  display: grid;
  gap: 8px;
}

/* Chat */
.wx-chat-shell {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(132, 156, 182, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.96));
  box-shadow: 0 14px 36px rgba(26, 52, 78, 0.08);
}

.wx-chat-toolbar,
.wx-chat-main__head,
.wx-chat-composer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.wx-chat-toolbar {
  padding: 10px 6px 2px;
  border-bottom: 1px solid rgba(133, 157, 182, 0.2);
}

.wx-chat-toolbar__eyebrow {
  margin: 0;
  font-size: 0.69rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: #708aa4;
}

.wx-chat-toolbar__title,
.wx-chat-main__title {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 760;
  letter-spacing: -0.02em;
  color: #1d3550;
}

.wx-chat-toolbar__sub,
.wx-chat-main__meta,
.wx-chat-composer__hint,
.wx-chat-sub {
  margin: 0;
  font-size: 0.82rem;
  color: #607792;
}

.wx-chat-toolbar__pill {
  padding: 0 12px;
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(103, 133, 163, 0.34);
  background: rgba(239, 247, 255, 0.95);
  color: #274562;
  font-size: 0.74rem;
  font-weight: 700;
}

.wx-chat-grid {
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  gap: 14px;
  min-height: 68vh;
}

.wx-chat-sidebar,
.wx-chat-main {
  border-radius: 16px;
  border: 1px solid rgba(126, 152, 178, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.98));
  padding: 14px;
  display: grid;
  gap: 12px;
  min-height: 0;
}

.wx-chat-sidebar {
  align-content: start;
}

.wx-chat-sidebar__head {
  display: grid;
  gap: 6px;
}

.wx-chat-sidebar__eyebrow {
  margin: 0;
  font-size: 0.67rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: #7a90a7;
}

.wx-chat-sidebar__meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.wx-chat-meta-chip {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(123, 149, 176, 0.32);
  background: rgba(240, 247, 255, 0.92);
  color: #4a6681;
  font-size: 0.68rem;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
}

.wx-chat-filter .input {
  min-height: 42px;
}

.wx-chat-main__head {
  align-items: flex-start;
  padding: 4px 2px 8px;
  border-bottom: 1px solid rgba(129, 154, 180, 0.18);
}

.wx-chat-main__head-actions {
  display: inline-flex;
  align-items: center;
}

.wx-chat-main__badge {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(133, 158, 185, 0.34);
  background: rgba(238, 246, 255, 0.9);
  color: #45607a;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.wx-chat-main__badge.is-active {
  border-color: rgba(212, 122, 31, 0.28);
  background: rgba(255, 243, 226, 0.94);
  color: #965b1b;
}

.wx-chat-user-list,
.wx-chat-messages {
  min-height: 0;
  max-height: 56vh;
  overflow: auto;
  display: grid;
  gap: 10px;
  padding-right: 2px;
}

.wx-chat-user-list {
  align-content: start;
}

.wx-chat-list-empty {
  border-radius: 12px;
  border: 1px dashed rgba(132, 157, 182, 0.5);
  background: rgba(248, 252, 255, 0.95);
  color: #5a728b;
  font-size: 0.8rem;
  padding: 14px 12px;
}

.wx-chat-messages {
  padding: 6px 4px 2px 2px;
}

.wx-chat-msg {
  max-width: min(640px, 88%);
  border-radius: 14px;
  border: 1px solid rgba(132, 157, 183, 0.26);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 16px rgba(20, 45, 70, 0.08);
  padding: 10px 12px;
  display: grid;
  gap: 7px;
}

.wx-chat-msg.is-own {
  margin-left: auto;
  border-color: rgba(212, 122, 31, 0.28);
  background: rgba(255, 247, 236, 0.98);
}

.wx-chat-msg__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.wx-chat-msg__sender {
  font-size: 0.78rem;
  font-weight: 720;
  color: #2b4965;
}

.wx-chat-msg__stamp {
  font-size: 13px;
  color: #7089a2;
  white-space: nowrap;
}

.wx-chat-msg__body {
  display: grid;
  gap: 8px;
}

.wx-chat-msg__text {
  font-size: 0.84rem;
  line-height: 1.45;
  color: #223f5a;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.wx-chat-msg__image-link {
  display: inline-flex;
  max-width: min(380px, 100%);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(131, 158, 186, 0.28);
}

.wx-chat-msg__image {
  display: block;
  width: 100%;
  height: auto;
}

.wx-chat-composer {
  border-top: 1px solid rgba(129, 153, 179, 0.2);
  padding-top: 10px;
  display: grid;
  gap: 8px;
}

.wx-chat-composer .input {
  min-height: 92px;
  resize: vertical;
}

.wx-chat-empty {
  border-radius: 14px;
  border: 1px dashed rgba(133, 157, 181, 0.55);
  background: rgba(248, 252, 255, 0.96);
  padding: 20px 18px;
  display: grid;
  gap: 8px;
  color: #4e6780;
  justify-items: start;
}

.wx-chat-empty__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(131, 156, 182, 0.34);
  background: rgba(237, 247, 255, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.wx-chat-empty__title {
  font-weight: 740;
  color: #1f3b56;
}

.wx-chat-empty__desc {
  font-size: 0.82rem;
  color: #5f7690;
  max-width: 60ch;
}

.wx-chat-empty__tips {
  margin: 2px 0 0;
  padding-left: 18px;
  color: #5a738b;
  font-size: 0.78rem;
  line-height: 1.45;
}

.wx-chat-empty__tips li {
  margin: 2px 0;
}

.wx-chat-upload {
  min-height: 32px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  border: 1px solid rgba(141, 169, 194, 0.52);
  background: rgba(245, 251, 255, 0.97);
  color: #2d4c67;
  cursor: pointer;
  font-weight: 650;
  font-size: 0.78rem;
}

.wx-chat-upload input {
  display: none;
}

.wx-chat-upload.is-disabled {
  opacity: 0.55;
  cursor: default;
}

.wx-chat-mobile-back {
  display: inline-flex;
  align-items: center;
}

/* Dashboard home cards (home-only primitives) */
.wx-home-profile-grid,
.wx-home-zones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.wx-home-zones.wx-home-zones--stack {
  grid-template-columns: 1fr;
}

.wx-home-layout-info {
  border-radius: 12px;
  border: 1px solid var(--ox-border-soft);
  background: rgba(255, 255, 255, 0.93);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.wx-home-layout-info__title {
  font-weight: 700;
  color: var(--ox-text-0);
}

.wx-home-layout-info__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wx-home-layout-info__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(141, 169, 195, 0.52);
  background: rgba(247, 252, 255, 0.94);
  color: #375774;
  font-size: 0.78rem;
}

.wx-home-profile-card,
.wx-home-zone,
.wx-home-block {
  border-radius: 12px;
  border: 1px solid var(--ox-border-soft);
  background: rgba(255, 255, 255, 0.93);
  color: var(--ox-text-0);
  padding: 11px;
}

.wx-home-zone__title,
.wx-home-block__name {
  font-weight: 700;
  color: var(--ox-text-0);
}

.wx-home-zone__empty,
.wx-home-theme-note,
.wx-home-block__meta {
  color: var(--ox-text-2);
  font-size: 0.78rem;
}

/* Auth */
.auth-page {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: var(--auth-vh, 100dvh);
  margin: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
  background:
    radial-gradient(60rem 34rem at 10% -8%, rgba(255, 255, 255, 0.9), transparent 62%),
    radial-gradient(52rem 34rem at 88% 2%, rgba(230, 239, 251, 0.82), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(241, 246, 253, 0.22) 32%, rgba(232, 238, 247, 0.52)),
    #ffffff;
  overflow: clip;
}

.auth-bg-canvas-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.auth-bg-canvas {
  width: 100%;
  height: 100%;
  opacity: 0.82;
  filter: saturate(112%) contrast(102%);
}

.auth-bg-noise {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.22) 0.8px, transparent 0.8px);
  background-size: 4px 4px;
  mix-blend-mode: soft-light;
  opacity: 0.1;
}

.auth-wrap {
  position: relative;
  z-index: 1;
  width: min(100%, 620px);
  min-height: var(--auth-vh, 100dvh);
  display: grid;
  align-content: center;
}

.auth-card {
  position: relative;
  width: 100%;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.996), rgba(246, 251, 255, 0.97));
  box-shadow: -12px -12px 28px rgba(255, 255, 255, 0.93), 20px 20px 42px rgba(149, 166, 190, 0.28);
  padding: clamp(24px, 2.8vw, 36px);
  overflow: hidden;
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 58%);
  pointer-events: none;
}

.auth-card > * {
  position: relative;
  z-index: 1;
}

.auth-brand-hero {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  min-height: 170px;
  align-content: start;
}

.auth-brand-logo {
  width: 178px;
  height: auto;
}

.auth-brand-logo--success {
  width: 190px;
}

.brand-title {
  margin: 0;
  text-wrap: balance;
}

.auth-animated-title {
  min-height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.08;
}

.auth-animated-title.is-changing {
  opacity: 1;
  transform: none;
  letter-spacing: normal;
}

.auth-sub {
  margin: 0;
  color: #66788d;
  font-size: 0.9rem;
  text-wrap: balance;
  min-height: 1.4em;
}

.divider {
  margin: 14px 0;
  text-align: center;
  color: var(--ox-text-2);
  font-size: 0.76rem;
}

.btn-google {
  width: 100%;
}

.btn-ico {
  width: 16px;
  height: 16px;
}

[data-auth-submit] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  transition: transform 0.2s ease, box-shadow 0.24s ease, filter 0.24s ease;
}

[data-auth-submit]:not([disabled]):hover {
  transform: translateY(-1px);
  box-shadow: -6px -6px 14px rgba(255, 255, 255, 0.84), 9px 9px 18px rgba(154, 170, 193, 0.32);
}

[data-auth-submit]:not([disabled]):active {
  transform: translateY(0);
  filter: brightness(0.98);
}

.auth-btn-loader {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-top-color: rgba(255, 255, 255, 0.95);
  display: none;
}

[data-auth-submit].is-loading .auth-btn-loader {
  display: inline-block;
  animation: auth-spin 0.7s linear infinite;
}

.auth-page--loading .btn-google {
  pointer-events: none;
  opacity: 0.7;
}

.auth-card .input,
.auth-card select.input,
.auth-card textarea.input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.auth-card .input:focus,
.auth-card select.input:focus,
.auth-card textarea.input:focus {
  border-color: rgba(212, 122, 31, 0.34);
  box-shadow: inset 2px 2px 6px rgba(159, 173, 193, 0.17), inset -2px -2px 6px rgba(255, 255, 255, 0.9), 0 0 0 3px rgba(212, 122, 31, 0.11);
  transform: translateY(-1px);
}

.auth-card .btn-google {
  transition: transform 0.2s ease, box-shadow 0.24s ease;
}

.auth-card .btn-google:hover:not([disabled]) {
  transform: translateY(-1px);
  box-shadow: -5px -5px 12px rgba(255, 255, 255, 0.85), 8px 8px 16px rgba(162, 177, 197, 0.3);
}

.auth-page.auth-compact .auth-wrap {
  align-content: start;
}

.auth-page.auth-compact .auth-card {
  border-radius: 22px;
}

.auth-card--attention {
  animation: auth-card-attention 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-success {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
  isolation: isolate;
}

.auth-success__halo {
  position: absolute;
  inset: 20px 11% auto;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 226, 190, 0.94), rgba(238, 243, 249, 0));
  filter: blur(6px);
  z-index: -1;
}

.auth-success__badge {
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(241, 248, 255, 0.96));
  box-shadow: var(--ox-shadow-card);
  color: var(--ox-accent);
  transform: translateY(8px) scale(0.94);
  opacity: 0;
  transition: transform var(--ox-trans-med), opacity var(--ox-trans-med);
}

.auth-success__badge svg {
  width: 40px;
  height: 40px;
}

.auth-success__progress {
  width: min(100%, 280px);
  height: 12px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 255, 0.94));
  box-shadow: var(--ox-shadow-soft);
  overflow: hidden;
}

.auth-success__progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #71d39a, var(--ox-primary));
}

.auth-success__actions {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.auth-success__loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.auth-success__loader span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ox-accent);
  opacity: 0.25;
  animation: auth-loader-dot 1.1s ease-in-out infinite;
}

.auth-success__loader span:nth-child(2) {
  animation-delay: 0.15s;
}

.auth-success__loader span:nth-child(3) {
  animation-delay: 0.3s;
}

.auth-success__typing {
  margin: -4px 0 0;
  font-size: 0.82rem;
  color: var(--ox-text-2);
}

.auth-success__meta {
  color: var(--ox-text-2);
  font-size: 0.82rem;
}

.auth-page.auth-success-ready .auth-success__badge {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.auth-page.auth-success-ready .auth-success__progress span {
  animation: auth-success-progress 1.35s ease forwards;
}

@keyframes auth-success-progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes auth-loader-dot {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.25;
  }
  40% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

@keyframes auth-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes auth-card-attention {
  10%,
  90% {
    transform: translateX(-1px);
  }
  20%,
  80% {
    transform: translateX(2px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-3px);
  }
  40%,
  60% {
    transform: translateX(3px);
  }
}

/* Safety overrides to prevent historical collapse states */
.main,
.settings-module,
.wx-list-center,
.wx-settings-inner,
.wx-panel,
.wx-suite-section,
.wx-workspace-surface,
.wx-workspace-surface--table {
  max-width: none;
  min-width: 0;
}

.main .settings-module,
.main .wx-list-center,
.main .wx-settings-inner {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

.main .wx-orders-center,
.main .wx-orders-page .wx-panel,
.main .wx-orders-page .wx-orders-status-strip,
.main .wx-orders-page .wx-orders-search-strip {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

.wx-list-page .wx-list-center > * {
  width: 100% !important;
  max-width: none !important;
}

/* Responsive */
@media (max-width: 1320px) {
  :root {
    --ox-content-max: 1280px;
  }

  .wx-workspace-summary,
  .wx-email-metric-grid,
  .wx-control-overview__grid,
  .settings-hub-head-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wx-chat-grid,
  .wx-workspace-detail {
    grid-template-columns: 1fr;
  }

  .wx-dashboard-analytics {
    grid-template-columns: 1fr;
  }

  .wx-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wx-kpi-grid--dashboard {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wx-insight-grid {
    grid-template-columns: 1fr;
  }

  .wx-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wx-workspace-surface--sticky {
    position: static;
  }

  .wx-control-fav-grid,
  .wx-module-categories,
  .wx-home-profile-grid,
  .wx-home-zones {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1080px) {
  .app {
    grid-template-columns: 1fr;
  }

  .ox-sidebar {
    display: none;
  }

  .side-mob-toggle {
    display: inline-flex;
  }

  .ox-shell-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding-inline: 14px;
  }

  .ox-shell-topbar__center {
    order: 3;
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .ox-topbar-dashboard-controls {
    justify-content: flex-start;
  }

  .ox-topbar-dashboard-controls__label {
    display: none;
  }

  .ox-shell-topbar-head__title {
    text-align: left;
  }

  .ox-shell-topbar__right {
    margin-left: auto;
  }

  .main {
    padding: 14px;
  }

  .wx-suite-commandbar__row {
    grid-template-columns: 1fr;
  }

  .wx-panel-head,
  .wx-workspace-surface__head,
  .wx-suite-section__head,
  .settings-panel__head,
  .wx-workspace-surface__subhead,
  .wx-panel-head-split,
  .wx-workspace-detail-head,
  .wx-workspace-detail-head__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .wx-dashboard-shell__row {
    grid-template-columns: 1fr;
  }

  .wx-suite-commandbar__center,
  .wx-suite-commandbar__row-right,
  .wx-suite-commandbar__actions,
  .wx-products-command-actions,
  .wx-actions,
  .tasks-head-actions,
  .wx-period-toolbar,
  .wx-orders-status-strip__row,
  .wx-settings-inline-tabs {
    justify-content: flex-start;
  }

  .wx-workspace-toolbar__field,
  .wx-workspace-toolbar__field--wide,
  .wx-workspace-toolbar__actions,
  .wx-workspace-toolbar__grid--messages .wx-workspace-toolbar__field,
  .wx-workspace-toolbar__grid--messages .wx-workspace-toolbar__field--wide,
  .wx-workspace-toolbar__grid--logs .wx-workspace-toolbar__field,
  .wx-workspace-toolbar__grid--logs .wx-workspace-toolbar__field--wide,
  .wx-workspace-toolbar__grid--customers .wx-workspace-toolbar__field,
  .wx-workspace-toolbar__grid--customers .wx-workspace-toolbar__field--wide,
  .wx-orders-search-grid .wx-field,
  .wx-orders-search-grid .wx-field:first-child {
    grid-column: span 12;
  }

  .wx-workspace-toolbar__actions,
  .wx-field-actions {
    justify-content: flex-start;
  }

  .wx-filter-grid {
    grid-template-columns: 1fr;
  }

  .wx-workspace-toolbar,
  .wx-orders-status-strip,
  .wx-orders-search-strip,
  .wx-bulkbar,
  .table-wrap,
  .wx-table-wrap,
  .wx-workspace-table-wrap,
  .wx-responsive-table,
  .wx-revenue-breakdown {
    border-radius: 20px;
  }

  .wx-period-custom {
    grid-template-columns: 1fr;
  }

  .wx-module-categories,
  .wx-control-fav-grid {
    grid-template-columns: 1fr;
  }

  .settings-hub-v2__toolbar {
    grid-template-columns: 1fr;
  }

  .settings-hub-v2__meta {
    white-space: normal;
  }

  .settings-module .settings-panel {
    overflow-x: auto;
  }

  .settings-module .form-grid,
  .settings-module .wx-settings-form-grid {
    grid-template-columns: 1fr;
  }

  .settings-module .form-grid > * {
    grid-column: 1 / -1;
  }

  .ox-sb-style-grid {
    grid-template-columns: 1fr;
  }

  .ox-page-nav__mobile {
    display: grid;
    gap: 6px;
  }

  .ox-page-nav__mobile-label {
    font-size: 13px;
    color: var(--ox-text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .ox-page-nav__grid {
    display: none;
  }

  .table,
  .wx-workspace-table,
  .wx-orders-table,
  .wx-rules-table,
  .wx-email-templates-table,
  .wx-email-logs-table,
  .wx-customers-table {
    min-width: 0;
  }

  .wx-workspace-detail-head__actions,
  .wx-row-actions,
  .wx-workspace-row-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .ox-shell-topbar {
    align-items: start;
  }

  .ox-shell-topbar__right {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .wx-mode-toggle-form--topbar {
    width: 100%;
    justify-content: flex-start;
  }

  .ox-sb-group-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .ox-sb-group-meta {
    display: none;
  }

  .ox-sb-item {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 6px;
  }

  .ox-sb-item-visibility {
    grid-column: 2;
    justify-self: start;
  }

  .ox-sb-move,
  .ox-sb-item .badge {
    grid-column: 2;
    justify-self: start;
  }

  .ox-shell-topbar__switcher-select {
    min-width: 128px;
  }

  .ox-shell-topbar__switcher-btn {
    padding-inline: 9px;
  }

  .wx-workspace-summary,
  .wx-email-metric-grid,
  .wx-control-overview__grid,
  .settings-hub-head-metrics {
    grid-template-columns: 1fr;
  }

  .wx-kpi-grid {
    grid-template-columns: 1fr;
  }

  .wx-kpi-grid--dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wx-dashboard-analytics {
    gap: 16px;
  }

  .wx-trend-chart {
    grid-template-columns: repeat(auto-fit, minmax(28px, 1fr));
    gap: 6px;
  }

  .wx-info-tip__bubble {
    left: auto;
    right: 0;
    top: calc(100% + 8px);
    transform: none;
    max-width: min(280px, 82vw);
  }

  .wx-kpi-strip {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 18px;
  }

  .wx-kpi-strip__item {
    padding-right: 0;
    padding-bottom: 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(223, 231, 240, 0.44);
  }

  .wx-kpi-strip__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .wx-dashboard-shell__title {
    font-size: clamp(2rem, 6vw, 2.5rem);
    max-width: 14ch;
  }

  .wx-dashboard-shell__subtitle {
    font-size: 0.98rem;
    line-height: 1.56;
  }

  .wx-order-kv-grid {
    grid-template-columns: 1fr;
  }

  .settings-hub-v2__grid {
    grid-template-columns: 1fr;
  }

  .wx-cards {
    display: grid;
    gap: 10px;
  }

  .wx-orders-page .wx-responsive-table > table.wx-orders-table {
    display: none;
  }

  .wx-card {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(246, 249, 254, 0.96));
    box-shadow: var(--ox-shadow-card);
    padding: 14px;
    display: grid;
    gap: 8px;
  }

  .wx-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .wx-card-title {
    font-weight: 700;
    color: var(--ox-text-0);
  }

  .wx-kv {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    font-size: 0.82rem;
  }

  .wx-kv .k {
    color: var(--ox-text-2);
  }

  .wx-kv .v {
    color: var(--ox-text-0);
    min-width: 0;
    word-break: break-word;
  }

  .wx-chat-user-list,
  .wx-chat-messages {
    max-height: 40vh;
  }

  .wx-control-task {
    grid-template-columns: 1fr;
  }

  .wx-control-task__link,
  .wx-control-task__state {
    justify-self: start;
  }

  .wx-module-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .wx-module-row__tag {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .card,
  .wx-panel,
  .settings-panel,
  .wx-workspace-surface,
  .wx-suite-section,
  .wx-kpi-card {
    border-radius: 20px;
    padding: 16px;
  }

  .wx-suite-commandbar,
  .wx-orders-status-strip,
  .wx-orders-search-strip,
  .wx-bulkbar,
  .wx-workspace-toolbar,
  .table-wrap,
  .wx-table-wrap,
  .wx-workspace-table-wrap,
  .wx-responsive-table {
    border-radius: 18px;
  }

  .wx-revenue-breakdown {
    padding: 18px;
    gap: 14px;
  }

  .wx-revenue-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 0;
  }

  .wx-revenue-row__delta {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .wx-revenue-breakdown__meta {
    grid-template-columns: 1fr;
  }

  .wx-workspace-detail-head__state {
    width: 100%;
    justify-content: flex-start;
  }

  .wx-workspace-toolbar__actions,
  .wx-field-actions,
  .wx-workspace-detail-head__actions,
  .wx-row-actions,
  .wx-workspace-row-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .wx-orders-status-strip__row,
  .wx-suite-commandbar__actions,
  .wx-period-toolbar,
  .wx-home-tabs,
  .ox-page-nav__mobile {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }

  .wx-orders-status-strip__row > *,
  .wx-suite-commandbar__actions > *,
  .wx-period-toolbar > *,
  .wx-home-tabs > * {
    flex: 0 0 auto;
  }

  .auth-page {
    align-items: stretch;
    justify-items: stretch;
    padding: 0;
  }

  .auth-bg-canvas {
    opacity: 0.62;
  }

  .auth-bg-noise {
    opacity: 0.08;
  }

  .auth-wrap {
    width: 100%;
    min-height: var(--auth-vh, 100dvh);
    align-content: stretch;
  }

  .auth-card {
    min-height: var(--auth-vh, 100dvh);
    border-radius: 0;
    padding: calc(20px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
    display: grid;
    align-content: start;
    gap: 10px;
    box-shadow: none;
  }

  .auth-brand-logo {
    width: 150px;
  }

  .auth-brand-logo--success {
    width: 164px;
  }

  .auth-brand-hero {
    min-height: 150px;
    gap: 8px;
  }

  .auth-animated-title {
    min-height: 2.05em;
  }

  .auth-sub {
    font-size: 0.88rem;
  }

  .auth-page.auth-compact .auth-card {
    border-radius: 0;
  }

  .auth-success {
    gap: 16px;
  }

  .auth-success__badge {
    width: 82px;
    height: 82px;
    border-radius: 26px;
  }
}

@media (max-width: 480px) {
  .main {
    padding: 10px;
  }

  .ox-shell-topbar {
    padding-inline: 10px;
  }

  .ox-shell-topbar__switcher {
    max-width: 100%;
  }

  .ox-shell-topbar__switcher-select {
    min-width: 0;
    width: 100%;
    max-width: min(46vw, 180px);
  }

  .ox-shell-topbar__right {
    width: 100%;
    justify-content: flex-end;
  }

  .ox-sidebar__brand {
    min-height: 66px;
    width: min(100%, 182px);
    border-radius: 24px;
  }

  .ox-sidebar__brand-logo {
    width: min(100%, 128px);
  }

  .card,
  .wx-panel,
  .settings-panel,
  .wx-workspace-surface,
  .wx-suite-section,
  .wx-kpi-card,
  .wx-revenue-breakdown {
    border-radius: 18px;
    padding: 14px;
  }

  .wx-kpi-card {
    min-height: auto;
  }

  .wx-dashboard-shell__title {
    font-size: clamp(1.9rem, 9vw, 2.35rem);
    line-height: 1.08;
  }

  .wx-dashboard-shell__subtitle {
    font-size: 0.94rem;
    line-height: 1.5;
  }

  body:not(.ox-shell-canonical) .ox-global-toasts {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .auth-wrap {
    align-content: stretch;
  }

  .auth-card {
    border-radius: 0;
    padding: calc(18px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
  }

  .auth-brand-hero {
    min-height: 138px;
    gap: 7px;
  }

  .auth-animated-title {
    min-height: 2em;
    font-size: clamp(1.86rem, 10vw, 2.2rem);
  }

  .auth-sub {
    font-size: 0.84rem;
  }

  .auth-success__progress {
    width: 100%;
  }

  .auth-success__actions {
    width: 100%;
  }

  .auth-success__actions .btn {
    width: 100%;
  }
}

/* Email rules mode */
html[data-email-uimode="simple"] .email-templates-page .ox-adv {
  display: none !important;
}

html[data-email-uimode="advanced"] .email-templates-page .ox-adv {
  display: table-cell;
}

/* Email rules page layout stabilization */
.main .wx-workspace-page--rules > .wx-list-center {
  width: min(100%, 1460px) !important;
  margin-inline: auto !important;
}

.wx-workspace-page--rules .wx-email-rules-mode {
  display: flex;
  justify-content: center;
}

.wx-workspace-page--rules .ox-email-mode.wx-segment-control {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

.wx-workspace-page--rules .wx-email-rules-form {
  display: grid;
  gap: 12px;
}

.wx-workspace-page--rules .wx-email-rule-status {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.wx-workspace-page--rules .wx-email-rule-status__title {
  font-size: 0.84rem;
  font-weight: 670;
  color: var(--ox-text-0);
}

.wx-workspace-page--rules .wx-email-rule-status__meta {
  font-size: 0.75rem;
  color: var(--ox-text-2);
  line-height: 1.3;
}

.wx-workspace-page--rules .wx-email-rule-select {
  width: 100%;
  min-width: 220px;
}

.wx-workspace-page--rules .wx-email-rule-enabled {
  width: 120px;
  min-width: 120px;
  text-align: center;
  vertical-align: middle;
}

.wx-workspace-page--rules .wx-email-rule-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  width: auto;
}

.wx-workspace-page--rules .wx-email-rule-toggle input {
  margin: 0;
}

.wx-workspace-page--rules .wx-email-rule-row--warn {
  background: rgba(255, 241, 219, 0.62);
}

.wx-workspace-page--rules .wx-email-rule-row--warn:hover {
  background: rgba(255, 231, 197, 0.84);
}

.wx-segment-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(142, 169, 194, 0.46);
  background: rgba(247, 251, 255, 0.9);
}

.wx-segment-control__opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(138, 165, 192, 0.52);
  background: rgba(255, 255, 255, 0.92);
  color: #2b4a67;
  font-size: 0.82rem;
  font-weight: 640;
  cursor: pointer;
}

.wx-segment-control__opt input {
  accent-color: var(--ox-accent);
}

.wx-segment-control__opt:has(input:checked) {
  border-color: rgba(212, 122, 31, 0.42);
  background: #ffe7cb;
  color: #7f4408;
}

.ox-email-mode__hint {
  font-size: 0.8rem;
  color: var(--ox-text-2);
}

/* Misc module helpers */
.wx-inline {
  display: inline;
}

.wx-pages,
.wx-pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.wx-pages a,
.wx-pager a {
  min-height: 32px;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(139, 168, 194, 0.52);
  background: rgba(255, 255, 255, 0.9);
  color: #2f4e6a;
  padding: 0 8px;
}

.wx-pages a.is-active,
.wx-pager a.is-active {
  border-color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, rgba(255, 243, 228, 0.98), rgba(255, 233, 205, 0.96));
  color: var(--ox-accent);
  box-shadow: var(--ox-shadow-micro);
}

@media (max-width: 540px) {
  .wx-kpi-grid--dashboard {
    grid-template-columns: 1fr;
  }

  .wx-insight-card {
    padding: 12px;
  }

  .wx-trend-chart {
    grid-template-columns: repeat(auto-fit, minmax(24px, 1fr));
    gap: 5px;
  }

  .wx-trend-chart__bars {
    gap: 4px;
  }

  .wx-trend-chart__bar {
    width: 9px;
  }
}

/* Keep technical hidden columns readable in advanced mode */
.ox-adv code {
  white-space: nowrap;
  font-size: 0.74rem;
}

/* Calendar styles are merged below from calendar_workspace.css */


/* ---- Calendar merged from modules/calendar_modul/assets/calendar_workspace.css ---- */
/* Calendar canonical workspace layer (2026-03) */
body.ox-nav--module-calendar .calendar-module {
  --cal-surface: rgba(255, 255, 255, .9);
  --cal-surface-strong: #ffffff;
  --cal-line: rgba(15, 23, 42, .1);
  --cal-line-soft: rgba(15, 23, 42, .06);
  --cal-text: #0f172a;
  --cal-muted: #5f6f85;
  --cal-kicker: #7a889c;
  --cal-amber-rgb: 59, 99, 243;
  --cal-amber-dark: #2648c5;
  --cal-danger: #9a3412;
}

body.ox-nav--module-calendar .calendar-module .wx-list-center,
body.ox-nav--module-calendar .calendar-module .wx-settings-inner {
  max-width: none;
  width: 100%;
}

body.ox-nav--module-calendar .calendar-module .wx-list-center {
  padding-inline: 0;
}

body.ox-nav--module-calendar .calendar-module .calendar-shell {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .82);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .94));
  box-shadow: var(--ox-shadow-card);
  overflow: hidden;
  padding: 0;
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--cal-line);
  background: rgba(248, 251, 255, .95);
  backdrop-filter: none;
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__topline {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__titleblock {
  display: grid;
  gap: 6px;
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__title {
  margin: 0;
  font-size: clamp(24px, 1.8vw, 32px);
  line-height: 1.08;
  letter-spacing: -.018em;
  color: var(--cal-text);
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__lead {
  margin: 0;
  font-size: 13px;
  color: var(--cal-muted);
  max-width: 86ch;
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__workspace-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 3px;
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__workspace-tabs::-webkit-scrollbar {
  display: none;
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__workspace-tab,
body.ox-nav--module-calendar .calendar-module .calendar-shell__view-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid var(--cal-line);
  background: rgba(255, 255, 255, .74);
  color: var(--cal-muted);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease;
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__workspace-tab:hover,
body.ox-nav--module-calendar .calendar-module .calendar-shell__view-tab:hover {
  border-color: rgba(var(--cal-amber-rgb), .35);
  color: var(--cal-text);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--ox-shadow-micro);
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__workspace-tab.is-active,
body.ox-nav--module-calendar .calendar-module .calendar-shell__view-tab.is-active {
  border-color: rgba(255, 255, 255, .88);
  color: var(--cal-amber-dark);
  background: linear-gradient(180deg, rgba(240, 245, 255, .98), rgba(234, 240, 255, .94));
  box-shadow: var(--ox-shadow-soft), inset 0 0 0 1px rgba(var(--cal-amber-rgb), .08);
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__tab-badge {
  min-width: 18px;
  min-height: 18px;
  border-radius: 999px;
  padding: 0 6px;
  background: rgba(15, 23, 42, .09);
  color: var(--cal-text);
  font-size: 13px;
  font-weight: 700;
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__toolbar {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__toolbar-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__toolbar-block--range {
  justify-content: center;
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__toolbar-block--actions {
  justify-content: flex-end;
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__view-tabs {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__view-tabs::-webkit-scrollbar {
  display: none;
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__range-label {
  min-width: 180px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cal-text);
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__status {
  min-height: 20px;
  font-size: 13px;
  color: var(--cal-muted);
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__status.is-error {
  color: var(--cal-danger);
}

body.ox-nav--module-calendar .calendar-module .calendar-shell__body {
  padding: 18px 20px 20px;
  display: grid;
  gap: 18px;
}

body.ox-nav--module-calendar .calendar-module .calendar-workspace {
  display: grid;
  gap: 14px;
}

body.ox-nav--module-calendar .calendar-module .calendar-page-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body.ox-nav--module-calendar .calendar-module .calendar-page-intro__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body.ox-nav--module-calendar .calendar-module .calendar-page-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--cal-text);
}

body.ox-nav--module-calendar .calendar-module .calendar-page-desc {
  margin: 6px 0 0;
  max-width: 78ch;
  font-size: 13px;
  color: var(--cal-muted);
}

body.ox-nav--module-calendar .calendar-module .calendar-card-kicker,
body.ox-nav--module-calendar .calendar-module .calendar-kpi-card__label {
  color: var(--cal-kicker);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 13px;
  font-weight: 700;
}

body.ox-nav--module-calendar .calendar-module .calendar-sync-flag {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, .06);
  color: var(--cal-muted);
  font-size: 13px;
  font-weight: 600;
}

body.ox-nav--module-calendar .calendar-module .calendar-sync-flag.is-ok {
  background: rgba(22, 163, 74, .12);
  color: #166534;
}

body.ox-nav--module-calendar .calendar-module .calendar-sync-flag.is-error {
  background: rgba(194, 65, 12, .11);
  color: #9a3412;
}

body.ox-nav--module-calendar .calendar-module .calendar-sync-flag.is-muted {
  opacity: .78;
}

body.ox-nav--module-calendar .calendar-module .calendar-workspace__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body.ox-nav--module-calendar .calendar-module .calendar-kpi-card,
body.ox-nav--module-calendar .calendar-module .calendar-surface-card {
  border: 1px solid var(--cal-line);
  border-radius: 16px;
  background: var(--cal-surface);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}

body.ox-nav--module-calendar .calendar-module .calendar-kpi-card {
  padding: 12px 14px;
  display: grid;
  gap: 5px;
}

body.ox-nav--module-calendar .calendar-module .calendar-kpi-card__value {
  font-size: 27px;
  line-height: 1;
  font-weight: 800;
  color: var(--cal-text);
}

body.ox-nav--module-calendar .calendar-module .calendar-kpi-card__meta {
  font-size: 13px;
  color: var(--cal-muted);
}

body.ox-nav--module-calendar .calendar-module .calendar-surface-card {
  padding: 14px;
}

body.ox-nav--module-calendar .calendar-module .calendar-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

body.ox-nav--module-calendar .calendar-module .calendar-card-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  color: var(--cal-text);
}

/* Today workspace */
body.ox-nav--module-calendar .calendar-module .calendar-today-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.ox-nav--module-calendar .calendar-module .calendar-overview-card__body,
body.ox-nav--module-calendar .calendar-module .calendar-roster-summary {
  display: grid;
  gap: 8px;
}

body.ox-nav--module-calendar .calendar-module .calendar-overview-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 11px;
  background: rgba(var(--cal-amber-rgb), .11);
  color: var(--cal-amber-dark);
}

body.ox-nav--module-calendar .calendar-module .calendar-overview-stat strong {
  font-size: 24px;
  line-height: 1;
  color: var(--cal-text);
}

body.ox-nav--module-calendar .calendar-module .calendar-overview-stat span {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: inherit;
}

body.ox-nav--module-calendar .calendar-module .calendar-overview-stat.is-warn {
  background: rgba(194, 65, 12, .12);
  color: #9a3412;
}

body.ox-nav--module-calendar .calendar-module .calendar-overview-link {
  display: grid;
  gap: 3px;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--cal-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .78);
  color: inherit;
  text-decoration: none;
}

body.ox-nav--module-calendar .calendar-module .calendar-overview-link strong {
  color: var(--cal-text);
}

body.ox-nav--module-calendar .calendar-module .calendar-overview-link span,
body.ox-nav--module-calendar .calendar-module .calendar-overview-inline-metrics span {
  color: var(--cal-muted);
  font-size: 13px;
}

body.ox-nav--module-calendar .calendar-module .calendar-overview-link.is-static {
  cursor: default;
}

body.ox-nav--module-calendar .calendar-module .calendar-overview-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 5px;
  padding: 14px;
  border-radius: 12px;
  border: 1px dashed rgba(15, 23, 42, .16);
  background: rgba(245, 248, 252, .8);
}

body.ox-nav--module-calendar .calendar-module .calendar-overview-inline-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Calendar workspace */
body.ox-nav--module-calendar .calendar-module .calendar-calendar-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  gap: 12px;
  align-items: start;
}

body.ox-nav--module-calendar .calendar-module .calendar-calendar-rail,
body.ox-nav--module-calendar .calendar-module .calendar-calendar-context {
  display: grid;
  gap: 12px;
}

body.ox-nav--module-calendar .calendar-module .calendar-board {
  min-height: 640px;
  position: relative;
  background: var(--cal-surface-strong);
}

body.ox-nav--module-calendar .calendar-module .calendar-board__loading {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--cal-line);
  background: rgba(248, 250, 255, .94);
  font-size: 13px;
  color: var(--cal-muted);
}

body.ox-nav--module-calendar .calendar-module .calendar-selected-event {
  display: grid;
  gap: 8px;
}

body.ox-nav--module-calendar .calendar-module .calendar-selected-event__title {
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
}

body.ox-nav--module-calendar .calendar-module .calendar-selected-event__meta,
body.ox-nav--module-calendar .calendar-module .calendar-selected-event__description {
  font-size: 13px;
  color: var(--cal-muted);
}

body.ox-nav--module-calendar .calendar-module .calendar-selected-event__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

body.ox-nav--module-calendar .calendar-module .calendar-tag-list,
body.ox-nav--module-calendar .calendar-module .calendar-mini-list {
  display: grid;
  gap: 8px;
}

body.ox-nav--module-calendar .calendar-module .calendar-tag {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 11px;
  background: rgba(15, 23, 42, .05);
}

body.ox-nav--module-calendar .calendar-module .calendar-tag__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}

body.ox-nav--module-calendar .calendar-module .calendar-mini-list__item {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 9px 10px;
  border-radius: 11px;
  border: 1px solid var(--cal-line);
  background: rgba(255, 255, 255, .76);
}

body.ox-nav--module-calendar .calendar-module .calendar-mini-list__item strong {
  color: var(--cal-text);
}

body.ox-nav--module-calendar .calendar-module .calendar-mini-list__item span {
  color: var(--cal-muted);
  font-size: 13px;
}

/* Board views */
body.ox-nav--module-calendar .calendar-module .calendar-view-panel[hidden] {
  display: none !important;
}

body.ox-nav--module-calendar .calendar-module .calendar-month-grid__head,
body.ox-nav--module-calendar .calendar-module .calendar-month-grid__body {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

body.ox-nav--module-calendar .calendar-module .calendar-month-grid__head {
  margin-bottom: 8px;
}

body.ox-nav--module-calendar .calendar-module .calendar-month-grid__weekday {
  text-align: center;
  color: var(--cal-kicker);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 13px;
}

body.ox-nav--module-calendar .calendar-module .calendar-month-cell {
  min-height: 136px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--cal-line);
  background: #fff;
}

body.ox-nav--module-calendar .calendar-module .calendar-month-cell.is-out {
  opacity: .58;
}

body.ox-nav--module-calendar .calendar-module .calendar-month-cell.is-today {
  border-color: rgba(var(--cal-amber-rgb), .4);
  box-shadow: inset 0 0 0 1px rgba(var(--cal-amber-rgb), .16);
}

body.ox-nav--module-calendar .calendar-module .calendar-month-cell__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.ox-nav--module-calendar .calendar-module .calendar-month-cell__date {
  font-weight: 800;
  font-size: 14px;
  color: var(--cal-text);
}

body.ox-nav--module-calendar .calendar-module .calendar-month-cell__events {
  display: grid;
  align-content: start;
  gap: 6px;
}

body.ox-nav--module-calendar .calendar-module .calendar-month-event {
  display: grid;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  border-radius: 9px;
  border: 1px solid rgba(var(--cal-amber-rgb), .18);
  background: rgba(var(--cal-amber-rgb), .1);
  color: var(--cal-amber-dark);
}

body.ox-nav--module-calendar .calendar-module .calendar-month-event__time {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

body.ox-nav--module-calendar .calendar-module .calendar-month-event__title {
  color: var(--cal-text);
  font-size: 13px;
  font-weight: 700;
}

body.ox-nav--module-calendar .calendar-module .calendar-month-more {
  font-size: 13px;
  color: var(--cal-muted);
}

body.ox-nav--module-calendar .calendar-module .calendar-time-grid__shell {
  display: grid;
  border: 1px solid var(--cal-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

body.ox-nav--module-calendar .calendar-module .calendar-time-grid__shell--1 .calendar-time-grid__head,
body.ox-nav--module-calendar .calendar-module .calendar-time-grid__shell--1 .calendar-time-grid__body {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
}

body.ox-nav--module-calendar .calendar-module .calendar-time-grid__shell--7 .calendar-time-grid__head,
body.ox-nav--module-calendar .calendar-module .calendar-time-grid__shell--7 .calendar-time-grid__body {
  display: grid;
  grid-template-columns: 62px repeat(7, minmax(0, 1fr));
}

body.ox-nav--module-calendar .calendar-module .calendar-time-grid__corner,
body.ox-nav--module-calendar .calendar-module .calendar-time-grid__day-head {
  padding: 8px 10px;
  border-bottom: 1px solid var(--cal-line);
  background: rgba(15, 23, 42, .04);
}

body.ox-nav--module-calendar .calendar-module .calendar-time-grid__corner {
  color: var(--cal-kicker);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 13px;
}

body.ox-nav--module-calendar .calendar-module .calendar-time-grid__day-head {
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--cal-text);
}

body.ox-nav--module-calendar .calendar-module .calendar-time-grid__axis {
  display: grid;
}

body.ox-nav--module-calendar .calendar-module .calendar-time-grid__axis-hour {
  height: 52px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--cal-line-soft);
  font-size: 13px;
  color: var(--cal-kicker);
}

body.ox-nav--module-calendar .calendar-module .calendar-time-grid__day {
  position: relative;
  display: grid;
  border-left: 1px solid var(--cal-line-soft);
}

body.ox-nav--module-calendar .calendar-module .calendar-time-grid__slot-row {
  height: 52px;
  border-bottom: 1px solid var(--cal-line-soft);
}

body.ox-nav--module-calendar .calendar-module .calendar-time-grid__events {
  position: absolute;
  inset: 0;
  padding: 2px 4px;
}

body.ox-nav--module-calendar .calendar-module .calendar-time-event {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 10px;
  border: 1px solid rgba(var(--cal-amber-rgb), .26);
  background: linear-gradient(180deg, rgba(var(--cal-amber-rgb), .2), rgba(var(--cal-amber-rgb), .08));
  color: var(--cal-text);
  padding: 8px 8px 13px;
  overflow: hidden;
}

body.ox-nav--module-calendar .calendar-module .calendar-time-event.is-selected {
  border-color: rgba(var(--cal-amber-rgb), .52);
  box-shadow: 0 0 0 2px rgba(var(--cal-amber-rgb), .12);
}

body.ox-nav--module-calendar .calendar-module .calendar-time-event__title {
  font-size: 13px;
  font-weight: 700;
}

body.ox-nav--module-calendar .calendar-module .calendar-time-event__meta {
  font-size: 13px;
  color: #64748b;
}

body.ox-nav--module-calendar .calendar-module .calendar-time-event__resize {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .2);
  cursor: ns-resize;
}

body.ox-nav--module-calendar .calendar-module .calendar-list-view,
body.ox-nav--module-calendar .calendar-module .calendar-task-list {
  display: grid;
  gap: 8px;
}

body.ox-nav--module-calendar .calendar-module .calendar-list-card,
body.ox-nav--module-calendar .calendar-module .calendar-task-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--cal-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
}

body.ox-nav--module-calendar .calendar-module .calendar-list-card.is-selected {
  border-color: rgba(var(--cal-amber-rgb), .5);
}

body.ox-nav--module-calendar .calendar-module .calendar-task-card.is-done strong {
  text-decoration: line-through;
  opacity: .66;
}

body.ox-nav--module-calendar .calendar-module .calendar-list-card__main,
body.ox-nav--module-calendar .calendar-module .calendar-task-card__main {
  display: grid;
  gap: 4px;
}

body.ox-nav--module-calendar .calendar-module .calendar-list-card__meta,
body.ox-nav--module-calendar .calendar-module .calendar-task-card__meta {
  font-size: 13px;
  color: var(--cal-muted);
}

body.ox-nav--module-calendar .calendar-module .calendar-list-card__actions,
body.ox-nav--module-calendar .calendar-module .calendar-task-card__actions {
  display: flex;
  align-items: center;
}

body.ox-nav--module-calendar .calendar-module .calendar-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

body.ox-nav--module-calendar .calendar-module .calendar-filter-chip {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 10px;
  border: 1px solid var(--cal-line);
  background: rgba(15, 23, 42, .04);
  color: var(--cal-muted);
  font-weight: 600;
  font-size: 13px;
}

body.ox-nav--module-calendar .calendar-module .calendar-filter-chip.is-active {
  border-color: rgba(var(--cal-amber-rgb), .44);
  background: rgba(var(--cal-amber-rgb), .11);
  color: var(--cal-amber-dark);
}

/* Resources and tables */
body.ox-nav--module-calendar .calendar-module .calendar-page-layout {
  display: grid;
  gap: 12px;
  align-items: start;
}

body.ox-nav--module-calendar .calendar-module .calendar-page-layout--resources,
body.ox-nav--module-calendar .calendar-module .calendar-page-layout--roster,
body.ox-nav--module-calendar .calendar-module .calendar-page-layout--attendance {
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .9fr);
}

body.ox-nav--module-calendar .calendar-module .calendar-v2-resource-list {
  display: grid;
  gap: 8px;
}

body.ox-nav--module-calendar .calendar-module .calendar-v2-resource-card {
  display: grid;
  gap: 4px;
  border: 1px solid var(--cal-line);
  border-radius: 11px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .76);
}

body.ox-nav--module-calendar .calendar-module .calendar-v2-resource-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

body.ox-nav--module-calendar .calendar-module .calendar-resource-board__grid {
  display: grid;
  gap: 10px;
}

body.ox-nav--module-calendar .calendar-module .calendar-resource-lane {
  border: 1px solid var(--cal-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
  overflow: hidden;
}

body.ox-nav--module-calendar .calendar-module .calendar-resource-lane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cal-line);
}

body.ox-nav--module-calendar .calendar-module .calendar-resource-lane__body {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}

body.ox-nav--module-calendar .calendar-module .calendar-resource-card {
  display: grid;
  gap: 4px;
  text-align: left;
  border: 1px solid var(--cal-line);
  border-radius: 10px;
  background: rgba(15, 23, 42, .04);
  padding: 8px 10px;
}

body.ox-nav--module-calendar .calendar-module .calendar-resource-card span {
  color: var(--cal-muted);
  font-size: 13px;
}

body.ox-nav--module-calendar .calendar-module .calendar-mini-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.ox-nav--module-calendar .calendar-module .calendar-mini-kpis--large {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.ox-nav--module-calendar .calendar-module .calendar-mini-kpi {
  display: grid;
  gap: 5px;
  border: 1px solid var(--cal-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .75);
  padding: 9px 10px;
}

body.ox-nav--module-calendar .calendar-module .calendar-mini-kpi span {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cal-kicker);
}

body.ox-nav--module-calendar .calendar-module .calendar-mini-kpi strong {
  font-size: 14px;
  color: var(--cal-text);
}

body.ox-nav--module-calendar .calendar-module .calendar-v2-inline-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

body.ox-nav--module-calendar .calendar-module .calendar-v2-inline-form--filters {
  grid-template-columns: auto 1fr 1fr auto;
}

body.ox-nav--module-calendar .calendar-module .calendar-v2-att-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

body.ox-nav--module-calendar .calendar-module .calendar-v2-att-form,
body.ox-nav--module-calendar .calendar-module .calendar-v2-att-kpi {
  border: 1px solid var(--cal-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .78);
}

body.ox-nav--module-calendar .calendar-module .calendar-v2-att-form {
  display: grid;
  gap: 8px;
  padding: 10px;
}

body.ox-nav--module-calendar .calendar-module .calendar-v2-att-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.ox-nav--module-calendar .calendar-module .calendar-v2-att-kpi {
  padding: 8px 10px;
}

body.ox-nav--module-calendar .calendar-module .calendar-v2-no-show-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

body.ox-nav--module-calendar .calendar-module .calendar-v2-table-wrap {
  overflow-x: auto;
}

body.ox-nav--module-calendar .calendar-module .calendar-v2-blocktime-form,
body.ox-nav--module-calendar .calendar-module .calendar-v2-roster-form {
  display: grid;
  gap: 8px;
}

body.ox-nav--module-calendar .calendar-module .calendar-v2-row {
  display: grid;
  gap: 6px;
}

body.ox-nav--module-calendar .calendar-module .calendar-v2-row-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.ox-nav--module-calendar .calendar-module .calendar-v2-block-board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid var(--cal-line);
  border-radius: 11px;
  padding: 8px;
  max-height: 220px;
  overflow: auto;
  background: rgba(255, 255, 255, .72);
}

body.ox-nav--module-calendar .calendar-module .calendar-v2-slot {
  min-height: 26px;
  border-radius: 8px;
  border: 1px solid var(--cal-line);
  background: rgba(255, 255, 255, .74);
  color: var(--cal-kicker);
  font-size: 13px;
}

body.ox-nav--module-calendar .calendar-module .calendar-v2-slot.is-selected {
  border-color: rgba(var(--cal-amber-rgb), .54);
  background: rgba(var(--cal-amber-rgb), .16);
  color: var(--cal-text);
}

body.ox-nav--module-calendar .calendar-module .calendar-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.ox-nav--module-calendar .calendar-module .calendar-form-grid .field-full {
  grid-column: 1 / -1;
}

body.ox-nav--module-calendar .calendar-module .calendar-form-actions,
body.ox-nav--module-calendar .calendar-module .calendar-inline-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

body.ox-nav--module-calendar .calendar-module .calendar-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cal-text);
}

body.ox-nav--module-calendar .calendar-module .calendar-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.ox-nav--module-calendar .calendar-module .calendar-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgba(var(--cal-amber-rgb), .13);
  color: var(--cal-amber-dark);
  font-weight: 700;
}

body.ox-nav--module-calendar .calendar-module .calendar-pill--ghost {
  background: rgba(15, 23, 42, .07);
  color: var(--cal-muted);
}

body.ox-nav--module-calendar .calendar-module .calendar-empty-state {
  min-height: 180px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
  border-radius: 12px;
  border: 1px dashed var(--cal-line);
  background: rgba(248, 251, 255, .8);
}

body.ox-nav--module-calendar .calendar-module .calendar-empty-state__title {
  margin: 0 0 5px;
  font-size: 18px;
  font-weight: 800;
  color: var(--cal-text);
}

body.ox-nav--module-calendar .calendar-module .calendar-empty-state__desc {
  margin: 0;
  color: var(--cal-muted);
  font-size: 13px;
}

body.ox-nav--module-calendar .calendar-module .calendar-drawer-backdrop,
body.ox-nav--module-calendar .calendar-module .calendar-side-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .4);
  backdrop-filter: none;
}

body.ox-nav--module-calendar .calendar-module .calendar-drawer-backdrop {
  z-index: 1000;
}

body.ox-nav--module-calendar .calendar-module .calendar-side-sheet-backdrop {
  z-index: 996;
}

body.ox-nav--module-calendar .calendar-module .calendar-side-sheet,
body.ox-nav--module-calendar .calendar-module .calendar-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 100vw);
  padding: 14px 14px 14px 0;
}

body.ox-nav--module-calendar .calendar-module .calendar-side-sheet {
  z-index: 997;
}

body.ox-nav--module-calendar .calendar-module .calendar-drawer {
  z-index: 1001;
}

body.ox-nav--module-calendar .calendar-module .calendar-side-sheet__panel,
body.ox-nav--module-calendar .calendar-module .calendar-drawer__panel {
  height: 100%;
  overflow: auto;
  border-radius: 20px 0 0 20px;
  border: 1px solid rgba(148, 163, 184, .2);
  background: rgba(255, 255, 255, .98);
  box-shadow: -20px 0 40px rgba(15, 23, 42, .18);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.ox-nav--module-calendar .calendar-module .calendar-drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

body.ox-nav--module-calendar .calendar-module .calendar-drawer__form {
  flex: 1 1 auto;
}

body.ox-nav--module-calendar .calendar-module .calendar-table th,
body.ox-nav--module-calendar .calendar-module .calendar-table td {
  vertical-align: middle;
}

/* Responsive */
@media (max-width: 1380px) {
  body.ox-nav--module-calendar .calendar-module .calendar-calendar-layout {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  body.ox-nav--module-calendar .calendar-module .calendar-calendar-context {
    grid-column: 1 / -1;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-workspace__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  body.ox-nav--module-calendar .calendar-module .calendar-shell__toolbar {
    grid-template-columns: 1fr;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-shell__toolbar-block--range,
  body.ox-nav--module-calendar .calendar-module .calendar-shell__toolbar-block--actions {
    justify-content: flex-start;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-page-layout--resources,
  body.ox-nav--module-calendar .calendar-module .calendar-page-layout--roster,
  body.ox-nav--module-calendar .calendar-module .calendar-page-layout--attendance {
    grid-template-columns: 1fr;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-mini-kpis--large {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.ox-nav--module-calendar .calendar-module .calendar-shell__body {
    padding: 14px;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-page-intro {
    flex-direction: column;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-page-intro__actions {
    width: 100%;
    justify-content: flex-start;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-today-layout,
  body.ox-nav--module-calendar .calendar-module .calendar-calendar-layout,
  body.ox-nav--module-calendar .calendar-module .calendar-workspace__summary,
  body.ox-nav--module-calendar .calendar-module .calendar-mini-kpis,
  body.ox-nav--module-calendar .calendar-module .calendar-mini-kpis--large,
  body.ox-nav--module-calendar .calendar-module .calendar-v2-att-grid,
  body.ox-nav--module-calendar .calendar-module .calendar-v2-att-summary,
  body.ox-nav--module-calendar .calendar-module .calendar-v2-row-2,
  body.ox-nav--module-calendar .calendar-module .calendar-form-grid {
    grid-template-columns: 1fr;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-form-grid .field-full {
    grid-column: auto;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-month-grid__head {
    display: none;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-month-grid__body {
    grid-template-columns: 1fr;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-month-cell {
    min-height: 0;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-time-grid__shell--7 .calendar-time-grid__head,
  body.ox-nav--module-calendar .calendar-module .calendar-time-grid__shell--7 .calendar-time-grid__body,
  body.ox-nav--module-calendar .calendar-module .calendar-time-grid__shell--1 .calendar-time-grid__head,
  body.ox-nav--module-calendar .calendar-module .calendar-time-grid__shell--1 .calendar-time-grid__body {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  body.ox-nav--module-calendar .calendar-module .calendar-time-grid__head .calendar-time-grid__day-head:nth-child(n + 3),
  body.ox-nav--module-calendar .calendar-module .calendar-time-grid__body .calendar-time-grid__day:nth-child(n + 3) {
    display: none;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-list-card,
  body.ox-nav--module-calendar .calendar-module .calendar-task-card {
    grid-template-columns: 1fr;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-list-card__actions,
  body.ox-nav--module-calendar .calendar-module .calendar-task-card__actions,
  body.ox-nav--module-calendar .calendar-module .calendar-form-actions,
  body.ox-nav--module-calendar .calendar-module .calendar-inline-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-drawer,
  body.ox-nav--module-calendar .calendar-module .calendar-side-sheet {
    width: 100vw;
    padding: 0;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-drawer__panel,
  body.ox-nav--module-calendar .calendar-module .calendar-side-sheet__panel {
    border-radius: 0;
    padding: 14px;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-table thead {
    display: none;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-table tbody tr {
    display: block;
    padding: 10px 11px;
    border: 1px solid var(--cal-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .82);
    margin-bottom: 8px;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-table tbody td {
    display: block;
    padding: 5px 0;
    border: 0;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--cal-kicker);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
}

/* Aggressive responsive refinement (2026-03-19) */
@media (max-width: 1080px) {
  body.ox-nav--module-calendar .calendar-module .calendar-shell {
    border-radius: 16px;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-shell__header {
    gap: 10px;
    padding: 12px 14px 11px;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-shell__title {
    font-size: clamp(20px, 3vw, 26px);
  }

  body.ox-nav--module-calendar .calendar-module .calendar-shell__lead {
    font-size: 13px;
    max-width: 100%;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-shell__body {
    padding: 12px;
    gap: 12px;
  }
}

@media (max-width: 760px) {
  body.ox-nav--module-calendar .calendar-module .calendar-shell__workspace-tabs,
  body.ox-nav--module-calendar .calendar-module .calendar-shell__view-tabs {
    padding-bottom: 2px;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-shell__workspace-tab,
  body.ox-nav--module-calendar .calendar-module .calendar-shell__view-tab {
    min-height: 32px;
    padding: 0 10px;
    font-size: 13px;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-shell__toolbar {
    gap: 8px;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-shell__toolbar .btn {
    min-height: 34px;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-shell__toolbar-block {
    width: 100%;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-shell__toolbar-block--range {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.ox-nav--module-calendar .calendar-module .calendar-shell__range-label {
    min-width: 0;
    grid-column: 1 / -1;
  }

  body.ox-nav--module-calendar .calendar-module .calendar-drawer__panel,
  body.ox-nav--module-calendar .calendar-module .calendar-side-sheet__panel {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
}

.ox-shell-root .wx-orders-page .wx-orders-commandbar {
  padding: 18px 20px;
  border-radius: var(--ox-radius-lg);
  border: var(--ox-panel-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.97));
  box-shadow: var(--ox-shadow-card);
}

.ox-shell-root .wx-orders-page .wx-orders-commandbar__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ox-shell-root .wx-orders-page .wx-orders-commandbar__stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: none;
}

.ox-shell-root .wx-orders-page .wx-orders-commandbar__stat-label {
  font-size: 13px;
  color: var(--ox-text-2);
}

.ox-shell-root .wx-orders-page .wx-orders-commandbar__stat-value {
  font-size: 13px;
  color: var(--ox-text-0);
}

.ox-shell-root .wx-orders-page .wx-orders-strip,
.ox-shell-root .wx-orders-page .wx-orders-filterbar,
.ox-shell-root .wx-orders-page .wx-orders-results,
.ox-shell-root .wx-orders-page .wx-orders-bulkbar {
  border: 1px solid rgba(203, 213, 226, 0.88);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(244, 248, 253, 0.96));
  box-shadow: var(--ox-shadow-soft);
}

.ox-shell-root .wx-orders-page .wx-orders-status-strip,
.ox-shell-root .wx-orders-page .wx-orders-search-strip {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.ox-shell-root .wx-orders-page .wx-orders-strip,
.ox-shell-root .wx-orders-page .wx-orders-filterbar,
.ox-shell-root .wx-orders-page .wx-orders-results {
  margin-top: 12px;
}

.ox-shell-root .wx-orders-page .wx-orders-toolbar {
  margin-top: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ox-shell-root .wx-orders-page .wx-orders-status-strip__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ox-shell-root .wx-orders-page .wx-orders-status-btn {
  min-height: 38px;
  border-radius: 999px;
}

.ox-shell-root .wx-orders-page .wx-orders-search-grid {
  display: grid;
  grid-template-columns:
    minmax(220px, 1.25fr)
    minmax(140px, 170px)
    minmax(145px, 165px)
    minmax(145px, 165px)
    minmax(96px, 118px)
    auto;
  gap: 10px 12px;
}

.ox-shell-root .wx-orders-page .wx-orders-search-grid .wx-field,
.ox-shell-root .wx-orders-page .wx-orders-search-grid .wx-field-actions {
  grid-column: auto;
}

.ox-shell-root .wx-orders-page .wx-orders-bulkbar .wx-bulkbar-row {
  display: grid;
  grid-template-columns: minmax(210px, 320px) auto minmax(0, 1fr);
  align-items: end;
  gap: 10px 12px;
}

.ox-shell-root .wx-orders-page .wx-orders-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 960px;
}

.ox-shell-root .wx-orders-page .wx-orders-table thead th {
  padding: 11px 10px;
  border-bottom: 1px solid var(--ox-border-soft);
  color: var(--ox-text-2);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ox-shell-root .wx-orders-page .wx-orders-table tbody td {
  padding: 13px 10px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.72);
  vertical-align: top;
}

.ox-shell-root .wx-orders-page .wx-orders-table tbody tr:hover {
  background: rgba(248, 251, 255, 0.92);
}

.ox-shell-root .wx-orders-page .wx-orders-table tbody tr.is-selected {
  background: #f7f8fa;
}

.ox-shell-root .wx-orders-page .wx-status-editor {
  display: grid;
  gap: 0;
  min-width: 188px;
}

.ox-shell-root .wx-orders-page .wx-inline-status {
  display: grid;
  grid-template-columns: minmax(132px, 1fr) auto;
  gap: 8px;
}

.ox-shell-root .wx-orders-page .wx-row-actions {
  display: grid;
  align-items: end;
  justify-items: end;
  justify-content: end;
  gap: 6px;
  min-width: 118px;
}

.ox-shell-root .wx-orders-page .wx-order-code-link {
  color: var(--ox-text-0);
  font-weight: 780;
  white-space: nowrap;
  text-decoration: none;
}

.ox-shell-root .wx-orders-page .wx-order-code-link:hover,
.ox-shell-root .wx-orders-page .wx-order-code-link:focus-visible {
  color: var(--ox-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ox-shell-root .wx-orders-page .wx-invoice-badge {
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1.4px solid rgba(136, 160, 184, 0.95);
  background: linear-gradient(180deg, rgba(250, 253, 255, 0.98), rgba(243, 248, 254, 0.95));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 10px rgba(42, 74, 106, 0.12);
  font-size: 0.73rem;
  font-weight: 780;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.ox-shell-root .wx-orders-page .wx-invoice-badge--ok {
  border-color: rgba(31, 143, 92, 0.9);
  background: linear-gradient(180deg, rgba(220, 246, 232, 0.96), rgba(201, 239, 219, 0.93));
  color: #0f603a;
}

.ox-shell-root .wx-orders-page .wx-invoice-badge--none {
  border-color: rgba(120, 146, 172, 0.9);
  background: linear-gradient(180deg, rgba(242, 247, 252, 0.96), rgba(233, 240, 248, 0.92));
  color: #3a5068;
}

.ox-shell-root .wx-orders-page .wx-invoice-badge--warn {
  border-color: rgba(216, 137, 34, 0.9);
  background: linear-gradient(180deg, rgba(255, 241, 219, 0.98), rgba(255, 233, 196, 0.95));
  color: #9a5b00;
}

.ox-shell-root .wx-orders-page .wx-invoice-badge--bad {
  border-color: rgba(194, 79, 68, 0.9);
  background: linear-gradient(180deg, rgba(255, 233, 228, 0.98), rgba(255, 218, 212, 0.95));
  color: #8f2c23;
}

.ox-shell-root .wx-orders-page .wx-source-badge {
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1.2px solid rgba(136, 160, 184, 0.85);
  background: linear-gradient(180deg, rgba(250, 253, 255, 0.98), rgba(243, 248, 254, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 3px 8px rgba(42, 74, 106, 0.12);
  font-size: 0.7rem;
  font-weight: 760;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: #35526d;
}

.ox-shell-root .wx-orders-page .wx-source-badge--google {
  border-color: rgba(53, 125, 208, 0.75);
  background: linear-gradient(180deg, rgba(231, 244, 255, 0.98), rgba(214, 234, 255, 0.95));
  color: #1f5d97;
}

.ox-shell-root .wx-orders-page .wx-source-badge--facebook {
  border-color: rgba(67, 102, 191, 0.78);
  background: linear-gradient(180deg, rgba(233, 240, 255, 0.98), rgba(219, 230, 255, 0.95));
  color: #2d468e;
}

.ox-shell-root .wx-orders-page .wx-source-badge--instagram {
  border-color: rgba(190, 93, 161, 0.72);
  background: linear-gradient(180deg, rgba(255, 238, 248, 0.98), rgba(251, 224, 240, 0.95));
  color: #954676;
}

.ox-shell-root .wx-orders-page .wx-source-badge--tiktok {
  border-color: rgba(74, 123, 116, 0.72);
  background: linear-gradient(180deg, rgba(231, 248, 245, 0.98), rgba(212, 240, 235, 0.95));
  color: #286e61;
}

.ox-shell-root .wx-orders-page .wx-source-badge--organic {
  border-color: rgba(59, 137, 93, 0.78);
  background: linear-gradient(180deg, rgba(231, 248, 236, 0.98), rgba(214, 240, 223, 0.95));
  color: #236143;
}

.ox-shell-root .wx-orders-page .wx-source-badge--email {
  border-color: rgba(140, 114, 185, 0.74);
  background: linear-gradient(180deg, rgba(241, 235, 255, 0.98), rgba(229, 219, 250, 0.95));
  color: #65449b;
}

.ox-shell-root .wx-orders-page .wx-source-badge--direct {
  border-color: rgba(116, 137, 161, 0.72);
  background: linear-gradient(180deg, rgba(239, 245, 251, 0.98), rgba(226, 236, 246, 0.95));
  color: #3f5d7a;
}

.ox-shell-root .wx-orders-page .wx-source-badge--referral {
  border-color: rgba(210, 145, 74, 0.76);
  background: linear-gradient(180deg, rgba(255, 245, 227, 0.98), rgba(252, 235, 204, 0.95));
  color: #8d5c1e;
}

.ox-shell-root .wx-orders-page .wx-source-badge--unknown {
  border-color: rgba(150, 166, 183, 0.78);
  background: linear-gradient(180deg, rgba(243, 247, 252, 0.98), rgba(234, 241, 248, 0.95));
  color: #4a5f76;
}

.ox-shell-root .wx-orders-page .wx-cards {
  display: none;
  gap: 10px;
}

.ox-shell-root .wx-orders-page .wx-card {
  border-radius: 20px;
  border: var(--ox-panel-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.97));
  box-shadow: var(--ox-shadow-card);
  overflow: hidden;
}

.ox-shell-root .wx-orders-page .wx-card-head,
.ox-shell-root .wx-orders-page .wx-card-body,
.ox-shell-root .wx-orders-page .wx-card-actions {
  padding: 12px 13px;
}

.ox-shell-root .wx-orders-page .wx-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border-bottom: 1px solid rgba(228, 235, 244, 0.72);
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.96), rgba(247, 250, 255, 0.9));
}

.ox-shell-root .wx-orders-page .wx-order-code {
  white-space: nowrap;
  width: 1%;
}

.ox-shell-root .wx-orders-page .wx-customer-cell {
  min-width: 240px;
}

.ox-shell-root .wx-orders-page .wx-customer-name {
  font-weight: 760;
  line-height: 1.28;
}

.ox-shell-root .wx-orders-page .wx-customer-meta {
  margin-top: 3px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-size: 0.77rem;
}

.ox-shell-root .wx-orders-page .wx-contact-sep {
  opacity: 0.56;
}

.ox-shell-root .wx-orders-page .wx-customer-address {
  margin-top: 4px;
  font-size: 0.74rem;
  line-height: 1.34;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 620px;
}

.ox-shell-root .wx-orders-page .wx-actions-cell {
  white-space: nowrap;
}

.ox-shell-root .wx-orders-page .wx-inline-status--emphasis .wx-status-save {
  min-width: 84px;
}

.ox-shell-root .wx-order-view-page .wx-order-commandbar {
  border-radius: 22px;
  border: var(--ox-panel-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.97));
  box-shadow: var(--ox-shadow-card);
  padding: 18px;
  display: grid;
  gap: 14px;
}

.ox-shell-root .wx-order-view-page .wx-order-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr);
  gap: 12px;
  align-items: start;
}

.ox-shell-root .wx-order-view-page .wx-order-head__identity {
  display: grid;
  gap: 8px;
}

.ox-shell-root .wx-order-view-page .wx-order-head__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 0.69rem;
  font-weight: 760;
  color: var(--ox-text-2);
}

.ox-shell-root .wx-order-view-page .wx-order-head__title {
  margin: 0;
  font-size: clamp(1.52rem, 2.2vw, 2rem);
  line-height: 1.12;
  font-weight: 860;
  color: var(--ox-text-0);
  letter-spacing: -0.01em;
}

.ox-shell-root .wx-order-view-page .wx-order-head__context {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.ox-shell-root .wx-order-view-page .wx-order-head__facts {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ox-shell-root .wx-order-view-page .wx-order-head__fact {
  border-radius: 12px;
  border: 1px solid rgba(218, 228, 240, 0.9);
  background: linear-gradient(180deg, rgba(252, 254, 255, 0.98), rgba(245, 250, 255, 0.95));
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.ox-shell-root .wx-order-view-page .wx-order-head__fact > span {
  font-size: 13px;
  color: var(--ox-text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 680;
}

.ox-shell-root .wx-order-view-page .wx-order-head__fact > strong {
  font-size: 0.86rem;
  color: var(--ox-text-0);
  line-height: 1.2;
  font-weight: 760;
}

.ox-shell-root .wx-order-view-page .wx-order-commandbar__actions {
  margin-top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border-top: 1px solid rgba(219, 229, 241, 0.9);
  padding-top: 12px;
}

.ox-shell-root .wx-order-view-page .wx-order-actiongroup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ox-shell-root .wx-order-view-page .wx-order-actiongroup--primary {
  min-width: 0;
}

.ox-shell-root .wx-order-view-page .wx-order-actiongroup--secondary,
.ox-shell-root .wx-order-view-page .wx-order-actiongroup--shipping {
  justify-content: flex-end;
}

.ox-shell-root .wx-order-view-page .wx-command-label {
  margin: 0;
  font-size: 13px;
  color: var(--ox-text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.ox-shell-root .wx-order-view-page .wx-command-form {
  margin: 0;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.ox-shell-root .wx-order-view-page .wx-command-form--status {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(212, 224, 237, 0.9);
  background: rgba(249, 252, 255, 0.86);
}

.ox-shell-root .wx-order-view-page .wx-command-select {
  min-height: 40px;
  min-width: 180px;
}

.ox-shell-root .wx-order-view-page .wx-cmd-btn {
  min-height: 40px;
  font-weight: 700;
}

.ox-shell-root .wx-order-view-page .wx-order-tabs {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.ox-shell-root .wx-order-view-page .wx-order-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border-radius: 14px;
  border: 1px solid rgba(214, 225, 237, 0.88);
  background: linear-gradient(180deg, rgba(249, 252, 255, 0.97), rgba(242, 247, 254, 0.94));
}

.ox-shell-root .wx-order-view-page .wx-order-tab {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  color: var(--ox-text-2);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
}

.ox-shell-root .wx-order-view-page .wx-order-tab:hover,
.ox-shell-root .wx-order-view-page .wx-order-tab:focus-visible {
  border-color: rgba(194, 209, 226, 0.9);
  background: rgba(243, 249, 255, 0.92);
  color: var(--ox-text-1);
}

.ox-shell-root .wx-order-view-page .wx-order-tab.is-active {
  border-color: rgba(204, 129, 40, 0.54);
  background: linear-gradient(180deg, rgba(239, 163, 70, 0.95), rgba(214, 126, 25, 0.92));
  box-shadow: 0 12px 24px rgba(168, 103, 26, 0.24), inset 0 1px 0 rgba(255, 231, 206, 0.55);
  color: #fff;
}

.ox-shell-root .wx-order-view-page .wx-order-panel {
  display: none;
}

.ox-shell-root .wx-order-view-page .wx-order-panel.is-active {
  display: block;
}

.ox-shell-root .wx-order-view-page .wx-order-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(340px, 1fr);
  gap: 14px;
}

.ox-shell-root .wx-order-view-page .wx-order-stack {
  display: grid;
  gap: 14px;
}

.ox-shell-root .wx-order-view-page .wx-order-summary-card,
.ox-shell-root .wx-order-view-page .wx-order-items-card,
.ox-shell-root .wx-order-view-page .wx-order-contact-card {
  border-radius: 18px;
  border: 1px solid rgba(210, 222, 236, 0.9);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 255, 0.96));
  box-shadow: var(--ox-shadow-soft);
}

.ox-shell-root .wx-order-view-page .wx-order-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ox-shell-root .wx-order-view-page .wx-order-kpi {
  border-radius: 12px;
  border: 1px solid rgba(220, 229, 240, 0.9);
  background: rgba(250, 253, 255, 0.9);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.ox-shell-root .wx-order-view-page .wx-order-kpi > span {
  font-size: 13px;
  color: var(--ox-text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.ox-shell-root .wx-order-view-page .wx-order-kpi > strong {
  font-size: 0.95rem;
  color: var(--ox-text-0);
  line-height: 1.25;
  font-weight: 780;
}

.ox-shell-root .wx-order-view-page .wx-order-items-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.ox-shell-root .wx-order-view-page .wx-order-items-table-wrapper {
  border-radius: 14px;
  border: 1px solid rgba(222, 231, 242, 0.9);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
}

.ox-shell-root .wx-order-view-page .wx-order-items-table {
  margin: 0;
  width: 100%;
}

.ox-shell-root .wx-order-view-page .wx-order-items-table thead th {
  padding: 10px 12px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ox-text-2);
  background: rgba(244, 249, 255, 0.96);
  border-bottom: 1px solid rgba(220, 230, 241, 0.92);
}

.ox-shell-root .wx-order-view-page .wx-order-items-table tbody td {
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.35;
  vertical-align: top;
}

.ox-shell-root .wx-order-view-page .wx-order-items-table tbody tr + tr td {
  border-top: 1px solid rgba(227, 235, 245, 0.92);
}

.ox-shell-root .wx-order-view-page .wx-order-items-table__name {
  font-weight: 620;
  color: var(--ox-text-0);
  min-width: 280px;
}

.ox-shell-root .wx-order-view-page .wx-order-item-product {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.ox-shell-root .wx-order-view-page .wx-order-item-product__thumb,
.ox-shell-root .wx-order-view-page .wx-order-item-product__placeholder {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  border: 1px solid rgba(216, 226, 239, 0.95);
  background: rgba(246, 249, 253, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ox-shell-root .wx-order-view-page .wx-order-item-product__thumb {
  object-fit: cover;
}

.ox-shell-root .wx-order-view-page .wx-order-item-product__placeholder {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ox-text-2);
  text-transform: uppercase;
}

.ox-shell-root .wx-order-view-page .wx-order-item-product__name {
  display: block;
  min-width: 0;
  word-break: break-word;
}

.ox-shell-root .wx-order-view-page .wx-order-items-table__qty {
  width: 96px;
  text-align: center;
  white-space: nowrap;
}

.ox-shell-root .wx-order-view-page .wx-order-items-table__money {
  width: 150px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ox-shell-root .wx-order-view-page .wx-order-items-table__sum {
  font-weight: 780;
  color: var(--ox-text-0);
}

.ox-shell-root .wx-order-view-page .wx-order-items-table tfoot th {
  padding: 10px 12px;
  border-top: 1px solid rgba(214, 225, 238, 0.94);
  background: rgba(247, 251, 255, 0.95);
  color: var(--ox-text-0);
  font-size: 0.8rem;
}

.ox-shell-root .wx-order-view-page .wx-order-items-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ox-shell-root .wx-order-view-page .wx-order-items-total {
  border-radius: 12px;
  border: 1px solid rgba(218, 228, 240, 0.9);
  background: rgba(251, 253, 255, 0.9);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.ox-shell-root .wx-order-view-page .wx-order-items-total > span {
  font-size: 13px;
  color: var(--ox-text-2);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 680;
}

.ox-shell-root .wx-order-view-page .wx-order-items-total > strong {
  font-size: 0.94rem;
  color: var(--ox-text-0);
  font-weight: 780;
  line-height: 1.2;
}

.ox-shell-root .wx-order-view-page .wx-order-items-total--highlight {
  border-color: rgba(206, 129, 37, 0.52);
  background: linear-gradient(180deg, rgba(254, 245, 231, 0.96), rgba(248, 232, 206, 0.9));
}

.ox-shell-root .wx-order-view-page .wx-order-contact-grid {
  display: grid;
  gap: 12px;
}

.ox-shell-root .wx-order-view-page .wx-order-contact-section {
  border-radius: 12px;
  border: 1px solid rgba(223, 232, 242, 0.88);
  background: rgba(251, 253, 255, 0.84);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.ox-shell-root .wx-order-view-page .wx-order-contact-section h3 {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ox-text-0);
  font-weight: 760;
  letter-spacing: 0.01em;
}

.ox-shell-root .wx-order-view-page .wx-order-address {
  display: grid;
  gap: 5px;
}

.ox-shell-root .wx-order-view-page .wx-order-address__name {
  font-size: 0.88rem;
  font-weight: 780;
  color: var(--ox-text-0);
}

.ox-shell-root .wx-order-view-page .wx-order-address__line {
  font-size: 0.8rem;
  color: var(--ox-text-1);
  line-height: 1.34;
}

.ox-shell-root .wx-order-view-page .wx-order-address__meta {
  font-size: 0.76rem;
  color: var(--ox-text-2);
}

.ox-shell-root .wx-order-view-page .wx-shipping-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ox-shell-root .wx-order-view-page .wx-shipping-card {
  border-radius: 18px;
  border: 1px solid rgba(206, 217, 231, 0.9);
  background: linear-gradient(180deg, rgba(253, 254, 255, 0.98), rgba(246, 250, 255, 0.95));
  box-shadow: var(--ox-shadow-soft);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.ox-shell-root .wx-order-view-page .wx-shipping-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ox-shell-root .wx-order-view-page .wx-shipping-card__head h3 {
  margin: 0;
  font-size: 1rem;
}

.ox-shell-root .wx-settings-mode-page .wx-settings-mode-hero,
.ox-shell-root .wx-settings-mode-page .wx-settings-mode-panel,
.ox-shell-root .wx-settings-mode-page .wx-settings-mode-tabs-wrap {
  border: var(--ox-panel-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.97));
  box-shadow: var(--ox-shadow-card);
}

.ox-shell-root .wx-settings-mode-page .wx-settings-mode-hero {
  padding: 18px 20px;
}

.ox-shell-root .wx-settings-mode-page .wx-settings-mode-hero__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ox-shell-root .wx-settings-mode-page .wx-settings-mode-kpi {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 254, 0.95));
  box-shadow: var(--ox-shadow-soft);
}

.ox-shell-root .wx-settings-mode-page .wx-settings-mode-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  padding-bottom: 2px;
}

.ox-shell-root .wx-settings-mode-page .wx-settings-mode-tabs .btn {
  min-height: 40px;
  border-radius: 999px;
  white-space: nowrap;
}

.ox-shell-root .wx-settings-mode-page .wx-settings-mode-tabs .btn.is-active {
  background: linear-gradient(180deg, rgba(240, 245, 255, 0.98), rgba(234, 240, 255, 0.96));
  border-color: rgba(255, 255, 255, 0.9);
  color: #2544bf;
  box-shadow: var(--ox-shadow-micro);
}

.ox-shell-root .wx-settings-mode-page .wx-mode-schedule-grid {
  display: grid;
  gap: 14px 14px;
}

.ox-shell-root .wx-settings-mode-page .wx-mode-timepair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ox-shell-root .wx-settings-mode-page .wx-mode-days-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ox-shell-root .wx-settings-mode-page .wx-mode-day-check {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.95));
  box-shadow: var(--ox-shadow-micro);
}

.ox-shell-root .wx-settings-mode-page .wx-mode-daytimes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ox-shell-root .wx-settings-mode-page .wx-mode-day-card {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
  padding: 12px;
  box-shadow: var(--ox-shadow-soft);
}

.ox-shell-root .wx-settings-mode-page .wx-mode-day-card__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ox-shell-root .ox-mobile-drawer__panel {
  width: 100vw;
  max-width: 100vw;
  border-left: 0;
  border-radius: 0;
  padding:
    calc(max(18px, env(safe-area-inset-top) + 10px))
    max(16px, env(safe-area-inset-right) + 12px)
    calc(max(18px, env(safe-area-inset-bottom) + 10px))
    max(16px, env(safe-area-inset-left) + 12px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(244, 248, 254, 0.97));
  box-shadow: var(--ox-shadow-float);
}

@media (max-width: 1366px) {
  .ox-shell-root .main {
    padding: 18px 14px 26px;
  }
}

@media (max-width: 1024px) {
  .ox-shell-root .app.app--integrated-shell {
    grid-template-columns: 1fr;
    margin: 0;
    padding-inline: 8px;
    border-radius: 0;
    box-shadow: none;
  }

  .ox-shell-root .ox-sidebar.ox-sidebar--integrated {
    display: none;
  }

  .ox-shell-root .side-mob-toggle {
    display: inline-flex;
  }

  .ox-shell-root .ox-shell-topbar.ox-shell-topbar--integrated {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "left right"
      "center center";
    row-gap: 8px;
    padding-inline: 12px;
  }

  .ox-shell-root .ox-shell-topbar__left {
    grid-area: left;
  }

  .ox-shell-root .ox-shell-topbar__center {
    grid-area: center;
    justify-content: flex-start;
  }

  .ox-shell-root .ox-shell-topbar__right {
    grid-area: right;
    justify-content: flex-end;
  }

  .ox-shell-root .ox-shell-topbar__brand {
    min-height: 38px;
    padding-inline: 10px;
  }

  .ox-shell-root .ox-shell-topbar__brand-logo {
    width: 118px;
  }

  .ox-shell-root .main {
    padding: 13px 10px 20px;
  }

  .ox-shell-root .wx-orders-page .wx-responsive-table > table.wx-orders-table {
    display: none;
  }

  .ox-shell-root .wx-orders-page .wx-cards {
    display: grid;
  }

  .ox-shell-root .wx-orders-page .wx-orders-search-grid {
    grid-template-columns: 1fr 132px auto;
  }

  .ox-shell-root .wx-orders-page .wx-orders-bulkbar .wx-bulkbar-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .ox-shell-root .wx-order-view-page .wx-order-overview-grid,
  .ox-shell-root .wx-order-view-page .wx-shipping-grid {
    grid-template-columns: 1fr;
  }

  .ox-shell-root .wx-order-view-page .wx-order-items-meta {
    justify-content: flex-start;
  }

  .ox-shell-root .wx-order-view-page .wx-order-item-product {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
  }

  .ox-shell-root .wx-order-view-page .wx-order-item-product__thumb,
  .ox-shell-root .wx-order-view-page .wx-order-item-product__placeholder {
    width: 44px;
    height: 44px;
  }

  .ox-shell-root .wx-order-view-page .wx-order-items-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ox-shell-root .wx-settings-mode-page .wx-settings-mode-hero__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ox-shell-root .wx-settings-mode-page .wx-mode-daytimes-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .ox-shell-root .ox-shell-topbar__context {
    display: none;
  }
}

@media (max-width: 768px) {
  .ox-shell-root .wx-orders-page .wx-orders-search-grid {
    grid-template-columns: 1fr;
  }

  .ox-shell-root .wx-orders-page .wx-card-head {
    grid-template-columns: 1fr;
  }

  .ox-shell-root .wx-orders-page .wx-card-actions,
  .ox-shell-root .wx-orders-page .wx-inline-status {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .ox-shell-root .wx-orders-page .wx-status-select,
  .ox-shell-root .wx-orders-page .wx-status-save {
    width: 100%;
  }

  .ox-shell-root .wx-orders-page .wx-orders-status-strip__row,
  .ox-shell-root .wx-suite-nav--saas .ox-page-nav__grid,
  .ox-shell-root .wx-home-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .ox-shell-root .wx-order-view-page .wx-order-tablist {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }

  .ox-shell-root .wx-order-view-page .wx-order-tab {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .ox-shell-root .wx-order-view-page .wx-order-items-totals {
    grid-template-columns: 1fr;
  }

  .ox-shell-root .wx-settings-mode-page .wx-settings-mode-hero__grid {
    grid-template-columns: 1fr;
  }

  .ox-shell-root .wx-settings-mode-page .wx-mode-timepair,
  .ox-shell-root .wx-settings-mode-page .wx-mode-day-card__fields,
  .ox-shell-root .wx-settings-mode-page .wx-mode-days-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .ox-shell-root .ox-shell-topbar-head__title {
    font-size: clamp(1.36rem, 6.8vw, 1.9rem);
  }

  .ox-shell-root .ox-shell-topbar__brand {
    padding-inline: 8px;
  }

  .ox-shell-root .ox-shell-topbar__brand-logo {
    width: 104px;
  }

  .ox-mobile-drawer__brand-logo {
    width: 106px;
  }

  .ox-mobile-drawer__title {
    font-size: 0.94rem;
  }

  .ox-mobile-drawer__subtitle {
    font-size: 13px;
  }

  .ox-mobile-drawer__nav .ox-item {
    min-height: 52px;
    padding: 13px 16px;
    border-radius: 18px;
  }

  .ox-shell-root .btn,
  .ox-shell-root .input,
  .ox-shell-root select.input,
  .ox-shell-root textarea.input,
  .ox-shell-root input:not([type="checkbox"]):not([type="radio"]),
  .ox-shell-root select,
  .ox-shell-root textarea {
    min-height: 40px;
  }
}

@media (max-width: 390px) {
  .ox-shell-root .ox-shell-topbar__tenant {
    display: none;
  }

  .auth-brand-logo,
  .auth-brand-logo--success {
    width: 138px;
  }

  .auth-success__badge {
    width: 74px;
    height: 74px;
    border-radius: 24px;
  }
}

@media (max-width: 320px) {
  .ox-shell-root .main {
    padding-inline: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ox-shell-root .ox-shell-topbar,
  .ox-shell-root .ox-shell-topbar__profile-menu,
  .ox-shell-root .ox-mobile-drawer__panel,
  .ox-shell-root .btn,
  .ox-shell-root .ox-item,
  .ox-shell-root .ox-sidebar-action-btn,
  .ox-shell-root .wx-orders-table tbody tr,
  .ox-shell-root .wx-card,
  .ox-shell-root .ox-global-toast {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .auth-page .auth-animated-title,
  .auth-page [data-auth-submit],
  .auth-page .auth-card .input,
  .auth-page .auth-card .btn-google,
  .auth-page .auth-success__badge,
  .auth-page .auth-success__loader span,
  .auth-page .auth-success__progress span,
  .auth-page .auth-card--attention {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .auth-page .auth-bg-canvas {
    opacity: 0.24;
    filter: none;
  }
}


/* 2026-03-20 shell polish + duplicate box cleanup */
.ox-page-nav.wx-suite-nav--inline,
.ox-page-nav.wx-email-workspace-nav {
  gap: 10px;
}

.ox-page-nav.wx-suite-nav--inline .ox-page-nav__top,
.ox-page-nav.wx-email-workspace-nav .ox-page-nav__top {
  display: none;
}

.wx-orders-commandbar__stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.wx-orders-commandbar__stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(223, 231, 242, 0.88);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,249,254,0.95));
  box-shadow: var(--ox-shadow-micro);
}

.wx-orders-commandbar__stat-label {
  color: var(--ox-text-muted);
  font-size: 0.76rem;
  font-weight: 600;
}

.wx-orders-commandbar__stat-value {
  color: var(--ox-text-strong);
  font-size: 0.88rem;
  font-weight: 700;
}

.wx-orders-search-grid {
  grid-template-columns:
    minmax(220px, 1.25fr)
    minmax(140px, 170px)
    minmax(145px, 165px)
    minmax(145px, 165px)
    minmax(96px, 118px)
    auto;
  align-items: end;
}

.wx-orders-toolbar .wx-field-actions {
  justify-content: flex-end;
}

.wx-orders-toolbar .wx-filter-submit {
  min-width: 112px;
}

.wx-orders-results {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, rgba(255,255,255,0.995), rgba(247,250,255,0.97));
  box-shadow: var(--ox-shadow-card);
}

.wx-panel-head {
  margin-bottom: 14px;
}

.wx-workspace-summary__item,
.wx-email-metric-card,
.wx-control-stat,
.settings-hub-head-metric {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, rgba(255,255,255,0.995), rgba(247,250,255,0.97));
  box-shadow: var(--ox-shadow-card);
  padding: 18px 20px;
}

.wx-workspace-alert {
  border-radius: 16px;
  box-shadow: var(--ox-shadow-micro);
}

.ox-shell-root .ox-shell-topbar__right > * {
  box-shadow: var(--ox-neu-raised-sm);
}

@media (max-width: 1024px) {
  .wx-orders-search-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .wx-orders-toolbar .wx-field-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .wx-suite-commandbar {
    padding: 18px 18px 14px;
    border-radius: 24px;
  }
  .wx-orders-toolbar {
    padding: 16px;
  }
  .wx-orders-search-grid {
    grid-template-columns: 1fr;
  }
  .wx-orders-toolbar .wx-field-actions {
    justify-content: stretch;
  }
  .wx-orders-toolbar .wx-filter-submit {
    width: 100%;
  }
}

/* 2026-03-21 precision depth pack v3
   One-tone neumorph system: explicit raised/inset hierarchy across shell + modules. */

.ox-shell-root {
  background:
    radial-gradient(circle at 16% -8%, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0) 44%),
    linear-gradient(180deg, #edf2f8 0%, #e8edf4 100%) !important;
}

.ox-shell-root .ox-sidebar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ox-shell-root .ox-shell-topbar__right {
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  gap: 10px;
}

.ox-shell-root :is(
  .card,
  .card-pad,
  .wx-panel,
  .wx-suite-section,
  .settings-panel,
  .wx-workspace-surface,
  .wx-workspace-surface--table,
  .wx-orders-results,
  .wx-card,
  .wx-suite-commandbar
) {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: linear-gradient(145deg, #f2f6fa 0%, #e5ebf3 100%) !important;
  box-shadow: var(--ox-neu-raised-md) !important;
}

.ox-shell-root :is(.wx-suite-commandbar, .wx-orders-results) {
  box-shadow: var(--ox-neu-raised-lg) !important;
}

.ox-shell-root .wx-orders-results,
.ox-shell-root .wx-orders-commandbar {
  border-color: rgba(255, 255, 255, 0.74) !important;
  box-shadow: var(--ox-neu-raised-lg) !important;
}

/* Nested surface cleanup: avoid "box inside box" chrome in content blocks. */
.ox-shell-root :is(
  .wx-panel,
  .settings-panel,
  .wx-suite-section,
  .wx-workspace-surface,
  .wx-orders-toolbar,
  .wx-orders-results,
  .wx-suite-commandbar
) :is(
  .wx-orders-strip,
  .wx-orders-filterbar,
  .wx-orders-status-strip,
  .wx-orders-search-strip,
  .wx-bulkbar,
  .wx-orders-bulkbar,
  .table-wrap,
  .wx-table-wrap,
  .wx-workspace-table-wrap,
  .wx-responsive-table
) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ox-shell-root .wx-orders-page .wx-orders-commandbar__stat {
  border: 0 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  box-shadow: none !important;
}

.ox-shell-root :is(
  .ox-item,
  .ox-sidebar-action-btn,
  .ox-shell-topbar__context,
  .ox-shell-topbar__switcher,
  .ox-shell-topbar__profile-toggle,
  .ox-shell-topbar__icon-btn,
  .ox-shell-topbar__brand,
  .ox-page-nav__item,
  .wx-settings-inline-tab,
  .wx-email-topbar__tab,
  .settings-cmd-cat,
  .wx-orders-status-btn,
  .wx-period-pill,
  .badge
) {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: linear-gradient(145deg, #f3f7fb 0%, #e6ecf4 100%) !important;
  box-shadow: var(--ox-neu-raised-sm) !important;
}

.ox-shell-root :is(
  .ox-page-nav__item.is-active,
  .wx-settings-inline-tab.is-active,
  .wx-email-topbar__tab.is-active,
  .settings-cmd-cat.is-active,
  .wx-pages a.is-active,
  .wx-pager a.is-active
) {
  border-color: rgba(255, 255, 255, 0.74) !important;
  background: linear-gradient(145deg, #e3e9f1 0%, #e8edf5 100%) !important;
  box-shadow: var(--ox-neu-inset-md) !important;
  color: var(--ox-accent) !important;
}

.ox-shell-root :is(.input, select, textarea, .wx-status-select),
.ox-shell-root input:not([type="checkbox"]):not([type="radio"]) {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: linear-gradient(145deg, #f1f6fb, #e7edf4) !important;
  box-shadow: var(--ox-neu-inset-sm) !important;
}

.ox-shell-root :is(.input, select, textarea, .wx-status-select):focus,
.ox-shell-root input:not([type="checkbox"]):not([type="radio"]):focus {
  border-color: rgba(255, 255, 255, 0.78) !important;
  box-shadow:
    var(--ox-neu-inset-sm),
    0 0 0 2px rgba(212, 122, 31, 0.14) !important;
}

.ox-shell-root label:has(> input[type="checkbox"]),
.ox-shell-root label:has(> input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ox-shell-root input[type="checkbox"]:not(.wx-switch__input) {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: linear-gradient(150deg, #f7fbff, #e8eef5);
  box-shadow: var(--ox-neu-inset-sm);
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  cursor: pointer;
  transition: transform var(--ox-trans-fast), box-shadow var(--ox-trans-fast), background var(--ox-trans-fast), border-color var(--ox-trans-fast);
}

.ox-shell-root input[type="checkbox"]:not(.wx-switch__input)::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 4px;
  transform: scale(0);
  transition: transform var(--ox-trans-fast);
  background: linear-gradient(165deg, #eca552, #d47a1f);
  box-shadow: 0 4px 10px rgba(212, 122, 31, 0.26);
}

.ox-shell-root input[type="checkbox"]:not(.wx-switch__input):checked::before {
  transform: scale(1);
}

.ox-shell-root input[type="checkbox"]:not(.wx-switch__input):focus-visible {
  outline: 0;
  box-shadow:
    var(--ox-neu-inset-sm),
    0 0 0 3px rgba(212, 122, 31, 0.18);
}

.ox-shell-root input[type="checkbox"]:not(.wx-switch__input):disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ox-shell-root .btn:not(.btn-primary):not(.btn-danger):not(.wx-btn-danger),
.ox-shell-root button:not(.btn-primary):not(.btn-danger):not(.wx-btn-danger) {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: linear-gradient(145deg, #f3f7fb, #e7edf4) !important;
  box-shadow: var(--ox-neu-raised-sm) !important;
}

.ox-shell-root .btn:not(.btn-primary):not(.btn-danger):not(.wx-btn-danger):active,
.ox-shell-root button:not(.btn-primary):not(.btn-danger):not(.wx-btn-danger):active {
  box-shadow: var(--ox-neu-inset-sm) !important;
  transform: none !important;
}

.ox-shell-root .btn-primary {
  border-color: rgba(212, 122, 31, 0.4) !important;
  background: linear-gradient(165deg, #eca552, #d47a1f) !important;
  box-shadow: 0 10px 22px rgba(212, 122, 31, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

.ox-shell-root .btn-primary:active {
  box-shadow: inset 2px 2px 5px rgba(154, 84, 18, 0.42), inset -2px -2px 5px rgba(255, 206, 152, 0.25) !important;
}

.ox-shell-root :is(.table th, .table td, .wx-workspace-table th, .wx-workspace-table td) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.52) !important;
}

.ox-shell-root :is(.table th, .wx-workspace-table th) {
  background: linear-gradient(145deg, #edf2f9, #e4ebf3) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.ox-shell-root :is(.table tbody tr:hover, .wx-workspace-table tbody tr:hover) {
  background: rgba(255, 255, 255, 0.32) !important;
}

.ox-shell-root .wx-orders-status-btn.is-active,
.ox-shell-root .wx-period-pill.is-active {
  border-color: rgba(212, 122, 31, 0.38) !important;
  background: linear-gradient(165deg, #eca552, #d47a1f) !important;
  box-shadow: 0 10px 22px rgba(212, 122, 31, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  color: #fff !important;
}

/* 2026-03-21 responsive + chat directory hardening pass */
.wx-chat-thread {
  width: 100%;
  text-align: left;
  border-radius: 14px;
  border: 1px solid rgba(130, 155, 182, 0.24);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 14px rgba(23, 48, 74, 0.06);
  padding: 10px 11px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.wx-chat-thread:hover {
  transform: translateY(-1px);
  border-color: rgba(110, 140, 170, 0.34);
  box-shadow: 0 10px 20px rgba(21, 46, 71, 0.1);
}

.wx-chat-thread.is-active {
  border-color: rgba(212, 122, 31, 0.34);
  box-shadow: 0 10px 20px rgba(212, 122, 31, 0.16);
  background: rgba(255, 249, 241, 0.98);
}

.wx-chat-thread.is-self {
  opacity: 0.8;
  cursor: default;
}

.wx-chat-thread.is-self:hover {
  transform: none;
  border-color: rgba(130, 155, 182, 0.24);
  box-shadow: 0 6px 14px rgba(23, 48, 74, 0.06);
}

.wx-chat-thread__avatar {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 1px solid rgba(126, 152, 178, 0.34);
  background: linear-gradient(180deg, #f0f6ff, #e7f0fb);
  color: #30516f;
  font-size: 0.78rem;
  font-weight: 780;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
}

.wx-chat-thread__body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.wx-chat-thread__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.wx-chat-thread__name-wrap {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.wx-chat-thread__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 720;
  color: #213d58;
}

.wx-chat-thread__stamp {
  font-size: 0.7rem;
  color: #7089a2;
  white-space: nowrap;
}

.wx-chat-thread__badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(165deg, #eca552, #d47a1f);
}

.wx-chat-thread__right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.wx-chat-thread__chips {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.wx-chat-thread__chip {
  min-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(132, 157, 183, 0.32);
  background: rgba(239, 247, 255, 0.9);
  color: #4f6780;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.wx-chat-thread__chip.is-self {
  border-color: rgba(90, 125, 160, 0.32);
  color: #2f506f;
}

.wx-chat-thread__chip.is-owner {
  border-color: rgba(212, 122, 31, 0.34);
  background: rgba(255, 244, 228, 0.92);
  color: #9a5f1f;
}

.wx-chat-thread__chip.is-muted {
  opacity: 0.82;
}

.wx-chat-thread__email,
.wx-chat-thread__preview {
  font-size: 0.78rem;
  color: #67819b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wx-chat-thread__preview {
  color: #3d5d7a;
}

@media (max-width: 1366px) {
  .ox-shell-topbar {
    grid-template-columns: minmax(140px, auto) minmax(0, 1fr) auto;
    padding-inline: 14px;
    gap: 10px;
  }

  .wx-suite-commandbar {
    padding: 20px 18px 16px;
    border-radius: 24px;
  }

  .wx-suite-commandbar__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .wx-suite-commandbar__center,
  .wx-suite-commandbar__row-right,
  .wx-suite-commandbar__actions,
  .wx-products-command-actions,
  .wx-actions,
  .wx-period-toolbar,
  .wx-orders-status-strip__row,
  .wx-settings-inline-tabs {
    justify-content: flex-start;
  }
}

@media (max-width: 1120px) {
  .ox-shell-topbar {
    grid-template-columns: minmax(120px, auto) auto;
  }

  .ox-shell-topbar__center {
    display: none;
  }

  .main {
    padding: 14px 10px 24px;
  }

  .wx-orders-search-grid,
  .wx-workspace-toolbar__grid {
    grid-template-columns: 1fr !important;
  }

  .wx-orders-toolbar .wx-field-actions,
  .wx-workspace-toolbar__actions {
    justify-content: stretch;
  }

  .wx-orders-toolbar .wx-filter-submit,
  .wx-workspace-toolbar__actions .btn {
    width: 100%;
  }
}

@media (max-width: 980px) {
  .ox-page-nav__grid,
  .wx-orders-status-strip__row,
  .wx-settings-inline-tabs,
  .wx-period-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .wx-chat-grid {
    grid-template-columns: 1fr;
    min-height: min(78vh, 760px);
  }

  .wx-chat-sidebar,
  .wx-chat-main {
    min-height: 0;
  }

  .wx-chat-user-list {
    max-height: 44vh;
  }

  .wx-chat-messages {
    max-height: 48vh;
  }

  [data-chat-module="1"][data-chat-mobile-step="list"] .wx-chat-main {
    display: none;
  }

  [data-chat-module="1"][data-chat-mobile-step="detail"] .wx-chat-sidebar {
    display: none;
  }
}

@media (max-width: 768px) {
  .wx-chat-toolbar,
  .wx-chat-main__head,
  .wx-chat-composer__bar {
    align-items: flex-start;
  }

  .wx-chat-user-list,
  .wx-chat-messages {
    max-height: none;
  }

  .wx-chat-main {
    min-height: 52vh;
  }

  .table,
  .wx-workspace-table,
  .wx-orders-table,
  .wx-rules-table,
  .wx-email-templates-table,
  .wx-email-logs-table,
  .wx-customers-table {
    min-width: 680px;
  }
}

@media (max-width: 430px) {
  .ox-shell-topbar__right {
    gap: 6px;
    padding: 2px;
  }

  .ox-shell-topbar__switcher-select {
    min-width: 96px;
  }

  .ox-page-nav__item,
  .wx-settings-inline-tab,
  .wx-email-topbar__tab,
  .settings-cmd-cat,
  .wx-orders-status-btn,
  .wx-period-pill,
  .btn {
    min-height: 38px;
    padding-inline: 12px;
  }
}

/* 2026-03-21 mobile full-width utilization pass
   Goal: remove leftover outer gutters so content uses full viewport width. */
@media (max-width: 1024px) {
  .ox-shell-root .app,
  .ox-shell-root .app.app--integrated-shell {
    padding-inline: 0 !important;
  }

  .ox-shell-root .main {
    padding: 12px 0 20px !important;
  }

  .ox-shell-root .main > * {
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  .ox-shell-root .ox-shell-topbar,
  .ox-shell-root .ox-shell-topbar.ox-shell-topbar--integrated {
    padding-inline: 8px !important;
  }
}

@media (max-width: 768px) {
  .ox-shell-root .main {
    padding-top: 10px !important;
    padding-bottom: 16px !important;
  }

  .ox-shell-root .ox-shell-topbar,
  .ox-shell-root .ox-shell-topbar.ox-shell-topbar--integrated {
    padding-inline: 6px !important;
  }
}

@media (max-width: 430px) {
  .ox-shell-root .main {
    padding-top: 8px !important;
    padding-bottom: 14px !important;
  }

  .ox-shell-root .ox-shell-topbar,
  .ox-shell-root .ox-shell-topbar.ox-shell-topbar--integrated {
    padding-inline: 4px !important;
  }
}

/* 2026-03-21 mobile overlap hardening pass
   Goal: prevent element collisions/overlaps across modules on small screens. */
@media (max-width: 1024px) {
  .ox-shell-root :is(
    .wx-suite-commandbar__row,
    .wx-dashboard-shell__row,
    .wx-workspace-detail,
    .wx-workspace-detail-head,
    .wx-inline-status,
    .wx-orders-search-grid,
    .wx-orders-page .wx-orders-bulkbar .wx-bulkbar-row
  ) {
    grid-template-columns: 1fr !important;
  }

  .ox-shell-root :is(
    .wx-suite-commandbar__center,
    .wx-suite-commandbar__row-right,
    .wx-suite-commandbar__actions,
    .wx-products-command-actions,
    .wx-orders-status-strip__row,
    .wx-settings-inline-tabs,
    .wx-period-toolbar,
    .ox-page-nav__grid
  ) {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .ox-shell-root :is(
    .wx-status-select,
    .wx-status-save,
    .wx-filter-submit,
    .wx-orders-toolbar .btn,
    .wx-field-actions .btn,
    .wx-workspace-toolbar__actions .btn
  ) {
    width: 100% !important;
    min-width: 0 !important;
  }

  .ox-shell-root :is(
    .wx-col-date,
    .wx-date-cell,
    .wx-col-total,
    .wx-total-cell,
    .wx-col-actions,
    .wx-actions-cell,
    .wx-status-save
  ) {
    white-space: normal !important;
  }

  .ox-shell-root :is(
    .wx-panel-title,
    .wx-workspace-surface__title,
    .wx-dashboard-shell__title,
    .wx-dashboard-shell__subtitle
  ) {
    overflow-wrap: anywhere;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .ox-shell-root :is(
    .wx-suite-commandbar,
    .wx-orders-toolbar,
    .wx-orders-results,
    .wx-panel,
    .wx-workspace-surface,
    .settings-panel
  ) {
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .ox-shell-root :is(
    .wx-orders-status-btn,
    .wx-period-pill,
    .ox-page-nav__item,
    .wx-settings-inline-tab,
    .wx-email-topbar__tab,
    .btn
  ) {
    min-height: 36px;
    padding-inline: 10px;
    font-size: 0.82rem;
  }

  .ox-shell-root .ox-shell-topbar__right {
    min-width: 0;
    gap: 6px;
  }

  .ox-shell-root .ox-shell-topbar__switcher {
    max-width: 100%;
    min-width: 0;
  }

  .ox-shell-root .ox-shell-topbar__switcher-select {
    max-width: min(42vw, 160px);
    min-width: 0;
  }

  .ox-shell-root .wx-orders-page .wx-orders-toolbar {
    padding: 0 !important;
    border-radius: 0 !important;
  }
}


.ox-shell-root .ox-item:hover,
.ox-shell-root .ox-sidebar-action-btn:hover {
  background: var(--ox-tone-lock) !important;
  background-image: none !important;
}

.ox-shell-root .ox-item.is-active {
  background: var(--ox-tone-lock) !important;
  background-image: none !important;
}

/* 2026-03-21 white-tone hard lock
   Keep all dashboard analytics surfaces on the same white tone as KPI strip. */
.ox-shell-root :is(
  .wx-suite-section--panel,
  .wx-kpi-grid,
  .wx-kpi-card,
  .wx-kpi-strip,
  .wx-kpi-strip__item,
  .wx-revenue-breakdown,
  .wx-two-col .wx-card,
  .wx-table-wrap,
  .wx-responsive-table,
  .wx-table-wrap .table,
  .wx-responsive-table .table,
  .wx-table-wrap .table thead th,
  .wx-responsive-table .table thead th,
  .wx-table-wrap .table tbody td,
  .wx-responsive-table .table tbody td
) {
  background: var(--ox-tone-lock) !important;
  background-image: none !important;
}

/* Catalog product name readability + preview link */
.ox-shell-root .wx-products-page .wx-products-table .wx-col-product {
  min-width: 320px;
}

.ox-shell-root .wx-products-page .wx-product-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ox-shell-root .wx-products-page .wx-product-thumb {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 12px;
  border: 1px solid rgba(212, 223, 235, 0.92);
  background: rgba(247, 251, 255, 0.92);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.ox-shell-root .wx-products-page .wx-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ox-shell-root .wx-products-page .wx-product-thumb-fallback {
  font-size: 13px;
  font-weight: 700;
  color: #4f6881;
  letter-spacing: 0.01em;
}

.ox-shell-root .wx-products-page .wx-product-meta {
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--ox-text-2);
}

.ox-shell-root .wx-products-page .wx-card-product-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ox-shell-root .wx-products-page .wx-card-product-line__text {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ox-shell-root .wx-products-page .wx-card-actions {
  display: grid;
  gap: 10px;
}

.ox-shell-root .wx-products-page .wx-products-table .wx-col-preview {
  min-width: 162px;
}

.ox-shell-root .wx-products-page .wx-products-table .wx-col-status {
  min-width: 110px;
}

.ox-shell-root .wx-products-page .wx-products-table .wx-col-status-edit {
  min-width: 210px;
}

.ox-shell-root .wx-products-page .wx-product-preview-cell {
  vertical-align: middle;
}

.ox-shell-root .wx-products-page .wx-product-status-display-cell,
.ox-shell-root .wx-products-page .wx-product-status-cell {
  vertical-align: middle;
}

.ox-shell-root .wx-products-page .wx-product-inline-status {
  min-width: 188px;
  grid-template-columns: minmax(120px, 1fr) auto;
  gap: 8px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-list-center {
  display: grid;
  gap: 14px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-pagebar {
  padding: 14px 16px;
  border-radius: 20px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-pagebar__identity {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-top-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-layout {
  display: grid;
  gap: 12px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-header-card .wx-panel-body {
  padding: 0;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-header-card__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-header-card__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  flex: 1 1 520px;
  min-width: 0;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-summary-pill {
  border-radius: 12px;
  border: 1px solid rgba(216, 227, 239, 0.92);
  background: rgba(251, 253, 255, 0.95);
  padding: 8px 10px;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-summary-pill small {
  font-size: 0.7rem;
  font-weight: 700;
  color: #597089;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-summary-pill strong {
  color: #203a55;
  font-size: 0.88rem;
  font-weight: 760;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-header-card__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(290px, 0.92fr);
  gap: 12px;
  align-items: start;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-main-column,
.ox-shell-root .wx-product-edit-page-v2 .wx-pe-side-column {
  display: grid;
  gap: 12px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-form-grid > * {
  grid-column: auto;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-form-grid > .field-full {
  grid-column: 1 / -1;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-side-grid {
  grid-template-columns: 1fr;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-toggle {
  min-height: 52px;
  border-radius: 12px;
  border: 1px solid rgba(216, 227, 239, 0.92);
  background: rgba(251, 253, 255, 0.94);
  padding: 10px 11px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: flex-start;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-toggle span {
  display: grid;
  gap: 2px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-toggle strong {
  font-size: 0.84rem;
  color: #1f344b;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-toggle small {
  color: #607892;
  font-size: 0.75rem;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-actions {
  display: grid;
  gap: 8px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-actions .btn {
  min-height: 40px;
  justify-content: center;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-danger-card {
  border-color: rgba(233, 187, 187, 0.78);
  background: linear-gradient(180deg, rgba(255, 250, 250, 0.98), rgba(255, 244, 244, 0.96));
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-danger-card .wx-panel-title {
  color: #8a2f2f;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-product-media-panel {
  margin-top: 2px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-media-panels {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-card {
  border-radius: 14px;
  border: 1px solid rgba(221, 231, 242, 0.86);
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.96), rgba(247, 251, 255, 0.93));
  box-shadow: var(--ox-shadow-micro);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-card h3 {
  margin: 0;
  font-size: 0.9rem;
  color: #26445f;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-media-main-preview {
  border-radius: 12px;
  border: 1px solid rgba(223, 232, 242, 0.9);
  background: rgba(248, 252, 255, 0.94);
  min-height: 190px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-media-main-preview img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-media-main-empty {
  color: #667f99;
  font-size: 0.82rem;
  font-weight: 600;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-media-main-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

html.ox-modal-open,
body.ox-modal-open {
  overflow: hidden;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ox-z-drawer) + 20);
  display: none;
  align-items: center;
  justify-items: center;
  padding: 18px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-modal.is-open {
  display: grid;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 20, 34, 0.56);
  backdrop-filter: none;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-modal__panel {
  position: relative;
  width: min(1120px, calc(100vw - 40px));
  max-height: calc(100dvh - 36px);
  border-radius: 18px;
  border: 1px solid rgba(214, 225, 238, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 255, 0.97));
  box-shadow: 0 28px 72px rgba(8, 19, 33, 0.35), 0 10px 26px rgba(8, 19, 33, 0.2);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(218, 228, 239, 0.92);
  background: linear-gradient(180deg, rgba(252, 254, 255, 0.98), rgba(246, 250, 255, 0.95));
}

.ox-shell-root .wx-product-edit-page-v2 .wx-modal__body {
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-modal#wxMediaModal .wx-modal__panel--media {
  width: min(1320px, calc(100vw - 42px));
  max-height: calc(100dvh - 36px);
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-card--modal {
  display: grid;
  gap: 12px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-inline-upload {
  border: 1px solid rgba(221, 231, 242, 0.86);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.96), rgba(247, 251, 255, 0.93));
  box-shadow: var(--ox-shadow-micro);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-inline-upload .wx-media-form {
  display: grid;
  gap: 10px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-upload-head {
  display: grid;
  gap: 2px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-upload-head strong {
  font-size: 0.9rem;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-upload-head span {
  color: var(--ox-text-2);
  font-size: 0.78rem;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-upload-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-file {
  display: none;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-dropzone {
  min-height: 104px;
  border-radius: 14px;
  border: 1px dashed rgba(143, 167, 191, 0.56);
  background: rgba(247, 251, 255, 0.9);
  box-shadow: var(--ox-neu-inset-sm);
  display: grid;
  place-items: center;
  text-align: center;
  gap: 6px;
  padding: 10px;
  color: #4d657f;
  transition: border-color var(--ox-trans-fast), box-shadow var(--ox-trans-fast), transform var(--ox-trans-fast);
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-dropzone strong {
  color: var(--ox-text-0);
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-dropzone.is-dragover {
  border-color: rgba(212, 122, 31, 0.62);
  box-shadow: inset 3px 3px 9px rgba(159, 173, 193, 0.32), inset -4px -4px 10px rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-upload-progress {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(221, 230, 240, 0.88);
  background: rgba(240, 246, 253, 0.9);
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-upload-progress__bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f2a24d, #d47a1f);
  transition: width 0.22s ease;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-upload-status {
  min-height: 1.2em;
  font-size: 0.78rem;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-upload-foot {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ox-text-2);
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-modal-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-modal-inline-search {
  min-width: min(420px, 100%);
  display: grid;
  gap: 6px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-modal-toolbar__stats {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-select-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-folder {
  border: 1px solid rgba(221, 231, 242, 0.86);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.96), rgba(247, 251, 255, 0.93));
  box-shadow: var(--ox-shadow-micro);
  padding: 10px;
  display: grid;
  gap: 10px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-folder__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-folder__title {
  font-weight: 700;
  color: #274663;
  overflow-wrap: anywhere;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 10px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-pool-item {
  min-width: 0;
  border: 1px solid rgba(221, 230, 241, 0.88);
  border-radius: 12px;
  background: rgba(251, 253, 255, 0.95);
  box-shadow: var(--ox-shadow-micro);
  overflow: hidden;
  display: grid;
  gap: 8px;
  padding: 8px;
  cursor: pointer;
  transition: transform var(--ox-trans-fast), box-shadow var(--ox-trans-fast), border-color var(--ox-trans-fast);
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-pool-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--ox-shadow-soft);
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-pool-item.is-selected {
  border-color: rgba(212, 122, 31, 0.5);
  background: linear-gradient(180deg, rgba(255, 249, 241, 0.97), rgba(252, 245, 236, 0.94));
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-pool-item[hidden] {
  display: none !important;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-pool-item img {
  width: 100%;
  height: 132px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(224, 232, 241, 0.88);
  background: rgba(246, 251, 255, 0.9);
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-pool-meta {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-pool-meta__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-pool-meta input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-pool-id {
  font-size: 0.75rem;
  color: #506783;
  font-weight: 650;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-pool-name {
  color: #1f3349;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-pool-path {
  font-size: 13px;
  line-height: 1.2;
  word-break: break-word;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-gallery-card {
  gap: 12px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-gallery-head {
  margin-bottom: 0;
  align-items: flex-start;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-pe-reorder-form {
  justify-content: flex-end;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 12px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-item {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(222, 231, 241, 0.9);
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.98), rgba(246, 250, 255, 0.95));
  box-shadow: var(--ox-shadow-micro);
  padding: 10px;
  display: grid;
  gap: 10px;
  min-width: 0;
  transition: transform var(--ox-trans-fast), box-shadow var(--ox-trans-fast), border-color var(--ox-trans-fast);
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--ox-shadow-soft);
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-item.is-main {
  border-color: rgba(212, 122, 31, 0.52);
  box-shadow: 0 0 0 2px rgba(212, 122, 31, 0.15), var(--ox-shadow-soft);
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-item.is-dragging {
  opacity: 0.74;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-item > img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(225, 233, 242, 0.9);
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(212, 122, 31, 0.68);
  background: linear-gradient(180deg, #eda352, #d47a1f);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-meta {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-handle {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(218, 228, 239, 0.92);
  background: rgba(249, 252, 255, 0.96);
  color: #405e7b;
  font-weight: 700;
  cursor: grab;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-handle:active {
  cursor: grabbing;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-move {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-order {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-order .input {
  width: 92px;
  min-height: 34px;
  padding: 0 8px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-alt-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.ox-shell-root .wx-product-edit-page-v2 .wx-media-alt-form .input {
  min-height: 34px;
}

@media (max-width: 1100px) {
  .ox-shell-root .wx-products-page .wx-product-thumb {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }

  .ox-shell-root .wx-product-edit-page-v2 .wx-pe-main-grid {
    grid-template-columns: 1fr;
  }

  .ox-shell-root .wx-product-edit-page-v2 .wx-pe-side-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ox-shell-root .wx-product-edit-page-v2 .wx-pe-side-column > * {
    height: 100%;
  }
}

@media (max-width: 880px) {
  .ox-shell-root .wx-product-edit-page-v2 .wx-pe-header-card__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ox-shell-root .wx-product-edit-page-v2 .wx-pe-form-grid {
    grid-template-columns: 1fr;
  }

  .ox-shell-root .wx-product-edit-page-v2 .wx-pe-media-panels {
    grid-template-columns: 1fr;
  }

  .ox-shell-root .wx-product-edit-page-v2 .wx-media-search-form {
    grid-template-columns: 1fr;
  }

  .ox-shell-root .wx-product-edit-page-v2 .wx-media-modal-inline-search {
    min-width: 0;
    width: 100%;
  }

  .ox-shell-root .wx-product-edit-page-v2 .wx-media-pool-grid {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  }

  .ox-shell-root .wx-product-edit-page-v2 .wx-pe-side-column {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ox-shell-root .wx-products-page .wx-product-thumb {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 10px;
  }

  .ox-shell-root .wx-product-edit-page-v2 .wx-pe-header-card__summary {
    grid-template-columns: 1fr;
  }

  .ox-shell-root .wx-product-edit-page-v2 .wx-pe-header-card__actions,
  .ox-shell-root .wx-product-edit-page-v2 .wx-pe-actions {
    width: 100%;
  }

  .ox-shell-root .wx-product-edit-page-v2 .wx-pe-header-card__actions .btn,
  .ox-shell-root .wx-product-edit-page-v2 .wx-pe-actions .btn {
    width: 100%;
  }

  .ox-shell-root .wx-product-edit-page-v2 .wx-modal#wxMediaModal .wx-modal__panel--media {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .ox-shell-root .wx-product-edit-page-v2 .wx-media-pool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ox-shell-root .wx-product-edit-page-v2 .wx-media-pool-item img {
    height: 108px;
  }

  .ox-shell-root .wx-product-edit-page-v2 .wx-media-gallery {
    grid-template-columns: 1fr;
  }

  .ox-shell-root .wx-product-edit-page-v2 .wx-media-alt-form {
    grid-template-columns: 1fr;
  }
}

.wx-products-page .wx-product-cell__text {
  min-width: 0;
}

.wx-products-page .wx-product-name {
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}

.wx-products-page .wx-product-open-link {
  color: inherit;
  text-decoration: none;
}

.wx-products-page .wx-product-open-link:hover {
  text-decoration: underline;
}

.wx-products-page .wx-product-preview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 142px;
  white-space: nowrap;
}

.wx-products-page .wx-product-preview-btn.is-disabled {
  opacity: 0.56;
  pointer-events: none;
}

.wx-products-page .wx-product-preview-btn--mobile {
  justify-self: start;
}

.wx-products-page .wx-product-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(132, 163, 189, 0.5);
  background: rgba(239, 247, 252, 0.94);
  color: #254866;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.wx-products-page .wx-product-badge--elfogyott {
  border-color: rgba(186, 122, 45, 0.5);
  background: rgba(255, 238, 211, 0.94);
  color: #7c4d14;
}

.wx-products-page .wx-product-badge--rejtett {
  border-color: rgba(113, 135, 159, 0.54);
  background: rgba(230, 237, 246, 0.94);
  color: #35506c;
}

.wx-products-page .wx-product-badge--torolt {
  border-color: rgba(190, 75, 62, 0.48);
  background: rgba(255, 226, 220, 0.9);
  color: #8c2a22;
}

.wx-products-page .wx-product-badge--default {
  border-color: rgba(132, 163, 189, 0.5);
  background: rgba(239, 247, 252, 0.94);
  color: #254866;
}

.wx-products-page .wx-product-status-select {
  min-width: 120px;
}

/* Catalog products: inline price editor (double click) */
.wx-products-page .wx-product-price-editor {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 0;
}

.wx-products-page .wx-product-price-display {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: right;
}

.wx-products-page .wx-product-price-display--editable {
  display: grid;
  justify-items: end;
  gap: 2px;
  border-radius: 12px;
  padding: 6px 8px;
  cursor: pointer;
  transition: background var(--ox-trans-fast), box-shadow var(--ox-trans-fast), transform var(--ox-trans-fast);
}

.wx-products-page .wx-product-price-display--editable:hover,
.wx-products-page .wx-product-price-editor.is-editing .wx-product-price-display--editable {
  background: rgba(255, 255, 255, 0.48);
  box-shadow: var(--ox-neu-inset-sm);
}

.wx-products-page .wx-product-price-display--editable:focus-visible {
  outline: 2px solid rgba(226, 133, 40, 0.42);
  outline-offset: 1px;
}

.wx-products-page .wx-product-price-display__hint {
  font-size: 13px;
  color: var(--ox-text-2);
  opacity: 0;
  transition: opacity var(--ox-trans-fast);
}

.wx-products-page .wx-product-price-display--editable:hover .wx-product-price-display__hint,
.wx-products-page .wx-product-price-editor.is-editing .wx-product-price-display__hint {
  opacity: 0.9;
}

.wx-products-page .wx-product-price-form {
  min-width: min(320px, 84vw);
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: var(--ox-shadow-soft);
}

.wx-products-page .wx-product-price-form__inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 8px;
}

.wx-products-page .wx-product-price-field {
  min-width: 0;
  display: grid;
  gap: 4px;
  text-align: left;
}

.wx-products-page .wx-product-price-field > span {
  font-size: 13px;
  color: var(--ox-text-2);
  font-weight: 600;
}

.wx-products-page .wx-product-price-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.wx-products-page .wx-product-price-editor.is-editing .wx-product-price-display {
  opacity: 0.72;
}

@media (max-width: 980px) {
  .wx-products-page .wx-product-price-form {
    min-width: 0;
    width: 100%;
  }

  .wx-products-page .wx-product-price-form__inputs {
    grid-template-columns: 1fr;
  }

  .wx-products-page .wx-product-price-form__actions {
    justify-content: stretch;
  }

  .wx-products-page .wx-product-price-form__actions .btn {
    flex: 1 1 0;
  }

  .wx-products-page .wx-product-price-display__hint {
    opacity: 0.8;
  }
}

/* 2026-03-21 monotone + depth calibration v6
   Goal: single-tone shell + refined neumorph depth hierarchy (reference-aligned). */
.ox-shell-root {
  --ox-tone-lock: #ffffff;
  --ox-neu-hi: rgba(255, 255, 255, 0.94);
  --ox-neu-hi-soft: rgba(255, 255, 255, 0.86);
  --ox-neu-lo: rgba(168, 181, 200, 0.32);
  --ox-neu-lo-soft: rgba(168, 181, 200, 0.24);
  --ox-neu-raised-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
  --ox-neu-raised-md: 0 6px 14px rgba(15, 23, 42, 0.08);
  --ox-neu-raised-lg: 0 12px 24px rgba(15, 23, 42, 0.1);
  --ox-neu-inset-sm: 0 0 0 1px rgba(182, 198, 218, 0.46);
  --ox-neu-inset-md: 0 0 0 1px rgba(172, 189, 210, 0.52);
  --ox-panel-border: 1px solid rgba(182, 198, 218, 0.46);
  --ox-panel-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);

  background: var(--ox-tone-lock) !important;
  background-image: none !important;
}

html,
body {
  background: #ffffff !important;
  background-image: none !important;
}

.ox-shell-root :is(
  .ox-shell-topbar,
  .ox-shell-topbar.ox-shell-topbar--integrated,
  .app,
  .app.app--integrated-shell,
  .main,
  .wx-dashboard-shell,
  .wx-suite-commandbar,
  .wx-orders-header,
  .wx-orders-results,
  .wx-orders-toolbar,
  .wx-orders-filterbar,
  .wx-orders-strip,
  .wx-orders-bulkbar,
  .wx-panel,
  .settings-panel,
  .card,
  .card-pad,
  .wx-workspace-surface,
  .wx-workspace-surface--table,
  .wx-suite-section,
  .wx-kpi-card,
  .wx-kpi-strip,
  .wx-kpi-strip__item,
  .wx-revenue-breakdown,
  .wx-table-wrap,
  .wx-responsive-table,
  .table-wrap
) {
  background: var(--ox-tone-lock) !important;
  background-image: none !important;
}

.ox-shell-root :is(
  .wx-panel,
  .settings-panel,
  .card,
  .card-pad,
  .wx-workspace-surface,
  .wx-workspace-surface--table,
  .wx-suite-section,
  .wx-suite-commandbar,
  .wx-orders-header,
  .wx-orders-results,
  .wx-kpi-card,
  .wx-kpi-strip,
  .wx-kpi-strip__item,
  .wx-revenue-breakdown,
  .wx-table-wrap,
  .wx-responsive-table
) {
  border: 1px solid rgba(182, 198, 218, 0.46) !important;
  background: var(--ox-surface-1) !important;
  box-shadow: none !important;
}

.ox-shell-root :is(
  .ox-shell-topbar__icon-btn,
  .ox-shell-topbar__brand,
  .ox-shell-topbar__context,
  .ox-shell-topbar__tenant,
  .ox-shell-topbar__switcher,
  .ox-shell-topbar__profile-toggle,
  .ox-shell-topbar__switcher-btn,
  .btn:not(.btn-primary):not(.btn-danger):not(.wx-btn-danger),
  button:not(.btn-primary):not(.btn-danger):not(.wx-btn-danger),
  .wx-orders-status-btn,
  .wx-period-pill,
  .ox-page-nav__item,
  .wx-settings-inline-tab,
  .wx-email-topbar__tab
) {
  border: 1px solid rgba(184, 199, 219, 0.44) !important;
  background: var(--ox-surface-1) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--ox-text-default) !important;
}

.ox-shell-root :is(
  .ox-page-nav__item.is-active,
  .wx-settings-inline-tab.is-active,
  .wx-email-topbar__tab.is-active
) {
  color: var(--ox-accent) !important;
  border-color: rgba(212, 122, 31, 0.44) !important;
  background: rgba(255, 245, 231, 0.86) !important;
  box-shadow: none !important;
}







.ox-shell-root :is(
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select,
  .form-control,
  .wx-input,
  .wx-select
) {
  border: 1px solid rgba(184, 199, 219, 0.46) !important;
  background: var(--ox-surface-1) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.ox-shell-root :is(
  .wx-table-wrap .table thead th,
  .wx-table-wrap .table tbody td,
  .wx-responsive-table .table thead th,
  .wx-responsive-table .table tbody td,
  .table-wrap .table thead th,
  .table-wrap .table tbody td
) {
  background: transparent !important;
  background-image: none !important;
}

/* 2026-03-23 accent control contrast fix
   Keep labels readable on orange active backgrounds. */
.ox-shell-root .btn-primary,
.ox-shell-root .btn-primary:hover,
.ox-shell-root .btn-primary:active,
.ox-shell-root .wx-orders-status-btn.is-active,
.ox-shell-root .wx-period-pill.is-active {
  color: #fff !important;
}

/* 2026-03-23 orders page polish
   Fix: title hierarchy + clearer hover/active states on orders list controls. */
.ox-shell-root .wx-orders-page .wx-orders-header__row--top {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.ox-shell-root .wx-orders-page .wx-orders-header__title-wrap .h1 {
  margin: 0;
  font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.6rem);
  letter-spacing: 0.01em;
  color: var(--ox-text-0);
}

.ox-shell-root .wx-orders-page .wx-orders-header__title-wrap .sub {
  margin: 0;
  color: var(--ox-text-2);
  font-size: 0.84rem;
}

.ox-shell-root .wx-orders-page .wx-orders-results .wx-panel-title {
  font-size: 1.02rem;
  font-weight: 780;
  letter-spacing: 0.01em;
  color: var(--ox-text-0);
}

.ox-shell-root .wx-orders-page .wx-orders-status-btn:hover,
.ox-shell-root .wx-orders-page .wx-orders-status-btn:focus-visible {
  border-color: rgba(212, 122, 31, 0.62) !important;
  background: linear-gradient(180deg, rgba(255, 243, 225, 0.98), rgba(255, 236, 207, 0.95)) !important;
  color: #8f4f10 !important;
  box-shadow: 0 8px 16px rgba(212, 122, 31, 0.16) !important;
  transform: translateY(-1px);
}

.ox-shell-root .wx-orders-page .wx-orders-status-btn.is-active {
  color: #ffffff !important;
}

.ox-shell-root .wx-orders-page .wx-orders-table tbody tr:hover {
  background: rgba(232, 241, 255, 0.9) !important;
  box-shadow: inset 3px 0 0 rgba(212, 122, 31, 0.52);
}

.ox-shell-root .wx-orders-page .wx-orders-table tbody tr:hover .wx-order-code-link {
  color: #99540f;
}

.ox-shell-root .wx-orders-page .wx-order-code-link:focus-visible {
  outline: 2px solid rgba(212, 122, 31, 0.56);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 2026-03-23 orders status save visibility fix
   Keep the inline "Mentés" label readable on light theme + disabled state. */
.ox-shell-root .wx-orders-page .wx-status-save,
.ox-shell-root .wx-orders-page .wx-status-save:hover,
.ox-shell-root .wx-orders-page .wx-status-save:focus-visible {
  color: #ffffff !important;
}

.ox-shell-root .wx-orders-page .wx-status-save:disabled,
.ox-shell-root .wx-orders-page .wx-status-save[disabled] {
  opacity: 0.9 !important;
  border-color: rgba(209, 119, 28, 0.45) !important;
  background: linear-gradient(165deg, #e49a46, #cc7218) !important;
  color: #ffffff !important;
}

/* 2026-03-25 order view hierarchy refresh
   Scope: command/action hierarchy and responsive behavior on order detail page. */
.ox-shell-root .wx-order-view-page .wx-order-commandbar__actions .btn-secondary:not(.wx-btn-danger):not(.wx-cmd-btn--invoice) {
  border-color: rgba(163, 183, 204, 0.9) !important;
  color: #1f3f5d !important;
}

.ox-shell-root .wx-order-view-page .wx-order-commandbar__actions .btn-secondary:not(.wx-btn-danger):not(.wx-cmd-btn--invoice):hover,
.ox-shell-root .wx-order-view-page .wx-order-commandbar__actions .btn-secondary:not(.wx-btn-danger):not(.wx-cmd-btn--invoice):focus-visible {
  border-color: rgba(118, 154, 186, 0.94) !important;
  background: linear-gradient(180deg, rgba(243, 249, 255, 0.98), rgba(232, 242, 252, 0.95)) !important;
  color: #173750 !important;
  box-shadow: 0 10px 20px rgba(120, 146, 175, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

@media (max-width: 1240px) {
  .ox-shell-root .wx-order-view-page .wx-order-commandbar__actions {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }

  .ox-shell-root .wx-order-view-page .wx-order-actiongroup--secondary,
  .ox-shell-root .wx-order-view-page .wx-order-actiongroup--shipping {
    justify-content: flex-start;
  }
}

@media (max-width: 980px) {
  .ox-shell-root .wx-orders-page .wx-orders-header__row--top {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .ox-shell-root .wx-orders-page .wx-orders-header__summary {
    justify-content: flex-start;
  }

  .ox-shell-root .wx-order-view-page .wx-order-head {
    grid-template-columns: 1fr;
  }

  .ox-shell-root .wx-order-view-page .wx-order-head__context {
    justify-items: start;
  }

  .ox-shell-root .wx-order-view-page .wx-order-head__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ox-shell-root .wx-order-view-page .wx-order-commandbar__actions {
    grid-template-columns: 1fr;
  }

  .ox-shell-root .wx-order-view-page .wx-order-actiongroup {
    width: 100%;
    justify-content: flex-start;
  }

  .ox-shell-root .wx-order-view-page .wx-order-commandbar__actions .wx-command-form {
    width: 100%;
  }

  .ox-shell-root .wx-order-view-page .wx-order-commandbar__actions .wx-command-form--status {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 6px;
  }

  .ox-shell-root .wx-order-view-page .wx-order-commandbar__actions .wx-command-select,
  .ox-shell-root .wx-order-view-page .wx-order-commandbar__actions .wx-cmd-btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .ox-shell-root .wx-order-view-page .wx-order-head__facts {
    grid-template-columns: 1fr;
  }

  .ox-shell-root .wx-order-view-page .wx-order-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* 2026-03-23 admin home clarity redesign
   Goal: cleaner information hierarchy, fewer visual blocks, faster scanning. */
.main .wx-admin-home > .wx-list-center {
  width: min(100%, 1420px) !important;
  margin-inline: auto !important;
  display: grid;
  gap: 10px;
}

.wx-admin-home {
  width: 100%;
}

.wx-admin-home__hero,
.wx-admin-home__panel {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.97));
  box-shadow: var(--ox-shadow-card);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.wx-admin-home__hero-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.wx-admin-home__hero-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.wx-admin-home__eyebrow {
  margin: 0;
  color: #7287a1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 700;
}

.wx-admin-home__title {
  margin: 0;
  color: var(--ox-text-0);
  font-size: clamp(1.36rem, 1.08rem + 0.62vw, 1.9rem);
  line-height: 1.14;
  font-weight: 790;
}

.wx-admin-home__lead {
  margin: 0;
  color: var(--ox-text-2);
  font-size: 0.89rem;
  line-height: 1.55;
  max-width: 62ch;
}

.wx-admin-home__hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.wx-admin-home__hero-state {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wx-admin-home__state-pill {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(145, 170, 195, 0.52);
  background: rgba(245, 250, 255, 0.9);
  color: #33516e;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.wx-admin-home__state-pill.is-ok {
  border-color: rgba(74, 160, 109, 0.45);
  background: rgba(231, 247, 238, 0.94);
  color: #1f7d4f;
}

.wx-admin-home__state-pill.is-soft,
.wx-admin-home__state-pill.is-neutral {
  border-color: rgba(150, 172, 196, 0.48);
  background: rgba(245, 250, 255, 0.9);
  color: #3a5773;
}

.wx-admin-home__state-meta {
  color: var(--ox-text-2);
  font-size: 0.79rem;
}

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

.wx-admin-home__stat {
  border-radius: 14px;
  border: 1px solid rgba(220, 229, 239, 0.9);
  background: rgba(255, 255, 255, 0.78);
  padding: 12px;
  display: grid;
  gap: 5px;
}

.wx-admin-home__stat.is-warn {
  border-color: rgba(218, 138, 44, 0.38);
  background: rgba(255, 246, 231, 0.9);
}

.wx-admin-home__stat-label {
  color: #556f89;
  font-size: 0.74rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wx-admin-home__stat-value {
  color: #1a334d;
  font-size: clamp(1.24rem, 1.04rem + 0.45vw, 1.62rem);
  font-weight: 780;
  line-height: 1.08;
}

.wx-admin-home__stat-hint {
  color: #607890;
  font-size: 0.78rem;
}

.wx-admin-home__alerts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.wx-admin-home__alert {
  border-radius: 12px;
  border: 1px solid rgba(219, 231, 242, 0.9);
  background: rgba(255, 255, 255, 0.8);
  padding: 10px 11px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.wx-admin-home__alert-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.wx-admin-home__alert-title {
  color: #18334f;
  font-size: 0.86rem;
  font-weight: 700;
}

.wx-admin-home__alert-desc {
  color: #5e768d;
  font-size: 0.78rem;
}

.wx-admin-home__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wx-admin-home__panel--clean {
  gap: 12px;
}

.wx-admin-home__panel-sub {
  margin: 0;
  color: #5f758e;
  font-size: 0.83rem;
  line-height: 1.45;
}

.wx-admin-home__panel-title {
  margin: 0;
  color: #19344f;
  font-size: 1rem;
  font-weight: 740;
}

.wx-admin-home__count {
  min-width: 24px;
  min-height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(144, 171, 196, 0.56);
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #35536f;
  font-size: 0.73rem;
  font-weight: 700;
}

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

.wx-admin-home__quick-grid--clean {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.wx-admin-home__quick {
  border-radius: 12px;
  border: 1px solid rgba(214, 226, 239, 0.9);
  background: rgba(255, 255, 255, 0.84);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  color: inherit;
  transition: border-color var(--ox-trans-fast), background var(--ox-trans-fast), box-shadow var(--ox-trans-fast);
}

.wx-admin-home__quick:hover {
  border-color: rgba(205, 130, 54, 0.55);
  background: rgba(255, 249, 241, 0.9);
  box-shadow: var(--ox-shadow-micro);
}

.wx-admin-home__quick-icon,
.wx-admin-home__module-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid rgba(148, 173, 196, 0.46);
  background: rgba(246, 251, 255, 0.94);
  color: #35526f;
  display: grid;
  place-items: center;
}

.wx-admin-home__quick-icon svg,
.wx-admin-home__module-icon svg {
  width: 16px;
  height: 16px;
}

.wx-admin-home__quick-body,
.wx-admin-home__module-body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.wx-admin-home__quick-title,
.wx-admin-home__module-title {
  color: #1d364f;
  font-size: 0.86rem;
  font-weight: 700;
}

.wx-admin-home__quick-desc,
.wx-admin-home__module-desc {
  color: #5d738a;
  font-size: 0.77rem;
  line-height: 1.34;
}

.wx-admin-home__quick-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.wx-admin-home__badge {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(145, 171, 196, 0.54);
  background: rgba(245, 251, 255, 0.92);
  color: #375673;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.wx-admin-home__badge.is-muted {
  color: #6a8096;
}

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

.wx-admin-home__category {
  border-radius: 12px;
  border: 1px solid rgba(214, 226, 239, 0.9);
  background: rgba(255, 255, 255, 0.78);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.wx-admin-home__category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wx-admin-home__category-title {
  margin: 0;
  color: #213b55;
  font-size: 0.9rem;
  font-weight: 700;
}

.wx-admin-home__category-count {
  min-width: 22px;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(146, 172, 196, 0.55);
  color: #3a5874;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wx-admin-home__module-list,
.wx-admin-home__inactive-list {
  display: grid;
  gap: 8px;
}

.wx-admin-home__module,
.wx-admin-home__inactive-item {
  border-radius: 10px;
  border: 1px solid rgba(214, 226, 239, 0.9);
  background: rgba(248, 252, 255, 0.88);
  padding: 8px 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: inherit;
}

.wx-admin-home__module:hover {
  border-color: rgba(202, 128, 51, 0.52);
  background: rgba(255, 249, 241, 0.9);
}

.wx-admin-home__panel--inactive {
  border-style: dashed;
}

.wx-admin-home__inactive-item {
  opacity: 0.92;
}

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

.wx-admin-home__status-tile {
  border-radius: 11px;
  border: 1px solid rgba(214, 226, 239, 0.9);
  background: rgba(248, 252, 255, 0.9);
  padding: 9px 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: inherit;
  transition: border-color var(--ox-trans-fast), background var(--ox-trans-fast);
}

.wx-admin-home__status-tile:hover {
  border-color: rgba(202, 128, 51, 0.52);
  background: rgba(255, 249, 241, 0.9);
}

.wx-admin-home__status-tile.is-inactive {
  border-color: rgba(208, 218, 230, 0.9);
  background: rgba(246, 250, 255, 0.84);
}

.wx-admin-home__status-badge {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(145, 171, 196, 0.54);
  background: rgba(245, 251, 255, 0.92);
  color: #375673;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.wx-admin-home__status-badge.is-active {
  border-color: rgba(74, 160, 109, 0.46);
  background: rgba(233, 247, 238, 0.96);
  color: #1c7a4b;
}

.wx-admin-home__status-badge.is-inactive {
  border-color: rgba(148, 170, 194, 0.5);
  background: rgba(243, 249, 255, 0.95);
  color: #5f768f;
}

.wx-admin-home__empty {
  border-radius: 12px;
  border: 1px dashed rgba(146, 171, 195, 0.58);
  background: rgba(246, 250, 255, 0.88);
  color: #4c6580;
  padding: 13px;
  font-size: 0.84rem;
}

@media (max-width: 1200px) {
  .wx-admin-home__stats,
  .wx-admin-home__quick-grid,
  .wx-admin-home__status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wx-admin-home__quick-grid--clean {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .wx-admin-home__hero-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .wx-admin-home__hero-actions {
    justify-content: flex-start;
  }

  .wx-admin-home__category-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .wx-admin-home__stats,
  .wx-admin-home__quick-grid,
  .wx-admin-home__status-grid {
    grid-template-columns: 1fr;
  }

  .wx-admin-home__quick,
  .wx-admin-home__module,
  .wx-admin-home__inactive-item,
  .wx-admin-home__status-tile {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .wx-admin-home__quick .wx-admin-home__badge,
  .wx-admin-home__module .wx-admin-home__badge,
  .wx-admin-home__inactive-item .wx-admin-home__badge,
  .wx-admin-home__status-tile .wx-admin-home__status-badge {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
  }
}

/* 2026-03-25 analytics dashboard overhaul
   Goal: clearer hierarchy, stronger KPI rhythm, better table scanning and balanced panel layout. */
.main .wx-analytics-home > .wx-list-center {
  width: min(100%, 1500px) !important;
  margin-inline: auto !important;
  display: grid;
  gap: 16px;
}

.wx-analytics-home__hero,
.wx-analytics-home__panel {
  border-radius: 18px;
  border: 1px solid #d6e2f0;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  padding: 18px 20px;
  display: grid;
  gap: 12px;
}

.wx-analytics-home__hero {
  background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
  border-color: #cfdcec;
}

.wx-analytics-home__hero-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.wx-analytics-home__hero-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.wx-analytics-home__title {
  margin: 0;
  color: #132c46;
  font-size: clamp(1.35rem, 1.08rem + 0.6vw, 1.86rem);
  font-weight: 800;
  line-height: 1.1;
}

.wx-analytics-home__lead {
  margin: 0;
  color: #516b86;
  font-size: 0.88rem;
  line-height: 1.55;
}

.wx-analytics-home__hero-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.wx-analytics-home__period {
  display: grid;
  gap: 8px;
}

.wx-analytics-home__period-label {
  color: #4f6782;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wx-analytics-home .wx-period-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wx-analytics-home .wx-period-pill {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid #c8d8ea;
  background: #f5f9ff;
  color: #2c4662;
  font-size: 0.84rem;
  font-weight: 700;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.wx-analytics-home .wx-period-pill:hover {
  background: #ebf3fd;
  border-color: #b8cce1;
  color: #1d3956;
  transform: translateY(-1px);
}

.wx-analytics-home .wx-period-pill.is-active {
  border-color: #1e3f63;
  background: #1e3f63;
  color: #f6fbff;
  box-shadow: 0 6px 16px rgba(30, 63, 99, 0.24);
}

.wx-analytics-home__meta {
  color: #4f6680;
  font-size: 0.79rem;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px dashed #cad9e9;
  background: #f7fbff;
}

.wx-analytics-home__content {
  display: grid;
  gap: 14px;
}

.wx-analytics-home__section-title {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.wx-analytics-home__section-title > strong {
  color: #15314f;
  font-size: 1rem;
  font-weight: 780;
}

.wx-analytics-home__section-title > p {
  margin: 0;
  color: #607b96;
  font-size: 0.78rem;
}

.wx-analytics-home__kpi-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.wx-analytics-home__kpi-card {
  grid-column: span 3;
  min-height: 122px;
  border-radius: 14px;
  border: 1px solid #d6e3f1;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  padding: 13px 14px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.wx-analytics-home__kpi-card.is-featured {
  grid-column: span 6;
  min-height: 136px;
  padding: 16px;
}

.wx-analytics-home__kpi-card--primary {
  border-color: #bcd2ea;
  background: linear-gradient(180deg, #f5fbff, #f7f8fa);
}

.wx-analytics-home__kpi-card--accent {
  border-color: rgba(218, 142, 39, 0.35);
  background: linear-gradient(180deg, #fff8ed, #fff2de);
}

.wx-analytics-home__kpi-card--ok {
  border-color: rgba(66, 138, 96, 0.32);
  background: linear-gradient(180deg, #f2fbf6, #eaf8f1);
}

.wx-analytics-home__kpi-card--warn {
  border-color: rgba(206, 126, 26, 0.32);
  background: linear-gradient(180deg, #fff7ee, #fff0df);
}

.wx-analytics-home__kpi-label {
  color: #5d7490;
  font-size: 0.74rem;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wx-analytics-home__kpi-value {
  color: #132c46;
  font-size: clamp(1.3rem, 1rem + 0.95vw, 2rem);
  font-weight: 820;
  line-height: 1.08;
}

.wx-analytics-home__kpi-meta {
  color: #5a728d;
  font-size: 0.78rem;
  line-height: 1.45;
}

.wx-analytics-home__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.wx-analytics-home__split--asym {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

.wx-analytics-home__panel--inner {
  min-width: 0;
}

.wx-analytics-home__panel--spotlight {
  align-content: start;
}

.wx-analytics-home__subhead {
  margin: 0;
  color: #1a3654;
  font-size: 0.98rem;
  font-weight: 770;
}

.wx-analytics-home__mini-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.wx-analytics-home__mini-kpi {
  min-width: 0;
  border: 1px solid #d6e4f3;
  border-radius: 12px;
  background: #f8fbff;
  padding: 9px 10px;
  display: grid;
  gap: 4px;
}

.wx-analytics-home__mini-kpi > span {
  color: #607896;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wx-analytics-home__mini-kpi > strong {
  color: #1a3654;
  font-size: 0.94rem;
  font-weight: 760;
  line-height: 1.3;
}

.wx-analytics-home__mini-kpi > em {
  color: #617c98;
  font-size: 0.73rem;
  font-style: normal;
}

.wx-analytics-home .wx-suite-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.wx-analytics-home .wx-suite-section__count {
  min-width: 24px;
  min-height: 24px;
  border-radius: 999px;
  border: 1px solid #b8cce1;
  background: #f0f6fd;
  color: #2f4c6b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 760;
}

.wx-analytics-home .wx-table-wrap {
  border: 1px solid #d7e3f1;
  border-radius: 13px;
  overflow: hidden;
  background: #ffffff;
}

.wx-analytics-home .wx-analytics-table {
  margin: 0;
}

.wx-analytics-home .wx-analytics-table thead th {
  background: #edf3fb;
  color: #304d6b;
  font-size: 0.73rem;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #d4e0ef;
  padding: 11px 12px;
}

.wx-analytics-home .wx-analytics-table tbody td {
  color: #1f3752;
  font-size: 0.86rem;
  border-top: 1px solid #e7eef7;
  padding: 10px 12px;
  vertical-align: middle;
}

.wx-analytics-home .wx-analytics-table tbody tr:nth-child(even) {
  background: #f9fcff;
}

.wx-analytics-home .wx-analytics-table tbody tr:hover {
  background: #f7f8fa;
}

.wx-analytics-home .table td .btn.btn-secondary.btn-sm {
  min-height: 30px;
  border-color: #c8d8ea;
  background: #f4f9ff;
  color: #24415f;
}

.wx-analytics-home .table td .btn.btn-secondary.btn-sm:hover {
  background: #e9f2fe;
  border-color: #b4cae3;
}

@media (max-width: 1320px) {
  .wx-analytics-home__kpi-card {
    grid-column: span 4;
  }

  .wx-analytics-home__kpi-card.is-featured {
    grid-column: span 6;
  }
}

@media (max-width: 1060px) {
  .wx-analytics-home__hero-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .wx-analytics-home__hero-actions {
    justify-content: flex-start;
  }

  .wx-analytics-home__split,
  .wx-analytics-home__split--asym {
    grid-template-columns: 1fr;
  }

  .wx-analytics-home__kpi-card {
    grid-column: span 6;
  }

  .wx-analytics-home__kpi-card.is-featured {
    grid-column: span 12;
  }
}

@media (max-width: 760px) {
  .wx-analytics-home__hero,
  .wx-analytics-home__panel {
    padding: 14px;
  }

  .wx-analytics-home__kpi-grid {
    gap: 10px;
  }

  .wx-analytics-home__kpi-card,
  .wx-analytics-home__kpi-card.is-featured {
    grid-column: span 12;
  }

  .wx-analytics-home__mini-kpis {
    grid-template-columns: 1fr;
  }

  .wx-analytics-home .wx-period-pill {
    min-height: 36px;
    padding-inline: 12px;
  }
}

/* 2026-03-23 webshop performance mode
   Goal: reduce lag by simplifying expensive shadows/transitions on webshop admin pages. */
body.ox-nav--webshop_admin {
  --ox-shadow-micro: 0 1px 2px rgba(15, 23, 42, 0.08);
  --ox-shadow-soft: 0 2px 8px rgba(15, 23, 42, 0.10);
  --ox-shadow-card: 0 4px 14px rgba(15, 23, 42, 0.12);
  --ox-shadow-float: 0 8px 18px rgba(15, 23, 42, 0.14);
  --ox-panel-shadow: var(--ox-shadow-card);
  --ox-neu-raised-sm: var(--ox-shadow-micro);
  --ox-neu-raised-md: var(--ox-shadow-soft);
  --ox-neu-raised-lg: var(--ox-shadow-card);
  --ox-neu-inset-sm: inset 0 0 0 1px rgba(148, 163, 184, 0.28);
  --ox-neu-inset-md: inset 0 0 0 1px rgba(148, 163, 184, 0.34);
}

body.ox-nav--webshop_admin :is(
  .wx-panel,
  .wx-suite-section,
  .wx-workspace-surface,
  .wx-orders-results,
  .wx-card,
  .wx-hub-card,
  .wx-module-row,
  .wx-kpi-card,
  .wx-dashboard-shell,
  .wx-suite-commandbar,
  .btn,
  .wx-period-pill,
  .wx-orders-status-btn
) {
  filter: none !important;
  backdrop-filter: none !important;
}

body.ox-nav--webshop_admin [data-ox-anim="fade-up"],
body.ox-nav--webshop_admin [data-ox-stagger] > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body.ox-nav--webshop_admin .table tbody tr:hover,
body.ox-nav--webshop_admin .wx-workspace-table tbody tr:hover {
  background: rgba(234, 241, 250, 0.78) !important;
}

@media (max-width: 900px) {
  body.ox-nav--webshop_admin :is(.wx-panel, .wx-suite-section, .wx-workspace-surface, .wx-orders-results, .wx-card, .wx-suite-commandbar) {
    box-shadow: var(--ox-shadow-micro) !important;
  }
}

/* 2026-03-22 webshop dashboard compact pass
   Goal: KPI tiles in one row on desktop to reduce unnecessary scrolling. */
.webshop-dashboard .wx-dashboard-main {
  gap: 12px;
}

.webshop-dashboard .wx-kpi-grid--dashboard {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.webshop-dashboard .wx-kpi-card--mini {
  min-height: 98px;
  border-radius: 14px;
  padding: 12px 12px;
  gap: 6px;
}

.webshop-dashboard .wx-kpi-card--mini .wx-kpi-label {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}

.webshop-dashboard .wx-kpi-card--mini .wx-kpi-num {
  font-size: clamp(1.6rem, 1.1rem + 0.9vw, 2.1rem);
  line-height: 1;
}

.webshop-dashboard .wx-kpi-card--mini .wx-kpi-foot {
  font-size: 13px;
  padding: 3px 8px;
}

.webshop-dashboard .wx-kpi-card--mini .wx-kpi-link {
  display: none;
}

/* 2026-03-26 webshop dashboard hard cleanup
   Goal: clearly compact header/control area + cleaner dashboard rhythm. */
.webshop-dashboard .ox-topbar-dashboard-controls {
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
}

.webshop-dashboard .ox-topbar-dashboard-controls__period {
  gap: 6px;
}

.webshop-dashboard .ox-topbar-dashboard-controls__label {
  font-size: 0.56rem;
  letter-spacing: 0.14em;
}

.webshop-dashboard .wx-period-toolbar--topbar {
  gap: 4px;
}

.webshop-dashboard .wx-period-pill--topbar {
  min-height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 0.68rem;
}

.webshop-dashboard .wx-mode-toggle-form--topbar {
  min-height: 30px;
  padding: 4px 8px;
  gap: 8px;
}

.webshop-dashboard .wx-mode-switch {
  gap: 6px;
}

.webshop-dashboard .wx-mode-switch__text {
  font-size: 0.7rem;
}

.webshop-dashboard .wx-mode-toggle-state {
  font-size: 0.68rem;
}

.webshop-dashboard .ox-global-module-nav {
  margin-top: 4px;
}

.webshop-dashboard .ox-global-module-nav .ox-page-nav__grid {
  gap: 6px;
}

.webshop-dashboard .ox-global-module-nav .ox-page-nav__item {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 13px;
}

.webshop-dashboard .wx-dashboard-main {
  gap: 10px;
}

.webshop-dashboard .wx-suite-section--panel {
  padding: 12px 14px;
}

.webshop-dashboard .wx-dashboard-activity-compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.webshop-dashboard .wx-dashboard-activity-compact__card {
  border: 1px solid rgba(213, 224, 238, 0.86);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
}

.webshop-dashboard .wx-dashboard-activity-compact__head h3 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
}

.webshop-dashboard .wx-dashboard-activity-compact__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.webshop-dashboard .wx-dashboard-activity-compact__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
}

.webshop-dashboard .wx-dashboard-activity-compact__name {
  min-width: 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ox-text-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.webshop-dashboard .wx-dashboard-activity-compact__metric {
  font-size: 13px;
  font-weight: 700;
  color: var(--ox-text-1);
  white-space: nowrap;
}

/* 2026-03-23 webshop quick tiles compact app layout
   Goal: less scrolling + clearer explanations with info marker. */
.webshop-dashboard .wx-suite-section--hub {
  padding: 12px 14px;
}

.webshop-dashboard .wx-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.webshop-dashboard .wx-hub-card {
  min-height: 86px;
  padding: 11px 12px;
  border-radius: 16px;
  gap: 10px;
  align-items: start;
  transition: border-color var(--ox-trans-fast), box-shadow var(--ox-trans-fast), background var(--ox-trans-fast);
}

.webshop-dashboard .wx-hub-card:hover,
.webshop-dashboard .wx-hub-card:focus-visible {
  border-color: rgba(217, 156, 96, 0.6);
  box-shadow: 0 6px 14px rgba(169, 186, 207, 0.18);
}

.webshop-dashboard .wx-hub-card__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.webshop-dashboard .wx-hub-card__icon svg {
  width: 16px;
  height: 16px;
}

.webshop-dashboard .wx-hub-card__body {
  gap: 2px;
}

.webshop-dashboard .wx-hub-card__head {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.webshop-dashboard .wx-hub-card__title {
  font-size: 0.9rem;
  line-height: 1.24;
  min-width: 0;
}

.webshop-dashboard .wx-hub-card__info-tip {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(126, 152, 180, 0.58);
  background: rgba(242, 248, 255, 0.96);
  color: #3e607f;
  font-size: 0.67rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
}

.webshop-dashboard .wx-hub-card__info-tip .wx-info-tip__bubble {
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  min-width: 180px;
  max-width: min(320px, 72vw);
}

@media (max-width: 1320px) {
  .webshop-dashboard .wx-kpi-grid--dashboard {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .webshop-dashboard .wx-kpi-card--mini {
    min-height: 112px;
  }

  .webshop-dashboard .wx-hub-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

@media (max-width: 820px) {
  .webshop-dashboard .wx-kpi-grid--dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .webshop-dashboard .wx-hub-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

  .webshop-dashboard .wx-dashboard-activity-compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .webshop-dashboard .wx-kpi-grid--dashboard {
    grid-template-columns: 1fr;
  }

  .webshop-dashboard .wx-kpi-card--mini {
    min-height: 96px;
  }

  .webshop-dashboard .wx-suite-section--hub {
    padding: 10px;
  }

  .webshop-dashboard .wx-hub-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* 2026-03-24 webshop lag cleanup
   Goal: keep the design consistent, but reduce heavy hover/compositing cost on dense admin pages. */
body.ox-nav--webshop_admin :is(
  .wx-suite-section,
  .wx-orders-results,
  .wx-card,
  .wx-hub-card,
  .wx-kpi-card,
  .wx-insight-card,
  .wx-suite-commandbar
) {
  box-shadow: var(--ox-shadow-micro) !important;
}

body.ox-nav--webshop_admin :is(
  .btn,
  .wx-orders-status-btn,
  .wx-period-pill,
  .wx-hub-card,
  .wx-kpi-card,
  .table tbody tr,
  .wx-orders-table tbody tr
) {
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease !important;
}

body.ox-nav--webshop_admin :is(
  .btn:hover,
  .btn:focus-visible,
  .wx-hub-card:hover,
  .wx-hub-card:focus-visible
) {
  transform: none !important;
}

body.ox-nav--webshop_admin .btn:not(.btn-primary):not(.btn-danger):not(.btn-success) {
  color: #1f364f !important;
}

body.ox-nav--webshop_admin .btn[disabled],
body.ox-nav--webshop_admin .btn:disabled {
  color: #7a8da3 !important;
}

/* 2026-03-24 CRM logo polish + button readability hardening
   - keep logo presentation clean and consistent across breakpoints
   - keep accent button backgrounds explicit after global tone locks */
.ox-shell-root .ox-shell-topbar__brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.ox-shell-root .ox-shell-topbar__brand-logo {
  display: block !important;
  width: clamp(132px, 9.8vw, 164px) !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 10px !important;
}

.ox-shell-root .ox-shell-topbar__brand:hover,
.ox-shell-root .ox-shell-topbar__brand:focus-visible {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.ox-shell-root .ox-sidebar__brand {
  min-height: 64px !important;
  width: min(100%, 186px) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ox-shell-root .ox-sidebar__brand-logo {
  width: min(100%, 164px) !important;
  height: auto !important;
}

.ox-shell-root .ox-mobile-drawer__brand {
  gap: 10px !important;
}

.ox-shell-root .ox-mobile-drawer__brand-logo {
  width: 116px !important;
  max-width: 100% !important;
  height: auto !important;
}

.ox-shell-root :is(.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus-visible) {
  border-color: rgba(212, 122, 31, 0.42) !important;
  background: linear-gradient(180deg, #ea9c47, var(--ox-primary)) !important;
  color: #fff !important;
}

.ox-shell-root :is(.btn-danger, .btn-danger:hover, .btn-danger:active, .btn-danger:focus-visible, .wx-btn-danger, .wx-btn-danger:hover, .wx-btn-danger:active, .wx-btn-danger:focus-visible) {
  border-color: rgba(179, 61, 48, 0.72) !important;
  background: linear-gradient(180deg, #dd6b63, #c54f45) !important;
  color: #fff !important;
}

.ox-shell-root .wx-order-view-page .wx-cmd-btn--invoice.btn-secondary,
.ox-shell-root .wx-order-view-page .wx-cmd-btn--invoice.btn-secondary:hover,
.ox-shell-root .wx-order-view-page .wx-cmd-btn--invoice.btn-secondary:focus-visible {
  border-color: rgba(47, 133, 90, 0.85) !important;
  background: #ffffff !important;
  color: #1c5a3c !important;
}

.ox-shell-root .wx-order-view-page .wx-cmd-btn--invoice.btn-secondary:hover,
.ox-shell-root .wx-order-view-page .wx-cmd-btn--invoice.btn-secondary:focus-visible {
  border-color: rgba(33, 110, 73, 0.92) !important;
  background: #f1fbf5 !important;
  color: #16442e !important;
}

.ox-shell-root .wx-order-view-page .wx-cmd-btn--storno.wx-btn-danger,
.ox-shell-root .wx-order-view-page .wx-cmd-btn--storno.wx-btn-danger:hover,
.ox-shell-root .wx-order-view-page .wx-cmd-btn--storno.wx-btn-danger:focus-visible {
  border-color: rgba(198, 70, 70, 0.88) !important;
  background: #ffffff !important;
  color: #8e1f1f !important;
  box-shadow: none !important;
}

.ox-shell-root .wx-order-view-page .wx-cmd-btn--storno.wx-btn-danger:hover,
.ox-shell-root .wx-order-view-page .wx-cmd-btn--storno.wx-btn-danger:focus-visible {
  border-color: rgba(170, 49, 49, 0.92) !important;
  background: #fff1f1 !important;
  color: #701919 !important;
}

@media (max-width: 820px) {
  .ox-shell-root .ox-shell-topbar__brand-logo {
    width: 122px !important;
  }

  .ox-shell-root .ox-sidebar__brand-logo {
    width: min(100%, 148px) !important;
  }

  .ox-shell-root .main {
    padding-inline: 8px !important;
  }

  .ox-shell-root .wx-list-center {
    padding-inline: 0 !important;
  }
}

@media (max-width: 480px) {
  .ox-shell-root .ox-shell-topbar__brand {
    min-height: 38px !important;
    padding-inline: 0 !important;
  }

  .ox-shell-root .ox-shell-topbar__brand-logo {
    width: 108px !important;
  }

  .ox-shell-root .ox-sidebar__brand {
    min-height: 58px !important;
  }

  .ox-shell-root .ox-sidebar__brand-logo {
    width: min(100%, 132px) !important;
  }

  .ox-shell-root .ox-mobile-drawer__brand-logo {
    width: 104px !important;
  }
}

/* 2026-03-25 webshop usability + non-technical operator pass
   Focus: fewer simultaneous actions, clearer filters, stronger button contrast, simpler edit flow. */
body.ox-nav--webshop_admin {
  --wx-ux-surface: #f6f9fe;
  --wx-ux-border: rgba(167, 186, 214, 0.34);
  --wx-ux-text: #11283d;
}

body.ox-nav--webshop_admin :is(.btn-secondary, .btn-outline, .btn-ghost, .btn-subtle):not([disabled]):not(:disabled) {
  color: #16324d !important;
  border-color: rgba(144, 169, 201, 0.42) !important;
  background: #f7f8fa !important;
}

body.ox-nav--webshop_admin :is(.btn-secondary, .btn-outline, .btn-ghost, .btn-subtle):hover,
body.ox-nav--webshop_admin :is(.btn-secondary, .btn-outline, .btn-ghost, .btn-subtle):focus-visible {
  color: #0f2740 !important;
  background: #e4edf9 !important;
  border-color: rgba(127, 156, 196, 0.56) !important;
}

body.ox-nav--webshop_admin .btn[disabled],
body.ox-nav--webshop_admin .btn:disabled {
  color: #6b7d93 !important;
  background: #edf2f9 !important;
  border-color: rgba(143, 163, 191, 0.4) !important;
  opacity: 1 !important;
}

body.ox-nav--webshop_admin :is(.wx-products-command-actions--split, .wx-filter-actions, .wx-orders-search-actions) {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body.ox-nav--webshop_admin .wx-products-command-actions__primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body.ox-nav--webshop_admin .wx-inline-more {
  position: relative;
  margin: 0;
}

body.ox-nav--webshop_admin .wx-inline-more > summary {
  list-style: none;
}

body.ox-nav--webshop_admin .wx-inline-more > summary::-webkit-details-marker {
  display: none;
}

body.ox-nav--webshop_admin .wx-inline-more__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 210px;
  padding: 8px;
  border: 1px solid var(--wx-ux-border);
  border-radius: 12px;
  background: #f8fbff;
  box-shadow: var(--ox-shadow-soft);
  z-index: 30;
  display: grid;
  gap: 4px;
}

body.ox-nav--webshop_admin .wx-inline-more__item {
  display: block;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--wx-ux-text);
  text-decoration: none;
  font-weight: 600;
}

body.ox-nav--webshop_admin .wx-inline-more__item:hover,
body.ox-nav--webshop_admin .wx-inline-more__item:focus-visible {
  background: #eaf2fe;
  color: #0f2740;
}

body.ox-nav--webshop_admin .wx-products-search-form .wx-filter-grid,
body.ox-nav--webshop_admin .wx-orders-search-form .wx-filter-grid,
body.ox-nav--webshop_admin .wx-categories-search-form .wx-filter-grid,
body.ox-nav--webshop_admin .wx-workspace-toolbar__grid--customers {
  align-items: end;
}

body.ox-nav--webshop_admin .wx-orders-page .wx-orders-header__summary .badge,
body.ox-nav--webshop_admin .wx-products-page .wx-suite-commandbar__meta {
  font-weight: 600;
}

body.ox-nav--webshop_admin .wx-orders-page .wx-suite-commandbar .sub {
  display: block !important;
  color: #586d86;
}

body.ox-nav--webshop_admin :is(.wx-orders-table tbody tr, .wx-customers-table tbody tr) td {
  vertical-align: top;
}

body.ox-nav--webshop_admin .wx-products-page .wx-products-table tbody td {
  vertical-align: middle;
}

body.ox-nav--webshop_admin .wx-products-page .wx-products-table tbody td.wx-col-product {
  vertical-align: top;
}

body.ox-nav--webshop_admin .wx-products-page .wx-product-thumb {
  width: 46px;
  min-width: 46px;
  height: 46px;
}

body.ox-nav--webshop_admin .wx-products-page .wx-product-cell {
  gap: 10px;
}

body.ox-nav--webshop_admin .wx-products-page .wx-product-name {
  line-height: 1.26;
}

body.ox-nav--webshop_admin .wx-products-page .wx-product-price-display__hint {
  font-size: 13px;
}

body.ox-nav--webshop_admin .wx-product-edit-page-v2 .wx-pe-layout {
  gap: 12px !important;
}

body.ox-nav--webshop_admin .wx-product-edit-page-v2 .wx-pe-actions-card {
  position: static;
  border-color: rgba(214, 225, 238, 0.92) !important;
  background: rgba(252, 253, 255, 0.96) !important;
}

body.ox-nav--webshop_admin .wx-product-edit-page-v2 .wx-pe-actions {
  gap: 8px;
}

body.ox-nav--webshop_admin .wx-product-edit-page-v2 .wx-pe-actions .btn-primary {
  min-width: 0;
}

body.ox-nav--webshop_admin .wx-orders-page .wx-orders-status-strip__row {
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

body.ox-nav--webshop_admin .wx-orders-page .wx-orders-status-btn {
  white-space: nowrap;
}

@media (max-width: 980px) {
  body.ox-nav--webshop_admin .wx-inline-more {
    width: 100%;
  }

  body.ox-nav--webshop_admin .wx-inline-more > summary {
    width: 100%;
  }

  body.ox-nav--webshop_admin .wx-inline-more__menu {
    position: static;
    min-width: 0;
    width: 100%;
    margin-top: 8px;
  }
}

@media (max-width: 760px) {
  body.ox-nav--webshop_admin :is(.wx-filter-actions, .wx-orders-search-actions, .wx-workspace-toolbar__actions) {
    width: 100%;
  }

  body.ox-nav--webshop_admin :is(.wx-filter-actions, .wx-orders-search-actions, .wx-workspace-toolbar__actions) .btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  body.ox-nav--webshop_admin .wx-products-page .wx-product-thumb {
    width: 42px;
    min-width: 42px;
    height: 42px;
  }

  body.ox-nav--webshop_admin .wx-product-edit-page-v2 .wx-pe-actions .btn-primary {
    width: 100%;
  }
}

/* 2026-03-25 Topbar + main content hierarchy polish (Settings / Access center)
   Goal: denser commandbar, stronger card hierarchy, reduced empty air, clearer CTA rhythm. */
body.ox-nav--settings .ox-shell-topbar {
  min-height: 64px;
  padding-top: calc(6px + env(safe-area-inset-top));
  padding-bottom: 6px;
  box-shadow: inset 0 -1px 0 rgba(205, 215, 228, 0.62);
}

body.ox-nav--settings .ox-shell-topbar__right {
  gap: 12px;
}

body.ox-nav--settings .ox-shell-topbar__icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  border-color: rgba(207, 218, 233, 0.92) !important;
  background: #f6f9ff !important;
  box-shadow: 0 8px 16px rgba(151, 168, 192, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

body.ox-nav--settings .ox-shell-topbar__icon-btn:hover,
body.ox-nav--settings .ox-shell-topbar__icon-btn:focus-visible {
  border-color: rgba(192, 206, 224, 0.98) !important;
  background: #ffffff !important;
  box-shadow: 0 10px 20px rgba(151, 168, 192, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

body.ox-nav--settings :is(.ox-shell-topbar__context, .ox-shell-topbar__tenant, .ox-shell-topbar__switcher, .ox-shell-topbar__profile-toggle) {
  min-height: 40px;
  border-color: rgba(206, 216, 229, 0.94) !important;
  background: #f6f9ff !important;
}

body.ox-nav--settings .ox-shell-topbar__switcher-select {
  min-height: 32px;
  min-width: 136px;
  font-size: 0.81rem;
}

body.ox-nav--settings .ox-shell-topbar__switcher-btn {
  min-height: 32px;
  color: #a26016 !important;
  border-color: rgba(223, 176, 112, 0.56) !important;
  background: rgba(255, 239, 219, 0.9) !important;
}

body.ox-nav--settings .ox-shell-topbar__avatar {
  width: 25px;
  height: 25px;
  font-size: 0.75rem;
}

.settings-access-page .wx-list-center {
  gap: 12px;
}

.settings-access-page .wx-settings-inner {
  gap: 12px;
}

.settings-access-page .wx-suite-commandbar {
  border-radius: 22px !important;
  padding: 16px 18px 12px !important;
  gap: 8px;
  border-color: rgba(206, 216, 229, 0.92) !important;
  box-shadow: 0 10px 24px rgba(150, 166, 189, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

.settings-access-page .wx-suite-commandbar__row {
  gap: 12px;
  align-items: center;
}

.settings-access-page .wx-suite-commandbar__left {
  gap: 2px;
}

.settings-access-page .wx-suite-commandbar .kicker {
  letter-spacing: 0.1em;
  color: #65778d;
}

.settings-access-page .wx-suite-commandbar .h1 {
  font-size: clamp(1.34rem, 1.06rem + 0.72vw, 1.82rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.settings-access-page .wx-suite-commandbar__meta {
  font-size: 0.81rem;
  line-height: 1.45;
  color: #607288;
}

.settings-access-page .ox-page-actions {
  border-radius: 16px;
  padding: 10px 12px;
  border-color: rgba(206, 217, 232, 0.9) !important;
  background: #f3f7fd !important;
  box-shadow: 0 8px 18px rgba(155, 171, 194, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.settings-access-page .ox-page-actions__inner {
  align-items: center;
  gap: 10px;
}

.settings-access-page .wx-products-command-actions--settings-subnav.is-inline {
  width: 100%;
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: column;
  gap: 10px;
}

.settings-access-page .settings-access-topline {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.settings-access-page .settings-access-topline__right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.settings-access-page .wx-suite-commandbar .wx-topbar-crumb {
  gap: 6px;
  padding: 6px 10px !important;
  border-radius: 999px;
  border: 1px solid rgba(206, 217, 233, 0.9) !important;
  background: rgba(248, 251, 255, 0.94) !important;
  box-shadow: 0 4px 10px rgba(164, 179, 199, 0.12) !important;
}

.settings-access-page .wx-suite-commandbar :is(.wx-topbar-crumb__link, .wx-topbar-crumb__current) {
  font-size: 0.75rem;
}

.settings-access-page .settings-access-top-actions {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-access-page .settings-access-top-actions .btn {
  min-height: 36px;
  padding-inline: 12px;
  font-size: 0.81rem;
}

.settings-access-page .settings-panel {
  padding: 12px 14px !important;
  border-radius: 18px !important;
  border-color: rgba(208, 218, 232, 0.9) !important;
}

.settings-access-page .settings-panel__head {
  margin-bottom: 6px;
  gap: 6px;
}

.settings-access-page .settings-panel__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a2f45;
}

.settings-access-page .settings-panel__desc {
  font-size: 0.79rem;
  color: #61758d;
}

.settings-access-page .settings-access-summary {
  display: grid;
  gap: 10px;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  border-color: rgba(206, 217, 232, 0.92) !important;
  background: linear-gradient(180deg, rgba(249, 252, 255, 0.97), rgba(242, 248, 255, 0.93)) !important;
}

.settings-access-page .settings-access-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-access-page .settings-access-summary__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 750;
  color: #182f48;
}

.settings-access-page .settings-access-summary__desc {
  margin: 0;
  font-size: 0.79rem;
  color: #607388;
}

.settings-access-page .settings-access-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.settings-access-page .settings-access-stats__item {
  min-height: 76px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(209, 220, 234, 0.92);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.settings-access-page .settings-access-stats__label {
  font-size: 13px;
  font-weight: 670;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6a7e95;
}

.settings-access-page .settings-access-stats__value {
  font-size: clamp(1.04rem, 0.92rem + 0.34vw, 1.3rem);
  font-weight: 760;
  color: #14273b;
  line-height: 1.1;
}

.settings-access-page .settings-access-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.settings-access-page .settings-access-card {
  padding: 14px 16px !important;
  border-radius: 18px !important;
  border-color: rgba(210, 220, 233, 0.9) !important;
  display: grid;
  gap: 10px;
}

.settings-access-page .settings-access-workflow .settings-access-card {
  border-color: rgba(227, 186, 134, 0.62) !important;
  background: linear-gradient(180deg, rgba(255, 248, 238, 0.96), rgba(252, 243, 229, 0.92)) !important;
}

.settings-access-page .settings-access-card__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(217, 141, 56, 0.44);
  background: rgba(255, 233, 205, 0.9);
  color: #975510;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.settings-access-page .settings-access-card__title {
  margin: 0;
  font-size: 1.03rem;
  font-weight: 760;
  color: #162b41;
}

.settings-access-page .settings-access-card__desc {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #5c7189;
  max-width: 72ch;
}

.settings-access-page .settings-access-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-access-page .settings-access-badge {
  border-color: rgba(205, 215, 231, 0.88) !important;
  color: #425973 !important;
}

.settings-access-page .settings-access-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.settings-access-page .settings-access-card__company-form {
  width: min(620px, 100%);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.settings-access-page .settings-access-card__company-form .input {
  min-height: 38px;
}

.settings-access-page .settings-access-card__company-form .btn {
  min-height: 38px;
}

@media (max-width: 980px) {
  .settings-access-page .settings-access-card__company-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body.ox-nav--settings .ox-shell-topbar__icon-btn {
    width: 38px;
    height: 38px;
  }

  body.ox-nav--settings :is(.ox-shell-topbar__context, .ox-shell-topbar__switcher, .ox-shell-topbar__profile-toggle) {
    min-height: 38px;
  }

  .settings-access-page .wx-suite-commandbar {
    padding: 14px 14px 11px !important;
    border-radius: 18px !important;
  }

  .settings-access-page .settings-access-summary,
  .settings-access-page .settings-access-card {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .settings-access-page .settings-access-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 2026-03-26 global typography harmonization (ingatlan.com baseline) */
body,
body.ox-shell-canonical,
body.auth-page {
  font-family: var(--ox-font-sans);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--ox-text-0);
  letter-spacing: normal;
}

h1 {
  font-family: var(--ox-font-display);
  font-size: var(--ox-type-title-1-size);
  line-height: var(--ox-type-title-1-line);
  font-weight: var(--ox-type-title-1-weight);
}

h2 {
  font-family: var(--ox-font-display);
  font-size: var(--ox-type-title-2-size);
  line-height: var(--ox-type-title-2-line);
  font-weight: var(--ox-type-title-2-weight);
}

h3,
h4 {
  font-family: var(--ox-font-sans);
  font-size: var(--ox-type-title-3-size);
  line-height: var(--ox-type-title-3-line);
  font-weight: var(--ox-type-title-3-weight);
}

h5,
h6 {
  font-family: var(--ox-font-sans);
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 700;
}

.ox-shell-root :is(.h1, .wx-dashboard-shell__title, .wx-workspace-heading__title, .wx-orders-header__title-wrap .h1, .wx-order-head__title, .settings-access-page .settings-access-summary__title) {
  font-family: var(--ox-font-display);
  font-size: var(--ox-type-title-1-size);
  line-height: var(--ox-type-title-1-line);
  font-weight: var(--ox-type-title-1-weight);
  letter-spacing: normal;
}

.ox-shell-root :is(.h2, .wx-panel-title, .wx-workspace-surface__title, .wx-suite-commandbar .h1, .wx-email-edit-title, .wx-settings-mode-hero__title) {
  font-family: var(--ox-font-display);
  font-size: var(--ox-type-title-2-size);
  line-height: var(--ox-type-title-2-line);
  font-weight: var(--ox-type-title-2-weight);
  letter-spacing: normal;
}

.ox-shell-root :is(.h3, .wx-card-title, .wx-control-task__title, .wx-module-row__title, .wx-module-category__title, .wx-chat-main__title, .wx-chat-toolbar__title, .settings-access-page .settings-access-card__title) {
  font-size: var(--ox-type-title-3-size);
  line-height: var(--ox-type-title-3-line);
  font-weight: var(--ox-type-title-3-weight);
  letter-spacing: normal;
}

.ox-shell-root :is(.kicker, .wx-kpi-label, .wx-kpi-strip__label, .wx-orders-kpi-mini__label, .wx-orders-commandbar__stat-label, .wx-status-chart__label, .settings-access-page .settings-access-stats__label, .settings-access-page .settings-access-card__step, .ox-shell-topbar__kicker) {
  font-size: var(--ox-type-kicker-size);
  line-height: var(--ox-type-kicker-line);
  font-weight: var(--ox-type-kicker-weight);
  letter-spacing: var(--ox-type-kicker-track);
  text-transform: uppercase;
}

.ox-shell-root :is(.sub, .muted, .wx-dashboard-shell__subtitle, .wx-kpi-meta, .wx-kpi-strip__hint, .wx-orders-header__summary, .settings-access-page .settings-access-card__desc, .settings-access-page .settings-access-summary__desc) {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
}

.ox-shell-root :is(.wx-kpi-num, .wx-kpi-strip__value, .wx-control-stat__value, .wx-revenue-row__value, .wx-orders-kpi-mini__value, .wx-orders-commandbar__stat-value, .wx-workspace-summary__value, .wx-email-metric-card__value, .settings-hub-head-metric__value, .settings-access-page .settings-access-stats__value, .settings-access-page .settings-access-summary__value, .wx-order-kpi > strong, .wx-order-items-total > strong, .calendar-kpi-card__value, .calendar-mini-kpi strong) {
  font-family: var(--ox-font-display);
  font-size: var(--ox-type-stat-size);
  line-height: var(--ox-type-stat-line);
  font-weight: var(--ox-type-stat-weight);
  letter-spacing: normal;
}

.ox-shell-root :is(label, .label, .wx-label, .wx-workspace-summary__label, .wx-email-metric-card__label, .wx-email-metric-card__hint, .wx-control-stat__hint, .wx-workspace-heading__meta, .settings-access-page .settings-access-card__meta) {
  font-size: var(--ox-type-label-size);
  line-height: var(--ox-type-label-line);
  font-weight: var(--ox-type-label-weight);
}

.ox-shell-root :is(.input, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="url"]) {
  font-size: var(--ox-type-input-size);
  line-height: var(--ox-type-input-line);
  font-weight: var(--ox-type-input-weight);
}

.ox-shell-root :is(.btn, .btn-sm, .btn-auth, .btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .btn-subtle, .wx-status-save, .wx-filter-submit, .wx-inline-action) {
  font-size: var(--ox-type-button-size);
  line-height: var(--ox-type-button-line);
  font-weight: var(--ox-type-button-weight);
  letter-spacing: normal;
}

.ox-shell-root :is(.btn-sm) {
  font-size: 0.875rem;
}

.ox-shell-root :is(.table th, .wx-workspace-table th, .wx-orders-table thead th, .wx-order-items-table thead th, .calendar-table th) {
  font-size: var(--ox-type-table-head-size);
  line-height: var(--ox-type-table-head-line);
  font-weight: var(--ox-type-table-head-weight);
  letter-spacing: var(--ox-type-table-head-track);
}

.ox-shell-root :is(.table td, .wx-workspace-table td, .wx-orders-table tbody td, .wx-order-items-table tbody td, .calendar-table td) {
  font-size: var(--ox-type-table-size);
  line-height: var(--ox-type-table-line);
  font-weight: var(--ox-type-table-weight);
}

.ox-shell-root :is(.badge, .wx-status-chip, .wx-invoice-badge, .wx-source-badge, .wx-row-actions__badge, .ox-item-badge, .wx-chat-main__badge) {
  font-size: var(--ox-type-label-size);
  line-height: var(--ox-type-label-line);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ox-shell-root :is(.ox-shell-topbar__switcher-select, .ox-shell-topbar__switcher-btn, .ox-shell-topbar__tenant, .ox-shell-topbar__context-helper, .ox-shell-topbar__profile-link, .ox-shell-topbar__logout-btn) {
  font-size: 0.9375rem;
  line-height: 1.4;
}

.ox-shell-root #oxSidebar :is(.ox-item, .ox-sidebar-action-btn, .ox-sidebar-settings__toggle, .ox-sidebar-settings__link, .ox-nav-group__toggle) {
  font-family: var(--ox-font-nav);
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 500;
}

.ox-shell-root #oxSidebar :is(.ox-sidebar-enterprise-head__title, .ox-nav-group__title, .ox-sidebar-settings__section-title) {
  font-size: var(--ox-type-kicker-size);
  line-height: var(--ox-type-kicker-line);
  font-weight: var(--ox-type-kicker-weight);
  letter-spacing: var(--ox-type-kicker-track);
}

/* Chat: remove extra card/box framing on left directory panel */
.ox-shell-root .main .wx-chat-shell .wx-chat-sidebar {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.ox-shell-root .main .wx-chat-shell .wx-chat-user-list {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2026-04-10 startingdoksi login visual clone (background + login box only) */
body.auth-page.auth-page--login {
  background: #111826 url("/crm/assets/img/auth/login-bg-starting.jpg") center center / cover no-repeat fixed !important;
}

body.auth-page.auth-page--login .auth-bg-canvas-wrap {
  display: none !important;
}

body.auth-page.auth-page--login .auth-wrap {
  width: min(100%, 430px);
  min-height: var(--auth-vh, 100dvh);
  align-content: center;
}

body.auth-page.auth-page--login .auth-card {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.56);
  box-shadow:
    0 5px 10px rgba(0, 0, 0, 0.3),
    0 20px 40px rgba(0, 0, 0, 0.25),
    0 30px 60px rgba(0, 0, 0, 0.2);
  padding: clamp(22px, 2.4vw, 30px);
}

body.auth-page.auth-page--login .auth-card::before {
  display: none;
}

body.auth-page.auth-page--login .auth-brand-hero {
  gap: 8px;
  min-height: 0;
}

body.auth-page.auth-page--login .auth-brand-logo {
  width: 170px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

body.auth-page.auth-page--login .brand-title,
body.auth-page.auth-page--login .auth-sub,
body.auth-page.auth-page--login .label,
body.auth-page.auth-page--login .divider {
  color: #ffffff;
}

body.auth-page.auth-page--login .brand-title {
  font-size: clamp(1.52rem, 2.05vw, 1.95rem);
  line-height: 1.16;
  font-weight: 400 !important;
  letter-spacing: 0;
}

body.auth-page.auth-page--login .label,
body.auth-page.auth-page--login .divider,
body.auth-page.auth-page--login [data-auth-submit],
body.auth-page.auth-page--login .btn-google,
body.auth-page.auth-page--login .auth-card .input,
body.auth-page.auth-page--login .auth-card select.input,
body.auth-page.auth-page--login .auth-card textarea.input {
  font-weight: 400 !important;
}

body.auth-page.auth-page--login .auth-sub {
  display: none !important;
  opacity: 0.9;
  font-size: 0.9rem;
}

body.auth-page.auth-page--login .form {
  gap: 12px;
}

body.auth-page.auth-page--login .form > div,
body.auth-page.auth-page--login [data-auth-submit],
body.auth-page.auth-page--login .divider,
body.auth-page.auth-page--login .btn-google,
body.auth-page.auth-page--login .auth-alt-providers,
body.auth-page.auth-page--login .auth-provider-note {
  width: min(100%, 322px);
  box-sizing: border-box;
  max-width: min(100%, 322px);
  margin-left: auto;
  margin-right: auto;
}

body.auth-page.auth-page--login .auth-card .input,
body.auth-page.auth-page--login .auth-card select.input,
body.auth-page.auth-page--login .auth-card textarea.input {
  min-height: 44px;
  width: 100%;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.96);
  color: #111827;
}

body.auth-page.auth-page--login .auth-card .input::placeholder,
body.auth-page.auth-page--login .auth-card select.input::placeholder,
body.auth-page.auth-page--login .auth-card textarea.input::placeholder {
  color: #6b7280;
  opacity: 1;
}

body.auth-page.auth-page--login .label {
  display: none !important;
}

body.auth-page.auth-page--login .auth-card .input:focus,
body.auth-page.auth-page--login .auth-card select.input:focus,
body.auth-page.auth-page--login .auth-card textarea.input:focus {
  border-color: #e64f12;
  box-shadow: 0 0 0 0.2rem rgba(230, 79, 18, 0.25);
  transform: none;
}

body.auth-page.auth-page--login [data-auth-submit] {
  width: 100%;
  min-height: 44px;
  border-radius: 6px;
  box-sizing: border-box;
  box-shadow: none;
}

body.auth-page.auth-page--login [data-auth-submit].btn-primary {
  background: #e64f12;
  border-color: #e64f12;
  color: #ffffff;
}

body.auth-page.auth-page--login [data-auth-submit].btn-primary:hover {
  background: #e64f12;
  border-color: #e64f12;
  transform: none;
  box-shadow: none;
  filter: none;
}

body.auth-page.auth-page--login [data-auth-submit].btn-primary:focus,
body.auth-page.auth-page--login [data-auth-submit].btn-primary:active {
  background: #b53f0b;
  border-color: #b53f0b;
  box-shadow: none;
}

body.auth-page.auth-page--login .btn-google {
  width: 100%;
  min-height: 44px;
  border-radius: 6px;
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
  color: #1f2937;
  box-shadow: none;
}

body.auth-page.auth-page--login .auth-alt-providers {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  grid-template-columns: minmax(0, 1fr);
}

body.auth-page.auth-page--login .auth-provider-btn {
  width: 100%;
  max-width: 100% !important;
  min-height: 44px;
  border-radius: 6px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 12px;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
}

body.auth-page.auth-page--login .auth-alt-providers > .auth-provider-btn {
  width: 100% !important;
  margin: 0 !important;
}

body.auth-page.auth-page--login .btn-social-unavailable {
  color: #ffffff;
}

body.auth-page.auth-page--login .btn-social-unavailable:hover {
  color: #ffffff;
}

body.auth-page.auth-page--login .btn-ico-svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: currentColor;
  flex: 0 0 17px;
  opacity: 1;
}

body.auth-page.auth-page--login .auth-provider-btn--facebook {
  background: #1877f2;
  border-color: #1877f2;
  color: #ffffff;
  box-shadow: none;
}

body.auth-page.auth-page--login .auth-provider-btn--facebook:hover {
  background: #1877f2;
  border-color: #1877f2;
  transform: none;
  box-shadow: none;
  filter: none;
}

body.auth-page.auth-page--login .auth-provider-btn--apple {
  background: linear-gradient(180deg, #f8f9fb 0%, #eceff3 52%, #dfe4ea 100%);
  border-color: #c9d0d9;
  color: #18202a;
  box-shadow: none;
}

body.auth-page.auth-page--login .auth-provider-btn--apple:hover {
  background: linear-gradient(180deg, #f8f9fb 0%, #eceff3 52%, #dfe4ea 100%);
  border-color: #c9d0d9;
  color: #18202a;
  transform: none;
  box-shadow: none;
  filter: none;
}

body.auth-page.auth-page--login .auth-provider-note {
  margin-top: 8px;
  font-size: 0.79rem;
  line-height: 1.45;
  color: #e9edf4;
  text-align: center;
}

body.auth-page.auth-page--login .divider {
  display: block;
  margin: 8px auto;
  line-height: 1;
  opacity: 0.9;
}

body.auth-page.auth-page--login :is([data-auth-submit], .btn-google, .auth-provider-btn):hover,
body.auth-page.auth-page--login :is([data-auth-submit], .btn-google, .auth-provider-btn):focus-visible {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  opacity: 0.98;
}

@media (max-width: 768px) {
  body.auth-page.auth-page--login {
    padding: calc(14px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));
    background-attachment: scroll;
  }

  body.auth-page.auth-page--login .auth-wrap {
    width: min(100%, 430px);
    min-height: var(--auth-vh, 100dvh);
    align-content: center;
  }

  body.auth-page.auth-page--login .auth-card {
    min-height: auto;
    border-radius: 10px;
    box-shadow:
      0 5px 10px rgba(0, 0, 0, 0.3),
      0 20px 40px rgba(0, 0, 0, 0.25),
      0 30px 60px rgba(0, 0, 0, 0.2);
    padding: 18px 12px;
  }

  body.auth-page.auth-page--login .form > div,
  body.auth-page.auth-page--login [data-auth-submit],
  body.auth-page.auth-page--login .divider,
  body.auth-page.auth-page--login .btn-google,
  body.auth-page.auth-page--login .auth-alt-providers,
  body.auth-page.auth-page--login .auth-provider-note {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  body.auth-page.auth-page--login .auth-brand-logo {
    width: 160px;
  }

  body.auth-page.auth-page--login .auth-card .input,
  body.auth-page.auth-page--login .auth-card select.input,
  body.auth-page.auth-page--login .auth-card textarea.input,
  body.auth-page.auth-page--login .btn-google {
    min-height: 42px;
  }
}

/* 2026-04-26 Elhagyott kosár admin workbench */
.webshop-dashboard .wx-dashboard-recovery__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.webshop-dashboard .wx-dashboard-recovery__value {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1;
  font-weight: 900;
  color: #0f172a;
}

.webshop-dashboard .wx-dashboard-recovery__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.wx-abandoned-workbench .wx-workspace-heading {
  margin-bottom: 14px;
}

.wx-abandoned-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.wx-abandoned-toolbar-surface {
  margin-top: 16px;
  overflow: visible;
}

.wx-abandoned-toolbar-surface .wx-workspace-surface__head {
  align-items: flex-start;
}

.wx-abandoned-health,
.wx-abandoned-card__meta,
.wx-abandoned-card__contact,
.wx-abandoned-actionbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.wx-abandoned-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 14px;
}

.wx-abandoned-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(148, 163, 184, .34);
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-weight: 800;
  text-decoration: none;
}

.wx-abandoned-tab span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #0f172a;
  font-size: 12px;
}

.wx-abandoned-tab.is-active {
  border-color: rgba(37, 99, 235, .38);
  background: #eff6ff;
  color: #1d4ed8;
}

.wx-abandoned-tab.is-active span {
  background: #dbeafe;
  color: #1d4ed8;
}

.wx-abandoned-filter-grid {
  grid-template-columns: minmax(260px, 1.7fr) minmax(160px, .65fr) minmax(140px, .55fr) auto;
}

.wx-abandoned-actionbar {
  position: sticky;
  top: 8px;
  z-index: 5;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .10);
  backdrop-filter: blur(10px);
}

.wx-abandoned-checkall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 850;
  color: #0f172a;
}

.wx-abandoned-actionbar__meta {
  color: #64748b;
  margin-right: auto;
}

.wx-abandoned-card-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.wx-abandoned-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: stretch;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 18px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .06);
}

.wx-abandoned-card.is-sendable {
  border-color: rgba(34, 197, 94, .28);
}

.wx-abandoned-card.is-missing-email {
  background: #fffaf0;
  border-color: rgba(245, 158, 11, .24);
}

.wx-abandoned-card__select {
  padding-top: 5px;
}

.wx-abandoned-card__select input,
.wx-abandoned-checkall input {
  width: 18px;
  height: 18px;
}

.wx-abandoned-card__main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.wx-abandoned-card__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.wx-abandoned-card__title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
}

.wx-abandoned-card__contact {
  margin-top: 4px;
  font-size: 13px;
}

.wx-abandoned-card__contact a {
  font-weight: 750;
}

.wx-abandoned-card__amount {
  display: grid;
  justify-items: end;
  gap: 2px;
  white-space: nowrap;
}

.wx-abandoned-card__amount strong {
  font-size: 18px;
  color: #0f172a;
}

.wx-abandoned-card__amount span {
  font-size: 12px;
  color: #64748b;
}

.wx-abandoned-card__items {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wx-abandoned-card__items li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
}

.wx-abandoned-card__items li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wx-abandoned-card__items-empty {
  padding: 8px 10px;
  border-radius: 12px;
  background: #f8fafc;
}

.wx-abandoned-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  justify-content: center;
  min-width: 150px;
}

.wx-abandoned-card__actions .btn {
  width: 100%;
  justify-content: center;
}

.wx-abandoned-empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 36px 18px;
  border: 1px dashed rgba(148, 163, 184, .45);
  border-radius: 18px;
  background: #fff;
  text-align: center;
}

.wx-abandoned-empty-state h3 {
  margin: 0;
  color: #0f172a;
}

.wx-abandoned-empty-state p {
  margin: 0;
  color: #64748b;
}

@media (max-width: 980px) {
  .wx-abandoned-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wx-abandoned-filter-grid {
    grid-template-columns: 1fr;
  }

  .wx-abandoned-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .wx-abandoned-card__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }

  .wx-abandoned-card__actions .btn,
  .wx-abandoned-card__actions form {
    flex: 1 1 180px;
  }
}

@media (max-width: 640px) {
  .webshop-dashboard .wx-dashboard-recovery__body {
    grid-template-columns: 1fr;
  }

  .webshop-dashboard .wx-dashboard-recovery__body .btn {
    width: 100%;
  }

  .wx-abandoned-summary {
    grid-template-columns: 1fr;
  }

  .wx-abandoned-tabs {
    padding: 0 12px 12px;
  }

  .wx-abandoned-tab {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .wx-abandoned-actionbar {
    position: static;
    align-items: stretch;
  }

  .wx-abandoned-actionbar > * {
    width: 100%;
  }

  .wx-abandoned-actionbar .btn,
  .wx-abandoned-actionbar form {
    width: 100%;
  }

  .wx-abandoned-card {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .wx-abandoned-card__select {
    padding-top: 0;
  }

  .wx-abandoned-card__head {
    grid-template-columns: 1fr;
  }

  .wx-abandoned-card__amount {
    justify-items: start;
  }

  .wx-abandoned-card__items li span {
    white-space: normal;
  }

  .wx-abandoned-card__actions {
    flex-direction: column;
  }
}