/*
 * Formal v6 visual authority.
 * Loaded last to give the existing multi-module application one consistent,
 * restrained visual language without changing business behavior.
 */

body.premium-ui {
  --formal-sidebar: 232px;
  --formal-header: 76px;
  --formal-page: #f4f2ef;
  --formal-surface: #fff;
  --formal-surface-soft: #f8f6f3;
  --formal-surface-muted: #efede9;
  --formal-ink: #1c1b1f;
  --formal-text: #454248;
  --formal-muted: #7a747c;
  --formal-faint: #9b959d;
  --formal-border: #e4dfd9;
  --formal-border-strong: #d5cec6;
  --formal-sidebar-bg: #1d1d21;
  --formal-sidebar-raised: #29282e;
  --formal-accent: #8b6b45;
  --formal-accent-dark: #725536;
  --formal-accent-soft: #f4eee6;
  --formal-success: #29705a;
  --formal-success-soft: #edf7f2;
  --formal-warning: #93601e;
  --formal-warning-soft: #fbf4e7;
  --formal-danger: #a6424e;
  --formal-danger-soft: #fcf0f1;
  --formal-info: #4a6388;
  --formal-info-soft: #eef2f7;
  --formal-font: "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --formal-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --formal-shadow: 0 1px 2px rgba(38, 32, 28, .025), 0 7px 24px rgba(38, 32, 28, .045);
  --formal-shadow-float: 0 24px 70px rgba(28, 25, 24, .2);

  min-width: 0 !important;
  color: var(--formal-text) !important;
  background: var(--formal-page) !important;
  font-family: var(--formal-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  --wx-page: var(--formal-page);
  --wx-surface: var(--formal-surface);
  --wx-surface-subtle: var(--formal-surface-soft);
  --wx-surface-muted: var(--formal-surface-muted);
  --wx-ink: var(--formal-ink);
  --wx-text: var(--formal-text);
  --wx-text-muted: var(--formal-muted);
  --wx-text-faint: var(--formal-faint);
  --wx-border: var(--formal-border);
  --wx-border-strong: var(--formal-border-strong);
  --wx-primary: var(--formal-accent);
  --wx-primary-hover: var(--formal-accent-dark);
  --wx-primary-active: #60472e;
  --wx-primary-soft: var(--formal-accent-soft);
  --wx-primary-border: #d9c7b2;
  --wx-brand-950: var(--formal-sidebar-bg);
  --wx-brand-900: #242329;
  --wx-brand-800: #302f36;
  --wx-info: var(--formal-info);
  --wx-info-soft: var(--formal-info-soft);
  --wx-info-border: #d2dae5;
  --wx-success: var(--formal-success);
  --wx-success-soft: var(--formal-success-soft);
  --wx-success-border: #c9e2d7;
  --wx-warning: var(--formal-warning);
  --wx-warning-soft: var(--formal-warning-soft);
  --wx-warning-border: #ead7b8;
  --wx-danger: var(--formal-danger);
  --wx-danger-soft: var(--formal-danger-soft);
  --wx-danger-border: #ebcbd0;
  --wx-shadow-card: var(--formal-shadow);
  --wx-shadow-float: var(--formal-shadow-float);
  --wx-focus: 0 0 0 3px rgba(139, 107, 69, .16);
  --ui-sidebar-width: var(--formal-sidebar);
  --ui-header-height: var(--formal-header);
  --ui-page-padding: 28px;
}

body.premium-ui :where(button, input, select, textarea, table) {
  font-family: var(--formal-font) !important;
}

body.premium-ui :where(code, pre, kbd) {
  font-family: var(--formal-mono) !important;
}

/* Application shell */
body.premium-ui > aside {
  width: var(--formal-sidebar) !important;
  padding: 0 !important;
  border: 0 !important;
  background: var(--formal-sidebar-bg) !important;
  box-shadow: none !important;
}

body.premium-ui > main {
  width: calc(100% - var(--formal-sidebar)) !important;
  margin-left: var(--formal-sidebar) !important;
  background: var(--formal-page) !important;
}

body.premium-ui .brand {
  height: var(--formal-header) !important;
  margin: 0 !important;
  padding: 16px 17px !important;
  gap: 11px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  color: #fff !important;
}

body.premium-ui .brand > span {
  display: grid !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 8px !important;
  background: var(--formal-accent) !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 650 !important;
}

body.premium-ui .brand > div {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #f8f7f5 !important;
  font-size: 14px !important;
  font-weight: 620 !important;
  line-height: 1.35 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

body.premium-ui .brand small {
  display: block !important;
  margin-top: 3px !important;
  overflow: hidden !important;
  color: #908d96 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

body.premium-ui aside nav {
  padding: 12px 10px 88px !important;
  scrollbar-color: #45434b transparent !important;
}

body.premium-ui .nav-section {
  margin: 1px 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.premium-ui .nav-section-title {
  min-height: 36px !important;
  padding: 9px 11px !important;
  border-radius: 7px !important;
  color: #8f8b95 !important;
  font-size: 12px !important;
  font-weight: 530 !important;
  letter-spacing: .01em !important;
}

body.premium-ui .nav-section-title:hover {
  color: #cac7ce !important;
  background: rgba(255, 255, 255, .04) !important;
}

body.premium-ui aside nav button[data-page] {
  min-height: 38px !important;
  margin: 2px 0 !important;
  padding: 8px 11px !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #aaa6b0 !important;
  font-size: 13px !important;
  font-weight: 430 !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

body.premium-ui aside nav button[data-page]:hover {
  color: #f3f1f4 !important;
  background: rgba(255, 255, 255, .055) !important;
}

body.premium-ui aside nav button[data-page].active {
  color: #fff !important;
  background: var(--formal-sidebar-raised) !important;
  box-shadow: inset 2px 0 var(--formal-accent) !important;
  font-weight: 560 !important;
}

body.premium-ui aside .nav-icon {
  width: 16px !important;
  height: 16px !important;
  color: #77737d !important;
  stroke-width: 1.7 !important;
}

body.premium-ui aside nav button.active .nav-icon { color: #c8a77e !important; }

body.premium-ui .account-switcher {
  margin: 10px 12px 8px !important;
  padding: 8px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 8px !important;
  background: #25242a !important;
}

body.premium-ui .account-switcher button {
  border-radius: 6px !important;
  background: transparent !important;
}

body.premium-ui .aside-foot {
  padding: 12px 15px !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  background: var(--formal-sidebar-bg) !important;
  color: #908c95 !important;
  font-size: 11px !important;
}

body.premium-ui .aside-foot i {
  background: #4d9a7d !important;
  box-shadow: 0 0 0 3px rgba(77, 154, 125, .12) !important;
}

body.premium-ui .sidebar-toggle {
  border-color: var(--formal-border) !important;
  background: #fff !important;
  box-shadow: var(--formal-shadow) !important;
  color: var(--formal-muted) !important;
}

/* Header */
body.premium-ui main > header {
  height: var(--formal-header) !important;
  min-height: var(--formal-header) !important;
  padding: 0 30px !important;
  border-bottom: 1px solid var(--formal-border) !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
}

body.premium-ui .header-breadcrumb {
  margin-bottom: 0 !important;
  color: var(--formal-faint) !important;
  font-size: 11px !important;
}

body.premium-ui .header-breadcrumb strong {
  color: var(--formal-muted) !important;
  font-weight: 500 !important;
}

body.premium-ui .page-heading h1,
body.premium-ui #title {
  color: var(--formal-ink) !important;
  font-size: 22px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: -.015em !important;
}

body.premium-ui .page-heading p,
body.premium-ui #subtitle {
  max-width: 760px !important;
  margin-top: 1px !important;
  color: var(--formal-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

body.premium-ui .header-context { gap: 9px !important; }

body.premium-ui .user-context {
  color: var(--formal-muted) !important;
  font-size: 12px !important;
}

body.premium-ui .environment-badge {
  min-height: 26px !important;
  padding: 4px 9px !important;
  border: 1px solid #d6e5dd !important;
  border-radius: 6px !important;
  background: #f2f7f4 !important;
  color: #34715a !important;
  font-size: 11px !important;
  font-weight: 520 !important;
}

body.premium-ui main > #content {
  width: 100% !important;
  max-width: 1680px !important;
  padding: 28px 30px 52px !important;
  background: var(--formal-page) !important;
}

/* Typography and information hierarchy */
body.premium-ui #content :where(h2, h3, h4) {
  color: var(--formal-ink) !important;
  letter-spacing: -.01em !important;
}

body.premium-ui #content h2 { font-size: 18px !important; font-weight: 650 !important; }
body.premium-ui #content h3 { font-size: 15px !important; font-weight: 630 !important; }
body.premium-ui #content h4 { font-size: 14px !important; font-weight: 600 !important; }

body.premium-ui #content :where(.sub, small, .muted, .subtle, .hint, .help-text, .helper-text, .card-subtitle, .data-source) {
  color: var(--formal-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

body.premium-ui #content .card-head .sub {
  display: block !important;
  max-width: min(720px, 58vw) !important;
  margin-top: 2px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

body.premium-ui #content :where(.kicker, .auth-kicker) {
  color: var(--formal-accent) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: .1em !important;
}

/* Shared surfaces */
body.premium-ui #content :where(.card, .panel, .section-card, .metric-card, .stat-card, .summary-card, .workspace-card, .data-card, .premium-card, .chart-card, .stat) {
  border: 1px solid var(--formal-border) !important;
  border-radius: 10px !important;
  background: var(--formal-surface) !important;
  background-image: none !important;
  box-shadow: var(--formal-shadow) !important;
}

body.premium-ui #content :where(.card, .panel, .section-card, .workspace-card, .data-card, .premium-card):hover {
  border-color: var(--formal-border) !important;
  transform: none !important;
}

body.premium-ui #content .card {
  margin-bottom: 18px !important;
  overflow: hidden !important;
}

body.premium-ui #content :where(.card-head, .panel-head, .section-head, .chart-card__head) {
  min-height: 58px !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  gap: 12px !important;
  border-bottom: 1px solid var(--formal-border) !important;
  background: #fff !important;
}

body.premium-ui #content .panel-pad,
body.premium-ui #content > .form { padding: 18px !important; }

body.premium-ui #content .stats {
  gap: 12px !important;
  margin-bottom: 18px !important;
}

body.premium-ui #content .stat {
  min-height: 108px !important;
  padding: 16px 18px !important;
  overflow: hidden !important;
}

body.premium-ui #content .stat::after { display: none !important; }

body.premium-ui #content .stat :where(label, span) {
  color: var(--formal-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

body.premium-ui #content .stat :where(strong, b) {
  margin-top: 8px !important;
  color: var(--formal-ink) !important;
  font-size: clamp(23px, 1.7vw, 28px) !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
}

/* Quiet, compact explanations */
body.premium-ui #content :where(.sales-definition, .quality-rule, .permission-rule, .account-warning, .sample-form-note, .jst-master-note, .size-result-notice, .bcc-action-footnote, [class$="-notice"], [class$="-hint"]) {
  padding: 10px 12px !important;
  gap: 10px !important;
  border: 1px solid var(--formal-border) !important;
  border-left: 3px solid #c5a77f !important;
  border-radius: 7px !important;
  background: var(--formal-surface-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--formal-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

body.premium-ui #content :where(.sales-definition, .quality-rule, .permission-rule, .sample-form-note, .jst-master-note) b {
  color: var(--formal-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

body.premium-ui #content :where(.bcc-action-footnote, .cross-channel-definitions) {
  margin-top: 10px !important;
  max-height: 48px !important;
  overflow: hidden !important;
}

body.premium-ui #content .permission-rule {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}

body.premium-ui #content .permission-rule > div {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

/* Buttons and controls */
body.premium-ui :where(button.primary, .btn-primary, .primary-action, button.secondary, .btn-secondary, button.ghost, .btn-ghost, .danger-button, .btn-danger, .link, .btn-link, .icon-button) {
  min-height: 36px !important;
  padding: 0 13px !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 540 !important;
  line-height: 1 !important;
  transform: none !important;
}

body.premium-ui :where(button.primary, .btn-primary, .primary-action, [data-variant="primary"]) {
  border: 1px solid #302e33 !important;
  background: #302e33 !important;
  color: #fff !important;
}

body.premium-ui :where(button.primary, .btn-primary, .primary-action, [data-variant="primary"]):hover {
  border-color: #18171a !important;
  background: #18171a !important;
}

body.premium-ui :where(button.secondary, .btn-secondary, button.ghost, .btn-ghost, .filter-button) {
  border: 1px solid var(--formal-border-strong) !important;
  background: #fff !important;
  color: var(--formal-text) !important;
}

body.premium-ui :where(button.secondary, .btn-secondary, button.ghost, .btn-ghost, .filter-button):hover {
  border-color: #b8afa6 !important;
  background: var(--formal-surface-soft) !important;
  color: var(--formal-ink) !important;
}

body.premium-ui :where(.link, .btn-link) {
  color: var(--formal-accent-dark) !important;
}

body.premium-ui :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid rgba(139, 107, 69, .58) !important;
  outline-offset: 2px !important;
}

body.premium-ui :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 38px !important;
  padding: 8px 11px !important;
  border: 1px solid var(--formal-border-strong) !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: var(--formal-ink) !important;
  box-shadow: none !important;
  font-size: 13px !important;
}

body.premium-ui :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: #aa8a63 !important;
  box-shadow: 0 0 0 3px rgba(139, 107, 69, .12) !important;
}

body.premium-ui label,
body.premium-ui .field > label {
  color: var(--formal-text) !important;
  font-size: 12px !important;
  font-weight: 560 !important;
}

/* Tables */
body.premium-ui #content :where(.table-wrap, .table-container, .auto-table-wrap) {
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.premium-ui #content table {
  color: var(--formal-text) !important;
  background: #fff !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}

body.premium-ui #content thead th {
  height: 42px !important;
  padding: 9px 13px !important;
  border-bottom: 1px solid var(--formal-border) !important;
  background: var(--formal-surface-soft) !important;
  color: #6f6970 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

body.premium-ui #content tbody td {
  height: 46px !important;
  padding: 10px 13px !important;
  border-bottom: 1px solid #efebe7 !important;
  color: var(--formal-text) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

body.premium-ui #content tbody tr:hover > td { background: #faf8f5 !important; }

/* Status tags */
body.premium-ui :where(.tag, .status-tag, .badge, .pill, .brand-badge, .operation-badge, .maturity-pill) {
  min-height: 23px !important;
  padding: 3px 7px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 550 !important;
  line-height: 15px !important;
}

body.premium-ui :where(.tag, .status-tag, .badge, .pill):not(.green):not(.success):not(.orange):not(.warn):not(.warning):not(.red):not(.danger):not(.error):not(.blue):not(.info):not(.ai) {
  border-color: #dfdad4 !important;
  background: #f4f1ed !important;
  color: #676168 !important;
}

body.premium-ui :where(.tag, .status-tag, .badge, .pill):where(.green, .success) {
  border-color: #c9e2d7 !important;
  background: var(--formal-success-soft) !important;
  color: var(--formal-success) !important;
}

body.premium-ui :where(.tag, .status-tag, .badge, .pill):where(.orange, .yellow, .warn, .warning) {
  border-color: #ead7b8 !important;
  background: var(--formal-warning-soft) !important;
  color: var(--formal-warning) !important;
}

body.premium-ui :where(.tag, .status-tag, .badge, .pill):where(.red, .danger, .error) {
  border-color: #ebcbd0 !important;
  background: var(--formal-danger-soft) !important;
  color: var(--formal-danger) !important;
}

/* Hero areas */
body.premium-ui #content :where(.page-hero, .hero, .dashboard-hero, .workflow-hero, .command-hero, .business-command-hero, .channel-hero, .sample-hero, .brake-hero, .fulfillment-hero, .fulfillment-hero-v3, .fulfillment-hero-v4, .ranking-hero, .finance-v1-hero) {
  padding: 20px 22px !important;
  border: 1px solid var(--formal-border) !important;
  border-left: 3px solid var(--formal-accent) !important;
  border-radius: 10px !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: var(--formal-shadow) !important;
  color: var(--formal-text) !important;
}

/* Business command center */
body.premium-ui #content .business-command { gap: 14px !important; }

body.premium-ui[data-current-page="dashboard"] .page-heading p {
  display: none !important;
}

body.premium-ui #content .bcc-header {
  padding: 16px 18px !important;
  border: 1px solid var(--formal-border) !important;
  border-left: 3px solid var(--formal-accent) !important;
  border-radius: 10px !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: var(--formal-shadow) !important;
}

body.premium-ui #content .bcc-header h2 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 650 !important;
}

body.premium-ui #content .bcc-header p {
  max-width: 700px !important;
  margin: 0 !important;
  color: var(--formal-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

body.premium-ui #content .bcc-safety {
  padding: 8px 11px !important;
  border: 1px solid #ead7b8 !important;
  border-radius: 7px !important;
  background: var(--formal-warning-soft) !important;
  color: var(--formal-warning) !important;
}

body.premium-ui #content :where(.bcc-stats, .bcc-module-grid, .bcc-queue-grid, .bcc-action-stages) {
  gap: 10px !important;
}

body.premium-ui #content :where(.bcc-stats button, .bcc-center-card, .bcc-lower > section, .bcc-work-queues, .bcc-uat-actions, .bcc-queue-grid button, .bcc-action-stage, .bcc-action-item) {
  border: 1px solid var(--formal-border) !important;
  border-radius: 9px !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

body.premium-ui #content .bcc-stats button { padding: 13px 15px !important; }
body.premium-ui #content .bcc-stats strong { font-size: 24px !important; font-weight: 650 !important; }

body.premium-ui #content .bcc-center-card {
  min-height: 98px !important;
  padding: 15px !important;
  border-left-width: 3px !important;
}

body.premium-ui #content .bcc-center-card > strong {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: var(--formal-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body.premium-ui #content :where(.bcc-lower > section, .bcc-work-queues, .bcc-uat-actions) {
  padding: 17px !important;
}

body.premium-ui #content .bcc-list button {
  border-radius: 7px !important;
  background: var(--formal-surface-soft) !important;
  color: var(--formal-text) !important;
}

body.premium-ui #content .bcc-queue-grid button { padding: 12px !important; }
body.premium-ui #content .bcc-queue-grid b { font-size: 21px !important; font-weight: 650 !important; }
body.premium-ui #content .bcc-queue-grid small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Cross-channel cards */
body.premium-ui #content .cross-channel-platforms { gap: 10px !important; }

body.premium-ui #content .cross-channel-platform {
  padding: 13px !important;
  border: 1px solid var(--formal-border) !important;
  border-radius: 9px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.premium-ui #content .cross-channel-platform p {
  display: -webkit-box !important;
  min-height: 36px !important;
  overflow: hidden !important;
  color: var(--formal-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body.premium-ui #content .cross-channel-metrics > div {
  border-radius: 7px !important;
  background: var(--formal-surface-soft) !important;
}

body.premium-ui #content .cross-channel-metrics :where(span, b) { font-size: 12px !important; }

/* Finance and operation pages */
body.premium-ui #content :where(.finance-v1-card, .finance-v1-metric, .finance-v1-boundary) {
  border-color: var(--formal-border) !important;
  border-radius: 9px !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.premium-ui #content .finance-v1-tabs button {
  min-height: 54px !important;
  border-radius: 7px !important;
}

body.premium-ui #content .finance-v1-tabs button.active {
  border-color: #d9c7b2 !important;
  background: var(--formal-accent-soft) !important;
  color: var(--formal-accent-dark) !important;
  box-shadow: inset 2px 0 var(--formal-accent) !important;
}

/* Modals */
body.premium-ui .modal {
  padding: 24px !important;
  background: rgba(28, 27, 31, .54) !important;
  backdrop-filter: blur(3px) !important;
}

body.premium-ui .modal-card {
  border: 1px solid var(--formal-border) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: var(--formal-shadow-float) !important;
}

body.premium-ui .modal-head {
  min-height: 58px !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--formal-border) !important;
  background: #fff !important;
}

body.premium-ui .modal-head h2 {
  color: var(--formal-ink) !important;
  font-size: 17px !important;
  font-weight: 650 !important;
}

body.premium-ui .modal-head .close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 7px !important;
  background: var(--formal-surface-muted) !important;
  color: var(--formal-muted) !important;
}

body.premium-ui #toast {
  border-radius: 7px !important;
  background: #2b292e !important;
  box-shadow: 0 12px 32px rgba(28, 25, 24, .2) !important;
}

/* Binxi Network authentication */
body.premium-ui .auth-gate {
  padding: 32px !important;
  background: #ebe8e3 !important;
  font-family: var(--formal-font) !important;
}

body.premium-ui .auth-shell {
  width: min(1040px, calc(100vw - 48px)) !important;
  min-height: 590px !important;
  grid-template-columns: 1.08fr .92fr !important;
  border: 1px solid rgba(72, 65, 58, .14) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 28px 70px rgba(38, 34, 30, .18) !important;
}

body.premium-ui .auth-story {
  position: relative !important;
  display: flex !important;
  padding: 68px 62px !important;
  overflow: hidden !important;
  background: #26252a !important;
  color: #fff !important;
}

body.premium-ui .auth-story::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--formal-accent);
  content: "";
}

body.premium-ui .auth-kicker {
  color: #c7aa84 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
}

body.premium-ui .auth-story h1 {
  margin: 18px 0 14px !important;
  color: #fff !important;
  font-size: clamp(36px, 4vw, 48px) !important;
  font-weight: 650 !important;
  letter-spacing: .06em !important;
}

body.premium-ui .auth-story p {
  max-width: 470px !important;
  margin: 0 !important;
  color: #cbc8c3 !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
}

body.premium-ui .auth-flow {
  gap: 8px !important;
  margin-top: 42px !important;
}

body.premium-ui .auth-flow span {
  padding: 9px 12px !important;
  border: 1px solid rgba(255, 255, 255, .15) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .05) !important;
  color: #f2efeb !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.premium-ui .auth-flow i {
  color: #b4936c !important;
}

body.premium-ui .auth-panel {
  padding: 60px 50px !important;
  background: #fff !important;
}

body.premium-ui .auth-mark {
  width: 54px !important;
  height: 54px !important;
  border-radius: 10px !important;
  background: var(--formal-accent) !important;
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 24px rgba(139, 107, 69, .2) !important;
}

body.premium-ui .auth-panel h2 {
  margin: 24px 0 8px !important;
  color: var(--formal-ink) !important;
  font-size: 26px !important;
  font-weight: 650 !important;
  letter-spacing: -.02em !important;
}

body.premium-ui .auth-panel > p {
  margin: 0 0 26px !important;
  color: var(--formal-muted) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

body.premium-ui .auth-panel form {
  gap: 17px !important;
}

body.premium-ui .auth-panel label {
  gap: 8px !important;
  color: var(--formal-ink-soft) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

body.premium-ui .auth-panel input {
  height: 48px !important;
  border: 1px solid var(--formal-border-strong) !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: var(--formal-ink) !important;
  font-family: var(--formal-font) !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

body.premium-ui .auth-panel input:focus {
  border-color: var(--formal-accent) !important;
  box-shadow: 0 0 0 3px rgba(139, 107, 69, .12) !important;
}

body.premium-ui .auth-submit {
  height: 48px !important;
  border-radius: 7px !important;
  background: #2f2d31 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

body.premium-ui .auth-submit:hover {
  background: #1f1e21 !important;
}

body.premium-ui .auth-panel > small {
  margin-top: 20px !important;
  color: #98918a !important;
  font-size: 11px !important;
}

body.premium-ui .auth-error {
  border: 1px solid #edcfcc !important;
  border-radius: 7px !important;
  background: #fff5f4 !important;
  color: #a44940 !important;
}

/* Responsive */
body.premium-ui.sidebar-collapsed > aside { width: 68px !important; }
body.premium-ui.sidebar-collapsed > main {
  width: calc(100% - 68px) !important;
  margin-left: 68px !important;
}

@media (max-width: 1100px) {
  body.premium-ui { --ui-page-padding: 22px; }
  body.premium-ui main > #content { padding-inline: 22px !important; }
}

@media (max-width: 900px) {
  body.premium-ui > aside {
    width: var(--formal-sidebar) !important;
    transform: translateX(-100%) !important;
  }
  body.premium-ui > main,
  body.premium-ui.sidebar-collapsed > main {
    width: 100% !important;
    margin-left: 0 !important;
  }
  body.premium-ui.sidebar-collapsed > aside {
    width: var(--formal-sidebar) !important;
    transform: translateX(0) !important;
  }
  body.premium-ui main > header { padding-inline: 16px !important; }
  body.premium-ui main > #content { padding: 20px 16px 40px !important; }
  body.premium-ui .page-heading h1,
  body.premium-ui #title { font-size: 19px !important; }
  body.premium-ui #content .card-head .sub { max-width: 68vw !important; }
  body.premium-ui .auth-gate { padding: 16px !important; }
  body.premium-ui .auth-shell {
    width: min(500px, calc(100vw - 32px)) !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
  }
  body.premium-ui .auth-story { display: none !important; }
  body.premium-ui .auth-panel { padding: 42px 32px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.premium-ui *,
  body.premium-ui *::before,
  body.premium-ui *::after { transition-duration: .01ms !important; }
}

/* System-wide concise business view
   Keep transactional data, errors and form guidance; remove page-level exposition. */
body.premium-ui main > header .page-heading p,
body.premium-ui #content .card-head .sub,
body.premium-ui #content .bcc-section-title p,
body.premium-ui #content .bcc-action-footnote,
body.premium-ui #content :where(
  .page-hero,
  .hero,
  .dashboard-hero,
  .workflow-hero,
  .command-hero,
  .business-command-hero,
  .channel-hero,
  .sample-hero,
  .brake-hero,
  .fulfillment-hero,
  .fulfillment-hero-v3,
  .fulfillment-hero-v4,
  .ranking-hero,
  .finance-v1-hero,
  .sales-order-notice
) :where(.kicker, p),
body.premium-ui #content :where(
  .ranking-definition,
  .sales-formula,
  .manual-sales-tip,
  .formula-panel,
  .formula-row,
  .replenish-formula-ledger,
  .ops-formula,
  .cross-channel-definitions
) {
  display: none !important;
}

body.premium-ui #content :where(
  .sales-definition,
  .sales-guide > div,
  .quality-rule,
  .permission-rule > div,
  .channel-rules > div,
  .capacity-rule > div,
  .capacity-rule-v2 > div,
  .fulfillment-rule > div,
  .fulfillment-lifecycle-rule > div,
  .fulfillment-maturity-guide > div,
  .final-fulfillment-rules > div,
  .jst-field-rules > div,
  .readiness-rules > div,
  .trust-mini-rules,
  .module-readiness-notice
) > :where(span, small, p, dd) {
  display: none !important;
}

body.premium-ui #content :where(
  .sales-definition,
  .quality-rule,
  .sales-guide > div,
  .permission-rule > div,
  .channel-rules > div,
  .capacity-rule > div,
  .capacity-rule-v2 > div,
  .fulfillment-rule > div,
  .fulfillment-lifecycle-rule > div,
  .fulfillment-maturity-guide > div,
  .final-fulfillment-rules > div,
  .jst-field-rules > div,
  .readiness-rules > div,
  .trust-mini-rules,
  .module-readiness-notice
) {
  min-height: 0 !important;
  margin-block: 0 10px !important;
  padding: 9px 11px !important;
}

body.premium-ui #content .jst-acceptance-v5-rules {
  display: none !important;
}

body.premium-ui #content :where(
  .page-hero,
  .hero,
  .dashboard-hero,
  .workflow-hero,
  .command-hero,
  .business-command-hero,
  .channel-hero,
  .sample-hero,
  .brake-hero,
  .fulfillment-hero,
  .fulfillment-hero-v3,
  .fulfillment-hero-v4,
  .ranking-hero,
  .finance-v1-hero,
  .sales-order-notice
) {
  min-height: 0 !important;
  padding-block: 16px !important;
}

body.premium-ui #content :where(
  .page-hero,
  .hero,
  .dashboard-hero,
  .workflow-hero,
  .command-hero,
  .business-command-hero,
  .channel-hero,
  .sample-hero,
  .brake-hero,
  .fulfillment-hero,
  .fulfillment-hero-v3,
  .fulfillment-hero-v4,
  .ranking-hero,
  .finance-v1-hero,
  .sales-order-notice
) h2 {
  margin-block: 0 !important;
}

body.premium-ui #content :where(
  .customer-service-hero,
  .customer-todos-head,
  .finance-control-hero,
  .after-sale-hero,
  .financial-hero
) :where(.kicker, p),
body.premium-ui #content :where(
  .trial-explain,
  .sales-order-definitions,
  .customer-definition,
  .finance-v1-automation-policy,
  .finance-v1-data-guidance[data-trusted="true"]
),
body.premium-ui #content .customer-service-shortcuts button span,
body.premium-ui #content .finance-v1-guidance-action small {
  display: none !important;
}

body.premium-ui #content :where(
  .customer-service-hero,
  .customer-todos-head,
  .finance-control-hero,
  .after-sale-hero,
  .financial-hero
) {
  min-height: 0 !important;
  padding-block: 16px !important;
}

body.premium-ui #content :where(
  .customer-service-hero,
  .customer-todos-head,
  .finance-control-hero,
  .after-sale-hero,
  .financial-hero
) h2 {
  margin-block: 0 !important;
}

/* Layout stability contract
   Keep every module inside the application shell at desktop zoom, split-view
   widths and compact browser widths. Wide business tables scroll inside their
   own card instead of moving the whole page. */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body.premium-ui,
body.premium-ui > main,
body.premium-ui main > header,
body.premium-ui main > #content {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.premium-ui {
  width: 100% !important;
  overflow-x: hidden !important;
}

body.premium-ui main > header {
  overflow: hidden !important;
}

body.premium-ui .page-heading {
  display: block !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin-right: auto !important;
  overflow: hidden !important;
}

body.premium-ui .page-heading h1,
body.premium-ui #title {
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

body.premium-ui :where(.header-context, .header-action, .mobile-menu-toggle) {
  flex: 0 0 auto !important;
}

body.premium-ui main > #content > *,
body.premium-ui main > #content .card,
body.premium-ui main > #content :where([class*="-grid"], [class*="-layout"], [class*="-board"]) > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Navigation must remain directly interactive after responsive/auth transitions. */
body.premium-ui:not(.auth-locked) > aside,
body.premium-ui:not(.auth-locked) > aside nav,
body.premium-ui:not(.auth-locked) > aside nav button[data-page] {
  pointer-events: auto !important;
}
body.premium-ui:not(.auth-locked) > aside { z-index: 60 !important; }
body.premium-ui:not(.auth-locked) > aside nav button[data-page] { position: relative; z-index: 1; }
body.premium-ui .sidebar-backdrop { display: none !important; pointer-events: none !important; }

body.premium-ui #content :where(.table-wrap, .table-container, .auto-table-wrap) {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

body.premium-ui #content :where(.card, .panel):has(> table),
body.premium-ui #modalBody :where(.card, .panel):has(> table) {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

body.premium-ui #content :where(.table-wrap, .table-container, .auto-table-wrap) > table {
  margin: 0 !important;
}

body.premium-ui #content :where(.toolbar, [class$="-toolbar"], [class*="-filters"]) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Production-order archive controls previously competed for one flex row and
   could collapse to one Chinese character per line. */
body.premium-ui #content .toolbar:has(#showArchivedOrders) {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) max-content !important;
  gap: 10px 16px !important;
  align-items: center !important;
}

body.premium-ui #content .toolbar:has(#showArchivedOrders) > #search {
  width: 100% !important;
  min-width: 0 !important;
  grid-column: 1 !important;
}

body.premium-ui #content .uat-archive-filter {
  display: inline-flex !important;
  grid-column: 2 !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: max-content !important;
  margin: 0 !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}

body.premium-ui #content .uat-archive-filter > input[type="checkbox"] {
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin: 0 !important;
}

body.premium-ui #content .toolbar:has(#showArchivedOrders) > .uat-archive-filter + .sub {
  display: none !important;
}

body.premium-ui #content .order-manage-table {
  min-width: 1120px !important;
}

body.premium-ui #content .order-manage-table .order-actions {
  min-width: 150px !important;
  white-space: normal !important;
}

/* Dense ledger tables must retain readable business columns. */
body.premium-ui[data-current-page="sales-orders"] .sales-order-table {
  min-width: 1320px !important;
}

body.premium-ui[data-current-page="sales-orders"] .sales-order-table :where(th, td):nth-child(4) {
  min-width: 132px !important;
}

body.premium-ui[data-current-page="sales-orders"] .sales-order-table td:nth-child(4) .sub {
  white-space: nowrap !important;
}

/* Keep both scrollbars reachable while reviewing the tall permission matrix. */
body.premium-ui[data-current-page="accounts"] .permission-matrix-card > .table-wrap {
  max-height: min(62vh, 560px) !important;
  overflow: auto !important;
}

body.premium-ui[data-current-page="accounts"] .permission-matrix-card > .table-wrap thead th {
  top: 0 !important;
  z-index: 4 !important;
}

body.premium-ui[data-current-page="accounts"] .permission-matrix-card > .table-wrap thead th:first-child {
  z-index: 6 !important;
}

body.premium-ui[data-current-page="accounts"] .sensitive-permission-strip {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  box-sizing: border-box !important;
}

@media (max-width: 1100px) {
  body.premium-ui[data-current-page="samples"] :where(.sample-inventory-filters, .sample-history-filters-v2) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.premium-ui[data-current-page="samples"] :where(.sample-inventory-filters, .sample-history-filters-v2) > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 900px) {
  body.premium-ui main > header {
    gap: 10px !important;
  }

  body.premium-ui .page-heading {
    display: block !important;
  }

  body.premium-ui .mobile-menu-toggle {
    display: grid !important;
  }

  body.premium-ui main > #content {
    width: 100% !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 620px) {
  body.premium-ui #content .toolbar:has(#showArchivedOrders) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.premium-ui #content .toolbar:has(#showArchivedOrders) > #search,
  body.premium-ui #content .uat-archive-filter {
    grid-column: 1 !important;
  }

  body.premium-ui #content .uat-archive-filter {
    justify-self: start !important;
  }

  body.premium-ui[data-current-page="samples"] :where(.sample-inventory-filters, .sample-history-filters-v2) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}